/* ════════════════════════════════════════════════════════════════
   LG-TOKENS.CSS — Liquid Glass Design System Tokens (Centralized)
   ════════════════════════════════════════════════════════════════
   Fuente de verdad para TODOS los tokens `--lg-*` del sistema.
   Incluido desde base.html — todos los templates lo heredan.
   
   Templates con :root propio SOBREESCRIBEN los tokens que necesiten
   (entity colors, module-specific overrides) sin duplicar el set base.
   
   ref: docs/design/FORTEONE_LiquidGlass_DesignBible_v1.md (DB-2)
   ver: 1.0 — 2026-02-23
   ════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════╗
   ║                   :root TOKENS                              ║
   ╚══════════════════════════════════════════════════════════════╝ */
:root {
    /* ── Palette (ref: DB-2.1) ── */
    --lg-bg: #F2F2F7;
    --lg-bg-secondary: #E5E5EA;
    --lg-bg-tertiary: #D1D1D6;

    --lg-surface: rgba(255,255,255,0.88);
    --lg-surface-elevated: rgba(255,255,255,0.96);
    --lg-surface-solid: #FFFFFF;
    --lg-surface-hover: rgba(0,122,255,0.03);
    --lg-surface-active: rgba(0,122,255,0.06);
    --lg-surface-dark: #1C1C1E;           /* dark mode deep solid surface */
    --lg-surface-dark-raised: #2C2C2E;    /* dark mode raised solid surface */

    --lg-text-primary: #1C1C1E;
    --lg-text-secondary: #3C3C43;
    --lg-text-tertiary: #8E8E93;
    --lg-text-quaternary: #C7C7CC;
    --lg-text-on-accent: #FFFFFF;
    --lg-text-on-accent-muted: rgba(255,255,255,0.7);

    --lg-border: rgba(0,0,0,0.10);
    --lg-border-light: rgba(0,0,0,0.05);
    --lg-border-strong: rgba(0,0,0,0.14);
    --lg-border-on-dark: rgba(255,255,255,0.07); /* hairline sobre fondo oscuro */
    --lg-border-accent: rgba(0,122,255,0.2);

    /* ── Semantic / State Colors (ref: DB-2.1.5) ── */
    --lg-accent: #007AFF;
    --lg-accent-dark: #0055CC;
    --lg-accent-hover: #0062CC;
    --lg-accent-soft: rgba(0,122,255,0.08);
    --lg-success: #34C759;
    --lg-success-soft: rgba(52,199,89,0.08);
    --lg-warning: #FF9500;
    --lg-warning-soft: rgba(255,149,0,0.08);
    --lg-danger: #FF3B30;
    --lg-danger-soft: rgba(255,59,48,0.08);
    --lg-info: #5AC8FA;
    --lg-info-soft: rgba(90,200,250,0.08);

    /* ── Accent bright tints — light-mode values (dark override in [data-theme='dark']) ── */
    /* En light-mode los colores base son suficientemente vibrantes */
    --lg-accent-light:  #007AFF;
    --lg-success-light: #34C759;
    --lg-warning-light: #FF9500;
    --lg-danger-light:  #FF3B30;
    --lg-info-light:    #5AC8FA;

    /* ── Entity default (overridden per template) ── */
    --lg-entity: var(--lg-accent);

    /* ── Typography (ref: DB-2.4) ── */
    --lg-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
    --lg-type-hero: 1.85rem;
    --lg-type-title-xl: 1.45rem;
    --lg-type-title-lg: 1.65rem;
    --lg-type-title-md: 1.1rem;
    --lg-type-title-sm: 1.05rem;
    --lg-type-title-xs: 1.3rem;
    --lg-type-body: 0.9375rem;
    --lg-type-body-sm: 0.875rem;
    --lg-type-body-compact: 0.9rem;
    --lg-type-caption: 0.8125rem;
    --lg-type-label: 0.72rem;
    --lg-type-avatar-xs: 0.68rem;
    --lg-type-overline: 0.7rem;
    --lg-type-micro: 0.7rem;
    --lg-type-tab: 0.78rem;
    --lg-text-shadow: 0 0.5px 1px rgba(0,0,0,0.04);

    /* ── Radii (ref: DB-2.5.2) ── */
    --lg-radius-xs: 6px;
    --lg-radius-sm: 10px;
    --lg-radius-md: 14px;
    --lg-radius-lg: 20px;
    --lg-radius-xl: 26px;
    --lg-radius-pill: 100px;
    --lg-radius-circle: 50%;

    /* ── Shadows (ref: DB-2.5.3) ── */
    --lg-shadow-xs: 0 0 0 0.5px rgba(0,0,0,0.02), 0 0.5px 1px rgba(0,0,0,0.01);
    --lg-shadow-sm: 0 0 0 0.33px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.02);
    --lg-shadow-md: 0 0 0 0.5px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.02);
    --lg-shadow-lg: 0 0 0 0.33px rgba(0,0,0,0.04), 0 8px 40px -8px rgba(0,0,0,0.1), 0 20px 60px -16px rgba(0,0,0,0.06);
    --lg-shadow-xl: 0 0 0 0.5px rgba(0,0,0,0.06), 0 24px 80px -12px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.06);

    /* ── Hairlines (ref: DB-2.5.4) ── */
    --lg-hairline: 0.33px solid var(--lg-border);
    --lg-hairline-light: 0.33px solid var(--lg-border-light);
    --lg-hairline-strong: 0.5px solid var(--lg-border-strong);
    --lg-hairline-accent: 0.5px solid var(--lg-border-accent);

    /* ── Glass Materials (ref: DB-2.3) ── */
    --lg-glass-light: blur(16px) saturate(160%);
    --lg-glass-regular: blur(30px) saturate(180%);
    --lg-glass-thick: blur(50px) saturate(200%);
    --lg-glass-ultra: blur(70px) saturate(220%);
    --lg-glass-toast: blur(30px) saturate(220%);

    /* ── SVG Distortion (ref: DB-3.1) ── */
    --lg-distort-filter: url(#lg-distort);
    --lg-distort-strong: url(#lg-distort-strong);

    /* ── Luminosity System (ref: DB-2.3.1) ── */
    --lg-glow-accent: 0 0 0 1px rgba(0,122,255,0.18), 0 0 28px rgba(0,122,255,0.10);
    --lg-glow-success: 0 0 0 1px rgba(52,199,89,0.18), 0 0 24px rgba(52,199,89,0.08);
    --lg-inner-light: inset 0 1px 0 rgba(255,255,255,0.50), inset 0 -1px 0 rgba(0,0,0,0.03);
    --lg-luminosity-line: linear-gradient(90deg, transparent, rgba(255,255,255,0.70) 50%, transparent);

    /* ── Motion (ref: DB-2.6) ── */
    --lg-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --lg-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --lg-spring-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
    --lg-spring-snappy: cubic-bezier(0.45, 0, 0.15, 1);
    --lg-spring-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --lg-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --lg-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --lg-duration-instant: 0.1s;
    --lg-duration-fast: 0.2s;
    --lg-duration-md: 0.25s;
    --lg-duration-normal: 0.3s;
    --lg-duration: 0.3s;
    --lg-duration-slow: 0.5s;
    --lg-duration-modal: 0.55s;
    --lg-ease-legacy: ease;
    --lg-duration-spin: 0.8s;
    --lg-stagger-step: 50ms;
    --lg-stagger-cap: 380ms;

    /* ── Glass Surface Scale (ref: DB-3.3) ── */
    --lg-glass-surface-05: rgba(255,255,255,0.05);
    --lg-glass-surface-08: rgba(255,255,255,0.08);
    --lg-glass-surface-10: rgba(255,255,255,0.10);
    --lg-glass-surface-12: rgba(255,255,255,0.12);
    --lg-glass-surface-15: rgba(255,255,255,0.15);
    --lg-glass-surface-18: rgba(255,255,255,0.18);
    --lg-glass-surface-22: rgba(255,255,255,0.22);
    --lg-glass-surface-28: rgba(255,255,255,0.28);
    --lg-glass-surface-30: rgba(255,255,255,0.30);
    --lg-glass-surface-35: rgba(255,255,255,0.35);
    --lg-glass-surface-42: rgba(255,255,255,0.42);
    --lg-glass-surface-45: rgba(255,255,255,0.45);
    --lg-glass-surface-55: rgba(255,255,255,0.55);
    --lg-overlay-tint: rgba(8,12,18,0.12);
    --lg-overlay-filter: blur(14px) saturate(120%);
    --lg-modal-surface: rgba(255,255,255,0.82);
    --lg-modal-filter: blur(28px) saturate(150%);
    --lg-modal-form-surface: rgba(255,255,255,0.65);
    --lg-modal-field-surface: rgba(255,255,255,0.58);
    /* Modal header gradient — used by templates with branded gradient header */
    --lg-modal-header-gradient: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%);

    /* ── UI Utility Tokens ── */
    --lg-focus-ring: 0 0 0 4px rgba(0,122,255,0.25), 0 0 0 2px #fff;
    --lg-focus-ring-soft: 0 0 0 3px rgba(0,122,255,0.2);
    --lg-focus-outline: 2px solid var(--lg-accent);
    --lg-focus-outline-offset: 2px;
    --lg-filter-bar-bg: rgba(255,255,255,0.08);
    --lg-btn-specular: linear-gradient(to bottom, rgba(255,255,255,0.22), transparent 50%);
    --lg-selection-bg: rgba(0,122,255,0.2);
    --lg-scrollbar-thumb: rgba(0,0,0,0.12);
    --lg-scrollbar-thumb-hover: rgba(0,0,0,0.18);
    --lg-spinner-track: rgba(255,255,255,0.25);

    /* ── Toast tokens ── */
    --lg-toast-success-bg: rgba(52,199,89,0.82);
    --lg-toast-danger-bg: rgba(255,59,48,0.82);
    --lg-toast-error-bg: var(--lg-toast-danger-bg);
    --lg-toast-info-bg: rgba(90,200,250,0.82);
    --lg-toast-warning-bg: rgba(255,149,0,0.82);

    /* ── Toggle tokens ── */
    --lg-toggle-track-bg: rgba(120,120,128,0.15);
    --lg-toggle-track-radius: 16px;
    --lg-toggle-glow: 0 0 0 4px rgba(0,122,255,0.15);

    /* ── Icon tokens ── */
    --lg-icon-size-md: 1.2rem;
    --lg-icon-size-lg: 1.5rem;

    /* ── Fallback tokens (ref: DB-2.8) ── */
    --lg-fallback-overlay: rgba(0,0,0,0.35);
    --lg-fallback-surface: rgba(255,255,255,0.92);
    --lg-fallback-canvas: rgba(255,255,255,0.25);

    /* ── Noise texture (base64 inline, ref: Progressive Acrylic) ── */
    --lg-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");

    /* ── Z-Index Scale — Stacking layers (ref: DB-2.9) ── */
    /* Jerarquía canónica del módulo nuevos-moldes.                  */
    /* Cualquier cambio aquí se propaga automáticamente a todos los  */
    /* selectores que usen var(--lg-z-*).                            */
    --lg-z-base:           100;  /* Elementos de página: datetime, sticky utils     */
    --lg-z-sticky:         200;  /* Cabeceras pegajosas, tab bars                   */
    --lg-z-dropdown:       400;  /* Dropdowns contextuales pequeños                 */
    --lg-z-modal:         2000;  /* Overlay modal base (.modal)                     */
    --lg-z-modal-form:    2500;  /* Modal de formulario completo (.modal-formulario) */
    --lg-z-modal-enviar:  3000;  /* Confirmación de envío, captura de cámara        */
    --lg-z-modal-inc:     4000;  /* Modal de incidencias (sobre el formulario)       */
    --lg-z-toast:         5000;  /* Toasts, visor PDF, notificaciones               */
    --lg-z-corner:        9000;  /* Botones de esquina (nav/salir)                  */
    --lg-z-camera-full:  10000;  /* Overlay de cámara fullscreen, dropdown personal */
    --lg-z-loading:      99000;  /* Overlay de carga inicial (cubre todo)            */
    --lg-z-confirm:      99000;  /* Diálogos de confirmación (acción requerida)      */

    /* ── Layout & Spacing ── */
    --lg-space-1: 1px;
    --lg-space-2: 2px;
    --lg-space-3: 3px;
    --lg-space-4: 4px;
    --lg-space-5: 5px;
    --lg-space-6: 6px;
    --lg-space-8: 8px;
    --lg-space-10: 10px;
    --lg-space-12: 12px;
    --lg-space-14: 14px;
    --lg-space-16: 16px;
    --lg-space-18: 18px;
    --lg-space-20: 20px;
    --lg-space-22: 22px;
    --lg-space-24: 24px;
    --lg-space-26: 26px;
    --lg-space-27: 27px;
    --lg-space-28: 28px;
    --lg-space-30: 30px;
    --lg-space-31: 31px;
    --lg-space-32: 32px;
    --lg-space-36: 36px;
    --lg-space-38: 38px;
    --lg-space-40: 40px;
    --lg-space-44: 44px;
    --lg-space-48: 48px;
    --lg-space-51: 51px;
    --lg-space-64: 64px;
    --lg-space-72: 72px;
    --lg-space-80: 80px;

    --lg-page-max-width: 1600px;
    --lg-modal-max-width: 1240px;
    --lg-modal-max-width-xl: 1380px;
    --lg-modal-delete-max-width: 480px;
    --lg-modal-body-min-height: 320px;

    --lg-disabled-opacity: 0.5;
    --lg-btn-pad-v: 11px;
    --lg-btn-pad-h: 20px;
    --lg-close-size: 48px;

    /* ── Badge semantic colors ── */
    --lg-badge-success-bg: rgba(52,199,89,0.15);
    --lg-badge-success-text: #1B7A34;
    --lg-badge-danger-bg: rgba(255,59,48,0.15);
    --lg-badge-danger-text: #C5221F;
    --lg-badge-warning-bg: rgba(255,149,0,0.15);
    --lg-badge-warning-text: #8B5E00;
    --lg-badge-info-bg: rgba(90,200,250,0.15);
    --lg-badge-info-text: #0055AA;

    /* ── Extended Semantic ── */
    --lg-warning-hover: #E68600;
    --lg-success-hover: #2DB34D;
    --lg-danger-hover: #E6352B;
    --lg-info-hover: #138496;

    /* ── Action button semantic tokens (ref: DB-3.3 modal header) ── */
    --lg-warning-fg: #7a3e00;                    /* amber text on light glass bg     */
    --lg-warning-border: rgba(255, 149, 0, 0.30); /* amber hairline border             */
    --lg-danger-border: rgba(255, 59, 48, 0.26);  /* danger hairline border            */
    --lg-info-fg: #006B8F;                        /* documental text on light glass bg */
    --lg-info-border: rgba(90, 200, 250, 0.35);   /* info hairline border              */
    --lg-glow-warning: 0 2px 10px rgba(255, 149, 0, 0.32);
    --lg-glow-danger:  0 2px 10px rgba(255, 59, 48, 0.32);
    --lg-glow-info:    0 2px 10px rgba(90, 200, 250, 0.32);

    /* ── Compatibility aliases (ref: DB-2, legacy compat layer) ──────────
       Permite que templates/CSS legacy usen estos nombres sin romper
       mientras se migran progresivamente a los nombres canónicos.
       ─────────────────────────────────────────────────────────────────── */
    --lg-text:             var(--lg-text-primary);     /* alias → --lg-text-primary */
    --lg-info-dark:        var(--lg-info-hover);       /* alias → --lg-info-hover   */
    --lg-glass-bg:         var(--lg-glass-surface-42); /* alias → --lg-glass-surface-42 */
    --lg-glass-blur:       40px;                       /* shorthand para blur glass cards */

    /* ── Footer shell tokens (rendereados solo en base.html footer) ── */
    --lg-footer-text:           rgba(255,255,255,0.92);
    --lg-footer-accent:         rgba(107,163,208,0.95);
    --lg-footer-muted:          rgba(184,212,234,0.85);
    --lg-footer-secondary:      rgba(255,255,255,0.55);
    --lg-footer-gap:            3px;
    --lg-footer-padding-y:      3px;
    --lg-footer-line-size:      0.70rem;
    --lg-footer-secondary-size: 0.62rem;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║              GLOBAL RESETS                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
*, *::before, *::after { box-sizing: border-box; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║              ACCESIBILIDAD (ref: DB-4)                      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* --- Reduced Motion (ref: DB-2.7.4, R-10) --- */
@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;
    }
}

/* --- Pagination — LG global component (ref: DB-3, shared macro) --- */
.pagination .page-link {
    background: var(--lg-glass-surface-42);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    border: var(--lg-hairline);
    color: var(--lg-text-secondary);
    font-family: var(--lg-font);
    font-size: var(--lg-type-body-sm);
    font-weight: 500;
    transition: all var(--lg-duration-fast) var(--lg-spring-smooth);
    box-shadow: none !important;
}
.pagination .page-link:hover {
    background: var(--lg-glass-surface-55);
    color: var(--lg-accent);
    border-color: var(--lg-border-accent);
}
.pagination .page-item.active .page-link {
    background: var(--lg-accent);
    border-color: var(--lg-accent);
    color: var(--lg-text-on-accent);
    font-weight: 600;
    box-shadow: var(--lg-shadow-sm) !important;
}
.pagination .page-item.disabled .page-link {
    background: var(--lg-glass-surface-08);
    color: var(--lg-text-quaternary);
    border-color: var(--lg-border-light);
}
.pagination .page-item:not(.disabled) .page-link:focus {
    box-shadow: var(--lg-focus-ring-soft) !important;
    outline: none;
}

/* --- Fallback Sin Glass (ref: DB-2.8, R-11) --- */
@supports not (backdrop-filter: blur(1px)) {
    .lg-overlay { background: var(--lg-fallback-overlay); }
    .lg-modal,
    .lg-table-wrap,
    .lg-form-grid,
    .lg-hero,
    .lg-card { background: var(--lg-fallback-surface); }
    .lg-btn-outline,
    .lg-search input,
    .lg-filters,
    .lg-tabs-inner,
    .lg-modal-footer { background: rgba(249,249,249,0.95); }
    .lg-glass, [class*="glass"] {
        background: rgba(255,255,255,0.95) !important;
    }
    /* Extended: cover per-template glass classes */
    [class*="lg-profile-card"],
    [class*="lg-eu-card"],
    [class*="lg-eu-header"] {
        background: var(--lg-fallback-surface);
    }
}

/* --- Focus Visible (ref: DB-2.7.1, R-13) --- */
*:focus-visible {
    outline: 2px solid var(--lg-accent);
    outline-offset: 2px;
}
.lg-btn:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: var(--lg-focus-ring);
}
a:focus-visible {
    border-radius: var(--lg-radius-xs);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║              BASE COMPONENT DEFAULTS                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--lg-scrollbar-thumb);
    border-radius: var(--lg-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--lg-scrollbar-thumb-hover);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║     CONSOLIDATED COMPONENT FAMILIES (ref: DB-3, DB-5)       ║
   ║     Consolidación transversal — v1.0 (2026-02-23)           ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─── 1. Form Control Focus (ref: DB-2.7.1) ─────────────────────
   Regla global que unifica los ~15+ overrides inline en templates.
   Los templates con CSS local de mayor especificidad siguen ganando.
   ─────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--lg-accent);
    box-shadow: var(--lg-focus-ring-soft);
    outline: none;
}
.form-check-input:focus {
    border-color: var(--lg-accent);
    box-shadow: var(--lg-focus-ring-soft);
}
.form-check-input:checked {
    background-color: var(--lg-accent);
    border-color: var(--lg-accent);
}

