/* ── BIS Cloud · la paleta y las medidas de la concha ─────────────────────────
   FUENTE ÚNICA DE VERDAD. Este archivo es el original; las copias en las cuatro
   aplicaciones se generan con `_newvps\sync-bis-tokens.ps1`, que además compara
   los hashes y avisa si alguna se ha separado.

   POR QUÉ EXISTE (Ricardo, 2026-08-27)

   Hasta ahora cada aplicación declaraba su paleta a su manera y con sus propios
   nombres: el portal usaba `--bg`, `--bar`, `--text`; el Timecard `--bis-bg`,
   `--bis-bar-bg`, `--bis-fg`; Analytics escribía ~70 colores a mano en reglas
   sueltas; y el Manager casi no declaraba nada — ni siquiera un fondo oscuro de
   body.

   Nombres distintos para la misma cosa significan que **nada obliga a que
   coincidan**, así que divergían en cuanto alguien tocaba una. Ricardo lo
   reportó tres veces y las tres se arregló una app, no la causa.

   La regla anterior decía que los valores se duplicaban por aplicación **a
   propósito**. Se abandona: la duplicación sin comprobación no es una decisión,
   es una fuga. Duplicar el ARCHIVO y verificar que las copias son idénticas sí
   lo es.

   DE DÓNDE SALEN LOS VALORES

   Son los medidos de Analytics, que es la referencia que fijó Ricardo para
   tipografía y métricas, con el azul de la concha del Manager (#1f5f9e claro,
   #12263a oscuro) que las tres aplicaciones ya compartían.

   Tres valores estaban en disputa y los decidió Ricardo el 2026-08-27:
     · fondo oscuro   #1b1f24  (el portal usaba #0f1c2b)
     · texto oscuro   #e4e6eb  (el portal usaba #eaf1f8)
     · ancho panel    260px    (Manager y Timecard usaban 250px; Analytics subió
                                a 260 para que dejaran de partirse etiquetas
                                largas como «Employees Dashboard»)
   -------------------------------------------------------------------------- */

:root {
    /* Página */
    --bis-bg:             #ffffff;
    --bis-fg:             #212529;
    --bis-muted:          #6b7683;
    --bis-border:         #d6d5d5;
    --bis-link:           #006bb7;

    /* El panel lateral y la sección del título que lleva encima */
    --bis-sidebar-bg:     #1f5f9e;
    --bis-sidebar-scroll: rgba(255, 255, 255, .38);
    /* El bloque del nombre de la aplicación: el MISMO azul oscurecido, no un
       color aparte. Así sigue al panel cuando el panel cambia. */
    --bis-brand-bg:       rgba(0, 0, 0, .4);
    /* Blanco, y el mismo en los dos temas: el bloque del título va sobre el azul
       del panel, que no cambia de claro a oscuro. Sin esta regla cada aplicación
       lo heredaba de otro sitio y salían tres colores distintos — Analytics del
       azul de enlace de Bootstrap, el Manager de un gris, el Timecard casi
       blanco. Ricardo los puso uno al lado del otro el 2026-08-27. */
    --bis-brand-fg:       #ffffff;

    /* La barra superior de <main>. Separada del panel a propósito: son dos
       superficies distintas y confundirlas fue lo que dejó una barra blanca
       sobre página oscura en el Timecard. */
    --bis-topbar-bg:      #f7f7f7;
    --bis-topbar-fg:      #212529;

    /* La barra de estado del pie */
    --bis-statusbar-bg:   #f1f3f5;
    --bis-statusbar-fg:   #33404d;

    /* La barra azul de cabecera que usan las pantallas heredadas del Timecard */
    --bis-bar-bg:         #1f5f9e;
    --bis-bar-fg:         #ffffff;

    /* Diálogos */
    --bis-dialog-bg:      #ffffff;
    --bis-dialog-fg:      #1f2933;

    /* Botones de la barra */
    --bis-btn-fg:         #4a5b6b;
    --bis-btn-hover:      #1b6ec2;
    --bis-btn-hover-bg:   rgba(27, 110, 194, .08);

    /* ── Medidas ──────────────────────────────────────────────────────────── */
    --bis-sidebar-w:      260px;
    --bis-topbar-h:       3.5rem;
    --bis-statusbar-h:    30px;
    --bis-nav-font:       .9rem;
    --bis-nav-min-h:      2.25rem;
    --bis-nav-pad:        5px 0 5px 10px;
    --bis-nav-ico:        20px;
    --bis-nav-gap:        .75rem;

    /* La tipografía. Una sola pila para las cuatro. */
    --bis-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
    --bis-bg:             #1b1f24;
    --bis-fg:             #e4e6eb;
    --bis-muted:          #a8b3bf;
    --bis-border:         #3a414a;
    --bis-link:           #7ab8ff;

    --bis-sidebar-bg:     #12263a;
    --bis-sidebar-scroll: rgba(255, 255, 255, .24);
    --bis-brand-bg:       rgba(0, 0, 0, .4);

    --bis-topbar-bg:      #22272e;
    --bis-topbar-fg:      #e4e6eb;

    --bis-statusbar-bg:   #1b1f24;
    --bis-statusbar-fg:   #c3ccd6;

    --bis-bar-bg:         #12263a;
    --bis-bar-fg:         #e4e6eb;

    --bis-dialog-bg:      #232a32;
    --bis-dialog-fg:      #e6eaee;

    --bis-btn-fg:         #b6c2cf;
    --bis-btn-hover:      #6cb2f0;
    --bis-btn-hover-bg:   rgba(108, 178, 240, .12);
}

