/* ==================================================================
 * fci-tema.css — tema compartido de las apps FCI (31-oct-2026)
 * ------------------------------------------------------------------
 * Fuente: compartido/fci-tema.css. Se edita AQUÍ y se copia con
 *   bash herramientas/verificar-copias-compartidas.sh --sincronizar
 * (plan: documentacion/PLAN-UNIFICACION-DISENO.md, sección «Tema compartido»).
 *
 * Qué trae: lo que las apps migradas tenían copiado, idéntico, cada una en su
 * propio CSS (el piloto es Control; las demás se pasan una por push):
 *   1. Variables de movimiento (--ease-out y --ease-drawer).
 *   2. Base: box-sizing y la fuente de los campos y botones.
 *   3. Respuesta al presionar los botones (auditoría de animaciones, plan 001).
 *   4. Siluetas de espera (plan 008).
 *   5. Ventanas que entran y salen suave, y hoja inferior en celular (plan 002).
 *
 * Qué NO trae, a propósito: botones, tarjetas, tablas e indicadores. Cada app los
 * nombra distinto (Control usa .btn.secundario; Ventas, .btn-ghost) y llevarlos
 * aquí obligaría a las otras a contrarrestarlos. Se decide aparte.
 *
 * Cómo se usa: cada app lo carga con
 *   <link rel="stylesheet" href="fci-tema.css">
 * justo después de fci-ui.css y ANTES de su propio <style>, para que el CSS de la
 * app pueda cambiar lo que necesite. No lo carga fci-ui.js (a diferencia de
 * fci-ui.css): Calibraciones y el login de Cotizaciones cargan fci-ui.css y tienen
 * sus propias clases .btn y .card, que este archivo no debe tocar.
 * ================================================================== */

:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* curva fuerte de salida: arranca rápido, frena al final */
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* curva de las hojas de iOS */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }

/* ---------- Respuesta al presionar ---------- */
/* Auditoría de animaciones, punto 1, 4-oct-2026: ningún botón cambiaba al presionarlo, solo con el mouse
   encima, que en el teléfono no existe. Ahora se hunde un poco en el instante del clic o del toque, como en
   iOS. Va con `scale` y no con `transform` para no pisar los transform que ya tenga un botón. Se quita el
   recuadro gris que pinta Safari de iPhone al tocar: el hundimiento ya es la respuesta. Se deja con "reducir
   movimiento" porque es un cambio de tamaño en el mismo lugar, no un desplazamiento.
   Plan: plans/001-botones-responden-al-presionar.md */
button, .btn { -webkit-tap-highlight-color: transparent; transition: scale 160ms var(--ease-out); }
button:not(:disabled):active, .btn:not(:disabled):active { scale: .97; }

/* ---------- Siluetas de espera ---------- */
/* Punto 8 de la auditoría de animaciones, 4-oct-2026: en lugar del texto "Cargando…" se ven renglones grises con
   la forma de una tabla y un brillo suave. El texto se queda en el HTML (invisible) para los lectores de pantalla.
   Aparece a los 120 ms para no parpadear si los datos llegan rápido; el brillo hace 6 pasadas y se detiene (nada
   se mueve sin fin); con "reducir movimiento" queda quieta.
   Las reglas llevan la clase doble (.cargando.cargando) para ganarles el padding, el color y el fondo a las
   clases de espera de cada app (.estado-msg, .empty…) sin depender de quién va primero en el CSS: en las apps
   ganaban por ir después. Plan: plans/008-siluetas-en-vez-de-cargando.md */
.cargando.cargando {
    --esq: #e6e8ec; --esq-fondo: #fff; --esq-alto: 38px; position: relative; overflow: hidden;
    height: calc(var(--esq-alto) * 5); padding: 0; font-size: 0; line-height: 0; color: transparent;
    background-color: var(--esq-fondo);
    background-image: repeating-linear-gradient(180deg, var(--esq-fondo) 0 12px, transparent 12px 26px, var(--esq-fondo) 26px var(--esq-alto)),
        linear-gradient(90deg, transparent 0 3%, var(--esq) 3% 23%, transparent 23% 26%, var(--esq) 26% 56%, transparent 56% 59%, var(--esq) 59% 80%, transparent 80% 83%, var(--esq) 83% 97%, transparent 97%);
    background-size: auto, 100% var(--esq-alto); background-repeat: repeat, repeat-y;
    animation: esqueletoAparece 200ms var(--ease-out) 120ms backwards;
}
.cargando.cargando::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
    transform: translateX(-100%); animation: esqueletoBrilla 1.4s ease-in-out 120ms 6;
}
.cargando.cargando-chico { height: calc(var(--esq-alto) * 3); }
@keyframes esqueletoAparece { from { opacity: 0; } }
@keyframes esqueletoBrilla { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .cargando.cargando::after { display: none; } }

/* ---------- Ventanas ---------- */
/* El fondo de las ventanas de las apps (.modal-overlay). */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(16, 24, 32, 0.45); display: flex;
    align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
/* Ventanas que entran y salen suave (auditoría de animaciones, punto 2, 4-oct-2026): antes aparecían y
   desaparecían de golpe. En computadora la ventana se desvanece y crece de 96% a 100%; en celular (hoja) sube
   desde abajo, como en iOS. La salida es el mismo camino al revés y más rápida, y la hace una copia de la ventana
   (.ventana-saliendo, ver el final del app.js de cada app) porque React la quita de la página de golpe. Las
   entradas van con `backwards` y no `both` para que al terminar no se quede ningún transform puesto. Con "reducir
   movimiento", solo fundidos.
   Plan: plans/002-ventanas-entran-y-salen-suave.md */
.modal-overlay { animation: fondoEntra 200ms var(--ease-out) backwards; }
.modal-overlay > .modal { animation: ventanaEntra 200ms var(--ease-out) backwards; }
.modal-overlay.ventana-saliendo { animation: fondoSale 150ms var(--ease-out) forwards; pointer-events: none; }
.modal-overlay.ventana-saliendo > .modal { animation: ventanaSale 150ms var(--ease-out) forwards; }
@keyframes fondoEntra { from { opacity: 0; } }
@keyframes fondoSale { to { opacity: 0; } }
@keyframes ventanaEntra { from { opacity: 0; transform: scale(.96); } }
@keyframes ventanaSale { to { opacity: 0; transform: scale(.96); } }
@keyframes hojaEntra { from { transform: translateY(100%); } }
@keyframes hojaSale { to { transform: translateY(100%); } }
@keyframes soloAparece { from { opacity: 0; } }
@keyframes soloDesaparece { to { opacity: 0; } }
@media (max-width: 640px) {
    /* En celular la ventana es una hoja que sube desde abajo. */
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-overlay > .modal { animation: hojaEntra 320ms var(--ease-drawer) backwards; }
    /* El fondo dura lo mismo que la hoja: la hoja es hija del fondo y se desvanecería con él antes de terminar de bajar. */
    .modal-overlay.ventana-saliendo { animation-duration: 220ms; }
    .modal-overlay.ventana-saliendo > .modal { animation: hojaSale 220ms var(--ease-drawer) forwards; }
}
@media (prefers-reduced-motion: reduce) {
    .modal-overlay > .modal { animation: soloAparece 200ms ease backwards; }
    .modal-overlay.ventana-saliendo > .modal { animation: soloDesaparece 150ms ease forwards; }
}