/* ==========================================================================
   TecsaS3 — Tricorder Futuristic Medical UI · custom.css (2026)
   Arquitectura: ITCSS + CSS Cascade Layers + Container Queries + Fluid type
   Accesibilidad: WCAG 2.2 AA · Reduced motion · Forced colors · Focus visible
   Responsividad: Mobile-first · Tablet · Desktop · 4K · Ultrawide
   --------------------------------------------------------------------------
   @layer order (la última gana ante igual especificidad):
      reset       → normalize/box-sizing
      tokens      → design tokens (vars CSS) — all palettes inlined below
      base        → html/body/typography
      layout      → wrapper / sidebar / content / footer offsets
      components  → cards, buttons, forms, tables, modals, badges, etc.
      tricorder   → tema futurista médico (cards/HCE específicos)
      modern-ux   → dashboard-modern-ux.css (namespaced Phase 2)
      platform    → platform_admin (aislado, nunca debe cargar aquí)
      utilities   → helpers
      overrides   → Bootstrap fine-tuning + retrocompat
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, tricorder, modern-ux, wizard, platform, utilities, overrides;

/* ==========================================================================
   @layer reset
   ========================================================================== */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
    button { font: inherit; }
    :where(table) { border-collapse: collapse; }
}

/* ==========================================================================
   @layer tokens — Sistema de diseño 2026
   ========================================================================== */
@layer tokens {
    :root {
        /* ---------- Paleta TecsaS3 NUEVA (ui-ux-pro-max spec, no deprecated) ---------- */
        --tecsa-primary: #0891B2;
        --tecsa-secondary: #22D3EE;
        --tecsa-cta: #22C55E;
        --tecsa-bg: #F0FDFA;
        --tecsa-surface: #FFFFFF;
        --tecsa-text: #134E4A;
        --tecsa-muted: #475569;
        --tecsa-border: #E2E8F0;
        --tecsa-text-legacy: #2c3e50;

        /* ---------- @deprecated — Aliases legacy (Phase 10) ----------
         * DO NOT use in new code. Migrate to --tecsa-* tokens.
         * Removal scheduled: v2.0 (Q2 2027).
         *
         * Phase 12 status (2026-06-25):
         *   - Migration complete: 0 var(--*-color) refs in app-owned code.
         *   - Back-compat aliases collapsed to hex in templates/CSS.
         *   - Readiness verified by scripts/verify_v2_readiness.py.
         *   - Removal plan: design-system/MASTER.md §13.
         *
         * Tracking: docs/palette-migration-plan.md
         */
        --primary-color-rgb: 166, 218, 247;
        --secondary-color-rgb: 108, 175, 221;
        --tertiary-color-rgb: 69, 139, 186;
        --quaternary-color-rgb: 19, 77, 109;
        --quinternary-color-rgb: 4, 42, 58;
        /* Legacy solid hex aliases — keep pointing to legacy values for
         * back-compat until v2.0 removal. */
        --primary-color: #A6DAF7;
        --secondary-color: #6CAFDD;
        --tertiary-color: #458BBA;
        --quaternary-color: #134D6D;
        --quinternary-color: #042A3A;

        /* Back-compat aliases mapping new --tecsa-* to legacy names.
         * Used by templates still referencing var(--tecsa-primary) etc. */
        --tecsa-deep: #134D6D;
        --tecsa-deepest: #042A3A;

        /* ---------- Paleta Tricorder (tema principal 2026) ---------- */
        --tricorder-primary: #00E5FF;       /* cyan principal */
        --tricorder-secondary: #00B8D4;     /* cyan medio */
        --tricorder-accent: #1DE9B6;        /* verde mineral */
        --tricorder-warn: #FFD740;          /* ámbar advertencia */
        --tricorder-danger: #FF5252;        /* rojo alerta */
        --tricorder-success: #00BFA5;       /* éxito */
        --tricorder-info: #40C4FF;          /* info */
        --tricorder-glow: #00E5FF;
        --tricorder-text: #E0F7FA;          /* texto principal sobre oscuro */
        --tricorder-muted: #A0C8D8;         /* texto secundario */

        /* Superficies (escala glassmorphism / depth) */
        --tricorder-bg: #050E1A;            /* fondo deep-space */
        --tricorder-surface-0: #0A1628;     /* base superficie */
        --tricorder-surface-1: rgba(15, 30, 50, 0.85);
        --tricorder-surface-2: rgba(20, 40, 60, 0.9);
        --tricorder-surface-3: rgba(30, 55, 80, 0.92);
        --tricorder-dark: #0A1628;
        --tricorder-panel: rgba(0, 229, 255, 0.08);
        --tricorder-border: rgba(0, 229, 255, 0.3);
        --tricorder-border-soft: rgba(0, 229, 255, 0.15);
        --tricorder-scan-line: rgba(0, 229, 255, 0.1);
        --tricorder-card-bg: linear-gradient(145deg, rgba(10, 22, 40, 0.95) 0%, rgba(20, 40, 60, 0.9) 100%);

        /* ---------- Glow / shadows ---------- */
        --glow-primary: 0 0 20px rgba(0, 229, 255, 0.5);
        --glow-secondary: 0 0 30px rgba(0, 229, 255, 0.3);
        --glow-accent: 0 0 15px rgba(29, 233, 182, 0.5);
        --glow-text-accent: 0 0 15px rgba(29, 233, 182, 0.5);
        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18);
        --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.28);
        --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.4);
        --shadow-glow: 0 8px 32px rgba(0, 229, 255, 0.18);

        /* ---------- Phase 8 inlined tokens (TecsaS3 palette — previously in standalone token file) ---------- */
        --tecsa-primary: #0891B2;
        --tecsa-secondary: #22D3EE;
        --tecsa-cta: #22C55E;
        --tecsa-bg: #F0FDFA;
        --tecsa-surface: #FFFFFF;
        --tecsa-text: #134E4A;
        --tecsa-muted: #475569;
        --tecsa-border: #E2E8F0;
        --tecsa-text-legacy: #2c3e50;
        --tecsa-deep: #134D6D;
        --tecsa-deepest: #042A3A;

        /* ---------- Tipografía fluida ---------- */
        /* --font-base: identidad tipográfica de la app. JetBrains Mono como
           base (datos/UI), Inter como secundaria armónica de respaldo. */
        --font-base: 'JetBrains Mono', 'Inter', 'Nunito', system-ui, sans-serif;
        --font-sans: 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
        --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
        --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', 'Courier New', monospace;

        /* clamp(min, fluid, max) — escala fluida */
        --fs-2xs: clamp(0.6875rem, 0.66rem + 0.15vw, 0.75rem);   /* 11→12 */
        --fs-xs:  clamp(0.75rem,  0.72rem + 0.18vw, 0.8125rem);  /* 12→13 */
        --fs-sm:  clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);   /* 13→14 */
        --fs-base: clamp(0.9375rem, 0.9rem + 0.22vw, 1rem);      /* 15→16 */
        --fs-md:  clamp(1rem,    0.95rem + 0.28vw, 1.125rem);    /* 16→18 */
        --fs-lg:  clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem);  /* 18→21 */
        --fs-xl:  clamp(1.375rem, 1.25rem + 0.62vw, 1.75rem);    /* 22→28 */
        --fs-2xl: clamp(1.75rem,  1.5rem + 1.2vw,  2.5rem);      /* 28→40 */
        --fs-3xl: clamp(2.25rem,  1.85rem + 2vw,   3.5rem);      /* 36→56 */

        --lh-tight: 1.2;
        --lh-snug: 1.35;
        --lh-normal: 1.55;
        --lh-relaxed: 1.7;

        --tracking-tight: -0.01em;
        --tracking-normal: 0;
        --tracking-wide: 0.04em;
        --tracking-wider: 0.08em;
        --tracking-widest: 0.14em;

        /* ---------- Espaciado fluido ---------- */
        --space-3xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.1875rem);
        --space-2xs: clamp(0.25rem, 0.22rem + 0.1vw, 0.375rem);
        --space-xs:  clamp(0.5rem,  0.45rem + 0.2vw, 0.625rem);
        --space-sm:  clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
        --space-md:  clamp(1rem,    0.9rem + 0.4vw,  1.5rem);
        --space-lg:  clamp(1.5rem,  1.3rem + 0.8vw,  2.25rem);
        --space-xl:  clamp(2rem,    1.7rem + 1.2vw,  3rem);
        --space-2xl: clamp(3rem,    2.5rem + 2vw,    4.5rem);
        --space-3xl: clamp(4rem,    3rem + 3vw,      6rem);

        /* ---------- Layout ---------- */
        --sidebar-width: clamp(240px, 18vw, 300px);
        --sidebar-gap: clamp(16px, 1.5vw, 30px);
        /* Alias al token canónico del header fijo definido en theme-tokens.css
           (90px desktop / 70px <=991.98px). Los valores viejos 64/56 no
           correspondían a la altura real renderizada y dejaban el toolbar
           sticky desalineado. */
        --navbar-height: var(--app-header-height, 90px);
        --navbar-height-mobile: var(--app-header-height, 90px);
        --footer-height: 48px;
        --content-max-width: clamp(1100px, 92vw, 1600px);
        --content-padding-inline: clamp(0.875rem, 1vw + 0.5rem, 1.75rem);

        /* ---------- Radios ---------- */
        --radius-xs: 4px;
        --radius-sm: 6px;
        --radius-md: 10px;
        --radius-lg: 14px;
        --radius-xl: 20px;
        --radius-2xl: 28px;
        --radius-full: 999px;

        /* ---------- Motion tokens ---------- */
        --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
        --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
        --duration-fast: 150ms;
        --duration-base: 240ms;
        --duration-slow: 400ms;
        --pulse-duration: 2.4s;
        --scan-duration: 3.5s;

        /* ---------- Z-index scale ---------- */
        --z-base: 1;
        --z-dropdown: 1000;
        --z-sticky: 1020;
        --z-navbar: 1030;
        --z-overlay: 1040;
        --z-modal: 1050;
        --z-popover: 1060;
        --z-tooltip: 1070;
        --z-toast: 1080;
        --z-spinner: 9999;

        /* ---------- Tamaños táctiles mínimos (WCAG 2.5.5) ---------- */
        --touch-target: 44px;

        color-scheme: light;
    }

    /* Refuerzo cuando el dashboard se marca como tricorder */
    [data-app-theme="tricorder"] {
        --color-bg: var(--tricorder-bg);
        --color-fg: var(--tricorder-text);
        --color-fg-muted: var(--tricorder-muted);
        --color-accent: var(--tricorder-primary);
        --color-border: var(--tricorder-border);
    }
}

/* ==========================================================================
   @layer base
   ========================================================================== */
