/*
 * Ajustes de tamaño tras la migración a FontAwesome 7.  2026-08-04 (Claude, owner).
 *
 * POR QUE HACE FALTA ESTE FICHERO. Los glifos de la version 7 no miden lo mismo que los de la 4: son
 * mas anchos y mas altos para el mismo `font-size`. Todo lo que estaba dimensionado a ojo alrededor de
 * un icono de la 4 —botones con padding justo, celdas de tabla, filas de acciones— se descoloca. El
 * owner lo fue reportando pantalla por pantalla: papeleras que se salen de su fila, X cortadas, cruces
 * demasiado finas.
 *
 * Se corrige aqui, en un solo sitio, y NO tocando los 1.300 iconos del codigo:
 *   - un cambio de tamaño se prueba y se revierte en una linea;
 *   - queda documentado que es un ajuste de la migracion y no un estilo del portal;
 *   - y cuando la migracion se cierre, se puede revisar de una pasada si algo sigue haciendo falta.
 *
 * REGLA AL AÑADIR AQUI: apuntar al icono y al contexto concretos, nunca a `.fa-2x` en general. Cambiar
 * el tamaño de todos los iconos grandes del portal para arreglar una pantalla es como se rompen las
 * otras diez.
 */

/* --- papeleras de borrar: se salian de su fila y tiraban el icono a la linea de abajo -----------
   Pasa en la ficha de empleado (Otros documentos, la foto, los carnes, idiomas y estudios): 32 sitios
   con `fa-trash fa-2x`. El glifo de la 7 a 2em no cabe donde cabia el de la 4, asi que el navegador
   hacia salto de linea. 1.55em es el tamaño con el que ocupa lo mismo que ocupaba antes. */
.fa-trash.fa-2x,
.fa-trash-can.fa-2x {
    font-size: 1.55em;
    vertical-align: middle;
    margin-top: 0 !important;      /* varios traian margin-top en % , que con el glifo nuevo descuadra */
}

/* --- el + de añadir producto al albaran (movInventario): la cruz interior salia muy fina ---------
   `circle-plus` de la 7 dibuja el aro grueso y la cruz fina; el `plus-circle` de la 4 era al
   contrario. Subir un poco el tamaño recupera la proporcion sin cambiar de icono. */
.fa-circle-plus:not(.fa-lg):not(.fa-2x):not(.fa-3x) {
    font-size: 1.15em;
}
/* 2026-08-04 (Claude, owner) CORRECCION de lo anterior. La primera version era
   `.fa-circle-plus { font-size: 1.15em }` sin excluir los modificadores, y como esta hoja se carga
   DESPUES de la de FontAwesome, ese 1.15em le pisaba el 2em a los iconos que en el codigo llevan
   `fa-2x`. Resultado: los + de anadir al albaran, que son los mas grandes de movInventario, se
   quedaron los mas pequenos de la pantalla. Ahora solo se toca el que NO trae tamano propio. */
.fa-circle-plus.fa-2x { font-size: 1.8em; }   /* 2.2em se salia del alto de la celda */

/* --- la X de cerrar de las ventanas: cortada por arriba y sin contraste sobre cabecera de color --- */
.fa-xmark.fa-2x,
.fa-xmark.fa-3x {
    line-height: 1;
    vertical-align: middle;
    overflow: visible;
}

/* --- iconos de documento en celdas estrechas (columnas ES / PT de las fichas de revision) --------
   A tamaño pequeño el `file-pdf` de contorno se empasta. Ya se cambio a solido en el codigo; aqui
   solo se le asegura un tamaño minimo legible, porque por debajo de 13 px ningun glifo aguanta. */
td .fa-file-pdf,
td .fa-file-excel,
td .fa-file-lines,
td .fa-file-arrow-down {
    font-size: 15px;
    vertical-align: middle;
}

/* 2026-08-04 (Claude, owner) Por que se cambio el icono y no solo el tamano: el glifo `file-pdf` de
   la 7 lleva las letras "PDF" GRABADAS dentro del documento. A 14-15 px esas letras miden 3 px y se
   empastan con el borde, y el resultado es lo que el owner describia como "sobreimpreso, como
   duplicado". No eran dos iconos: era un icono con mas detalle del que cabe en su tamano. Se cambia
   por `file-arrow-down`, que es un documento con una flecha —sin letras dentro—, se lee a cualquier
   tamano y ademas comunica que DESCARGA, que es lo que el owner queria resaltar. */

