/* ════════════════════════════════════════════════════════════════════════
   LG-FORTE-TOKENS.CSS — Capa corporativa FORTE GROUP
   ════════════════════════════════════════════════════════════════════════
   Propósito:
     Formalizar los tokens de identidad corporativa FORTE GROUP como capa
     complementaria al sistema LG (Liquid Glass). Preparación para las
     fases R-1 (shell/topbar/footer) y R-2 (dashboard index.html).

   Uso:
     Variables --forte-* disponibles en TODOS los templates.
     NO sobrescriben tokens --lg-* existentes (sistema LG intacto).
     Los tokens de dark y forte-overlay se activan via data-theme.

   Origen de valores:
     Extraídos de renewcssFORTE/ (logos, mockups, screenshots) y de
     app/static/css/auth-login.css (identidad ya implementada en login).
     Son los colores reales del branding FORTE GROUP en uso activo.

   Fases futuras:
     R-1 → shell / topbar / footer
     R-2 → dashboard index.html
     R-3 → modales / formularios legacy

   ref: GLOBAL_UI_COMPOSITION_CORPORATE_REDESIGN_AUDIT_OPUS.md (R-0)
   ver: 1.0 — 2026-05-06
   ════════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  :root  ·  TOKENS CORPORATIVOS BASE (light-mode default)           ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
:root {

    /* ── Bloque 1: Identidad corporativa ──────────────────────────────── */
    /* Strings informativos (uso vía CSS attr() o JS si se necesitan)     */
    --forte-brand-name:      "FORTE GROUP";
    --forte-brand-tagline:   "Solutions · Beyond Plastic";
    --forte-brand-unit:      "FORTEONE Dynamics";


    /* ── Bloque 2: Paleta principal de marca ──────────────────────────── */
    /* Fuente verificada: auth-login.css (forte-dark + forte-light)        */

    /* Ink — negro corporativo cálido (base oscura de todo el branding)   */
    --forte-ink:             #140608;
    --forte-ink-2:           #1b0a0b;
    --forte-ink-deep:        #0d0304;
    --forte-ink-rgb:         20, 6, 8;

    /* Cream — blanco cálido corporativo (fondos light y textos en dark)  */
    --forte-cream:           #f2efeb;
    --forte-cream-2:         #f7f5f1;
    --forte-cream-text:      #f2efeb;      /* texto sobre fondos oscuros — H6 R-3.D.B: era #edfdfc (cyan, fuera de paleta) */
    --forte-cream-rgb:       242, 239, 235; /* RGB de #f2efeb — H6 R-3.D.B: corregido de 237,253,252 */


    /* ── Bloque 3: Acento corporativo (rojo FORTE) ────────────────────── */
    /* Valor verificado en auth-login.css: --auth-red: #b3342e            */

    --forte-red:             #b3342e;
    --forte-red-rgb:         179, 52, 46;
    --forte-red-hover:       #942a24;
    --forte-red-soft:        rgba(179, 52, 46, 0.12);
    --forte-red-soft-dark:   rgba(179, 52, 46, 0.22);
    /* R-0B: alias semántico coral/red — INDICACIONES.txt y dogma FORTE */
    --forte-coral:           var(--forte-red);
    --forte-coral-rgb:       var(--forte-red-rgb);


    /* ── Bloque 4: Acento secundario (teal FORTE) ────────────────────── */
    /* Valor verificado en auth-login.css: --auth-teal: #053f43           */

    --forte-teal:            #053f43;
    --forte-teal-light:      #78b9b4;
    --forte-teal-rgb:        5, 63, 67;
    --forte-teal-soft:       rgba(5, 63, 67, 0.10);


    /* ── Bloque 4b: Paleta canónica completa — Oliva + Plata ─────────── */
    /* Completan los 6 colores de INDICACIONES.txt §1.                    */
    /* ref: renewcssFORTE/INDICACIONES.txt §1                             */
    /* D3 (R-3.C): token --forte-olive ausente → añadido.                 */
    /* D4 (R-3.C): token --forte-silver ausente → añadido.                */

    /* Oliva — acento dominante de identidad FORTE */
    --forte-olive:           #6F8F59;
    --forte-olive-rgb:       111, 143, 89;
    --forte-olive-soft:      rgba(111, 143, 89, 0.10);

    /* Plata — hairlines y separadores neutros */
    --forte-silver:          #D0D5DF;
    --forte-silver-rgb:      208, 213, 223;
    --forte-silver-soft:     rgba(208, 213, 223, 0.20);


    /* ── Bloque 5: Neutros corporativos ──────────────────────────────── */
    /* Escala cálida alineada con cream/ink de la marca                   */

    --forte-neutral-50:      #faf9f7;
    --forte-neutral-100:     #f4f0ec;
    --forte-neutral-200:     #e8e3de;
    --forte-neutral-300:     #d5cfc8;
    --forte-neutral-400:     #bdb5ab;
    --forte-neutral-500:     #8f8680;
    --forte-neutral-600:     #635b56;
    --forte-neutral-700:     #3e3631;
    --forte-neutral-800:     #251e1a;
    --forte-neutral-900:     #140608;


    /* ── Bloque 6: Superficies (light-mode) ─────────────────────────── */
    /* Fondos de página, cards, modales en modo claro                     */

    --forte-surface-base:     #f2efeb;           /* fondo de página       */
    --forte-surface-soft:     #f7f5f1;           /* fondo elevado suave   */
    --forte-surface-raised:   rgba(242, 239, 235, 0.90); /* card / panel — cream base (D5 R-3.C) */
    --forte-surface-overlay:  rgba(20, 6, 8, 0.04);   /* hover overlay   */
    --forte-surface-glass:    rgba(242, 239, 235, 0.72); /* glass light   */


    /* ── Bloque 7: Texto (light-mode) ───────────────────────────────── */

    --forte-text:             #140608;
    --forte-text-secondary:   rgba(20, 6, 8, 0.68);
    --forte-text-tertiary:    rgba(20, 6, 8, 0.46);
    --forte-text-disabled:    rgba(20, 6, 8, 0.28);
    --forte-text-on-dark:     var(--forte-cream);  /* R-0B: corregido de #edfdfc (cyan fuera de paleta) → cream canónico */
    --forte-text-on-dark-soft:rgba(242, 239, 235, 0.72); /* H6 R-3.D.B: cream canónico — era rgba(237,253,252,0.72) cyan */
    --forte-text-on-accent:   #f4f0ec;


    /* ── Bloque 7b: Tokens semánticos de iconos shell ───────────────── */
    /* H5 R-3.D.B: reemplazan hex literales en _topbar.html dropdown.   */
    --forte-icon-info:       #42a5f5;  /* Admin Productivity — azul semántico */
    --forte-icon-success:    #30d158;  /* Admin DB — verde semántico        */
    --forte-icon-audit:      #bf5af2;  /* Registro Actividad — púrpura       */


    /* ── Bloque 8: Bordes (light-mode) ──────────────────────────────── */

    --forte-border-light:     rgba(20, 6, 8, 0.07);
    --forte-border:           rgba(20, 6, 8, 0.14);
    --forte-border-strong:    rgba(20, 6, 8, 0.24);
    --forte-border-accent:    rgba(179, 52, 46, 0.28);

    /* Hairlines — trazo ultra-delgado, estilo industrial */
    --forte-hairline:         0.5px solid var(--forte-border);
    --forte-hairline-light:   0.5px solid var(--forte-border-light);
    --forte-hairline-strong:  0.5px solid var(--forte-border-strong);
    --forte-hairline-accent:  0.5px solid var(--forte-border-accent);


    /* ── Bloque 9: Sombras suaves (light-mode) ───────────────────────── */
    /* Sombras cálidas coherentes con ink #140608                         */

    --forte-shadow-xs:  0 1px 2px rgba(20, 6, 8, 0.05);
    --forte-shadow-sm:  0 2px 6px rgba(20, 6, 8, 0.07), 0 1px 2px rgba(20, 6, 8, 0.04);
    --forte-shadow-md:  0 4px 16px rgba(20, 6, 8, 0.09), 0 2px 6px rgba(20, 6, 8, 0.05);
    --forte-shadow-lg:  0 8px 32px rgba(20, 6, 8, 0.12), 0 4px 12px rgba(20, 6, 8, 0.06);
    --forte-shadow-xl:  0 16px 60px rgba(20, 6, 8, 0.16), 0 8px 24px rgba(20, 6, 8, 0.08);

    /* Sombra compleja de auth-login (referencia corporativa)             */
    --forte-shadow-auth-light: 0 26px 70px rgba(20, 6, 8, 0.10);
    --forte-shadow-auth-dark:  0 36px 100px rgba(22, 9, 10, 0.28);


    /* ── Bloque 10: Estados semánticos ──────────────────────────────── */
    /* Alineados con Bootstrap 5 para compatibilidad con elementos LG    */

    --forte-success:         #198754;
    --forte-success-soft:    rgba(25, 135, 84, 0.10);
    --forte-warning:         #cc7a00;
    --forte-warning-soft:    rgba(204, 122, 0, 0.10);
    --forte-danger:          #b3342e;            /* = forte-red            */
    --forte-danger-soft:     rgba(179, 52, 46, 0.10);
    --forte-info:            var(--forte-teal);
    --forte-info-soft:       var(--forte-teal-soft);


    /* ── Bloque 11: Foco / Accesibilidad ─────────────────────────────── */
    /* Ring basado en rojo corporativo para coherencia de marca           */

    --forte-focus-ring:      0 0 0 3px rgba(179, 52, 46, 0.30);
    --forte-focus-ring-offset: 2px;


    /* ── Bloque 12: Tipografía corporativa ──────────────────────────── */
    /* La marca FORTE usa sans-serif geométrica/industrial. Inter es la   */
    /* elección técnicamente más compatible con el stack actual.          */
    /* --lg-font ya usa system-ui; --forte-font lo complementa con Inter. */

    --forte-font:            "ForteInter", 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --forte-font-display:    "ForteInter", 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    --forte-fw-light:        300;
    --forte-fw-regular:      400;
    --forte-fw-medium:       500;
    --forte-fw-semibold:     600;
    --forte-fw-bold:         700;
    --forte-fw-black:        900;

    /* Letter-spacing industrial (estilo "FORTE GROUP", "SOLUTIONS") */
    --forte-ls-wide:         0.08em;
    --forte-ls-wider:        0.12em;
    --forte-ls-widest:       0.18em;


    /* ── Bloque 13: Geometría / Radio corporativo ────────────────────── */
    /* auth-login.css usa --auth-radius: 2px — identidad ultra-sharp.    */
    /* Se conserva ese valor como token formal FORTE.                     */
    /* Los radios LG (--lg-radius-*) no se tocan.                        */

    --forte-radius:          2px;              /* industrial ultra-sharp  */
    --forte-radius-sm:       4px;              /* mínimo relajado          */
    --forte-radius-md:       6px;              /* botones / inputs         */
    --forte-radius-card:     2px;              /* cards en identidad FORTE */


    /* ── Bloque 14: Transiciones ─────────────────────────────────────── */

    --forte-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --forte-transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --forte-transition-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);


    /* ── Bloque 15: Aliases seguros → sistema LG ────────────────────── */
    /* Puente formal entre tokens FORTE y el sistema LG existente.        */
    /* Usados en fases futuras para reutilizar tokens con semántica LG.   */

    --forte-z-topbar:        var(--lg-z-topbar, 1000);
    --forte-z-dropdown:      var(--lg-z-dropdown, 1200);
    --forte-z-modal:         var(--lg-z-modal, 2000);
    --forte-z-toast:         var(--lg-z-toast, 5000);
    --forte-z-loading:       var(--lg-z-loading, 99000);

    --forte-page-max-width:  var(--lg-page-max-width, 1600px);
    --forte-modal-max-width: var(--lg-modal-max-width, 1240px);

    /* Gradiente corporativo oscuro (fondo brand panel login dark) */
    --forte-gradient-dark:
        radial-gradient(circle at 25% 55%, rgba(255,255,255,.025), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(179, 52, 46, .10), transparent 28%),
        linear-gradient(115deg, #0d0304 0%, #140608 58%, #1a090a 100%);

    /* Gradiente corporativo claro (fondo brand panel login light) */
    --forte-gradient-light:
        linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.12)),
        #f2efeb;

    /* ── Bloque 16: Shell layout ─────────────────────────────────────── */
    --forte-shell-topbar-height: 44px;     /* altura base topbar, sin safe-area */
    --forte-shell-footer-height: 28px;     /* altura base footer fixed (lg-shell.css body padding-bottom) */
    /* H1 R-3.D.B: alias compatibilidad — lg-shell.css referencia --lg-navbar-height */
    --lg-navbar-height: var(--forte-shell-topbar-height, 44px);

}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  [data-theme="dark"]  ·  OVERRIDES DARK MODE                       ║
   ╚══════════════════════════════════════════════════════════════════════╝
   Activación: mismo mecanismo que lg-tokens.css
   (toggle client-side + localStorage en base.html)                       */