@layer base {
    html {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    body {
        height: 100%;
        margin: 0;
        min-height: 100vh;
        min-height: 100dvh;
        font-family: var(--font-base);
        font-size: var(--fs-base);
        line-height: var(--lh-normal);
        color: #2c3e50;
        background: linear-gradient(135deg, rgba(166, 218, 247, 0.1) 0%, rgba(108, 175, 221, 0.2) 50%, rgba(69, 139, 186, 0.3) 100%);
        background-attachment: fixed;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    /* Modo Tricorder global: cuando data-app-theme="tricorder" en <html> */
    html[data-app-theme="tricorder"] body {
        color: var(--tricorder-text);
        background:
            radial-gradient(ellipse at top, rgba(0, 229, 255, 0.06) 0%, transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(29, 233, 182, 0.04) 0%, transparent 60%),
            linear-gradient(180deg, #050E1A 0%, #0A1628 60%, #061322 100%);
        background-attachment: fixed;
    }

    /* Grid sutil de fondo (HUD) */
    html[data-app-theme="tricorder"] body::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background-image:
            linear-gradient(rgba(0, 229, 255, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 75%);
    }

    body { padding-top: var(--app-header-height, 90px); }
    body.navbar-is-collapsed { padding-top: 0 !important; }
    @media (max-width: 991.98px) { body { padding-top: var(--app-header-height, 70px); } }

    /* Tipografía base */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
        line-height: var(--lh-snug);
        letter-spacing: var(--tracking-tight);
        margin: 0 0 var(--space-sm);
    }
    h1 { font-size: var(--fs-2xl); font-weight: 700; }
    h2 { font-size: var(--fs-xl); font-weight: 700; }
    h3 { font-size: var(--fs-lg); font-weight: 600; }
    h4 { font-size: var(--fs-md); font-weight: 600; }
    h5 { font-size: var(--fs-base); font-weight: 600; }
    h6 { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); }

    p { margin: 0 0 var(--space-sm); }

    /* Numerales tabulares por defecto en datos */
    [data-numeric], .numeric, .num, .tabular-nums {
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum' 1;
    }

    /* Selección */
    ::selection {
        background: rgba(0, 229, 255, 0.35);
        color: #fff;
    }

    /* Scrollbar tricorder (WebKit) */
    html[data-app-theme="tricorder"] ::-webkit-scrollbar { width: 12px; height: 12px; }
    html[data-app-theme="tricorder"] ::-webkit-scrollbar-track { background: rgba(10, 22, 40, 0.5); }
    html[data-app-theme="tricorder"] ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--tricorder-secondary), var(--tricorder-primary));
        border-radius: var(--radius-full);
        border: 2px solid rgba(10, 22, 40, 0.8);
    }
    html[data-app-theme="tricorder"] ::-webkit-scrollbar-thumb:hover {
        background: var(--tricorder-primary);
    }

    /* Focus visible global accesible */
    :focus-visible {
        outline: 2px solid var(--tricorder-primary);
        outline-offset: 3px;
        border-radius: var(--radius-sm);
    }
    :focus:not(:focus-visible) { outline: none; }

    /* Skip link */
    .skip-link, a.visually-hidden-focusable {
        position: absolute;
        top: -100px;
        left: 1rem;
        z-index: var(--z-toast);
        padding: 0.75rem 1.25rem;
        background: var(--tricorder-primary);
        color: var(--tricorder-dark);
        font-weight: 700;
        border-radius: var(--radius-md);
        text-decoration: none;
        box-shadow: var(--shadow-3);
        transition: top var(--duration-fast) var(--ease-out-quart);
    }
    .skip-link:focus, a.visually-hidden-focusable:focus { top: 1rem; }

    /* Enlaces base */
    a {
        color: var(--tecsa-primary);
        text-decoration: none;
        transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
        text-underline-offset: 0.2em;
    }
    a:hover { color: #134D6D; text-decoration: underline; }
    a:focus { outline: 2px solid var(--tecsa-primary); outline-offset: 2px; }

    html[data-app-theme="tricorder"] a {
        color: var(--tricorder-primary);
    }
    html[data-app-theme="tricorder"] a:hover {
        color: var(--tricorder-accent);
        text-shadow: var(--glow-text-accent);
    }
}

/* ==========================================================================
   @layer layout — Wrapper / Sidebar offsets / Content
   ========================================================================== */
@layer layout {
    /* Contrato de scroll único: el ÚNICO scroller de la app es body (inline
       en base.html). Estos contenedores nunca deben convertirse en scroll
       containers: overflow-x hidden + overflow-y visible computa
       overflow-y:auto (css-overflow §3.1) y genera el segundo scrollbar
       derecho. clip recorta igual en X sin arrastrar el eje Y; se declara
       hidden antes como fallback para navegadores sin overflow:clip. */
    #wrapper {
        display: flex;
        width: 100%;
        min-height: calc(100vh - var(--app-header-height, 90px));
        min-height: calc(100dvh - var(--app-header-height, 90px));
        position: relative;
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: visible;
        z-index: var(--z-base);
    }
    #wrapper .container { padding: 0; max-width: 100%; }

    #main-content {
        flex: 1 1 auto;
        min-width: 0;            /* clave para que flex no overflowee con tablas anchas */
        width: 100%;
        margin-left: calc(var(--sidebar-width) + var(--sidebar-gap));
        transition: margin-left var(--duration-base) var(--ease-spring);
        overflow-x: hidden;
        overflow-x: clip;        /* sin esto overflow-y computa a auto (scroll interno) */
    }

    #content-wrapper {
        width: 100%;
        max-width: var(--content-max-width);
        margin-inline: auto;
        padding: var(--space-md) var(--content-padding-inline);
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: visible;
    }

    #content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: visible;
    }

    #content .container,
    #content .container-fluid { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
    #content .row { margin-left: 0; margin-right: 0; max-width: 100%; }
    #content .col,
    #content [class*="col-"] { padding-left: 15px; padding-right: 15px; }

    /* ===== Dashboard shell (definido en el nuevo dashboard/base.html) ===== */
    .dashboard-shell {
        position: relative;
        z-index: var(--z-base);
        display: flex;
        flex-direction: column;
        /* gap: var(--space-md); */
        width: 100%;
        max-width: var(--content-max-width);
        margin-inline: auto;
        padding-block: var(--space-sm);
        container-type: inline-size;
        container-name: dashboard;
    }

    .dashboard-toolbar {
        position: sticky;
        top: var(--navbar-height);
        z-index: 5;
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        background: linear-gradient(180deg, rgba(10, 22, 40, 0.85) 0%, rgba(10, 22, 40, 0.6) 100%);
        border: 1px solid var(--tricorder-border-soft);
        border-radius: var(--radius-lg);
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-sm);
    }
    @supports not (backdrop-filter: blur(12px)) {
        .dashboard-toolbar { background: rgba(10, 22, 40, 0.95); }
    }
    /* Estado legacy sidebar.js: sin navbar visible el toolbar sube a top:0. */
    body.navbar-is-collapsed .dashboard-toolbar { top: 0; }
    .dashboard-toolbar__inner {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm) var(--space-md);
        align-items: center;
        justify-content: space-between;
    }
    .dashboard-toolbar__title {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        flex: 1 1 auto;
        min-width: 0;
    }
    .dashboard-toolbar__indicator {
        flex-shrink: 0;
        width: 10px;
        height: 10px;
        border-radius: var(--radius-full);
        background: var(--tricorder-accent);
        box-shadow: 0 0 0 0 rgba(29, 233, 182, 0.7);
        animation: tricorder-pulse-led 2s var(--ease-out-quart) infinite;
    }
    .dashboard-toolbar__heading {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--fs-lg);
        font-weight: 600;
        color: var(--tricorder-text);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
    }
    .dashboard-toolbar__subtitle {
        margin: 0.25rem 0 0;
        font-size: var(--fs-xs);
        color: var(--tricorder-muted);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
    }

    @keyframes tricorder-pulse-led {
        0%   { box-shadow: 0 0 0 0 rgba(29, 233, 182, 0.6); }
        70%  { box-shadow: 0 0 0 10px rgba(29, 233, 182, 0); }
        100% { box-shadow: 0 0 0 0 rgba(29, 233, 182, 0); }
    }

    /* Layout dashboard responsive con grid + container queries */
    .dashboard-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-md);
    }
    .dashboard-main { min-width: 0; outline: none; }
    .dashboard-main:focus { outline: none; }

    /* En contenedor ancho, mostrar aside derecho */
    @container dashboard (min-width: 1100px) {
        .dashboard-layout:has(> [class*="dashboard-aside"]) {
            grid-template-columns: minmax(0, 1fr) clamp(280px, 22%, 360px);
        }
    }

    /* ===== Responsive: Layout principal ===== */
    /* Ultra-wide / 4K */
    @media (min-width: 1920px) {
        :root {
            --sidebar-width: clamp(280px, 16vw, 340px);
            --content-max-width: clamp(1400px, 88vw, 2000px);
        }
    }
    @media (min-width: 2560px) {
        :root {
            --content-max-width: 2400px;
            --content-padding-inline: clamp(1.5rem, 2vw, 3rem);
        }
        body { font-size: 17px; }
    }

    /* Desktop estándar */
    @media (min-width: 1200px) {
        #main-content { margin-left: calc(var(--sidebar-width) + var(--sidebar-gap)); }
    }

    /* Tablet (768–1199px) */
    @media (max-width: 1199.98px) and (min-width: 768px) {
        :root { --sidebar-width: 240px; --sidebar-gap: 24px; }
        #main-content { margin-left: calc(var(--sidebar-width) + var(--sidebar-gap)); }
        #content-wrapper { padding: var(--space-md) clamp(0.875rem, 1.5vw, 1.5rem); }
    }

    /* Mobile (<768px) — sidebar oculto/overlay */
    @media (max-width: 767.98px) {
        html { overflow-y: auto; }
        body { overflow-y: hidden; padding-top: var(--navbar-height-mobile); }
        #main-content { margin-left: 0 !important; width: 100%; }
        #content-wrapper { padding: var(--space-sm) var(--space-xs); }
        #wrapper { flex-direction: column; overflow-y: visible; }
        .dashboard-shell { padding-inline: 0; }
        .dashboard-toolbar { position: static; padding: var(--space-sm); }
    }

    /* Very small phones */
    @media (max-width: 380px) {
        :root { --content-padding-inline: 0.625rem; }
    }

    /* Landscape phones */
    @media (max-height: 480px) and (orientation: landscape) {
        body { padding-top: var(--app-header-height, 70px); }
        .dashboard-toolbar { position: static; }
    }
}

/* ==========================================================================
   @layer components — Tarjetas, botones, formularios, tablas, modales, etc.
   ========================================================================== */