/* ─── 2. LG Button System — Base (ref: DB-5.3) ──────────────────
   Sistema base de botones LG. Templates con versiones más elaboradas
   (shimmer, specular, animaciones) mantienen su CSS local que overridea.
   ─────────────────────────────────────────────────────────────── */
.lg-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--lg-space-8);
    padding: var(--lg-btn-pad-v) var(--lg-btn-pad-h);
    border-radius: var(--lg-radius-pill);
    font-family: var(--lg-font);
    font-size: var(--lg-type-body-sm);
    font-weight: 600;
    line-height: 1;
    border: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    transition:
        background var(--lg-duration-fast) var(--lg-spring-smooth),
        color var(--lg-duration-fast) var(--lg-spring-smooth),
        box-shadow var(--lg-duration-fast) var(--lg-spring-smooth),
        transform var(--lg-duration-fast) var(--lg-spring-smooth);
}
.lg-btn:active { transform: scale(0.95); }
.lg-btn:disabled, .lg-btn[disabled] {
    opacity: var(--lg-disabled-opacity);
    pointer-events: none;
    cursor: default;
}

/* Primary — accent gradient */
.lg-btn-primary {
    background: linear-gradient(135deg, var(--lg-accent) 0%, var(--lg-accent-dark) 100%);
    color: var(--lg-text-on-accent);
    border: 0.5px solid rgba(255,255,255,0.25);
    box-shadow: var(--lg-shadow-sm);
}
.lg-btn-primary:hover {
    box-shadow: var(--lg-shadow-md);
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: var(--lg-text-on-accent);
}

/* Outline — glass surface */
.lg-btn-outline {
    background: var(--lg-glass-surface-18);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    color: var(--lg-text-secondary);
    border: var(--lg-hairline);
    box-shadow: var(--lg-shadow-xs), var(--lg-inner-light);
}
.lg-btn-outline:hover {
    background: var(--lg-glass-surface-28);
    color: var(--lg-text-primary);
    border-color: var(--lg-border-strong);
}

/* Danger */
.lg-btn-danger {
    background: linear-gradient(135deg, var(--lg-danger), var(--lg-danger-hover));
    color: var(--lg-text-on-accent);
    box-shadow: var(--lg-shadow-sm);
}
.lg-btn-danger:hover {
    box-shadow: var(--lg-shadow-md);
    transform: translateY(-1px);
    filter: brightness(1.06);
    color: var(--lg-text-on-accent);
}

/* Success */
.lg-btn-success {
    background: linear-gradient(135deg, var(--lg-success), var(--lg-success-hover));
    color: var(--lg-text-on-accent);
    box-shadow: var(--lg-shadow-sm);
}
.lg-btn-success:hover {
    box-shadow: var(--lg-shadow-md);
    transform: translateY(-1px);
    filter: brightness(1.06);
    color: var(--lg-text-on-accent);
}

/* Warning */
.lg-btn-warning {
    background: linear-gradient(135deg, var(--lg-warning), var(--lg-warning-hover));
    color: var(--lg-text-on-accent);
    box-shadow: var(--lg-shadow-sm);
}
.lg-btn-warning:hover {
    box-shadow: var(--lg-shadow-md);
    transform: translateY(-1px);
    filter: brightness(1.06);
    color: var(--lg-text-on-accent);
}

/* Icon button — compact square/circle */
.lg-btn-icon {
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lg-radius-sm);
    border: var(--lg-hairline);
    background: var(--lg-glass-surface-05);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    color: var(--lg-text-tertiary);
    cursor: pointer;
    transition: all var(--lg-duration-fast) var(--lg-spring-smooth);
    box-shadow: var(--lg-shadow-xs);
}
.lg-btn-icon:hover {
    background: var(--lg-accent-soft);
    color: var(--lg-accent);
    transform: translateY(-1px);
    box-shadow: var(--lg-shadow-sm);
    border-color: var(--lg-border-accent);
}
.lg-btn-icon:active { transform: scale(0.9); }
.lg-btn-icon-danger:hover {
    background: var(--lg-danger-soft);
    color: var(--lg-danger);
    border-color: var(--lg-border);
}

/* Size variant — compact */
.lg-btn-sm {
    padding: var(--lg-space-6) var(--lg-space-14);
    font-size: var(--lg-type-caption);
    gap: var(--lg-space-4);
}

/* Focus visible for LG buttons */
.lg-btn:focus-visible,
.lg-btn-icon:focus-visible {
    outline: none;
    box-shadow: var(--lg-focus-ring);
}

/* ─── 3. Bootstrap Button LG Alignment (ref: DB-2) ──────────────
   Ajustes sutiles para que los botones Bootstrap estándar sean más
   coherentes con el sistema LG sin alterar su identidad Bootstrap.
   ─────────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--lg-font);
    transition: all var(--lg-duration-fast) var(--lg-spring-smooth);
}
.btn-primary { border-color: var(--lg-accent); background-color: var(--lg-accent); }
.btn-primary:hover { background-color: var(--lg-accent-hover); border-color: var(--lg-accent-hover); }
.btn-success { border-color: var(--lg-success); background-color: var(--lg-success); }
.btn-success:hover { background-color: var(--lg-success-hover); border-color: var(--lg-success-hover); }
.btn-danger { border-color: var(--lg-danger); background-color: var(--lg-danger); }
.btn-danger:hover { background-color: var(--lg-danger-hover); border-color: var(--lg-danger-hover); }
.btn-warning { border-color: var(--lg-warning); background-color: var(--lg-warning); color: #fff; }
.btn-warning:hover { background-color: var(--lg-warning-hover); border-color: var(--lg-warning-hover); color: #fff; }
.btn-outline-primary { color: var(--lg-accent); border-color: var(--lg-accent); }
.btn-outline-primary:hover { background-color: var(--lg-accent); border-color: var(--lg-accent); }
.btn-outline-danger { color: var(--lg-danger); border-color: var(--lg-danger); }
.btn-outline-danger:hover { background-color: var(--lg-danger); border-color: var(--lg-danger); }
.btn-outline-secondary { border-color: var(--lg-border-strong); color: var(--lg-text-secondary); }
.btn-outline-secondary:hover { background-color: var(--lg-glass-surface-28); color: var(--lg-text-primary); border-color: var(--lg-border-strong); }
.btn:focus-visible { box-shadow: var(--lg-focus-ring); }

/* ─── 4. Card Header Base (ref: DB-3.4) ──────────────────────────
   Definición global de .lg-card-header — duplicada en 10+ templates.
   ─────────────────────────────────────────────────────────────── */
.lg-card-header {
    display: flex;
    align-items: center;
    gap: var(--lg-space-12);
    margin-bottom: var(--lg-space-14);
}

/* ─── 5. Table LG Enhancement (ref: DB-3) ────────────────────────
   Mejoras sutiles sobre tablas Bootstrap. No agresivos — coexisten.
   Se aplican sobre las clases Bootstrap existentes (aditivo).
   ─────────────────────────────────────────────────────────────── */
.table {
    font-family: var(--lg-font);
    font-size: var(--lg-type-body-sm);
    color: var(--lg-text-primary);
}
.table > thead > tr > th {
    font-size: var(--lg-type-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lg-text-secondary);
    border-bottom-width: 1px;
    border-bottom-color: var(--lg-border-strong);
    padding: var(--lg-space-10) var(--lg-space-12);
    white-space: nowrap;
}
.table > tbody > tr {
    transition: background-color var(--lg-duration-fast) var(--lg-spring-smooth);
}
.table-hover > tbody > tr:hover {
    background-color: var(--lg-surface-hover);
}
.table > tbody > tr > td {
    padding: var(--lg-space-10) var(--lg-space-12);
    vertical-align: middle;
    border-color: var(--lg-border-light);
}
.table-responsive {
    border-radius: var(--lg-radius-sm);
    border: var(--lg-hairline);
}

/* ─── 6. Bootstrap Badge LG Override (ref: DB-2.1.5) ─────────── */
.badge {
    font-family: var(--lg-font);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge.bg-success {
    background: var(--lg-badge-success-bg) !important;
    color: var(--lg-badge-success-text) !important;
}
.badge.bg-danger {
    background: var(--lg-badge-danger-bg) !important;
    color: var(--lg-badge-danger-text) !important;
}
.badge.bg-warning {
    background: var(--lg-badge-warning-bg) !important;
    color: var(--lg-badge-warning-text) !important;
}
.badge.bg-info {
    background: var(--lg-badge-info-bg) !important;
    color: var(--lg-badge-info-text) !important;
}

/* ─── 7. Alert LG Alignment (ref: DB-3) ──────────────────────────
   Mejoras sutiles sobre los alerts Bootstrap para mejor coherencia.
   No destruye variantes existentes. Los LG-alert custom locales
   seguirán ganando por especificidad.
   ─────────────────────────────────────────────────────────────── */
.alert {
    font-family: var(--lg-font);
    font-size: var(--lg-type-body-sm);
    border-radius: var(--lg-radius-md);
    border-width: 0.5px;
}

/* ─── 8. Modal Glass System (ref: DB-3.3) ────────────────────────
   Override global de modales Bootstrap para coherencia glass LG.
   Templates FULL con .lg-modal propio no se afectan (mayor especificidad).
   MAX 2 capas glass visibles con overlay (ref: DB-3.4).
   ─────────────────────────────────────────────────────────────── */
.modal-content {
    background: var(--lg-glass-surface-42);
    -webkit-backdrop-filter: var(--lg-glass-regular);
    backdrop-filter: var(--lg-glass-regular);
    border: var(--lg-hairline);
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-xl);
}
.modal-header {
    border-bottom: var(--lg-hairline);
    padding: var(--lg-space-20) var(--lg-space-24);
}
.modal-header .modal-title {
    font-family: var(--lg-font);
    font-size: var(--lg-type-title-md);
    font-weight: 700;
    color: var(--lg-text-primary);
}
.modal-body {
    padding: var(--lg-space-24);
    font-family: var(--lg-font);
    font-size: var(--lg-type-body);
    color: var(--lg-text-secondary);
}
.modal-footer {
    border-top: var(--lg-hairline);
    padding: var(--lg-space-16) var(--lg-space-24);
    background: var(--lg-glass-surface-10);
}
.btn-close:focus {
    box-shadow: var(--lg-focus-ring-soft);
}

/* ─── 9. Card Subtle Enhancement (ref: DB-3.4) ──────────────────
   Mejoras sutiles sobre Bootstrap .card para coherencia LG.
   Templates FULL con .lg-card propio no se afectan.
   Coexiste con variantes existentes (border-primary etc.).
   ─────────────────────────────────────────────────────────────── */
.card {
    font-family: var(--lg-font);
    border: var(--lg-hairline);
    border-radius: var(--lg-radius-md);
    box-shadow: var(--lg-shadow-sm);
    transition: box-shadow var(--lg-duration-fast) var(--lg-spring-smooth);
}
.card-header {
    font-family: var(--lg-font);
    font-weight: 600;
    border-bottom: var(--lg-hairline);
}
.card-body {
    font-family: var(--lg-font);
}
.card-title {
    font-family: var(--lg-font);
    font-weight: 700;
    /* color: NO DEFINIDO — hereda del contexto (DB-2 regla anti-regresión)
       Contextos con .text-white correcto: el título los hereda.
       Contextos con gradient header: ver reglas explícitas abajo. */
}
.card-footer {
    border-top: var(--lg-hairline);
    background: var(--lg-glass-surface-05);
}
/* Card header gradient overrides for Bootstrap bg-* classes */
/* NOTA: también fuerza color de texto para garantizar contraste (ref: WCAG AA) */
.card-header.bg-primary {
    background: linear-gradient(135deg, var(--lg-accent), var(--lg-accent-dark)) !important;
    color: var(--lg-text-on-accent) !important;
}
.card-header.bg-success {
    background: linear-gradient(135deg, var(--lg-success), var(--lg-success-hover)) !important;
    color: var(--lg-text-on-accent) !important;
}
.card-header.bg-warning {
    background: linear-gradient(135deg, var(--lg-warning), var(--lg-warning-hover)) !important;
    color: var(--lg-text-primary) !important;  /* dark text on warm bg — WCAG AA */
}
.card-header.bg-info {
    background: linear-gradient(135deg, var(--lg-info), var(--lg-info-hover)) !important;
    color: var(--lg-text-on-accent) !important;
}
.card-header.bg-danger {
    background: linear-gradient(135deg, var(--lg-danger), var(--lg-danger-hover)) !important;
    color: var(--lg-text-on-accent) !important;
}

/* ─── 10. Form Element Enhancement (ref: DB-2.7) ────────────────
   Alineación tipográfica/visual de controles de formulario con LG.
   El focus ya está cubierto por la familia #1 (Form Control Focus).
   ─────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    font-family: var(--lg-font);
    font-size: var(--lg-type-body-sm);
    border-radius: var(--lg-radius-sm);
    border: var(--lg-hairline-strong);
    transition: border-color var(--lg-duration-fast) var(--lg-spring-smooth),
                box-shadow var(--lg-duration-fast) var(--lg-spring-smooth);
}
.form-label {
    font-family: var(--lg-font);
    font-weight: 600;
    font-size: var(--lg-type-body-sm);
    color: var(--lg-text-secondary);
    margin-bottom: var(--lg-space-4);
}
.form-text {
    font-family: var(--lg-font);
    font-size: var(--lg-type-caption);
    color: var(--lg-text-tertiary);
}

/* ─── 11. Dropdown Glass (ref: DB-3.3) ───────────────────────────
   Dropdown menus con glass sutil. Coexiste con dropdowns existentes.
   ─────────────────────────────────────────────────────────────── */
.dropdown-menu {
    font-family: var(--lg-font);
    border: var(--lg-hairline);
    border-radius: var(--lg-radius-md);
    box-shadow: var(--lg-shadow-lg);
    background: var(--lg-glass-surface-55);
    -webkit-backdrop-filter: var(--lg-glass-regular);
    backdrop-filter: var(--lg-glass-regular);
    padding: var(--lg-space-4) 0;
}
.dropdown-item {
    font-size: var(--lg-type-body-sm);
    padding: var(--lg-space-8) var(--lg-space-16);
    transition: background-color var(--lg-duration-fast) var(--lg-spring-smooth);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--lg-surface-hover);
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--lg-accent);
    color: var(--lg-text-on-accent);
}

/* ─── 12. Progress Bar LG (ref: DB-2.1.5) ────────────────────── */
.progress {
    border-radius: var(--lg-radius-pill);
    background-color: var(--lg-bg-secondary);
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(135deg, var(--lg-accent) 0%, var(--lg-accent-dark) 100%);
    transition: width var(--lg-duration-normal) var(--lg-spring-smooth);
}
.progress-bar.bg-success { background: linear-gradient(135deg, var(--lg-success), var(--lg-success-hover)); }
.progress-bar.bg-warning { background: linear-gradient(135deg, var(--lg-warning), var(--lg-warning-hover)); }
.progress-bar.bg-danger { background: linear-gradient(135deg, var(--lg-danger), var(--lg-danger-hover)); }

/* ─── 13. Breadcrumb LG (ref: DB-2.4) ────────────────────────── */
.breadcrumb {
    font-family: var(--lg-font);
    font-size: var(--lg-type-caption);
}
.breadcrumb-item a {
    color: var(--lg-accent);
    text-decoration: none;
}
.breadcrumb-item a:hover {
    color: var(--lg-accent-hover);
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: var(--lg-text-tertiary);
}

/* ─── 14. List Group LG (ref: DB-3.4) ────────────────────────── */
.list-group-item {
    font-family: var(--lg-font);
    font-size: var(--lg-type-body-sm);
    border-color: var(--lg-border-light);
    transition: background-color var(--lg-duration-fast) var(--lg-spring-smooth);
}
.list-group-item:hover {
    background-color: var(--lg-surface-hover);
}
.list-group-item.active {
    background-color: var(--lg-accent);
    border-color: var(--lg-accent);
}

/* ─── 15. Empty State Pattern ─────────────────────────────────── */
.lg-empty-state {
    text-align: center;
    padding: var(--lg-space-48) var(--lg-space-24);
    color: var(--lg-text-tertiary);
}
.lg-empty-state i,
.lg-empty-state .bi {
    font-size: 3rem;
    opacity: 0.4;
    margin-bottom: var(--lg-space-16);
    display: block;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║     A11Y EXTENSIONS — All Consolidated Components           ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─── Reduced Motion (extended for all families) ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .lg-btn,
    .lg-btn-icon,
    .table > tbody > tr,
    .card,
    .dropdown-menu,
    .dropdown-item,
    .list-group-item,
    .form-control,
    .form-select,
    .progress-bar {
        transition: none !important;
        transform: none !important;
    }
}