[data-theme="dark"] {

    /* Superficies oscuras */
    --forte-surface-base:     #140608;
    --forte-surface-soft:     #1b0a0b;
    --forte-surface-raised:   rgba(27, 10, 11, 0.90);
    --forte-surface-overlay:  rgba(237, 253, 252, 0.04);
    --forte-surface-glass:    rgba(20, 6, 8, 0.72);

    /* Texto sobre fondo oscuro */
    --forte-text:             #edfdfc;
    --forte-text-secondary:   rgba(237, 253, 252, 0.74);
    --forte-text-tertiary:    rgba(237, 253, 252, 0.52);
    --forte-text-disabled:    rgba(237, 253, 252, 0.28);

    /* Bordes sobre fondo oscuro */
    --forte-border-light:     rgba(237, 253, 252, 0.09);
    --forte-border:           rgba(237, 253, 252, 0.18);
    --forte-border-strong:    rgba(237, 253, 252, 0.30);
    --forte-border-accent:    rgba(179, 52, 46, 0.35);

    /* Sombras oscuras */
    --forte-shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.40);
    --forte-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.30);
    --forte-shadow-md:  0 4px 20px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    --forte-shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.45);
    --forte-shadow-xl:  0 16px 80px rgba(0, 0, 0, 0.75), 0 8px 32px rgba(0, 0, 0, 0.55);

    /* Acento rojo ligeramente más brillante en dark */
    --forte-red-soft:         rgba(179, 52, 46, 0.22);

    /* Focus ring más visible en dark */
    --forte-focus-ring:       0 0 0 3px rgba(179, 52, 46, 0.45);

}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  [data-theme="forte"]  ·  OVERLAY CORPORATIVO FORTE                ║
   ╚══════════════════════════════════════════════════════════════════════╝
   Activado via toggle admin en topbar (formulario server-side).
   Aplica identidad full FORTE GROUP sobre el shell.
   Los CRUDs LG no se ven afectados hasta que fases futuras lo integren. */