/* ── Lo que se aplica en las cuatro por igual ─────────────────────────────────
   Sólo la concha: página, panel, barras y tipografía. Lo de dentro de cada
   aplicación es suyo y no se toca desde aquí.

   `html` además de `body`: body sólo pinta hasta donde llega su contenido, y
   debajo asomaba el fondo del navegador como una banda más clara en una página
   corta. Comprobado. */
html,
body {
    background-color: var(--bis-bg);
    color: var(--bis-fg);
    font-family: var(--bis-font);
}

/* El panel lateral y su bloque de título. Hijo directo de .page para que no
   pueda casar con un <html class="sidebar"> heredado — eso dejó el documento
   entero en 250px el 2026-08-27. */
.page > .sidebar {
    background: var(--bis-sidebar-bg);
}

.page > .sidebar .top-row {
    background-color: var(--bis-brand-bg);
    min-height: var(--bis-topbar-h);
}

/* El nombre de la aplicación. Es un <a>, así que sin esto lo pinta la regla de
   enlaces de cada aplicación —o `--bs-navbar-brand-color` de Bootstrap— y salen
   tres colores distintos para tres pantallas que se ven juntas.

   Tres clases de especificidad (0,3,0): le gana a `.navbar-brand` de Bootstrap y
   a `a, .btn-link` de cada app.css, sin necesidad de !important. El :hover se
   declara aparte porque Bootstrap tiene el suyo y, si no, el título cambia de
   color al pasar el ratón por encima. */
.page > .sidebar .navbar-brand,
.page > .sidebar .navbar-brand:hover,
.page > .sidebar .navbar-brand:focus {
    color: var(--bis-brand-fg);
    text-decoration: none;
}

/* La barra superior de <main>. Se declara EN LOS DOS TEMAS y con valores
   propios, no con `var(--bs-tertiary-bg, ...)`: esa variable es de Bootstrap 5,
   no existe bajo Bootstrap 3, y su respaldo claro dejaba la barra blanca sobre
   página oscura. Pasó en el Timecard y sigue pasando en el Manager. */
main > .top-row,
.top-row:not(.sidebar .top-row) {
    background-color: var(--bis-topbar-bg);
    border-bottom: 1px solid var(--bis-border);
    color: var(--bis-topbar-fg);
}

/* La barra de estado del pie */
.bis-statusbar {
    background: var(--bis-statusbar-bg);
    border-top: 1px solid var(--bis-border);
    color: var(--bis-statusbar-fg);
    height: var(--bis-statusbar-h);
}

.bis-status-desc { color: var(--bis-muted); }
.bis-status-sep  { background: var(--bis-border); }