/* ─── @supports fallback (extended for all families) ──────────── */
@supports not (backdrop-filter: blur(1px)) {
    .lg-btn-outline {
        background: rgba(249,249,249,0.92);
    }
    .lg-btn-icon {
        background: rgba(249,249,249,0.90);
    }
    .modal-content {
        background: var(--lg-fallback-surface);
    }
    .modal-footer {
        background: rgba(245,245,245,0.95);
    }
    .dropdown-menu {
        background: rgba(255,255,255,0.98);
    }
    [class*="lg-et-card"],
    [class*="lg-nt-card"],
    [class*="lg-est-card"] {
        background: var(--lg-fallback-surface);
    }
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES — [data-theme="dark"]
   Derivado del sistema --ap-* de admin_productivity/panel.html
   Activación: el.setAttribute('data-theme', 'dark')
   Sin activación actual → riesgo cero para templates existentes
   Ref: docs/design/LG_DARK_MODE_ARCH_DECISION.md (DB-2, DB-3)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* ── color-scheme — corrige controles nativos de formulario en dark ── */
    color-scheme: dark;

    /* ── Backgrounds ── */
    --lg-bg:              #0c1221;
    --lg-bg-secondary:    #0f172a;
    --lg-bg-tertiary:     #0c1832;

    /* ── Surfaces ── */
    --lg-surface:           rgba(255,255,255,0.06);
    --lg-surface-elevated:  rgba(255,255,255,0.10);
    --lg-surface-solid:     #1e293b;
    --lg-surface-hover:     rgba(255,255,255,0.10);
    --lg-surface-active:    rgba(255,255,255,0.14);

    /* ── Text tiers — white-alpha (WCAG AA / AAA on dark bg) ── */
    --lg-text-primary:    rgba(255,255,255,0.92);
    --lg-text-secondary:  rgba(255,255,255,0.62);
    --lg-text-tertiary:   rgba(255,255,255,0.38);
    --lg-text-quaternary: rgba(255,255,255,0.22);
    /* --lg-text-on-accent unchanged: #FFFFFF works on both themes */
    --lg-text-on-accent-muted: rgba(255,255,255,0.65);

    /* ── Borders — white-alpha hairlines ── */
    --lg-border:          rgba(255,255,255,0.09);
    --lg-border-light:    rgba(255,255,255,0.05);
    --lg-border-strong:   rgba(255,255,255,0.15);
    --lg-border-accent:   rgba(0,122,255,0.28);

    /* ── Shadows — amplificados para fondos oscuros ── */
    --lg-shadow-xs: 0 0 0 0.5px rgba(0,0,0,0.08), 0 0.5px 1px rgba(0,0,0,0.06);
    --lg-shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.18);
    --lg-shadow-md: 0 2px 8px rgba(0,0,0,0.30), 0 8px 28px rgba(0,0,0,0.22);
    --lg-shadow-lg: 0 4px 16px rgba(0,0,0,0.40), 0 16px 48px rgba(0,0,0,0.30);
    --lg-shadow-xl: 0 8px 32px rgba(0,0,0,0.50), 0 24px 80px rgba(0,0,0,0.35);

    /* ── Glass surfaces — white-alpha funciona sobre bg oscuro ── */
    --lg-glass-surface-05:  rgba(255,255,255,0.05);
    --lg-glass-surface-08:  rgba(255,255,255,0.08);
    --lg-glass-surface-10:  rgba(255,255,255,0.10);
    --lg-glass-surface-12:  rgba(255,255,255,0.12);

    /* ── Semantic colors — bases se mantienen vibrantes ── */
    /* --lg-accent/success/warning/danger no cambian (colores puros) */
    --lg-accent-dark:    #3b82f6;
    --lg-accent-hover:   #3b82f6;

    /* ── Semantic soft variants — mayor opacidad en dark ── */
    --lg-accent-soft:    rgba(0,122,255,0.18);
    --lg-success-soft:   rgba(52,199,89,0.18);
    --lg-warning-soft:   rgba(255,149,0,0.18);
    --lg-danger-soft:    rgba(255,59,48,0.18);
    --lg-info-soft:      rgba(90,200,250,0.18);

    /* ── Accent bright tints — legibilidad dark-mode ── */
    --lg-accent-light:   #60a5fa;
    --lg-success-light:  #86efac;
    --lg-warning-light:  #fcd34d;
    --lg-danger-light:   #fca5a5;
    --lg-info-light:     #7dd3fc;

    /* ── UI Utility overrides ── */
    --lg-focus-ring:          0 0 0 4px rgba(59,130,246,0.35), 0 0 0 2px rgba(15,23,42,0.80);
    --lg-focus-ring-soft:     0 0 0 3px rgba(59,130,246,0.25);
    --lg-selection-bg:        rgba(59,130,246,0.30);
    --lg-scrollbar-thumb:     rgba(255,255,255,0.12);
    --lg-scrollbar-thumb-hover: rgba(255,255,255,0.20);
    --lg-filter-bar-bg:       rgba(255,255,255,0.05);

    /* ── Luminosity — invertido para dark ── */
    --lg-glow-accent:    0 0 0 1px rgba(59,130,246,0.25), 0 0 28px rgba(59,130,246,0.12);
    --lg-glow-success:   0 0 0 1px rgba(52,199,89,0.25), 0 0 24px rgba(52,199,89,0.10);
    --lg-inner-light:    inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.15);

    /* ── Action button semantic tokens — dark overrides ── */
    --lg-warning-fg: var(--lg-warning-light);      /* #fcd34d — readable on dark gradient */
    --lg-warning-border: rgba(255, 149, 0, 0.45);
    --lg-danger-border: rgba(255, 59, 48, 0.42);
    --lg-info-fg: var(--lg-info-light);            /* #7dd3fc — readable on dark gradient */
    --lg-info-border: rgba(90, 200, 250, 0.42);
    --lg-info-dark: #1a9dc4;
    --lg-glow-warning: 0 2px 10px rgba(255, 149, 0, 0.40);
    --lg-glow-danger:  0 2px 10px rgba(255, 59, 48, 0.40);
    --lg-glow-info:    0 2px 10px rgba(90, 200, 250, 0.40);

    /* ── Overlay & Modal dark ── */
    --lg-overlay-tint:        rgba(0,0,0,0.50);
    --lg-modal-surface:       rgba(15,23,42,0.92);
    --lg-modal-form-surface:  rgba(255,255,255,0.06);
    --lg-modal-field-surface: rgba(255,255,255,0.08);

    /* ── Toast dark — opacidad ajustada ── */
    --lg-toast-success-bg: rgba(52,199,89,0.88);
    --lg-toast-danger-bg:  rgba(255,59,48,0.88);
    --lg-toast-error-bg:   rgba(255,59,48,0.88);
    --lg-toast-info-bg:    rgba(90,200,250,0.88);
    --lg-toast-warning-bg: rgba(255,149,0,0.88);

    /* ── Toggle dark ── */
    --lg-toggle-track-bg:  rgba(255,255,255,0.10);

    /* ── Fallback tokens — dark variants ── */
    --lg-fallback-overlay:  rgba(0,0,0,0.55);
    --lg-fallback-surface:  rgba(30,41,59,0.92);
    --lg-fallback-canvas:   rgba(15,23,42,0.40);

    /* ── Badge semantic — dark legibility ── */
    --lg-badge-success-bg:   rgba(52,199,89,0.22);
    --lg-badge-success-text: #86efac;
    --lg-badge-danger-bg:    rgba(255,59,48,0.22);
    --lg-badge-danger-text:  #fca5a5;
    --lg-badge-warning-bg:   rgba(255,149,0,0.22);
    --lg-badge-warning-text: #fcd34d;
    --lg-badge-info-bg:      rgba(90,200,250,0.22);
    --lg-badge-info-text:    #7dd3fc;

    /* ── Noise — disabled on dark ── */
    --lg-noise: none;

    /* ── Text shadow — disabled on dark ── */
    --lg-text-shadow: none;

    /* ── Spinner track — dark ── */
    --lg-spinner-track: rgba(255,255,255,0.15);

    /* ── Progress bar BG — dark ── */
    --lg-bg-secondary: #0f172a;
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — Component Overrides
   Applied ON TOP of the token overrides above.
   These rules target actual components that need dark-mode fixes
   beyond what token swapping covers (e.g. Bootstrap hardcodes).
   ═══════════════════════════════════════════════════════════════ */

/* ── Body & Page-level ────────────────────────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] {
    background-color: var(--lg-bg);
    color: var(--lg-text-primary);
}

/* ── Tables ────────────────────────────────────────────────────── */
[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--lg-text-primary);
    --bs-table-border-color: var(--lg-border);
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-hover-bg: rgba(255,255,255,0.06);
    background-color: transparent;
    color: var(--lg-text-primary);
}
[data-theme="dark"] .table > thead > tr > th {
    color: var(--lg-text-secondary);
    border-bottom-color: var(--lg-border-strong);
    background-color: transparent;
}
[data-theme="dark"] .table > tbody > tr > td {
    border-color: var(--lg-border);
    color: var(--lg-text-primary);
}
[data-theme="dark"] .table-responsive {
    border-color: var(--lg-border);
}

/* ── Cards ─────────────────────────────────────────────────────── */
[data-theme="dark"] .card {
    background-color: var(--lg-surface-solid) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-primary);
}
[data-theme="dark"] .card-header {
    background-color: rgba(255,255,255,0.04) !important;
    border-bottom-color: var(--lg-border) !important;
    color: var(--lg-text-primary);
}
[data-theme="dark"] .card-body {
    background-color: var(--lg-surface-solid) !important;
    color: var(--lg-text-primary);
}
[data-theme="dark"] .card-footer {
    background-color: rgba(255,255,255,0.03) !important;
    border-top-color: var(--lg-border) !important;
}

/* ── Forms (inputs, selects, textareas) ────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--lg-modal-field-surface) !important;
    border-color: var(--lg-border-strong) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--lg-text-tertiary);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: rgba(255,255,255,0.10) !important;
    border-color: var(--lg-accent) !important;
    color: var(--lg-text-primary) !important;
    box-shadow: var(--lg-focus-ring-soft) !important;
}
[data-theme="dark"] .form-label {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .form-text {
    color: var(--lg-text-tertiary);
}
[data-theme="dark"] .form-check-label {
    color: var(--lg-text-primary);
}
[data-theme="dark"] .input-group-text {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border-strong) !important;
    color: var(--lg-text-secondary);
}

/* ── Modals ─────────────────────────────────────────────────────── */
[data-theme="dark"] .modal-content {
    background: var(--lg-modal-surface) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-primary);
}
[data-theme="dark"] .modal-header {
    background-color: var(--lg-surface-solid) !important;
    border-bottom-color: var(--lg-border) !important;
    color: var(--lg-text-primary);
}
[data-theme="dark"] .modal-header .modal-title {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .modal-body {
    background-color: var(--lg-surface-solid) !important;
    color: var(--lg-text-primary);
}
[data-theme="dark"] .modal-footer {
    border-top-color: var(--lg-border) !important;
    background: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .modal-backdrop {
    --bs-backdrop-opacity: 0.65;
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Dropdowns ─────────────────────────────────────────────────── */
[data-theme="dark"] .dropdown-menu {
    background: var(--lg-surface-solid);
    border-color: var(--lg-border);
    color: var(--lg-text-primary);
}
[data-theme="dark"] .dropdown-item {
    color: var(--lg-text-primary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--lg-surface-hover);
    color: var(--lg-text-primary);
}
[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
    background-color: var(--lg-accent);
    color: var(--lg-text-on-accent);
}
[data-theme="dark"] .dropdown-header {
    color: var(--lg-text-tertiary);
}
[data-theme="dark"] .dropdown-divider {
    border-color: var(--lg-border);
}

/* ── Alerts (¡!important para vencer inline style="") ──────────── */
[data-theme="dark"] .alert-success {
    background-color: rgba(52,199,89,0.15) !important;
    border-color: rgba(52,199,89,0.25) !important;
    color: #86efac !important;
}
[data-theme="dark"] .alert-danger {
    background-color: rgba(255,59,48,0.15) !important;
    border-color: rgba(255,59,48,0.25) !important;
    color: #fca5a5 !important;
}
[data-theme="dark"] .alert-warning {
    background-color: rgba(255,149,0,0.15) !important;
    border-color: rgba(255,149,0,0.25) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] .alert-info {
    background-color: rgba(90,200,250,0.15) !important;
    border-color: rgba(90,200,250,0.25) !important;
    color: #7dd3fc !important;
}
[data-theme="dark"] .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── List group ────────────────────────────────────────────────── */
[data-theme="dark"] .list-group-item {
    background-color: var(--lg-surface-solid);
    border-color: var(--lg-border);
    color: var(--lg-text-primary);
}
[data-theme="dark"] .list-group-item:hover {
    background-color: var(--lg-surface-hover);
}

/* ── Progress bars ─────────────────────────────────────────────── */
[data-theme="dark"] .progress {
    background-color: rgba(255,255,255,0.08);
}

/* ── Bootstrap text/bg utility fixes ───────────────────────────── */
[data-theme="dark"] .bg-light {
    background-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .bg-white {
    background-color: var(--lg-surface-solid) !important;
}
[data-theme="dark"] .text-dark {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .text-muted {
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] .text-body {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .border {
    border-color: var(--lg-border) !important;
}

/* ── Breadcrumb dark ───────────────────────────────────────────── */
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--lg-text-tertiary);
}
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--lg-text-quaternary);
}

/* ── Scrollbar dark ────────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.20);
}

/* ── Nav tabs dark ─────────────────────────────────────────────── */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--lg-border);
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--lg-text-secondary);
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--lg-border);
    color: var(--lg-text-primary);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--lg-surface-solid);
    border-color: var(--lg-border) var(--lg-border) var(--lg-surface-solid);
    color: var(--lg-text-primary);
}

