/* ═══════════════════════════════════════════════════════════════
           base.html — Shell Layout + Accessibility Core (DB-4, DB-5)
           IMPORTANTE: NO redefinir tokens canónicos de lg-tokens.css.
           Los tokens globales (palette, shadows, radii, hairlines,
           glass, motion) se definen exclusivamente en lg-tokens.css.
           Este bloque :root solo contiene tokens de shell (footer).
           Ref: DB-2 — lg-tokens.css es el single source of truth.
           ═══════════════════════════════════════════════════════════════ */
        /* :root tokens de footer están en lg-tokens.css (--lg-footer-*) */

        /* ═══════════════════════════════════════════════ */
        /* Global Layout Containment (DB-4, DB-5)         */
        /* Prevent elastic horizontal overscroll on touch  */
        /* ═══════════════════════════════════════════════ */
        html {
            height: 100%;
            /* clip: no crea scroll container → sin jank horizontal (DB-4) */
            overflow-x: clip;
            /* ambos ejes: evita el rebote elástico iOS Safari + PWA */
            overscroll-behavior: none;
        }
        body {
            min-height: 100%;
            display: flex;
            flex-direction: column;
            font-family: var(--lg-font);
            /* safe-area-inset-bottom: cubre barra inicio iOS en PWA */
            padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
            overflow-x: clip;
            overscroll-behavior: none;
            -webkit-overflow-scrolling: touch;
            /* Background images REMOVED — clean LG base (DB-2) */
            background-image: none;
            background-color: var(--lg-bg);
            color: var(--lg-text-primary, #1C1C1E);
        }

        /* Dark mode body */
        [data-theme="dark"] body {
            background-image: none;
            background-color: var(--lg-bg);
            color: var(--lg-text-primary);
        }
        
        main {
            flex: 1;
            min-width: 0; /* prevent flex children from causing overflow */
        }
        
        /* ═══════════════════════════════════════════════════════
           Institutional Navbar — FASE 1 (DB-3.1, DB-5.1)
           Cabecera suprema: gradiente profundo, luminosity,
           border-bottom de acento y sombra estructural.
           ═══════════════════════════════════════════════════════ */
        .navbar {
            flex-shrink: 0;
            padding-top: 0.1rem;
            padding-bottom: 0.1rem;
            /* Separación del contenido */
            box-shadow:
                0 3px 14px rgba(0,0,0,0.30),
                inset 0 1px 0 rgba(237,253,252,0.10),
                inset 0 -1px 0 rgba(20,6,8,0.35) !important;   /* H3 R-3.D.B: ink — era azul rgba(0,60,130) */
            /* Accent border inferior */
            border-bottom: 1.5px solid rgba(20,6,8,0.50) !important;  /* H3 R-3.D.B: ink — era rgba(0,90,180) */
            position: relative;
        }

        /* Luminosity hairline en el borde superior */
        .navbar::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255,255,255,0.28) 30%,
                rgba(255,255,255,0.42) 50%,
                rgba(255,255,255,0.28) 70%,
                transparent 100%);
            pointer-events: none;
            z-index: 1;
        }

        .navbar .container-fluid {
            position: relative;
            min-height: 34px;
            /* overflow: visible — dropdown must NOT be clipped (C) */
        }
        
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            /* Expande con la barra de inicio de iOS en modo PWA */
            height: calc(28px + env(safe-area-inset-bottom, 0px));
            padding-bottom: env(safe-area-inset-bottom, 0px);
            z-index: 1000;
            display: flex;
            align-items: flex-start;
            padding-top: 4px;
            justify-content: center; /* E: centrar contenido del footer */
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            background: rgba(20, 6, 8, 0.85);             /* H4 R-3.D.B: forte-ink — era rgba(30,30,30) */
            border-top: 1px solid rgba(242, 239, 235, 0.10); /* H4 R-3.D.B: cream hairline — era blanco puro */
        }
        .lg-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--lg-footer-gap);
            width: 100%;
            padding-left: 3%;  /* H8 R-3.D.B: movido desde inline style _footer.html */
            padding-right: 3%; /* H8 R-3.D.B: movido desde inline style _footer.html */
        }
        .lg-footer-line {
            font-size: var(--lg-footer-line-size);
            font-weight: 700;
            color: var(--lg-footer-text);
        }
        .lg-footer-brand {
            color: var(--lg-footer-text);
        }
        .lg-footer-script {
            color: var(--lg-footer-accent);
            font-style: italic;
            font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
        }
        .lg-footer-tagline {
            color: var(--lg-footer-muted);
        }
        .lg-footer-secondary {
            color: var(--lg-footer-secondary);
            font-size: var(--lg-footer-secondary-size);
        }
        @media (max-width: 768px) {
            footer.lg-footer,
            footer {
                height: calc(24px + env(safe-area-inset-bottom, 0px));
                min-height: 24px;
                padding: 2px 3%;
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }
            .lg-footer-tagline {
                display: none; /* hide tagline on narrow screens to prevent overflow */
            }
        }

        /* ═══════════════════════════════════════════════ */
        /* Accesibilidad Base — DB-4                      */
        /* ═══════════════════════════════════════════════ */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
        @supports not (backdrop-filter: blur(1px)) {
            .lg-glass, [class*="glass"] {
                background: rgba(242,239,235,0.95) !important; /* H7 R-3.D.B: cream — era blanco puro */
            }
        }
        *:focus-visible {
            outline: 2px solid var(--lg-accent);
            outline-offset: 2px;
        }

        /* ══════════════════════════════════════════════════════════
           LG CRUD SHELL — Contenedor compartido de lg_crud_base.html
           Consolidado en F4.1 (RF2-B). Reemplaza las definiciones
           por módulo que existían provisionalmente en cada lg-*.css.
           Ref: FASE4_EXECUTION_PACKET_OPUS.md §F4.1
           ══════════════════════════════════════════════════════════ */
        /* F-J-01: Restaurar arquitectura Modelo A — shell con altura calculada.
           .lg-scroll-area (flex:1 1 0; overflow-y:auto definida en lg-tokens.css)
           requiere un padre con height definida para no colapsar a ~0px.
           Se elimina el comentario 'SCROLL FIX' de F4.1/RF2-B que dejó min-height:0
           sin la altura estructural necesaria. Afectaba ≥13 CRUDs.
           Excepción documentada: F-I-01 en lg-funciones-soporte.css prevalece
           para fsoportebd (override local Modelo B — flujo body). */
        .lg-crud-shell {
            padding: var(--lg-space-14) 10% 0;
            max-width: none;
            margin: -1rem 0 0 0;
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            /* Modelo A: altura calculada para que .lg-scroll-area tenga flex-parent definido */
            height: calc(100vh - var(--lg-navbar-height, 52px));
            height: calc(100dvh - var(--lg-navbar-height, 52px));
            overflow: hidden;
            min-height: 0;
        }
        @media (max-width: 768px) {
            .lg-crud-shell {
                padding: var(--lg-space-8) var(--lg-space-10) 0;
                height: calc(100vh - var(--lg-navbar-height, 52px) - env(safe-area-inset-top, 0px));
                height: calc(100dvh - var(--lg-navbar-height, 52px) - env(safe-area-inset-top, 0px));
            }
        }

        /* ── F-I-02: iOS safe-area topbar — Dynamic Island / notch compensation ──
           viewport-fit=cover + PWA standalone + black-translucent elimina el
           descuento automático de la barra de estado. .navbar.sticky-top queda
           bajo la Dynamic Island (iPhone 15 Pro ≈ 54px).
           @supports scope: solo aplica en Safari/WebKit que soportan env().
           desktop y Android no afectados (env() = 0px ó fallback 0px). ── */
        @supports (padding-top: env(safe-area-inset-top)) {
            .navbar.sticky-top {
                padding-top: calc(0.1rem + env(safe-area-inset-top, 0px));
            }
            .navbar.sticky-top .container-fluid {
                min-height: calc(34px + env(safe-area-inset-top, 0px));
            }
        }