/* Estos estilos van fijos en panal *************/
table{
    font-size: 12px !important;
}
.principal_mobile{
    padding:0px 6px !important;
}
.principal_mobile td, .principal_mobile th{
    padding:4px !important;
} 
.caja_superior_mobile{
    background-color:#f5fffa !important; 
    margin:0px !important; 
    width:100%;
    padding:3px 2px 3px 15px;
    font-size:11px;
    border-bottom:2px solid #ccc;
}
.campo_error{
    border: 1px solid red !important;
    background-color: #ffe2d6 !important;
}
.campos {
    width: 100%;
    display: block;  
    padding: 3px 5px !important;
    font-size: 14px; 
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.campos:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.campos::-moz-placeholder {
    color: #999;
    opacity: 1;
}
.campos:-ms-input-placeholder {
    color: #999;
}
.campos::-webkit-input-placeholder {
    color: #999;
} 
.campos[disabled],
.campos[readonly],
fieldset[disabled] .campos {
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1;
}
.hovered tr:hover {
    background-color: #e8fdff;
}  
.table tr td, .table tr th{
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.tabla_botones{
    border:1px solid #ccc; 
    background-color: #feffe6 !important;
    margin-bottom:5px !important;
}
/*----Mobile */
.num_mobile{
  font-size:27px !important;
  width: 100%;
  text-align:center;
  height:60px;
}
.input_scan{
  text-align:center; 
  font-size:20px; 
  height:50px !important;
  width:100%;
}
#boton_volver_mobile{
  bottom:0;
  position:fixed;
  width:100%;
  padding:2px !important;
}

/*---------------
    Fondos
------------------*/
.fondo_black {
  background-color: #1B1C1D;
  color: rgba(255, 255, 255, 0.9);
  border-color: 2px solid rgba(255, 255, 255, 0.9);
}

.fondo_red {
  background-color: #FFE8E6;
  color: #DB2828;
  border-color: 2px solid #DB2828;
}

.fondo_red .header {
  color: #c82121;
}

.fondo_orange {
  background-color: #FFEDDE;
  color: #F2711C;
  border-color: 2px solid #F2711C;
}

.fondo_orange .header {
  color: #e7640d;
}

.fondo_yellow {
  background-color: #FFF8DB;
  color: #B58105;
  border-color: 2px solid #B58105;
}

.fondo_yellow .header {
  color: #9c6f04;
}

.fondo_olive {
  background-color: #FBFDEF;
  color: #8ABC1E;
  border-color: 2px solid #8ABC1E;
}

.fondo_olive .header {
  color: #7aa61a;
}

.fondo_green {
  background-color: #E5F9E7;
  color: #1EBC30;
  border-color: 2px solid #1EBC30;
}

.fondo_green .header {
  color: #1aa62a;
}

.fondo_teal {
  background-color: #E1F7F7;
  color: #10A3A3;
  border-color: 2px solid #10A3A3;
}

.fondo_teal .header {
  color: #0e8c8c;
}

.fondo_blue {
  background-color: #DFF0FF;
  color: #2185D0;
  border-color: 2px solid #2185D0 !important;
}

.fondo_blue .header {
  color: #1e77ba;
}

.fondo_violet {
  background-color: #EAE7FF;
  color: #6435C9;
  border-color: 2px solid #6435C9;
}

.fondo_violet .header {
  color: #5a30b5;
}

.fondo_purple {
  background-color: #F6E7FF;
  color: #A333C8;
  border-color: 2px solid #A333C8;
}

.fondo_purple .header {
  color: #922eb4;
}

.fondo_pink {
  background-color: #FFE3FB;
  color: #E03997;
  border-color: 2px solid #E03997;
}

.fondo_pink .header {
  color: #dd238b;
}

.fondo_brown {
  background-color: #F1E2D3;
  color: #A5673F;
  border-color: 2px solid #A5673F;
}

.fondo_brown .header {
  color: #935b38;
}

.sql-cell { 
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  padding: 8px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
}

/* Para crear barras de desplazamiento más estilizadas */
.sql-cell::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sql-cell::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.sql-cell::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.sql-cell::-webkit-scrollbar-thumb:hover {
  background: #555;
}