/* ── Toastr dark fix ───────────────────────────────────────────── */
[data-theme="dark"] .toast-message {
    color: rgba(255,255,255,0.95);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE HARDENING — Remate Final
   Cubre: btn-light/secondary, disabled/readonly inputs, nav-pills,
   readonly fields, semantic tinted badges, common CRUD classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Buttons — light/secondary Bootstrap variants ──────────────── */
[data-theme="dark"] .btn-light {
    background-color: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-light:focus {
    background-color: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .btn-secondary {
    background-color: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus {
    background-color: rgba(255,255,255,0.18) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .btn-outline-light {
    color: var(--lg-text-secondary) !important;
    border-color: var(--lg-border-strong) !important;
}
[data-theme="dark"] .btn-outline-light:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: var(--lg-text-primary) !important;
}

/* ── Badges/bg — Bootstrap .bg-secondary ───────────────────────── */
[data-theme="dark"] .bg-secondary {
    background-color: rgba(255,255,255,0.14) !important;
}
[data-theme="dark"] .badge.bg-secondary {
    color: var(--lg-text-primary) !important;
}

/* ── Disabled / readonly form controls ─────────────────────────── */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select[readonly] {
    background-color: rgba(255,255,255,0.04) !important;
    color: var(--lg-text-tertiary) !important;
    border-color: var(--lg-border-light) !important;
}
/* .readonly-field — clase custom en nuevos_moldes/dashboard */
[data-theme="dark"] .readonly-field {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-tertiary) !important;
}

/* ── Nav-pills dark ─────────────────────────────────────────────── */
[data-theme="dark"] .nav-pills .nav-link {
    color: var(--lg-text-secondary);
}
[data-theme="dark"] .nav-pills .nav-link:hover:not(.active) {
    background-color: rgba(255,255,255,0.06);
    color: var(--lg-text-primary);
}
[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--lg-accent);
    color: var(--lg-text-on-accent);
}

/* ── Semantic tinted status/badge classes (CRUD templates) ─────── */
/* Especificidad 0,2,0 vence reglas 0,1,0 definidas en <style> inline */
[data-theme="dark"] .estado-validado,
[data-theme="dark"] .activo-badge {
    background-color: rgba(52,199,89,0.18) !important;
    color: var(--lg-success-light) !important;
    border-color: rgba(52,199,89,0.25) !important;
}
[data-theme="dark"] .estado-prueba {
    background-color: rgba(255,149,0,0.18) !important;
    color: var(--lg-warning-light) !important;
    border-color: rgba(255,149,0,0.25) !important;
}
[data-theme="dark"] .estado-rechazado,
[data-theme="dark"] .inactivo-badge {
    background-color: rgba(255,59,48,0.18) !important;
    color: var(--lg-danger-light) !important;
    border-color: rgba(255,59,48,0.25) !important;
}
[data-theme="dark"] .presion-badge,
[data-theme="dark"] .tiempo-badge {
    background-color: rgba(90,200,250,0.18) !important;
    color: var(--lg-info-light) !important;
}
[data-theme="dark"] .temp-badge {
    background-color: rgba(255,149,0,0.18) !important;
    color: var(--lg-warning-light) !important;
}

/* ── Common CRUD structural components ──────────────────────────── */
[data-theme="dark"] .search-container,
[data-theme="dark"] .pagination-controls {
    background-color: rgba(255,255,255,0.04) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-primary);
}
/* .funcion-item — toggles interactivos en funciones_soporte_crud */
[data-theme="dark"] .funcion-item {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .funcion-item:hover {
    background-color: rgba(255,255,255,0.10) !important;
}
/* Especificidad 0,3,0 — vence template's .funcion-item[data-activa] 0,2,0 */
[data-theme="dark"] .funcion-item[data-activa="0"] {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] .funcion-item[data-activa="1"] {
    background-color: rgba(0,140,215,0.12) !important;
    border-color: rgba(0,140,215,0.40) !important;
}
/* .estado-texto — texto ACTIVA/INACTIVA en funcion-items */
[data-theme="dark"] .estado-texto {
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] .btn-gradient {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .btn-gradient:hover {
    background-color: rgba(255,255,255,0.14) !important;
    color: var(--lg-text-primary) !important;
}

/* ── Template grouped field panels (temperatura/presion/tiempo) ── */
[data-theme="dark"] .temperatura-group,
[data-theme="dark"] .presion-group,
[data-theme="dark"] .tiempo-group,
[data-theme="dark"] .parametro-card {
    background-color: rgba(255,255,255,0.04) !important;
    border-left-color: var(--lg-accent) !important;
}

/* ── Export modal field panels ─────────────────────────────────── */
.export-field-panel {
    border-color: #E3F2FD !important;
    background-color: #FAFAFA;
}
.export-field-panel-pdf {
    border-color: #FFE0E0 !important;
    background-color: #FFF8F8;
}
[data-theme="dark"] .export-field-panel {
    border-color: var(--lg-border) !important;
    background-color: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .export-field-panel-pdf {
    border-color: rgba(255,59,48,0.20) !important;
    background-color: rgba(255,59,48,0.06) !important;
}
/* ── Export modal — label accent (section headers con color de marca) ─ */
[data-theme="dark"] .export-label-accent {
    color: var(--lg-accent-light) !important;
}
/* ── Export modal — inputs/selects dentro de paneles ──────────────── */
[data-theme="dark"] .export-field-panel input,
[data-theme="dark"] .export-field-panel select,
[data-theme="dark"] .export-field-panel-pdf input,
[data-theme="dark"] .export-field-panel-pdf select {
    border-color: var(--lg-border) !important;
}

/* ── Row hover — transversal CRUD templates ────────────────────── */
[data-theme="dark"] tbody tr:hover,
[data-theme="dark"] table tbody tr:hover {
    background: rgba(255,255,255,0.06) !important;
    border-left-color: var(--lg-accent) !important;
    box-shadow: inset 0 -2px 0 0 rgba(0,140,215,0.10), 0 2px 4px rgba(0,0,0,0.15) !important;
}
[data-theme="dark"] tbody tr:hover td,
[data-theme="dark"] table tbody tr:hover td {
    background: inherit !important;
}

/* ── Search / action bar components ────────────────────────────── */
[data-theme="dark"] .search-btn-integrated {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .search-btn-integrated:hover {
    background-color: rgba(255,255,255,0.10) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .action-btn-reset {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .action-btn-reset:hover {
    background-color: rgba(255,255,255,0.10) !important;
    color: var(--lg-text-primary) !important;
}

/* ── Pagination — dark ─────────────────────────────────────────── */
[data-theme="dark"] .pagination .page-link {
    background-color: rgba(255,255,255,0.06);
    border-color: var(--lg-border);
    color: var(--lg-text-secondary);
}
[data-theme="dark"] .pagination .page-link:hover {
    background-color: rgba(255,255,255,0.10);
    border-color: var(--lg-border-strong);
    color: var(--lg-text-primary);
}
[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: rgba(0,140,215,0.18);
    border-color: rgba(0,140,215,0.30);
    color: var(--lg-accent);
}
[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--lg-text-quaternary) !important;
    border-color: var(--lg-border-light) !important;
}

/* ── Task widget — dark overrides ──────────────────────────────── */
[data-theme="dark"] .task-item {
    background-color: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .task-item:hover {
    background-color: rgba(255,255,255,0.08) !important;
}

/* ── @supports fallback — dark glass ──────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
    [data-theme="dark"] .modal-content {
        background: rgba(30,41,59,0.96);
    }
    [data-theme="dark"] .dropdown-menu {
        background: rgba(30,41,59,0.98);
    }
    [data-theme="dark"] .lg-glass, [data-theme="dark"] [class*="glass"] {
        background: rgba(30,41,59,0.95) !important;
    }
}

/* ── Auto dark via prefers-color-scheme (fallback si no hay data-theme) ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --lg-bg:              #0c1221;
        --lg-bg-secondary:    #0f172a;
        --lg-bg-tertiary:     #0c1832;
        --lg-surface:         rgba(255,255,255,0.06);
        --lg-surface-elevated: rgba(255,255,255,0.10);
        --lg-surface-solid:   #1e293b;
        --lg-surface-hover:   rgba(255,255,255,0.10);
        --lg-surface-active:  rgba(255,255,255,0.14);
        --lg-text-primary:    rgba(255,255,255,0.92);
        --lg-text-secondary:  rgba(255,255,255,0.62);
        --lg-text-tertiary:   rgba(255,255,255,0.38);
        --lg-text-quaternary: rgba(255,255,255,0.22);
        --lg-border:          rgba(255,255,255,0.09);
        --lg-border-light:    rgba(255,255,255,0.05);
        --lg-border-strong:   rgba(255,255,255,0.15);
        --lg-border-accent:   rgba(0,122,255,0.28);
        --lg-shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.18);
        --lg-shadow-md: 0 2px 8px rgba(0,0,0,0.30), 0 8px 28px rgba(0,0,0,0.22);
        --lg-shadow-lg: 0 4px 16px rgba(0,0,0,0.40), 0 16px 48px rgba(0,0,0,0.30);
        --lg-accent-soft:     rgba(0,122,255,0.18);
        --lg-success-soft:    rgba(52,199,89,0.18);
        --lg-warning-soft:    rgba(255,149,0,0.18);
        --lg-danger-soft:     rgba(255,59,48,0.18);
        --lg-info-soft:       rgba(90,200,250,0.18);
        --lg-accent-light:    #60a5fa;
        --lg-success-light:   #86efac;
        --lg-warning-light:   #fcd34d;
        --lg-danger-light:    #fca5a5;
        --lg-info-light:      #7dd3fc;
        --lg-overlay-tint:    rgba(0,0,0,0.50);
        --lg-modal-surface:   rgba(15,23,42,0.92);
        --lg-modal-form-surface: rgba(255,255,255,0.06);
        --lg-modal-field-surface: rgba(255,255,255,0.08);
        --lg-inner-light:     inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.15);
        --lg-fallback-surface: rgba(30,41,59,0.92);
        --lg-badge-success-bg:   rgba(52,199,89,0.22);
        --lg-badge-success-text: #86efac;
        --lg-badge-danger-bg:    rgba(255,59,48,0.22);
        --lg-badge-danger-text:  #fca5a5;
        --lg-badge-warning-bg:   rgba(255,149,0,0.22);
        --lg-badge-warning-text: #fcd34d;
        --lg-badge-info-bg:      rgba(90,200,250,0.22);
        --lg-badge-info-text:    #7dd3fc;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Sprint 7: Template-Wide Residual Fix
   Cubre patrones compartidos por CRUD y feature templates
   que usan clases custom con hex hardcoded en <style> blocks.
   ═══════════════════════════════════════════════════════════════ */

/* ── lg-badge-* (atbd, cebd, efbd, garrasbd, mnbd, pgbd, robotbd) ── */
[data-theme="dark"] .lg-badge-success {
    background: rgba(52,199,89,0.18) !important;
    color: var(--lg-success-light) !important;
}
[data-theme="dark"] .lg-badge-danger {
    background: rgba(255,59,48,0.18) !important;
    color: var(--lg-danger-light) !important;
}
[data-theme="dark"] .lg-badge-warning {
    background: rgba(255,149,0,0.18) !important;
    color: var(--lg-warning-light) !important;
}

/* ── lg-chip-* (moldebd, matbd) ───────────────────────────────── */
[data-theme="dark"] .lg-chip-success {
    background: rgba(52,199,89,0.18) !important;
    color: var(--lg-success-light) !important;
}
[data-theme="dark"] .lg-chip-warning {
    background: rgba(255,149,0,0.18) !important;
    color: var(--lg-warning-light) !important;
}
[data-theme="dark"] .lg-chip-danger {
    background: rgba(255,59,48,0.18) !important;
    color: var(--lg-danger-light) !important;
}

/* ── lg-card-avatar (CRUD family – tinted icon circles) ────────── */
[data-theme="dark"] .lg-card-avatar {
    background-color: rgba(255,255,255,0.08) !important;
}

/* ── option-icon.* (moldebd, matbd — semantic pill icons) ──────── */
[data-theme="dark"] .option-icon.shield {
    background: rgba(52,199,89,0.18) !important;
    color: var(--lg-success-light) !important;
}
[data-theme="dark"] .option-icon.lock {
    background: rgba(255,149,0,0.18) !important;
    color: var(--lg-warning-light) !important;
}
[data-theme="dark"] .option-icon.paint {
    background: rgba(255,45,85,0.14) !important;
    color: var(--lg-danger-light) !important;
}
[data-theme="dark"] .option-icon.robot {
    background: rgba(88,86,214,0.14) !important;
    color: #c4b5fd !important;
}
[data-theme="dark"] .option-icon.rotation {
    background: rgba(255,149,0,0.18) !important;
    color: var(--lg-warning-light) !important;
}

/* ── molde-changes-indicator (moldebd, matbd) ──────────────────── */
[data-theme="dark"] .molde-changes-indicator {
    background: rgba(255,149,0,0.18) !important;
    color: var(--lg-warning-light) !important;
}

/* ── Header banner cards (blue #006BB3 inline) — preservar azul ── */
[data-theme="dark"] .card[style*="background-color: #006BB3"],
[data-theme="dark"] .card[style*="background-color:#006BB3"],
[data-theme="dark"] [style*="background-color: #006BB3"].card {
    background-color: rgba(0,107,179,0.85) !important;
    border-color: rgba(0,107,179,0.50) !important;
}

/* ── lg-modal-header (custom CRUD gradient header — NOT .modal-header) ── */
[data-theme="dark"] .lg-modal-header {
    background: linear-gradient(135deg, var(--lg-accent), var(--lg-accent-hover)) !important;
    color: #fff !important;
}

/* ── Common search/filter inputs con inline styles ─────────────── */
[data-theme="dark"] [style*="border: 1px solid #dee2e6"] {
    border-color: var(--lg-border-strong) !important;
}
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background-color:#f8f9fa"] {
    background-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color:#ffffff"] {
    background-color: var(--lg-surface-solid) !important;
}
[data-theme="dark"] [style*="background-color: #e9ecef"],
[data-theme="dark"] [style*="background-color:#e9ecef"] {
    background-color: rgba(255,255,255,0.08) !important;
}

/* ── Inline color overrides for dark text on dark bg ───────────── */
[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#6c757d"] {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] [style*="color: #495057"],
[data-theme="dark"] [style*="color:#495057"] {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] [style*="color: #212529"],
[data-theme="dark"] [style*="color:#212529"] {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] [style*="color: #2c3e50"],
[data-theme="dark"] [style*="color:#2c3e50"] {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] [style*="color: #616161"],
[data-theme="dark"] [style*="color:#616161"] {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] [style*="color: #1a252f"],
[data-theme="dark"] [style*="color:#1a252f"] {
    color: var(--lg-text-primary) !important;
}

/* ── Inline bg tints — semantic colored backgrounds ────────────── */
[data-theme="dark"] [style*="background-color: #E3F2FD"],
[data-theme="dark"] [style*="background-color:#E3F2FD"],
[data-theme="dark"] [style*="background: #E3F2FD"] {
    background-color: rgba(33,150,243,0.12) !important;
    background: rgba(33,150,243,0.12) !important;
}
[data-theme="dark"] [style*="background-color: #E8F5E8"],
[data-theme="dark"] [style*="background-color:#E8F5E8"],
[data-theme="dark"] [style*="background-color: #d4edda"],
[data-theme="dark"] [style*="background-color:#d4edda"] {
    background-color: rgba(52,199,89,0.12) !important;
}
[data-theme="dark"] [style*="background-color: #FFF8E1"],
[data-theme="dark"] [style*="background-color:#FFF8E1"],
[data-theme="dark"] [style*="background-color: #fff9e6"],
[data-theme="dark"] [style*="background-color:#fff9e6"] {
    background-color: rgba(255,193,7,0.12) !important;
}
[data-theme="dark"] [style*="background-color: #E0F2F1"],
[data-theme="dark"] [style*="background-color:#E0F2F1"] {
    background-color: rgba(77,182,172,0.12) !important;
}
[data-theme="dark"] [style*="background-color: #FFF3E0"] {
    background-color: rgba(255,152,0,0.12) !important;
}
[data-theme="dark"] [style*="background-color: #F3E5F5"] {
    background-color: rgba(123,31,162,0.14) !important;
}
[data-theme="dark"] [style*="background-color: #FFEBEE"],
[data-theme="dark"] [style*="background-color:#FFEBEE"] {
    background-color: rgba(255,59,48,0.12) !important;
}
[data-theme="dark"] [style*="background-color: #e3f2fd"] {
    background-color: rgba(33,150,243,0.12) !important;
}
[data-theme="dark"] [style*="background-color: #E0E5E9"],
[data-theme="dark"] [style*="background-color:#E0E5E9"] {
    background-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] [style*="background-color: #F0F9F8"],
[data-theme="dark"] [style*="background-color:#F0F9F8"] {
    background-color: rgba(77,182,172,0.08) !important;
}
[data-theme="dark"] [style*="background-color: #E8F7F6"],
[data-theme="dark"] [style*="background-color:#E8F7F6"] {
    background-color: rgba(58,155,150,0.10) !important;
}
[data-theme="dark"] [style*="background-color: #B2DFDB"],
[data-theme="dark"] [style*="background-color:#B2DFDB"] {
    background-color: rgba(77,182,172,0.18) !important;
}
[data-theme="dark"] [style*="background-color: #F8FAFC"],
[data-theme="dark"] [style*="background-color:#F8FAFC"] {
    background-color: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] [style*="background-color: #F1F5F9"],
[data-theme="dark"] [style*="background-color:#F1F5F9"] {
    background-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] {
    background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] [style*="background-color: #fff5f5"],
[data-theme="dark"] [style*="background-color:#fff5f5"] {
    background-color: rgba(255,59,48,0.08) !important;
}
[data-theme="dark"] [style*="background-color: #f0f8fc"] {
    background-color: rgba(33,150,243,0.08) !important;
}
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"] {
    background: var(--lg-surface-solid) !important;
}

/* ── Inline border overrides ───────────────────────────────────── */
[data-theme="dark"] [style*="border: 1px solid #e0e0e0"],
[data-theme="dark"] [style*="border-color: #e0e0e0"] {
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] [style*="border: 1px solid #e9ecef"],
[data-theme="dark"] [style*="border-color: #e9ecef"] {
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] [style*="border-color: #E3F2FD"] {
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] [style*="border: 1px solid #fecaca"] {
    border-color: rgba(255,59,48,0.30) !important;
}
[data-theme="dark"] [style*="border: 1px solid #90caf9"],
[data-theme="dark"] [style*="border-color: #90caf9"] {
    border-color: rgba(33,150,243,0.30) !important;
}
[data-theme="dark"] [style*="border-color: #ffeaa7"] {
    border-color: rgba(255,193,7,0.30) !important;
}
[data-theme="dark"] [style*="border-color: #f5c6cb"] {
    border-color: rgba(255,59,48,0.30) !important;
}
[data-theme="dark"] [style*="border: 3px dashed #B8C1CC"] {
    border-color: var(--lg-border-strong) !important;
}
[data-theme="dark"] [style*="border: 2px solid #FFC107"] {
    border-color: rgba(255,193,7,0.50) !important;
}
[data-theme="dark"] [style*="border-bottom: 1px solid #e0e0e0"] {
    border-bottom-color: var(--lg-border) !important;
}


/* ── Inline color: #008CD7 (brand blue counts/icons — OK on dark) ── */
/* Kept as-is — brand accent readable on dark backgrounds */

/* ── Inline color: dark-only problem colors ────────────────────── */
[data-theme="dark"] [style*="color: #2c1810"],
[data-theme="dark"] [style*="color:#2c1810"] {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] [style*="color: #333333"],
[data-theme="dark"] [style*="color:#333333"] {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] [style*="color: #999;"],
[data-theme="dark"] [style*="color:#999;"] {
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] [style*="color: #856404"],
[data-theme="dark"] [style*="color:#856404"] {
    color: var(--lg-warning-light) !important;
}
[data-theme="dark"] [style*="color: #6c6c00"],
[data-theme="dark"] [style*="color:#6c6c00"] {
    color: var(--lg-warning-light) !important;
}
[data-theme="dark"] [style*="color: #721c24"],
[data-theme="dark"] [style*="color:#721c24"] {
    color: var(--lg-danger-light) !important;
}
[data-theme="dark"] [style*="color: #155724"],
[data-theme="dark"] [style*="color:#155724"] {
    color: var(--lg-success-light) !important;
}
[data-theme="dark"] [style*="color: #1976D2"],
[data-theme="dark"] [style*="color:#1976D2"] {
    color: var(--lg-accent-light) !important;
}

/* ── Disabled "En desarrollo" buttons/cards ────────────────────── */
[data-theme="dark"] [style*="color: #8A969F"],
[data-theme="dark"] [style*="color:#8A969F"] {
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] [style*="color: #6B7882"] {
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] [style*="background-color: #F5F6F7"],
[data-theme="dark"] [style*="background-color:#F5F6F7"],
[data-theme="dark"] [style*="background: #F5F6F7"] {
    background-color: rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.06) !important;
}

/* ── Semantic icons & text using specific brand colors ─────────── */
[data-theme="dark"] [style*="color: #8A8A00"] {
    color: #d4d400 !important;
}
[data-theme="dark"] [style*="background: #FFF8E1"],
[data-theme="dark"] [style*="background:#FFF8E1"] {
    background: rgba(255,193,7,0.10) !important;
}

/* ── user_management / level_permissions toggle ────────────────── */
[data-theme="dark"] [style*="background: #ccc"],
[data-theme="dark"] [style*="background:#ccc"] {
    background: var(--lg-border-strong) !important;
}
[data-theme="dark"] [style*="background-color: #d3d3d3"],
[data-theme="dark"] [style*="background-color:#d3d3d3"] {
    background-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] [style*="background-color: #D0E6A5"] {
    background-color: rgba(52,199,89,0.22) !important;
}
[data-theme="dark"] [style*="background-color: #86E3CE"] {
    background-color: rgba(90,200,250,0.22) !important;
}
[data-theme="dark"] [style*="background-color: #FFDD94"] {
    background-color: rgba(255,193,7,0.22) !important;
}
[data-theme="dark"] [style*="background-color: #FA897B"] {
    background-color: rgba(255,59,48,0.22) !important;
}
[data-theme="dark"] [style*="background-color: #f5f6fa"] {
    background-color: rgba(255,255,255,0.04) !important;
}

/* ── level_permissions — card-color scoped vars ────────────────── */
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] {
    background: rgba(255,255,255,0.06) !important;
}

/* ── accent-color for checkboxes (export_options_modal) ────────── */
[data-theme="dark"] [style*="accent-color: #008CD7"] {
    accent-color: var(--lg-accent-light) !important;
}

/* ── Common colored modal headers (JS-injected) ────────────────── */
[data-theme="dark"] [style*="background-color: #28a745"][class*="modal-header"],
[data-theme="dark"] .modal-header[style*="background-color: #28a745"] {
    background-color: rgba(40,167,69,0.85) !important;
}
[data-theme="dark"] [style*="background-color: #dc3545"][class*="modal-header"],
[data-theme="dark"] .modal-header[style*="background-color: #dc3545"] {
    background-color: rgba(220,53,69,0.85) !important;
}

/* ── Background #f7f7f7 (common light gray page bg) ────────────── */
[data-theme="dark"] [style*="background: #f7f7f7"],
[data-theme="dark"] [style*="background:#f7f7f7"] {
    background: var(--lg-bg) !important;
}

/* ── Alert-info inline (funciones_soporte, seguridades) ────────── */
[data-theme="dark"] .alert[style*="background-color: #e3f2fd"] {
    background-color: rgba(33,150,243,0.12) !important;
    border-color: rgba(33,150,243,0.25) !important;
    color: var(--lg-info-light) !important;
}

/* ── Toggle indicator dot ──────────────────────────────────────── */
[data-theme="dark"] .toggle-indicator[style*="background-color: #dee2e6"] {
    background-color: rgba(255,255,255,0.20) !important;
}

/* ── Common inline border-left-color semantic ─────────────────── */
[data-theme="dark"] [style*="border-left-color: #28a745"] {
    border-left-color: var(--lg-success) !important;
}
[data-theme="dark"] [style*="border-left-color: #6c757d"] {
    border-left-color: var(--lg-border-strong) !important;
}

/* ── Inline bg: #dc3545 (delete buttons) — kept red, darken slightly ── */
[data-theme="dark"] [style*="background: #dc3545"],
[data-theme="dark"] [style*="background:#dc3545"] {
    background: rgba(220,53,69,0.85) !important;
}

/* ── #007bff / #0056b3 border/color (user_mgmt, level_perms) ──── */
[data-theme="dark"] [style*="border-color: #007bff"] {
    border-color: var(--lg-accent) !important;
}
[data-theme="dark"] [style*="color: #007bff"],
[data-theme="dark"] [style*="color:#007bff"] {
    color: var(--lg-accent-light) !important;
}
[data-theme="dark"] [style*="color: #0056b3"],
[data-theme="dark"] [style*="color:#0056b3"] {
    color: var(--lg-accent-light) !important;
}
[data-theme="dark"] [style*="background: #007bff"],
[data-theme="dark"] [style*="background-color: #007bff"],
[data-theme="dark"] [style*="background-color:#007bff"] {
    background-color: rgba(0,123,255,0.80) !important;
    background: rgba(0,123,255,0.80) !important;
}

/* ── user_management warning/danger row highlights ─────────────── */
[data-theme="dark"] [style*="background-color: #fff3cd"] {
    background-color: rgba(255,193,7,0.12) !important;
}
[data-theme="dark"] [style*="background-color: #f8d7da"] {
    background-color: rgba(255,59,48,0.12) !important;
}
[data-theme="dark"] [style*="background: #f8d7da"] {
    background: rgba(255,59,48,0.12) !important;
}

/* ── btn backgrounds kept visible in dark ──────────────────────── */
[data-theme="dark"] [style*="background-color: #495057"] {
    background-color: rgba(73,80,87,0.85) !important;
}
[data-theme="dark"] [style*="background-color: #2196F3"] {
    background-color: rgba(33,150,243,0.80) !important;
}
[data-theme="dark"] [style*="background-color: #FF9800"] {
    background-color: rgba(255,152,0,0.80) !important;
}

/* ── B8860B (gold/dark-goldenrod — level_permissions) ──────────── */
[data-theme="dark"] [style*="color: #B8860B"],
[data-theme="dark"] [style*="color:#B8860B"] {
    color: #daa520 !important;
}
[data-theme="dark"] [style*="border-color: #B8860B"] {
    border-color: rgba(184,134,11,0.50) !important;
}
[data-theme="dark"] [style*="background-color: #B8860B"],
[data-theme="dark"] [style*="background:#B8860B"],
[data-theme="dark"] [style*="background: #B8860B"] {
    background-color: rgba(184,134,11,0.80) !important;
    background: rgba(184,134,11,0.80) !important;
}
[data-theme="dark"] [style*="background: #B8860B15"] {
    background: rgba(184,134,11,0.12) !important;
}

/* ── #5a6268 btn backgrounds ──────────────────────────────────── */
[data-theme="dark"] [style*="background: #5a6268"],
[data-theme="dark"] [style*="background-color: #5a6268"],
[data-theme="dark"] [style*="background: #545b62"],
[data-theme="dark"] [style*="background-color: #545b62"] {
    background: rgba(90,98,104,0.80) !important;
}

/* ── CCD1D5 (disabled light text) ──────────────────────────────── */
[data-theme="dark"] [style*="color: #CCD1D5"],
[data-theme="dark"] [style*="color:#CCD1D5"] {
    color: var(--lg-text-quaternary) !important;
}

/* ── #e9ecef backgrounds ──────────────────────────────────────── */
[data-theme="dark"] [style*="background: #e9ecef"],
[data-theme="dark"] [style*="background-color: #e9ecef"] {
    background: rgba(255,255,255,0.08) !important;
    background-color: rgba(255,255,255,0.08) !important;
}

/* ── Gold star ratings ─────────────────────────────────────────── */
[data-theme="dark"] [style*="color: #FFD700"] {
    color: #fcd34d !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Module Token Overrides
   Tokens personalizados por módulo definidos en :root de cada template.
   ═══════════════════════════════════════════════════════════════ */

/* ── especificaciones_molde.html — --lg-spec-* ─────────────────── */
[data-theme="dark"] {
    --lg-spec-zona1-bg: rgba(76,175,80,0.12);
    --lg-spec-zona1-border: rgba(76,175,80,0.30);
    --lg-spec-zona2-bg: rgba(33,150,243,0.12);
    --lg-spec-zona2-border: rgba(33,150,243,0.30);
    --lg-spec-zona3-bg: rgba(255,152,0,0.12);
    --lg-spec-zona3-border: rgba(255,152,0,0.30);
    --lg-spec-pagination-bg: rgba(255,255,255,0.04);
    --lg-spec-pagination-border: var(--lg-border);
    --lg-spec-pagination-link: var(--lg-text-secondary);
    --lg-spec-pagination-active-bg: rgba(33,150,243,0.18);
    --lg-spec-pagination-active-border: rgba(33,150,243,0.30);
    --lg-spec-search-bg: rgba(77,182,172,0.08);
    --lg-spec-search-border: rgba(77,182,172,0.25);
    --lg-spec-btn-bg: rgba(77,182,172,0.12);
    --lg-spec-btn-border: rgba(77,182,172,0.30);
    --lg-spec-btn-text: #80cbc4;
    --lg-spec-btn-hover-bg: rgba(77,182,172,0.22);
    --lg-spec-btn-hover-border: rgba(77,182,172,0.40);
    --lg-spec-btn-hover-text: #a7e0db;
    --lg-spec-stats-bg: rgba(77,182,172,0.10);
    --lg-spec-stats-border: rgba(77,182,172,0.25);

    /* ── secuencia_dia_productivo.html — --lg-gantt-* ──────────── */
    --lg-gantt-bg: linear-gradient(135deg, var(--lg-bg) 0%, var(--lg-bg-secondary) 100%);
    --lg-gantt-header-row-bg: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.06) 100%);
    --lg-gantt-col-bg: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 100%);
    --lg-gantt-time-text: var(--lg-text-primary);
    --lg-gantt-date-text: var(--lg-text-secondary);
    --lg-gantt-cell-border: var(--lg-border);
    --lg-gantt-cell-alt-border: var(--lg-border-light);
    --lg-gantt-detail-bg: rgba(255,255,255,0.04);
    --lg-gantt-detail-value: var(--lg-text-primary);

    /* ── secuenciacion_molde.html — --lg-seq-* ─────────────────── */
    --lg-seq-grid-border: var(--lg-border);
    --lg-seq-grid-bg: linear-gradient(to right, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 100%);
    --lg-seq-label-text: var(--lg-text-primary);
    --lg-seq-quarter-line: var(--lg-border-strong);
    --lg-seq-info-bg: linear-gradient(135deg, rgba(33,150,243,0.10) 0%, rgba(123,31,162,0.10) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Template-Specific Class Overrides
   CSS class rules in <style> blocks that have hardcoded hex colors.
   ═══════════════════════════════════════════════════════════════ */

/* ── operarios_crud.html ────────────────────────────────────── */
[data-theme="dark"] .operario-row.desactivado {
    background-color: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .operario-row.desactivado td {
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] .operario-row.desactivado:hover {
    background-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .field-label {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .field-value,
[data-theme="dark"] .field-value-special {
    border-color: var(--lg-border) !important;
    color: var(--lg-text-primary) !important;
    background-color: rgba(255,255,255,0.04);
}
[data-theme="dark"] .operario-card {
    background: var(--lg-surface-solid) !important;
}
[data-theme="dark"] .operario-card.desactivado {
    background-color: rgba(255,255,255,0.03) !important;
}
[data-theme="dark"] .operario-card.desactivado:hover {
    background-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .estado-toggle-container {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] .estado-toggle-label {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .mobile-sort-controls {
    border-color: var(--lg-border) !important;
    background: rgba(255,255,255,0.04) !important;
}

/* ── funciones_soporte_crud.html ─────────────────────────────── */
[data-theme="dark"] .funcion-item .form-control {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: var(--lg-border-strong) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .funcion-item .form-select {
    background-color: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border-strong) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .funcion-item.selected {
    background-color: rgba(0,140,215,0.10) !important;
}

/* ── level_permissions.html ──────────────────────────────────── */
[data-theme="dark"] .level-name {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .level-desc {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .level-badge {
    border-color: var(--lg-border) !important;
    background: var(--lg-surface-solid) !important;
}
[data-theme="dark"] .level-details-large .level-title,
[data-theme="dark"] .level-details-medium .level-title {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .level-details-large .level-description,
[data-theme="dark"] .level-details-medium .level-description {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .industrial-admin-card,
[data-theme="dark"] .industrial-level-card {
    background: var(--lg-surface-solid) !important;
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] .industrial-icon-admin,
[data-theme="dark"] .industrial-icon-standard {
    background: rgba(255,255,255,0.08) !important;
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .industrial-title,
[data-theme="dark"] .industrial-name {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .industrial-description,
[data-theme="dark"] .industrial-role,
[data-theme="dark"] .industrial-modules,
[data-theme="dark"] .industrial-label,
[data-theme="dark"] .industrial-access {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .header-background {
    background: linear-gradient(135deg, var(--lg-bg-secondary), var(--lg-bg-tertiary)) !important;
}
[data-theme="dark"] .header-content {
    border-color: var(--lg-border) !important;
    background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .header-title {
    color: var(--lg-text-primary) !important;
}

/* ── user_management.html ────────────────────────────────────── */
[data-theme="dark"] .professional-body {
    background: var(--lg-bg-secondary) !important;
}
[data-theme="dark"] .professional-footer {
    border-top-color: var(--lg-border) !important;
}
[data-theme="dark"] .form-card {
    background: var(--lg-surface-solid) !important;
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] .form-card-header {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.06)) !important;
    border-bottom-color: var(--lg-border) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .form-label-pro {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .form-control-pro {
    border-color: var(--lg-border-strong) !important;
    background: rgba(255,255,255,0.06) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .form-text-pro {
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] .btn-toggle-pro {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .admin-card-pro {
    background: linear-gradient(135deg, rgba(255,193,7,0.10), rgba(255,193,7,0.06)) !important;
    border-color: rgba(255,193,7,0.30) !important;
}
[data-theme="dark"] .admin-title {
    color: var(--lg-warning-light) !important;
}
[data-theme="dark"] .admin-desc {
    color: var(--lg-warning-light) !important;
}
[data-theme="dark"] .admin-warning-pro {
    background: rgba(255,59,48,0.10) !important;
    border-color: rgba(255,59,48,0.25) !important;
    color: var(--lg-danger-light) !important;
}
[data-theme="dark"] .control-panel-compact {
    background: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .panel-title-compact,
[data-theme="dark"] .panel-title-pro {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .panel-subtitle-pro {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .search-input-compact .input-group-text {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .search-input-compact .form-control {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .filter-select-compact {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--lg-border) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .stats-badge {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08)) !important;
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] .stats-label {
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] .filters-section-pro {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06)) !important;
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] .filters-header {
    color: var(--lg-text-primary) !important;
}

/* ── user_management.html — Modern modal ─────────────────────── */
[data-theme="dark"] .modern-modal-header {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.06)) !important;
    border-bottom-color: var(--lg-border) !important;
}
[data-theme="dark"] .modal-title-modern {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .modal-subtitle {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .modern-close-btn {
    background: rgba(255,255,255,0.08) !important;
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .modern-close-btn:hover {
    background: rgba(255,255,255,0.14) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .modern-modal-body {
    background: var(--lg-surface-solid) !important;
}
[data-theme="dark"] .form-section {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] .section-header {
    border-bottom-color: var(--lg-border) !important;
}
[data-theme="dark"] .section-title {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .section-description {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .modern-label {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .modern-input,
[data-theme="dark"] .modern-select {
    border-color: var(--lg-border-strong) !important;
    background: rgba(255,255,255,0.06) !important;
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .modern-input:read-only {
    background: rgba(255,255,255,0.03) !important;
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] .input-helper {
    color: var(--lg-text-tertiary) !important;
}
[data-theme="dark"] .switch-slider {
    background: rgba(255,255,255,0.15) !important;
}
[data-theme="dark"] .switch-label {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .modern-modal-footer {
    background: rgba(255,255,255,0.04) !important;
    border-top-color: var(--lg-border) !important;
}
[data-theme="dark"] .password-toggle {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .admin-toggle-container {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--lg-border) !important;
}
[data-theme="dark"] .admin-label {
    color: var(--lg-text-primary) !important;
}
[data-theme="dark"] .admin-warning {
    color: var(--lg-text-secondary) !important;
}
[data-theme="dark"] .form-help {
    color: var(--lg-text-tertiary) !important;
}

/* ── admin_tarjetas.html / admin_subtarjetas.html ────────────── */
[data-theme="dark"] .tarjeta-card {
    border-color: var(--lg-border) !important;
    background: var(--lg-surface-solid) !important;
}

/* ── Gantt / secuenciacion hardcoded backgrounds ─────────────── */
[data-theme="dark"] .gantt-timeline,
[data-theme="dark"] .gantt-cell {
    background: var(--lg-surface-solid) !important;
}

/* ── dashboard_widget.html — task card teal gradient ─────────── */
[data-theme="dark"] .card[style*="border: 2px solid #17a2b8"] {
    border-color: rgba(23,162,184,0.50) !important;
    background: linear-gradient(145deg, rgba(23,162,184,0.08) 0%, rgba(23,162,184,0.04) 100%) !important;
}
[data-theme="dark"] [style*="background: linear-gradient(145deg, #E8F7FA"] {
    background: linear-gradient(145deg, rgba(23,162,184,0.08) 0%, rgba(23,162,184,0.04) 100%) !important;
}
[data-theme="dark"] [style*="color: #17a2b8"] {
    color: #5bc0de !important;
}

/* ── index.html — section cards disabled ──────────────────────── */
[data-theme="dark"] [style*="background: #3D4A5C"] {
    background: rgba(61,74,92,0.60) !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║   SHARED COMPONENT ARCHITECTURE — Fase 1  (ref: DB-3, DB-5) ║
   ║   Clases antes duplicadas en cada template CRUD / feature.   ║
   ║   Para usar: hereda desde base.html vía lg-tokens.css.       ║
   ║   Templates solo necesitan override de entity tokens (~12)   ║
   ║   Ver: partials/_lg_entity_tokens.html como referencia.      ║
   ║   ver: 2.0 — 2026-02-28                                      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─── lg-btn-ghost — Acción terciaria sin fondo (ref: DB-5.3) ──── */
.lg-btn-ghost {
    background: transparent;
    color: var(--lg-text-secondary);
    border: none;
    box-shadow: none;
}
.lg-btn-ghost:hover {
    background: var(--lg-glass-surface-10);
    color: var(--lg-text-primary);
    border: none;
}

/* ─── lg-hero — Hero panel glass (ref: DB-3.2) ────────────────────
   Patrón compartido: todos los CRUDs, module pages, feature headers.
   Templates solo necesitan definir --lg-hero-ambient y entity tokens.
   ─────────────────────────────────────────────────────────────── */
.lg-hero {
    position: relative;
    padding: var(--lg-space-32) var(--lg-space-32) var(--lg-space-28);
    margin-bottom: var(--lg-space-16);
    border-radius: var(--lg-radius-lg);
    background: var(--lg-glass-surface-12);
    -webkit-backdrop-filter: var(--lg-glass-regular);
    backdrop-filter: var(--lg-glass-regular);
    border: var(--lg-hairline);
    box-shadow: var(--lg-shadow-md), var(--lg-inner-light);
    overflow: hidden;
    flex-shrink: 0;
}
.lg-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lg-hero-ambient, radial-gradient(ellipse 80% 60% at 15% 35%, var(--lg-accent-soft), transparent 70%));
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}
.lg-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--lg-luminosity-line);
    pointer-events: none;
    border-radius: var(--lg-radius-lg) var(--lg-radius-lg) 0 0;
}
.lg-hero, .lg-filters { flex-shrink: 0; }
.lg-hero-top {
    display: grid;
    grid-template-columns: 1fr minmax(0, 480px) 1fr;
    align-items: center;
    gap: var(--lg-space-20);
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}
/* ─── Hero-top child placement — toolbar true-centered (col 2 = 1fr…480px) ── */
.lg-hero-top > .lg-hero-info   { grid-column: 1; grid-row: 1; min-width: 0; }
.lg-hero-top > .lg-toolbar     { grid-column: 2; grid-row: 1; }
.lg-hero-top > .lg-actions     { grid-column: 3; grid-row: 1; justify-self: end; min-width: 0; }
.lg-hero-info {
    display: flex;
    flex-direction: column;
    gap: var(--lg-space-4);
    position: relative;
    z-index: 1;
}
.lg-hero-title {
    display: flex;
    align-items: center;
    gap: var(--lg-space-14);
    min-width: 0;
    flex-wrap: wrap;
}
.lg-hero-title h1 {
    font-size: var(--lg-type-title-lg);
    font-weight: 700;
    line-height: 1.2;
    color: var(--lg-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--lg-text-shadow);
    font-family: var(--lg-font);
}
.lg-hero-subtitle {
    font-size: var(--lg-type-body-sm);
    color: var(--lg-text-tertiary);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-shadow: var(--lg-text-shadow);
    position: relative;
    z-index: 1;
    font-family: var(--lg-font);
}
.lg-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--lg-space-32);
    height: var(--lg-space-32);
    padding: 0 var(--lg-space-12);
    border-radius: var(--lg-radius-pill);
    background: var(--lg-accent-soft);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    color: var(--lg-accent);
    font-size: var(--lg-type-micro);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: var(--lg-hairline-accent);
    flex-shrink: 0;
    box-shadow: var(--lg-shadow-xs), var(--lg-inner-light);
    font-family: var(--lg-font);
}
.lg-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: var(--lg-space-8);
    position: relative;
    z-index: 1;
}
.lg-actions-mobile { display: none; }

/* ─── lg-toolbar — Action bar row inside hero (ref: DB-5.5) ─────── */
.lg-toolbar {
    display: flex;
    align-items: center;
    gap: var(--lg-space-14);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* ─── lg-search — Glass capsule search bar (ref: DB-5.5) ─────────── */
.lg-search {
    position: relative;
    flex: 1;
    min-width: var(--lg-search-min-width, 200px);
    max-width: min(var(--lg-search-max-width, 480px), 100%);
}
.lg-search::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--lg-luminosity-line);
    pointer-events: none;
    border-radius: var(--lg-radius-pill) var(--lg-radius-pill) 0 0;
    z-index: 2;
}
.lg-search-icon {
    position: absolute;
    left: var(--lg-space-16); top: 50%;
    transform: translateY(-50%);
    width: var(--lg-space-16); height: var(--lg-space-16);
    color: var(--lg-text-quaternary);
    pointer-events: none;
    transition: color var(--lg-duration-fast) var(--lg-spring-smooth);
    z-index: 1;
}
.lg-search input {
    width: 100%;
    height: var(--lg-space-48);
    padding: 0 var(--lg-space-16) 0 var(--lg-space-44);
    border-radius: var(--lg-radius-pill);
    border: var(--lg-hairline);
    background: var(--lg-glass-surface-42);
    -webkit-backdrop-filter: var(--lg-glass-regular);
    backdrop-filter: var(--lg-glass-regular);
    box-shadow: var(--lg-shadow-sm), var(--lg-inner-light);
    color: var(--lg-text-primary);
    font-family: var(--lg-font);
    font-size: var(--lg-type-body-sm);
    outline: none;
    transition: all var(--lg-duration-fast) var(--lg-spring-smooth);
}
.lg-search input:focus {
    background: var(--lg-glass-surface-55);
    border-color: var(--lg-border-accent);
    box-shadow: var(--lg-focus-ring-soft), var(--lg-shadow-sm);
}
.lg-search input:focus ~ .lg-search-icon { color: var(--lg-accent); }
.lg-search input::placeholder { color: var(--lg-text-quaternary); }

/* ─── lg-filter-bar — Shared search+filter toolbar (ref: DB-5.5) ── */
.lg-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--lg-space-10);
    flex-wrap: wrap;
    padding: var(--lg-space-12) var(--lg-space-16);
    background: var(--lg-surface);
    border: var(--lg-hairline);
    border-radius: var(--lg-radius-md);
    box-shadow: var(--lg-shadow-sm);
    margin-bottom: var(--lg-space-16);
    flex-shrink: 0;
}

/* ─── lg-filters — Glass pill-filter bar (ref: DB-5.5) ────────── */
.lg-filters {
    display: flex; flex-direction: column; gap: var(--lg-space-8);
    margin-bottom: var(--lg-space-24); padding: var(--lg-space-6);
    background: var(--lg-filter-bar-bg);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    border-radius: var(--lg-radius-md); border: var(--lg-hairline);
    box-shadow: var(--lg-shadow-xs), var(--lg-inner-light);
    overflow: hidden; max-width: 100%; position: relative;
}
.lg-filters::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: var(--lg-space-1); background: var(--lg-luminosity-line);
    pointer-events: none; border-radius: var(--lg-radius-md) var(--lg-radius-md) 0 0; z-index: 1;
}
.lg-filters-main {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--lg-space-10); width: 100%; align-items: center;
}
.lg-filters-secondary {
    display: none; width: 100%; flex-wrap: wrap; justify-content: center;
    gap: var(--lg-space-8); padding-top: var(--lg-space-10);
    border-top: var(--lg-hairline-light);
    animation: lgFilterRowIn var(--lg-duration-fast) var(--lg-spring-gentle);
}
.lg-filters-secondary.show { display: flex; }
@keyframes lgFilterRowIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ─── lg-pill — Filter pill buttons (ref: DB-5.5) ─────────────── */
.lg-pill {
    padding: var(--lg-space-8) var(--lg-space-16);
    border-radius: var(--lg-radius-sm); font-size: var(--lg-type-caption);
    font-weight: 600; border: none; background: none;
    color: var(--lg-text-tertiary); cursor: pointer;
    transition: all var(--lg-duration-fast) var(--lg-spring-smooth),
                transform var(--lg-duration-fast) var(--lg-spring-bounce);
    -webkit-tap-highlight-color: transparent; font-family: var(--lg-font);
    text-align: center; position: relative; white-space: nowrap;
}
.lg-pill:hover { color: var(--lg-text-secondary); background: var(--lg-glass-surface-08); transform: scale(1.02); }
.lg-pill:active { transform: scale(0.96); }
.lg-pill.active {
    background: var(--lg-glass-surface-15);
    -webkit-backdrop-filter: var(--lg-glass-light); backdrop-filter: var(--lg-glass-light);
    color: var(--lg-text-primary); font-weight: 700;
    box-shadow: var(--lg-shadow-sm), var(--lg-inner-light); border: var(--lg-hairline);
}
.lg-pill.active::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: var(--lg-space-1); background: var(--lg-luminosity-line);
    pointer-events: none; border-radius: var(--lg-radius-sm) var(--lg-radius-sm) 0 0;
}
.lg-pill:focus-visible { outline: none; box-shadow: var(--lg-focus-ring); }
.lg-pill-compact {
    padding: var(--lg-space-6) var(--lg-space-12);
    font-size: var(--lg-type-micro); font-weight: 500;
}
.lg-pill-category {
    min-width: 164px; flex: 1 1 164px; max-width: 240px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; text-transform: uppercase;
    font-size: var(--lg-type-micro); letter-spacing: 0.04em;
    padding: var(--lg-space-8) var(--lg-space-10);
    color: var(--lg-text-secondary);
    background: var(--lg-glass-surface-08); border: var(--lg-hairline-light);
    border-radius: var(--lg-radius-md);
}
.lg-pill-category:hover { background: var(--lg-surface-hover); color: var(--lg-text-primary); }
.lg-pill-category.expanded,
.lg-pill-category.has-selection {
    background: var(--lg-glass-surface-15); color: var(--lg-text-primary);
    border: var(--lg-hairline); box-shadow: var(--lg-shadow-sm), var(--lg-inner-light);
}
.lg-pill-option {
    min-width: 112px; flex: 0 1 132px;
    display: inline-flex; justify-content: center; align-items: center;
    font-size: var(--lg-type-micro); padding: var(--lg-space-5) var(--lg-space-8);
}
.lg-pill-reset {
    width: var(--lg-space-36); height: var(--lg-space-36);
    min-width: var(--lg-space-36); min-height: var(--lg-space-36);
    padding: 0; border-radius: var(--lg-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--lg-danger-soft), var(--lg-warning-soft));
    color: var(--lg-danger); border: var(--lg-hairline);
    box-shadow: var(--lg-shadow-xs), var(--lg-inner-light);
    flex: 0 0 var(--lg-space-36); cursor: pointer;
    transition: all var(--lg-duration-fast) var(--lg-spring-smooth);
}
.lg-pill-reset:hover {
    background: linear-gradient(145deg, var(--lg-warning-soft), var(--lg-danger-soft));
    box-shadow: var(--lg-shadow-sm), var(--lg-inner-light);
    transform: scale(1.06) rotate(-45deg);
}
.lg-pill-reset i { font-size: var(--lg-type-body); line-height: 1; }

/* ─── lg-filter-divider / label — Filter bar utilities ─────────── */
.lg-filter-divider {
    width: 1px; height: 24px; background: var(--lg-border);
    margin: 0 var(--lg-space-2); align-self: center; flex-shrink: 0;
}
.lg-filter-label {
    font-size: var(--lg-type-micro); font-weight: 700;
    color: var(--lg-text-quaternary); text-transform: uppercase;
    letter-spacing: 0.06em; padding: var(--lg-space-8) var(--lg-space-8) var(--lg-space-8) var(--lg-space-4);
    align-self: center; white-space: nowrap;
}

/* ─── lg-modal-nave-badge — Compact ref badge in modal header ──── */
.lg-modal-nave-badge {
    width: var(--lg-space-32); height: var(--lg-space-32);
    min-width: var(--lg-space-32); border-radius: var(--lg-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--lg-type-label); font-weight: 800; letter-spacing: 0.02em;
    color: var(--lg-text-on-accent); background: var(--lg-text-tertiary);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 0.5px solid rgba(255,255,255,0.40);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.20) inset, 0 2px 8px rgba(0,0,0,0.10);
    text-transform: uppercase; line-height: 1; flex-shrink: 0;
    position: relative; overflow: hidden;
}
.lg-modal-nave-badge::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%);
    opacity: 0.6; pointer-events: none; animation: shimmer 3.5s linear infinite;
}
.lg-modal-nave-badge.is-empty {
    opacity: 0.65; color: var(--lg-text-primary);
    background: rgba(255,255,255,0.18);
}

/* ─── lg-file-link — File download link ────────────────────────── */
.lg-file-link { color: var(--lg-accent); font-weight: 600; text-decoration: none; }
.lg-file-link:hover { text-decoration: underline; }

/* ─── Filter pills responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .lg-filters { margin-bottom: var(--lg-space-10); padding: var(--lg-space-4); border-radius: var(--lg-radius-sm); }
    .lg-filters.is-mobile-visible { display: flex; }
    .lg-filters-main { gap: var(--lg-space-4); justify-content: center; flex-wrap: wrap; }
    .lg-pill-category { min-width: auto; flex-basis: auto; padding: var(--lg-space-6) var(--lg-space-10); font-size: 0.68rem; }
    .lg-pill-option { min-width: auto; flex-basis: auto; padding: var(--lg-space-4) var(--lg-space-8); font-size: 0.65rem; }
}
@media (max-width: 480px) {
    .lg-pill-category, .lg-pill-option { min-width: 100%; flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 1200px) {
    .lg-filters-main { gap: var(--lg-space-8); }
    .lg-pill-category { min-width: 156px; flex-basis: 156px; }
}
@media (max-width: 420px) {
    .lg-pill-reset { flex-basis: 100%; }
}

/* ─── lg-table-wrap — Table container (ref: DB-3, R-03 no glass) ── */
.lg-table-wrap {
    background: var(--lg-surface);
    border: var(--lg-hairline);
    border-radius: var(--lg-radius-md);
    box-shadow: var(--lg-shadow-sm);
    overflow: hidden;
    width: 100%;
}
.lg-table-wrap .table-responsive {
    border: none;
    border-radius: 0;
    margin: 0;
}

/* ─── lg-chip — Pill/Tag component (ref: DB-3.5) ──────────────────
   Base class + semantic variants.
   Dark overrides already in DARK MODE — Sprint 7 above.
   ─────────────────────────────────────────────────────────────── */
.lg-chip {
    display: inline-flex;
    align-items: center;
    height: var(--lg-space-28);
    padding: 0 var(--lg-space-12);
    border-radius: var(--lg-radius-xs);
    font-size: var(--lg-type-caption);
    font-weight: 600;
    color: var(--lg-text-secondary);
    background: var(--lg-glass-surface-18);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    border: var(--lg-hairline-light);
    box-shadow: var(--lg-shadow-xs), var(--lg-inner-light);
    white-space: nowrap;
    font-family: var(--lg-font);
}
.lg-chip-accent {
    background: var(--lg-accent-soft);
    color: var(--lg-accent);
    border: 0.5px solid var(--lg-border-accent);
    font-weight: 700;
}
.lg-chip-success {
    background: var(--lg-badge-success-bg);
    color: var(--lg-badge-success-text);
    border: 0.5px solid rgba(52,199,89,0.22);
}
.lg-chip-warning {
    background: var(--lg-badge-warning-bg);
    color: var(--lg-badge-warning-text);
    border: 0.5px solid rgba(255,149,0,0.22);
}
.lg-chip-danger {
    background: var(--lg-badge-danger-bg);
    color: var(--lg-badge-danger-text);
    border: 0.5px solid rgba(255,59,48,0.22);
}
.lg-chip-info {
    background: var(--lg-badge-info-bg);
    color: var(--lg-badge-info-text);
    border: 0.5px solid rgba(90,200,250,0.22);
}

/* ─── lg-badge-* — Semantic badge base classes (ref: DB-2.1.5) ──── */
.lg-badge-success {
    display: inline-flex; align-items: center;
    padding: var(--lg-space-2) var(--lg-space-8);
    border-radius: var(--lg-radius-pill);
    font-size: var(--lg-type-caption); font-weight: 600;
    background: var(--lg-badge-success-bg);
    color: var(--lg-badge-success-text);
    border: 0.5px solid rgba(52,199,89,0.25);
    font-family: var(--lg-font);
}
.lg-badge-danger {
    display: inline-flex; align-items: center;
    padding: var(--lg-space-2) var(--lg-space-8);
    border-radius: var(--lg-radius-pill);
    font-size: var(--lg-type-caption); font-weight: 600;
    background: var(--lg-badge-danger-bg);
    color: var(--lg-badge-danger-text);
    border: 0.5px solid rgba(255,59,48,0.25);
    font-family: var(--lg-font);
}
.lg-badge-warning {
    display: inline-flex; align-items: center;
    padding: var(--lg-space-2) var(--lg-space-8);
    border-radius: var(--lg-radius-pill);
    font-size: var(--lg-type-caption); font-weight: 600;
    background: var(--lg-badge-warning-bg);
    color: var(--lg-badge-warning-text);
    border: 0.5px solid rgba(255,149,0,0.25);
    font-family: var(--lg-font);
}
.lg-badge-info {
    display: inline-flex; align-items: center;
    padding: var(--lg-space-2) var(--lg-space-8);
    border-radius: var(--lg-radius-pill);
    font-size: var(--lg-type-caption); font-weight: 600;
    background: var(--lg-badge-info-bg);
    color: var(--lg-badge-info-text);
    border: 0.5px solid rgba(90,200,250,0.25);
    font-family: var(--lg-font);
}

/* ─── lg-overlay — Custom modal overlay (ref: DB-3.3, Z-modal) ──── */
.lg-overlay {
    position: fixed; inset: 0;
    z-index: var(--lg-z-modal);
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: var(--lg-overlay-tint);
    -webkit-backdrop-filter: var(--lg-overlay-filter);
    backdrop-filter: var(--lg-overlay-filter);
    opacity: 0;
    transition: opacity var(--lg-duration-normal) var(--lg-spring-gentle);
}
.lg-overlay.show {
    display: flex;
    opacity: 1;
    animation: lgOverlayIn var(--lg-duration-normal) var(--lg-spring-gentle);
}
@keyframes lgOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── lg-modal — Custom slide-up sheet (ref: DB-3.3, R-17) ──────── */
.lg-modal {
    width: min(96vw, var(--lg-modal-max-width));
    max-width: var(--lg-modal-max-width);
    max-height: 92dvh;
    background: var(--lg-modal-surface);
    -webkit-backdrop-filter: var(--lg-modal-filter);
    backdrop-filter: var(--lg-modal-filter);
    border-radius: var(--lg-radius-lg) var(--lg-radius-lg) 0 0;
    box-shadow:
        0 0 0 0.5px rgba(255,255,255,0.25) inset,
        var(--lg-shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transform: translateY(100%);
    transition: transform var(--lg-duration-modal) var(--lg-spring);
    border: 0.5px solid rgba(255,255,255,0.40);
    border-bottom: none;
}
.lg-overlay.show .lg-modal { transform: translateY(0); }
.lg-grab-handle {
    width: 40px; height: 5px;
    border-radius: var(--lg-radius-pill);
    background: var(--lg-border-strong);
    margin: var(--lg-space-10) auto 0;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* ─── lg-modal-header — Custom sheet header (ref: DB-3.3) ──────── */
.lg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--lg-space-18) var(--lg-space-24) var(--lg-space-12);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: var(--lg-glass-surface-10);
    border-bottom: var(--lg-hairline-light);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
}
.lg-modal-header-main {
    display: flex;
    align-items: center;
    gap: var(--lg-space-12);
    min-width: 0;
    flex: 1;
}
.lg-modal-header h2 {
    font-size: var(--lg-type-title-md);
    font-weight: 700;
    color: var(--lg-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    text-shadow: var(--lg-text-shadow);
    min-width: 0;
    line-height: 1.2;
    font-family: var(--lg-font);
}

/* ─── lg-modal-header-actions — CRUD header CTA buttons (ref: DB-3.3) ── */
.lg-modal-header-actions {
    display: flex;
    gap: var(--lg-space-6);
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}
/* Edit button — amber/warning tint, mutation action */
.lg-modal-header-action {
    width: 36px;
    height: 36px;
    border-radius: var(--lg-radius-sm);
    border: 1.5px solid var(--lg-warning-border);
    background: var(--lg-warning-soft);
    color: var(--lg-warning-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--lg-duration-fast) var(--lg-spring-smooth);
    font-size: 0.85rem;
    box-shadow: var(--lg-shadow-xs);
    flex-shrink: 0;
}
.lg-modal-header-action:hover {
    background: var(--lg-warning);
    color: var(--lg-text-on-accent);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: var(--lg-glow-warning);
}
/* Delete button — danger red tint, destructive action */
.lg-modal-header-action.delete {
    border-color: var(--lg-danger-border);
    background: var(--lg-danger-soft);
    color: var(--lg-danger);
}
.lg-modal-header-action.delete:hover {
    background: var(--lg-danger);
    color: var(--lg-text-on-accent);
    border-color: transparent;
    box-shadow: var(--lg-glow-danger);
}
/* Report button — info/documental tint, read-only action */
.lg-modal-header-action.report {
    border-color: var(--lg-info-border);
    background: var(--lg-info-soft);
    color: var(--lg-info-fg);
}
.lg-modal-header-action.report:hover {
    background: var(--lg-info-dark);
    color: var(--lg-text-on-accent);
    border-color: transparent;
    box-shadow: var(--lg-glow-info);
}
.lg-modal-header-action:active { transform: scale(0.92); }
.lg-modal-header-action:focus-visible { outline: none; box-shadow: var(--lg-focus-ring); }

/* ─── lg-modal-close — Close button (ref: DB-3.3) ──────────────── */
.lg-modal-close {
    width: var(--lg-close-size); height: var(--lg-close-size);
    margin-left: var(--lg-space-8);
    border-radius: var(--lg-radius-circle);
    border: var(--lg-hairline);
    background: var(--lg-glass-surface-05);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lg-text-tertiary);
    font-size: var(--lg-space-30);
    font-weight: 700;
    line-height: 1;
    padding: 0;
    transition:
        background var(--lg-duration-fast) var(--lg-spring-smooth),
        color var(--lg-duration-fast) var(--lg-spring-smooth),
        transform var(--lg-duration-fast) var(--lg-spring-bounce);
    box-shadow: var(--lg-shadow-xs), var(--lg-inner-light);
}
.lg-modal-close:hover {
    background: var(--lg-danger-soft);
    color: var(--lg-danger);
    transform: scale(1.05);
}
.lg-modal-close:active { transform: scale(0.9); }
.lg-modal-close:focus-visible { box-shadow: var(--lg-focus-ring); outline: none; }

/* ─── lg-modal-body ─────────────────────────────────────────────── */
.lg-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--lg-space-14) var(--lg-space-18) var(--lg-space-18);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    z-index: 1;
    min-height: var(--lg-modal-body-min-height, 320px);
}
.lg-modal-body::-webkit-scrollbar { width: 0; display: none; }

/* ─── lg-modal-footer — Glass footer bar (ref: DB-3.3, R-17) ────── */
.lg-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lg-space-10);
    padding: var(--lg-space-14) var(--lg-space-18);
    flex-shrink: 0;
    border-top: var(--lg-hairline-light);
    background: var(--lg-glass-surface-22);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    position: relative;
    z-index: 2;
}
.lg-modal-footer-between { justify-content: space-between; }
.lg-modal-footer-center { justify-content: center; }

/* ─── lg-tabs — Segmented control tab bar (ref: DB-5.6) ─────────── */
.lg-tabs-shell {
    position: relative;
    z-index: 2;
    padding: var(--lg-space-4) var(--lg-space-20) 0;
}
.lg-tabs {
    padding: var(--lg-space-6) 0;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
}
.lg-tabs::-webkit-scrollbar { display: none; }
.lg-tabs-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--lg-space-4);
    padding: var(--lg-space-4);
    background: var(--lg-glass-surface-12);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    border-radius: var(--lg-radius-sm);
    border: var(--lg-hairline);
    box-shadow: var(--lg-shadow-sm), var(--lg-inner-light);
    width: 100%;
}
.lg-tab {
    flex: 0 0 auto;
    padding: var(--lg-space-8) var(--lg-space-18);
    font-family: var(--lg-font);
    font-size: var(--lg-type-tab);
    font-weight: 600;
    color: var(--lg-text-tertiary);
    cursor: pointer;
    border: none;
    background: none;
    border-radius: var(--lg-radius-sm);
    text-align: center;
    white-space: nowrap;
    transition:
        background var(--lg-duration-fast) var(--lg-spring-smooth),
        color var(--lg-duration-fast) var(--lg-spring-smooth),
        box-shadow var(--lg-duration-fast) var(--lg-spring-smooth);
    -webkit-tap-highlight-color: transparent;
}
.lg-tab:hover {
    color: var(--lg-text-secondary);
    background: var(--lg-glass-surface-08);
}
.lg-tab:focus-visible { outline: none; box-shadow: var(--lg-focus-ring); }
.lg-tab.active {
    color: var(--lg-text-primary);
    font-weight: 700;
    background: var(--lg-glass-surface-15);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    box-shadow: var(--lg-shadow-xs), var(--lg-inner-light);
    border: var(--lg-hairline-light);
}
.lg-tab-pane { display: none; }
.lg-tab-pane.active {
    display: block;
    animation: lgPaneIn var(--lg-duration-normal) var(--lg-spring-gentle);
}
@keyframes lgPaneIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ─── lg-form-grid — iOS Settings-style glass form (ref: DB-5.8) ── */
.lg-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--lg-modal-form-surface);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    border-radius: var(--lg-radius-md);
    border: var(--lg-hairline-light);
    overflow: hidden;
    padding: var(--lg-space-2);
    box-shadow: var(--lg-shadow-xs);
}
@media (min-width: 1200px) {
    .lg-tab-pane .lg-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--lg-space-8);
        padding: var(--lg-space-8);
    }
    .lg-tab-pane .lg-field {
        border: var(--lg-hairline-light);
        border-radius: var(--lg-radius-sm);
        margin-bottom: 0;
    }
    .lg-tab-pane .lg-field:has(textarea) { grid-column: 1 / -1; }
}
.lg-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--lg-space-14) var(--lg-space-18);
    border-bottom: var(--lg-hairline-light);
    position: relative;
    transition: background var(--lg-duration-fast) var(--lg-spring-smooth);
    background: var(--lg-modal-field-surface);
}
.lg-field:last-child { border-bottom: none; }
.lg-field:focus-within { background: var(--lg-glass-surface-22); }
.lg-field label {
    font-size: var(--lg-type-label);
    font-weight: 700;
    color: var(--lg-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--lg-space-6);
    font-family: var(--lg-font);
}
.lg-field input,
.lg-field textarea,
.lg-field select {
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: var(--lg-type-body);
    color: var(--lg-text-primary);
    background: transparent;
    outline: none;
    width: 100%;
    font-family: var(--lg-font);
    font-weight: 500;
    transition: color var(--lg-duration-fast) var(--lg-ease-legacy);
    -webkit-appearance: none;
    appearance: none;
}
.lg-field input:focus,
.lg-field textarea:focus,
.lg-field select:focus { color: var(--lg-accent); }
.lg-field input[readonly],
.lg-field textarea[readonly] { opacity: 0.6; cursor: default; }
.lg-field textarea { min-height: 72px; resize: vertical; }
.lg-field-span-2, .lg-field-span-3, .lg-field-block { grid-column: 1 / -1; }
.lg-field-unit {
    position: absolute;
    top: var(--lg-space-14);
    right: var(--lg-space-18);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--lg-font);
    color: var(--lg-text-tertiary);
    background: var(--lg-glass-surface-22);
    padding: 2px 8px;
    border-radius: var(--lg-radius-pill);
    line-height: 1.4;
    letter-spacing: 0.04em;
    pointer-events: none;
    white-space: nowrap;
}
.lg-field-note { font-size: var(--lg-type-caption); color: var(--lg-text-tertiary); margin-top: var(--lg-space-4); font-family: var(--lg-font); }

