/* RESTAURAR EL CALENDARIO NATIVO EN LOS INPUTS DE FECHA/HORA.
   Bootstrap 4 (bootstrap.css) fuerza -webkit-appearance: listbox, lo que oculta
   el icono del calendario y el popup nativo de Chrome. Lo revertimos a auto. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: auto;
    appearance: auto;
    /* Sin animaciones en el propio input: si el input se anima al enfocarlo
       (p. ej. la transition del borde de .form-control de Bootstrap), el
       navegador cierra el calendario nativo al instante. */
    transition: none !important;
    transform: none !important;
    animation: none !important;
}

/* CAMPOS BLOQUEADOS.
   El fondo gris ya lo dan main-style.css y dark-theme.css; el cursor no lo pone nadie.
   Regla unica: basta con ponerle readonly o disabled al campo, no hay que tocar el CSS de
   cada formulario. */
.form-control[readonly],
.form-control:disabled {
    cursor: not-allowed;
}

/*OCULTAR UN ELEMENTO*/
.oculto {display: none !important;}

/*OCULTAR UN ELEMENTO DEBIDO A LA AGRUPACION EN PEDIDOS*/
.ocultoAgrupacion {display: none !important;}

/*HACER VISIBLE UN ELEMENTO*/
.visible {display: block !important;}

/*INPUT PARA SELECCIONAR UN FICHERO A SUBIR*/
.input-file-click{width: 100% !important;}


/*BARRA DE PROGRESO PARA SUBIDA DE FICHEROS*/
.progressBarER{
    height: 30px !important;
    margin-top: 7px !important;
    display: inline-flex !important;
}

/*CONTENEDOR PARA LA SUBIDA DE FICHEROS*/
.formER{
    display: inline-block !important;
    float: right !important;
    margin-bottom: 25px !important;
}

/*MODIFICACIÓN DEL CONTENEDOR DE AYUDA*/
.container-fluidER{
    padding-bottom: 10px !important;
    padding-right: 10px !important;
}

/*INPUTS AUTOCOM DENTRO DE CELDAS*/
td.tdInputAutocomp input {
    border-radius: 0px !important;
    padding: 3px !important;
}

label.required::after {
  content: " *";
  color: red;
  font-weight: bold;
  margin-left: 2px;
  display: inline-block; 
}

label.requiredPeso::after {
  content: " %";
  color: red;
  font-weight: bold;
  margin-left: 2px;
  display: inline-block; 
}

td.tdInputAutocomp.new input {
    border-color: red #f62d51 !important;
}

/*CAMBIO DE ESTILO EN LA BARRA DESLIZANTE DEL CHECKBOX CUANDO ESTÁ DESHABILITADO*/
.switch label input[type=checkbox][disabled] + .lever.switch-col-light-green {
    opacity: 100% !important;
}

/*CAMBIO DE ESTILO EN EL BOTÓN DEL CHECKBOX CUANDO ESTÁ DESHABILITADO*/
.switch label input[type=checkbox][disabled] + .lever.switch-col-light-green::after {
    opacity: 0% !important;
}

/*OPACIDAD AL 50%*/
.opaco50 {
    opacity: 50% !important;
}

/*OPACIDAD AL 25%*/
.opaco25 {
    opacity: 25% !important;
}

/*OPACIDAD AL 25%*/
.opaco30 {
    opacity: 30% !important;
}

/*RESALTAR ELEMENTO*/
.valorRojo {
    color: red !important;
    font-weight: bold !important;
}

/*MARCAR INPUT*/
.inputMarcado {
    border-color: red !important;
}

/* RESALTAR CAMPO OBLIGATORIO */
.campoObligatorio {
    border-bottom: 1px solid black !important;
}

.er-select .dropdown .btn.dropdown-toggle.datoCambiado {
    background-color: rgba(0,123,255,0.1) !important;
}

.botonaddDisabled{

}

table.dataTable tr.odd.row_selected td,
table.dataTable tr.even.row_selected td
{   
    background-color: pink;
}

.incompatible{
    background-color: pink;
}

.materiaEnsilo {
    overflow: hidden;
    position: absolute;
    display: block;
    /*top: 2em;*/
    /*width: 50%;*/
    /*font-size: 2em;*/
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.materiaEnsilo{
    animation-name: animacion;
}

@keyframes animacion {
    0%, 8.3% { top: 0%; opacity: 0; }
    8.3%,25% { top: -20%; opacity: 1; }
    33.33%, 100% { top: 0%; opacity: 0; }
}

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

div.halfLeft{
    width: 50%; 
    float:left;
}

div.halfRight{
    width: 50%; 
    float:right;
}

div.thirdLeft {
    width: 36.66%; 
    float: left;
}

div.thirdCenter {
    width: 33.33%; 
    float: left;
}

div.thirdRight {
    width: 30%; 
    float: left;
}

.modoRapido{
    position:relative;
}

.modoNormal{
    margin-left: 20px;
    position:relative;
}

/*CHECKBOX COMPARTIMENTOS EN PEDIDOS*/
[type="checkbox"].checkComp {
    position: relative !important;
    left: 0px !important;
    opacity: 100 !important;
    margin: 3px !important;
}


/*ANIMACION DE ICONO DE REFRESCAR FORMULARIO AL CLICAR*/
.modal .refresh_modal:click{
    opacity:1;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg)
}

/*ESTILO DE ICONO DE REFRESCAR FORMULARIO*/
.modal .modal-header .refresh_modal{
    display:inline-block;
    position:absolute;
    padding:0;
    top:7px;
    right:100px;
    opacity:.1;
    color:#484848;
    font-size:24px;
    cursor:pointer;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition:all .6s;
    -moz-transition:all .6s;
    -o-transition:all .6s;
    -ms-transition:all .6s;
    transition:all .6s
}

/*ANIMACION DE ICONO DE REFRESCAR FORMULARIO AL PASAR POR ENCIMA*/
.modal .modal-header .refresh_modal:hover{
    opacity:1;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg)
}

/*ESTILO DE separador*/
.modal .modal-header .separador{
    display:inline-block;
    position:absolute;
    width: 5px;
    background-color: #484848;
    right:133px;
    opacity:.1;
    color:#484848;
    font-size:24px;
    cursor:pointer;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition:all .6s;
    -moz-transition:all .6s;
    -o-transition:all .6s;
    -ms-transition:all .6s;
    transition:all .6s
}

/*ESTILO DE ICONO DE DESCARGA ETIQUETA WORD*/
.modal .modal-header .word{
    display:inline-block;
    position:absolute;
    padding:0;
    top:7px;
    right:193px;
    opacity:.3;
    color:#484848;
    font-size:24px;
    cursor:pointer;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition:all .6s;
    -moz-transition:all .6s;
    -o-transition:all .6s;
    -ms-transition:all .6s;
    transition:all .6s
}