[data-theme="forte"] {

    /* Superficies forte: fondo ink corporativo */
    --forte-surface-base:     #140608;
    --forte-surface-soft:     #1b0a0b;
    --forte-surface-raised:   rgba(27, 10, 11, 0.90);
    --forte-surface-overlay:  rgba(237, 253, 252, 0.04);
    --forte-surface-glass:    rgba(13, 3, 4, 0.78);

    /* Texto forte: cream corporativo */
    --forte-text:             #edfdfc;
    --forte-text-secondary:   rgba(237, 253, 252, 0.74);
    --forte-text-tertiary:    rgba(237, 253, 252, 0.52);
    --forte-text-disabled:    rgba(237, 253, 252, 0.28);

    /* Bordes forte */
    --forte-border-light:     rgba(237, 253, 252, 0.09);
    --forte-border:           rgba(237, 253, 252, 0.18);
    --forte-border-strong:    rgba(237, 253, 252, 0.30);

    /* Sombras forte */
    --forte-shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.50);
    --forte-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.60), 0 1px 3px rgba(0, 0, 0, 0.40);
    --forte-shadow-md:  0 4px 20px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.45);
    --forte-shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.72), 0 4px 16px rgba(0, 0, 0, 0.50);

    /* Acento rojo forte: ligeramente más luminoso que light */
    --forte-red:              #c03831;
    --forte-red-soft:         rgba(192, 56, 49, 0.20);
    --forte-red-hover:        #a42e28;

    /* Focus ring forte */
    --forte-focus-ring:       0 0 0 3px rgba(192, 56, 49, 0.50);

}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  @media prefers-reduced-motion  ·  ACCESIBILIDAD OBLIGATORIA       ║
   ║  ref: LG_Dogma_OnePager.md punto 7                                  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --forte-transition-fast: 0ms;
        --forte-transition-base: 0ms;
        --forte-transition-slow: 0ms;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   R-1 · FORTE SHELL BRIDGE — Topbar + Footer
   ════════════════════════════════════════════════════════════════════════
   Carga DESPUÉS de lg-shell.css (orden cambiado en base.html en R-1)
   → sus reglas tienen precedencia natural sin !important en especificidad.

   Shell modificado:
     _topbar.html  — clase forte-shell-topbar (reemplaza bg-primary)
                   — brand: "FORTEONE" + "FORTE GROUP" (elimina Dynamics)
                   — tokens --forte-* en colores inline
     _footer.html  — "FORTEONE · sistema integral de procesos"
                   — "© 2025 FORTE GROUP"
     lg-shell.css  — sobreescrito por selectores de esta sección

   ref: R1_SHELL_CORPORATE_TOPBAR_FOOTER_SONNET.md
   ════════════════════════════════════════════════════════════════════════ */