/* --- LA BORROSIDAD: ClearType apagado, no la version de la libreria -----------------------------
 *
 * 2026-08-04 (Claude, owner). El owner insistio varias veces en que los iconos se veian "difuminados
 * y de baja calidad". Descarte la version Free (no era) y la mezcla de hojas (esa si era parte). Lo
 * que quedaba es esto:
 *
 *   FontAwesome 7 y Material Symbols declaran los dos `-webkit-font-smoothing: antialiased`.
 *
 * En **Windows** esa propiedad APAGA el subpixel antialiasing (ClearType) y rasteriza en escala de
 * grises: el glifo pierde el enganche a la rejilla de pixeles y los bordes salen blandos. En macOS
 * hace lo contrario —adelgaza y mejora— y por eso casi todas las librerias de iconos la ponen por
 * defecto: se disenan mirando un Mac. Los usuarios del portal estan en Windows, asi que esa linea les
 * perjudica en todas las pantallas.
 *
 * Devolver el valor por defecto recupera ClearType y con el la nitidez. Es la unica regla de este
 * fichero que se aplica a TODOS los iconos, porque la causa tambien es de todos. */
.fa, .fas, .far, .fab,
[class^="fa-"], [class*=" fa-"],
.ms {
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: optimizeLegibility;
}

/* --- desplegable de clientes: sitio para la ultima fila ------------------------------------------
   Los logos de cliente son mas altos que una linea de texto, y la ultima fila se quedaba pegada al
   borde inferior del desplegable (a BP, que es el unico vertical, se le cortaba). Un poco de aire
   abajo lo resuelve sin tocar el resto de los menus. */
.dropdown-menu li a > span[style*="text-align:left"] { padding-bottom: 2px; }
ul.dropdown-menu { padding-bottom: 8px; }

/* --- la X de cerrar de los dialogos de jQuery UI ------------------------------------------------
 *
 * 2026-08-04 (Claude, owner). El owner lo reporto tres veces: "la X de cerrar la ficha del empleado
 * sigue con su cuadrado blanco en la esquina superior derecha, pero sin X dentro". Las dos primeras
 * veces lo busque entre los iconos de FontAwesome y no estaba, porque **no es un icono nuestro**: la
 * ficha se abre con `$(...).dialog()` de jQuery UI, y su boton de cerrar pinta la X con un SPRITE de
 * imagen (`images/ui-icons_*.png`) que en este portal **no existe** — da 404. De ahi el cuadrado vacio.
 *
 * Encaja con el desajuste que ya estaba anotado: jQuery UI carga el JS de la 1.11.4 con el CSS de la
 * 1.12.1, y la carpeta `images/` del tema no se subio nunca.
 *
 * En vez de perseguir el sprite, la X se dibuja con CSS. Asi no depende de ningun fichero y arregla el
 * boton de cerrar de TODOS los dialogos del portal, no solo el de la ficha de empleado. */