/*ANIMACION DE ICONO DE REFRESCAR FORMULARIO AL PASAR POR ENCIMA*/
.modal .modal-header .word:hover{
    opacity:1;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg)
}

/*ESTILO DE ICONO DE DESCARGA ETIQUETA PDF*/
.modal .modal-header .pdf{
    display:inline-block;
    position:absolute;
    padding:0;
    top:7px;
    right:235px;
    opacity:.3;
    color:#484848;
    font-size:24px;
    cursor:pointer;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition:all .6s;
    -moz-transition:all .6s;
    -o-transition:all .6s;
    -ms-transition:all .6s;
    transition:all .6s
}

/*ANIMACION DE ICONO DE REFRESCAR FORMULARIO AL PASAR POR ENCIMA*/
.modal .modal-header .pdf:hover{
    opacity:1;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg)
}

/*ESTILO DE ICONO DE DESCARGA PALET*/
.modal .modal-header .palets{
    display:inline-block;
    position:absolute;
    padding:0;
    top:7px;
    right:145px;
    opacity:.3;
    color:#484848;
    font-size:24px;
    cursor:pointer;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition:all .6s;
    -moz-transition:all .6s;
    -o-transition:all .6s;
    -ms-transition:all .6s;
    transition:all .6s
}

/*ANIMACION DE ICONO DE REFRESCAR FORMULARIO AL PASAR POR ENCIMA*/
.modal .modal-header .palets:hover{
    opacity:1;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg)
}

/*ESTILO DE ICONO DE NUEVO FORMULARIO*/
.modal .modal-header .nuevo{
    display:inline-block;
    position:absolute;
    padding:0;
    top:7px;
    right:145px;
    opacity:.3;
    color:#484848;
    font-size:24px;
    cursor:pointer;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition:all .6s;
    -moz-transition:all .6s;
    -o-transition:all .6s;
    -ms-transition:all .6s;
    transition:all .6s
}

/*ANIMACION DE ICONO DE NUEVO FORMUALRIO FORMULARIO AL PASAR POR ENCIMA*/
.modal .modal-header .nuevo:hover{
    opacity:1;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg)
}

/*BLOQUE DE AGRUPACION DE SOLICITUDES SIEMPRE VISIBLE EN LA PARTE SUPERIOR DEL INFORME*/
.er--container-send.fixed-top{
    position: fixed;
    top: 15% !important;
    right: 0;
    left: 0;
    z-index: 1030;
    width: calc(80% - 10px) !important;
    display: inline-block;
    margin: 5px 250px 0 !important;
}

/* ICONOS DE ESTADOS PARA MOVIMIENTOS */

.movimientoEstado0:before{
    content: "\f005";
}
.movimientoEstado1:before{
    content: "\f24e" !important;
}
.movimientoEstado2:before{
    content: "\f005" !important;
}
.movimientoEstado3:before{
    content: "\f013" !important;
}
.movimientoEstado4:before{
    content: "\f00c" !important;
}
.movimientoEstado5:before{
    content: "\f00c" !important;
}
.movimientoEstado6:before{
    content: "\f00c" !important;
}


/*.movimientoEstado0:before{
    content: "\f005";
}

.movimientoEstado1:before{
    content: "\f013";
}

.movimientoEstado2:before{
    content: "\f24e";
}

.movimientoEstado3:before{
    content: "\f02f";
}


.movimientoEstado4:before{
    content: "\f00c";
}

.movimientoEstado5:before{
    content: "\f11e";
}

.movimientoEstado6:before{
    content: "\f128";
}

.movimientoEstado7:before{
    content: "\f3e5";
}

.movimientoEstado8:before{
    content: "\f128";
}

.movimientoEstado9:before{
    content: "\f5cd";
}

.movimientoEstado10:before{
    content: "\f00d";
}

.movimientoEstadoIncompleto:before{
    content: "\f071";
}


.movimientoEstado12:before{
    content: "\f21a";
}*/

.sacosBigBag:before{
    content: "\f468";
}

/* ICONOS DE NATURALEZA */
.materiaMedicamento:before{
   content: "\f486"; 
}

.materiaVariante:before{
   content: "\f217"; 
}

.materiaCoccidiostato:before{
   content: "\f492"; 
}



/* ICONOS DE ESTADOS PARA ORDENES */

.ordenEstado0:before{
    content: "\f005";
}

.ordenEstado1:before{
    content: "\f013";
}

.ordenEstado2:before{
    content: "\f00c";
}

.ordenEstado3:before{
    content: "\f1da";
}

.ordenEstado4:before{
    content: "\f071";
}

.ordenEstadoIncompleto:before{
    content: "\f071";
}

.ordenEstado8:before{
    content: "\f1da";
}

/* ICONOS DE ESTADOS PARA EXPEDICIONES */

.expedicionEstado1:before{
    content: "\f005";
}

.expedicionEstado2:before{
    content: "\f013";
}

.expedicionEstado6:before{
    content: "\f11e";
}

.expedicionEstado7:before{
    content: "\f3e5";
}

.expedicionEstado10:before{
    content: "\f07a";
}

/* ICONOS DE ESTADO PARA PEDIDOS */

.pedidoEstado0:before{
    content: "\f1da";
}

.pedidoEstado1:before{
    content: "\f0a3";
}

.pedidoEstado2:before{
    content: "\f46c";
}

.pedidoEstado3:before{
    content: "\f11e";
}

.pedidoEstado4:before{
    content: "\f05e";
}

/* ICONOS DE TIPOS DE MATERIA */

.tipoMateriaFormula:before{
    content: "\f12b";
}

.tipoMateriaPrimaVenta:before{
    content: "\f291";
}  

.tipoMateriaPrima:before{
    content: "\f52d";
}     

.tipoMateriaVenta:before{
    content: "\f07a";
}     

.tipoMateriaCopos:before{
    content: "\f2dc";
}     

.tipoMateriaEnsaque:before{
    content: "\f49e";
}

.tipoMateriaManual:before{
    content: "\f256";
}

.tipoMateriaComercial:before{
    content: "\e05e";
}

.tipoMateriaMolturado:before{
    content: "\f5a7";
}

.tipoMateriaPack:before{
    content: "\f1b2";
}


.iconoGraficaLinea:before{
    content: "\f201";
  
}

.iconoGraficaBarras:before{
    content: "\f080";
  
}

/* ICONOS DE ESTADOS PARA ANALITICAS / LABORATORIOS */

.laboratorioEstadoApta:before{
    content: "\f00c";
}

.laboratorioEstadoNo:before{
    content: "\f00d";
}  

.laboratorioEstadoDevuelto:before{
    content: "\f112";
}     

