/* ==================================================================
 * fci-ui.css — estilos compartidos de las apps FCI (23-oct-2026)
 * ------------------------------------------------------------------
 * Fuente: compartido/fci-ui.css. Se edita AQUÍ y se copia con
 *   bash herramientas/verificar-copias-compartidas.sh --sincronizar
 * (plan: documentacion/PLAN-UNIFICACION-DISENO.md).
 *
 * Todas las clases llevan el prefijo `fci-` y las variables viven en
 * `.fci-sin`, para poder cargar este archivo en apps con diseño viejo
 * sin que choque con su CSS (.btn, .card, :root, body…). fci-ui.js lo
 * carga solo; no hace falta un <link> en cada app.
 *
 * Dos piezas: el armazón con menú lateral (`.fci-shell`, 23-oct-2026, piloto en
 * Call Center) y la pantalla "Entra desde el Portal" (`.fci-sin`): idéntica a la de
 * Calibraciones (decisión de Alex, 23-oct-2026). Es la que sale al
 * cerrar sesión o cuando la sesión vence. Va fija sobre toda la
 * ventana (position: fixed) para no depender del armazón de cada app.
 * ================================================================== */

/* ==================================================================
 * Variables (prefijo --fci-): sirven en todo el documento, también en las
 * ventanas y avisos que cuelgan de <body>. Mismos valores que Calibraciones.
 * ================================================================== */
:root {
    --fci-rojo: #ED293E;
    --fci-rojo-oscuro: #C81F32;
    --fci-rojo-suave: #FDECEE;
    --fci-azul: #15284B;
    --fci-azul-2: #3B4A66;
    --fci-gris: #6B7689;
    --fci-linea: #E3E2E0;
    --fci-banda: #EAE9E7;
    --fci-fondo: #F4F3F2;
    --fci-ok: #1A7D3A;
    --fci-ok-suave: #E7F5EC;
    --fci-aviso: #A35F00;
    --fci-aviso-suave: #FDF3E3;
    --fci-radio: 10px;
    --fci-radio-sm: 6px;
    --fci-sombra-sm: 0 1px 2px rgba(16, 24, 32, .06);
    --fci-sombra-md: 0 12px 32px rgba(16, 24, 32, .14), 0 2px 6px rgba(16, 24, 32, .06);
    --fci-ease: cubic-bezier(.23, 1, .32, 1);
    --fci-menu-ancho: 248px;
    --fci-barra-alto: 56px;
}