/* ─── Tab Section — structural wrapper inside tab panes (ref: DB-5.8) ── */
.lg-tab-section { margin-bottom: var(--lg-space-12); }
.lg-tab-section:last-child { margin-bottom: 0; }
.lg-tab-section-head {
    padding: var(--lg-space-12) var(--lg-space-18) var(--lg-space-4);
    display: flex; align-items: baseline; gap: var(--lg-space-10);
}
.lg-tab-section-title {
    font-size: var(--lg-type-label);
    font-weight: 700;
    color: var(--lg-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    font-family: var(--lg-font);
}
.lg-tab-section-subtitle {
    font-size: var(--lg-type-caption);
    color: var(--lg-text-tertiary);
    margin: 0; font-weight: 500; font-family: var(--lg-font);
}

/* ─── Feature block — boolean option cards (Opciones tab) ──────── */
.lg-tab-feature-block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--lg-space-10);
    padding: var(--lg-space-4) var(--lg-space-2);
}
.lg-feature-item {
    background: var(--lg-modal-form-surface);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    border: var(--lg-hairline-light);
    border-radius: var(--lg-radius-md);
    padding: var(--lg-space-14) var(--lg-space-16);
    display: flex; flex-direction: column; gap: var(--lg-space-10);
    position: relative; overflow: hidden;
    transition: border-color var(--lg-duration-fast) var(--lg-spring-smooth),
                box-shadow var(--lg-duration-fast) var(--lg-spring-smooth);
}
.lg-feature-item:hover { border-color: var(--lg-border-accent); box-shadow: var(--lg-shadow-xs); }
.lg-feature-item-head { display: flex; align-items: center; gap: var(--lg-space-10); }
.lg-feature-icon {
    width: 32px; height: 32px;
    border-radius: var(--lg-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--lg-type-body-sm);
    background: var(--lg-accent-soft); color: var(--lg-accent);
    flex-shrink: 0;
}
.lg-feature-icon.shield   { background: var(--lg-success-soft); color: var(--lg-badge-success-text); }
.lg-feature-icon.lock     { background: var(--lg-warning-soft); color: var(--lg-badge-warning-text); }
.lg-feature-icon.paint    { background: rgba(255,45,85,0.08);   color: var(--lg-badge-danger-text); }
.lg-feature-icon.robot    { background: rgba(88,86,214,0.08);   color: #5856D6; }
.lg-feature-icon.rotation { background: var(--lg-warning-soft); color: var(--lg-badge-warning-text); }
.lg-feature-icon.gear     { background: var(--lg-glass-surface-08); color: var(--lg-text-secondary); }
.lg-feature-title {
    font-weight: 700; color: var(--lg-text-primary);
    font-size: var(--lg-type-body-sm); font-family: var(--lg-font);
}

/* ─── Media block — PDF / file attachment inside tab ───────────── */
.lg-tab-media-block {
    margin: 0 var(--lg-space-2) var(--lg-space-4);
    padding: var(--lg-space-12) var(--lg-space-18);
    background: var(--lg-modal-form-surface);
    -webkit-backdrop-filter: var(--lg-glass-light); backdrop-filter: var(--lg-glass-light);
    border: var(--lg-hairline-light); border-radius: var(--lg-radius-md);
    display: flex; align-items: center; gap: var(--lg-space-12);
    transition: border-color var(--lg-duration-fast) var(--lg-spring-smooth);
}
.lg-tab-media-block:hover { border-color: var(--lg-border-accent); }
.lg-tab-media-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--lg-type-body); color: var(--lg-text-tertiary); flex-shrink: 0;
}