.laboratorioEstadoPendiente:before{
    content: "\f128";
}

/* ICONOS DE ESTADOS PARA PEDIDOS */

/* ICONOS DE ESTADOS PARA MATRICES */
.matrizProcesando:before{
    content: "\f013";
}

.matrizFinalizado:before{
    content: "\f11e";
}

/* ESTILO PARA BOTONES DE DESCARGA DE LOTES */

.btn-etiquetaLote {
    position: relative;
    font-size: 15px;
    display: inline-block;
    line-height: 1;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

/* VERDE */

.verde{
    font-weight: 500 !important;
    color: green !important;
}

/* ROJO */

.rojo{
    font-weight: 500 !important;
    color: red !important;
}

/* CENTRAR CAMPOS EN TABLAS */

.text-center{
    vertical-align: middle!important;
}

.text-left{
    vertical-align: middle!important;
}

.text-right{
    vertical-align: middle!important;
}


/* CONTROL DE EXPEDICION */

/* ocultar boton de cerrar una expedicion */

.element-content.camion.bloqueoCerrar .delete_panel{
    display: none;
}

.element-content.camion.bloqueoImprimir .imprimir{
    display: none;
}

.element-content.camion.bloqueoCambioSilo .selectSilos{
    display: none;
}

.element-content.camion.bloqueoPesada .basculas{
    display: none;
}

/*.element-content.camion.bloqueoCambioSilo .basculas{
    display: none;
}*/

/* placeholders a la derecha */
.placeholder-derecha::-webkit-input-placeholder {
    text-align: right;
}

/* Estilo para boton guardar de Usuarios Seguridad */
.er-security-block .top-block{
    margin-bottom:25px;
    padding-bottom:35px;
    position:relative;
    text-align:center
}

/* Estilo para boton guardar de Usuarios Seguridad */
.er-security-block .top-block:after{
    content:'';
    position:absolute;
    width:100%;
    height:1px;
    background-color:rgba(72,72,72,.2);
    bottom:0;
    left:0
}

/* Leyenda campo obligatorio */
.leyendaCampoObligatorio {
    font-size: 12px;
    font-weight: 500;
    float: left;
    margin-right: auto !important;
}

/* Añadir icono de lupa en autocompleta */
.easy-autocomplete input{
    background-image: url(../img/icon_search.png) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
}

/* Titulos dentro de los contenedores de agrupacion en pedidos */
.panel-content h4{
    padding: 0 15px;
    color: #c30e2e!important;
}

/* Estilo para la tabla de agrupacion de expediciones*/
.er--container-send #content_send_expedicion.container--panel .er-table.table.dataTable thead>tr th {
    background-color: rgba(0,153,255,0.5)!important;
    border-bottom: 1px solid rgba(72,72,72,.7);
}

.er--container-send #content_send_expedicion.container--panel .er-table tfoot tr {
    background-color: rgba(0,153,255,0.2)!important;
}

/* Estilo para la tabla de agrupacion de ensaques*/
.er--container-send #content_send_ensaque.container--panel .er-table.table.dataTable thead>tr th {
    background-color: rgba(61,160,91,0.5)!important;
    border-bottom: 1px solid rgba(72,72,72,.7);
}

.er--container-send #content_send_ensaque.container--panel .er-table tfoot tr {
    background-color: rgba(61,160,91,0.2)!important;
}

/* Estilo para la tabla de agrupacion de ordenes*/
.er--container-send #content_send_formulacion.container--panel .er-table.table.dataTable thead>tr th {
    background-color: rgba(197,142,24,0.5)!important;
    border-bottom: 1px solid rgba(72,72,72,.7);
}

.er--container-send #content_send_formulacion.container--panel .er-table tfoot tr {
    background-color: rgba(197,142,24,0.2)!important;
}

/* Estilo para la tabla de agrupacion de ordenes*/
.er--container-send #content_send_preparado.container--panel .er-table.table.dataTable thead>tr th {
    background-color: rgba(197, 116, 24,0.5)!important;
    border-bottom: 1px solid rgba(72,72,72,.7);
}

.er--container-send #content_send_preparado.container--panel .er-table tfoot tr {
    background-color: rgba(197, 116, 24,0.2)!important;
}

/* Elemento div para rellenar huecos y ocupar espacio */
div.separador {
    padding-bottom: 160px;
}

/* Elemento div para rellenar huecos y ocupar espacio */

div.separador-xsm {
    padding-bottom: 25px;
}

div.separador-sm {
    padding-bottom: 75px;
}

/* Elemento div para rellenar huecos y ocupar espacio */
div.separador-lg {
    padding-bottom: 250px;
}

/* Cambiar cursor para botones  */
a.add-record {
    cursor: pointer;
}

a.iconoAnalisis {
    cursor: pointer;
}

a.delete-record {
    cursor: pointer;
}

a.open-modal {
    cursor: pointer;
}

.w2{
    width: 2% !important;
}

.w5{
    width: 5% !important;
}
.w6{
    width: 6% !important;
}
.w7{
    width: 7% !important;
}

.w10{
    width: 10% !important;
}
.w15{
    width: 15% !important;
}

.w17{
    width: 17% !important;
}
.w18{
    width: 18% !important;
}
.w19{
    width: 19% !important;
}
.w20{
    width: 20% !important;
}
.w22{
    width: 22% !important;
}
.w23{
    width: 23% !important;
}
.w25{
    width: 25% !important;
}
.w30{
    width: 30% !important;
}
.w35{
    width: 35% !important;
}
.w40{
    width: 40% !important;
}
.w45{
    width: 45% !important;
}
.w50{
    width: 50% !important;
}
.w55{
    width: 55% !important;
}
.w60{
    width: 60% !important;
}
.w65{
    width: 65% !important;
}
.w70{
    width: 70% !important;
}
.w70{
    width: 70% !important;
}
.w75{
    width: 75% !important;
}
.w80{
    width: 80% !important;
}
.w85{
    width: 85% !important;
}
.w90{
    width: 90% !important;
}
.w95{
    width: 95% !important;
}
.w100{
    width: 100% !important;
}

/* Fila seleccionada cuando se selecciona/elimina un item en un tablaData  */
tr.filaSeleccionada {
    background-color: rgb(0,0,0,0.2) !important;
}

/* Fila seleccionada cuando se selecciona/elimina un item en un tablaData  */
tr.filaSeleccionada[revisar] {
    background-color: rgba(160, 200, 207,1) !important;
}

/* Fila seleccionada cuando se selecciona/elimina un item en un tablaData  */
tr.filaSeleccionada[relanzable] {
    background-color: rgba(235,145,0,0.8) !important;
}

span[onclick]{
    cursor: pointer;
}

a[onclick]{
    cursor: pointer;
}