.fci-sin {
    --fci-rojo: #ED293E;
    --fci-rojo-oscuro: #C81F32;
    --fci-azul: #15284B;
    --fci-gris: #6B7689;
    --fci-linea: #E3E2E0;

    position: fixed; inset: 0; z-index: 2000; overflow: auto;
    background: #fff; color: var(--fci-azul);
    font-family: "Palanquin", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px; line-height: 1.5; text-align: left;
    -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
.fci-sin *, .fci-sin *::before, .fci-sin *::after { box-sizing: border-box; }

.fci-sin-grid { min-height: 100%; display: grid; grid-template-columns: 1fr; }

.fci-sin-marca { display: none; }

.fci-sin-panel {
    display: flex; flex-direction: column; justify-content: center;
    width: 100%; max-width: 440px; margin: 0 auto;
    padding: 32px 20px 48px;
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
}
.fci-sin-logo { height: 56px; width: auto; max-width: 100%; margin: 0 0 40px; align-self: flex-start; }
.fci-sin-panel h1 {
    margin: 0 0 6px; font-family: inherit; font-size: 28px; font-weight: 700;
    line-height: 1.2; color: var(--fci-azul);
}
.fci-sin-lead { margin: 0 0 28px; color: var(--fci-gris); }

.fci-sin-boton {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-height: 44px; padding: 0 18px;
    border: 1px solid transparent; border-radius: 6px;
    background: var(--fci-rojo); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    /* Sin transición de color: cuando el CSS llega después de armar la pantalla, el
       rojo aparecía con un fundido (el botón se veía blanco sobre blanco). */
    transition: scale .16s cubic-bezier(.23, 1, .32, 1);
}
.fci-sin-boton:hover { background: var(--fci-rojo-oscuro); }
.fci-sin-boton:active { scale: .97; }
.fci-sin-boton:focus-visible { outline: 2px solid var(--fci-rojo); outline-offset: 2px; }

.fci-sin-aviso {
    margin: 16px 0 0; padding: 12px 14px; border-radius: 6px;
    background: #FDECEE; color: var(--fci-rojo-oscuro); font-size: 14px; font-weight: 600;
}

@media (min-width: 900px) {
    .fci-sin-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .fci-sin-marca {
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 48px; color: #fff; position: relative; overflow: hidden;
        /* Azul institucional de FCI. */
        background: linear-gradient(160deg, #1E3663 0%, #15284B 55%, #0C1930 100%);
    }
    .fci-sin-marca h2 {
        margin: 0; max-width: 12ch; font-family: inherit; font-size: 34px;
        font-weight: 700; line-height: 1.2; color: #fff;
    }
    .fci-sin-marca p { margin: 12px 0 0; max-width: 36ch; opacity: .85; }
    .fci-sin-panel { padding: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .fci-sin-boton { transition-duration: .01ms; }
}

/* ==================================================================
 * Armazón con menú lateral (de Calibraciones, 23-oct-2026)
 * Celular: barra de arriba con ☰ y menú que se desliza; ≥ 1024 px: menú fijo.
 * ================================================================== */
.fci-shell {
    min-height: 100vh; min-height: 100dvh; background: var(--fci-fondo); color: var(--fci-azul);
    font-family: "Palanquin", "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5;
}
.fci-shell *, .fci-shell *::before, .fci-shell *::after { box-sizing: border-box; }
/* :where() deja esta regla con especificidad 0: así la clase de cada botón (.btn, .pastilla-*…)
   conserva su color y su peso. Con `.fci-shell button` (0,1,1) ganaba a cualquier clase y dejaba el
   texto rojo sobre rojo en Call Center (24-oct-2026). Regla para toda app nueva: nada de
   `.fci-shell <etiqueta>` para fijar color o fuente; usa :where() o una clase. */
:where(.fci-shell) button { font: inherit; color: inherit; }
.fci-shell :focus-visible { outline: 2px solid var(--fci-rojo); outline-offset: 2px; }
.fci-icon { width: 20px; height: 20px; flex: none; }

.fci-icon-btn {
    width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center;
    border: 0; background: transparent; border-radius: var(--fci-radio-sm); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fci-icon-btn:hover { background: var(--fci-banda); }

.fci-btn-ghost {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%;
    min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--fci-radio-sm);
    background: transparent; color: inherit; font-weight: inherit; cursor: pointer; /* se ve igual que antes de :where() (aprobado por Alex 24-oct-2026) */
    -webkit-tap-highlight-color: transparent; transition: scale .16s var(--fci-ease);
}
.fci-btn-ghost:hover { background: var(--fci-banda); }
.fci-btn-ghost:not(:disabled):active { scale: .97; }

.fci-topbar {
    position: sticky; top: 0; z-index: 20; height: var(--fci-barra-alto);
    display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px;
    background: #fff; border-bottom: 1px solid var(--fci-linea);
}
.fci-topbar-logo { height: 32px; width: auto; }
.fci-topbar-app { font-weight: 600; color: var(--fci-gris); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--fci-linea); }

.fci-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(84vw, 300px);
    display: flex; flex-direction: column; overflow-y: auto;
    background: #fff; border-right: 1px solid var(--fci-linea);
    transform: translateX(-100%); transition: transform .28s var(--fci-ease);
}
.fci-sidebar.open { transform: none; box-shadow: var(--fci-sombra-md); }
.fci-scrim {
    position: fixed; inset: 0; z-index: 30; background: rgba(16, 24, 32, .38);
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.fci-scrim.open { opacity: 1; pointer-events: auto; }
.fci-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 16px 20px; }
.fci-sidebar-head img { height: 40px; width: auto; }
.fci-sidebar-app {
    font-weight: 600; color: var(--fci-gris); font-size: 13px; letter-spacing: .08em;
    text-transform: uppercase; padding: 0 20px 12px;
}
.fci-nav { display: grid; gap: 2px; padding: 8px 12px; }
.fci-nav a {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px; border-radius: var(--fci-radio-sm);
    color: var(--fci-azul-2); font-weight: 600; text-decoration: none;
}
.fci-nav a:hover { background: var(--fci-fondo); color: var(--fci-azul); }
.fci-nav a[aria-current="page"] { background: var(--fci-rojo-suave); color: var(--fci-rojo-oscuro); }
.fci-nav a[aria-current="page"]::before { /* pestaña roja del menú seleccionado */
    content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px;
    background: var(--fci-rojo); border-radius: 0 3px 3px 0;
}
/* Espacio opcional debajo de las opciones del menú (props.menuExtra del armazón, 31-oct-2026): Ventas pone ahí el
   switch de Comisiones. Con el mismo margen lateral que .fci-nav para que quede alineado con sus opciones. */
.fci-nav-extra { margin: 0 12px; padding: 8px 0 4px; border-top: 1px solid var(--fci-linea); }
.fci-sidebar-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--fci-linea); }
.fci-who { display: flex; align-items: center; gap: 10px; padding: 8px; }
.fci-avatar {
    width: 36px; height: 36px; flex: none; display: grid; place-items: center;
    border-radius: 50%; background: var(--fci-azul); color: #fff; font-weight: 700; font-size: 14px;
}
.fci-who-name { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.fci-who-role { font-size: 13px; color: var(--fci-gris); }

.fci-apps { position: relative; margin: 4px 0; }
.fci-apps-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 45;
    background: #fff; border: 1px solid var(--fci-linea); border-radius: var(--fci-radio);
    box-shadow: var(--fci-sombra-md); padding: 6px; display: grid;
    transform-origin: 50% 100%; animation: fci-menu-entra .16s var(--fci-ease) backwards;
}
.fci-apps-menu a {
    display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--fci-radio-sm);
    color: var(--fci-azul); font-weight: 600; text-decoration: none;
}
.fci-apps-menu a:hover { background: var(--fci-fondo); }
/* Salida del menú Apps: la hace la copia .ventana-saliendo que dejan los bloques de
   "salida suave de las ventanas" de cada app (auditoría de animaciones, punto 5, 4-oct-2026,
   plans/005-menu-apps-sale-del-boton.md). Si la app no los trae, simplemente se quita. */
