/* ================================================================
   CARTELLA OSTETRICA — Global Stylesheet v7
   LIQUID MEDICAL GLASS EDITION (2026-03-14)
   Architettura: Crystal / Satin / Soft — WCAG AA garantita
   Fase 1 — DNA 🧬: Token CSS, Mesh Background, Glass Classes,
   Utility Tab Observer, App Header, Glass Sidebar 240px,
   Utility Drawer, App Footer, Glass Console Grid 3-zone
================================================================ */

/* ── Trasparenza strutturale — wrapper puri senza sfondo proprio ────────────
   Solo i contenitori che NON sono componenti glass ma potrebbero avere
   un background Bootstrap opaco ereditato.                              ── */
/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS — LIQUID GLASS v2.0
   Fonte di verità: CLAUDE.md §2.1
══════════════════════════════════════════════════════════════ */
:root {
    /* ── Palette clinica (invariata) ── */
    --verde:      #22c55e;  --verde-d:   #16a34a;
    --rosso:      #ef4444;  --rosso-d:   #dc2626;
    --giallo:     #eab308;  --giallo-d:  #ca8a04;
    --viola:      #a855f7;  --viola-d:   #9333ea;
    --blu:        #5AABDB;  --blu-d:     #3d8fc0;

    /* ── LIQUID GLASS — Livelli di trasparenza ──
       Crystal : Header + Contextual Console
       Satin   : Navigation Sidebar + Utility Drawer
       Soft    : Cards + Main Stage + Form panels          ── */
    --glass-crystal-bg:   rgba(255, 255, 255, 0.55);
    --glass-crystal-blur: blur(60px) saturate(2.2);  /* 7-Pillar §1 — THE ROOF: Crystal full-depth */

    --glass-satin-bg:     rgba(255, 255, 255, 0.35);
    --glass-satin-blur:   blur(60px) saturate(2.2);

    --glass-soft-bg:      rgba(255, 255, 255, 0.40);
    --glass-soft-blur:    blur(45px) saturate(2.2);  /* 7-Pillar §3 — THE STAGE: Soft glass corrected */

    /* ── Specular Highlight (riflesso luce) ── */
    --glass-specular:     1px solid rgba(255, 255, 255, 0.40);
    --glass-border:       1px solid rgba(255, 255, 255, 0.20);

    /* ── Mesh Background — Aura pastello luminoso ── */
    --body-mesh: linear-gradient(
        135deg,
        #e0f2fe 0%,    /* Sky 100 — azzurro cielo */
        #f5f3ff 40%,   /* Violet 50 — lavanda chiarissima */
        #ecfdf5 100%   /* Emerald 50 — menta fresca */
    );

    /* ── Tipografia ── */
    --text-primary:     #0f172a;   /* Slate 900 — testo standard */
    --text-muted-glass: #64748b;   /* Slate 500 — muted su glass */
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", monospace;

    /* ── Layout v2.1 — Slim Sidebar ── */
    --sidebar-w:          70px;   /* ★ collassata — si espande a 240px su hover */
    --sidebar-w-expanded: 240px;  /* espansa su hover — vola sopra main-stage */
    --drawer-w:   300px;
    --topbar-h:    60px;  /* barra unica 60px — breadcrumb inline */
    --topbar-row:  60px;  /* altezza barra principale */
    --footer-h:    25px;

    /* ── Master Left-Column Law v1.0 (IOS_26_ARCHITECTURE.md §B.3) ──────────────
       Colonna sinistra unificata: sidebar-w(70px) + content-gutter(2rem=32px) = 102px
       TUTTI i bordi sinistri (logo, breadcrumb, page-title, slabs) si allineano qui.
       Modificare SOLO questo token per riallineare l'intera interfaccia.             ── */
    --master-col: calc(var(--sidebar-w) + 2rem);   /* 102px assoluti dal viewport */

    /* ── z-index Stack ── */
    --z-app-header:      1080;
    --z-glass-sidebar:   1070;
    --z-app-footer:      1075;
    --z-utility-drawer:  1060;
    --z-glass-console:   1040;
    --z-fab:             1050;
    /* Modal sopra tutto (CLAUDE.md §2.1) — Bootstrap default 1040/1055 < sidebar 1070 */
    --z-modal-backdrop:  1085;
    --z-modal:           1090;

    /* ── Observer — Utility Tab States ──
       Colori calcolati runtime dal backend (clinical_rules DB).
       Usare data-state="neutro|info|warning|danger" sul Tab.   ── */
    --tab-neutro:  rgba(255, 255, 255, 0.70);
    --tab-info:    #3b82f6;   /* Azzurro — nuovi dati */
    --tab-warning: #f59e0b;   /* Arancio — scadenze/rischio medio */
    --tab-danger:  #ef4444;   /* Rosso   — rischio alto/critico Min.Salute 2025 */

    /* ── Legacy (compatibilità template esistenti) ── */
    --sidebar-bg: #1e293b;   /* mantenuto per classi sidebar v1 ancora in uso */

    /* ── Spring Curves — iOS 26 Liquid Glass (LIQUID_GLASS.md) ──────────────
       Fonte: LIQUID_GLASS.md §2 + docs/liquid_glass_swift_reference.md §1
       Standard  → hover e bottoni (.spring bounce:0.3)
       Bouncy    → conferme, badge, check (.spring bounce:0.5)
       Ease-Out  → rimozioni, dismiss (.easeOut)                           ── */
    --spring-standard:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-bouncy:      cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-out-smooth:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-spring:  0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-bouncy:  0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-out:     0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── html + body — mesh fissato alla viewport, sempre visibile sotto il vetro ── */
html {
    background: var(--body-mesh) !important;
    background-attachment: fixed !important;
    min-height: 100%;
    /* FASE 5 Diamond Cockpit: smooth anchor scroll — compensa sticky header */
    scroll-behavior: smooth;
}

/* ── Scrollbar Globale — Pillola Fluttuante Liquid Glass (LIQUID_GLASS.md §5) ────
   Si espande da 4px → 6px all'hover, rimane traslucida su qualsiasi sfondo.   ── */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        {
    background:    rgba(15, 23, 42, 0.20);
    border-radius: 50px;
    transition:    width var(--transition-out), background var(--transition-out);
}
::-webkit-scrollbar-thumb:hover  {
    background:    rgba(15, 23, 42, 0.38);
    border-radius: 50px;
}
::-webkit-scrollbar-corner       { background: transparent; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,0.20) transparent; }

/* ── Body — Mesh gradient sempre visibile attraverso i layer glass ──
   !important necessario per override Bootstrap 5 background-color: var(--bs-body-bg)
   CLAUDE.md §5.2: !important consentito per override Bootstrap               ── */
body {
    font-family: system-ui, -apple-system, 'Inter', 'Segoe UI', Roboto, sans-serif;
    background: var(--body-mesh) !important;
    background-attachment: fixed !important;
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* FASE 4: blocca scrollbar orizzontale su viewport standard */
    overflow-x: hidden;
}

/* ================================================================
   TOP BAR — bianco con ombra
================================================================ */
.top-bar {
    background: var(--glass-crystal-bg);
    color: #1e293b;
    padding: 0 1.4rem;
    display: flex;
    flex-wrap: wrap;               /* ★ anti-overflow: elementi si avvolgono su schermi stretti */
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--topbar-h);
    box-shadow: 0 1px 0 #e2e8f0, 0 2px 8px rgba(0,0,0,0.06);
    gap: 1rem;
}

.top-bar-logo {
    display:         flex;
    align-items:     center;
    gap:             0.65rem;
    color:           #1e293b;
    text-decoration: none;
    flex-shrink:     0;
}
.top-bar-logo i {
    font-size: 1.45rem;
    color: var(--rosso);
}

/* Logo icon fade-in (legacy — mantenuto per compatibilità) */
.logo-icon-fadein { display: inline-flex; align-items: center; }
.logo-icon-fadein svg { flex-shrink: 0; }