a[href]{
    cursor: pointer;
}

a[data-toggle] {
    cursor: pointer;
}

/* Cuando se elige un silo, cambiamos su z-index hasta deseleccionarlo para que el popup no aparezca por detras de los otros silos */
div.siloPopup {
    z-index: 9999 !important;
}

/* Estilo que se aplica a los input cuyo valor no coincida con el previo */
input.datoCambiado {
    background-color: rgba(0,123,255,0.1) !important;
}

/* Estilo que se aplica a los textarea cuyo valor no coincida con el previo */
textarea.datoCambiado {
    background-color: rgba(0,123,255,0.1) !important;
}

/* Clases para los filtros */
.navbar-page-options .header-block .page-options .main-options .taphover .main-menu-options {
    z-index: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    position: absolute;
    display: inherit;
    pointer-events: none;
    left: 0;
    background-color: rgba(72, 72, 72, 0.9);
    width: 100%;
}

.navbar-page-options.menu-desck .header-block .page-options .main-options .taphover.mostrarFiltro .main-menu-options, .navbar-page-options.menu-desck .header-block .page-options .main-options .taphover.hover .main-menu-options {
    opacity: 1;
    max-height: 700px;
    z-index: 999;
    pointer-events: auto;
    padding-bottom: 15px;
    overflow: inherit;
}

/* El calendario nativo de <input type="date"> se cierra al instante si un
   contenedor antecesor se está animando. El desplegable del filtro
   (.main-menu-options) tenía una transition de 0.3s en max-height: mientras se
   abre, el input se mueve y el navegador cierra el picker. Quitamos la
   animación del desplegable (apertura instantánea) para que el calendario
   funcione. Afecta a todos los filtros de la app. */
.block-filter-fx,
.block-filter-fx .navbar-page-options,
.block-filter-fx .header-block,
.block-filter-fx .page-options,
.block-filter-fx .main-options,
.block-filter-fx .taphover,
.block-filter-fx .collapse,
.block-filter-fx .main-menu-options,
.block-filter-fx .main-menu-options .container-fluid,
.block-filter-fx form,
.block-filter-fx .form-group {
    transition: none !important;
    transform: none !important;
}

.navbar-page-options.menu-desck .header-block .page-options .main-options .taphover.mostrarFiltro .btn-options,
.navbar-page-options.menu-desck .header-block .page-options .main-options .taphover.mostrarFiltro .btn-options .small {
    color: #fff;
}
.navbar-page-options.menu-desck .header-block .page-options .main-options .taphover.mostrarFiltro .btn-options:before {
    height: 100%;
}

/* Estilo para enlaces en propuestas de entrada */
.linkFormulario {
    color: blue;
    text-decoration: underline;
}

.sensorMinimo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0,255,0);
    display: inline-block;
    position: relative;
    filter: grayscale(100%);
}

.sensorMinimo.on {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0,255,0);
    display: inline-block;
    position: relative;
    filter: grayscale(0%);
}

.sensorMinimo.off {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255,0,0);
    display: inline-block;
    position: relative;
    filter: grayscale(0%);
}

.sensorMaximo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0,255,0);
    display: inline-block;
    position: relative;
    filter: grayscale(100%);
}

.sensorMaximo.on {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0,255,0);
    display: inline-block;
    position: relative;
    filter: grayscale(0%);
}

.sensorMaximo.unknown {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255,255,0);
    display: inline-block;
    position: relative;
    filter: grayscale(0%);
}

.sensorMaximo.off {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255,0,0);
    display: inline-block;
    position: relative;
    filter: grayscale(0%);
}


/* The Modal (background) */
/*.modal.modalPersonalizado {
  margin: 0% auto;  15% from the top and centered 
  padding: 0px 0px;
  width: 330px;  
  height: 285px;
  transition: background-color 1s ease;
  background: url(../../../themes/custom/img/tarjeta.png) center center no-repeat;
  animation: pulse 3s infinite;
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0);
  -moz-box-shadow: 0 5px 15px rgba(0,0,0,0);
  -o-box-shadow: 0 5px 15px rgba(0,0,0,0);
  box-shadow: 0 5px 15px rgba(0,0,0,0);
}*/

/* Modal Content/Box */
.modal-content.modalPersonalizado {
  margin: 15% auto; /* 15% from the top and centered */
    padding: 0px 0px;
    width: 330px;  
    height: 285px;
    transition: background-color 1s ease;
    background: url(../../../themes/custom/img/tarjeta.png) center center no-repeat;
    animation: pulse 3s infinite;
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -moz-box-shadow: 0 5px 15px rgba(0,0,0,0);
    -o-box-shadow: 0 5px 15px rgba(0,0,0,0);
    box-shadow: 0 5px 15px rgba(0,0,0,0);
}
.separadorConNombre{
    margin-bottom: 20px !important;
    max-width: 2000px !important;
    border-top: 1px solid #DEE2E6 !important;
    padding-top: 10px !important;
}

.separadorSinMarginBot{
    max-width: 2000px !important;
    border-top: 1px solid #DEE2E6 !important;
    padding-top: 10px !important;
}

.separadorInicial{
    max-width: 2000px !important;
}

/* Icono para los sensores de minimo de los silos */
.circulo {
    background-image: url(../img/circle.png);
}

/* Color para campos erroneos. Usado en pestañas */
.campoError {
    background-color: rgb(255,209,197)!important;
}

.campoIngredienteModificado {
    background-color: rgb(255,240,197)!important;
}

.campoIngredienteNuevo{
    background-color: rgb(197,255,205)!important;
}

/* Color para campos relevantes. Usado en pestañas */
.campoAdvertencia {
    background-color: rgba(255,255,0,0.2)!important;
}

/* Estilo para los popups del informe Destino Pedidos */
div.destinoPedidosPopUp {
   margin-top: 40px;
    position: fixed;
    top: 0;
    left: -110px;
    background-color: white;
    color: black;
    opacity: 1;
    z-index: 9999;
    height: 140px;
    width: 360px;
    padding-top: 10px;
    padding-left: 1px;
    padding-bottom: 10px;
    border-radius: 2px;
    box-shadow: 0 3px 3px 0 grey;
}

/* Lote seleccionado en un silo en Destino Pedidos */
.destinoPedidosSelected {
    background-color: rgb(100,100,100);
}

/* Estilo de silos pintados en Destino Pedidos */
.silo__item_destinoPedidos {
    width: 121px !important;
    height: 340px !important;
    background-size: contain !important;
}

/* Estilo para el texto contenido en cada popover de Destino Pedidos */
.pedidoLinea {
    clear: both;
    display:block;
    font-size: 0.68em;
}
.pedidoLinea .datoFijo {
    float:left;
    margin-left: 5px;
    width: 70px;
    text-align: left;
    font-weight: normal;
}
.pedidoLinea .datoItem {
    float:right;
    text-align: center;
    margin-right: 5px;
    width: 269px;
    max-width: 300px;
    max-height: 14px;
    overflow: hidden;
    white-space: nowrap;
}