.fci-apps-menu.ventana-saliendo { animation: fci-menu-sale .12s var(--fci-ease) forwards; pointer-events: none; }
@keyframes fci-menu-entra { from { opacity: 0; transform: scale(.96); } }
@keyframes fci-menu-sale { to { opacity: 0; transform: scale(.96); } }

.fci-main { padding: 20px 16px 48px; max-width: 1760px; min-width: 0; } /* antes 1200 px: en monitores de 27" sobraba espacio a la derecha (24-oct-2026) */

@media (min-width: 1024px) {
    .fci-topbar, .fci-scrim { display: none; }
    .fci-sidebar { transform: none; width: var(--fci-menu-ancho); transition: none; }
    .fci-close-menu { display: none; }
    .fci-main { margin-left: var(--fci-menu-ancho); padding: 32px 40px 64px; }
}

/* ---------- Encabezado de página ---------- */
.fci-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 24px; }
.fci-page-title { display: flex; align-items: center; gap: 12px; margin: 0; font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--fci-azul); }
.fci-page-title::before { /* pestaña roja en punta (de XYZTEC, en rojo FCI: decisión de Alex 23-oct-2026) */
    content: ""; width: 22px; height: 18px; flex: none; background: var(--fci-rojo);
    clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
}
.fci-page-sub { color: var(--fci-gris); margin: 6px 0 0 34px; }
@media (min-width: 720px) { .fci-page-title { font-size: 30px; } }

@media (prefers-reduced-motion: reduce) {
    .fci-sidebar, .fci-scrim { transition-duration: .01ms; }
    .fci-apps-menu { animation: none; }
}