/* ─── lg-toggle — iOS 51×31 Toggle (ref: DB-5.9) ────────────────── */
.lg-toggle {
    display: flex;
    align-items: center;
    gap: var(--lg-space-12);
    padding-top: var(--lg-space-4);
}
.lg-toggle input[type=checkbox] {
    width: 51px; height: 31px;
    -webkit-appearance: none; appearance: none;
    background: var(--lg-toggle-track-bg);
    border-radius: var(--lg-toggle-track-radius);
    position: relative;
    cursor: pointer;
    transition:
        background var(--lg-duration-fast) var(--lg-spring-smooth),
        box-shadow var(--lg-duration-fast) var(--lg-spring-smooth);
    flex-shrink: 0;
    border: var(--lg-hairline);
}
.lg-toggle input[type=checkbox]::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 27px; height: 27px;
    border-radius: 50%;
    background: var(--lg-surface-elevated);
    box-shadow: var(--lg-shadow-sm), var(--lg-inner-light);
    transition:
        left var(--lg-duration-fast) var(--lg-spring-bounce),
        box-shadow var(--lg-duration-fast) var(--lg-spring-smooth);
}
.lg-toggle input[type=checkbox]:checked {
    background: var(--lg-accent);
    box-shadow: var(--lg-toggle-glow);
}
.lg-toggle input[type=checkbox]:checked::after { left: 22px; }
.lg-toggle span {
    font-size: var(--lg-type-body-sm);
    color: var(--lg-text-primary);
    font-weight: 500;
    font-family: var(--lg-font);
}
.lg-toggle input[type=checkbox]:focus-visible {
    box-shadow: var(--lg-focus-ring); outline: none;
}