.row.rojo{
    background-color: #C30E2E;
    height: 45%;
    color: white;
}

.divPedido{
    position: absolute;
    top: 7px;
    margin-left: 600px;
    width: auto;
    max-width: 650px;
    max-height: 50px;
    height: 50px;
    /*background: linear-gradient(0deg, #B6B6B6, #E1E2E1);*/
    background-color: white;
    border-radius: 5px;
    border: 1px solid #7E7E7E;
    box-shadow: 0 1px 1px 0 #7E7E7E;
}

.divPedido .textoPedido{
    text-align: center;
    color: white;
}
  
.container.divPedido .row.botones{
    height: 55%;
}

.iconoTiempoReal{
    animation: colorear 1s infinite alternate-reverse;
}

@keyframes colorear {
  0%   {color: white;}
  100%  {color: #71D300;}
}


@keyframes aumentarTamano{
  0%   {top: 0%;}
  100%  {top: 100%;}
}

.textoRojo{
    color: #C30E2E !important;
}

.textoVerde{
    color: #109400 !important;
}

.textoNaranja{
    color: rgb(255,240,197)!important;

}

#main-wrapper > .popover{
    width: 200px;
}

div.cascade__options ul li a{
    display: block;
}

/* CLASE PARA ANIMACION DE PARPADEO */
.blink_me {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.selectIdioma{
    cursor: pointer;
}

.imgBanderaEspania{
    float:left;
    width:30px;
    height:20px;
    background-image: url(../img/ico/espania.png) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size:20px;
}

.imgBanderaCatalana{

    float:left;
    width:30px;
    height:20px;
    background-image: url(../img/ico/catalan.png) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size:20px;
}

.parteDatosConsumos{
    float: left;
    width:75%;
    transition: width 2s;
}

.parteDatosConsumos.activo{
    width:100%;
    transition: width 2s;
}

.graficaLeft{
    float: left;
    width: 50%;
}

.graficaRight{
    float: left;
    width: 50%;
}

.divGraficos{
    transition: opacity 0.4s, height 0.6s, padding 0.6s;
    height: 0px;
    opacity: 0%;
    padding: 0px 30px 0px 30px;
}

.divGraficos.activo{
    height: 320px;
    opacity: 100%;
    padding: 30px 30px 30px 30px;
}

.botonOcultarGrafica{
    width: 30px;
    height: 70px;
    box-shadow: 1px 2px 2px 1px #C9C9C9;
    position: absolute;
    right:1%;
    border-radius: 5px 0px 0px 5px;
    cursor:pointer;
    z-index: 100;
    background-color: #F0F0F0;
}

.colorGrayInformes{
    background-color: #D9D9D9 !important;
}

.row-action.filaListado.grupo{
    background-color: #E4E4E4 !important;
}

.dialogLupaRegu{
    width: 300px; 
    background-color: white;
    margin-left: -40px;
    left: 0px;
    border-style: solid;
    border-color: black;
    border-width: 3px;
}

.dialogLupaRegu::after{
    border-top-color: transparent !important;
}

.box-leyenda {
    max-width: 80px;
    width: 100%;
    height: auto;
    text-align: center;
    margin: 2px;
}
.box-leyenda.bg-nuevo {
    background-color: rgb(197,255,205);
}
.box-leyenda.bg-modificado {
    background-color: rgb(255,240,197);
}
.box-leyenda.bg-incompleto {
    background-color: rgb(255,209,197);
}

button.leyenda{
    margin-left: 20px;
}

/*Estilo para establer borde grueso de color gris*/
td.border-grueso-grey {
    border-top: 3px solid #C0C0C0 !important;
}

/*DESTINO PEDIDOS*/
/*Titulos destino Pedidos*/
div.titulo_destinoPedidos{
    background-color: rgb(187,6,42);
    color: white;
    text-align: center;
    padding: 2px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}
/*Tarjeta*/
.item-container-destinoPedidos {
    background-color: #484848;
    border: 4px solid #eaeaea;
    margin-top: 5px; /* Espacio entre cada tarjeta */
    margin-left: 5px;
    height: 88px;
}
.item-container-destinoPedidos.activo {
    border: 4px solid #5cac04;
    animation: parpadeoBorde 1s infinite;
}

.item-title-destinoPedidos {
    font-weight: bold;
    font-size: 1em;
    color: #ffffff;
    margin-left: 4px;
}

.item-line-destinoPedidos {
    color: #ffffff;
    margin-bottom: 2px; /* Espacio debajo de cada línea */
    font-size: 0.8em;
    margin-left: 4px;
}

.item-line-destinoPedidos.scroll {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
}

.item-line-destinoPedidos.scroll.tit{
    height: 15px;
}

.item-container-destinoPedidos {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/*MATERIA*/
.materia-destinoPedidos {
    display: inline-block; /* Asegura que se comporte como un inline-block */
    vertical-align: middle; /* Alinea verticalmente en el medio */
    white-space: nowrap; /* Evita el salto de línea */
    color: white;
    font-size: 0.8em;
    text-align: center;
    margin-right:4px;
}

.materia-destinoPedidos.scroll {
    animation: scroll 13s linear infinite; /* Aplica la animación */
    position: absolute; /* Necesario para mover el texto */
}

.materia-inactiva-destinoPedidos {
    color: #a4a4a4;
    font-size: 0.8em;
    text-align: center;
    margin-right:4px;
}

.materia-inactiva-destinoPedidos.scroll {
    animation: scroll 13s linear infinite; /* Aplica la animación */
    position: absolute; /* Necesario para mover el texto */
}
/*MEDICADO*/
.medicado-destinoPedidos {
    vertical-align: middle;
    background-color: rgb(74,173,29,255);
    margin-right:4px;
    padding-left: 4px;
    padding-right: 4px;
    color: white;
    font-size: 0.8em;
    text-align: center;
    width: 99%;
    height: 100%;
}

/* Estilo del divisor vertical */
.vertical-divider-destinoPedidos {
    writing-mode: vertical-lr;
    margin-left: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    background-color: rgb(187,6,42);
    color: white;
    text-align: center;
    padding: 2px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}
/* Estilo del divisor vertical */
.vertical-divider-destinoPedidos.tolva {
    background-color: #8c8c8c;
}

.cuerpo {
    background-color: #f7f7f7;
    font-size: 0.8em;
    color: #000000;
    border-radius: 2px;
    margin: 5px;
    border: .5px solid #BBBBBB;
    text-align: center;
    font-weight: bold;
    display: flex;
}

/*Procesadondo*/
.cuerpo.pro {
    background-color: #d1d05c;
}

/*Completado*/
.cuerpo.com {
    background-color: #78cd81;
}

.dato {
    font-size: 1em;
    border-left: .5px solid #BBBBBB;
    padding-right: 2px;
    padding-left: 2px;
    white-space: nowrap;
}

.dato2 {
    font-size: 1em;
    white-space: nowrap;
    padding-right: 2px;
    padding-left: 2px;
}

/*ANIMACIONES*/

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-150%);
    }
}
@keyframes parpadeoBorde {
    0% {
        border-color: transparent;
    }
    50% {
        border-color: #00ff00;
    }
    100% {
        border-color: transparent;
    }
}