@layer components {

    /* ----- Cards (genéricas, con look tricorder cuando el tema está activo) ----- */
    .card {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: var(--shadow-2);
        border-radius: var(--radius-lg);
        border: 1px solid rgba(166, 218, 247, 0.3);
        overflow: hidden;
        transition:
            transform var(--duration-base) var(--ease-spring),
            box-shadow var(--duration-base) ease,
            border-color var(--duration-base) ease;
    }
    .card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-3);
    }
    .card-body {
        padding: var(--space-md);
        background-color: transparent;
        color: #2c3e50;
        border: none;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
    .card .card-header {
        padding: var(--space-sm) var(--space-md);
        color: #ffffff;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        background: linear-gradient(135deg, #134D6D 0%, var(--tecsa-primary) 100%);
        font-weight: 600;
        border-bottom: 2px solid var(--tecsa-primary);
    }
    .card-title {
        color: #134D6D;
        background-color: transparent;
        padding: 0;
        margin-bottom: var(--space-sm);
        font-weight: 700;
        font-size: var(--fs-md);
        font-family: var(--font-display);
    }
    .card-text { color: #2c3e50; line-height: var(--lh-relaxed); font-size: var(--fs-sm); }

    /* En modo tricorder, .card hereda look futurista */
    html[data-app-theme="tricorder"] .card {
        background: var(--tricorder-card-bg);
        border: 1px solid var(--tricorder-border-soft);
        color: var(--tricorder-text);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
    }
    html[data-app-theme="tricorder"] .card:hover {
        border-color: var(--tricorder-border);
        box-shadow: var(--shadow-glow);
    }
    html[data-app-theme="tricorder"] .card .card-header {
        background: linear-gradient(135deg, var(--tricorder-dark) 0%, rgba(0, 184, 212, 0.25) 100%);
        color: var(--tricorder-primary);
        border-bottom: 1px solid var(--tricorder-border);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        font-size: var(--fs-sm);
    }
    html[data-app-theme="tricorder"] .card-body { color: var(--tricorder-text); }
    html[data-app-theme="tricorder"] .card-title { color: var(--tricorder-primary); }
    html[data-app-theme="tricorder"] .card-text { color: var(--tricorder-text); }

    /* ----- Botones ----- */
    .btn {
        font-family: var(--font-sans);
        font-weight: 600;
        border-radius: var(--radius-md);
        transition: all var(--duration-fast) var(--ease-out-quart);
        min-height: var(--touch-target);
    }
    @media (hover: hover) {
        .btn:hover { transform: translateY(-1px); }
    }
    .btn-primary {
        background: linear-gradient(135deg, var(--tecsa-primary) 0%, #134D6D 100%);
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(69, 139, 186, 0.3);
    }
    .btn-primary:hover {
        background: linear-gradient(135deg, #134D6D 0%, var(--tecsa-text) 100%);
        box-shadow: 0 6px 16px rgba(69, 139, 186, 0.45);
        color: #ffffff;
    }
    html[data-app-theme="tricorder"] .btn-primary {
        background: linear-gradient(135deg, var(--tricorder-secondary) 0%, var(--tricorder-primary) 100%);
        color: var(--tricorder-dark);
        box-shadow: var(--shadow-glow);
    }
    html[data-app-theme="tricorder"] .btn-primary:hover {
        box-shadow: 0 8px 28px rgba(0, 229, 255, 0.4);
    }

    .btn-secondary {
        background: linear-gradient(135deg, var(--tecsa-primary) 0%, var(--tecsa-primary) 100%);
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        color: #ffffff;
    }
    .btn-secondary:hover {
        background: linear-gradient(135deg, var(--tecsa-primary) 0%, #134D6D 100%);
        box-shadow: 0 4px 12px rgba(108, 175, 221, 0.4);
        color: #ffffff;
    }

    .btn-success {
        background: linear-gradient(135deg, #6CCB7A 0%, #51B968 100%);
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        color: #ffffff;
    }
    .btn-success:hover {
        background: linear-gradient(135deg, #51B968 0%, #3E9C50 100%);
        box-shadow: 0 4px 12px rgba(108, 203, 122, 0.45);
        color: #ffffff;
    }

    .btn-danger {
        background: linear-gradient(135deg, #FF6B6B 0%, #EE5A52 100%);
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        color: #ffffff;
    }
    .btn-danger:hover {
        background: linear-gradient(135deg, #EE5A52 0%, #DC4C45 100%);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.45);
        color: #ffffff;
    }

    .btn-primary-custom {
        background-color: var(--tecsa-primary);
        color: white;
        border: 2px solid var(--tecsa-primary);
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        border-radius: var(--radius-md);
        transition: all var(--duration-base) ease;
    }
    .btn-primary-custom:hover {
        background-color: #134D6D;
        border-color: #134D6D;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }
    .btn-outline-custom {
        background-color: transparent;
        color: var(--tecsa-primary);
        border: 2px solid var(--tecsa-primary);
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        border-radius: var(--radius-md);
        transition: all var(--duration-base) ease;
    }
    .btn-outline-custom:hover {
        background-color: var(--tecsa-primary);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }
    .btn-primary-custom h4,
    .btn-outline-custom h4 { color: inherit; margin: 0; font-weight: 600; }
    .btn-primary-custom i,
    .btn-outline-custom i { margin-right: 0.5rem; }

    /* ----- Formularios ----- */
    .form-control, .form-select {
        border: 2px solid rgba(166, 218, 247, 0.5);
        border-radius: var(--radius-md);
        padding: 0.75rem 1rem;
        transition: all var(--duration-fast) ease;
        background-color: rgba(255, 255, 255, 0.9);
        min-height: var(--touch-target);
    }
    .form-control:focus, .form-select:focus {
        border-color: var(--tecsa-primary);
        box-shadow: 0 0 0 0.2rem rgba(69, 139, 186, 0.25);
        background-color: #ffffff;
    }
    .form-label {
        font-weight: 600;
        color: #134D6D;
        margin-bottom: 0.5rem;
        font-size: var(--fs-sm);
    }
    html[data-app-theme="tricorder"] .form-control,
    html[data-app-theme="tricorder"] .form-select {
        background: rgba(10, 22, 40, 0.7);
        border-color: var(--tricorder-border);
        color: var(--tricorder-text);
    }
    html[data-app-theme="tricorder"] .form-control:focus,
    html[data-app-theme="tricorder"] .form-select:focus {
        background: rgba(10, 22, 40, 0.9);
        border-color: var(--tricorder-primary);
        box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.25);
        color: var(--tricorder-text);
    }
    html[data-app-theme="tricorder"] .form-control::placeholder {
        color: rgba(224, 247, 250, 0.4);
    }
    html[data-app-theme="tricorder"] .form-label { color: var(--tricorder-muted); }

    /* ----- Tablas ----- */
    .table {
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-2);
        font-variant-numeric: tabular-nums;
    }
    .table thead th {
        background: linear-gradient(135deg, #134D6D 0%, var(--tecsa-primary) 100%);
        color: #ffffff;
        font-weight: 600;
        text-align: left;
        padding: 1rem;
        border: none;
        font-size: var(--fs-sm);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
    }
    .table tbody tr {
        border-bottom: 1px solid rgba(166, 218, 247, 0.3);
        transition: background-color var(--duration-fast) ease;
    }
    .table tbody tr:hover { background-color: rgba(166, 218, 247, 0.1); }
    .table tbody td { padding: 1rem; vertical-align: middle; color: #2c3e50; }
    .table td, .table th { padding: 15px; border-radius: 5px; text-align: left; }
    .table tbody tr:hover td { background-color: transparent; }

    html[data-app-theme="tricorder"] .table {
        background: rgba(10, 22, 40, 0.6);
        color: var(--tricorder-text);
        border: 1px solid var(--tricorder-border-soft);
    }
    html[data-app-theme="tricorder"] .table thead th {
        background: linear-gradient(135deg, var(--tricorder-dark) 0%, rgba(0, 184, 212, 0.3) 100%);
        color: var(--tricorder-primary);
    }
    html[data-app-theme="tricorder"] .table tbody td { color: var(--tricorder-text); }
    html[data-app-theme="tricorder"] .table tbody tr { border-color: rgba(0, 229, 255, 0.1); }
    html[data-app-theme="tricorder"] .table tbody tr:hover { background: rgba(0, 229, 255, 0.06); }

    .table-container {
        border: 1px solid #ccc;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-2);
        padding: var(--space-md);
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
        margin: var(--space-lg);
        background-color: #d0e7ff;
    }
    html[data-app-theme="tricorder"] .table-container {
        background: var(--tricorder-card-bg);
        border-color: var(--tricorder-border);
        color: var(--tricorder-text);
    }

    /* Caption */
    caption {
        caption-side: top;
        text-align: left;
        font-size: var(--fs-md);
        margin-bottom: var(--space-xs);
        font-weight: 600;
    }

    /* Pagination */
    .pagination { display: flex; justify-content: center; padding: var(--space-xs) 0; flex-wrap: wrap; gap: 4px; }
    .pagination .page-item .page-link {
        color: #343a40;
        border: 1px solid #343a40;
        margin: 0 4px;
        border-radius: var(--radius-sm);
        min-height: var(--touch-target);
        min-width: var(--touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .pagination .page-item.active .page-link {
        background-color: #343a40;
        border-color: #343a40;
        color: #ffffff;
    }
    html[data-app-theme="tricorder"] .pagination .page-link {
        background: rgba(10, 22, 40, 0.6);
        border-color: var(--tricorder-border);
        color: var(--tricorder-secondary);
    }
    html[data-app-theme="tricorder"] .pagination .page-item.active .page-link {
        background: var(--tricorder-primary);
        border-color: var(--tricorder-primary);
        color: var(--tricorder-dark);
    }

    .table-title { margin: 0; font-size: var(--fs-md); }
    .table-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); }

    /* ----- Badges ----- */
    .badge {
        padding: 0.5em 1em;
        border-radius: var(--radius-sm);
        font-weight: 600;
        font-size: 0.85rem;
        font-variant-numeric: tabular-nums;
    }
    .badge-primary {
        background: linear-gradient(135deg, var(--tecsa-primary) 0%, #134D6D 100%);
        color: #ffffff;
    }
    .badge-success { background: linear-gradient(135deg, #6CCB7A 0%, #51B968 100%); color: #ffffff; }
    .badge-danger  { background: linear-gradient(135deg, #FF6B6B 0%, #EE5A52 100%); color: #ffffff; }
    .badge-warning { background: linear-gradient(135deg, #FFD93D 0%, #FFC312 100%); color: #333; }
    .badge-info    { background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%); color: #ffffff; }

    /* ----- Modales ----- */
    /* Modal con look tricorder */
    .modal-content {
        border-radius: var(--radius-lg);
        border: none;
        box-shadow: var(--shadow-3);
    }
    .modal-header {
        background: linear-gradient(135deg, #134D6D 0%, var(--tecsa-primary) 100%);
        color: #ffffff;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: none;
        padding: var(--space-md);
    }
    .modal-title { font-weight: 700; font-size: var(--fs-md); }
    .modal-body { padding: var(--space-lg); }
    .modal-footer { border-top: 1px solid rgba(166, 218, 247, 0.3); padding: var(--space-sm) var(--space-lg); }
    html[data-app-theme="tricorder"] .modal-content {
        background: linear-gradient(145deg, rgba(10, 22, 40, 0.98) 0%, rgba(20, 40, 60, 0.97) 100%);
        color: var(--tricorder-text);
        border: 1px solid var(--tricorder-border);
        box-shadow: 0 0 40px rgba(0, 229, 255, 0.25), 0 16px 48px rgba(0, 0, 0, 0.6);
        position: relative;
        z-index: 1060;
    }
    html[data-app-theme="tricorder"] .modal-header {
        background: linear-gradient(135deg, var(--tricorder-dark) 0%, rgba(0, 184, 212, 0.4) 100%);
        color: var(--tricorder-primary);
    }
    html[data-app-theme="tricorder"] .modal-footer { border-top-color: var(--tricorder-border-soft); }

    /* Asegurar que el backdrop no tape el modal */
    .modal-backdrop.show {
        opacity: 0.5;
    }
    .modal {
        z-index: 1055;
    }
    .modal-backdrop {
        z-index: 1050;
    }

    /* ----- Tooltips ----- */
    .tooltip-inner {
        background-color: #134D6D;
        border-radius: var(--radius-sm);
        padding: 0.5rem 0.75rem;
        font-size: var(--fs-xs);
    }
    .bs-tooltip-top .tooltip-arrow::before,
    .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #134D6D; }
    .bs-tooltip-end .tooltip-arrow::before,
    .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #134D6D; }
    .bs-tooltip-bottom .tooltip-arrow::before,
    .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #134D6D; }
    .bs-tooltip-start .tooltip-arrow::before,
    .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #134D6D; }

    /* ----- Spinners ----- */
    .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.15em; }
    #loading-spinner {
        position: fixed; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        z-index: var(--z-spinner);
    }
    #loading-spinner .spinner-border {
        width: 6rem; height: 6rem; border-width: 0.5rem; color: #3498db;
    }
    #loading-spinner .loading-text {
        margin-top: 1rem;
        color: rgba(255, 255, 255, 0.9);
        background-color: rgba(0, 0, 0, 0.5);
        font-size: var(--fs-md);
        text-align: center;
        padding: 10px;
        border-radius: var(--radius-md);
        display: inline-block;
        animation: blink 1.5s infinite;
    }
    @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

    /* ----- Alert container (legacy + moderno) ----- */
    .alert-container {
        position: fixed;
        top: 80px;
        right: 20px;
        z-index: var(--z-toast);
        max-width: 400px;
        width: calc(100% - 40px);
    }

    /* ----- Imágenes / contenedores ----- */
    .img-fluid {
        max-width: 100%;
        height: auto;
        border: 1px solid #ddd;
        border-radius: var(--radius-sm);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .container-sm { border-radius: var(--radius-md); }

    /* ----- Sidebar legacy (compat con dashboard antiguo) ----- */
    .sidebar { /* mantiene compat, layout real lo gestiona sidebar.css */ }

    /* ----- Login / Landing legacy ----- */
    .login-card { background-color: var(--secondary-color-rgb); }
    .login-image { width: 100%; height: 100%; background-size: cover; background-position: center; }
    .clean-hero {
        margin: var(--space-lg);
        height: 100vh;
        height: 100dvh;
        width: 80%;
        padding: var(--space-xl);
        overflow: hidden;
    }
    .landing-page {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        height: 100dvh;
    }
    .landing-page .semi-transparent-card {
        background-color: rgba(19, 77, 109, 0.8);
        color: #fff;
        margin: var(--space-md);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-color: var(--tecsa-primary);
        box-shadow: var(--shadow-3);
    }
    .landing-page .card-body {
        background-color: rgba(108, 175, 22, 0.2);
        color: #fff;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-color: var(--tecsa-primary);
        box-shadow: var(--shadow-3);
    }

    /* ----- Avatar / persona / logo ----- */
    .avatar {
        max-width: 100%;
        height: auto;
        cursor: pointer;
        width: 200px;
        border-radius: 50%;
        object-fit: cover;
        aspect-ratio: 1 / 1;
    }
    .persona-image { position: relative; right: 2px; top: 2px; align-items: center; }

    #tecsa-logo { width: 100px; height: 100px; }
    .tecsa-logo {
        position: absolute;
        top: 10px; left: 10px;
        height: 60px;
        margin-right: 20px;
        margin-left: 30px;
        max-height: 50px;
    }

    /* ----- Misc legacy ----- */
    .mtop-navbar { margin-top: 60px; padding-top: 10px; }
    .mt-navbar { margin-top: 80px; }

    .semi-transparent-bg {
        background-color: rgba(255, 255, 255, 0.8);
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }

    #page-top {
        background-image: url("/static/assets/img/tecsas3/tecsas3-bg-ecosystem.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-color: transparent;
    }

    .video-background {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    .logo-large { max-width: 300px; margin-bottom: 2rem; }

    /* ----- Features section legacy ----- */
    .features { padding: 100px 0; background-color: #f8f9fa; }
    .feature-card {
        background: white;
        border-radius: var(--radius-md);
        padding: var(--space-lg);
        height: 100%;
        transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
    .feature-icon {
        font-size: 2.5rem;
        color: var(--tecsa-primary);
        margin-bottom: 1.5rem;
    }

    /* ----- Card intro / aprobado / etc. ----- */
    .card-intro {
        background-color: rgba(69, 139, 186, 0.8);
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }
    .card-body.aprobado {
        background-image: url('/static/assets/img/device-interface-background.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgba(var(--quaternary-color-rgb), 0.7);
        opacity: 0.8;
    }

    /* ----- Markdown / JSON content ----- */
    .markdown-content { font-family: var(--font-sans); line-height: var(--lh-relaxed); color: #333; }
    .markdown-content h1, .markdown-content h2, .markdown-content h3 { color: #0056b3; }
    .markdown-content a { color: #007bff; }
    .markdown-content a:hover { text-decoration: underline; }
    pre.language-json {
        background-color: #f5f5f5;
        padding: var(--space-xs);
        border-radius: var(--radius-sm);
        font-size: var(--fs-xs);
        overflow-x: auto;
        font-family: var(--font-mono);
    }
    html[data-app-theme="tricorder"] pre.language-json {
        background: rgba(10, 22, 40, 0.7);
        color: var(--tricorder-text);
        border: 1px solid var(--tricorder-border-soft);
    }

    /* ----- Enviar email card ----- */
    .enviar-email .card {
        box-shadow: var(--shadow-2);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: transform var(--duration-fast);
    }
    .enviar-email .card:hover { transform: translateY(-5px); filter: brightness(0.95); }
    .enviar-email .card-header { padding: var(--space-sm); }
    .enviar-email .card-body { padding: var(--space-md); }
    .enviar-email .form-group { margin-bottom: var(--space-sm); }
    .enviar-email .btn-success { background-color: #28a745; border-color: #28a745; }

    /* ----- Chart container ----- */
    .chart-container {
        position: relative;
        width: 100%;
        container-type: inline-size;
    }
    @container (min-width: 600px) {
        .chart-container { min-height: 320px; }
    }

    /* ----- Skeleton loaders (estados de carga, tokens tricorder) ----- */
    .skeleton {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-md);
        background: var(--tricorder-surface-1);
        border: 1px solid var(--tricorder-border-soft);
        min-height: 1rem;
    }
    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(
            90deg,
            transparent 0%,
            var(--tricorder-panel) 45%,
            rgba(0, 229, 255, 0.16) 50%,
            var(--tricorder-panel) 55%,
            transparent 100%
        );
        animation: skeletonSweep 1.6s var(--ease-out-quart) infinite;
    }
    .skeleton--chart {
        position: absolute;
        inset: 0;
        z-index: var(--z-base);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 220px;
        pointer-events: none;
    }
    .skeleton--chart .skeleton__icon {
        font-size: var(--fs-xl);
        color: var(--tricorder-border);
        animation: pulse-glow var(--pulse-duration) ease-in-out infinite;
    }
    .skeleton--kpi { min-height: 2.25rem; width: 60%; }
    .skeleton.is-hidden { display: none; }

    @keyframes skeletonSweep {
        to { transform: translateX(100%); }
    }

    /* ----- Reveal escalonado (IntersectionObserver en dashboard-modern-ux.js) ----- */
    [data-reveal] {
        opacity: 0;
        translate: 0 12px;
        transition:
            opacity var(--duration-slow) var(--ease-out-quart),
            translate var(--duration-slow) var(--ease-out-quart);
        transition-delay: calc(var(--reveal-i, 0) * 60ms);
    }
    [data-reveal].is-revealed {
        opacity: 1;
        translate: 0 0;
    }

    /* Reduced motion: sin shimmer ni reveal animado */
    html[data-reduced-motion] .skeleton::after { animation: none; }
    html[data-reduced-motion] [data-reveal] {
        opacity: 1;
        translate: 0 0;
        transition: none;
    }
    @media (prefers-reduced-motion: reduce) {
        .skeleton::after { animation: none; }
        [data-reveal] {
            opacity: 1;
            translate: 0 0;
            transition: none;
        }
    }
}

/* ==========================================================================
   @layer tricorder — Tema futurista médico (cards específicos + HCE)
   ========================================================================== */
@layer tricorder {

    /* ----- Tricorder cards ----- */
    .tricorder-card {
        background: var(--tricorder-card-bg);
        border: 1px solid var(--tricorder-border);
        border-radius: var(--radius-xl);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        position: relative;
        overflow: hidden;
        transition: all var(--duration-slow) var(--ease-spring);
        color: var(--tricorder-text);
    }
    @supports not (backdrop-filter: blur(20px)) {
        .tricorder-card { background: rgba(10, 22, 40, 0.95); }
    }
    .tricorder-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--tricorder-primary), transparent);
        animation: scan-line var(--scan-duration) linear infinite;
        pointer-events: none;
    }
    .tricorder-card::after {
        content: '';
        position: absolute;
        top: -50%; left: -50%;
        width: 200%; height: 200%;
        background: radial-gradient(circle, var(--tricorder-scan-line) 0%, transparent 70%);
        animation: pulse-glow var(--pulse-duration) ease-in-out infinite;
        pointer-events: none;
        z-index: 0;
    }
    .tricorder-card:hover {
        box-shadow: var(--glow-primary);
        transform: translateY(-4px);
        border-color: var(--tricorder-primary);
    }

    @keyframes scan-line {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    @keyframes pulse-glow {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 0.55; transform: scale(1.04); }
    }

    .tricorder-header {
        background: linear-gradient(135deg, var(--tricorder-dark) 0%, rgba(0, 180, 212, 0.3) 100%);
        border-bottom: 1px solid var(--tricorder-border);
        padding: var(--space-sm) var(--space-md);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-xs);
        position: relative;
        z-index: 1;
    }
    .tricorder-header h3,
    .tricorder-header h4 {
        color: var(--tricorder-primary);
        margin: 0;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wider);
        font-size: var(--fs-base);
        font-family: var(--font-display);
    }
    .tricorder-body {
        padding: var(--space-md);
        position: relative;
        z-index: 1;
    }
    .tricorder-stat { display: flex; flex-direction: column; gap: 0.25rem; }
    .tricorder-stat-label {
        font-size: var(--fs-2xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-widest);
        color: var(--tricorder-secondary);
        font-weight: 600;
    }
    .tricorder-stat-value {
        font-size: var(--fs-xl);
        font-weight: 700;
        color: var(--tricorder-accent);
        text-shadow: var(--glow-text-accent);
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--tracking-tight);
    }

    .tricorder-badge {
        background: linear-gradient(135deg, var(--tricorder-primary) 0%, var(--tricorder-secondary) 100%);
        color: var(--tricorder-dark);
        padding: 0.5rem 1rem;
        border-radius: var(--radius-full);
        font-size: var(--fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        box-shadow: var(--glow-secondary);
    }

    .copy-btn {
        background: var(--tricorder-panel);
        border: 1px solid var(--tricorder-border);
        color: var(--tricorder-text);
        padding: 0.5rem 1rem;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--duration-fast) ease;
        font-size: var(--fs-xs);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: var(--touch-target);
    }
    .copy-btn:hover {
        background: var(--tricorder-primary);
        color: var(--tricorder-dark);
        box-shadow: var(--glow-primary);
    }
    .copy-btn.copied {
        background: var(--tricorder-accent);
        color: var(--tricorder-dark);
    }

    /* Responsive tricorder cards */
    @container (max-width: 600px) {
        .tricorder-stat-value { font-size: var(--fs-lg); }
        .tricorder-header { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 768px) {
        .tricorder-stat-value { font-size: var(--fs-lg); }
        .tricorder-header {
            padding: var(--space-sm);
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-xs);
        }
        .tricorder-body { padding: var(--space-sm); }
    }

    /* ==========================================================================
       HCE — Historia Clínica Electrónica (preserva API existente)
       ========================================================================== */
    .hce-card {
        background: var(--tricorder-card-bg);
        border: 1px solid var(--tricorder-border);
        border-radius: var(--radius-xl);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        position: relative;
        overflow: hidden;
        transition: all var(--duration-slow) var(--ease-spring);
        color: var(--tricorder-text);
    }
    .hce-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--tricorder-primary), transparent);
        animation: scan-line var(--scan-duration) linear infinite;
    }
    .hce-card:hover {
        box-shadow: var(--glow-primary);
        transform: translateY(-4px);
        border-color: var(--tricorder-primary);
    }
    .hce-card .card-header {
        background: linear-gradient(135deg, var(--tricorder-dark) 0%, rgba(0, 180, 212, 0.3) 100%);
        border-bottom: 1px solid var(--tricorder-border);
        padding: var(--space-sm) var(--space-md);
        color: var(--tricorder-primary);
        font-weight: 600;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    .hce-card .card-body {
        background: transparent;
        color: var(--tricorder-text);
        padding: var(--space-md) var(--space-lg);
    }
    .hce-card .card-footer {
        background: rgba(10, 22, 40, 0.6);
        border-top: 1px solid var(--tricorder-border);
        padding: var(--space-sm) var(--space-md);
        color: var(--tricorder-secondary);
    }

    .hce-section-title {
        color: var(--tricorder-primary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        font-size: var(--fs-sm);
        margin: 0 0 var(--space-sm);
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
        line-height: 1.4;
        text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
        font-family: var(--font-display);
        padding: 0.15rem 0;             /* respiro vertical para evitar recorte de glow */
        min-height: 1.6em;
    }
    /* Iconos del título: tamaño consistente, sin recortes, sin doble margin */
    .hce-section-title > i,
    .hce-section-title > .fas,
    .hce-section-title > .fa-solid,
    .hce-section-title > .fa-regular,
    .hce-section-title > svg {
        flex-shrink: 0;
        font-size: 0.95em;
        line-height: 1;
        margin: 0 !important;            /* anular .me-2 / .me-1 redundantes (gap del flex hace el espacio) */
        color: inherit;
        filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.15em;
        height: 1.15em;
        text-align: center;
    }
    /* Si el .hce-section-title vive dentro de un card-header con flex,
       evitar que el padre lo aplaste */
    .card-header .hce-section-title,
    .hce-card-header-solid .hce-section-title { min-width: 0; max-width: 100%; }

    .hce-stat-card {
        background: linear-gradient(145deg, rgba(10, 22, 40, 0.95) 0%, rgba(20, 40, 60, 0.9) 100%);
        border: 1px solid var(--tricorder-border);
        border-radius: var(--radius-md);
        padding: var(--space-md);
        text-align: center;
        position: relative;
        overflow: hidden;
        transition: all var(--duration-base) ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .hce-stat-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--tricorder-primary), transparent);
    }
    .hce-stat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--glow-primary);
        border-color: var(--tricorder-primary);
    }
    .hce-stat-value {
        font-size: var(--fs-xl);
        font-weight: 700;
        color: var(--tricorder-primary);
        text-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        margin-bottom: 0.25rem;
    }
    .hce-stat-label {
        font-size: var(--fs-2xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-widest);
        color: var(--tricorder-secondary);
        font-weight: 600;
    }

    .hce-table {
        background: rgba(10, 22, 40, 0.7);
        border-radius: var(--radius-md);
        overflow: hidden;
        border: 1px solid var(--tricorder-border);
        width: 100%;
        margin-bottom: 0;
    }
    .hce-table thead th {
        background: linear-gradient(135deg, var(--tricorder-dark) 0%, rgba(0, 180, 212, 0.3) 100%);
        color: var(--tricorder-primary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        font-size: var(--fs-xs);
        padding: 1rem;
        border-bottom: 1px solid var(--tricorder-border);
        border-top: none;
    }
    .hce-table tbody tr {
        border-bottom: 1px solid rgba(0, 229, 255, 0.1);
        transition: background-color var(--duration-fast) ease;
        color: var(--tricorder-text);
    }
    .hce-table tbody tr:hover { background-color: rgba(0, 229, 255, 0.08); }
    .hce-table tbody td {
        padding: 0.875rem 1rem;
        vertical-align: middle;
        color: var(--tricorder-text);
        border-bottom: 1px solid rgba(0, 229, 255, 0.1);
    }
    .hce-table tbody tr:last-child td { border-bottom: none; }

    .hce-tabs .nav-tabs {
        border-bottom: 1px solid var(--tricorder-border);
        gap: 0.25rem;
        padding: 0 0.5rem;
        flex-wrap: wrap;
    }
    .hce-tabs .nav-tabs .nav-link {
        background: rgba(10, 22, 40, 0.6);
        border: 1px solid transparent;
        border-bottom: none;
        color: var(--tricorder-secondary);
        font-weight: 500;
        font-size: var(--fs-sm);
        padding: 0.75rem 1rem;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        transition: all var(--duration-base) ease;
        margin-bottom: -1px;
        min-height: var(--touch-target);
    }
    .hce-tabs .nav-tabs .nav-link:hover {
        background: rgba(0, 229, 255, 0.1);
        color: var(--tricorder-primary);
        border-color: var(--tricorder-border);
    }
    .hce-tabs .nav-tabs .nav-link.active {
        background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 184, 212, 0.1) 100%);
        color: var(--tricorder-primary);
        border-color: var(--tricorder-border);
        border-bottom: 1px solid rgba(10, 22, 40, 0.95);
        font-weight: 600;
        box-shadow: 0 -4px 12px rgba(0, 229, 255, 0.15);
    }
    .hce-tabs .tab-content {
        background: rgba(10, 22, 40, 0.5);
        border: 1px solid var(--tricorder-border);
        border-top: none;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        padding: var(--space-md);
    }

    .hce-form-wrapper {
        background: rgba(10, 22, 40, 0.6);
        border: 1px solid var(--tricorder-border);
        border-radius: var(--radius-md);
        padding: var(--space-md);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .hce-form-wrapper .form-label {
        color: var(--tricorder-secondary);
        font-weight: 600;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
    }
    .hce-form-wrapper .form-control,
    .hce-form-wrapper .form-select {
        background: rgba(10, 22, 40, 0.8);
        border: 1px solid var(--tricorder-border);
        color: var(--tricorder-text);
        border-radius: var(--radius-md);
    }
    .hce-form-wrapper .form-control:focus,
    .hce-form-wrapper .form-select:focus {
        background: rgba(10, 22, 40, 0.9);
        border-color: var(--tricorder-primary);
        box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.25);
        color: var(--tricorder-text);
    }
    .hce-form-wrapper .form-control::placeholder { color: rgba(224, 247, 250, 0.4); }

    .hce-badge {
        padding: 0.5em 1em;
        border-radius: var(--radius-full);
        font-weight: 600;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }
    .hce-badge-abierta {
        background: linear-gradient(135deg, rgba(74, 144, 226, 0.2) 0%, rgba(53, 122, 189, 0.3) 100%);
        color: #4A90E2;
        border: 1px solid rgba(74, 144, 226, 0.4);
    }
    .hce-badge-cerrada {
        background: linear-gradient(135deg, rgba(29, 233, 182, 0.2) 0%, rgba(22, 200, 150, 0.3) 100%);
        color: #1DE9B6;
        border: 1px solid rgba(29, 233, 182, 0.4);
    }
    .hce-badge-revision {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 160, 0, 0.3) 100%);
        color: #FFC107;
        border: 1px solid rgba(255, 193, 7, 0.4);
    }
    .hce-badge-borrador {
        background: linear-gradient(135deg, rgba(108, 175, 221, 0.2) 0%, rgba(90, 150, 200, 0.3) 100%);
        color: var(--tecsa-primary);
        border: 1px solid rgba(108, 175, 221, 0.4);
    }
    .hce-badge-anulada {
        background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(200, 50, 40, 0.3) 100%);
        color: #F44336;
        border: 1px solid rgba(244, 67, 54, 0.4);
    }

    .hce-empty {
        text-align: center;
        padding: var(--space-lg);
        color: var(--tricorder-secondary);
        font-style: italic;
    }
    .hce-empty i { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; }

    .hce-dl dt {
        color: var(--tricorder-secondary);
        font-weight: 600;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
    }
    .hce-dl dd { color: var(--tricorder-text); margin-bottom: 0.75rem; }

    .hce-info-box {
        background: rgba(0, 229, 255, 0.05);
        border: 1px solid var(--tricorder-border);
        border-radius: var(--radius-md);
        padding: clamp(0.9rem, 1.35vw, 1.2rem);
        color: var(--tricorder-text);
    }
    .hce-info-box > :last-child { margin-bottom: 0; }
    .hce-info-box h6 {
        color: var(--tricorder-secondary);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        margin-bottom: 0.5rem;
    }

    .hce-btn-outline {
        background: transparent;
        border: 1px solid var(--tricorder-border);
        color: var(--tricorder-secondary);
        transition: all var(--duration-base) ease;
        border-radius: var(--radius-md);
        min-height: var(--touch-target);
    }
    .hce-btn-outline:hover {
        background: rgba(0, 229, 255, 0.1);
        border-color: var(--tricorder-primary);
        color: var(--tricorder-primary);
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
    }

    .hce-data-grid {
        display: grid;
        gap: var(--space-sm);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    }
    .hce-data-item {
        background: rgba(10, 22, 40, 0.4);
        border: 1px solid rgba(0, 229, 255, 0.15);
        border-radius: var(--radius-md);
        padding: clamp(0.95rem, 1.4vw, 1.25rem);
        transition: all var(--duration-base) ease;
    }
    .hce-data-item:hover {
        background: rgba(0, 229, 255, 0.05);
        border-color: var(--tricorder-border);
    }
    .hce-data-item h6 {
        color: var(--tricorder-secondary);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        margin-bottom: 0.5rem;
    }
    .hce-data-item p { color: var(--tricorder-text); margin-bottom: 0; }
    .hce-data-item > :last-child { margin-bottom: 0; }

    /* Print mode HCE */
    body.print-mode .hce-card,
    body.print-mode .hce-stat-card,
    body.print-mode .hce-table,
    body.print-mode .hce-tabs .tab-content,
    body.print-mode .hce-form-wrapper {
        background: #fff !important;
        color: #000 !important;
        border-color: #dee2e6 !important;
    }
    body.print-mode .hce-section-title { color: #000 !important; text-shadow: none !important; }
    body.print-mode .hce-table thead th { background: #f8f9fa !important; color: #000 !important; }
    body.print-mode .hce-table tbody td { color: #000 !important; }

    /* Responsive HCE */
    @media (max-width: 768px) {
        .hce-stat-value { font-size: var(--fs-lg); }
        .hce-tabs .nav-tabs .nav-link { font-size: var(--fs-2xs); padding: 0.5rem 0.75rem; }
        .hce-card .card-body { padding: var(--space-sm) var(--space-md); }
        .hce-table thead th,
        .hce-table tbody td { padding: 0.75rem 0.5rem; font-size: var(--fs-sm); }
    }

    /* ==========================================================================
       HCE PAGE LAYOUT — Header card, page wrapper, stats grid (NUEVO 2026)
       ========================================================================== */

    /* Wrapper de página HCE: padding fluido, gap entre secciones */
    .hce-page {
        --hce-page-gutter-x: clamp(1rem, 2.4vw, 2.5rem);
        --hce-page-gutter-y: clamp(1rem, 2vw, 2rem);
        --hce-page-stack: clamp(1.25rem, 2vw, 2rem);
        position: relative;
        width: 100%;
        max-width: var(--content-max-width);
        margin-inline: auto;
        padding: var(--hce-page-gutter-y) var(--hce-page-gutter-x) clamp(2rem, 5vw, 4rem);
        display: flex;
        flex-direction: column;
        gap: var(--hce-page-stack);
        container-type: inline-size;
        container-name: hce-page;
    }

    /* Cuando se mete dentro de #content-wrapper, evitar doble padding */
    #content-wrapper > .hce-page,
    #content > .hce-page,
    #main-content .hce-page { margin-block: 0; }

    /* Variante estrecha para formularios (create/update) */
    .hce-page.hce-page--narrow {
        max-width: clamp(720px, 80vw, 1100px);
    }

    /* Header HCE: card hero con scan-line cyan + título + acciones */
    /* Nota: NO usar overflow:hidden aquí — recorta dropdowns (p.ej. el grupo
       "Acciones" junto a #btn-print-mode en hce_detail) al abrirse hacia abajo.
       El glow radial del extremo superior-derecho es una capa de background
       (siempre recortada al border-box) en vez de un ::after fuera de caja,
       que era la razón original del overflow:hidden. */
    .hce-page-header {
        position: relative;
        background:
            radial-gradient(circle 190px at 103% 24%, rgba(0, 229, 255, 0.18) 0%, rgba(0, 229, 255, 0.06) 45%, transparent 70%),
            linear-gradient(135deg, rgba(0, 229, 255, 0.12) 0%, rgba(0, 184, 212, 0.08) 50%, rgba(10, 22, 40, 0.92) 100%),
            var(--tricorder-card-bg);
        border: 1px solid var(--tricorder-border);
        border-top: 3px solid var(--tricorder-primary);
        border-radius: var(--radius-xl);
        padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.4vw, 2.25rem);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        box-shadow: var(--shadow-2), var(--glow-secondary);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        overflow: visible;
        isolation: isolate;
        /* El dropdown abierto debe pintar sobre los cards que siguen; por
           debajo de sticky (100) / offcanvas (1045) / modal (1055). */
        z-index: 10;
        color: #E0F7FA;  /* refuerza color base del header para evitar herencia oscura */
    }
    /* Forzar color claro a TODO el contenido textual descendiente del header
       (combate dashboard-modern-ux.css que aplica color oscuro fuera de @layer) */
    .hce-page-header,
    .hce-page-header > div,
    .hce-page-header h1,
    .hce-page-header h2,
    .hce-page-header h3,
    .hce-page-header p,
    .hce-page-header span:not(.hce-badge):not(.badge):not([class*="hce-badge-"]),
    .hce-page-header small,
    .hce-page-header li {
        color: #E0F7FA;
    }
    @supports not (backdrop-filter: blur(20px)) {
        .hce-page-header {
            background:
                radial-gradient(circle 190px at 103% 24%, rgba(0, 229, 255, 0.16) 0%, rgba(0, 229, 255, 0.06) 45%, transparent 70%),
                linear-gradient(135deg, rgba(0, 229, 255, 0.10) 0%, rgba(10, 22, 40, 0.96) 60%),
                rgba(10, 22, 40, 0.96);
        }
    }
    .hce-page-header::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--tricorder-primary), transparent);
        animation: scan-line var(--scan-duration) linear infinite;
        z-index: 1;
        pointer-events: none;
    }
    /* Glow radial superior-derecho: migrado a capa de background del propio
       header (ver nota en .hce-page-header) — este ::after fuera de la caja
       era lo que exigía overflow:hidden y recortaba los dropdowns. */
    .hce-page-header > * { position: relative; z-index: 2; }

    .hce-page-header > div:first-child {
        flex: 1 1 320px;
        min-width: 0;
    }

    /* Título principal de página HCE — color sólido brillante con glow
       Phase 2.4 — !important eliminados: dashboard-modern-ux.css ahora
       body { color: var(--text-primary: #212529); } fuera de @layer y
       eso pisa herencia hacia los h1 internos del header. */
    .hce-page-title,
    h1.hce-page-title,
    .hce-page-header .hce-page-title {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--fs-xl);
        font-weight: 700;
        line-height: var(--lh-snug);
        letter-spacing: var(--tracking-tight);
        color: #FFFFFF;
        -webkit-text-fill-color: #FFFFFF;
        text-shadow:
            0 0 18px rgba(0, 229, 255, 0.85),
            0 0 36px rgba(0, 229, 255, 0.45),
            0 2px 6px rgba(0, 0, 0, 0.7);
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        flex-wrap: wrap;
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
    }
    /* Icono dentro del título: NO debe heredar el clip-text gradient
       sino mostrarse con su color cyan brillante propio */
    .hce-page-title > i,
    .hce-page-title > .fas,
    .hce-page-title > .fa-solid,
    .hce-page-title > .fa-regular,
    .hce-page-title > svg,
    .hce-page-header .hce-page-title > i,
    .hce-page-header .hce-page-title > .fas,
    .hce-page-header .hce-page-title > .fa-solid,
    h1.hce-page-title > i {
        color: #00E5FF;
        -webkit-text-fill-color: #00E5FF;
        background: none;
        background-clip: initial;
        -webkit-background-clip: initial;
        font-size: 0.85em;
        filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.75));
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
    }

    /* Subtítulo descriptivo bajo el título */
    .hce-page-subtitle,
    .hce-page-header .hce-page-subtitle {
        margin: 0.5rem 0 0;
        font-size: var(--fs-sm);
        color: #B2EBF2;
        letter-spacing: var(--tracking-wide);
        line-height: var(--lh-normal);
        opacity: 0.95;
        max-width: 70ch;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    /* Breadcrumb dentro del header HCE */
    .hce-page-header .breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0 0 0.5rem 0;
        font-size: var(--fs-xs);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
    }
    .hce-page-header .breadcrumb-item,
    .hce-page-header .breadcrumb-item a {
        color: var(--tricorder-muted);
        text-decoration: none;
        transition: color var(--duration-fast) ease;
    }
    .hce-page-header .breadcrumb-item a:hover { color: var(--tricorder-primary); }
    .hce-page-header .breadcrumb-item.active { color: var(--tricorder-text); font-weight: 600; }
    .hce-page-header .breadcrumb-item + .breadcrumb-item::before {
        color: rgba(0, 229, 255, 0.4);
        content: "›";
        font-weight: 700;
    }

    /* Acciones a la derecha del header (botones, badges, dropdowns) */
    .hce-page-header .text-end,
    .hce-page-header > div:last-child:not(:first-child) {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-xs);
        flex: 0 1 auto;
    }
    .hce-page-header .btn,
    .hce-page-header .badge,
    .hce-page-header .hce-badge { flex-shrink: 0; }

    /* Card-header sólido: variante sin scan-line para nesting dentro de hce-card.
       Padding generoso para evitar recortes de drop-shadow/text-shadow glow. */
    .hce-card .card-header.hce-card-header-solid,
    .hce-card-header-solid,
    .card-header.hce-card-header-solid {
        background: linear-gradient(135deg, var(--tricorder-dark) 0%, rgba(0, 184, 212, 0.32) 100%);
        border-bottom: 1px solid var(--tricorder-border);
        padding: clamp(1rem, 1.6vw, 1.4rem) clamp(1.15rem, 2vw, 1.75rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: clamp(0.6rem, 1.2vw, 1rem);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        position: relative;
        z-index: 2;
        min-height: 56px;                /* asegura altura cómoda incluso sin acciones a la derecha */
        overflow: visible;               /* CRUCIAL: permite que el glow del título salga del header */
    }
    .hce-card-header-solid::before {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: -1px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--tricorder-primary), transparent);
        opacity: 0.6;
        pointer-events: none;
    }
    /* Título dentro del header solid: margen 0 (el padre da el espacio) */
    .hce-card-header-solid .hce-section-title {
        margin: 0;
        font-size: var(--fs-sm);
        flex: 1 1 auto;
    }
    .hce-card-header-solid .badge,
    .hce-card-header-solid .hce-badge,
    .hce-card-header-solid .btn,
    .hce-card-header-solid > a,
    .hce-card-header-solid small { flex-shrink: 0; }

    /* Form medical wrapper: gap entre cards */
    .hce-form-medical {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }
    .hce-form-medical .hce-card { margin-bottom: 0; }
    .hce-form-medical > .d-flex:last-child {
        margin-top: var(--space-xs);
        padding-top: var(--space-sm);
        border-top: 1px solid var(--tricorder-border-soft);
    }
    .hce-form-medical .form-control,
    .hce-form-medical .form-select,
    .hce-form-medical textarea {
        background: rgba(10, 22, 40, 0.75);
        border: 1px solid var(--tricorder-border);
        color: var(--tricorder-text);
        border-radius: var(--radius-md);
        min-height: var(--touch-target);
    }
    .hce-form-medical .form-control:focus,
    .hce-form-medical .form-select:focus,
    .hce-form-medical textarea:focus {
        background: rgba(10, 22, 40, 0.92);
        border-color: var(--tricorder-primary);
        box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.22);
        color: var(--tricorder-text);
    }
    .hce-form-medical .form-control::placeholder,
    .hce-form-medical textarea::placeholder { color: rgba(224, 247, 250, 0.4); }
    .hce-form-medical .form-label {
        color: var(--tricorder-secondary);
        font-weight: 600;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        margin-bottom: 0.4rem;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    .hce-form-medical .form-label i { color: var(--tricorder-primary); opacity: 0.85; }
    .hce-form-medical .form-text { color: var(--tricorder-muted); font-size: var(--fs-2xs); }
    .hce-form-medical .invalid-feedback {
        color: var(--tricorder-danger);
        font-size: var(--fs-xs);
        margin-top: 0.35rem;
    }
    .hce-form-medical .is-invalid {
        border-color: var(--tricorder-danger) !important;
        box-shadow: 0 0 0 0.2rem rgba(255, 82, 82, 0.18) !important;
    }

    /* Form inline: para filtros y formularios dentro de cards.
       Respeta el grid de Bootstrap (row/col) sin anular display. */
    .hce-form-inline .form-control,
    .hce-form-inline .form-select,
    .hce-form-inline textarea {
        background: rgba(10, 22, 40, 0.75);
        border: 1px solid var(--tricorder-border);
        color: var(--tricorder-text);
        border-radius: var(--radius-md);
        min-height: var(--touch-target);
    }
    .hce-form-inline .form-control:focus,
    .hce-form-inline .form-select:focus,
    .hce-form-inline textarea:focus {
        background: rgba(10, 22, 40, 0.92);
        border-color: var(--tricorder-primary);
        box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.22);
        color: var(--tricorder-text);
    }
    .hce-form-inline .form-control::placeholder,
    .hce-form-inline textarea::placeholder { color: rgba(224, 247, 250, 0.4); }
    .hce-form-inline .form-label {
        color: var(--tricorder-secondary);
        font-weight: 600;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        margin-bottom: 0.4rem;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    .hce-form-inline .form-label i { color: var(--tricorder-primary); opacity: 0.85; }
    .hce-form-inline .form-text { color: var(--tricorder-muted); font-size: var(--fs-2xs); }
    .hce-form-inline .invalid-feedback {
        color: var(--tricorder-danger);
        font-size: var(--fs-xs);
        margin-top: 0.35rem;
    }
    .hce-form-inline .is-invalid {
        border-color: var(--tricorder-danger) !important;
        box-shadow: 0 0 0 0.2rem rgba(255, 82, 82, 0.18) !important;
    }

    /* Patient preview card (en hce_create) */
    .hce-patient-preview {
        display: inline-flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.6rem 1rem 0.6rem 0.6rem;
        background: linear-gradient(135deg, rgba(0, 229, 255, 0.10) 0%, rgba(10, 22, 40, 0.85) 100%);
        border: 1px solid var(--tricorder-border);
        border-radius: var(--radius-full);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 0 18px rgba(0, 229, 255, 0.15);
        animation: hce-patient-in 0.35s var(--ease-out-expo);
        max-width: 100%;
    }
    .hce-patient-preview img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--tricorder-primary);
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
        flex-shrink: 0;
    }
    .hce-patient-preview .patient-info { display: flex; flex-direction: column; min-width: 0; }
    .hce-patient-preview .patient-info h6 {
        margin: 0;
        color: var(--tricorder-text);
        font-size: var(--fs-sm);
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
    .hce-patient-preview .patient-info small {
        color: var(--tricorder-muted);
        font-size: var(--fs-2xs);
        font-family: var(--font-mono);
    }

    .hce-toolbar-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .hce-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.75rem;
        border-radius: var(--radius-full);
        background: rgba(0, 229, 255, 0.14);
        border: 1px solid rgba(0, 229, 255, 0.35);
        color: var(--tricorder-text);
        font-size: var(--fs-xs);
        font-weight: 700;
        letter-spacing: var(--tracking-wide);
    }

    .hce-hero-badge--danger {
        background: rgba(255, 82, 82, 0.12);
        border-color: rgba(255, 82, 82, 0.28);
        color: #FF8A80;
    }

    .hce-copy-btn-compact {
        padding: 0.28rem 0.65rem;
        font-size: var(--fs-xs);
        line-height: 1.4;
    }

    .hce-inline-note,
    .hce-inline-meta {
        color: var(--tricorder-muted);
        font-size: var(--fs-xs);
    }

    .hce-link {
        color: var(--tricorder-primary);
        text-decoration: none;
    }

    .hce-link:hover {
        color: var(--tricorder-accent);
        text-decoration: underline;
    }

    .hce-link-danger {
        color: #FF8A80;
    }

    .hce-link-danger:hover {
        color: var(--tricorder-danger);
    }

    .hce-stat-card--primary .hce-stat-value { color: var(--tricorder-primary); }
    .hce-stat-card--accent .hce-stat-value { color: var(--tricorder-accent); }
    .hce-stat-card--warn .hce-stat-value { color: var(--tricorder-warn); }
    .hce-stat-card--info .hce-stat-value { color: var(--tricorder-info); }
    .hce-stat-card--danger .hce-stat-value { color: var(--tricorder-danger); }

    .hce-callout {
        background: rgba(0, 229, 255, 0.05);
        border: 1px solid var(--tricorder-border);
        border-left: 3px solid var(--tricorder-primary);
        border-radius: var(--radius-md);
        padding: var(--space-sm) var(--space-md);
    }

    .hce-callout--danger {
        background: rgba(255, 82, 82, 0.08);
        border-color: rgba(255, 82, 82, 0.22);
        border-left-color: var(--tricorder-danger);
    }

    .hce-card--danger {
        border-left: 3px solid var(--tricorder-danger) !important;
    }

    .hce-text-danger-soft {
        color: #FF8A80 !important;
        text-shadow: 0 0 10px rgba(255, 82, 82, 0.25);
    }

    .hce-message {
        display: flex;
        gap: 0.9rem;
        align-items: flex-start;
    }

    .hce-message__avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 1px solid var(--tricorder-border);
        background: rgba(0, 229, 255, 0.15);
        color: var(--tricorder-primary);
    }

    .hce-message__avatar--ai {
        background: rgba(0, 191, 165, 0.14);
        border-color: rgba(0, 191, 165, 0.28);
        color: var(--tricorder-success);
    }

    .hce-message__body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .hce-message__bubble {
        background: rgba(10, 22, 40, 0.6);
        border: 1px solid var(--tricorder-border);
        border-radius: var(--radius-lg);
        padding: 1rem 1rem 0.9rem;
    }

    .hce-message__bubble--soft {
        background: rgba(0, 229, 255, 0.05);
    }

    .hce-message__meta {
        display: block;
        margin-bottom: 0.4rem;
        color: var(--tricorder-muted);
        font-size: var(--fs-xs);
    }

    .hce-message__text,
    .hce-rich-text {
        color: var(--tricorder-text);
    }

    .hce-empty-state {
        text-align: center;
        padding: clamp(2rem, 4vw, 3rem) 1rem;
    }

    .hce-empty-state__icon {
        font-size: clamp(2rem, 4vw, 3rem);
        color: rgba(0, 229, 255, 0.3);
        margin-bottom: 1rem;
    }

    .hce-progress-thin {
        height: 6px;
        max-width: 150px;
        background: rgba(10, 22, 40, 0.6);
    }

    .hce-progress-bar {
        width: 0;
        transition: width var(--duration-base) var(--ease-out-quart);
    }

    .hce-score-container[hidden],
    .hce-emergency-alert[hidden] {
        display: none !important;
    }

    .hce-score-value--success { color: #69F0AE; }
    .hce-score-value--warning { color: #FFD740; }
    .hce-score-value--danger { color: #FF5252; }

    .hce-list-group .list-group-item,
    .hce-list-item-card {
        background: transparent;
        border-color: rgba(0, 229, 255, 0.08);
        color: var(--tricorder-text);
    }

    .hce-list-item-card {
        border-bottom: 1px solid rgba(0, 229, 255, 0.08);
        padding: 0.9rem 1rem;
    }

    .hce-list-item-card:last-child {
        border-bottom: 0;
    }

    .hce-list-item-card p,
    .hce-list-item-card small {
        color: var(--tricorder-muted);
    }

    .hce-prewrap { white-space: pre-wrap; }
    .hce-sparkline { min-height: 40px; }
    .hce-chart-panel { min-height: 240px; }
    .hce-chart-panel--compact { min-height: 220px; }
    .hce-results-scroll { max-height: 400px; }

    .hce-form-shell {
        background: rgba(10, 22, 40, 0.55);
        border: 1px solid var(--tricorder-border-soft);
        border-radius: var(--radius-lg);
        padding: var(--space-md);
    }

    .hce-content-stack {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .hce-content-stack > :last-child {
        margin-bottom: 0;
    }

    .hce-section-shell {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        padding: clamp(1rem, 1.6vw, 1.35rem);
        border-radius: var(--radius-lg);
        background: rgba(10, 22, 40, 0.18);
        border: 1px solid rgba(0, 229, 255, 0.08);
    }

    .hce-section-shell--flush {
        padding: 0;
        background: transparent;
        border: 0;
    }

    .hce-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .hce-section-header .hce-section-title,
    .hce-section-header .hce-inline-meta,
    .hce-section-header .btn,
    .hce-section-header .hce-hero-badge {
        margin: 0 !important;
    }

    .hce-card-body-pad {
        padding: clamp(1rem, 1.8vw, 1.5rem) !important;
    }
    .hce-card-body-pad > :last-child,
    .hce-card-body-compact > :last-child {
        margin-bottom: 0;
    }

    .hce-card-body-compact {
        padding: clamp(0.85rem, 1.4vw, 1.15rem) !important;
    }

    .hce-table-shell {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: clamp(0.85rem, 1.4vw, 1.15rem);
        border-radius: var(--radius-lg);
        background: rgba(5, 14, 26, 0.28);
        border: 1px solid rgba(0, 229, 255, 0.06);
    }

    .hce-table-shell > .table-responsive {
        margin: 0;
    }

    .hce-table-shell .hce-table,
    .hce-table-shell .table {
        margin-bottom: 0;
    }

    .hce-table-shell--tight {
        padding: clamp(0.65rem, 1vw, 0.85rem);
    }

    .hce-table-shell--edge {
        padding-inline: 0;
        padding-block: clamp(0.65rem, 1vw, 0.85rem);
        background: transparent;
        border: 0;
    }

    .hce-list-shell {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: clamp(0.8rem, 1.3vw, 1rem);
        border-radius: var(--radius-lg);
        background: rgba(5, 14, 26, 0.24);
        border: 1px solid rgba(0, 229, 255, 0.06);
    }

    .hce-list-shell .list-group {
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .hce-form-grid .row {
        --bs-gutter-x: 0.9rem;
        --bs-gutter-y: 0.9rem;
    }

    /* Inputs dentro de shells/forms parciales: mismo estilo tricorder */
    .hce-form-shell .form-control,
    .hce-form-shell .form-select,
    .hce-form-shell textarea,
    .hce-form-grid .form-control,
    .hce-form-grid .form-select,
    .hce-form-grid textarea {
        background: rgba(10, 22, 40, 0.75);
        border: 1px solid var(--tricorder-border);
        color: var(--tricorder-text);
        border-radius: var(--radius-md);
        min-height: var(--touch-target);
    }
    .hce-form-shell .form-control:focus,
    .hce-form-shell .form-select:focus,
    .hce-form-shell textarea:focus,
    .hce-form-grid .form-control:focus,
    .hce-form-grid .form-select:focus,
    .hce-form-grid textarea:focus {
        background: rgba(10, 22, 40, 0.92);
        border-color: var(--tricorder-primary);
        box-shadow: 0 0 0 0.2rem rgba(0, 229, 255, 0.22);
        color: var(--tricorder-text);
    }
    .hce-form-shell .form-control::placeholder,
    .hce-form-shell textarea::placeholder,
    .hce-form-grid .form-control::placeholder,
    .hce-form-grid textarea::placeholder { color: rgba(224, 247, 250, 0.4); }
    .hce-form-shell .form-label,
    .hce-form-grid .form-label {
        color: var(--tricorder-secondary);
        font-weight: 600;
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        margin-bottom: 0.4rem;
    }
    .hce-form-shell .invalid-feedback,
    .hce-form-grid .invalid-feedback {
        color: var(--tricorder-danger);
        font-size: var(--fs-xs);
        margin-top: 0.35rem;
    }

    .hce-form-shell .row,
    .hce-section-shell .row,
    .hce-card-body-pad .row,
    .hce-card-body-compact .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .hce-form-shell .card-body {
        padding: 0;
    }

    .hce-form-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: var(--space-sm);
        margin-top: var(--space-sm);
        padding-top: var(--space-sm);
        border-top: 1px solid rgba(0, 229, 255, 0.08);
    }

    .hce-tab-panel {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        padding-top: var(--space-sm);
    }

    .hce-empty-shell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 180px;
        padding: clamp(1.5rem, 3vw, 2.4rem);
        border-radius: var(--radius-lg);
        background: rgba(10, 22, 40, 0.25);
        border: 1px dashed rgba(0, 229, 255, 0.18);
        text-align: center;
    }

    .hce-empty-shell .hce-empty {
        padding: 0;
        margin: 0;
    }

    .hce-empty-shell--table {
        min-height: 0;
        padding: clamp(1rem, 2vw, 1.35rem);
    }

    .hce-modal-body-section {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .cita-status {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        margin-top: 0.5rem;
        padding: 0.55rem 0.85rem;
        border-radius: var(--radius-md);
        font-size: var(--fs-xs);
        line-height: 1.35;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, 0.03);
        transition: background-color var(--duration-base) ease,
            border-color var(--duration-base) ease,
            color var(--duration-base) ease,
            opacity var(--duration-base) ease,
            transform var(--duration-base) ease;
        opacity: 0;
        transform: translateY(-2px);
        animation: cita-status-in var(--duration-base) ease forwards;
    }

    .cita-status .cita-status__icon {
        flex: 0 0 auto;
        width: 1.1rem;
        text-align: center;
    }

    .cita-status .cita-status__text {
        flex: 1 1 auto;
    }

    .cita-status .cita-status__hint {
        display: block;
        margin-top: 0.1rem;
        color: var(--tricorder-muted);
        font-size: var(--fs-2xs);
    }

    .cita-status--idle {
        color: var(--tricorder-muted);
        border-color: rgba(130, 180, 199, 0.25);
        background: rgba(130, 180, 199, 0.06);
    }

    .cita-status--loading {
        color: var(--tricorder-primary);
        border-color: rgba(0, 229, 255, 0.35);
        background: rgba(0, 229, 255, 0.07);
    }

    .cita-status--success {
        color: #69F0AE;
        border-color: rgba(29, 233, 182, 0.35);
        background: rgba(29, 233, 182, 0.07);
    }

    .cita-status--empty {
        color: var(--tricorder-warn);
        border-color: rgba(255, 215, 64, 0.45);
        background: rgba(255, 215, 64, 0.08);
    }

    .cita-status--error {
        color: #FF8A80;
        border-color: rgba(255, 82, 82, 0.45);
        background: rgba(255, 82, 82, 0.08);
    }

    .cita-status__spinner {
        display: inline-block;
        width: 0.9rem;
        height: 0.9rem;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: cita-status-spin 0.7s linear infinite;
    }

    @keyframes cita-status-in {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes cita-status-spin {
        to { transform: rotate(360deg); }
    }

    .hce-select2-option {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.2rem 0;
    }

    .hce-select2-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid rgba(0, 229, 255, 0.3);
        flex-shrink: 0;
    }

    .hce-select2-icon {
        color: var(--tricorder-primary);
        font-size: 1rem;
        flex-shrink: 0;
    }

    .hce-select2-copy {
        min-width: 0;
    }

    .hce-select2-title {
        color: var(--tricorder-text);
        font-weight: 600;
        line-height: 1.25;
    }

    .hce-select2-meta {
        color: var(--tricorder-muted);
        font-size: var(--fs-2xs);
    }

    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-selection,
    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-dropdown,
    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-search,
    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-search__field {
        background: rgba(10, 22, 40, 0.92);
        border-color: var(--tricorder-border);
        color: var(--tricorder-text);
    }

    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-selection {
        min-height: var(--touch-target);
        border-radius: var(--radius-md);
    }

    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-results__option,
    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-search__field::placeholder {
        color: var(--tricorder-text);
    }

    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-results__option--highlighted,
    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-results__option--selected {
        background: rgba(0, 229, 255, 0.12);
        color: var(--tricorder-primary);
    }

    html[data-app-theme="tricorder"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
        color: rgba(224, 247, 250, 0.45);
    }

    @keyframes hce-patient-in {
        from { opacity: 0; transform: translateX(-8px) scale(0.96); }
        to   { opacity: 1; transform: translateX(0) scale(1); }
    }

    /* Stats grid HCE: 6/3/2 columnas según viewport con CSS Grid auto-fit */
    .hce-stats-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: clamp(0.625rem, 1.2vw, 1rem);
        margin: 0;
    }
    .hce-stats-grid > * {
        min-width: 0;
        padding: 0;
        margin: 0;
    }
    @media (max-width: 1199.98px) {
        .hce-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 575.98px) {
        .hce-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* Mejora individual de hce-stat-card en grid */
    .hce-stats-grid .hce-stat-card {
        height: 100%;
        padding: clamp(1rem, 1.5vw, 1.4rem) clamp(0.75rem, 1.2vw, 1.25rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.4rem;
    }
    .hce-stats-grid .hce-stat-value {
        font-size: clamp(1.5rem, 2.4vw, 2rem);
        line-height: 1;
        margin: 0;
    }
    .hce-stats-grid .hce-stat-label {
        font-size: var(--fs-2xs);
        line-height: 1.2;
    }

    /* Stack de secciones (gap consistente entre hce-card sucesivos) */
    .hce-stack { display: flex; flex-direction: column; gap: var(--space-md); }

    /* ID chip (código corto cyan) */
    .hce-id-chip,
    .hce-page code,
    .hce-card code {
        display: inline-block;
        color: var(--tricorder-primary);
        background: rgba(0, 229, 255, 0.10);
        border: 1px solid rgba(0, 229, 255, 0.22);
        padding: 0.18rem 0.45rem;
        border-radius: var(--radius-xs);
        font-family: var(--font-mono), serif;
        font-size: 0.85em;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    /* List item dentro de hce-card (consultas IA, etc.) */
    .hce-list-item {
        display: block;
        padding: 0.7rem 1rem;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(0, 229, 255, 0.08);
        color: var(--tricorder-text);
        transition: background-color var(--duration-fast) ease;
    }
    .hce-list-item:last-child { border-bottom: 0; }
    .hce-list-item:hover { background: rgba(0, 229, 255, 0.05); }
    .hce-list-item small { color: var(--tricorder-muted); }

    /* Dropdown menu con look tricorder consistente */
    html[data-app-theme="tricorder"] .dropdown-menu {
        background: rgba(10, 22, 40, 0.96);
        border: 1px solid var(--tricorder-border);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        box-shadow: var(--shadow-3), 0 0 24px rgba(0, 229, 255, 0.15);
        border-radius: var(--radius-md);
        padding: 0.4rem;
    }
    html[data-app-theme="tricorder"] .dropdown-item {
        color: var(--tricorder-text);
        border-radius: var(--radius-sm);
        padding: 0.55rem 0.85rem;
        transition: all var(--duration-fast) ease;
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: 0.55rem;
    }
    html[data-app-theme="tricorder"] .dropdown-item:hover,
    html[data-app-theme="tricorder"] .dropdown-item:focus {
        background: rgba(0, 229, 255, 0.12);
        color: var(--tricorder-primary);
    }
    html[data-app-theme="tricorder"] .dropdown-item.text-danger:hover {
        background: rgba(255, 82, 82, 0.12);
        color: var(--tricorder-danger);
    }
    html[data-app-theme="tricorder"] .dropdown-divider {
        border-color: var(--tricorder-border-soft);
        margin: 0.35rem 0;
    }

    /* Pagination con look tricorder dentro de HCE */
    .hce-card .pagination .page-link {
        background: rgba(10, 22, 40, 0.7);
        border-color: var(--tricorder-border-soft);
        color: var(--tricorder-secondary);
        margin: 0 3px;
        border-radius: var(--radius-sm);
        min-height: 40px;
        min-width: 40px;
    }
    .hce-card .pagination .page-link:hover {
        background: rgba(0, 229, 255, 0.12);
        color: var(--tricorder-primary);
        border-color: var(--tricorder-border);
    }
    .hce-card .pagination .page-item.active .page-link {
        background: linear-gradient(135deg, var(--tricorder-primary) 0%, var(--tricorder-secondary) 100%);
        border-color: var(--tricorder-primary);
        color: var(--tricorder-dark);
        font-weight: 700;
    }

    /* Document chip (en hce_detail "Documentos Adjuntos") */
    .hce-doc-chip {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.85rem 1rem;
        background: rgba(10, 22, 40, 0.6);
        border: 1px solid var(--tricorder-border);
        border-radius: var(--radius-md);
        transition: all var(--duration-base) ease;
    }
    .hce-doc-chip:hover {
        border-color: var(--tricorder-primary);
        background: rgba(0, 229, 255, 0.06);
        transform: translateY(-2px);
    }
    .hce-doc-chip > i:first-child {
        color: var(--tricorder-primary);
        font-size: 1.35rem;
        flex-shrink: 0;
    }
    .hce-doc-chip strong { color: var(--tricorder-text); display: block; line-height: 1.2; }
    .hce-doc-chip small { color: var(--tricorder-muted); }

    /* Tabs HCE con scroll horizontal en mobile */
    @media (max-width: 991.98px) {
        .hce-tabs .nav-tabs {
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--tricorder-border) transparent;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 2px;
            mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
            -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
        }
        .hce-tabs .nav-tabs .nav-link { white-space: nowrap; flex-shrink: 0; }
    }

    /* ===== Responsive HCE Page Header ===== */
    @container hce-page (max-width: 720px) {
        .hce-page-header {
            flex-direction: column;
            align-items: flex-start;
            padding: clamp(1rem, 4vw, 1.5rem);
        }
        .hce-page-header > div:last-child:not(:first-child) {
            align-items: stretch;
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .hce-page-header .text-end { text-align: left; }
    }
    @media (max-width: 575.98px) {
        .hce-page-header { padding: 1rem; gap: 0.85rem; }
        .hce-page-title { font-size: var(--fs-lg); }
        .hce-page-subtitle { font-size: var(--fs-xs); }
        .hce-page-header .btn { font-size: var(--fs-xs); padding: 0.5rem 0.85rem; }
        .hce-card-header-solid { padding: 0.85rem 1rem; }
    }

    /* ===== Print mode para HCE Page Header ===== */
    body.print-mode .hce-page-header,
    body.print-mode .hce-page-title,
    body.print-mode .hce-page-subtitle,
    body.print-mode .hce-card-header-solid {
        background: #fff !important;
        color: #000 !important;
        border-color: #dee2e6 !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }
    body.print-mode .hce-page-header::before,
    body.print-mode .hce-page-header::after { display: none !important; }
    body.print-mode .hce-page-title i { color: #000 !important; filter: none !important; }
    body.print-mode .hce-page-subtitle { color: #555 !important; }
}

/* ==========================================================================
   @layer utilities — Helpers funcionales
   ========================================================================== */
@layer utilities {
    .visually-hidden-focusable:not(:focus):not(:focus-within) {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .glow-text { text-shadow: var(--glow-text-accent); }
    .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    .display { font-family: var(--font-display); }

    /* Aspect-ratio helpers (CSS nativo) */
    .ratio-16x9 { aspect-ratio: 16 / 9; }
    .ratio-1x1 { aspect-ratio: 1 / 1; }
    .ratio-4x3 { aspect-ratio: 4 / 3; }

    /* Truncate */
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Scrollable cards */
    .scroll-y { overflow-y: auto; }
    .scroll-x { overflow-x: auto; }
}

/* ==========================================================================
   @layer overrides — Bootstrap fine-tuning + retro-compat de breakpoints
   ========================================================================== */
@layer overrides {
    /* Bootstrap 4→5 compat: las plantillas legacy usan mr-* / no-gutters */
    .no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
    .no-gutters > [class*="col-"], .no-gutters > .col { padding-right: 0; padding-left: 0; }

    /* Evitar overflow-by-letter en columnas estrechas con text-uppercase */
    .row > [class*="col-"], .row > .col { min-width: 0; }

    /* Garantizar que los gráficos KPI en cards estrechas wrappeen suavemente */
    .card .text-xs,
    .card .text-uppercase { word-break: normal; overflow-wrap: break-word; hyphens: auto; }

    /* KPI legacy (.text-xs.text-uppercase): permitir saltos de línea por palabra */
    .card .text-xs.text-uppercase {
        font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.78rem);
        letter-spacing: 0.04em;        /* menos agresivo que tracking-wider */
        line-height: 1.25;
        white-space: normal;
    }
    /* Cuando el KPI tiene 4 columnas en md, en pantallas <=992px stackear a 2 columnas */
    @media (max-width: 991.98px) {
        .col-md-3:has(> .card .text-xs.text-uppercase),
        .col-md-3.kpi-card { flex: 0 0 50%; max-width: 50%; }
    }

    /* Bordes de acento para utilidades legacy border-start-* */
    .border-start-primary { border-left: 4px solid var(--tricorder-primary); }
    .border-start-success { border-left: 4px solid var(--tricorder-accent); }
    .border-start-warning { border-left: 4px solid var(--tricorder-warn); }
    .border-start-danger  { border-left: 4px solid var(--tricorder-danger); }
    .border-start-info    { border-left: 4px solid var(--tricorder-info); }

    /* Texto helpers heredados */
    html[data-app-theme="tricorder"] .text-gray-800 { color: var(--tricorder-text) !important; }
    html[data-app-theme="tricorder"] .text-gray-700 { color: var(--tricorder-text) !important; }
    html[data-app-theme="tricorder"] .text-gray-600 { color: var(--tricorder-muted) !important; }
    html[data-app-theme="tricorder"] .text-gray-500 { color: var(--tricorder-muted) !important; }
    html[data-app-theme="tricorder"] .text-gray-400,
    html[data-app-theme="tricorder"] .text-gray-300 { color: rgba(130, 180, 199, 0.5) !important; }
    html[data-app-theme="tricorder"] .text-primary  { color: var(--tricorder-primary) !important; }
    html[data-app-theme="tricorder"] .text-success  { color: var(--tricorder-accent) !important; }
    html[data-app-theme="tricorder"] .text-danger   { color: var(--tricorder-danger) !important; }
    html[data-app-theme="tricorder"] .text-warning  { color: var(--tricorder-warn) !important; }
    html[data-app-theme="tricorder"] .text-info     { color: var(--tricorder-info) !important; }
    html[data-app-theme="tricorder"] .text-muted    { color: var(--tricorder-muted) !important; }

    /* Refuerzo de padding adaptativo en tablets */
    @media (min-width: 768px) {
        .card-body { padding: clamp(1rem, 2vw, 2rem); }
    }
    @media (max-width: 768px) {
        .card-body { padding: var(--space-sm); }
        .alert-container { right: 10px; left: 10px; max-width: calc(100% - 20px); }
        .table { font-size: var(--fs-sm); }
        .table thead th,
        .table tbody td { padding: 0.75rem 0.5rem; }
    }
    @media (max-width: 576px) {
        body { font-size: 14px; }
        .card-title { font-size: 1.1rem; }
        .btn-primary,
        .btn-secondary,
        .btn-success,
        .btn-danger {
            padding: 0.5rem 1rem;
            font-size: var(--fs-sm);
        }
        .badge { font-size: var(--fs-2xs); padding: 0.35em 0.7em; }
    }
}

/* ==========================================================================
   ACCESIBILIDAD — Reduced motion · Forced colors · Contrast
   ========================================================================== */
@media (prefers-reduced-motion: reduce),
       (update: slow),
       ([data-reduced-motion]) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .tricorder-card::before,
    .tricorder-card::after,
    .hce-card::before { display: none !important; }
    .dashboard-toolbar__indicator { animation: none !important; }
}

html[data-reduced-motion] .tricorder-card::before,
html[data-reduced-motion] .tricorder-card::after,
html[data-reduced-motion] .hce-card::before { display: none !important; }
html[data-reduced-motion] *,
html[data-reduced-motion] *::before,
html[data-reduced-motion] *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
}

@media (prefers-contrast: more) {
    :root {
        --tricorder-border: rgba(0, 229, 255, 0.6);
        --tricorder-border-soft: rgba(0, 229, 255, 0.4);
        --tricorder-muted: #B8DBE8;
    }
    .card, .tricorder-card, .hce-card { border-width: 2px; }
    a { text-decoration: underline; }
}

@media (forced-colors: active) {
    .card,
    .tricorder-card,
    .hce-card,
    .modal-content {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }
    .btn { border: 1px solid ButtonText; }
    .tricorder-card::before,
    .tricorder-card::after,
    .hce-card::before { display: none; }
}

/* ==========================================================================
   PRINT — Estilos de impresión globales
   ========================================================================== */
@media print {
    html, body {
        background: #fff !important;
        color: #000 !important;
        overflow: visible !important;
    }
    .sidebar, .navbar, .footer-professional, #loading-spinner,
    .dashboard-toolbar, .alert-container, .navbar-toggle-tab {
        display: none !important;
    }
    #main-content { margin-left: 0 !important; }
    .card, .tricorder-card, .hce-card {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}