/* ── GIADA Logo — Shimmer hover ─────────────────────────────────────────── */
@keyframes giada-shimmer {
    0%   { filter: drop-shadow(0 0  0px rgba(52,211,153,0));  }
    30%  { filter: drop-shadow(0 0  8px rgba(52,211,153,0.70)) drop-shadow(0 0 16px rgba(16,185,129,0.35)); }
    60%  { filter: drop-shadow(0 0 12px rgba(52,211,153,0.50)) drop-shadow(0 0 24px rgba(52,211,153,0.20)); }
    100% { filter: drop-shadow(0 0  0px rgba(52,211,153,0));  }
}
.top-bar-logo:hover svg {
    animation: giada-shimmer 1.1s cubic-bezier(0.16,1,0.3,1) forwards;
}
.top-bar-logo svg {
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.top-bar-logo:hover svg {
    transform: scale(1.08) rotate(6deg);
}

/* ── GIADA Wordmark ──────────────────────────────────────────────────────── */
.giada-wordmark {
    display:        flex;
    flex-direction: column;
    line-height:    1;
    gap:            .13rem;
}
.giada-wordmark-title {
    font-size:      1.45rem;
    font-weight:    900;
    letter-spacing: .10em;
    color:          #0f172a;
    line-height:    1;
}
.giada-wordmark-sub {
    font-size:      .58rem;
    font-weight:    500;
    letter-spacing: .05em;
    color:          #64748b;
    text-transform: uppercase;
}
/* Su schermi piccoli nascondi solo il wordmark (SVG rimane visibile) */
@media (max-width: 576px) {
    .giada-wordmark { display: none; }
}

/* ── Contesto paziente (centro topbar) ── */
.top-bar-patient {
    flex: 1;
    display: flex;
    justify-content: center;
}

.patient-pill {
    background: #f0f7fd;
    border: 1.5px solid #c8e4f5;
    border-radius: 20px;
    padding: 0.28rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: #1e293b;
    max-width: min(540px, 90vw);   /* ★ fluido: non supera il 90% del viewport su schermi stretti */
}
.patient-pill i { color: var(--blu-d); }
.patient-pill .sep { opacity: 0.4; }
.patient-pill .eg-badge {
    background: var(--blu);
    color: #fff;
    border-radius: 10px;
    padding: 0.1rem 0.6rem;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

/* ── Destra topbar ── */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.top-date {
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.top-date i { font-size: 0.9rem; color: #94a3b8; }

/* ── Avatar utente ── */
.user-avatar-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.user-avatar {
    width:           24px;
    height:          24px;
    border-radius:   50%;
    background:      rgba(37, 99, 235, 0.14);
    backdrop-filter: blur(8px) saturate(1.6);
    -webkit-backdrop-filter: blur(8px) saturate(1.6);
    color:           var(--blu-d);
    font-size:       0.60rem;
    font-weight:     800;
    display:         flex;
    align-items:     center;
    justify-content: center;
    letter-spacing:  0.03em;
    flex-shrink:     0;
    text-transform:  uppercase;
    border:          1px solid rgba(37, 99, 235, 0.22);
}
.user-avatar-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

/* ================================================================
   LAYOUT APP
================================================================ */
.app-layout {
    display: flex;
    flex: 1;
    min-height: calc(100vh - var(--topbar-h));
}

/* ================================================================
   SIDEBAR — 64px, scura, icone sole, tooltip CSS
================================================================ */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0;
    gap: 0.1rem;
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    overflow-x: visible;
    z-index: 100;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.sidebar-divider,
.sidebar-extra-divider {
    width: 36px;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 0.35rem 0;
    flex-shrink: 0;
}

/* ── Pulsante sidebar ── */
.nav-icon-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    text-decoration: none !important;
    color: #94a3b8;
    border: 2px solid transparent;
    background: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.nav-icon-btn i {
    font-size: 1.3rem;
    transition: transform 0.15s;
    pointer-events: none;
}

/* Tooltip via Bootstrap nativo (data-bs-toggle="tooltip") */

.nav-icon-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
}
.nav-icon-btn:hover i { transform: scale(1.1); color: #e2e8f0; }

.nav-icon-btn.active {
    background: rgba(90,171,219,0.18);
    border-color: rgba(90,171,219,0.5);
    color: var(--blu);
}
.nav-icon-btn.active i { color: var(--blu); }

/* Icone sidebar figlie con colori espliciti: rimangono visibili su sfondo scuro */
.nav-icon-btn i[style*="color"] { /* colori inline dei template figli: non sovrascrivere */ }

/* ── Sidebar bottom spacer ── */
.sidebar-spacer { flex: 1; }

/* ── Pregnant woman SVG icon in sidebar ── */
.nav-icon-btn svg.icon-pregnant {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    transition: transform 0.15s;
    pointer-events: none;
}
.nav-icon-btn:hover svg.icon-pregnant { transform: scale(1.1); }

/* ================================================================
   CONTENUTO PRINCIPALE
================================================================ */
.main-content {
    flex: 1;
    padding: 1.5rem 2rem;
    /* overflow-y: auto rimosso — il body scrolla, altrimenti position:sticky nei figli non funziona */
    overflow: visible;
    min-width: 0;
    /* FASE 5 Diamond Cockpit: formula esplicita per fluidity assoluta.
       calc() impedisce overflow sub-sidebar su viewport strette;
       flex:1 gestisce la crescita — i due approcci si combinano sicuri. */
    width: calc(100vw - var(--sidebar-w));
    max-width: calc(100vw - var(--sidebar-w));
}

/* ================================================================
   CARDS
================================================================ */
.card {
    background: var(--glass-soft-bg);
    backdrop-filter: var(--glass-soft-blur);
    -webkit-backdrop-filter: var(--glass-soft-blur);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05);
    border: none;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.2s ease;
}

/* Card cliccabile — aggiunge il translateY e potenzia l'ombra */
.card-hoverable {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hoverable:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 6px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
}
.card-header {
    border-radius: 14px 14px 0 0 !important;
    padding: 0.85rem 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-header i { font-size: 1.1rem; }

/* Temi card header */
.card-header-verde  { background: linear-gradient(135deg,#dcfce7,#bbf7d0)!important; color: var(--verde-d); border-bottom: 2px solid #86efac!important; }
.card-header-rosso  { background: linear-gradient(135deg,#fee2e2,#fecaca)!important; color: var(--rosso-d); border-bottom: 2px solid #fca5a5!important; }
.card-header-giallo { background: linear-gradient(135deg,#fef9c3,#fef08a)!important; color: var(--giallo-d);border-bottom: 2px solid #fde047!important; }
.card-header-viola  { background: linear-gradient(135deg,#f3e8ff,#e9d5ff)!important; color: var(--viola-d); border-bottom: 2px solid #d8b4fe!important; }
.card-header-blu    { background: linear-gradient(135deg,#dbeafe,#bfdbfe)!important; color: var(--blu-d);   border-bottom: 2px solid #93c5fd!important; }

/* ════════════════════════════════════════════════════════════════════════════
   VISION GLOW BUTTONS — iOS 26 Liquid Glass (LIQUID_GLASS.md §5, swift_ref §2)
   Fisica elastica: spring curve su hover/scale, ease-out su release.
   Struttura: sfondo semitrasparente + bordo speculare top + glow esterno.
   Hover: scale(1.03) + glow intensificato. Active: scale(0.97) flex inward.
   Zero sfondi solidi — WCAG AA garantita su mesh pastello.
════════════════════════════════════════════════════════════════════════════ */

/* ── Base .btn — fisica elastica globale ── */
.btn {
    border-radius:   10px !important;
    font-weight:     500;
    transition:      transform      var(--transition-spring),
                     box-shadow     var(--transition-spring),
                     background     var(--transition-out),
                     border-color   var(--transition-out) !important;
}
.btn:hover  { transform: scale(1.03) !important; }
.btn:active { transform: scale(0.97) !important; }

/* ── btn-primary — Blu medico ── */
.btn-primary {
    background:  rgba(59, 130, 246, 0.88) !important;
    border:      none !important;
    border-top:  1px solid rgba(255,255,255,0.40) !important;
    color:       #ffffff !important;
    box-shadow:  0 0 14px rgba(59, 130, 246, 0.35) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background:  rgba(59, 130, 246, 0.98) !important;
    box-shadow:  0 0 26px rgba(59, 130, 246, 0.55), 0 4px 16px rgba(59,130,246,0.25) !important;
    color:       #ffffff !important;
}

/* ── btn-success — Verde salute ── */
.btn-success {
    background:  rgba(34, 197, 94, 0.88) !important;
    border:      none !important;
    border-top:  1px solid rgba(255,255,255,0.40) !important;
    color:       #ffffff !important;
    box-shadow:  0 0 14px rgba(34, 197, 94, 0.35) !important;
}
.btn-success:hover, .btn-success:focus {
    background:  rgba(34, 197, 94, 0.98) !important;
    box-shadow:  0 0 26px rgba(34, 197, 94, 0.55), 0 4px 16px rgba(34,197,94,0.25) !important;
    color:       #ffffff !important;
}

/* ── btn-danger — Rosso allerta ── */
.btn-danger {
    background:  rgba(239, 68, 68, 0.88) !important;
    border:      none !important;
    border-top:  1px solid rgba(255,255,255,0.40) !important;
    color:       #ffffff !important;
    box-shadow:  0 0 14px rgba(239, 68, 68, 0.35) !important;
}
.btn-danger:hover, .btn-danger:focus {
    background:  rgba(239, 68, 68, 0.98) !important;
    box-shadow:  0 0 26px rgba(239, 68, 68, 0.55), 0 4px 16px rgba(239,68,68,0.25) !important;
    color:       #ffffff !important;
}

/* ── btn-warning — Ambra / reset pwd ── */
.btn-warning {
    background:  rgba(234, 179, 8, 0.88) !important;
    border:      none !important;
    border-top:  1px solid rgba(255,255,255,0.40) !important;
    color:       #1e293b !important;
    box-shadow:  0 0 14px rgba(234, 179, 8, 0.35) !important;
}
.btn-warning:hover, .btn-warning:focus {
    background:  rgba(234, 179, 8, 0.98) !important;
    box-shadow:  0 0 26px rgba(234, 179, 8, 0.55), 0 4px 16px rgba(234,179,8,0.25) !important;
    color:       #1e293b !important;
}

/* ── btn-secondary — Ardesia neutro ── */
.btn-secondary {
    background:  rgba(100, 116, 139, 0.80) !important;
    border:      none !important;
    border-top:  1px solid rgba(255,255,255,0.35) !important;
    color:       #ffffff !important;
    box-shadow:  0 0 10px rgba(100, 116, 139, 0.25) !important;
}
.btn-secondary:hover, .btn-secondary:focus {
    background:  rgba(100, 116, 139, 0.95) !important;
    box-shadow:  0 0 20px rgba(100, 116, 139, 0.40) !important;
    color:       #ffffff !important;
}

/* ── Outline variants — glow al hover, bordo speculare ── */
.btn-outline-primary {
    border:     1.5px solid rgba(59,130,246,0.70) !important;
    color:      #3b82f6 !important;
    background: rgba(59,130,246,0.06) !important;
}
.btn-outline-primary:hover {
    background: rgba(59,130,246,0.16) !important;
    box-shadow: 0 0 18px rgba(59,130,246,0.30) !important;
    color:      #1d4ed8 !important;
}
.btn-outline-success {
    border:     1.5px solid rgba(34,197,94,0.70) !important;
    color:      #16a34a !important;
    background: rgba(34,197,94,0.06) !important;
}
.btn-outline-success:hover {
    background: rgba(34,197,94,0.16) !important;
    box-shadow: 0 0 18px rgba(34,197,94,0.30) !important;
    color:      #15803d !important;
}
.btn-outline-danger {
    border:     1.5px solid rgba(239,68,68,0.70) !important;
    color:      #ef4444 !important;
    background: rgba(239,68,68,0.06) !important;
}
.btn-outline-danger:hover {
    background: rgba(239,68,68,0.16) !important;
    box-shadow: 0 0 18px rgba(239,68,68,0.30) !important;
    color:      #dc2626 !important;
}
.btn-outline-warning {
    border:     1.5px solid rgba(234,179,8,0.70) !important;
    color:      #ca8a04 !important;
    background: rgba(234,179,8,0.06) !important;
}
.btn-outline-warning:hover {
    background: rgba(234,179,8,0.16) !important;
    box-shadow: 0 0 18px rgba(234,179,8,0.30) !important;
    color:      #a16207 !important;
}
.btn-outline-secondary {
    border:     1.5px solid rgba(100,116,139,0.60) !important;
    color:      #475569 !important;
    background: rgba(100,116,139,0.05) !important;
}
.btn-outline-secondary:hover {
    background: rgba(100,116,139,0.12) !important;
    box-shadow: 0 0 14px rgba(100,116,139,0.22) !important;
    color:      #334155 !important;
}

/* ── Pulsanti custom colorati — upgrade Vision Glow ── */
.btn-verde {
    background:  rgba(34, 197, 94, 0.88) !important;
    border:      none !important;
    border-top:  1px solid rgba(255,255,255,0.40) !important;
    color:       #ffffff !important;
    box-shadow:  0 0 14px rgba(34, 197, 94, 0.35) !important;
}
.btn-verde:hover {
    background:  rgba(34, 197, 94, 0.98) !important;
    box-shadow:  0 0 26px rgba(34, 197, 94, 0.55) !important;
    color:       #ffffff !important;
}
.btn-rosso {
    background:  rgba(239, 68, 68, 0.88) !important;
    border:      none !important;
    border-top:  1px solid rgba(255,255,255,0.40) !important;
    color:       #ffffff !important;
    box-shadow:  0 0 14px rgba(239, 68, 68, 0.35) !important;
}
.btn-rosso:hover {
    background:  rgba(239, 68, 68, 0.98) !important;
    box-shadow:  0 0 26px rgba(239, 68, 68, 0.55) !important;
    color:       #ffffff !important;
}
.btn-giallo {
    background:  rgba(234, 179, 8, 0.88) !important;
    border:      none !important;
    border-top:  1px solid rgba(255,255,255,0.40) !important;
    color:       #1e293b !important;
    box-shadow:  0 0 14px rgba(234, 179, 8, 0.35) !important;
}
.btn-giallo:hover {
    background:  rgba(234, 179, 8, 0.98) !important;
    box-shadow:  0 0 26px rgba(234, 179, 8, 0.55) !important;
    color:       #1e293b !important;
}
.btn-viola {
    background:  rgba(168, 85, 247, 0.88) !important;
    border:      none !important;
    border-top:  1px solid rgba(255,255,255,0.40) !important;
    color:       #ffffff !important;
    box-shadow:  0 0 14px rgba(168, 85, 247, 0.35) !important;
}
.btn-viola:hover {
    background:  rgba(168, 85, 247, 0.98) !important;
    box-shadow:  0 0 26px rgba(168, 85, 247, 0.55) !important;
    color:       #ffffff !important;
}

/* ================================================================
   PULSANTI AZIONE GRANDI (btn-icon-action)
================================================================ */
.btn-icon-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 2px solid transparent;
    background: #f0f7fd;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #2c3e50;
    min-width: 72px;
}
.btn-icon-action i   { font-size: 1.6rem; transition: transform 0.2s; }
.btn-icon-action img { width: 42px; height: 42px; object-fit: contain; transition: transform 0.2s; }
.btn-icon-action span { font-size: 0.72rem; font-weight: 600; text-align: center; color: #2c3e50; }
.btn-icon-action:hover {
    background: #dbeef9;
    border-color: var(--blu);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 4px 12px rgba(90,171,219,0.25);
    color: #2c3e50;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-icon-action:hover i,
.btn-icon-action:hover img { transform: scale(1.1); }

/* ================================================================
   PULSANTI AZIONE PICCOLI (btn-icon-sm)
================================================================ */
.btn-icon-sm {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    padding: 0.3rem 0.5rem;
    border-radius: 10px;
    border: 1px solid #e0e7ef;
    background: #f8fbff;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s;
    color: #2c3e50;
}
.btn-icon-sm i    { font-size: 1.1rem; }
.btn-icon-sm img  { width: 28px; height: 28px; object-fit: contain; }
.btn-icon-sm span { font-size: 0.60rem; font-weight: 600; color: #5a6a7a; }
.btn-icon-sm:hover {
    background: #eef6fc;
    border-color: var(--blu);
    transform: translateY(-1px);
    color: #2c3e50;
}

/* ================================================================
   PAGE TITLE
================================================================ */
.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.page-title i   { font-size: 1.6rem; }
.page-title img { width: 44px; height: 44px; object-fit: contain; }

/* ================================================================
   TABELLE
================================================================ */
.table thead th {
    background: rgba(248, 250, 252, 0.60);   /* Slate 50 semi-trasparente */
    color: var(--blu-d);
    font-weight: 600;
    border-bottom: 2px solid rgba(186, 230, 253, 0.50);
}
.table thead th[hx-get]:hover {
    background: rgba(224, 242, 254, 0.55);
    color: #1e5a8a;
}
.table tbody tr { background: transparent; }
.table tbody tr:hover { background: rgba(224, 242, 254, 0.30); }
.table tbody td { background: transparent; }

/* ── Link nominativo in tabella ── */
.nominativo-link {
    font-weight: 700;
    color: #1e293b;
    text-decoration: none;
    font-size: .95rem;
    line-height: 1.35;
    transition: color 0.15s;
}
.nominativo-link:hover {
    color: var(--blu-d);
    text-decoration: underline;
}

/* ── §6 THE FOOTERS: sticky-save-bar — Crystal Glass (7-Pillar §6) ──────────
   Elevato da blur(16px) → blur(60px) saturate(2.2) per consistenza Crystal.
   Specular highlight top simula rifrazione vetro iOS 26.                     ── */
.sticky-save-bar {
    position:            sticky;
    bottom:              0;
    z-index:             90;
    background:          var(--glass-crystal-bg);          /* rgba(255,255,255,0.55) */
    backdrop-filter:     var(--glass-crystal-blur);        /* blur(60px) saturate(2.2) */
    -webkit-backdrop-filter: var(--glass-crystal-blur);
    border-top:          var(--glass-specular);            /* 1px solid rgba(255,255,255,0.40) */
    box-shadow:          0 -4px 24px rgba(0, 0, 0, 0.08),
                         0 -1px  6px rgba(0, 0, 0, 0.04);
    border-radius:       0 0 14px 14px;
    padding:             0.75rem 1.2rem;
    margin-top:          1rem;
}

/* ================================================================
   FORM
================================================================ */
.form-control, .form-select {
    border-radius: 8px;
    border: 1.5px solid #dde3ea;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--blu);
    box-shadow: 0 0 0 3px rgba(90,171,219,0.15);
}
.form-label { font-weight: 500; color: #475569; }

/* ================================================================
   MISC
================================================================ */
.badge   { border-radius: 8px; font-weight: 600; padding: 0.35em 0.7em; }
.alert   { border-radius: 10px; }
/* .btn base e :hover/:active → Vision Glow §PULSANTI COLORATI (sopra) */

/* Alert clinici — non dismissibili, border-left colorato */
.alert-clinico {
    border-radius: 10px;
    border: none;
    border-left: 4px solid currentColor;
}
.alert-rh-negativo {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
    border-radius: 10px;
}

.empty-state     { text-align: center; padding: 3rem 2rem; color: #b0bac5; }
.empty-state i   { font-size: 3.5rem; opacity: 0.35; margin-bottom: 0.75rem; display: block; }
.empty-state img { width: 80px; opacity: 0.45; margin-bottom: 1rem; }

/* §6 THE FOOTERS: main-footer — trasparente, no border opaco (7-Pillar §6) */
.main-footer {
    background: var(--glass-crystal-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.18);  /* specular translucente — no #e2e8f0 solido */
    padding:    0.6rem 1.5rem;
    text-align: center;
    color:      #94a3b8;
    font-size:  0.76rem;
}

/* ================================================================
   RESPONSIVE — Layout Liquido iOS 26
   4 breakpoint: Wide (1280), Tablet (1024), Mobile (768), Micro (480)
   Principio: mai width/max-width fissi in px — tutto in %, rem, vw
================================================================ */

/* ── WIDE (1280px) — primo respiro: ribbon compatta lievemente ── */
@media (max-width: 1280px) {
    .kpi-pill             { padding: 0.65rem 1.20rem; }
}

/* ── TABLET (1024px) — KPI ribbon a capo, sidebar ancora visibile ── */
@media (max-width: 1024px) {
    .kpi-ribbon           { row-gap: 0.75rem; column-gap: 1rem; padding: 8px 0 14px 0; }
    .kpi-ribbon-group     { flex: 0 1 auto; }
    .kpi-ribbon-sep       { display: none; }
    .kpi-pill             { padding: 0.60rem 1.10rem; }
    .kpi-pill-value       { font-size: 0.85rem; }
    .kpi-pill-label       { font-size: 0.60rem; }
    /* ★ v2.5: mantiene padding-left = 2rem per rispettare --master-col (sidebar ancora 70px) */
    .main-stage           { padding: 1rem 1.5rem 1.5rem 2rem; }
    /* Search bar non si espande infinitamente su tablet */
    #searchInput:focus    { width: min(220px, 60vw) !important; }   /* ★ fluido su tablet stretto */
    /* Glass slabs: mantengono layout orizzontale ma più compatte */
    .glass-slab           { padding: 0.85rem 1.2rem; }
    .slab-stat            { min-width: 60px; }
}

/* ── MOBILE LARGE (768px) — sidebar collassata 56px, header slim ── */
@media (max-width: 768px) {
    :root { --sidebar-w: 56px; }

    /* Nav inline: nasconde testo breadcrumb su tablet, mantiene solo pill attiva */
    .app-header-nav .bc-pill:not(.bc-pill-active) { display: none; }

    .main-content         { padding: 1rem; }
    .main-stage {
        padding:   1rem 1rem 1rem;
        width:     calc(100vw - var(--sidebar-w));
        max-width: calc(100vw - var(--sidebar-w));
    }
    .top-bar-patient      { display: none; }
    .top-date             { display: none; }

    /* KPI ribbon: gruppi wrappano liberamente su 768px */
    .kpi-ribbon           { row-gap: 0.5rem; column-gap: 1rem; padding: 6px 0 12px 0; }
    .kpi-ribbon-group     { flex: 1 1 auto; min-width: 150px; }
    .kpi-ribbon-pills     { flex-wrap: wrap; gap: 6px; }
    .kpi-pill             { padding: 0.55rem 0.90rem; flex: 1 1 auto; min-width: 110px; }
    .kpi-pill-value       { font-size: 0.80rem; }

    /* Slabs: mantengono layout ma nascondono età (4° colonna) */
    .glass-slab           { padding: 0.75rem 1rem; gap: 0.75rem; }
    .slab-meta            { gap: 0.5rem; }
    .slab-stat:nth-child(n+4) { display: none; }

    /* Barra di ricerca: full-width su mobile */
    #searchInput          { width: 100% !important; max-width: 100% !important; }
    #searchInput:focus    { width: 100% !important; }
}

/* ── MICRO (480px) — sidebar hidden, full-width puro ── */
@media (max-width: 480px) {
    :root {
        --sidebar-w: 0px;
        --topbar-h:  60px;
    }
    .app-header-breadcrumb { display: none; }
    .glass-sidebar        { display: none !important; }
    .main-stage {
        margin-left:  0 !important;
        padding:      1rem 0.75rem 0.75rem;
        width:        100vw  !important;
        max-width:    100vw  !important;
        border-radius: 0;
    }
    .main-content         { padding: 0.75rem; margin-left: 0; }

    /* KPI ribbon: full width su mobile */
    .kpi-ribbon           { gap: 0.75rem; }
    .kpi-ribbon-group     { flex: 1 1 100%; }
    .kpi-ribbon-sep       { display: none; }
    .kpi-pill             { flex: 1 1 auto; justify-content: flex-start; min-width: 0; }

    /* Slabs: nasconde tutta la meta (solo nome + CF) */
    .slab-meta            { display: none; }

    /* Header: nasconde testo logo, mantiene icona */
    .top-bar-logo span:last-child { display: none; }

    /* Avatar: solo cerchio, no testo accanto */
    .user-avatar-name     { display: none; }
}


/* ================================================================
   CAMPI OBBLIGATORI — bordo sinistro rosso finché vuoti/invalidi
================================================================ */
.form-control[required]:invalid,
.form-select[required]:invalid {
    border-left: 4px solid #dc3545;
}
.form-control[required]:valid,
.form-select[required]:valid {
    border-left: 4px solid #22c55e;
}

/* Breadcrumb stile ambulatorio — trasparente 50%, posizione superiore (CLAUDE.md §4) */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0.25rem;
    opacity: 0.5;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #94a3b8;
}
.breadcrumb-item a {
    color: var(--blu-d);
    text-decoration: none;
}
.breadcrumb-item a:hover {
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: #64748b;
}

/* ── BREADCRUMB GLASS PILLS — Effetto "Incavato" (Diamond Cockpit FASE 2) ──
   Le pillole sembrano scavate nel vetro, non appoggiate sopra.
   Nessuna freccia Bootstrap: separatori glassati opachi, spring hover.
   Fisica: inset shadow simula rilievo inverso (concavità).
══════════════════════════════════════════════════════════════════════════ */
/* ── Breadcrumb nav — FASE 3: distanziamento dal contenuto (min 24px) ── */
nav[aria-label="breadcrumb"] {
    margin-bottom: 0;
}

.bc-glass {
    display:     flex;
    align-items: center;
    gap:         5px;
    padding:     0;
    margin:      0;
    list-style:  none;
}

/* ── Pillola navigabile — cinética FASE 3 ── */
/* Base: superficie incavata */
.bc-pill {
    display:         inline-flex;
    align-items:     center;
    gap:             0.28rem;
    padding:         0.16rem 0.68rem;
    border-radius:   20px;
    font-size:       0.74rem;
    font-weight:     600;
    letter-spacing:  0.01em;
    background:      rgba(15, 23, 42, 0.055);
    box-shadow:      inset 0 1px 3px rgba(0, 0, 0, 0.13),
                     inset 0 0 0 1px rgba(0, 0, 0, 0.055);
    color:           #64748b;
    text-decoration: none;
    white-space:     nowrap;
    /* FASE 3: aggiunti transform + filter per cinetica hover */
    transition:      background   var(--transition-out),
                     color        var(--transition-out),
                     box-shadow   var(--transition-out),
                     transform    var(--transition-spring),
                     filter       var(--transition-out);
}
/* FASE 3: pillola navigabile → si "solleva" e satura al hover */
.bc-pill:hover {
    background:  rgba(15, 23, 42, 0.10);
    color:       var(--blu-d);
    box-shadow:  inset 0 1px 4px rgba(0, 0, 0, 0.14),
                 inset 0 0 0 1px rgba(37, 99, 235, 0.20),
                 0 3px 10px rgba(37, 99, 235, 0.10);
    transform:   translateY(-2px);     /* sollevamento spring */
    filter:      saturate(1.35);       /* saturation boost iOS 26 */
}

/* ── Pillola ATTIVA — "sede scavata nel ghiaccio": STATICA e profonda ── */
/* pointer-events:none già disabilita hover, ma esplicitiamo transform:none */
.bc-pill-active {
    background:     rgba(15, 23, 42, 0.09);
    color:          #1e293b;
    font-weight:    700;
    pointer-events: none;
    cursor:         default;
    /* FASE 3: concavità marcata — 3 livelli di inset per profondità massima */
    box-shadow:     inset 0 2px 6px rgba(0, 0, 0, 0.18),
                    inset 0 1px 2px rgba(0, 0, 0, 0.10),
                    inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    transform:      none !important;   /* IMMOBILE: nessun movimento mai */
    filter:         none !important;
}

/* Separatore «›» tra pillole */
.bc-sep {
    color:       rgba(100, 116, 139, 0.40);
    font-size:   0.60rem;
    line-height: 1;
    flex-shrink: 0;
    font-weight: 700;
    user-select: none;
}

/* HTMX indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* ================================================================
   SCHEDA PAZIENTE — stili specifici (usati solo in scheda_paziente)
================================================================ */

/* ── Clinical Glass Slabs — Scheda Paziente (FASE 4 v5.0) ────────────────────
   .card-scheda → isola di cristallo 20px, sfondo semitrasparente, hover lift.
   Usa saturate senza blur aggressivo per GPU Raspberry Pi (ECCEZIONE CRITICA).
═══════════════════════════════════════════════════════════════════════════ */
.card-scheda {
    cursor:       pointer;
    position:     relative;
    overflow:     hidden;
    background:   rgba(255, 255, 255, 0.68) !important;
    backdrop-filter:          saturate(1.6) blur(12px);
    -webkit-backdrop-filter:  saturate(1.6) blur(12px);
    border-radius: 20px !important;
    border-top:    1px solid rgba(255, 255, 255, 0.55) !important;
    border-left:   1px solid rgba(255, 255, 255, 0.35) !important;
    border-right:  1px solid rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow:    0 4px 24px rgba(0, 0, 0, 0.07);
    transition:    transform   var(--transition-spring),
                   box-shadow  var(--transition-spring),
                   border-top-color var(--transition-out) !important;
}
.card-scheda:hover {
    transform:        translateY(-4px) scale(1.012);
    box-shadow:       0 16px 48px rgba(0,0,0,.11), 0 4px 16px rgba(59,130,246,.06) !important;
    border-top-color: rgba(255, 255, 255, 0.82) !important;
}
.card-scheda .card-header { border-radius: 0 !important; }

/* ── Snapshot Slab — ultimi dati clinici (FASE 4 v6.0) ──────────────────────
   Lastra orizzontale full-width con PA, Peso, BCF, Ultima Eco.
   Glass Slab 20px, flex wrap — su mobile scende su 2 righe.
═══════════════════════════════════════════════════════════════════════════ */
.snapshot-slab {
    display:          flex;
    align-items:      center;
    flex-wrap:        wrap;
    gap:              0;
    background:       rgba(255, 255, 255, 0.52);
    backdrop-filter:  saturate(1.6) blur(16px);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-radius:    20px;
    border-top:       1px solid rgba(255, 255, 255, 0.62);
    border-left:      1px solid rgba(255, 255, 255, 0.38);
    border-right:     1px solid rgba(0, 0, 0, 0.05);
    border-bottom:    1px solid rgba(0, 0, 0, 0.05);
    box-shadow:       0 4px 20px rgba(0, 0, 0, 0.07),
                      inset 0 1px 0 rgba(255, 255, 255, 0.60);
    overflow:         hidden;
}
.snapshot-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       0.85rem 1.4rem;
    flex:          1;
    min-width:     140px;
    border-right:  1px solid rgba(0, 0, 0, 0.06);
}
.snapshot-item:last-child { border-right: none; }
.snapshot-item-eco { flex: 1.5; }
.snapshot-icon {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.92rem;
    flex-shrink:     0;
}
.snapshot-label {
    font-size:      0.60rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--text-muted-glass);
    line-height:    1.2;
    margin-bottom:  1px;
}
.snapshot-value {
    font-size:      1.28rem;
    font-weight:    800;
    line-height:    1.1;
    letter-spacing: -0.01em;
}
.snapshot-sub {
    font-size:  0.68rem;
    color:      var(--text-muted-glass);
    margin-top: 1px;
    opacity:    0.75;
}

/* Badge stato COMPILATA / DA COMPILARE */
.card-stato-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    font-size: 0.60rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;   /* impedisce il wrapping su finestre strette */
}
.badge-compilata    { background:#dcfce7; color:#15803d; }
.badge-da-compilare { background:#f1f5f9; color:#94a3b8; }

/* Link "Dettaglio →" in basso a destra nelle card */
.card-dettaglio-link {
    display: block;
    text-align: right;
    font-size: 0.72rem;
    color: var(--blu-d);
    text-decoration: none;
    padding: 0.2rem 0.85rem 0.45rem;
    opacity: 0.65;
    transition: opacity 0.15s;
}
.card-dettaglio-link:hover { opacity: 1; text-decoration: underline; color: var(--blu-d); }

/* Pulse per icona Rh-negativa */
@keyframes pulse-soft {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.6; transform:scale(1.22); }
}
.rh-warn-icon {
    animation: pulse-soft 2.4s ease-in-out infinite;
    color: #ff6b6b !important;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

/* ── Configurazione Studio — sticky footer glassmorphism ───────────────── */
.cfg-sticky-footer {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-w);   /* 64px — allineato al bordo sidebar */
    right: 0;
    z-index: 400;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
}

/* ══════════════════════════════════════════════════════════════
   SCHEDA PAZIENTE — CSS globale (sopravvive a navigazione hx-boost)
   Nota: spostato da {% block extra_css %} perché HTMX non aggiorna
   il <head> sulle navigazioni boost, rendendo il CSS inaccessibile.
══════════════════════════════════════════════════════════════ */

/* ── Banner sticky — sotto la topbar ─────────────────────────── */
#banner-paziente {
    position: sticky;
    top: var(--topbar-h);
    z-index: 1040;
    margin-bottom: 0.75rem;
}

/* ── Identità cliccabile nel banner ───────────────────────────── */
.banner-identity { cursor: pointer; transition: opacity 0.15s; user-select: none; }
.banner-identity:hover { opacity: 0.72; }
.banner-identity-hint { font-size: 0.66rem; color: #94a3b8; margin-top: 2px; font-style: italic; }

/* ── Glow-pulse per badge Rh-negativo ────────────────────────── */
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
    50%       { box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.45), 0 0 16px 2px rgba(255, 107, 107, 0.22); }
}
.rh-badge-glow {
    animation: glow-pulse 2.2s ease-in-out infinite;
    border-color: #ff6b6b !important;
}

/* ── Floating Dock — Time Ruler ──────────────────────────────── */
#time-ruler-card {
    border-radius: 14px 14px 0 0;
    background: var(--glass-soft-bg);
    backdrop-filter: var(--glass-soft-blur);
    -webkit-backdrop-filter: var(--glass-soft-blur);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 1.1rem 1.4rem 0.9rem;
    margin-top: 1.25rem;
    border-top: 3px solid #e2e8f0;
}
.ruler-dock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.ruler-track {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 28px;
    margin-bottom: 6px;
}
.ruler-label {
    width: 56px;
    min-width: 56px;
    font-weight: 700;
    color: #475569;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ruler-line-wrap {
    flex: 1;
    position: relative;
    height: 8px;
    background: #f1f5f9;
    border-radius: 20px;
}
.ruler-line-inner {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    opacity: 0.55;
}
.ruler-rail {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
.ruler-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}
.ruler-marker:hover { transform: translate(-50%, -50%) scale(1.7); }
.ruler-eg-cursor {
    position: absolute;
    top: -8px;
    width: 3px;
    height: 24px;
    border-radius: 3px;
    z-index: 2;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.28);
}
.ruler-scale {
    display: flex;
    margin-left: calc(56px + 0.75rem);
    justify-content: space-between;
    padding-top: 4px;
}
.ruler-scale span { font-size: 0.62rem; color: #94a3b8; }
.ruler-scale span.key { font-weight: 800; color: #475569; font-size: 0.66rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 5 — Semaforo Immuno-Infettivo + Risk Badge + Anamnesi Smart Layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Semaforo bar ────────────────────────────────────────────────────────── */
.semaforo-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.45rem 1rem;
    background: rgba(255,255,255,0.92);
    border-top: 1px solid rgba(0,0,0,0.06);
}
.semaforo-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform 0.12s, box-shadow 0.12s;
    cursor: default;
}
.semaforo-pill:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.semaforo-pill .sema-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Varianti colore semaforo */
.semaforo-verde  { background: #dcfce7; color: #15803d; border: 1.5px solid #86efac; }
.semaforo-verde  .sema-dot { background: #22c55e; box-shadow: 0 0 4px #22c55e88; }
.semaforo-rosso  { background: #fef2f2; color: #dc2626; border: 1.5px solid #fca5a5; }
.semaforo-rosso  .sema-dot { background: #ef4444; box-shadow: 0 0 4px #ef444488; animation: pulse-dot 1.8s ease-in-out infinite; }
.semaforo-giallo { background: #fffbeb; color: #d97706; border: 1.5px solid #fde68a; }
.semaforo-giallo .sema-dot { background: #f59e0b; box-shadow: 0 0 4px #f59e0b88; }
.semaforo-blu    { background: #eff6ff; color: #1d4ed8; border: 1.5px solid #93c5fd; }
.semaforo-blu    .sema-dot { background: #3b82f6; }
.semaforo-neutro { background: #f1f5f9; color: #64748b; border: 1.5px solid #cbd5e1; }
.semaforo-neutro .sema-dot { background: #94a3b8; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* ── Risk badge ─────────────────────────────────────────────────────────── */
.risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-width: 1.5px;
    border-style: solid;
    cursor: default;
    transition: transform 0.12s;
}
.risk-badge:hover { transform: translateY(-1px); }
.risk-badge-fisiologico { background: #dcfce7; color: #15803d; border-color: #86efac; }
.risk-badge-moderato    { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.risk-badge-alto        { background: #fef2f2; color: #dc2626; border-color: #fca5a5; animation: risk-pulse 2s ease-in-out infinite; }
@keyframes risk-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50%       { box-shadow: 0 0 0 5px rgba(239,68,68,0.15); }
}

/* ── Anamnesi 3-panel layout ─────────────────────────────────────────────── */
.anam-layout {
    display: flex;
    gap: 0;
    min-height: 70vh;
    align-items: flex-start;
}

/* Sidebar sinistra */
.anam-sidebar {
    width: clamp(160px, 15vw, 200px);   /* ★ fluido: 160px-200px proporzionale al viewport */
    flex-shrink: 0;
    position: sticky;
    top: 70px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: var(--glass-soft-bg);
    backdrop-filter: var(--glass-soft-blur);
    -webkit-backdrop-filter: var(--glass-soft-blur);
    border-top: 1px solid rgba(255,255,255,0.50);
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    padding: 0.5rem 0;
}
.anam-sidebar::-webkit-scrollbar { width: 4px; }
.anam-sidebar::-webkit-scrollbar-track { background: transparent; }
.anam-sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Nav items sidebar anamnesi */
.anam-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.85rem;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    border-radius: 0;
}
.anam-nav-item:hover {
    background: #f0f9ff;
    color: #2563eb;
    border-left-color: #93c5fd;
}
.anam-nav-item.active {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    border-left-color: #3b82f6;
}
.nav-check {
    margin-left: auto;
    font-size: 0.65rem;
    flex-shrink: 0;
}
.nav-check.ok   { color: #22c55e; }
.nav-check.warn { color: #f59e0b; }
.nav-check.muted { color: #cbd5e1; }

/* Area contenuto centrale */
.anam-content {
    flex: 1;
    min-width: 0;
    margin: 0 0.75rem;
}

/* Panel positivi destra */
.anam-positivi {
    width: clamp(180px, 16vw, 220px);   /* ★ fluido: 180px-220px proporzionale al viewport */
    flex-shrink: 0;
    position: sticky;
    top: 70px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: var(--glass-soft-bg);
    backdrop-filter: var(--glass-soft-blur);
    -webkit-backdrop-filter: var(--glass-soft-blur);
    border-top: 1px solid rgba(255,255,255,0.50);
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    padding: 0.75rem;
}
.anam-positivi::-webkit-scrollbar { width: 4px; }
.anam-positivi::-webkit-scrollbar-track { background: transparent; }
.anam-positivi::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Responsive: collassa i pannelli laterali su schermi < 1200px */
@media (max-width: 1199px) {
    .anam-sidebar { width: 170px; }
    .anam-positivi { display: none; }
}
@media (max-width: 991px) {
    .anam-layout { flex-direction: column; }
    .anam-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
        padding: 0.25rem 0.5rem;
        border-radius: 10px;
        margin-bottom: 0.75rem;
    }
    .anam-nav-item {
        width: auto;
        padding: 0.35rem 0.7rem;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 8px;
        font-size: 0.75rem;
    }
    .anam-nav-item.active {
        border-left: none;
        border-bottom-color: #3b82f6;
    }
    .anam-content { margin: 0; }
}

/* ── Smart Chips ─────────────────────────────────────────────────────────── */
.smart-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s, box-shadow 0.1s, background 0.15s, color 0.15s;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    position: relative;
}
.smart-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.smart-chip:active { transform: translateY(0); }

/* Stato 1 — Negativo (verde) */
.smart-chip.chip-negativo {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}
.smart-chip.chip-negativo::before {
    content: '✓';
    font-weight: 800;
    margin-right: 1px;
}

/* Stato 2 — Positivo (rosso) */
.smart-chip.chip-positivo {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
    font-weight: 700;
}
.smart-chip.chip-positivo::before {
    content: '!';
    font-weight: 900;
    margin-right: 1px;
}

/* Campo note per chip positivo */
.chip-note-field {
    display: none;
    margin-top: 0.35rem;
    width: 100%;
}
.chip-note-field.visible { display: block; }
.chip-note-field textarea {
    width: 100%;
    font-size: 0.78rem;
    border: 1.5px solid #fca5a5;
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    background: rgba(239, 68, 68, 0.06);
    color: #374151;
    resize: vertical;
    min-height: 48px;
    outline: none;
    transition: border-color 0.15s;
}
.chip-note-field textarea:focus { border-color: #ef4444; }

/* Hint sotto i chip (istruzioni) */
.chip-hint {
    font-size: 0.64rem;
    color: #94a3b8;
    margin-top: 0.2rem;
    font-style: italic;
}

/* Sezione chip con titolo */
.chip-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #f1f5f9;
}

/* Positivi panel items */
.positivi-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.74rem;
}
.positivi-item:last-child { border-bottom: none; }
.positivi-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    margin-top: 0.35rem;
}
.positivi-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 0.75rem;
    padding: 1rem 0;
}

/* ── Offcanvas clinico: scrollbar sottile ───────────────────────────────── */
.offcanvas-body::-webkit-scrollbar { width: 5px; }
.offcanvas-body::-webkit-scrollbar-track { background: #f1f5f9; }
.offcanvas-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.offcanvas-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS CONSOLE — "Smart Glass Console" paziente (v6)
   §6.8 — Glassmorphism universale, grid 3 zone, sticky top:60px
   3 zone: SX=Status Capsule · CENTRO=Bio-Timeline · DX=Bio-Alerts
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Glass Console wrapper (§2.4 v2.0 — Crystal Glass) ────────────────── */
/* ── GLASS CONSOLE v2.0 — Crystal Glass · sticky (CLAUDE.md §2.4) ────── */
.glass-console {
    position: sticky;
    top:       var(--topbar-h);
    z-index:   var(--z-glass-console);
    display:   grid;
    grid-template-columns: 1fr 2fr 1fr;  /* ★ MAI display:flex — CLAUDE.md §2.4 */
    align-items: stretch;
    min-height:  78px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    margin-bottom: 0;
    background:          var(--glass-crystal-bg);
    backdrop-filter:     var(--glass-crystal-blur);
    -webkit-backdrop-filter: var(--glass-crystal-blur);
    border-top:    var(--glass-specular);
    border-right:  var(--glass-border);
    border-bottom: var(--glass-border);
    border-left:   var(--glass-border);
    box-shadow:    0 4px 24px rgba(0, 0, 0, 0.08);
}
/* Retrocompatibilità — alias per template ancora su console-banner */
.console-banner { display: grid; grid-template-columns: 1fr 2fr 1fr; }
.console-banner-alto,
.console-banner-moderato,
.console-banner-fisiologica { background: transparent; border: none; }

/* ── Zona generica ─────────────────────────────────────────────────────── */
.console-zone {
    display: flex;
    align-items: center;
    padding: 0.7rem 1rem;
    gap: 0.6rem;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none !important;
    color: inherit !important;
}
.console-zone:hover  { background: rgba(255,255,255,0.55); }
.console-zone:focus  { outline: 2px solid #3b82f6; outline-offset: -2px; }
.console-zone-muted  { cursor: default; }
.console-zone-muted:hover { background: transparent; }

/* Zona SX — colonna 1 della grid */
.console-sz { justify-content: flex-start; }

/* Zona CENTRO — colonna 2, centrata: EG Island come focus assoluto */
.console-cz { justify-content: center; flex-wrap: wrap; gap: 0; }

/* Zona DX — colonna 3: metadata Età+TPAL in Slate-900, poi dati biometrici */
.console-dz {
    justify-content: flex-start;
    flex-wrap:       wrap;
    align-content:   center;
}
/* Metadata secondaria DX — Età + TPAL in Slate-900 sottile */
.console-dz .console-stat-val  { color: #0f172a; font-weight: 700; }
.console-dz .console-stat-lbl  { color: #64748b; }
/* Prima stat DX (Età) — slightly smaller per scala gerarchica */
.console-dz .console-stat:first-child .console-stat-val { font-size: 0.88rem; }

/* ── Divisori ──────────────────────────────────────────────────────────── */
.console-vdivider {
    width: 1px;
    align-self: stretch;
    margin: 0.55rem 0;
    background: rgba(148,163,184,0.3);
    flex-shrink: 0;
}
.console-mdivider {
    width: 1px;
    height: 30px;
    background: rgba(148,163,184,0.3);
    flex-shrink: 0;
    margin: 0 0.5rem;
    align-self: center;
}

/* ── Avatar ────────────────────────────────────────────────────────────── */
.console-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg,#5AABDB,#3d8fc0);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.88rem; color: #fff; letter-spacing: 0.04em;
    box-shadow: 0 3px 10px rgba(90,171,219,0.35);
    flex-shrink: 0;
    user-select: none;
}

/* ── Blocco identità ───────────────────────────────────────────────────── */
.console-identity  { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.console-nome-row  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.console-nome {
    font-size: 1.15rem; font-weight: 900; color: #0f172a; line-height: 1.15;
    letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 195px;
}
.console-cf {
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Mono', Menlo, monospace;
    font-size: 0.67rem; color: #94a3b8; letter-spacing: 0.08em;
}

/* ── Risk pill (capsula rischio) ───────────────────────────────────────── */
.console-risk-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.67rem; font-weight: 700; padding: 0.12rem 0.5rem;
    border-radius: 20px; border: 1.5px solid; white-space: nowrap;
    letter-spacing: 0.02em; cursor: default;
}
.console-risk-fisiologica { background: rgba(22,163,74,0.10); color: #16a34a; border-color: rgba(22,163,74,0.28); }
.console-risk-moderato    { background: rgba(234,179,8,0.12); color: #ca8a04; border-color: rgba(234,179,8,0.30); }
.console-risk-alto        {
    background: rgba(220,38,38,0.12); color: #dc2626; border-color: rgba(220,38,38,0.30);
    animation: risk-pulse 2s ease-in-out infinite;
}

/* ── Stat unit ─────────────────────────────────────────────────────────── */
.console-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 0 0.3rem; white-space: nowrap;
}
.console-stat-val {
    font-size: 1.0rem; font-weight: 800; color: #1e293b; line-height: 1;
}
.console-stat-lbl {
    font-size: 0.59rem; color: #6b7280; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* Monospace elegante per valori numerici (EG, DPP, peso) */
.console-mono {
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Mono', Menlo, monospace !important;
}

/* ── EG badge trimestrale ──────────────────────────────────────────────── */
.console-eg-badge {
    font-size: 0.84rem; font-weight: 800; padding: 0.17rem 0.58rem;
    border-radius: 20px; border: 1.5px solid; line-height: 1.2; letter-spacing: 0.02em;
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace;
}
.console-eg-trim1 { background: #dcfce7; color: #16a34a; border-color: #86efac; }
.console-eg-trim2 { background: #dbeafe; color: #2563eb; border-color: #93c5fd; }
.console-eg-trim3 { background: #f3e8ff; color: #7c3aed; border-color: #c4b5fd; }

/* ── EG ISLAND — Focus pill CENTRO con pulsing glow trimestrale (FASE 3) ──
   --eg-glow-color: impostato via style inline dal template Jinja2.
   Pillola autonoma che enfatizza l'età gestazionale come dato primario.
════════════════════════════════════════════════════════════════════════ */
.console-eg-island {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
    padding:        0.48rem 1.10rem;
    border-radius:  16px;
    background:     rgba(255, 255, 255, 0.62);
    border:         1.5px solid var(--eg-glow-color, rgba(37,99,235,0.32));
    border-top:     1.5px solid rgba(255, 255, 255, 0.88);
    animation:      eg-island-glow 2.8s ease-in-out infinite;
}
@keyframes eg-island-glow {
    0%,  100% {
        box-shadow: 0 0 10px var(--eg-glow-color, rgba(37,99,235,0.18)),
                    0 2px  8px rgba(0, 0, 0, 0.06);
    }
    50% {
        box-shadow: 0 0 24px var(--eg-glow-color, rgba(37,99,235,0.42)),
                    0 4px 16px rgba(0, 0, 0, 0.08);
    }
}
/* EG badge dentro island: leggermente più grande, testo su z-index sopra glow */
.console-eg-island .console-eg-badge {
    font-size: 1.05rem !important;
    padding:   0.22rem 0.72rem !important;
    position:  relative;
    z-index:   1;
}
/* DPP riga sotto il badge */
.console-eg-dpp {
    font-size:      0.68rem;
    color:          #64748b;
    font-weight:    600;
    letter-spacing: 0.01em;
    white-space:    nowrap;
    position:       relative;
    z-index:        1;
}
.console-eg-dpp strong {
    color:       #1e293b;
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace;
    font-weight: 700;
}

/* ── FASE 5 — Scroll offset anchor link sidebar (Diamond Cockpit) ──
   Compensa sticky header: --topbar-h = 86px + 12px respiro visivo.
   Tutti gli id="section-*" del template si comportano correttamente.
════════════════════════════════════════════════════════════════════ */
[id^="section-"] {
    scroll-margin-top: calc(var(--topbar-h) + 12px);
}

/* ── TPAL formula ──────────────────────────────────────────────────────── */
.console-tpal {
    font-size: 0.76rem; font-weight: 700; color: #475569; letter-spacing: 0.03em;
    background: #f1f5f9; padding: 0.12rem 0.4rem; border-radius: 8px; border: 1px solid #e2e8f0;
}

@keyframes rh-neg-glow {
    0%,  100% { box-shadow: 0 0  6px rgba(239,68,68,0.40), 0 0  2px rgba(239,68,68,0.30); }
    50%        { box-shadow: 0 0 16px rgba(239,68,68,0.75), 0 0  8px rgba(239,68,68,0.45); }
}

/* ── Gruppo sanguigno ──────────────────────────────────────────────────── */
.console-gs-pos {
    font-size: 0.84rem; font-weight: 700; color: #16a34a;
    background: #dcfce7; padding: 0.17rem 0.55rem; border-radius: 20px;
    border: 1.5px solid #86efac; line-height: 1.2; cursor: default;
}
/* ── Rh-negativo: Vision Glow rosso pulsante (FASE 4) ──────────────────── */
/* BOX SCURO per Rh negativo: massima visibilità clinica */
.console-gs-neg {
    font-size: 0.84rem; font-weight: 800; color: #fff;
    background: #1e293b;          /* dark slate */
    padding: 0.17rem 0.6rem; border-radius: 20px;
    border: 2px solid #ef4444;
    animation: rh-neg-glow 2.2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(239,68,68,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
    letter-spacing: 0.04em; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    cursor: pointer; line-height: 1.2;
    animation: rh-neg-pulse 3s ease-in-out infinite;
}
@keyframes rh-neg-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(239,68,68,0.45); }
    50%       { box-shadow: 0 0 20px rgba(239,68,68,0.75); }
}

/* ── Peso e BMI ────────────────────────────────────────────────────────── */
.console-peso-row  { display: flex; align-items: baseline; gap: 5px; }
.console-bmi-pill  {
    font-size: 0.63rem; font-weight: 700; padding: 0.08rem 0.38rem;
    background: #f1f5f9; border-radius: 8px; border: 1px solid #e2e8f0; line-height: 1.2;
}

/* ── Spie glassmorphism ────────────────────────────────────────────────── */
.console-spie { display: flex; align-items: center; gap: 0.7rem; }
.console-spia { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: help; }

/* Dot vetroso */
.spia-dot {
    width: 18px; height: 18px; border-radius: 50%;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    position: relative; flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}
.spia-dot::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    transform: translate(-50%, -50%);
}
.console-spia:hover .spia-dot { transform: scale(1.3); }

.spia-label {
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; line-height: 1;
}

/* Varianti colore spie */
.spia-verde .spia-dot {
    background: rgba(34,197,94,0.18); border: 1.5px solid rgba(34,197,94,0.65);
    box-shadow: 0 0 8px rgba(34,197,94,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.spia-verde .spia-dot::after { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.spia-verde .spia-label { color: #15803d; }

.spia-rosso .spia-dot {
    background: rgba(239,68,68,0.18); border: 1.5px solid rgba(239,68,68,0.6);
    box-shadow: 0 0 8px rgba(239,68,68,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    animation: spia-glow-rosso 1.6s ease-in-out infinite;
}
.spia-rosso .spia-dot::after { background: #ef4444; box-shadow: 0 0 5px #ef4444; }
.spia-rosso .spia-label { color: #dc2626; }

.spia-giallo .spia-dot {
    background: rgba(245,158,11,0.18); border: 1.5px solid rgba(245,158,11,0.55);
    box-shadow: 0 0 6px rgba(245,158,11,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.spia-giallo .spia-dot::after { background: #f59e0b; box-shadow: 0 0 4px #f59e0b; }
.spia-giallo .spia-label { color: #d97706; }

.spia-neutro .spia-dot {
    background: rgba(148,163,184,0.18); border: 1.5px solid rgba(148,163,184,0.4);
    box-shadow: 0 0 4px rgba(148,163,184,0.2);
}
.spia-neutro .spia-dot::after { background: #94a3b8; }
.spia-neutro .spia-label { color: #94a3b8; }

/* Pulsazione urgente (Rh profilassi imminente) */
.spia-pulse { animation: spia-glow-rosso 1.2s ease-in-out infinite !important; }
@keyframes spia-glow-rosso {
    0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,0.4); }
    50%       { box-shadow: 0 0 20px rgba(239,68,68,0.85); }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
    .glass-console, .console-banner { grid-template-columns: minmax(190px,1fr) 2fr minmax(160px,1fr); }
    .console-nome { max-width: 160px; }
}
@media (max-width: 767px) {
    .glass-console, .console-banner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .console-sz { grid-column: 1 / -1; border-bottom: 1px solid rgba(148,163,184,0.2); }
    .console-cz { grid-column: 1 / 2; justify-content: flex-start; }
    .console-dz { grid-column: 2 / 3; }
    .console-vdivider { display: none; }
    .console-nome { max-width: 220px; }
}
/* ── MICRO (480px) — glass-console: 3 colonne → 1 colonna verticale ── */
@media (max-width: 480px) {
    .glass-console {
        grid-template-columns: 1fr;   /* ★ stack verticale su micro — elimina overflow orizzontale */
    }
    .console-sz,
    .console-cz,
    .console-dz { grid-column: 1 / -1; }
    .console-vdivider { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RIGHELLO GESTAZIONALE — Milestone cliniche (§6.8)
   ═══════════════════════════════════════════════════════════════════════════ */
.ruler-gestazionale {
    position: relative;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    height: 52px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    background: var(--glass-soft-bg);
    backdrop-filter: var(--glass-soft-blur);
    -webkit-backdrop-filter: var(--glass-soft-blur);
    border-top: none;
    border-right: var(--glass-border);
    border-bottom: var(--glass-border);
    border-left: var(--glass-border);
}
/* Sfondo bande trimestrali */
.ruler-bg-track {
    position: absolute;
    inset: 0;
    display: flex;
}
/* ── Bande trimestrali — gradienti sfumati Hyper-Depth (FASE 4) ── */
.ruler-t1 { background: linear-gradient(90deg, rgba(219,234,254,0.75) 0%, rgba(224,242,254,0.90) 80%, rgba(209,250,229,0.55) 100%); }
.ruler-t2 { background: linear-gradient(90deg, rgba(220,252,231,0.65) 0%, rgba(209,250,229,0.85) 70%, rgba(243,232,255,0.50) 100%); }
.ruler-t3 { background: linear-gradient(90deg, rgba(243,232,255,0.70) 0%, rgba(237,233,254,0.88) 100%); }

/* Etichette trimestre */
.ruler-tlabel {
    position: absolute;
    bottom: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.55;
    pointer-events: none;
    text-transform: uppercase;
}

/* ── Cursore EG — Hyper-Depth (FASE 4: Righello Gestazionale Liquido) ────── */
.ruler-cursor {
    position:      absolute;
    top: 0; bottom: 0;
    width:         3px;
    background:    linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.95)  0%,
        rgba(59, 130, 246, 0.80) 50%,
        rgba(15, 23, 42, 0.70)  100%
    );
    border-radius: 2px;
    box-shadow:    0 0 10px rgba(59, 130, 246, 0.55),
                   0 0  4px rgba(15,  23, 42,  0.70);
    pointer-events: none;
    z-index: 10;
    animation: ruler-cursor-pulse 2.8s ease-in-out infinite;
}
@keyframes ruler-cursor-pulse {
    0%,  100% { box-shadow: 0 0  8px rgba(59,130,246,0.45), 0 0 3px rgba(15,23,42,0.70); }
    50%        { box-shadow: 0 0 18px rgba(59,130,246,0.75), 0 0 7px rgba(59,130,246,0.40); }
}
.ruler-cursor-label {
    position: absolute;
    top: 3px;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 800;
    color: #1e293b;
    font-family: ui-monospace, 'SF Mono', monospace;
    white-space: nowrap;
    background: rgba(255,255,255,0.85);
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid rgba(30,41,59,0.25);
}

/* Milestone marker — funziona sia come <div> che come <a> (deep-link PDF) */
.ruler-milestone {
    position: absolute;
    top: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 8;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
/* Marker senza PDF associato — cursore help */
.ruler-milestone-no-pdf { cursor: help; }
.ruler-milestone-line {
    width: 1.5px;
    flex: 1;
    opacity: 0.7;
}
.ruler-milestone-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    flex-shrink: 0;
    margin-top: 2px;
}
.ruler-milestone-tooltip {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 20;
}
.ruler-milestone:hover .ruler-milestone-tooltip { opacity: 1; }

/* Varianti colore milestone */
.ruler-ms-viola .ruler-milestone-line  { background: #7c3aed; }
.ruler-ms-viola .ruler-milestone-dot   { background: #7c3aed; }
.ruler-ms-blu   .ruler-milestone-line  { background: #2563eb; }
.ruler-ms-blu   .ruler-milestone-dot   { background: #2563eb; }
.ruler-ms-arancio .ruler-milestone-line { background: #f59e0b; }
.ruler-ms-arancio .ruler-milestone-dot  { background: #f59e0b; }
.ruler-ms-rosso .ruler-milestone-line  { background: #ef4444; }
.ruler-ms-rosso .ruler-milestone-dot   { background: #ef4444; }
.ruler-ms-verde .ruler-milestone-line  { background: #16a34a; }
.ruler-ms-verde .ruler-milestone-dot   { background: #16a34a; }

/* Anti-D pulse se Rh- */
.ruler-ms-antid-pulse .ruler-milestone-dot {
    animation: spia-glow-rosso 1.4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(239,68,68,0.7);
}

/* ════════════════════════════════════════════════════════════════
   FASE 2 — CORNICE 🖼️ — raccordi layout & card glass
   Integra il design system con componenti Bootstrap esistenti
════════════════════════════════════════════════════════════════ */

/* Cards in Main Stage — Soft Glass (CLAUDE.md §2.5)
   Sostituisce background:#ffffff opaco quando dentro .main-stage */
.main-stage .card {
    background: var(--glass-soft-bg);
    backdrop-filter: var(--glass-soft-blur);
    -webkit-backdrop-filter: var(--glass-soft-blur);
    border-top: var(--glass-specular);
    border-left: var(--glass-border);
    border-right: var(--glass-border);
    border-bottom: var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Card header standard — mantiene contrasto WCAG AA */
.main-stage .card-header {
    background: rgba(255, 255, 255, 0.70);
    border-bottom: var(--glass-border);
    color: var(--text-primary);
}

/* Colori card header clinici — mantengono il loro sfondo semantico */
.main-stage .card-header.card-header-blu    { background: rgba(219, 234, 254, 0.85); }
.main-stage .card-header.card-header-verde  { background: rgba(220, 252, 231, 0.85); }
.main-stage .card-header.card-header-giallo { background: rgba(254, 243, 199, 0.85); }
.main-stage .card-header.card-header-rosso  { background: rgba(254, 226, 226, 0.85); }
.main-stage .card-header.card-header-viola  { background: rgba(243, 232, 255, 0.85); }

/* Sidebar scrollbar sottile per .glass-sidebar */
.glass-sidebar::-webkit-scrollbar        { width: 4px; }
.glass-sidebar::-webkit-scrollbar-thumb  { background: rgba(100,116,139,0.25); border-radius: 4px; }
.glass-sidebar::-webkit-scrollbar-track  { background: transparent; }

/* Utility Drawer scrollbar sottile */
.utility-drawer::-webkit-scrollbar       { width: 4px; }
.utility-drawer::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.25); border-radius: 4px; }

/* FAB hover — coerente con §2.9 */
#fab-feedback:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.55) !important;
}

/* ════════════════════════════════════════════════════════════════
   FASE 1 — DNA 🧬 — LIQUID MEDICAL GLASS v2.0
   Iniettato: 2026-03-14 · CLAUDE.md §2.1 — §2.7 — §7
════════════════════════════════════════════════════════════════ */

/* ── CLASSI GLASS RIUSABILI ─────────────────────────────────── */

/* Crystal: Header + Contextual Console (più trasparente) */
.glass-crystal {
    background:          var(--glass-crystal-bg);
    backdrop-filter:     var(--glass-crystal-blur);
    -webkit-backdrop-filter: var(--glass-crystal-blur);
    border-top:          var(--glass-specular);
    border-left:         var(--glass-border);
    border-right:        var(--glass-border);
    border-bottom:       var(--glass-border);
}

/* Satin: Navigation Sidebar + Utility Drawer (opacità media) */
.glass-satin {
    background:          var(--glass-satin-bg);
    backdrop-filter:     var(--glass-satin-blur);
    -webkit-backdrop-filter: var(--glass-satin-blur);
    border-top:          var(--glass-specular);
    border-left:         var(--glass-border);
    border-right:        var(--glass-border);
    border-bottom:       var(--glass-border);
}

/* Soft: Cards + Form panels + Main Stage (quasi opaco) */
.glass-soft {
    background:          var(--glass-soft-bg);
    backdrop-filter:     var(--glass-soft-blur);
    -webkit-backdrop-filter: var(--glass-soft-blur);
    border-top:          var(--glass-specular);
    border-left:         var(--glass-border);
    border-right:        var(--glass-border);
    border-bottom:       var(--glass-border);
}

/* Fallback: browser senza backdrop-filter (Firefox < 103, vecchi Safari) */
@supports not (backdrop-filter: blur(1px)) {
    .glass-crystal { background: rgba(255, 255, 255, 0.95); }
    .glass-satin   { background: rgba(255, 255, 255, 0.97); }
    .glass-soft    { background: rgba(255, 255, 255, 0.99); }
}

/* ── APP HEADER v3.0 — Due righe: Header Row + Breadcrumb Row ─── */
.app-header {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    height:          var(--topbar-h);   /* 60px barra unica */
    z-index:         var(--z-app-header);
    display:         flex;
    flex-direction:  column;
    align-items:     stretch;
    background:      var(--glass-crystal-bg);
    backdrop-filter: var(--glass-crystal-blur);
    -webkit-backdrop-filter: var(--glass-crystal-blur);
    border-top:      var(--glass-specular);
    border-bottom:   1px solid rgba(255, 255, 255, 0.18);
    box-shadow:      0 4px 32px rgba(0, 0, 0, 0.10),
                     0 1px  8px rgba(0, 0, 0, 0.06);
}

/* Barra unica 60px — Logo · Nav inline · Paziente · Utente/Data */
.app-header-row {
    display:      flex;
    align-items:  center;
    height:       var(--topbar-row);
    padding:      0 1.25rem 0 1.5rem;   /* ★ logo ancorato a 1.5rem sx */
    gap:          0.75rem;
    flex-shrink:  0;
}

/* Inline breadcrumb nav — tra logo e patient context */
.app-header-nav {
    display:        flex;
    align-items:    center;
    flex:           1;
    min-width:      0;
    overflow:       hidden;
}
.app-header-nav nav { display: flex; align-items: center; }
.app-header-nav .bc-glass {
    display:     flex;
    align-items: center;
    list-style:  none;
    margin:      0;
    padding:     0;
    gap:         0;
    flex-wrap:   nowrap;
    overflow:    hidden;
    white-space: nowrap;
}
.app-header-nav .bc-pill {
    display:         inline-flex;
    align-items:     center;
    padding:         0.22rem 0.55rem;
    border-radius:   6px;
    font-size:       0.72rem;
    font-weight:     500;
    color:           #64748b;
    text-decoration: none;
    transition:      background 0.15s, color 0.15s;
    white-space:     nowrap;
    border:          none;
    background:      transparent;
}
.app-header-nav .bc-pill:hover {
    background: rgba(37, 99, 235, 0.07);
    color:      var(--blu-d);
}
.app-header-nav .bc-pill-active {
    color:       #0f172a;
    font-weight: 600;
}
.app-header-nav .bc-sep {
    color:    rgba(100, 116, 139, 0.45);
    font-size: 0.75rem;
    padding:  0 0.1rem;
    list-style: none;
}

/* Breadcrumb row legacy — nascosta, tenuta per compatibilità media queries */
.app-header-breadcrumb { display: none; }

/* ══════════════════════════════════════════════════════════════
   GLASS SIDEBAR v2.1 — Slim (70px) con Hover Espansione (240px)
   Overlay: vola sopra il main-stage via position:fixed (nessuno spostamento)
   Labels: opacity 0 collassata → opacity 1 espansa con fade-in
══════════════════════════════════════════════════════════════ */
.glass-sidebar {
    position:   fixed;
    left:       0;
    top:        var(--topbar-h);
    bottom:     var(--footer-h);
    width:      var(--sidebar-w);          /* 70px default — collassata */
    z-index:    var(--z-glass-sidebar);    /* 1070 — sopra main-stage */
    overflow:   hidden;                    /* clip label text quando collassata */
    display:    flex;
    flex-direction: column;
    padding:    0.75rem 0;
    background:          var(--glass-satin-bg);
    backdrop-filter:     var(--glass-satin-blur);
    -webkit-backdrop-filter: var(--glass-satin-blur);
    border-top:   var(--glass-specular);
    border-right: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow:   2px 0 20px rgba(0, 0, 0, 0.08);
    /* Transizione fluida collassa ↔ espandi */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
}

/* Espansione su hover — vola sopra il contenuto senza spostarlo */
.glass-sidebar:hover {
    width:      var(--sidebar-w-expanded);  /* 240px */
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.14);
    overflow-y: auto;  /* mostra scrollbar solo quando espansa */
}

/* ── Voce di navigazione — icona centrata a 70px, label a scomparsa ── */
.glass-sidebar .sidebar-nav-item {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    /* padding-left 25px centra icona 20px in larghezza 70px: (70-20)/2 = 25px */
    padding:         0.65rem 0 0.65rem 25px;
    color:           var(--text-primary);
    text-decoration: none;
    border-radius:   10px;
    margin:          0.1rem 0;   /* no horizontal margin — overflow:hidden gestisce i bordi */
    font-size:       0.875rem;
    font-weight:     500;
    white-space:     nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-sidebar .sidebar-nav-item:hover {
    background: rgba(59, 130, 246, 0.10);
    color:      #1d4ed8;
    transform:  translateX(2px);
}
.glass-sidebar .sidebar-nav-item.active {
    background:  rgba(59, 130, 246, 0.13);
    color:       #1d4ed8;
    font-weight: 600;
}
/* §N active-scroll — sezione correntemente visibile durante lo scroll.
   Satin Glass 0.35: più opaco dell'active statico per segnalare la posizione live. */
.glass-sidebar .sidebar-nav-item.active-scroll {
    background:        rgba(255, 255, 255, 0.35);
    backdrop-filter:   blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    color:             #0f172a;
    font-weight:       700;
    box-shadow:        inset 0 1px 0 rgba(255,255,255,0.7),
                       0 1px 6px rgba(0,0,0,0.06);
    border-left:       2px solid rgba(59,130,246,0.5);
    padding-left:      23px; /* compensa i 2px del border */
    transition:        background 0.18s cubic-bezier(0.16,1,0.3,1),
                       box-shadow 0.18s ease;
}
.glass-sidebar .sidebar-nav-item.active-scroll i {
    color: #2563eb;
}
.glass-sidebar .sidebar-nav-item i,
.glass-sidebar .sidebar-nav-item svg {
    width:       20px;
    min-width:   20px;   /* impedisce shrink quando il testo appare */
    flex-shrink: 0;
    font-size:   1.15rem;
    text-align:  center;
}

/* ── Label testuale — invisibile collassata, fade-in su hover sidebar ── */
.glass-sidebar .sidebar-label {
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.18s ease;
    /* non aggiungere transition-delay qui: il fade-out deve essere rapido */
}
.glass-sidebar:hover .sidebar-label {
    opacity:          1;
    pointer-events:   auto;
    transition-delay: 0.12s;  /* appare leggermente dopo che la sidebar ha iniziato ad aprirsi */
}

/* ── Section label — nascosta collassata, appare su hover ── */
.glass-sidebar .sidebar-section-label {
    font-size:      0.65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          #94a3b8;
    padding:        0.5rem 0 0.25rem 25px;
    opacity:        0;
    transition:     opacity 0.15s ease;
    white-space:    nowrap;
}
.glass-sidebar:hover .sidebar-section-label {
    opacity:          1;
    transition-delay: 0.10s;
}

/* ── Spacer e Divider ── */
.glass-sidebar .sidebar-spacer  { flex: 1; }
.glass-sidebar .sidebar-divider {
    height:     1px;
    background: rgba(0, 0, 0, 0.07);
    margin:     0.5rem 0;  /* no margin laterale — overflow gestisce */
}

/* (glass-console v2.0 — merged above at line ~1515) */

/* ── MAIN STAGE v2.2 (CLAUDE.md §2.5) ───────────────────────────
   margin-left: 70px (sidebar collassata) — la sidebar espansa vola sopra.
   border-top-left-radius: raccordo morbido con sidebar (iOS 26 joint).   ── */
.main-stage {
    background:             transparent !important;
    margin-left:            var(--sidebar-w);   /* 70px — fisso */
    margin-top:             7rem !important;    /* 112px — sincronizzato a --topbar-h 110px + 2px clearance */
    margin-bottom:          var(--footer-h);
    padding:                1rem 2rem 1.5rem 2rem; /* ★ v2.5: padding-left 2rem → absolute 102px = --master-col */
    min-height:             calc(100vh - var(--topbar-h) - var(--footer-h));
    border-top-left-radius: 24px;
}

/* ── Super-Glass Search Pill (LIQUID_GLASS.md §1, FASE 4) ─────── */
#searchInput {
    transition: transform var(--transition-spring),
                box-shadow var(--transition-spring),
                width      var(--transition-spring) !important;
}
#searchInput:focus {
    transform:  scale(1.02) !important;
    box-shadow: 0 0 0 2.5px rgba(59, 130, 246, 0.35),
                0 4px 20px rgba(59, 130, 246, 0.20) !important;
    outline:    none !important;
    width:      min(280px, 70vw) !important;   /* ★ fluido: max 280px desktop, proporzionale su mobile */
    background: rgba(255, 255, 255, 0.60) !important;
}
#searchInput::placeholder { opacity: 0.4; }

/* ── Glass Slab Danger Glow (Observer — pronto per backend) ─────
   Attivato quando la slab riceve data-state="danger" dal backend.
   Nessun blur: ECCEZIONE CRITICA hardware-safe.                ── */
.glass-slab[data-state="danger"],
.glass-slab-master[data-state="danger"] {
    box-shadow: 0 0 15px rgba(255, 45, 85, 0.40),
                0 8px 28px rgba(255, 45, 85, 0.14) !important;
    border-top-color:    rgba(255, 45, 85, 0.20) !important;
    border-left-color:   rgba(255, 45, 85, 0.12) !important;
    border-right-color:  rgba(255, 45, 85, 0.08) !important;
    border-bottom-color: rgba(255, 45, 85, 0.08) !important;
}
.glass-slab[data-state="danger"] .slab-avatar,
.glass-slab-master[data-state="danger"] .slab-avatar {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* ── UTILITY DRAWER — RIMOSSO 2026-03-19 ────────────────────── */
/*    L'Ala Destra (Utility Drawer) è stata definitivamente eliminata.
      Motivo: nessun trigger HTML attivo in scheda_paziente.html.
      Funzioni migrate: Note Rapide → Sidebar item / A.R.I.A. → Glass Console DX.
      CSS preservato come commento per rollback se necessario:

.utility-drawer { position:fixed; right:0; width:var(--drawer-w); ... }
.utility-tab { position:absolute; left:-32px; width:32px; height:80px; ... }
@keyframes tab-pulse-danger { ... }  [vibrazione + glow rosso]

      Variabili CSS preservate in :root (--drawer-w: 300px, --z-utility-drawer: 1060)
      per compatibilità con eventuali futuri componenti.
*/

/* ── UNIFIED SATIN TIMELINE — Ruler Visit / Eco Pills (§T 2026-03-19) ─── */
/* Visite (dot blu circolare) e Ecografie (dot viola diamante) sul righello. */
.ruler-visit-pill {
    position:   absolute;
    bottom:     3px;
    transform:  translateX(-50%);
    cursor:     pointer;
    z-index:    9;
    display:    flex;
    flex-direction: column;
    align-items: center;
}
.ruler-vp-dot {
    width:        8px;
    height:       8px;
    border:       1.5px solid rgba(255,255,255,0.90);
    transition:   transform 0.15s ease;
}
.ruler-visit-pill:hover .ruler-vp-dot { transform: scale(1.65); }

/* Visita — dot BLU circolare */
.ruler-vp-visita .ruler-vp-dot {
    border-radius: 50%;
    background:    #3b82f6;
    box-shadow:    0 0 5px rgba(59,130,246,0.55), 0 1px 3px rgba(0,0,0,0.22);
}

/* Ecografia — dot VIOLA a diamante (ruota 45°) */
.ruler-vp-eco .ruler-vp-dot {
    border-radius: 2px;
    background:    #7c3aed;
    transform:     rotate(45deg);
    box-shadow:    0 0 5px rgba(124,58,237,0.55), 0 1px 3px rgba(0,0,0,0.22);
}
.ruler-visit-pill.ruler-vp-eco:hover .ruler-vp-dot {
    transform: rotate(45deg) scale(1.65);
}

/* Tooltip flottante */
.ruler-vp-tooltip {
    position:       absolute;
    bottom:         13px;
    left:           50%;
    transform:      translateX(-50%);
    background:     rgba(15,23,42,0.90);
    color:          #f8fafc;
    font-size:      0.59rem;
    font-weight:    600;
    padding:        2px 6px;
    border-radius:  5px;
    white-space:    nowrap;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.15s ease;
    backdrop-filter: blur(4px);
    border:         1px solid rgba(255,255,255,0.12);
}
.ruler-visit-pill:hover .ruler-vp-tooltip { opacity: 1; }

/* ── A.R.I.A. HIGH RISK COMPOSITE ALERT — Glass Console DX (§T 2026-03-19) ── */
/* Attivo solo se: Radar ROSSO (≥1 positivo) AND Doppler Eco alert */
.console-aria-high-risk {
    display:      flex;
    align-items:  center;
    gap:          0.3rem;
    padding:      0.25rem 0.50rem;
    border-radius: 9px;
    background:   rgba(239,68,68,0.12);
    border:       1px solid rgba(239,68,68,0.38);
    color:        #b91c1c;
    font-size:    0.62rem;
    font-weight:  700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    animation:    aria-high-risk-pulse 1.6s ease-in-out infinite;
    cursor:       pointer;
    user-select:  none;
}
@keyframes aria-high-risk-pulse {
    0%,  100% { box-shadow: 0 0 0   0   rgba(239,68,68,0.00); opacity: 1;    }
    50%        { box-shadow: 0 0 14px 3px rgba(239,68,68,0.32); opacity: 0.88; }
}

/* ── APP FOOTER / STATUS BAR v2.0 (CLAUDE.md §2.7) ──────────── */
.app-footer {
    position: fixed;
    bottom:   0;
    left:     0;
    right:    0;
    height:   var(--footer-h);
    z-index:  var(--z-app-footer);
    display:  flex;
    align-items: center;
    padding:  0 1rem;
    gap:      1.5rem;
    font-size: 0.7rem;
    color:     var(--text-muted-glass);
    background:          var(--glass-crystal-bg);           /* ★ Crystal Glass standard — allineato all'header */
    backdrop-filter:     var(--glass-crystal-blur);         /* ★ blur(60px) saturate(2.2) — era blur(8px) */
    -webkit-backdrop-filter: var(--glass-crystal-blur);
    border-top: var(--glass-specular);
}
.app-footer .footer-sep { opacity: 0.3; }

/* ── TIPOGRAFIA CLINICA — Monospace per dati numerici ───────────
   CLAUDE.md §2.1: EG, Pressione, CF, Valori lab, DPP, Peso, BMI, GPTAL
   MAI su etichette, nomi, descrizioni.                          ── */
.mono,
.eg-value, .dpp-value, .peso-value, .bmi-value,
.lab-value, .cf-value, .gptal-value, .pressure-value,
.eg-badge-mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* ── RISK PILL — Solo questo cambia colore in base al rischio ──
   La .glass-console resta Crystal invariato. (CLAUDE.md §2.4)  ── */
.risk-pill {
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    padding:         0.2rem 0.65rem;
    border-radius:   20px;
    font-size:       0.7rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.05em;
}
.risk-pill.risk-basso   { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; }
.risk-pill.risk-medio   { background: #fef3c7; color: #d97706; border: 1px solid #fcd34d; }
.risk-pill.risk-alto    { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.risk-pill.risk-critico {
    background: #dc2626;
    color:      #ffffff;
    border:     1px solid #b91c1c;
    animation:  spia-glow-rosso 1.4s ease-in-out infinite;
}

/* ── OBSERVER — Deep-link PDF tooltip ── */
.pdf-deep-link {
    display:     inline-flex;
    align-items: center;
    gap:         0.25rem;
    font-size:   0.72rem;
    color:       var(--blu-d);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    transition:  opacity 0.15s;
}
.pdf-deep-link:hover { opacity: 0.75; }
.pdf-deep-link.pdf-missing {
    color:  #94a3b8;
    cursor: default;
    pointer-events: none;
    border-bottom-style: dotted;
}

/* ══════════════════════════════════════════════════════════════
   KPI GLASS CARDS — mantenuta per compatibilità template secondari
══════════════════════════════════════════════════════════════ */
.kpi-glass-card {
    background:          var(--glass-soft-bg) !important;
    backdrop-filter:     var(--glass-soft-blur) !important;
    -webkit-backdrop-filter: var(--glass-soft-blur) !important;
    border-top:          1px solid rgba(255, 255, 255, 0.40) !important;
    border-right:        var(--glass-border) !important;
    border-bottom:       var(--glass-border) !important;
    border-radius:       14px !important;
    transition: transform      0.28s var(--spring-standard),
                box-shadow     0.28s var(--spring-standard),
                border-top-color 0.22s var(--ease-out-smooth) !important;
}
.kpi-glass-card:hover {
    transform:        translateY(-3px);
    border-top-color: rgba(255, 255, 255, 0.88) !important;
}

/* ══════════════════════════════════════════════════════════════
   LIQUID RIBBON — Indicatori KPI orizzontali iOS 26 (FASE 3 v5.0)
   Singola linea di pillole: border-radius 50px, glow cromatico,
   overflow-x:auto con scrollbar nascosta, spring physics.
   Fonte: LIQUID_GLASS.md §2.2 + swift_reference.md §1
══════════════════════════════════════════════════════════════ */
/* ── Ribbon wrapper — v3.2: column-gap:0, spaziatura via sep margin ── */
.kpi-ribbon {
    display:          flex;
    flex-wrap:        wrap;
    row-gap:          0.75rem;  /* spazio verticale quando i gruppi wrappano */
    column-gap:       0;        /* ★ ZERO — il gap tra gruppi lo decide il separatore */
    align-items:      flex-start;
    padding:          10px 0 18px 0;
}

/* ── Isole (gruppi) — v3.2: dimensione naturale, non crescono ── */
.kpi-ribbon-group {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            8px;
    flex:           0 0 auto;   /* niente crescita — la larghezza è quella delle sue pillole */
    min-width:      0;
    padding:        2px 4px;
}
.kpi-ribbon-pills {
    display:     flex;
    flex-wrap:   wrap;            /* ★ v2.8: pillole avvolte se il gruppo è troppo stretto */
    gap:         8px;             /* ↑ 6→8px: più aria tra pillole adiacenti */
    align-items: center;
    padding:     6px 2px;         /* spazio verticale per ombre superiori/inferiori */
}
/* Etichetta gruppo — piccola e discreta sopra le pillole */
.kpi-ribbon-glabel {
    font-size:      0.56rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--text-muted-glass);
    opacity:        0.55;
    padding-left:   14px;
    line-height:    1;
    margin-bottom:  2px;          /* gap visivo extra label→pillola */
}
/* Separatore verticale tra gruppi — v3.2 ── */
.kpi-ribbon-sep {
    flex:        0 0 1px;     /* occupa esattamente 1px nel flusso flex, mai cresce/shrinka */
    width:       1px;
    height:      52px;
    margin:      0 1.5rem;    /* 24px per lato = 49px totali — questa è la spaziatura inter-gruppo */
    align-self:  flex-end;
    background:  linear-gradient(
        180deg,
        transparent 0%,
        rgba(100, 116, 139, 0.28) 25%,
        rgba(100, 116, 139, 0.28) 75%,
        transparent 100%
    );
}

/* ── Pillola — Goccia di Vetro (Diamond Cockpit: niente inset multipli) ── */
.kpi-pill {
    display:           flex;
    align-items:       center;
    gap:               10px;
    padding:           0.70rem 1.40rem;
    border-radius:     50px;
    overflow:          hidden;           /* bordi netti, zero sbavature */
    background:        linear-gradient(
                           160deg,
                           rgba(255,255,255,0.52) 0%,
                           rgba(255,255,255,0.28) 100%
                       );
    backdrop-filter:   blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border:            1px solid rgba(255, 255, 255, 0.42);
    border-top:        1px solid rgba(255, 255, 255, 0.72);   /* speculare */
    box-shadow:        0 2px 12px rgba(0, 0, 0, 0.07),
                       0 0 0 0.5px rgba(0, 0, 0, 0.04);      /* single crisp ring */
    flex-shrink:       0;
    cursor:            default;
    white-space:       nowrap;
    transition:        transform    var(--transition-spring),
                       box-shadow   var(--transition-spring),
                       border-color var(--transition-out),
                       background   var(--transition-out);
}
.kpi-pill-interactive { cursor: pointer; }
.kpi-pill-interactive:hover {
    transform:  translateY(-3px) scale(1.03);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.11),
                0 0 18px var(--pill-glow, rgba(255,255,255,0.22));
    border-top-color: rgba(255, 255, 255, 0.95);
}
/* Stato filtro ATTIVO — glow esterno intenso, no inset confusi */
.kpi-pill-active {
    transform:        translateY(-2px) scale(1.05) !important;
    background:       linear-gradient(
                          160deg,
                          rgba(255,255,255,0.70) 0%,
                          rgba(255,255,255,0.42) 100%
                      ) !important;
    border-top-color: rgba(255, 255, 255, 0.98) !important;
    border-color:     rgba(255, 255, 255, 0.82) !important;
    box-shadow:       0 0 32px var(--pill-glow, rgba(59,130,246,0.50)),
                      0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
/* Icona circolare */
.kpi-pill-icon {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.88rem;
    flex-shrink:     0;
}
/* Testi pillola */
.kpi-pill-body {
    display:        flex;
    flex-direction: column;
    gap:            0;
}
.kpi-pill-label {
    font-size:      0.60rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--text-muted-glass);
    line-height:    1.2;
}
.kpi-pill-value {
    font-size:      1.42rem;
    font-weight:    900;
    line-height:    1.1;
    letter-spacing: -0.02em;
}
/* Glow pulsante — danger (rosso) */
.kpi-pill-danger {
    animation: pill-danger-pulse 2.5s ease-in-out infinite;
}
/* Glow pulsante — warning (arancio/giallo) */
.kpi-pill-warning {
    animation: pill-warning-pulse 3.2s ease-in-out infinite;
}
@keyframes pill-danger-pulse {
    0%,  100% { box-shadow: 0 0 14px rgba(239,68,68,0.28),  0 2px 8px rgba(0,0,0,0.06); }
    50%        { box-shadow: 0 0 28px rgba(239,68,68,0.55),  0 4px 16px rgba(239,68,68,0.14); }
}
@keyframes pill-warning-pulse {
    0%,  100% { box-shadow: 0 0 12px rgba(234,179,8,0.22),  0 2px 8px rgba(0,0,0,0.06); }
    50%        { box-shadow: 0 0 22px rgba(234,179,8,0.45),  0 4px 14px rgba(234,179,8,0.12); }
}

/* ══════════════════════════════════════════════════════════════
   MODAL — Sub-selettori strutturali (header/footer/label)
   La definizione principale di .modal-content è sotto (§7 Crystal Glass, 93% opacity).
   Questi sub-selettori gestiscono bordi interni, spaziatura e colori testo.
══════════════════════════════════════════════════════════════ */
.modal-content .modal-header  { border-bottom: 1px solid rgba(0,0,0,0.08); background: transparent; }
.modal-content .modal-footer  { border-top:    1px solid rgba(0,0,0,0.08); background: transparent; gap: 0.75rem; padding: 1rem 1.25rem; }
.modal-content .modal-title,
.modal-content .modal-body p,
.modal-content label          { color: #0f172a !important; }
.modal-content .modal-footer .btn { min-width: 110px; }

/* ── Glass Form Controls nei Modali (LIQUID_GLASS.md §5, FASE 4) ─────────
   Bordo speculare top, sfondo quasi invisibile, focus glow Vision Azzurro.
   ZERO backdrop-filter: rispetta ECCEZIONE CRITICA hardware-safe.        ── */
.modal-content .form-control,
.modal-content .form-select {
    background:    rgba(255, 255, 255, 0.60) !important;
    border:        none !important;
    border-top:    1px solid rgba(255, 255, 255, 0.55) !important;
    border-left:   1px solid rgba(255, 255, 255, 0.35) !important;
    border-right:  1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 10px !important;
    color:         #0f172a !important;
    transition:    box-shadow     var(--transition-spring),
                   background     var(--transition-out),
                   border-color   var(--transition-out) !important;
}
.modal-content .form-control:focus,
.modal-content .form-select:focus {
    background:          rgba(255, 255, 255, 0.88) !important;
    box-shadow:          0 0 0 3px rgba(59, 130, 246, 0.25),
                         0 2px 12px rgba(59, 130, 246, 0.15) !important;
    border-bottom-color: rgba(59, 130, 246, 0.40) !important;
    outline:             none !important;
}
.modal-content .form-control::placeholder { opacity: 0.45; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR COCKPIT MODE — auto-triggered quando `paziente` è nel
   contesto template (scheda_paziente, anamnesi, ecc.)
   MODALITÀ SISTEMA: nav standard. MODALITÀ COCKPIT: patient focus.
══════════════════════════════════════════════════════════════ */

/* Back button — direzione inversa, tono secondario */
.glass-sidebar .sidebar-back-item {
    color:   #64748b;
}
.glass-sidebar .sidebar-back-item:hover {
    color:      var(--blu-d);
    background: rgba(37, 99, 235, 0.08);
    transform:  translateX(-2px);   /* ← inverso: senso di "ritorno" */
}

/* Patient identity chip — compresso in 70px, pieno a 240px */
.sidebar-patient-chip {
    display:       flex;
    align-items:   center;
    gap:           0.7rem;
    padding:       0.40rem 0.6rem 0.40rem 19px;
    margin:        0.2rem 0 0.1rem;
    border-radius: 10px;
    background:    rgba(37, 99, 235, 0.07);
    border-left:   2.5px solid rgba(37, 99, 235, 0.38);
    overflow:      hidden;
}

/* Avatar circolare iniziali */
.sidebar-patient-avatar {
    width:           24px;
    height:          24px;
    min-width:       24px;
    border-radius:   50%;
    background:      rgba(37, 99, 235, 0.12);
    backdrop-filter: blur(8px) saturate(1.6);
    -webkit-backdrop-filter: blur(8px) saturate(1.6);
    color:           var(--blu-d);
    font-size:       0.57rem;
    font-weight:     800;
    display:         flex;
    align-items:     center;
    justify-content: center;
    letter-spacing:  0;
    line-height:     1;
    flex-shrink:     0;
    border:          1px solid rgba(37, 99, 235, 0.20);
}

/* Nome paziente — visibile solo quando sidebar espansa */
.sidebar-patient-name {
    font-size:      0.73rem;
    font-weight:    700;
    color:          #1e293b;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      140px;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.18s ease;
}
.glass-sidebar:hover .sidebar-patient-name {
    opacity:          1;
    pointer-events:   auto;
    transition-delay: 0.12s;
}

/* ── Sigillo d'Autore — Sidebar (FASE 5) ────────────────────────────────── */
.sidebar-firma {
    padding:        0.6rem 1rem 0.6rem;
    font-size:      0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--text-primary);
    opacity:        0.25;
    line-height:    1.6;
    display:        flex;
    flex-direction: column;
    gap:            0;
    transition:     opacity var(--transition-out),
                    text-shadow var(--transition-out);
    cursor:         default;
    user-select:    none;
    white-space:    nowrap;
    overflow:       hidden;
}
.sidebar-firma:hover {
    opacity:     0.80;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.60);
}
/* Nascosta quando la sidebar è collassata (label non visibili) */
.glass-sidebar:not(:hover) .sidebar-firma { opacity: 0; }
.glass-sidebar:hover .sidebar-firma { opacity: 0.80; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS SLABS — Elenco Pazienti iOS 26 Hyper-Depth (CLAUDE.md §2.3)
   Ogni paziente = isola di cristallo indipendente, 20px radius, 55px blur
   ═══════════════════════════════════════════════════════════════════════════ */

.glass-slab {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    padding:         0.85rem 1.2rem;
    margin-bottom:   12px;
    border-radius:   20px;
    background:      rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(55px) saturate(2.2);          /* ★ allineato a --glass-soft-blur token */
    -webkit-backdrop-filter: blur(55px) saturate(2.2);
    border-top:    1px solid rgba(255, 255, 255, 0.50);
    border-left:   1px solid rgba(255, 255, 255, 0.30);
    border-right:  1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:      0 12px 40px rgba(0, 0, 0, 0.08);
    text-decoration: none !important;
    color:           var(--text-primary) !important;
    cursor:          pointer;
    transition: transform      0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow     0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-top-color 0.2s ease;
}
.glass-slab:last-child { margin-bottom: 0; }
.glass-slab:hover {
    transform:        translateY(-4px) scale(1.02);
    box-shadow:       0 24px 64px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(59, 130, 246, 0.08);
    border-top-color: rgba(255, 255, 255, 0.92);   /* specular brillante su hover */
    color:            var(--text-primary) !important;
}

/* Avatar iniziali */
.slab-avatar {
    width:       40px;
    min-width:   40px;
    height:      40px;
    border-radius: 50%;
    background:  linear-gradient(135deg, var(--blu), var(--blu-d));
    color:       #fff;
    font-size:   0.76rem;
    font-weight: 700;
    display:     flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    box-shadow:  0 3px 10px rgba(90, 171, 219, 0.35);
    text-transform: uppercase;
}

/* Identità paziente */
.slab-identity {
    flex:     1;
    min-width: 0;
}
.slab-name {
    font-weight: 700;
    font-size:   0.95rem;
    color:       var(--text-primary);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.slab-cf {
    font-family: var(--font-mono);
    font-size:   0.68rem;
    color:       #94a3b8;
    letter-spacing: 0.05em;
    margin-top:  2px;
}

/* Metadati destra */
.slab-meta {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
    flex-shrink: 0;
}
.slab-stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            2px;
    min-width:      58px;
}
.slab-stat-val {
    font-size:   0.88rem;
    font-weight: 700;
    color:       var(--text-primary);
    line-height: 1;
}
.slab-stat-lbl {
    font-size:      0.58rem;
    color:          #94a3b8;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── Chevron ban — 7-Pillar §3 + LIQUID_GLASS.md §5: "Nessuna icona chevron direzionale" ──
   Le frecce direzionali (>) violano la fisica del vetro iOS 26: la lastra è un piano
   immersivo, non una lista navigabile con indicatori espliciti.                          ── */
.slab-chevron {
    display: none !important;   /* ELIMINATI — 7-Pillar §3 enforcement */
}

/* Container slabs — padding interno */
.glass-slabs-container {
    padding: 1rem 1.2rem 0.5rem;
}

/* Sort bar sopra le slabs */
.slabs-sort-bar {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    padding:     0.5rem 1.2rem;
    background:  rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size:   0.78rem;
    color:       #64748b;
}
.slabs-sort-btn {
    display:     inline-flex;
    align-items: center;
    gap:         0.3rem;
    padding:     0.25rem 0.7rem;
    border-radius: 8px;
    border:      1.5px solid rgba(59, 130, 246, 0.25);
    background:  rgba(219, 234, 254, 0.45);
    color:       var(--blu-d);
    font-size:   0.78rem;
    font-weight: 600;
    cursor:      pointer;
    text-decoration: none;
    transition:  background 0.15s, border-color 0.15s;
}
.slabs-sort-btn:hover {
    background:  rgba(219, 234, 254, 0.75);
    border-color: rgba(59, 130, 246, 0.5);
    color:       var(--blu-d);
    text-decoration: none;
}

/* Responsive: collassa meta su mobile */
@media (max-width: 640px) {
    .slab-meta { display: none; }
    .glass-slab { padding: 0.7rem 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUSPENDED LAYERS — 7-Pillar §7: Modal glass iOS 26
   Risolve Conflict C1 (backdrop) e C7 (content).
   7-Pillar Framework è la fonte di verità assoluta — overrides swift_ref.
   AVVERTENZA STRUTTURALE: i <div class="modal"> NON devono essere
   annidati dentro elementi con backdrop-filter (glass-slab, glass-console)
   → collocarli sempre fuori dai cicli di rendering vetro.
═══════════════════════════════════════════════════════════════════════════ */

/* §7 "Fumo Blu Notte" — blur(25px) per profondità fisica (LIQUID_GLASS.md §1) */
.modal-backdrop {
    z-index:              var(--z-modal-backdrop) !important;  /* 1085 */
    background-color:     rgba(15, 23, 42, 0.45)  !important;  /* 7-Pillar §7 */
    backdrop-filter:      blur(25px)               !important;
    -webkit-backdrop-filter: blur(25px)            !important;
}

/* §7 Modal content — Crystal Glass: 93% opacity, testo Slate 900 */
.modal { z-index: var(--z-modal) !important; }  /* 1090 */

.modal-content {
    background:          rgba(255, 255, 255, 0.93) !important;
    backdrop-filter:     blur(40px) saturate(2.2)  !important;
    -webkit-backdrop-filter: blur(40px) saturate(2.2) !important;
    border:              var(--glass-specular)      !important;
    border-radius:       20px                       !important;
    box-shadow:          0 20px 60px rgba(0, 0, 0, 0.22),
                         0  4px 16px rgba(0, 0, 0, 0.10) !important;
    color:               #0f172a                    !important;  /* Slate 900 — 7-Pillar §7 */
}
.modal-title,
.modal-body,
.modal-header { color: #0f172a !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS SLAB MASTER — Classe generica iOS 26 Hyper-Depth (CLAUDE.md §2.3)
   Usata per elenchi clinici: visite, analisi, utenti, ecografie
   Variante "soft": bg 0.40, blur 45px — meno aggressiva di .glass-slab
   ═══════════════════════════════════════════════════════════════════════════ */
.glass-slab-master {
    background:      rgba(255, 255, 255, 0.40);
    backdrop-filter: var(--glass-soft-blur);             /* ★ blur(45px) saturate(2.2) — token Soft Glass */
    -webkit-backdrop-filter: var(--glass-soft-blur);
    border-radius:   20px;
    border-top:    1px solid rgba(255, 255, 255, 0.50);
    border-left:   1px solid rgba(255, 255, 255, 0.30);
    border-right:  1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:    0 12px 40px rgba(0, 0, 0, 0.07);
    margin-bottom: 12px;
    color:         var(--text-primary);
    /* Spring Standard per hover (LIQUID_GLASS.md §2) — rimbalzo leggero */
    transition: transform        0.4s var(--spring-standard),
                box-shadow       0.4s var(--spring-standard),
                border-top-color 0.22s var(--ease-out-smooth);
}
.glass-slab-master:last-child { margin-bottom: 0; }
.glass-slab-master:hover {
    transform:        translateY(-4px) scale(1.02);
    box-shadow:       0 20px 56px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(59, 130, 246, 0.07);
    border-top-color: rgba(255, 255, 255, 0.92);
}
/* Variante cliccabile (link o onclick) */
a.glass-slab-master {
    text-decoration: none !important;
    color:           var(--text-primary) !important;
    display:         block;
    cursor:          pointer;
}
a.glass-slab-master:hover { color: var(--text-primary) !important; }

/* ── Separatore data nei panel clinici ── */
.slab-date-separator {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    padding:     0.3rem 0;
    margin-bottom: 8px;
    font-size:   0.7rem;
    font-weight: 700;
    color:       #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.slab-date-separator::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: rgba(0, 0, 0, 0.07);
}

/* ── Padding interno standard per i contenuti slab ── */
.slab-body { padding: 0.75rem 1rem; }
.slab-body-sm { padding: 0.55rem 0.85rem; }

/* ══════════════════════════════════════════════════════════════
   FASE 1 — SPECULAR FINISH & FULL FLUIDITY
   iOS 26 Liquid Glass: crystal border + 20px radius + padding 1.5rem
   Applicabile a qualsiasi slab/card che vuole il look "vetro inciso"
══════════════════════════════════════════════════════════════ */
.slab-specular {
    border-radius:   20px !important;
    border:          1px solid rgba(255, 255, 255, 0.42) !important;
    background:      rgba(255, 255, 255, 0.50);
    backdrop-filter: saturate(1.6) blur(18px);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    padding:         1.5rem !important;
    box-shadow:      0 4px 24px rgba(0,0,0,0.07),
                     inset 0 1px 0 rgba(255,255,255,0.65);
}

/* ── BCF Digital Pulse — battito fuori soglia (FASE 4) ─────────────────────
   Applica classe .bcf-pulse al contenitore del badge BCF quando fuori range.
   Usa CSS custom property --bcf-glow per permettere override da Jinja2.       ── */
@keyframes bcf-heartbeat {
    0%, 100% { box-shadow: 0 0 0 0 var(--bcf-glow, rgba(239,68,68,0)); }
    40%       { box-shadow: 0 0 0 5px var(--bcf-glow, rgba(239,68,68,0.20)); }
    60%       { box-shadow: 0 0 0 3px var(--bcf-glow, rgba(239,68,68,0.10)); }
}
.bcf-pulse {
    animation: bcf-heartbeat 1.5s ease-in-out infinite;
    border-radius: 8px;
}

/* ── Glass Action Pill — suggerimento clinico (FASE 4.4 CPR/Doppler) ────────
   Classe base per pill di azione vetro (usata anche via JS inline).            ── */
.glass-action-pill {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         0.40rem 0.85rem;
    border-radius:   20px;
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    font-size:       0.76rem;
    font-weight:     600;
    transition:      background var(--transition-out), box-shadow var(--transition-out);
}
.glass-action-pill-danger {
    background:  rgba(239, 68, 68, 0.10);
    border:      1px solid rgba(239, 68, 68, 0.35);
    box-shadow:  0 2px 12px rgba(239, 68, 68, 0.12);
    color:       #dc2626;
}
.glass-action-pill-warning {
    background:  rgba(234, 179, 8, 0.10);
    border:      1px solid rgba(234, 179, 8, 0.35);
    box-shadow:  0 2px 12px rgba(234, 179, 8, 0.10);
    color:       #b45309;
}

/* ── Settimane EG aggiuntive (trigger intergrowth badge) ── */
#intergrowth-live-badge {
    transition: opacity 0.3s var(--ease-out-smooth), transform 0.3s var(--spring-bouncy);
}

/* ══════════════════════════════════════════════════════════════════════════
   FOCUS MODE OBSERVER — §B Pillar 3 (SNLG 1/2025)
   Toggle nella glass-console (ancoraggio 102px).
   ON: card senza alert → dimmate (opacità 0.22, desaturate).
       card con alert   → illuminate (glow blu Vision Pro).
   Transizioni: 400ms ease — fluide su Raspberry Pi (ECCEZIONE: no blur dinamico).
══════════════════════════════════════════════════════════════════════════ */

/* ── Toggle Switch .fm-* ─────────────────────────────────────────────── */
.console-fm-zone { flex-shrink:0; padding:0 0.6rem; cursor:default; }
.fm-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    cursor:      pointer;
    user-select: none;
}
.fm-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.fm-track {
    display:       flex;
    align-items:   center;
    width:         32px;
    height:        18px;
    background:    rgba(100, 116, 139, 0.20);
    border:        1px solid rgba(100, 116, 139, 0.28);
    border-radius: 9px;
    padding:       2px 3px;
    transition:    background .22s ease, border-color .22s ease;
}
.fm-knob {
    width:         12px;
    height:        12px;
    background:    rgba(100, 116, 139, 0.65);
    border-radius: 50%;
    transition:    transform .22s cubic-bezier(.34,1.56,.64,1), background .22s ease;
}
.fm-text {
    font-size:      0.68rem;
    font-weight:    700;
    color:          var(--text-muted-glass, #64748b);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:     color .22s ease;
}
/* Stato ON via CSS (:checked → adjacent sibling .fm-track) */
.fm-input:checked + .fm-track              { background:rgba(37,99,235,.22); border-color:rgba(37,99,235,.45); }
.fm-input:checked + .fm-track .fm-knob    { transform:translateX(14px); background:#2563eb; }

/* ── Stato attivo: body.focus-mode-active ─────────────────────────────── */

/* Card senza alert: oscurate — opacity+filter, NO backdrop-filter aggiuntivo (GPU safe) */
body.focus-mode-active .focus-mode-dimmed {
    opacity:        0.22 !important;
    filter:         saturate(0.25) brightness(0.94) !important;
    transition:     opacity .4s ease, filter .4s ease !important;
    pointer-events: none;
}
/* Card con alert: glow Vision Pro blu */
body.focus-mode-active .card-scheda:not(.focus-mode-dimmed),
body.focus-mode-active .glass-slab-master:not(.focus-mode-dimmed) {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.42),
                0 8px 32px rgba(37, 99, 235, 0.16) !important;
    transform:  translateY(-1px);
    transition: box-shadow .35s ease, transform .35s ease !important;
}
/* Testo Focus: blu quando body.focus-mode-active */
body.focus-mode-active .fm-text { color: #2563eb; }

/* ── .glass-obscure — Crystal Deep (iOS 26 Hyper-Depth §B.7, SNLG 1/2025) ────
   Usato su: alert clinici emergenza, modal EPDS Item 10, pannelli pericolo.
   Parametri: saturate(2.2) blur(60px) — Crystal Glass al massimo livello.
   ECCEZIONE: su Raspberry Pi con GPU limitata ridurre a blur(40px) se necessario.
   NON usare su elementi animati a 60fps o in scroll continuo.
──────────────────────────────────────────────────────────────────────────── */
.glass-obscure {
    backdrop-filter:          blur(60px) saturate(2.2) !important;
    -webkit-backdrop-filter:  blur(60px) saturate(2.2) !important;
    background:               rgba(255, 255, 255, 0.82) !important;
    border-top:               1px solid rgba(255, 255, 255, 0.70) !important;
    border-radius:            20px;
}
/* Variante emergenza (sfondo rosso tenue) */
.glass-obscure-danger {
    backdrop-filter:          blur(60px) saturate(2.2) !important;
    -webkit-backdrop-filter:  blur(60px) saturate(2.2) !important;
    background:               rgba(255, 245, 245, 0.88) !important;
    border:                   1px solid rgba(239, 68, 68, 0.25) !important;
    border-top:               1px solid rgba(255, 255, 255, 0.70) !important;
    border-radius:            20px;
    box-shadow:               0 20px 60px rgba(239, 68, 68, 0.15),
                              0 4px 24px rgba(0, 0, 0, 0.10),
                              inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}
@supports not (backdrop-filter: blur(1px)) {
    .glass-obscure        { background: rgba(255, 255, 255, 0.97) !important; }
    .glass-obscure-danger { background: rgba(255, 240, 240, 0.99) !important; }
}

/* ── INTERGROWTH-21st Satin Pills — Fase Alpha ───────────────────────────── */
/* Base layout pill: capsule glass morphism, contenuto flex inline             */
.ig-satin-pill {
    display:         inline-flex;
    align-items:     center;
    gap:             .28rem;
    padding:         .22rem .55rem;
    border-radius:   20px;
    font-size:       .7rem;
    font-weight:     500;
    line-height:     1;
    white-space:     nowrap;
    cursor:          default;
    transition:      box-shadow .15s ease;
}
.ig-pill-label {
    font-size:       .63rem;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  .04em;
    opacity:         .75;
}
.ig-pill-sep {
    font-size:       .65rem;
    opacity:         .5;
}
.ig-pill-value {
    font-size:       .72rem;
    font-weight:     600;
}
/* ── END INTERGROWTH-21st Satin Pills ────────────────────────────────────── */

/* ── Crystal Curves — Chart.js iOS 26 Hyper-Depth ──────────────────────────── */
.crystal-curves-container { width: 100%; }

/* Selector tabs (AC / HC / BPD / FL / EFW) */
.cc-tab {
    padding:          .18rem .52rem;
    font-size:        .67rem;
    font-weight:      600;
    border-radius:    8px;
    border:           1px solid rgba(16,185,129,0.22);
    background:       transparent;
    color:            #64748b;
    cursor:           pointer;
    transition:       background .12s ease, color .12s ease, border-color .12s ease;
    line-height:      1;
}
.cc-tab:hover {
    background:       rgba(16,185,129,0.09);
    color:            #065f46;
    border-color:     rgba(16,185,129,0.35);
}
.cc-tab.active {
    background:       rgba(16,185,129,0.14);
    color:            #065f46;
    border-color:     rgba(16,185,129,0.45);
    box-shadow:       0 0 0 1.5px rgba(16,185,129,0.18);
}
/* ── END Crystal Curves ──────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   UNIFIED SATIN TIMELINE v2.0 — Refinement 2026-03-19
   §T Color-coding CRITICO · Legenda Interattiva · Jitter Overlap
   §Q Quick Notes Sidebar · @media print Referto Ostetrico
══════════════════════════════════════════════════════════════ */

/* ── Fix overflow righello: consente tooltip e legenda fuori bounds ── */
.ruler-gestazionale {
    overflow: visible;
}
.ruler-bg-track {
    border-radius: 0 0 14px 14px;
    overflow:      hidden;
}

/* ── Ecografia ALERT — diamante ROSSO FIAMMA ──────────────────── */
/* Attivo quando has_anomalie=True o percentile EFW < 10° (Saturazione 2.2) */
.ruler-vp-eco-alert .ruler-vp-dot {
    border-radius: 2px;
    background:    #ef4444;
    transform:     rotate(45deg);
    box-shadow:    0 0 8px rgba(239,68,68,0.75), 0 1px 3px rgba(0,0,0,0.22);
    animation:     eco-alert-pulse 1.4s ease-in-out infinite;
}
.ruler-visit-pill.ruler-vp-eco-alert:hover .ruler-vp-dot {
    transform: rotate(45deg) scale(1.65);
}
@keyframes eco-alert-pulse {
    0%,  100% { box-shadow: 0 0 6px  rgba(239,68,68,0.60), 0 1px 3px rgba(0,0,0,0.22); }
    50%        { box-shadow: 0 0 14px rgba(239,68,68,0.90), 0 0 6px rgba(239,68,68,0.40); }
}

/* ── Legenda interattiva righello gestazionale ────────────────── */
.ruler-legend-btn {
    position:        absolute;
    right:           8px;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         12;
    width:           20px;
    height:          20px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.78);
    border:          1px solid rgba(100,116,139,0.25);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.60rem;
    color:           #475569;
    cursor:          help;
    backdrop-filter: blur(8px);
    transition:      background 0.15s ease, box-shadow 0.15s ease;
}
.ruler-legend-btn:hover {
    background:  rgba(255,255,255,0.97);
    box-shadow:  0 2px 8px rgba(0,0,0,0.12);
}
.ruler-legend-panel {
    position:        absolute;
    right:           34px;
    top:             50%;
    transform:       translateY(-50%) translateX(4px);
    z-index:         25;
    background:      rgba(255,255,255,0.96);
    backdrop-filter: blur(20px) saturate(2.2);
    -webkit-backdrop-filter: blur(20px) saturate(2.2);
    border:          1px solid rgba(100,116,139,0.20);
    border-radius:   10px;
    padding:         0.4rem 0.65rem;
    white-space:     nowrap;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.18s ease, transform 0.18s ease;
    box-shadow:      0 4px 16px rgba(0,0,0,0.10),
                     inset 0 1px 0 rgba(255,255,255,0.80);
}
.ruler-legend-btn:hover + .ruler-legend-panel,
.ruler-legend-panel:hover {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(-50%) translateX(0);
}
.ruler-legend-item {
    display:     flex;
    align-items: center;
    gap:         0.42rem;
    font-size:   0.62rem;
    font-weight: 600;
    color:       #374151;
    line-height: 1.9;
}
.ruler-legend-dot {
    width:      8px;
    height:     8px;
    border:     1.5px solid rgba(255,255,255,0.90);
    flex-shrink: 0;
}
.ruler-legend-dot.dot-visita   { border-radius: 50%; background: #3b82f6; }
.ruler-legend-dot.dot-eco      { border-radius: 2px; background: #7c3aed; transform: rotate(45deg); }
.ruler-legend-dot.dot-eco-alert{ border-radius: 2px; background: #ef4444; transform: rotate(45deg); }
.ruler-legend-dot.dot-analisi  { border-radius: 50%; background: #16a34a; }

/* ── Sidebar Quick Notes Widget ───────────────────────────────── */
.sidebar-quicknotes-wrap {
    margin:       0.4rem 0.3rem 0;
    border-radius: 10px;
    background:   rgba(255,255,255,0.18);
    border:       1px solid rgba(255,255,255,0.28);
    overflow:     hidden;
}
.sidebar-quicknotes-header {
    display:        flex;
    align-items:    center;
    gap:            0.35rem;
    padding:        0.32rem 0.55rem;
    font-size:      0.61rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          #64748b;
    border-bottom:  1px solid rgba(100,116,139,0.14);
}
.sidebar-quicknotes-area {
    width:       100%;
    box-sizing:  border-box;
    padding:     0.4rem 0.55rem;
    font-size:   0.71rem;
    line-height: 1.5;
    color:       #1e293b;
    background:  transparent;
    border:      none;
    outline:     none;
    resize:      none;
    font-family: var(--font-ui);
    min-height:  78px;
}
.sidebar-quicknotes-area::placeholder { color: #94a3b8; font-style: italic; }
.sidebar-quicknotes-status {
    font-size:  0.57rem;
    padding:    0.12rem 0.55rem 0.28rem;
    color:      #94a3b8;
    min-height: 1em;
    transition: color 0.3s ease;
}
.sidebar-quicknotes-status.saved  { color: #16a34a; }
.sidebar-quicknotes-status.saving { color: #f59e0b; }

/* ══════════════════════════════════════════════════════════════
   STAMPA REFERTO OSTETRICO — @media print
   iOS 26 Satin Print Edition · A4 · v1.0 (2026-03-19)
══════════════════════════════════════════════════════════════ */
@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* Nascondi elementi di navigazione / interfaccia */
    .app-header, .glass-sidebar, .utility-drawer, .utility-tab,
    .app-footer, #fab-feedback, .glass-console, .ruler-gestazionale,
    .no-print, [data-no-print], .btn-print-trigger, .btn-print-referto,
    .breadcrumb, .redating-banner { display: none !important; }

    body { background: #ffffff !important; }

    .main-stage {
        margin-left: 0 !important;
        margin-top:  0 !important;
        padding:     1.5cm 1.8cm !important;
    }

    /* Card / slab stile "Pillole di Vetro" → bordi arrotondati, sfondo #f8fafc */
    .card, .glass-slab-master, .glass-soft, .glass-satin {
        background:           #f8fafc !important;
        backdrop-filter:      none !important;
        -webkit-backdrop-filter: none !important;
        border:               1px solid #e2e8f0 !important;
        box-shadow:           none !important;
        border-radius:        8px !important;
    }
    .card-header,
    .card-header-blu, .card-header-verde,
    .card-header-giallo, .card-header-rosso, .card-header-viola {
        background:      #f1f5f9 !important;
        backdrop-filter: none !important;
    }

    /* Salti pagina */
    .print-page-break-before { page-break-before: always; }
    .print-page-break-after  { page-break-after:  always; }
    .print-no-break          { page-break-inside:  avoid; }

    /* Tipografia */
    h1, h2, h3 { color: #0f172a !important; }
    .text-muted { color: #64748b !important; }

    /* Sezioni referto */
    .referto-header   { page-break-after:  avoid; }
    .referto-section  { page-break-inside: avoid; margin-bottom: 1.2rem; }
}

/* ── END UNIFIED SATIN TIMELINE v2.0 ──────────────────────────────────── */

/* ── END FASE 1 — DNA 🧬 ──────────────────────────────────────── */