.colorBotonResaltado{
    background-color: #CB3A54 !important;
}

.colorBotonNoResaltado{
    background-color: #CD7887 !important;
}

/* El scroll de la rueda dentro de un modal de ficha no debe "encadenarse" al
   listado de fondo: sin esto, al llegar al tope del cuerpo del modal (o si el
   form no da para scroll) la rueda mueve la pagina de detras y al cerrar el
   modal el listado aparece desplazado o arriba del todo. */
.modal,
.modal .modal-body {
    overscroll-behavior: contain;
}

/* El tema define modal__md (768px) y modal__xl (1600px) pero NO modal__lg, que
   caia al ancho base (1300px). Le damos un ancho intermedio para fichas anchas
   (detalle de lote y los modales del SCADA). Stock de secadora ya no entra aqui:
   su tabla de lotes no cabia en 1040px y se paso a modal__xl. */
.modal.modal__lg .modal-dialog {
    max-width: 1040px;
}

/* ══════════════════════════════════════════════════════════════════════
   Tablas en TEMA CLARO (body sin .dark-theme)
   El tema oscuro ya las estiliza en dark-theme.css. En claro faltaban:
   - cebra par/impar (las tablas no llevan la clase .table-striped, así que
     la aplicamos por nth-of-type y no hay que tocar cada componente)
   - cabecera diferenciada
   - borde con sombra ligera (misma convención que el resto del proyecto)
   ══════════════════════════════════════════════════════════════════════ */