.ui-dialog-titlebar-close {
    position: relative;
    text-indent: 0 !important;
    background-image: none !important;
    overflow: visible;
}
.ui-dialog-titlebar-close .ui-icon,
.ui-dialog-titlebar-close .ui-button-icon-primary {
    background-image: none !important;
    text-indent: 0 !important;
    display: none;
}
.ui-dialog-titlebar-close::after {
    /* 2026-08-04 (Claude, owner) La X se dibuja con dos barras giradas en vez de con un caracter.
       Motivo practico: intente ponerla como caracter literal y como escape CSS, y las tres veces se
       corrompio al escribir el fichero desde un script (un byte NUL, un caracter de reemplazo y un
       escape a medias). Dos pseudo-elementos con border son ASCII puro, no hay nada que se pueda
       malinterpretar por el camino, y ademas quedan mas limpios que un glifo tipografico. */
    content: '';
    width: 15px;
    height: 2px;
    background: #444;
    transform: translate(-50%, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    left: 50%;
}
/* la segunda barra, girada al contrario, completa la X */
.ui-dialog-titlebar-close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    background: #444;
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}
.ui-dialog-titlebar-close:hover::after,
.ui-dialog-titlebar-close:hover::before { background: #c0392b; }

/* --- la regla ANTIGUA de .eliminar (position:absolute + margin:0 !important) se quita -------
 *
 * 2026-08-04 (Claude, owner) Tenia DOS reglas .eliminar en este mismo fichero y no me di cuenta.
 * La primera, con `margin: 0 !important`, anulaba el margin-left que calcula el JS para empujar la
 * X sobre el campo, y por eso la X seguia saliendo a la izquierda aunque la segunda regla ya
 * estuviera bien. Dos reglas para lo mismo en el mismo fichero es como se pierde una tarde.
 *
 * La buena esta mas abajo: position:relative sobre la propia X, sin !important y sin tocar el
 * padre. */


/* 2026-08-04 (Claude, owner) LO QUE FALTABA para que la X quedara en su sitio.
 *
 * Poner `.eliminar { position:absolute }` no basta: absolute se posiciona respecto al primer
 * antepasado con `position` distinto de static. En graneles el blade le da ese ancla al contenedor;
 * en movInventario y en el resto no existe, asi que la X se colocaba respecto a un antepasado lejano
 * —o al documento— y acababa medio fuera del recuadro.
 *
 * easyAutocomplete envuelve cada input en un `div.easy-autocomplete`, asi que ese es el ancla natural
 * y la que sirve para todas las pantallas de una vez. */
/* la regla `.easy-autocomplete { position: relative }` se quita: el ancla la pone el JS
   sobre el padre REAL del input, que no siempre es este contenedor. */

/* --- LO QUE HABIA AQUI SOBRE LOS BUSCADORES, RETIRADO ------------------------------------------
 *
 * 2026-08-04 (Claude, owner). Aqui tenia reglas para la X de limpiar (`.eliminar` con
 * position:absolute) y para el contenedor de sugerencias (z-index). El owner dio el dato que lo
 * cierra: **en PRODUCCION el desplegable se pinta por encima y todo funciona**, y produccion NO tiene
 * esta hoja. O sea que el problema del apilamiento no era del portal: lo introduje yo aqui.
 *
 * Cinco intentos de arreglarlo con mas CSS y mas z-index fueron cinco intentos de compensar mi propio
 * cambio. Lo correcto es quitarlo y dejar el comportamiento que ya funcionaba: cada pantalla coloca su
 * X como la tenia (graneles lo hace bien en su propio blade) y el desplegable se pinta como siempre.
 *
 * Si en alguna pantalla concreta la X vuelve a quedar descolocada, se arregla EN ESA pantalla y por
 * TAMANO —que es lo que cambio con FontAwesome 7—, no reposicionando globalmente algo que estaba bien.
 */

/* --- la X de limpiar de los buscadores: LA MISMA REGLA QUE GRANELES ------------------------------
 *
 * 2026-08-04 (Claude, owner) Mi version anterior (position:relative + left:-25px) pisaba la de
 * graneles, que era la unica pantalla donde la X estaba bien desde siempre, y alli la mando fuera por
 * la izquierda. Error de bulto: en vez de copiar lo que funcionaba, invente otra cosa y encima la
 * puse global.
 *
 * Ahora es literalmente la regla de graneles.blade.php, que lleva anos bien:
 *
 *     position:absolute; right:6px; top:50%; transform:translateY(-50%);
 *
 * Con `right:6px` queda pegada al borde derecho por dentro, y con `top:50%` + `translateY(-50%)`
 * centrada de verdad a cualquier altura de campo —sin numeros a ojo, que es lo que me hizo probar 2,
 * 12 y 6 px sin acertar—.
 *
 * EL ANCLA, que es lo que hace falta para que `absolute` se coloque bien: el contenedor que crea
 * easyAutocomplete alrededor del input. Va con `z-index: auto` EXPLICITO, y esa es la pieza que me
 * faltaba antes: `position:relative` a secas convierte al elemento en contexto de apilamiento y los
 * campos de abajo tapan la lista del de arriba; con `z-index:auto` posiciona pero NO crea contexto,
 * asi que la X queda anclada y el desplegable sigue pintandose por encima.
 *
 * Si el desplegable volviera a quedar detras, el culpable es esta linea del ancla y se revierte sola. */
.easy-autocomplete {
    position: relative;
    z-index: auto;
    /* 2026-08-04 (Claude, owner) `inline-block` es lo que coloca la X dentro del campo en TODAS las
     * pantallas, y explica lo que el owner observo: en movInventario los filtros de arriba estaban
     * bien y Origen/Destino mal, en la misma pagina.
     *
     * La X es `absolute; right:6px`, o sea que se coloca respecto al borde derecho de ESTE contenedor.
     * Por defecto es un div de bloque, asi que ocupa todo el ancho de su columna Bootstrap — y cuando
     * el input es mas estrecho que la columna (el caso de Origen/Destino, que comparten sitio con el
     * boton de engranaje), ese borde derecho cae FUERA del campo y la X se sale.
     *
     * Con `inline-block` el contenedor se ajusta al ancho del input, asi que su borde derecho ES el
     * del campo y la X queda dentro sea cual sea la maquetacion. `max-width:100%` evita que un input
     * al 100% desborde su columna. */
    /* el `display:inline-block` que puse aqui se retira: intentaba que el contenedor se ajustase al
       input para que `right` cayera bien, y ya no hace falta porque el JS mide el input directamente.
       Dejarlo cambiaria la maquetacion de los campos sin necesidad. */
}

/* 2026-08-04 (Claude, owner) EL SELECTOR ES LA CLAVE, y aqui estaba mi error de fondo.
 *
 * graneles no define `.eliminar`, define `.easy-autocomplete .eliminar` — con el contenedor como
 * ancestro. Eso es MAS ESPECIFICO que mi `.eliminar` global, asi que mi regla no ganaba donde
 * graneles tenia la suya y si ganaba en las demas: de ahi que cada pantalla se comportase distinto y
 * que yo anduviera midiendo pixeles a ojo en unas mientras rompia otra.
 *
 * Ahora la global usa el mismo selector. Y ademas es el correcto: la X SIEMPRE esta dentro del
 * `div.easy-autocomplete`, porque el JS la inserta en el padre del input y ese padre es ese div.
 *
 * La regla de graneles.blade.php se retira en este mismo commit: una sola fuente de verdad, que es lo
 * que pidio el owner —"prefiero una regla global buena que una excepcion en cada pagina"—. */
.easy-autocomplete .eliminar {
    position: absolute;
    /* 2026-08-04 (Claude, owner) el desplazamiento horizontal ya NO se pone aqui: lo calcula el JS
     * midiendo el ancho real del input (`left = anchoInput - 26`). Probe con 6, 14 y 20 px y era
     * imposible acertar en todas las pantallas a la vez, porque `right` se mide desde el borde del
     * contenedor y ese contenedor no siempre coincide con el campo. `left:auto` de partida para que
     * el valor que pone el JS sea el unico que manda. */
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    cursor: pointer;
    color: #888;
    /* 2026-08-05 (Claude, owner) SIN z-index, y esto era lo grave: con `z-index: 2` las X de los
     * campos de abajo se pintaban ENCIMA del desplegable de sugerencias del campo de arriba. Se lo
     * puse copiando la regla de graneles, donde no molestaba porque su desplegable va por encima por
     * otro motivo, y en movInventario quedaba a la vista.
     *
     * Una X de limpiar no necesita apilarse sobre nada: esta dentro de su propio campo y no compite
     * con nadie. Sin z-index se pinta en el orden natural y cualquier desplegable la tapa, que es lo
     * que tiene que pasar. */
}
.easy-autocomplete .eliminar:hover,
.eliminar:hover {
    color: #c0392b !important;   /* el rojo al pasar el raton no salia: la regla de la vista gana sin esto */
}

/* la lista, mas alta: mostraba solo 4 sugerencias. Puro tamano, no toca posicionamiento. */
.easy-autocomplete-container ul,
div[id^="eac-container-"] ul {
    max-height: 45vh !important;
    overflow-y: auto !important;
}

/* ------------------------------------------------------------------
   2026-08-06: iconos de fichero de los grids (.ico-doc)
   Antes iban en fa-solid con un color:black inline: macizos y todos
   iguales. Ahora en contorno (fa-regular) y con el color del tipo de
   fichero, que se distinguen de un vistazo. Una sola regla para todo
   el portal, no una excepcion por pantalla.
   ------------------------------------------------------------------ */
/* La celda de acciones: flex, para que los iconos queden centrados en vertical y
   NUNCA salten de linea al estrechar la columna. Sustituye a dos col-md-4 (floats
   con ancho en %), que es lo que hacia caer la papelera fuera de la fila visible. */
.ico-doc-celda {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    min-height: 1.9em;
    line-height: 1;
}
i.ico-doc {
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    transition: color .12s ease-out;
}
i.ico-doc.fa-file-pdf   { color: #c0392b; }   /* rojo    */
i.ico-doc.fa-file-word  { color: #2b579a; }   /* azul    */
i.ico-doc.fa-file-excel { color: #217346; }   /* verde   */
i.ico-doc.fa-file-image { color: #b7791f; }   /* ambar   */
i.ico-doc.fa-file       { color: #5a6570; }   /* gris: tipo desconocido */

/* la papelera arranca en gris y se pone roja al pasar el raton: asi no
   compiten dos iconos rojos en la misma celda con el PDF. */
i.ico-doc-borrar        { color: #7b8794; }
i.ico-doc-borrar:hover  { color: #c0392b; }
i.ico-doc:hover         { filter: brightness(.85); }

/* MODO ELIMINAR: las papeleras solo se ven con el modo activado desde el pie de la
   tabla. Se controla con UNA clase en el contenedor del grid, no elemento a elemento
   desde JS: asi sigue valiendo despues de que jqx vuelva a pintar las celdas al
   ordenar o redimensionar, que es lo que antes las hacia desaparecer. */
i.ico-doc-borrar                 { display: none; }
.modo-borrar i.ico-doc-borrar    { display: inline-block; }

/* el boton del pie, encendido mientras el modo esta activo */
.btn-modo-borrar-on i            { color: #c0392b !important; }