/* ── R1-1: Footer — override de tokens --lg-footer-* ────────────────────
   Los selectores .lg-footer-* en lg-shell.css consumen estas variables.
   Se cambia la paleta azul-LG por la paleta cream FORTE.               */
:root {
    --lg-footer-accent:    var(--forte-red, #b3342e);          /* era: azul #6ba3d0  */
    --lg-footer-muted:     rgba(237, 253, 252, 0.72);          /* era: azul #b8d4ea  */
    --lg-footer-secondary: rgba(237, 253, 252, 0.50);          /* levemente más vis. */
}


/* ── R1-2 / R1.3: Topbar — forte-shell-topbar (reemplaza bg-primary) ─────
   Gradiente forte-ink con borde inferior rojo corporativo.
   ── R1.3 HOTFIX: sticky→fixed (topbar inocultable definitivo) ────────────
   `position: sticky` falla en Safari iOS cuando el elemento es hijo directo
   de `body { display: flex; flex-direction: column }` sin height explícita.
   El flex container sin altura fija no crea un scroll container estable
   para sticky (bug documentado en WebKit / Blink).
   Solución robusta: `position: fixed` ancla el topbar al viewport siempre.
   iOS: el elemento retiene la clase `sticky-top` → el @supports de
   lg-shell.css (padding-top: env(safe-area-inset-top)) sigue activo.
   Layout: body:has(.forte-shell-topbar) { padding-top } compensa el espacio. */
.navbar.forte-shell-topbar {
    /* R1.3: fixed — topbar anclado al viewport, imposible de ocultar por scroll */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;   /* Bootstrap fixed-top level; < modal-backdrop 1050 */
    background: linear-gradient(
        135deg,
        var(--forte-ink-deep, #0d0304) 0%,
        var(--forte-ink, #140608)      55%,
        var(--forte-ink-2, #1b0a0b)    100%
    ) !important;
    border-bottom: 1.5px solid rgba(179, 52, 46, 0.45) !important;
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(237, 253, 252, 0.06),
        inset 0 -1px 0 rgba(179, 52, 46, 0.22) !important;
}

/* Hairline luminosa del topbar — compatible con forte (sutilmente cream) */
.navbar.forte-shell-topbar::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(237, 253, 252, 0.10) 30%,
        rgba(237, 253, 252, 0.18) 50%,
        rgba(237, 253, 252, 0.10) 70%,
        transparent 100%);
}


/* ── R1.3: Compensación layout — topbar fixed saca al navbar del flujo ────
   body:has(.forte-shell-topbar) aplica padding-top SOLO cuando el topbar
   está renderizado (usuario autenticado). La página de login (sin topbar)
   NO recibe padding-top, evitando espacio vacío en la pantalla de acceso.
   Safe-area iOS: con viewport-fit=cover el topbar absorbe safe-area-inset-top
   (el @supports de lg-shell.css agranda el topbar con env()). Body debe
   compensar la misma cantidad para que el contenido no quede tapado.
   --forte-shell-topbar-height = altura BASE del topbar sin safe-area (44px). */
body:has(.forte-shell-topbar) {
    padding-top: var(--forte-shell-topbar-height);
}
@supports (padding-top: env(safe-area-inset-top)) {
    body:has(.forte-shell-topbar) {
        padding-top: calc(var(--forte-shell-topbar-height) + env(safe-area-inset-top, 0px));
    }
}

/* ── R1.4: Reconciliación altura .lg-crud-shell con paddings body ────────
   Antes de R-1.4, .lg-crud-shell usaba calc(100dvh - 52px) (constante del
   navbar Bootstrap original). Tras R-1.3 el body acumula:
     padding-top:    --forte-shell-topbar-height (44px)
     padding-bottom: 28px (lg-shell.css)
   Total: 72px → el shell exigía 20px más → desborde → scroll exterior.
   Override scoped a body:has(.forte-shell-topbar): login y páginas sin
   topbar FORTE no se ven afectadas. lg-shell.css NO se modifica.         */
body:has(.forte-shell-topbar) .lg-crud-shell {
    height: calc(
        100dvh
        - var(--forte-shell-topbar-height, 44px)
        - var(--forte-shell-footer-height, 28px)
    );
}
@media (max-width: 768px) {
    body:has(.forte-shell-topbar) .lg-crud-shell {
        height: calc(
            100dvh
            - var(--forte-shell-topbar-height, 44px)
            - var(--forte-shell-footer-height, 28px)
            - env(safe-area-inset-top, 0px)
            - env(safe-area-inset-bottom, 0px)
        );
    }
}


/* ── R1-3: Footer — fondo forte-ink glass ────────────────────────────────
   Reemplaza rgba(30,30,30,0.85) por forte-ink glass con borde rojo.    */
footer {
    background: rgba(20, 6, 8, 0.88) !important;
    border-top: 0.5px solid rgba(179, 52, 46, 0.28) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
}


/* ── R1-4: Focus visible en topbar — override forte-red ──────────────────
   Reemplaza el outline azul --lg-accent por forte-red en el topbar.
   Contraste suficiente sobre fondo forte-ink (WCAG AA).                */
.forte-shell-topbar *:focus-visible {
    outline: 2px solid var(--forte-red, #b3342e) !important;
    outline-offset: 2px;
}


/* ── R1-5: Dark mode adjustments ─────────────────────────────────────────
   En dark mode la topbar se intensifica levemente.                      */
[data-theme="dark"] .navbar.forte-shell-topbar {
    background: linear-gradient(
        135deg,
        #0a0202 0%,
        #110405 55%,
        #180708 100%
    ) !important;
    border-bottom: 1.5px solid rgba(179, 52, 46, 0.55) !important;
}

[data-theme="dark"] footer {
    background: rgba(13, 3, 4, 0.92) !important;
    border-top: 0.5px solid rgba(179, 52, 46, 0.35) !important;
}


/* ── R1-6: Forte theme adjustments ───────────────────────────────────────
   En [data-theme="forte"] borde rojo más pronunciado.                   */
[data-theme="forte"] .navbar.forte-shell-topbar {
    background: linear-gradient(
        135deg,
        #0a0202 0%,
        #140608 60%,
        #1b0a0b 100%
    ) !important;
    border-bottom: 1.5px solid rgba(192, 56, 49, 0.60) !important;
}

[data-theme="forte"] footer {
    background: rgba(10, 2, 2, 0.94) !important;
    border-top: 0.5px solid rgba(192, 56, 49, 0.40) !important;
}


/* ── R1-7: @supports fallback footer ─────────────────────────────────────
   Sin backdrop-filter: fondo sólido forte-ink para legibilidad.         */
@supports not (backdrop-filter: blur(1px)) {
    footer {
        background: rgba(20, 6, 8, 0.98) !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   R1-2: HOTFIX — Eliminar scroll residual shell (zona vacía inferior)
   ══════════════════════════════════════════════════════════════════════════
   CAUSA RAÍZ: triple capa de padding-bottom redundante al final de página
     - main.container-fluid.py-3 → padding-bottom: 1rem  (16 px)
     - .lg-page { padding: 24px 10% }  → padding-bottom: 24 px
     - body { padding-bottom: 28px }   → compensa footer fixed (NECESARIO ✓)
   El footer fixed ya queda compensado por body{padding-bottom:28px}.
   Los 40 px adicionales (main 16px + .lg-page 24px) generan una "zona vacía"
   scrolleable al final de la home y de otros templates que usan .lg-page.

   TARGETS AFECTADOS (únicamente CSS, sin JS ni backend):
     - index.html            → .lg-page con rows de tarjetas del dashboard
     - reparaciones_dashboard.html → .lg-page wrapping .lg-scroll-area
     - seg_mj/seg_mj_listado.html  → .lg-page wrapping tablas

   SIN TOCAR: .lg-crud-shell (CRUD pages), JS, rutas, modelos, base.html.
   REF: DB-4 (Layout Containment), DB-5 (Shell Architecture)              */

/* ── R1-2a: Eliminar padding-bottom redundante de main.container-fluid ── */
main.container-fluid {
    padding-bottom: 0;
}

/* ── R1-2b: Eliminar padding-bottom redundante de .lg-page ──────────────
   .lg-page usa padding:24px 10% en las tres páginas que lo implementan.
   Retirar solo el eje inferior elimina la zona vacía sin afectar al
   espaciado lateral ni al padding-top de los títulos.                    */
.lg-page {
    padding-bottom: 0;
}

/* ── R1-2c: iOS — prefers-reduced-motion safe ───────────────────────────
   Los cambios de R1-2 son de layout (no animación), no requieren bloque
   prefers-reduced-motion. El @media ya heredado en R1-1 sigue activo.   */

/* ── H5 R-3.D.B: Clase de icono toggle forte activo ────────────────────
   Reemplaza inline style en _topbar.html L85 (bi-toggles2 modo forte).  */
.forte-shell-toggle-forte {
    color:         var(--forte-cream,  #f2efeb);
    background:    var(--forte-ink,    #140608);
    border-radius: 3px;
    padding:       1px 3px;
    font-size:     0.8rem;
}