body:not(.dark-theme) .table {
    background-color: #ffffff;
    border: 1px solid #b9c3d0;                 /* borde más marcado para que la tabla resalte */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

body:not(.dark-theme) .table thead th {
    background-color: #dbe2ea;                  /* cabecera más diferenciada del cuerpo */
    color: #2f3a45;
    border-bottom: 2px solid #b3bdca;
}

/* Cebra: filas impares en gris claro visible, pares en blanco (par más clara
   que impar, igual que en el tema oscuro). */
body:not(.dark-theme) .table tbody tr:nth-of-type(odd) {
    background-color: #e8edf3;
}

body:not(.dark-theme) .table tbody tr:nth-of-type(even) {
    background-color: #ffffff;
}

/* Separador de fila sutil para reforzar la lectura horizontal */
body:not(.dark-theme) .table tbody td {
    border-bottom: 1px solid #dde3ea;
}

/* Después de par/impar para que el hover gane al pasar por encima */
body:not(.dark-theme) .table tbody tr:hover {
    background-color: #d3ddea;
}

/* ══════════════════════════════════════════════════════════════════════
   Contraste de texto en TEMA CLARO
   El template pone el texto base en #67757c (gris lavado, ~4.6:1). Lo
   oscurecemos para que el contenido (tablas, tarjetas, formularios) se lea
   mejor. El sidebar/topbar usan colores propios y no heredan esto.
   ══════════════════════════════════════════════════════════════════════ */
body:not(.dark-theme) {
    color: #3f4753;
}

/* ══════════════════════════════════════════════════════════════════════
   Estado de contenedores: el tablero kanban puede superar el alto de la
   ventana. El tema fija .main { height: 100% } (una pantalla), así que el
   contenido se desbordaba de .main y los fondos (.page-wrapper + la textura
   de tuberías de :before) solo cubrían la primera pantalla, dejando una
   franja más clara al bajar. Con height:auto .main crece con el contenido y
   los fondos lo cubren entero; min-height:93vh sigue rellenando pantallas
   cortas. Acotado con :has() para no afectar a otros informes.
   ══════════════════════════════════════════════════════════════════════ */
.main:has(.rpt-board-wrapper) {
    height: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   Modal anidado (Laboratorio / Qcify abiertos desde el form de Entradas).
   Ambos modales usan los mismos z-index inline que el modal de la entrada
   (diálogo 1040 / cortinilla 1039), así que la cortinilla del modal interno
   quedaba POR DEBAJO del modal de la entrada y no lo oscurecía. Subimos la
   cortinilla y el diálogo del modal anidado por encima del de la entrada para
   que, al abrir el informe para modificar (lápiz), el fondo se oscurezca un
   poco. Acotado con .modal-anidado para no tocar los modales sueltos de
   /laboratorio y /sqcfi. */
.modal-anidado .modal-backdrop {
    z-index: 1045 !important;
    opacity: 0.4 !important;
}
.modal-anidado .modal {
    z-index: 1050 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   DISEÑO DE FORMULARIOS MODALES — portado desde GestionDocumentalERI.
   Allí vive en main.less; aquí va en er.css porque el .less solo se compila
   a mano con Prepros y esta capa se carga después, así que gana igual.
   ══════════════════════════════════════════════════════════════════════ */

/* Botones del pie de modal (Cancelar/Guardar/Eliminar y los que se añadan por
   slot=footer): .er-btn trae min-width 200px, con lo que no caben varios en
   pantalla estrecha. Por debajo de 992px se dejan solo con el icono, sin
   tocar el ancho ni el texto de escritorio. Un botón nuevo hereda esto solo
   con usar btn-footer-modal + btn-footer-modal-icon/-text. */
.er-btn.btn-footer-modal .btn-footer-modal-icon {
    display: none;
}

@media (max-width: 991px) {
    /* !important: .btn-sm tiene la misma especificidad y su padding ganaría
       el empate por orden de carga */
    .er-btn.btn-footer-modal {
        min-width: 0 !important;
        width: 44px !important;
        padding: 10px 0 !important;
    }

    .er-btn.btn-footer-modal .btn-footer-modal-icon {
        display: inline-block;
        font-size: 16px;
    }

    .er-btn.btn-footer-modal .btn-footer-modal-text {
        display: none;
    }
}

/* Ancho del modal xl como clase y no como estilo en línea: en línea siempre
   ganaba y no se podía sobrescribir dentro de un @media. */
.modal.modal__xl .modal-dialog.modal-dialog-xl-75 {
    max-width: 75% !important;
}

@media (max-width: 991px) {
    .modal.modal__xl .modal-dialog.modal-dialog-xl-75 {
        max-width: calc(100% - 16px) !important;
    }

    /* Cualquier fila "label + campo" de un formulario se apila, sea cual sea
       el col-N que traiga (col-3, col-4, col-md-2...), así un formulario nuevo
       no tiene que acordarse de poner col-md- para que funcione en móvil.
       Label y campo comparten ancho centrado, de modo que el borde derecho del
       label (text-right) coincide con el del campo en vez de ir cada uno a su
       aire. Excepción: .switch-inline-movil, más abajo. */
    .modal-body .form-group.row > label,
    .modal-body .form-group.row > div {
        width: 100%;
        max-width: 96%;
        flex: 0 0 100%;
        margin-left: auto;
        margin-right: auto;
        /* varios formularios traen pl-1 del layout de escritorio en línea;
           apilados descuadra el centrado */
        padding-left: 0;
        padding-right: 0;
    }

    /* Bootstrap da padding vertical al label para igualar la altura del input
       cuando van en la misma línea; apilados solo deja hueco */
    .modal-body .form-group.row > label.col-form-label {
        padding-top: 0;
        padding-bottom: 2px;
    }

    /* opt-in para filas simples de "label + switch", que apiladas quedan mal */
    .modal-body .form-group.row.switch-inline-movil {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .modal-body .form-group.row.switch-inline-movil > label {
        width: auto;
        min-width: 90px;
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    .modal-body .form-group.row.switch-inline-movil > div {
        width: auto;
        flex: 0 0 auto;
        margin-left: 10px;
    }
}

/* Apertura del modal: se despliega desde arriba. El tema ya define una
   transición opacity/translateY, pero Angular monta el elemento con .show
   puesta de inicio y el navegador nunca ve el estado inicial, así que no se
   animaba nada. Con @keyframes arranca sola al insertarse. */
@keyframes desplegarModal {
    from {
        transform: translateY(-24px) scaleY(.94);
        opacity: 0;
    }
    to {
        transform: translateY(0) scaleY(1);
        opacity: 1;
    }
}

.modal.show > .modal-dialog {
    /* el origen arriba hace que crezca hacia abajo, como si se desplegara */
    transform-origin: top center;
    animation: desplegarModal .28s ease-out;
    /* sin "both" a propósito: el transform del fotograma final no debe quedar
       fijado, porque cualquier transform en este ancestro convierte a
       .modal-dialog en containing block de los position:fixed hijos (p. ej. el
       desplegable de app-buscador) y los desplaza respecto al modal en vez de
       respecto al viewport */
}

@keyframes aparecerBackdrop {
    from { opacity: 0; }
    to   { opacity: .5; }
}

.modal-backdrop.show {
    animation: aparecerBackdrop .28s ease-out both;
}

/* Cierre: el mismo movimiento invertido (recogerse hacia arriba). Necesita que
   el componente retrase el cierre real ~220ms para dar tiempo a verlo (ver la
   clase .cerrando en form-modal.ts). Los formularios que montan el modal a
   mano no la tienen y siguen cerrándose de golpe. */
@keyframes plegarModal {
    from {
        transform: translateY(0) scaleY(1);
        opacity: 1;
    }
    to {
        transform: translateY(-24px) scaleY(.94);
        opacity: 0;
    }
}

.modal.show.cerrando > .modal-dialog {
    animation: plegarModal .22s ease-in both;
}

/* El fondo NO se desvanece a la vez que el modal se pliega: se queda oscuro
   mientras el modal siga visible y desaparece de golpe cuando Angular quita
   los dos del DOM. Animándolo en paralelo, a mitad de la animación ya se vería
   más claro con el modal todavía ahí. */

/* Quien prefiera no ver animaciones (ajuste del sistema) */
@media (prefers-reduced-motion: reduce) {
    .modal.show > .modal-dialog,
    .modal.show.cerrando > .modal-dialog,
    .modal-backdrop.show {
        animation: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   INFORME DE TABLET: el formulario, ampliado.
   Se usa en una tablet de 10" que reporta 1920x1200 px CSS (sin escalado
   del sistema), donde los 13px del tema quedan diminutos para el dedo.
   Todo cuelga de #formTablet (el elementId que le pasa form-tablet.html),
   así que no afecta a ningún otro modal del proyecto.

   El factor sale de --esc y cada medida es el valor base del tema por esa
   variable: para ajustar la escala se toca SOLO --esc, no 30 reglas.
   Se escala a mano en vez de con zoom/scale porque el desplegable de
   app-buscador es position:fixed con top/left en px calculados por JS
   (getBoundingClientRect), y un ancestro escalado lo deja desalineado.
   ══════════════════════════════════════════════════════════════════════ */
#formTablet {
    /* Factor general: cabecera, pie, switch, altura de los campos. */
    --esc: 1.5;
    /* El texto va por libre y sube más. Los elementos del tema con base grande
       (título 20px, aspa 30px, icono 48px) crecen mucho en absoluto con --esc,
       pero los de base 13px se quedan cortos y, metidos en campos de 58px de
       alto, se leen como si no hubieran cambiado. */
    --esc-texto: 1.7;
    /* Alto único de campo. Hace falta fijarlo (no vale con min-height) porque
       cada tipo de campo crece distinto al subir la letra: el control nativo
       del calendario de un datetime-local se va a ~77px mientras un input de
       texto se queda en ~43px, y en dos columnas ese desajuste canta. */
    --alto-campo: calc(38px * var(--esc));
}

/* La cabecera y el pie también crecen, así que al hueco reservado para
   ellos (200px) hay que aplicarle la misma escala o el modal se sale. */
#formTablet .modal-body {
    max-height: calc(100vh - 200px * var(--esc));
}

/* ── Cabecera ── */
#formTablet .modal-header .modal-title {
    font-size: calc(20px * var(--esc));
    line-height: calc(24px * var(--esc));
    padding: calc(16px * var(--esc)) 0 calc(11px * var(--esc)) calc(15px * var(--esc));
}

#formTablet .modal-header .bg-wrapper-icon .bg-icon {
    font-size: calc(48px * var(--esc));
}

/* Los dos iconos de la cabecera (plegar y cerrar).

   No vale con escalar el `top` del tema (6px y 23px): esos valores están
   calculados para la cabecera sin ampliar y, multiplicados por separado, cada
   icono acaba a una altura distinta. Tampoco basta con centrar la caja de
   texto, porque los glifos vienen de dos fuentes distintas (icon-times del
   tema y fa-eject de Font Awesome) y cada uno se sienta a una altura diferente
   dentro de su em.

   Por eso los dos reciben la MISMA caja cuadrada, con el glifo centrado dentro
   por flex: así quedan alineados sean cuales sean sus métricas. El ancho de la
   caja sirve además para separarlos en horizontal sin numeros a ojo.
   El rotate se repite en el :hover porque una segunda declaración de transform
   sustituye a la anterior, no se suma. */
#formTablet .modal-header .close,
#formTablet .modal-header .hide_modal {
    --icono: calc(44px * var(--esc));
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icono);
    height: var(--icono);
    padding: 0;
    margin: 0;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
}