/* ─── lg-empty — Empty state (ref: DB-5.15) ─────────────────────── */
.lg-empty {
    text-align: center;
    padding: var(--lg-space-48) var(--lg-space-24);
    background: var(--lg-glass-surface-12);
    -webkit-backdrop-filter: var(--lg-glass-regular);
    backdrop-filter: var(--lg-glass-regular);
    border-radius: var(--lg-radius-lg);
    border: var(--lg-hairline);
    box-shadow: var(--lg-shadow-sm), var(--lg-inner-light);
    position: relative;
    overflow: hidden;
    width: 100%;
}
.lg-empty-icon {
    font-size: 3rem;
    opacity: 0.25;
    margin-bottom: var(--lg-space-16);
    display: block;
    line-height: 1;
    position: relative; z-index: 1;
}
.lg-empty h3 {
    font-size: var(--lg-type-title-md);
    color: var(--lg-text-secondary);
    margin: 0 0 var(--lg-space-6);
    font-weight: 700;
    font-family: var(--lg-font);
    position: relative; z-index: 1;
}
.lg-empty p {
    font-size: var(--lg-type-body-compact);
    margin: 0;
    color: var(--lg-text-tertiary);
    font-weight: 500;
    font-family: var(--lg-font);
    position: relative; z-index: 1;
}

/* ─── Loading state ─────────────────────────────────────────────── */
.lg-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lg-space-12);
    padding: var(--lg-space-48) var(--lg-space-24);
    color: var(--lg-text-tertiary);
    font-size: var(--lg-type-body-sm);
    font-family: var(--lg-font);
}
.lg-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--lg-spinner-track);
    border-top-color: var(--lg-accent);
    border-radius: 50%;
    animation: lgSpin var(--lg-duration-spin) linear infinite;
    flex-shrink: 0;
}
@keyframes lgSpin { to { transform: rotate(360deg); } }

/* ─── Mobile responsive — R-17 (ref: DB-5, ≤767px) ──────────────── */
@media (max-width: 767px) {
    .lg-hero {
        padding: var(--lg-space-14) var(--lg-space-14) var(--lg-space-12);
        border-radius: var(--lg-radius-md);
        margin-bottom: var(--lg-space-10);
    }
    .lg-hero-top {
        grid-template-columns: 1fr auto;
        gap: var(--lg-space-10);
        margin-bottom: 0;
    }
    /* Hero-top mobile: info+actions-mobile en fila 1, toolbar ocupa fila 2 completa */
    .lg-hero-top > .lg-hero-info   { grid-column: 1; grid-row: 1; }
    .lg-hero-top > .lg-toolbar     { grid-column: 1 / -1; grid-row: 2; }
    .lg-hero-top > .lg-actions     { grid-column: 2; grid-row: 1; }
    .lg-hero-title h1 { font-size: var(--lg-type-title-xs); }
    .lg-actions { display: none; }
    .lg-actions-mobile { display: flex; }
    .lg-toolbar { gap: var(--lg-space-8); }
    .lg-modal {
        width: 100vw;
        max-width: 100vw;
    }
    .lg-modal-footer {
        flex-wrap: wrap;
        gap: var(--lg-space-8);
        padding-bottom: max(var(--lg-space-12), env(safe-area-inset-bottom));
    }
}

/* ─── Mobile bottom sheet for Bootstrap .modal (ref: R-17) ──────── */
@media (max-width: 767px) {
    .modal-dialog:not(.modal-dialog-centered):not(.modal-dialog-scrollable) {
        margin: 0;
        align-items: flex-end;
        min-height: 100dvh;
        display: flex;
    }
    .modal-dialog:not(.modal-dialog-centered):not(.modal-dialog-scrollable) .modal-content {
        border-radius: var(--lg-radius-lg) var(--lg-radius-lg) 0 0;
        max-height: 90dvh;
        overflow-y: auto;
    }
    .modal-footer {
        padding-bottom: max(var(--lg-space-16), env(safe-area-inset-bottom));
    }
}

/* ─── @supports fallback — Shared components (ref: DB-2.8, R-11) ── */
@supports not (backdrop-filter: blur(1px)) {
    .lg-hero, .lg-empty { background: var(--lg-fallback-surface); }
    .lg-chip, .lg-chip-accent { background: var(--lg-fallback-canvas); }
    .lg-overlay { background: var(--lg-fallback-overlay); }
    .lg-modal, .lg-modal-header { background: var(--lg-fallback-surface); }
    .lg-modal-footer { background: rgba(245,245,245,0.96); }
    .lg-search input { background: rgba(255,255,255,0.96); }
    .lg-filter-bar { background: rgba(255,255,255,0.96); }
    .lg-table-wrap { background: rgba(255,255,255,0.96); }
    .lg-form-grid, .lg-field { background: var(--lg-fallback-surface); }
    .lg-tabs-inner { background: rgba(245,245,245,0.95); }
    .lg-btn-ghost { background: transparent; }
}

/* ─── Reduced motion — Shared components (ref: R-10) ─────────────── */
@media (prefers-reduced-motion: reduce) {
    .lg-hero::after, .lg-hero::before,
    .lg-overlay, .lg-modal,
    .lg-tab, .lg-tab-pane,
    .lg-modal-close, .lg-modal-close:hover,
    .lg-spinner {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .lg-overlay.show { animation: none; }
    .lg-tab-pane.active { animation: none; }
    .lg-overlay.show .lg-modal { transform: none !important; }
}

/* ─── Dark mode — Shared components (ref: DB dark, R-16) ─────────── */
[data-theme="dark"] .lg-hero {
    background: rgba(255,255,255,0.06);
    border-color: var(--lg-border);
    box-shadow: var(--lg-shadow-md);
}
[data-theme="dark"] .lg-hero-title h1 { color: var(--lg-text-primary); }
[data-theme="dark"] .lg-hero-subtitle { color: var(--lg-text-secondary); }
[data-theme="dark"] .lg-counter {
    background: rgba(255,255,255,0.10);
    color: var(--lg-accent-light);
    border-color: var(--lg-border-accent);
}
[data-theme="dark"] .lg-search input {
    background: rgba(255,255,255,0.08);
    border-color: var(--lg-border);
    color: var(--lg-text-primary);
}
[data-theme="dark"] .lg-search input:focus {
    background: rgba(255,255,255,0.12);
    border-color: var(--lg-accent);
}
[data-theme="dark"] .lg-search input::placeholder { color: var(--lg-text-quaternary); }
[data-theme="dark"] .lg-filter-bar {
    background: rgba(255,255,255,0.04);
    border-color: var(--lg-border);
}
[data-theme="dark"] .lg-table-wrap {
    background: transparent;
    border-color: var(--lg-border);
}
[data-theme="dark"] .lg-overlay { background: rgba(0,0,0,0.55); }
[data-theme="dark"] .lg-modal {
    background: var(--lg-modal-surface);
    border-color: var(--lg-border);
}
[data-theme="dark"] .lg-modal-header {
    background: rgba(255,255,255,0.04);
    border-bottom-color: var(--lg-border);
}
[data-theme="dark"] .lg-modal-header h2 { color: var(--lg-text-primary); }
[data-theme="dark"] .lg-modal-close {
    background: rgba(255,255,255,0.06);
    color: var(--lg-text-secondary);
    border-color: var(--lg-border);
}
[data-theme="dark"] .lg-modal-close:hover {
    background: rgba(255,59,48,0.18);
    color: var(--lg-danger-light);
}
/* Dark mode — header action buttons */
[data-theme="dark"] .lg-modal-header-action {
    border-color: var(--lg-warning-border);  /* dark override: rgba(255,149,0,0.45) */
    background: var(--lg-warning-soft);      /* dark override: rgba(255,149,0,0.18) */
    color: var(--lg-warning);
}
[data-theme="dark"] .lg-modal-header-action:hover {
    background: var(--lg-warning);
    color: #000;                             /* intentional: contrast on bright amber, no token */
    border-color: transparent;
}
[data-theme="dark"] .lg-modal-header-action.delete {
    border-color: var(--lg-danger-border);   /* dark override: rgba(255,59,48,0.42) */
    background: var(--lg-danger-soft);       /* dark override: rgba(255,59,48,0.18) */
    color: var(--lg-danger-light);
}
[data-theme="dark"] .lg-modal-header-action.delete:hover {
    background: var(--lg-danger);
    color: var(--lg-text-on-accent);
}
/* Report button — documental/info dark override (HDR-DM01: spec 0,3,0 beats base 0,2,0) */
[data-theme="dark"] .lg-modal-header-action.report {
    border-color: var(--lg-info-border);     /* dark override: rgba(90,200,250,0.42) */
    background: var(--lg-info-soft);         /* dark override: rgba(90,200,250,0.18) */
    color: var(--lg-info-fg);               /* dark override: #7dd3fc */
}
[data-theme="dark"] .lg-modal-header-action.report:hover {
    background: var(--lg-info-dark);         /* dark override: #1a9dc4 */
    color: var(--lg-text-on-accent);
    border-color: transparent;
    box-shadow: var(--lg-glow-info);
}
[data-theme="dark"] .lg-modal-body { background: var(--lg-surface-solid); }
[data-theme="dark"] .lg-modal-footer {
    background: rgba(255,255,255,0.04);
    border-top-color: var(--lg-border);
}
[data-theme="dark"] .lg-tabs-inner {
    background: rgba(255,255,255,0.08);
    border-color: var(--lg-border);
}
[data-theme="dark"] .lg-tab { color: var(--lg-text-secondary); }
[data-theme="dark"] .lg-tab:hover {
    background: rgba(255,255,255,0.08);
    color: var(--lg-text-primary);
}
[data-theme="dark"] .lg-tab.active {
    background: rgba(255,255,255,0.12);
    color: var(--lg-text-primary);
    border-color: var(--lg-border);
}
[data-theme="dark"] .lg-form-grid {
    background: rgba(255,255,255,0.04);
    border-color: var(--lg-border-light);
}
[data-theme="dark"] .lg-field {
    background: rgba(255,255,255,0.03);
    border-bottom-color: var(--lg-border-light);
}
[data-theme="dark"] .lg-field:focus-within { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .lg-field label { color: var(--lg-text-tertiary); }
[data-theme="dark"] .lg-field input,
[data-theme="dark"] .lg-field textarea,
[data-theme="dark"] .lg-field select {
    color: var(--lg-text-primary);
    background: transparent;
}
[data-theme="dark"] .lg-field input:focus,
[data-theme="dark"] .lg-field textarea:focus,
[data-theme="dark"] .lg-field select:focus { color: var(--lg-accent-light); }
[data-theme="dark"] .lg-field input[readonly],
[data-theme="dark"] .lg-field textarea[readonly] { color: var(--lg-text-tertiary); }
[data-theme="dark"] .lg-toggle span { color: var(--lg-text-primary); }
[data-theme="dark"] .lg-empty {
    background: rgba(255,255,255,0.04);
    border-color: var(--lg-border);
}
[data-theme="dark"] .lg-empty h3 { color: var(--lg-text-secondary); }
[data-theme="dark"] .lg-empty p { color: var(--lg-text-tertiary); }
[data-theme="dark"] .lg-loading-state { color: var(--lg-text-tertiary); }
[data-theme="dark"] .lg-btn-ghost { color: var(--lg-text-secondary); }
[data-theme="dark"] .lg-btn-ghost:hover {
    background: rgba(255,255,255,0.08);
    color: var(--lg-text-primary);
}
/* ── @supports dark glass ──────────────────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
    [data-theme="dark"] .lg-hero { background: rgba(30,41,59,0.92); }
    [data-theme="dark"] .lg-modal, [data-theme="dark"] .lg-modal-header {
        background: rgba(30,41,59,0.96);
    }
    [data-theme="dark"] .lg-modal-footer { background: rgba(15,23,42,0.95); }
    [data-theme="dark"] .lg-empty { background: rgba(30,41,59,0.90); }
    [data-theme="dark"] .lg-filter-bar { background: rgba(30,41,59,0.90); }
    [data-theme="dark"] .lg-table-wrap { background: rgba(30,41,59,0.92); }
    [data-theme="dark"] .lg-search input { background: rgba(255,255,255,0.08); }
    [data-theme="dark"] .lg-form-grid,
    [data-theme="dark"] .lg-field { background: rgba(30,41,59,0.90); }
    [data-theme="dark"] .lg-tabs-inner { background: rgba(30,41,59,0.92); }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║   SHARED COMPONENT ARCHITECTURE — Fase 2  (ref: DB-3, DB-5) ║
   ║   CRUD Page-Level Components                                 ║
   ║   Canvas, page layout, card grid, status, pagination,        ║
   ║   delete modal, toast, glass layers, view-value, scrollbar.  ║
   ║   All components use --lg-* tokens → entity-agnostic.        ║
   ║   Templates ONLY need :root token overrides.                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─── Canvas Background (ref: DB-3.1) ─────────────────────────── */
.lg-canvas {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--lg-bg) var(--lg-canvas-image) center / cover no-repeat;
}
.lg-canvas::after {
    content: ''; position: absolute; inset: 0;
    background: var(--lg-canvas-veil); pointer-events: none;
}

/* ─── Page Layout (ref: DB-3.2) ────────────────────────────────── */
.lg-page {
    padding: var(--lg-space-14) 10% 0; max-width: none;
    margin: -1rem 0 0 0; position: relative; width: 100%;
    display: flex; flex-direction: column;
    height: calc(100dvh - 52px); overflow: hidden;
}
.lg-scroll-area {
    flex: 1 1 0; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Padding lateral/bottom: allows card box-shadows (blur 48px, spread ~24px) to fully
       render without clipping by the scroll container's implicit overflow-x boundary.
       Top 16px: covers first-row hover translateY(-4px) + shadow top edge.
       Lateral 24px: covers max shadow half-spread (blur48/2 ≈ 24px) + scale 1.008 delta.
       Bottom 64px: shadow offset 10px + blur 48px + margin-bottom 20px buffer. */
    padding: var(--lg-space-16) var(--lg-space-24) var(--lg-space-64);
}
.lg-scroll-area::-webkit-scrollbar { width: 0; display: none; }

/* ─── Section Rail — glass band between hero and grid (CRUDs without filter bar) ─ */
/* Provides structural rhythm and visual weight equivalent to .lg-filters rail.    */
/* Only used in 7 simple CRUDs (atbd/cebd/efbd/robotbd/garrasbd/pgbd/mnbd).        */
.lg-section-rail {
    flex-shrink: 0;
    height: var(--lg-space-36);
    display: flex;
    align-items: center;
    padding: 0 var(--lg-space-20);
    margin-bottom: var(--lg-space-8);
    background: var(--lg-glass-surface-08);
    -webkit-backdrop-filter: var(--lg-glass-light);
    backdrop-filter: var(--lg-glass-light);
    border: var(--lg-hairline);
    border-radius: var(--lg-radius-md);
    box-shadow: var(--lg-shadow-xs), var(--lg-inner-light);
    position: relative;
    overflow: hidden;
}
.lg-section-rail::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--lg-luminosity-line);
    pointer-events: none;
    border-radius: var(--lg-radius-md) var(--lg-radius-md) 0 0;
}