#formTablet .modal-header .close {
    font-size: calc(30px * var(--esc));
    right: calc(10px * var(--esc));
}

#formTablet .modal-header .hide_modal {
    font-size: calc(24px * var(--esc));
    right: calc(10px * var(--esc) + var(--icono));
}

#formTablet .modal-header .close:hover,
#formTablet .modal-header .hide_modal:hover,
#formTablet .modal-content.hide_content .hide_modal {
    transform: translateY(-50%) rotate(180deg);
}

/* ── Campos ──
   !important porque adminse/css/style.css trae `form label { font-size: 14px
   !important }` y todo el contenido del modal vive dentro del <form> de
   app-form-modal: sin esto los labels se quedan clavados en 14px por mucho id
   que lleve el selector. */
#formTablet .col-form-label,
#formTablet label {
    font-size: calc(13px * var(--esc-texto)) !important;
    line-height: 1.4 !important;
}

/* max-height a none: el tema lo clava en 37px y, con el texto a --esc-texto,
   el contenido pasa de esa altura aunque se escale. La altura la marcan ahora
   el min-height y el padding. */
#formTablet .form-control {
    height: var(--alto-campo);
    min-height: var(--alto-campo);
    max-height: var(--alto-campo);
    /* padding vertical a 0: con el alto fijado, el navegador ya centra el texto
       de un input de una sola línea */
    padding: 0 calc(12px * var(--esc));
    /* !important por lo mismo que los labels, pero de otro sitio: el
       bootstrap.css del tema trae `input, button, select, optgroup, textarea
       { font-size: 14px !important }` (añadido a mano, Bootstrap no lo trae),
       que clava cualquier campo a 14px. */
    font-size: calc(13px * var(--esc-texto)) !important;
    line-height: 1.4;
}

/* el aspa de "campo inválido" que Bootstrap pinta de fondo en el input */
#formTablet .form-control.is-invalid {
    background-size: calc(0.75em * var(--esc)) calc(0.75em * var(--esc));
}

#formTablet .invalid-feedback,
#formTablet .invalid-feedback div {
    font-size: calc(12px * var(--esc-texto));
}

/* Los dos recuadros que agrupan los campos (fechas por un lado; contenedor,
   conductor y vehículo por otro), como los tenía el formulario anterior de la
   tablet. Allí el borde era blanco sobre fondo negro; aquí el modal es claro. */
#formTablet .bloque-tablet {
    border: 1px solid rgba(72, 72, 72, 0.2);
    border-radius: 4px;
    padding: calc(12px * var(--esc)) calc(16px * var(--esc));
    margin-bottom: calc(16px * var(--esc));
}

#formTablet .bloque-tablet:last-child {
    margin-bottom: 0;
}

/* Los campos van con el label encima, así que sin esto la siguiente fila
   arranca pegada al campo de la anterior. */
#formTablet .tab-body .form-group {
    margin-bottom: calc(16px * var(--esc));
}

/* ── Pestañas ──
   No siguen --esc: con el factor general la pestaña se comía la cabecera del
   formulario. Solo un punto por encima del tamaño del tema (14px). */
#formTablet .nav-tabs .nav-link {
    padding: calc(0.5rem * 1.15) calc(1rem * 1.15);
    font-size: 16px;
}

/* ── Switch de Habilitado ── */
#formTablet .switch label .lever {
    width: calc(40px * var(--esc));
    height: calc(15px * var(--esc));
    border-radius: calc(15px * var(--esc));
    margin: 0 calc(16px * var(--esc));
}

#formTablet .switch label .lever:after {
    width: calc(21px * var(--esc));
    height: calc(21px * var(--esc));
    border-radius: calc(21px * var(--esc));
    left: calc(-5px * var(--esc));
    top: calc(-3px * var(--esc));
}

#formTablet .switch label input[type="checkbox"]:checked + .lever:after {
    left: calc(24px * var(--esc));
}

/* ── Botones de intercambio (conductor/vehículo ocasional) ── */
/* También son <button>: mismo !important que arriba, o el icono no crece.
   El alto lo iguala al del campo que acompaña, o queda descolgado a su lado. */
#formTablet .btn.btn-sm.btn-outline-secondary {
    height: var(--alto-campo);
    padding: 0 calc(0.5rem * var(--esc));
    font-size: calc(0.875rem * var(--esc)) !important;
    margin-left: calc(0.5rem * var(--esc));
}

/* ── Pie ── */
/* Cancelar/Guardar son <button>, así que el `font-size: 14px !important` del
   bootstrap.css del tema también los clava: sin !important el botón crece pero
   su texto se queda pequeño dentro. Va con --esc-texto para que la letra del
   pie case con la del formulario. */
#formTablet .modal-footer .er-btn {
    font-size: calc(16px * var(--esc-texto)) !important;
    line-height: calc(20px * var(--esc));
    min-width: calc(200px * var(--esc));
    padding: calc(13px * var(--esc)) calc(5px * var(--esc)) calc(12px * var(--esc));
}

#formTablet .modal-footer .leyendaCampoObligatorio {
    font-size: calc(12px * var(--esc));
}

/* ── Desplegable del buscador ──
   Vive dentro del modal aunque sea position:fixed, así que hereda --esc.
   Con las filas al doble caben la mitad: se sube también el alto máximo. */
#formTablet .suggestion-list {
    max-height: calc(200px * var(--esc));
}

#formTablet .suggestion-list li {
    font-size: calc(0.85rem * var(--esc-texto)) !important;
    padding: calc(0.5rem * var(--esc)) calc(0.75rem * var(--esc))
             calc(0.5rem * var(--esc)) calc(2rem * var(--esc));
}

/* El input del buscador ya crece por .form-control (lo lleva); aquí solo la
   sangría que le deja hueco a la lupa, y la lupa misma. Va después de la regla
   de .form-control a propósito: misma especificidad, gana la última. */
#formTablet .autocomplete-input {
    padding-left: calc(2rem * var(--esc));
}

#formTablet .search-icon {
    font-size: calc(1rem * var(--esc));
    left: calc(0.75rem * var(--esc));
}

/* En pantallas pequeñas (no es el caso de uso, pero la ruta es accesible
   desde cualquier sitio) el doble no cabe: se baja el factor y ya. */
@media (max-width: 991px) {
    #formTablet {
        --esc: 1.3;
        --esc-texto: 1.5;
    }

}