/* ─── Card Grid (ref: DB-3.4) ──────────────────────────────────── */
.lg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--lg-grid-card-min-width), 1fr));
    gap: var(--lg-space-18); margin-bottom: var(--lg-space-20);
}

/* ─── Card Component (ref: DB-3.4) ─────────────────────────────── */
.lg-card {
    position: relative;
    padding: var(--lg-space-22) var(--lg-space-22) var(--lg-space-18);
    border-radius: var(--lg-radius-lg);
    /* DB-3.3: Card Z1 — opacidad 0.45, blur regular (30px) */
    background: var(--lg-glass-surface-45);
    -webkit-backdrop-filter: var(--lg-glass-regular);
    backdrop-filter: var(--lg-glass-regular);
    border: var(--lg-hairline);
    box-shadow: var(--lg-shadow-sm);
    cursor: pointer;
    display: flex; flex-direction: column; gap: var(--lg-space-16);
    isolation: isolate;
    transition:
        transform var(--lg-duration-fast) var(--lg-spring-bounce),
        box-shadow var(--lg-duration-fast) var(--lg-spring-smooth),
        background var(--lg-duration-fast) var(--lg-spring-smooth),
        border-color var(--lg-duration-fast) var(--lg-spring-smooth);
    overflow: hidden;
    animation: lgCardIn var(--lg-duration-modal) var(--lg-spring) backwards;
}
.lg-card > .lg-glass-refract, .lg-card > .lg-glass-specular { border-radius: inherit; }
.lg-card::before {
    content: ''; position: absolute; inset: 0;
    /* Highlight diagonal sutil — reducido de 0.18/0.55 para evitar efecto lechoso en esquinas */
    background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.01) 55%, transparent 75%);
    opacity: 0.35; pointer-events: none; z-index: 1;
    border-radius: inherit;
}
.lg-card::after { content: ''; display: none; }
.lg-card:hover {
    /* Hover premium: lift reducido, brightening via opacidad, sin filter:brightness */
    transform: translateY(-3px) scale(1.006);
    background: var(--lg-glass-surface-55);
    border: var(--lg-hairline-strong);
    box-shadow: var(--lg-shadow-md);
}
.lg-card:active { transform: translateY(0) scale(0.995); transition-duration: var(--lg-duration-instant); }
.lg-card:focus-visible { outline: none; box-shadow: var(--lg-shadow-md), var(--lg-focus-ring-soft); }
@keyframes lgCardIn {
    from { opacity: 0; transform: translateY(var(--lg-space-24)) scale(0.95); }
    to   { opacity: 1; transform: none; }
}
.lg-card:nth-child(1)  { animation-delay: calc(0 * var(--lg-stagger-step)); }
.lg-card:nth-child(2)  { animation-delay: calc(1 * var(--lg-stagger-step)); }
.lg-card:nth-child(3)  { animation-delay: calc(2 * var(--lg-stagger-step)); }
.lg-card:nth-child(4)  { animation-delay: calc(3 * var(--lg-stagger-step)); }
.lg-card:nth-child(5)  { animation-delay: calc(4 * var(--lg-stagger-step)); }
.lg-card:nth-child(6)  { animation-delay: calc(5 * var(--lg-stagger-step)); }
.lg-card:nth-child(7)  { animation-delay: calc(6 * var(--lg-stagger-step)); }
.lg-card:nth-child(8)  { animation-delay: calc(7 * var(--lg-stagger-step)); }
.lg-card:nth-child(n+9) { animation-delay: var(--lg-stagger-cap); }

/* ─── Card Sub-components ──────────────────────────────────────── */
.lg-card-header { display: flex; align-items: center; gap: var(--lg-space-14); margin-bottom: 0; position: relative; z-index: 2; }
.lg-card-avatar {
    width: var(--lg-space-50); height: var(--lg-space-50);
    border-radius: var(--lg-radius-md);
    background: var(--lg-accent-soft);
    -webkit-backdrop-filter: var(--lg-glass-light); backdrop-filter: var(--lg-glass-light);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--lg-type-caption); font-weight: 700;
    color: var(--lg-accent); letter-spacing: 0.02em; text-transform: uppercase;
    flex-shrink: 0; border: var(--lg-hairline);
    box-shadow: var(--lg-shadow-xs), var(--lg-inner-light);
    position: relative; overflow: hidden;
}
.lg-card-avatar::before { content: none; }
.lg-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--lg-space-3); position: relative; z-index: 2; }
.lg-card-ref { font-size: var(--lg-type-title-sm); font-weight: 700; color: var(--lg-text-primary); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-card-brand { font-size: var(--lg-type-body-sm); font-weight: 500; color: var(--lg-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Status Indicators ────────────────────────────────────────── */
.lg-status {
    width: var(--lg-space-30); height: var(--lg-space-30);
    border-radius: var(--lg-radius-circle);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--lg-type-micro); font-weight: 700; flex-shrink: 0;
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    border: 0.5px solid rgba(255,255,255,0.40);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.20) inset, 0 2px 8px rgba(0,0,0,0.08);
    position: relative; z-index: 2; overflow: hidden;
}
.lg-status::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.25), transparent 60%);
    opacity: 0.6; pointer-events: none; animation: glowPulse 2.5s ease-in-out infinite;
}
.lg-status-ok {
    background: var(--lg-success-soft); color: var(--lg-success);
    box-shadow: var(--lg-shadow-xs), var(--lg-glow-success), var(--lg-inner-light);
    animation: lgStatusPulse 3s var(--lg-spring-gentle) infinite;
}
@keyframes lgStatusPulse {
    0%, 100% { box-shadow: var(--lg-shadow-xs), var(--lg-glow-success), var(--lg-inner-light); }
    50%      { box-shadow: var(--lg-shadow-xs), 0 0 0 2px rgba(52,199,89,0.08), 0 0 16px rgba(52,199,89,0.06), var(--lg-inner-light); }
}
.lg-status-pending { background: var(--lg-warning-soft); color: var(--lg-warning); box-shadow: var(--lg-shadow-xs), var(--lg-inner-light); }

/* ─── Card Chips, Actions, Comments ────────────────────────────── */
.lg-card-chips { display: flex; flex-wrap: wrap; gap: var(--lg-space-6); position: relative; z-index: 2; }
.lg-card-actions {
    display: flex; gap: var(--lg-space-8); padding-top: var(--lg-space-14);
    border-top: var(--lg-hairline-light); margin-top: auto;
    opacity: 0; transform: translateY(var(--lg-space-8));
    transition: opacity var(--lg-duration-fast) var(--lg-spring-gentle), transform var(--lg-duration-fast) var(--lg-spring-smooth);
    position: relative; z-index: 2;
}
.lg-card:hover .lg-card-actions { opacity: 1; transform: none; }
@media (hover: none) { .lg-card-actions { opacity: 1; transform: none; } }
.lg-card-comments {
    font-size: var(--lg-type-body-sm); color: var(--lg-text-tertiary);
    line-height: 1.4; margin-top: var(--lg-space-8);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    position: relative; z-index: 2;
}

/* ─── Stats & Pagination ───────────────────────────────────────── */
.lg-stats { text-align: center; font-size: var(--lg-type-body-sm); font-weight: 500; color: var(--lg-text-tertiary); padding: var(--lg-space-14); }
.lg-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: var(--lg-space-4); padding: var(--lg-space-8) var(--lg-space-16) var(--lg-space-16);
}
.lg-pagination a, .lg-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--lg-space-38); height: var(--lg-space-38);
    border-radius: var(--lg-radius-sm); font-size: var(--lg-type-caption); font-weight: 500;
    text-decoration: none; color: var(--lg-text-tertiary);
    transition: background var(--lg-duration-fast) var(--lg-spring-smooth), color var(--lg-duration-fast) var(--lg-spring-smooth);
}
.lg-pagination a:hover { background: var(--lg-accent-soft); color: var(--lg-accent); }
.lg-pagination a:focus-visible { outline: none; box-shadow: var(--lg-focus-ring); border-radius: var(--lg-radius-full); }
.lg-pagination .active { background: var(--lg-accent); color: var(--lg-text-on-accent); font-weight: 700; box-shadow: var(--lg-shadow-sm), var(--lg-inner-light), var(--lg-glow-accent); }
.lg-pagination .disabled { opacity: 0.25; pointer-events: none; }

/* ─── Delete Confirmation Modal ────────────────────────────────── */
.lg-modal-delete { max-width: var(--lg-modal-delete-max-width); transition: transform var(--lg-duration-normal) var(--lg-spring); }
.lg-modal-delete-body { text-align: center; padding: var(--lg-space-40) var(--lg-space-28); }
.lg-delete-icon {
    width: var(--lg-space-64); height: var(--lg-space-64);
    border-radius: var(--lg-radius-circle); background: var(--lg-danger-soft);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--lg-space-20); font-size: var(--lg-icon-size-lg);
    color: var(--lg-danger); border: var(--lg-hairline);
}
.lg-delete-title { font-size: var(--lg-type-title-sm); color: var(--lg-text-primary); margin: 0; font-weight: 600; }
.lg-delete-subtitle { font-size: var(--lg-type-body-sm); color: var(--lg-text-tertiary); margin: var(--lg-space-10) 0 0; }

/* ─── Toast Notifications ──────────────────────────────────────── */
.lg-toast {
    position: fixed; bottom: var(--lg-space-36); left: 50%;
    transform: translateX(-50%); z-index: 10001;
    display: flex; flex-direction: column; gap: var(--lg-space-10); align-items: center;
}
.lg-toast-item {
    padding: var(--lg-space-16) var(--lg-space-30); border-radius: var(--lg-radius-pill);
    font-size: var(--lg-type-body-sm); font-weight: 600; color: var(--lg-text-on-accent);
    box-shadow: var(--lg-shadow-lg);
    animation: lgToastIn var(--lg-duration-modal) var(--lg-spring-bounce);
    -webkit-backdrop-filter: var(--lg-glass-toast); backdrop-filter: var(--lg-glass-toast);
    white-space: nowrap; border: var(--lg-hairline-light);
    position: relative; overflow: hidden;
    transition: opacity var(--lg-duration-normal) var(--lg-spring-gentle), transform var(--lg-duration-normal) var(--lg-spring-gentle);
}
.lg-toast-item::after { content: ''; position: absolute; inset: 0; background: var(--lg-btn-specular); pointer-events: none; }
.lg-toast-item.success { background: var(--lg-toast-success-bg); }
.lg-toast-item.error   { background: var(--lg-toast-error-bg); }
.lg-toast-item.info    { background: var(--lg-toast-info-bg); }
@keyframes lgToastIn {
    from { opacity: 0; transform: translateY(var(--lg-space-24)) scale(0.85); }
    to   { opacity: 1; transform: none; }
}

/* ─── View Value (readonly display in modals) ──────────────────── */
.lg-view-value { padding: 0; font-size: var(--lg-type-body); color: var(--lg-text-primary); min-height: var(--lg-space-22); display: flex; align-items: center; font-weight: 500; }
.lg-view-value.empty { color: var(--lg-text-quaternary); font-style: italic; font-weight: 400; }
.lg-field .unit { font-weight: 500; color: var(--lg-text-quaternary); text-transform: none; letter-spacing: 0; }

/* ─── Modal Title Formatting Spans ─────────────────────────────── */
.lg-modal-title-ref   { font-weight: 800; color: var(--lg-text-primary); }
.lg-modal-title-brand { font-weight: 700; color: var(--lg-text-secondary); text-transform: uppercase; }
.lg-modal-title-sep   { color: var(--lg-text-quaternary); font-weight: 600; }
.lg-modal-title-tn    { font-weight: 800; color: var(--lg-accent); }
.lg-modal-title-model { color: var(--lg-text-tertiary); font-style: italic; font-weight: 500; }
.lg-modal-title-maq   { font-weight: 800; color: var(--lg-accent); }

/* ─── Modal Shimmer Layer ──────────────────────────────────────── */
.lg-modal::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 40%);
    opacity: 0.6; pointer-events: none; z-index: 1;
    animation: shimmer 6s linear infinite;
}

/* ─── Button Extensions (specular + shimmer + hover glow) ──────── */
.lg-btn::after { content: ''; position: absolute; inset: 0; background: var(--lg-btn-specular); pointer-events: none; border-radius: inherit; }
.lg-btn:active { transform: scale(0.94) !important; }
.lg-btn-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 50%);
    opacity: 0.6; pointer-events: none; animation: shimmer 3s linear infinite;
}
.lg-btn-primary:hover {
    box-shadow: var(--lg-shadow-md), var(--lg-glow-accent);
    transform: translateY(-2px) scale(1.02); filter: brightness(1.12) contrast(1.05);
}
.lg-btn-outline::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%);
    opacity: 0.6; pointer-events: none; animation: shimmer 4s linear infinite;
}
.lg-btn-outline:hover {
    background: rgba(255,255,255,0.16); transform: translateY(-2px) scale(1.02);
    border: 0.5px solid rgba(255,255,255,0.75);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.50) inset, 0 4px 16px rgba(0,0,0,0.14);
    filter: brightness(1.14) contrast(1.06);
}
.lg-btn-danger:hover { box-shadow: var(--lg-shadow-md), var(--lg-inner-light); transform: translateY(var(--lg-shift-up-1)); filter: brightness(1.06); }
.lg-btn-icon-danger:hover { background: var(--lg-danger-soft); color: var(--lg-danger); border: var(--lg-hairline); }

/* ─── Glass Layers (ref: DB-3.1) ───────────────────────────────── */
.lg-glass-refract {
    position: absolute; inset: 0; z-index: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    filter: var(--lg-distort-filter); isolation: isolate;
    pointer-events: none; border-radius: inherit;
}
.lg-glass-refract-strong {
    position: absolute; inset: 0; z-index: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    filter: var(--lg-distort-strong); isolation: isolate;
    pointer-events: none; border-radius: inherit;
}
.lg-glass-specular {
    position: absolute; inset: 0; z-index: 1; border-radius: inherit;
    overflow: hidden; pointer-events: none; box-shadow: var(--lg-inner-light);
}

/* ─── Keyframes ────────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { transform: translateX(-100%) translateY(-100%) rotate(0deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(0deg); }
}
@keyframes glowPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.85; } }
::selection { background: var(--lg-selection-bg); }

/* ─── CRUD Page Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
    .lg-page { padding: var(--lg-space-8) var(--lg-space-10) 0; }
    .lg-grid { grid-template-columns: 1fr; gap: var(--lg-space-10); }
    .lg-card { padding: var(--lg-space-14); }
    .lg-card-actions { opacity: 1; transform: none; }
    .lg-card-avatar { width: var(--lg-space-42); height: var(--lg-space-42); }
    /* section-rail compacto en móvil — sigue glass pero más bajo */
    .lg-section-rail { height: var(--lg-space-28); margin-bottom: var(--lg-space-6); }
}
@media (min-width: 769px) {
    .lg-overlay { align-items: center; }
    .lg-modal {
        border-radius: var(--lg-radius-xl); max-height: 88vh;
        transform: translateY(var(--lg-space-16)) scale(0.97); border: var(--lg-hairline);
    }
    .lg-overlay.show .lg-modal { transform: none; }
    .lg-grab-handle { display: none; }
}
@media (min-width: 1400px) {
    .lg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg-modal { max-width: var(--lg-modal-max-width-xl); }
}
@media (min-width: 1800px) {
    .lg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ─── @supports fallback — CRUD Page ───────────────────────────── */
@supports not (backdrop-filter: blur(1px)) {
    .lg-canvas::after { background: var(--lg-fallback-canvas); }
    .lg-card { background: var(--lg-fallback-surface); border: var(--lg-hairline); }
    .lg-card-avatar { background: var(--lg-accent-soft); }
    .lg-status { border: var(--lg-hairline-light); }
    .lg-toast-item.success { background: var(--lg-toast-success-bg); }
    .lg-toast-item.error   { background: var(--lg-toast-error-bg); }
    .lg-toast-item.info    { background: var(--lg-toast-info-bg); }
    .lg-glass-refract, .lg-glass-refract-strong, .lg-glass-specular { display: none; }
}

/* ─── Reduced Motion — CRUD Page ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lg-card, .lg-card::before, .lg-modal::before,
    .lg-btn-primary::before, .lg-btn-outline::before,
    .lg-toast-item, .lg-status::before {
        animation: none !important;
    }
}

/* ─── Dark Mode — CRUD Page Components ─────────────────────────── */
[data-theme="dark"] .lg-canvas { background-color: var(--lg-bg); }
[data-theme="dark"] .lg-card {
    background: rgba(255,255,255,0.07); border: var(--lg-hairline);
    box-shadow: var(--lg-shadow-sm);
}
[data-theme="dark"] .lg-card:hover {
    background: rgba(255,255,255,0.10); box-shadow: var(--lg-shadow-md);
    border: var(--lg-hairline-strong);
}
[data-theme="dark"] .lg-card::before { opacity: 0.20; }
[data-theme="dark"] .lg-card-ref { color: var(--lg-text-primary); }
[data-theme="dark"] .lg-card-brand { color: var(--lg-text-secondary); }
[data-theme="dark"] .lg-card-comments { color: var(--lg-text-tertiary); }
[data-theme="dark"] .lg-stats { color: var(--lg-text-tertiary); }
[data-theme="dark"] .lg-pagination a { color: var(--lg-text-secondary); }
[data-theme="dark"] .lg-pagination a:hover { background: rgba(255,255,255,0.08); color: var(--lg-text-primary); }
[data-theme="dark"] .lg-pagination .active { background: var(--lg-accent); color: var(--lg-text-on-accent); }
[data-theme="dark"] .lg-modal-title-ref { color: var(--lg-text-primary); }
[data-theme="dark"] .lg-modal-title-brand { color: var(--lg-text-secondary); }
[data-theme="dark"] .lg-modal-title-sep { color: var(--lg-text-tertiary); }
[data-theme="dark"] .lg-modal-title-tn { color: var(--lg-accent-light); }
[data-theme="dark"] .lg-view-value { color: var(--lg-text-primary); }
[data-theme="dark"] .lg-view-value.empty { color: var(--lg-text-tertiary); }
[data-theme="dark"] .lg-delete-icon { background: rgba(255,59,48,0.18); color: var(--lg-danger-light); }
[data-theme="dark"] .lg-delete-title { color: var(--lg-text-primary); }
[data-theme="dark"] .lg-delete-subtitle { color: var(--lg-text-secondary); }