/* ============================================================================
   G.I.A.D.A. — CANONICAL STYLESHEET
   Fusione style.css (legacy, 11k righe) + giada_style.css (Sprint 61)
   Data fusione: 2026-04-20
   SINGLE SOURCE OF TRUTH — non creare altri file .css in static/css/
   ============================================================================

   SEZIONE 1–8: style.css legacy (base completo)
   SEZIONE SPRINT61: giada_style.css overrides (caricato dopo in cascata)

   CLASSI CON CONFLITTO (8 totali — giada vince per cascata):
   · .app-header-row
   · .badge
   · .btn
   · .btn-danger
   · .btn-primary
   · .form-control
   · .semaforo-rosso
   · .semaforo-verde
   ============================================================================ */

/* ================================================================
   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: 2000;

    /* ── 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 */

    /* ── Z-INDEX STACK — Layer UI G.I.A.D.A. ── */
    --z-base: 0;
    --z-card: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-console: 900;
    /* Console diagnostica G.I.A.D.A. */
    --z-tooltip: 1000;
    /* Tooltip Navigator EBM + popover milestone */
    --z-toast: 3000;
    /* Notifiche auto-save HTMX */

    /* ── LAYOUT BREAKPOINTS E LARGHEZZE ── */
    --max-w-text: 660px;
    /* Larghezza massima blocchi di testo leggibili */
    --max-w-grid: 980px;
    /* Larghezza massima griglia clinica a 3 corsie */
    --console-h: 280px;
    /* Altezza fissa console diagnostica */
    --lane-gap: 1.5rem;
    /* Gutter tra le corsie cliniche */

    /* ── CORSIE CLINICHE — Palette semantica medicale ── */
    --lane-maternal-border: #3b82f6;
    /* Blu medicale — parametri materni */
    --lane-maternal-bg: #f0f6ff;
    /* Tinta blu < 8% saturazione */
    --lane-maternal-label: #1e40af;
    /* Blu scuro leggibile su sfondo chiaro */

    --lane-fetal-border: #15803d;
    /* Verde clinico — parametri fetali */
    --lane-fetal-bg: #f0fdf4;
    /* Tinta verde < 8% saturazione */
    --lane-fetal-label: #14532d;
    /* Verde scuro leggibile */

    --lane-shared-border: #b45309;
    /* Ambra/oro neutro — dualità M↔F */
    --lane-shared-bg: #fffbeb;
    /* Tinta ambra chiarissima */
    --lane-shared-label: #78350f;
    /* Ambra scuro leggibile */

    /* ── TIPOGRAFIA UI ── */
    --font-family-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-label: 0.75rem;
    --line-height-clinical: 1.6;

    /* ── FEEDBACK STATES — Auto-save HTMX ── */
    --color-save-ok: #16a34a;
    /* Verde: dato salvato con successo */
    --color-save-error: #dc2626;
    /* Rosso: errore sanity check */
    --color-save-pending: #d97706;
    /* Ambra: salvataggio in corso */

    /* ── 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);

    /* Easing G.I.A.D.A. — Sprint 19-HOTFIX */
    --spring-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-clinical: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Sprint 61 variables (da giada_style.css, nomi non sovrapposti) ── */
  /* Background and Text */
  --bg-space: linear-gradient(135deg, #e0f2fe 0%, #f5f3ff 40%, #ecfdf5 100%);
  --text-slate: #0f172a;

  /* Blur & Saturazione: Crystal Glass (Output/Radar) */
  --blur-radar: 24px;
  --sat-radar: 2.2;

  /* Blur & Saturazione: Satin Glass (Input/Cantiere) */
  --blur-cantiere: 60px;
  --sat-cantiere: 1.0;

  /* Elevazione su hover */
  --g-lift: translateY(-4px);

  /* Semaforo: spessore bordo sinistro legale */
  --semaforo-w: 4px;

  /* Gap standard tra elementi */
  --gap-standard: 12px;

  /* Navigator widths — sidebar collapsed / expanded */
  --nav-w-collapsed: 72px;
  --nav-w-expanded: 240px;

  /* Colori semaforo */
  --semaforo-red: #ef4444;
  --semaforo-green: #10b981;
  --semaforo-amber: #f59e0b;

  /* Timing per transizioni */
  --transition-smooth: 300ms ease-out;
}

/* ── 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;
}

/* Sprint 32 — Anamnesi palette: Indaco + Slate */
.card-header-indigo {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
    color: #3730a3;
    border-bottom: 2px solid #a5b4fc !important;
}

.card-header-slate {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;
    color: #334155;
    border-bottom: 2px solid #cbd5e1 !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 {  /* CONFLITTO style.css — vedi override giada_style.css in fondo */
    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 {  /* CONFLITTO style.css — vedi override giada_style.css in fondo */
    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 {  /* CONFLITTO style.css — vedi override giada_style.css in fondo */
    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 {  /* CONFLITTO style.css — vedi override giada_style.css in fondo */
    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;
    }
}


/* ================================================================
   SEMAFORO VALIDAZIONE — bordo sinistro 4px rosso/verde
   Logica: :placeholder-shown = vuoto → rosso | :valid = compilato → verde
   #dc2626 = Tailwind Red-600 | #22c55e = Tailwind Green-500
================================================================ */
/* Campi testo: rosso quando vuoti (placeholder visibile) */
.form-control[required]:placeholder-shown,
.form-control[required]:not(:placeholder-shown):invalid {
    border-left: 4px solid #dc2626;
    transition: border-left-color 0.3s ease;
}
/* Campi testo: verde quando compilati e validi */
.form-control[required]:not(:placeholder-shown):valid {
    border-left: 4px solid #22c55e;
    transition: border-left-color 0.3s ease;
}
/* Date (no placeholder): usa :valid/:invalid direttamente */
input[type="date"].form-control[required]:invalid,
.form-select[required]:invalid {
    border-left: 4px solid #dc2626;
}
input[type="date"].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(2.2) blur(45px);
    -webkit-backdrop-filter: saturate(2.2) blur(45px);
    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) !important;
    border-top-color: rgba(255, 255, 255, 0.82) !important;
}

.card-scheda .card-header {
    border-radius: 0 !important;
}

/* ── Uniform box style — Sprint 31-HOTFIX fix-04
   Applicato a tutti i 10 box (4 referti + 6 anamnesi) per look coerente.  */
.referti-card-uniform {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !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 {  /* CONFLITTO style.css — vedi override giada_style.css in fondo */
    background: #dcfce7;
    color: #15803d;
    border: 1.5px solid #86efac;
}

.semaforo-verde .sema-dot {
    background: #22c55e;
    box-shadow: 0 0 4px #22c55e88;
}

.semaforo-rosso {  /* CONFLITTO style.css — vedi override giada_style.css in fondo */
    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);
}

/* ── BIO-STRIP — Sprint 5.2.1: home glass-slab style patient header ─────────
   Stile: replica .glass-slab home · avatar blu · 2-row identity block
   Row1: nome bold · EG badge (trimestre) · DPP chip (blu) · UV chip (verde)
   Row2: metriche grigie — altezza · peso · BMI semaforo · G+P
   ACTION BAR non-sticky (.bio-action-bar) sotto #banner-paziente ─────────── */
.bio-strip {
    position: sticky;
    top: var(--topbar-h);
    z-index: var(--z-glass-console);
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(55px) saturate(2.2);
    -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 4px 24px rgba(0, 0, 0, .08);
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    margin-bottom: 0;
    /* Sprint 21b: spazio rimosso — console background non crea barra grigia */
}

.bio-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .6rem 1rem;
    min-height: 56px;
}

/* ── Bio-strip tripartizione — Sprint 21b ─────────────────────────────────── */
.bio-zone {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    flex-wrap: wrap;
}

.bio-zone-left {
    flex: 0 0 auto;
    gap: .6rem;
    flex-wrap: nowrap;
}

.bio-zone-center {
    flex: 1 1 0;
    justify-content: center;
    gap: 0;
}

.bio-zone-right {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0;
    align-items: center;
}

/* ── Bio data block — Sprint 24: valore sopra · etichetta sotto ───────────── */
.bio-data-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 0 0.55rem;
    min-width: 0;
}

.bio-data-block+.bio-data-block {
    border-left: 1px solid rgba(100, 116, 139, .15);
}

.bio-zone-right .bio-data-block:first-child {
    border-left: 1px solid rgba(100, 116, 139, .15);
}

.bio-data-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    line-height: 1.3;
}

.bio-data-label {
    font-size: 0.60rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* GA — colore per trimestre */
.bio-data-ga-t1 {
    color: #0369a1;
}

.bio-data-ga-t2 {
    color: #4338ca;
}

.bio-data-ga-t3 {
    color: #7c3aed;
}

.bio-data-trim {
    font-size: .65rem;
    font-weight: 600;
    opacity: .75;
    margin-left: 2px;
}

/* EG pill con colore trimestre — Sprint 31 fix-03 */
.bio-eg-pill-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.bio-eg-trim-label {
    font-size: .65rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
}

/* PA value states */
.bio-data-pa.bio-pa-pill--neutro {
    color: #475569;
}

.bio-data-pa.bio-pa-pill--amber {
    color: #b45309;
    font-weight: 800;
}

.bio-data-pa.bio-pa-pill--danger {
    color: #dc2626;
    font-weight: 800;
    animation: pa-text-pulse 1.4s ease-in-out infinite;
}

@keyframes pa-text-pulse {

    0%,
    100% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.45;
    }
}

.bio-identity-left {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    min-width: 0;
}

/* Sprint 33: riga 1 = nome + KPI anni affiancati */
.bio-identity-row1 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

/* KPI "Anni" — stesso stile bio-data-block, separatore sx sottile */
.bio-anni-kpi {
    border-left: 1px solid rgba(100, 116, 139, .22) !important;
    padding: 0 0 0 0.5rem !important;
    gap: 0.02rem;
}

/* bio-anni legacy — non più usato da Sprint 33 */
.bio-anni {
    display: none;
}

/* Chip età — tono neutro */
.bio-chip-eta {
    background: rgba(100, 116, 139, .08);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, .18);
}

/* UM chip — ambra */
.bio-chip-um {
    background: rgba(234, 179, 8, .10);
    color: #92400e;
    border: 1px solid rgba(234, 179, 8, .28);
}

/* GTPAL */
.bio-gtpal {
    display: inline-flex;
    align-items: baseline;
    gap: .2rem;
    font-size: .72rem;
    font-weight: 700;
    color: #1e293b;
}

.bio-gtpal-label {
    font-size: .62rem;
    color: #64748b;
    font-weight: 500;
}

/* Gruppo sanguigno chip */
.bio-gs-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(124, 58, 237, .10);
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, .25);
}

/* PA pill — 3 stati cromatici */
.bio-pa-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: box-shadow .3s;
    cursor: default;
}

.bio-pa-pill--neutro {
    background: rgba(255, 255, 255, .20);
    color: #475569;
    border: 1px solid rgba(148, 163, 184, .32);
}

.bio-pa-pill--amber {
    background: rgba(251, 191, 36, .15);
    color: #92400e;
    border: 1px solid rgba(251, 191, 36, .48);
    box-shadow: 0 0 10px rgba(251, 191, 36, .32);
}

.bio-pa-pill--danger {
    background: rgba(239, 68, 68, .15);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, .48);
    animation: pa-danger-pulse 1.4s ease-in-out infinite;
}

.bio-pa-pill--empty {
    background: rgba(100, 116, 139, .06);
    color: #94a3b8;
    border: 1px dashed rgba(148, 163, 184, .38);
}

@keyframes pa-danger-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, .50);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
    }
}

/* ── Modale Nuova Visita — iOS 26 Hyper-Depth ─────────────────────────────── */
#new-visit-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    align-items: center;
    justify-content: center;
}

#new-visit-modal.is-open {
    display: flex;
}

.nvm-dialog {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 22px;
    box-shadow: 0 28px 72px rgba(15, 23, 42, .28);
    width: min(700px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
}

.nvm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(148, 163, 184, .22);
}

.nvm-title {
    font-size: .95rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.nvm-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(100, 116, 139, .12);
    color: #475569;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}

.nvm-close:hover {
    background: rgba(239, 68, 68, .14);
    color: #dc2626;
}

.nvm-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(148, 163, 184, .20);
}

.nvm-btn-save {
    border-radius: 10px;
    font-size: .82rem;
}

.nvm-btn-full {
    border-radius: 10px;
    font-size: .82rem;
}

/* input-slab size variants for modal */
.input-slab--sm {
    max-width: 68px;
}

.input-slab--md {
    max-width: 80px;
}

/* input-corsia-label colour modifiers */
.input-corsia-label--materna {
    color: #ef4444;
}

.input-corsia-label--fetale {
    color: #10b981;
}

.slab-corsia-dot--materna {
    background: #ef4444;
}

.slab-corsia-dot--fetale {
    background: #10b981;
}

/* ── Panorama Anamnesi slab — hover clickable ────────────────────────────── */
.slab-panoramic {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.slab-panoramic:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(15, 23, 42, .13);
}

.slab-panoramic:focus {
    outline: 2px solid rgba(59, 130, 246, .55);
    outline-offset: 3px;
}

.slab-panoramic-title {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #374151;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.slab-panoramic-title .bi {
    color: #3b82f6;
}

.slab-panoramic-arrow {
    color: #3b82f6;
    font-size: 0.9rem;
    opacity: 0.55;
    transition: opacity .15s, transform .15s;
}

.slab-panoramic:hover .slab-panoramic-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Avatar iniziali — cerchio blu (≡ .slab-avatar) */
.bio-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blu), var(--blu-d));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .76rem;
    color: #fff;
    letter-spacing: .04em;
    box-shadow: 0 3px 10px rgba(90, 171, 219, .35);
    flex-shrink: 0;
    user-select: none;
    text-transform: uppercase;
    transition: box-shadow 0.22s ease, transform 0.18s ease;
}

/* Sprint 40.5 — bio-avatar clickabile: hover glow + micro-lift */
.bio-avatar:hover,
.bio-avatar:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35), 0 4px 14px rgba(90, 171, 219, .55);
    transform: translateY(-1px) scale(1.04);
    outline: none;
}

/* Sprint 40.5 — bio-nome clickabile: hover underline segnale */
.bio-nome[role="button"]:hover,
.bio-nome[role="button"]:focus-visible {
    text-decoration: underline;
    text-decoration-color: rgba(59, 130, 246, 0.55);
    text-underline-offset: 3px;
    outline: none;
}

/* Blocco identità: 2 righe */
.bio-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .22rem;
}

.bio-identity-row1 {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.bio-nome {
    font-size: .9rem;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bio-cf {
    display: block;
    font-size: .65rem;
    font-weight: 500;
    color: #64748b;
    opacity: 0.75;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.bio-identity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.bio-data-block--chip {
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(100, 116, 139, .08);
    border: 1px solid rgba(100, 116, 139, .18);
    border-left: none !important;
    /* chip usa background, non border-left separator */
}

.bio-gs-rh-neg {
    background: rgba(220, 38, 38, .08);
    border-color: rgba(220, 38, 38, .30);
    box-shadow: 0 0 6px rgba(220, 38, 38, .25);
}

.bio-gs-rh-neg .bio-data-value {
    color: #dc2626;
}

/* EG badge — colorato per trimestre */
.bio-eg-badge {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bio-eg-badge-t1 {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, .30);
}

.bio-eg-badge-t2 {
    background: rgba(37, 99, 235, .11);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, .28);
}

.bio-eg-badge-t3 {
    background: rgba(124, 58, 237, .11);
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, .28);
}

/* Date chips */
.bio-date-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bio-date-dpp {
    background: rgba(37, 99, 235, .10);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, .25);
}

.bio-date-uv {
    background: rgba(22, 163, 74, .10);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, .22);
}

/* Riga 2 metriche: testo piccolo grigio */
.bio-metrics-row {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    font-size: .7rem;
    color: #64748b;
    font-weight: 500;
}

.bio-metrics-sep {
    color: rgba(100, 116, 139, .35);
    font-size: .65rem;
    user-select: none;
}

/* BMI — color set inline */
.bio-bmi {
    font-weight: 700;
}

/* ACTION BAR — non-sticky, incollata sotto #banner-paziente */
/* Sprint 21: .bio-action-bar e .bio-action-btn rimossi — azioni rilocate */
/* Responsive mobile ≤ 640px */
@media (max-width: 640px) {
    .bio-strip-inner {
        gap: .5rem;
        padding: .45rem .75rem;
        min-height: 48px;
        flex-wrap: wrap;
    }

    .bio-avatar {
        width: 34px;
        height: 34px;
        font-size: .7rem;
    }

    .bio-nome {
        font-size: .82rem;
    }

    .bio-zone-center {
        justify-content: flex-start;
    }

    .bio-zone-right {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

/* ── STICKY CONTEXT CONSOLE — Sprint 15 Ponte di Comando ────────────────────
   Wrapper sticky che contiene Glass Console (68px) + Sentinel Belt (44px).
   IntersectionObserver in giada-core.js aggiunge/rimuove .is-stuck.         */
.sticky-context-console {
    position: sticky;
    top: var(--topbar-h);
    /* 60px — sotto l'app-header */
    z-index: var(--z-console);
    /* 900 — sopra card, sotto modal */
    background: rgba(255, 255, 255, 0.75);
    /* iOS glass: 75% opacità + blur = contenuto sottostante sfocato leggibile */
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.40);
}

/* Ombra e bordo inferiore attivati quando la console è "incollata" */
.sticky-context-console.is-stuck {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.40);
}

/* SC 2.4.11 — scroll-margin-top: evita che lo sticky header oscuri elementi in focus/ancoraggio.
   Applicato a tutte le card anamnesi e alle section anchor. */
.card-scheda,
[id^="section-anam"],
[id^="section-anamnesi"],
#nav-event-panel,
#dynamic-interaction-box,
#section-gap-analysis {
    scroll-margin-top: var(--console-h, 172px);
}

/* ── SCROLL PADDING DINAMICO — Sprint 15: --console-h da giada-core.js ──────
   html riceve --console-h da syncConsoleHeight(). Transizione fluida per
   cambio altezza (es. Sentinel Belt aperta/chiusa).
   body.no-console sovrascrive a 76px (nessuna console visibile).           */
html {
    scroll-padding-top: var(--console-h, 172px);
    transition: scroll-padding 0.3s ease;
}

body.no-console {
    --console-h: 76px;
}

/* ── BIO-STRIP HEIGHT — Sprint 24 (data-block layout: value+label = ~42px) ── */
.bio-strip-inner {
    min-height: 64px;
}

/* Delta inline peso/BMI */
.bio-delta-inline {
    font-size: .65rem;
    font-weight: 700;
    margin-left: .18rem;
    letter-spacing: -.01em;
}

/* Trimestre label inside EG badge */
.bio-trim-label {
    font-size: .62rem;
    font-weight: 600;
    opacity: .85;
    margin-left: .12rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SENTINEL BELT — Sprint 10.5: Anti-Fatigue One-Voice
   Posizione: immediatamente sotto Console (NO gap).
   Collassata 44px / espansa 120px. Visibile SOLO se alert attivo.
══════════════════════════════════════════════════════════════════════════ */
.sentinel-belt {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    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);
    border-top: none;
    overflow: hidden;
    animation: belt-pulse 2s ease-in-out infinite;
}

.sentinel-belt.belt-pulse-paused {
    animation: none;
}

@keyframes belt-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 transparent;
    }

    50% {
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
    }
}

.sentinel-belt-critico {
    border-bottom-color: rgba(239, 68, 68, 0.45);
}

.sentinel-belt-moderato {
    border-bottom-color: rgba(234, 179, 8, 0.45);
}

.sentinel-belt-monit {
    border-bottom-color: rgba(202, 138, 4, 0.35);
}

.sentinel-belt-collapsed {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    height: 44px;
    cursor: pointer;
    user-select: none;
}

.sentinel-belt-emoji {
    font-size: .95rem;
    flex-shrink: 0;
}

.sentinel-belt-title {
    font-size: .72rem;
    font-weight: 700;
    color: #1e293b;
}

.sentinel-belt-value {
    font-size: .65rem;
    color: #64748b;
    font-family: monospace;
    background: rgba(100, 116, 139, .10);
    border-radius: 4px;
    padding: .03rem .28rem;
}

.sentinel-belt-queue {
    font-size: .6rem;
    font-weight: 700;
    color: #5AABDB;
    background: rgba(90, 171, 219, .12);
    border-radius: 6px;
    padding: .04rem .3rem;
    border: 1px solid rgba(90, 171, 219, .30);
}

.sentinel-belt-spacer {
    flex: 1;
}

.sentinel-belt-chevron {
    color: #94a3b8;
    font-size: .75rem;
    transition: transform .2s;
}

.sentinel-belt-expanded {
    padding: .35rem .85rem .65rem;
    animation: belt-expand .15s ease-out;
}

@keyframes belt-expand {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sentinel-belt-desc {
    font-size: .68rem;
    color: #334155;
    line-height: 1.45;
    margin: 0 0 .3rem;
}

.sentinel-belt-fonte {
    font-size: .6rem;
    color: #94a3b8;
    display: flex;
    gap: .25rem;
    align-items: center;
    margin-bottom: .5rem;
}

.sentinel-belt-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.sentinel-dismiss-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .6rem;
    font-size: .68rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(100, 116, 139, .22);
    background: rgba(255, 255, 255, .55);
    color: #475569;
    cursor: pointer;
    transition: background .12s;
}

.sentinel-dismiss-btn:hover {
    background: rgba(255, 255, 255, .82);
    color: #1e293b;
}

.sentinel-dismiss-risolto {
    border-color: rgba(22, 163, 74, .30);
    color: #15803d;
}

.sentinel-dismiss-risolto:hover {
    background: rgba(22, 163, 74, .10);
}

.sentinel-dismiss-conosco {
    border-color: rgba(37, 99, 235, .25);
    color: #1d4ed8;
}

.sentinel-dismiss-conosco:hover {
    background: rgba(37, 99, 235, .08);
}

.sentinel-dismiss-snooze {
    border-color: rgba(202, 138, 4, .25);
    color: #b45309;
}

.sentinel-dismiss-snooze:hover {
    background: rgba(202, 138, 4, .09);
}

@media print {
    .sentinel-belt {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   GESTATIONAL NAVIGATOR SVG — Sprint 10.5
   width 100% · max 980px · height 200px · preserveAspectRatio
   Gradiente trimestrale · Milestone dot stati · Visit/Eco pills
══════════════════════════════════════════════════════════════════════════ */
/* overflow:hidden.gest-nav-wrap — Q1 Sprint 37 V3: border-radius:20px, no clipPath SVG
   Sprint 37.6: padding 32px per breathing room 0w/42w, box-shadow profondo (sollevamento) */
.gest-nav-wrap {
    /* Sprint 37 V3: Q1 overflow+radius, Q5 touch-action, iOS26 glass */
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Q1: .gest-nav-wrap overflow hidden — clips SVG overflow */
    border-radius: 20px 20px 0 0;
    /* Q1: 20px HIG — flat bottom per incastro snap con nav-event-panel */
    /* Sprint 37.6: 32px padding → breathing room per label 0w/42w (SVG overflow visible) */
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    box-sizing: border-box;
    margin: 12px 0 0;
    /* Sprint 52: da 2rem → 12px — gap cockpit→regolo = 12px (Task 3) */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(1.6);
    /* iOS26 glass — SOLO HTML */
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    touch-action: pan-y;
    /* Q5: no preventDefault, no scroll jank */
    /* Sprint 37.6: ombra profonda multi-layer — effetto oggetto fisico sollevato */
    box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.15),
        0 8px 16px -4px rgba(15, 23, 42, 0.08),
        0 2px 4px 0px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 0 -1px 0 rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(226, 232, 240, 0.50);
}

.gest-nav-wrap:focus-visible {
    /* Q4: focus ring su wrapper tabindex=0 */
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.40),
        0 20px 40px -8px rgba(15, 23, 42, 0.15),
        0 8px 16px -4px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.gest-nav-svg {
    width: 100%;
    height: auto;
    /* altezza calcolata da aspect-ratio */
    aspect-ratio: 1040 / 200;
    /* Sprint 42: viewBox -20 0 1040 200 — safe margin 0w/42w */
    display: block;
    overflow: visible;
    /* max-height rimosso: causava letterboxing e proporzioni variabili tra pazienti */
}

/* Trimestre labels — top-of-zone */
.nav-trim-label {
    font-size: var(--font-size-label);
    fill: var(--lane-maternal-label);
    opacity: 0.82;
    font-weight: 700;
    letter-spacing: 0.08em;
    pointer-events: none;
    font-family: var(--font-family-ui);
}

/* Milestone stem */
.nav-ms-stem {
    stroke: rgba(100, 116, 139, .35);
    stroke-dasharray: 3 2;
}

.nav-ms-stem.nav-ms-stem-completato {
    stroke: rgba(22, 163, 74, .55);
}

.nav-ms-stem.nav-ms-stem-pendente {
    stroke: rgba(245, 158, 11, .55);
}

.nav-ms-stem.nav-ms-stem-scaduto {
    stroke: rgba(239, 68, 68, .60);
}

.nav-ms-stem.nav-ms-stem-futuro {
    stroke: rgba(148, 163, 184, .35);
}

/* Milestone dot */
.nav-ms-dot {
    fill: #e2e8f0;
    stroke: #94a3b8;
    stroke-width: 1.5;
    cursor: pointer;
    transition: r .1s;
}

.nav-ms-dot:hover {
    r: 10;
}

.nav-ms.nav-ms-completato .nav-ms-dot {
    fill: #22c55e;
    stroke: #15803d;
    stroke-width: 2;
}

.nav-ms.nav-ms-pendente .nav-ms-dot {
    fill: rgba(255, 255, 255, .9);
    stroke: #f59e0b;
    stroke-width: 2.5;
}

.nav-ms.nav-ms-scaduto .nav-ms-dot {
    fill: #ef4444;
    stroke: #b91c1c;
    stroke-width: 2;
}

.nav-ms.nav-ms-futuro .nav-ms-dot {
    fill: rgba(226, 232, 240, .6);
    stroke: #cbd5e1;
    stroke-width: 1.5;
}

/* Milestone week label */
.nav-ms-wlabel {
    font-size: 8px;
    fill: #94a3b8;
    font-family: monospace;
    pointer-events: none;
}

/* Visit dot — quadrato rosso (spec Sprint 37.2) */
.nav-visit-dot {
    fill: #ef4444;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 1.5;
    cursor: pointer;
}

/* Milestone shapes per corsia — !important vince su qualsiasi regola di stato (030) */
.nav-ms-dot--visita {
    fill: #ef4444 !important;
    stroke: #b91c1c !important;
    stroke-width: 1.5;
    cursor: pointer;
}

.nav-ms-dot--esame {
    fill: #16a34a !important;
    stroke: #14532d !important;
    stroke-width: 1.5;
    cursor: pointer;
}

.nav-ms-dot--eco {
    fill: #a855f7 !important;
    stroke: #7e22ce !important;
    stroke-width: 1.5;
    cursor: pointer;
}

/* Futuro: opacità ridotta, colore tipo preservato */
.nav-ms.nav-ms-futuro .nav-ms-dot--visita,
.nav-ms.nav-ms-futuro .nav-ms-dot--esame,
.nav-ms.nav-ms-futuro .nav-ms-dot--eco {
    opacity: 0.35;
}

/* Eco diamond */
.nav-eco-dot {
    fill: #8b5cf6;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 1.5;
    cursor: pointer;
}

.nav-eco-alert {
    fill: #ef4444;
    stroke: #fff;
}

/* ── Nav event active highlight (Sprint 47) ─────────────────────── */
.nav-event--active rect,
.nav-event--active polygon,
.nav-event--active circle {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.90));
    opacity: 1 !important;
    stroke-width: 2.5 !important;
}

/* ── Nav Event Panel (Sprint 47) ─────────────────────────────────── */
#nav-event-sep { display: none; }

#nav-event-panel {
    background: rgba(255,255,255,0.50);
    backdrop-filter: blur(25px) saturate(1.6);
    -webkit-backdrop-filter: blur(25px) saturate(1.6);
    border: 1px solid rgba(226,232,240,0.50);
    border-top: none;
    box-shadow: inset 0 4px 6px -4px rgba(0,0,0,0.10),
                0 4px 16px rgba(15,23,42,0.07);
    border-radius: 0 0 14px 14px;
    margin-top: 0;
    padding: 0.45rem 0.75rem 0;
    font-size: 0.83rem;
    overflow: hidden;
}

#nav-event-panel .nep-empty {
    display: none;
}

#nav-event-panel .nep-epoch {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.5rem;
}

#nav-event-panel .nep-section {
    margin-bottom: 0.5rem;
}

#nav-event-panel .nep-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}

#nav-event-panel .nep-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 0.80rem;
    line-height: 1.5;
}

/* nep-content: sempre visibile, niente toggle/collapse */
#nav-event-panel .nep-content {
    overflow: hidden;
}

/* nep-detail: sempre visibile */
#nav-event-panel .nep-detail {
    margin-top: 0.25rem;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(15,23,42,0.08);
}

/* ── nep-meta-row: pills metadata (tipo gravidanza / N°feti / BMI) ─── */
#nav-event-panel .nep-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.3rem 0 0.4rem;
    border-top: 1px solid rgba(15,23,42,0.05);
    margin-top: 0.2rem;
}
.nep-meta-chip {
    font-size: 0.67rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 20px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    line-height: 1.6;
}
.nep-meta-chip--warn {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}
.nep-meta-chip--danger {
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.30);
    color: #b91c1c;
}

/* ── Quick-Action Buttons — iOS Liquid Glass tintato (cockpit_riepilogo) ── */
.qab-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border-width: 1px;
    border-style: solid;
    backdrop-filter: blur(8px) saturate(1.4);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.55);
    transition: background 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
    line-height: 1;
}
.qab-btn:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}
/* Visita — viola */
.qab-visita {
    background: rgba(139,92,246,0.12);
    border-color: rgba(139,92,246,0.30);
    color: #6d28d9;
}
.qab-visita:hover, .qab-visita:focus-visible {
    background: rgba(139,92,246,0.20);
    border-color: rgba(139,92,246,0.48);
    box-shadow: 0 2px 8px rgba(139,92,246,0.18), inset 0 1px 0 rgba(255,255,255,0.55);
    outline: none;
}
/* Eco — teal */
.qab-eco {
    background: rgba(6,182,212,0.11);
    border-color: rgba(6,182,212,0.28);
    color: #0e7490;
}
.qab-eco:hover, .qab-eco:focus-visible {
    background: rgba(6,182,212,0.20);
    border-color: rgba(6,182,212,0.46);
    box-shadow: 0 2px 8px rgba(6,182,212,0.16), inset 0 1px 0 rgba(255,255,255,0.55);
    outline: none;
}
/* Esami — blu clinico */
.qab-esami {
    background: rgba(59,130,246,0.11);
    border-color: rgba(59,130,246,0.28);
    color: #1d4ed8;
}
.qab-esami:hover, .qab-esami:focus-visible {
    background: rgba(59,130,246,0.20);
    border-color: rgba(59,130,246,0.46);
    box-shadow: 0 2px 8px rgba(59,130,246,0.16), inset 0 1px 0 rgba(255,255,255,0.55);
    outline: none;
}

/* ── Sprint 52: Crystal Pills — Action Bar header ──────────────────── */
.crystal-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.60);
    cursor: pointer;
    transition: background 0.13s, box-shadow 0.13s, transform 0.10s;
    white-space: nowrap;
}
.crystal-pill:hover {
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 3px 10px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,0.70);
    transform: translateY(-1px);
}
.crystal-pill:active { transform: scale(0.97); }
.crystal-pill--visita  { border-color: rgba(139,92,246,0.32); }
.crystal-pill--eco     { border-color: rgba(6,182,212,0.30); }
.crystal-pill--esami   { border-color: rgba(59,130,246,0.30); }
.crystal-pill--danger  {
    border-color: rgba(239,68,68,0.40);
    color: #dc2626;
}
.crystal-pill--danger:hover {
    background: rgba(254,226,226,0.55);
    box-shadow: 0 3px 10px rgba(239,68,68,0.15), inset 0 1px 0 rgba(255,255,255,0.70);
}

/* ── Sprint C: Sentinel Risk Banner ─────────────────────────────────────── */
/*    Glass red alert strip — shown above sentinel-belt when rischio==alto  */
.sentinel-risk-banner {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem 1rem;
    background: rgba(254, 226, 226, 0.55);
    backdrop-filter: blur(45px) saturate(2.2);
    -webkit-backdrop-filter: blur(45px) saturate(2.2);
    border-bottom: 2px solid rgba(239, 68, 68, 0.45);
    border-top: 1px solid rgba(255,255,255,0.55);
    animation: sentinel-banner-pulse 2.4s ease-in-out infinite;
}
.sentinel-risk-banner__icon {
    font-size: 1.05rem;
    flex-shrink: 0;
    line-height: 1;
}
.sentinel-risk-banner__text {
    font-size: .74rem;
    font-weight: 700;
    color: #991b1b;
    flex: 1;
    letter-spacing: .01em;
}
.sentinel-risk-banner__trigger {
    font-size: .68rem;
    color: #b91c1c;
    font-family: monospace;
    background: rgba(254,202,202,0.50);
    border-radius: 6px;
    padding: .1rem .4rem;
    border: 1px solid rgba(239,68,68,0.22);
    white-space: nowrap;
}
@keyframes sentinel-banner-pulse {
    0%,100% { box-shadow: 0 2px 12px rgba(239,68,68,0.10); }
    50%      { box-shadow: 0 2px 18px rgba(239,68,68,0.25); }
}
@media print { .sentinel-risk-banner { display: none !important; } }

/* ── Sprint C: Slab Risk Dot ─────────────────────────────────────────────── */
/*    Colored dot next to patient name to signal active risk level           */
.slab-risk-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.slab-risk-dot--danger  { background: #ef4444; box-shadow: 0 0 5px rgba(239,68,68,.55), 0 0 0 2px rgba(255,255,255,0.6); }
.slab-risk-dot--warning { background: #eab308; box-shadow: 0 0 5px rgba(234,179,8,.50), 0 0 0 2px rgba(255,255,255,0.6); }

/* ── Sprint 52: Clinical Snapshot cells ─────────────────────────────── */
.cs-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    height: 100%;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(45px) saturate(2.2);
    -webkit-backdrop-filter: blur(45px) saturate(2.2);
    border-top: 1px solid rgba(255, 255, 255, 0.60);
    border-left: 1px solid rgba(255, 255, 255, 0.40);
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.50);
    min-width: 0;
    min-height: 76px;
    transition: transform .18s var(--spring-standard),
                box-shadow .18s var(--spring-standard);
}
.cs-cell:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.cs-label {
    font-size: .60rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0;
}
.cs-value {
    font-size: .95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    white-space: nowrap;
}
.cs-sub {
    font-size: .68rem;
    color: #475569;
    line-height: 1.4;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-chip {
    font-size: .63rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    letter-spacing: .02em;
    white-space: nowrap;
}
.cs-chip--amber { background: rgba(245,158,11,0.12); color: #92400e; border: 1px solid rgba(245,158,11,0.28); }
.cs-chip--red   { background: rgba(239,68,68,0.12);  color: #991b1b; border: 1px solid rgba(239,68,68,0.28); }
.cs-chip--green { background: rgba(22,163,74,0.10);  color: #14532d; border: 1px solid rgba(22,163,74,0.22); }
.cs-chip--muted { background: rgba(100,116,139,0.08); color: #64748b; border: 1px solid rgba(100,116,139,0.20); }
.cs-cell--missing {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    background: rgba(254, 243, 199, 0.35);
    border-top: 1px solid rgba(245, 158, 11, 0.45);
    border-left: 1px solid rgba(245, 158, 11, 0.30);
}
.cs-cell--missing:hover {
    transform: scale(1.02);
    background: rgba(251,191,36,0.10);
    box-shadow: 0 0 20px rgba(251,191,36,0.25), 0 2px 8px rgba(0,0,0,0.04);
}
.cs-action-hint {
    font-size: .58rem;
    font-weight: 600;
    color: #d97706;
    text-align: right;
    margin-top: auto;
    padding-top: 3px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.cs-cell--missing:hover .cs-action-hint { opacity: 1; }
@keyframes cockpit-fadein {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cs-refresh-enter {
    animation: cockpit-fadein .25s ease forwards;
}
.cs-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1px;
}
.cs-trend-btn {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    color: #94a3b8;
    font-size: .70rem;
    transition: color .12s ease, background .12s ease;
    flex-shrink: 0;
}
.cs-trend-btn:hover {
    color: #0f172a;
    background: rgba(15,23,42,0.07);
}
.cs-trend-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}

/* ── iOS 26 Hyper-Depth — Icone semantiche nei box cockpit ────────────────── */
.cs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: .78rem;
    flex-shrink: 0;
    filter: saturate(2.2);
}
.cs-icon--eg       { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
.cs-icon--pa       { background: rgba(239, 68, 68, 0.10);  color: #dc2626; }
.cs-icon--peso     { background: rgba(16, 185, 129, 0.12); color: #059669; }
.cs-icon--bcf      { background: rgba(249, 115, 22, 0.11); color: #ea580c; }
.cs-icon--edemi    { background: rgba(59, 130, 246, 0.10); color: #2563eb; }
.cs-icon--presenta { background: rgba(168, 85, 247, 0.10); color: #9333ea; }
.cs-icon--sentinel { background: rgba(245, 158, 11, 0.12); color: #d97706; }

/* ── Sprint 17 — Regolo Ostetrico di Vetro ─────────────────────────── */

/* Timeline backbone */
.nav-timeline-line {
    stroke: rgba(100, 116, 139, 0.40);
    stroke-width: 1.5;
}

/* Ticks JS-generati */
.nav-tick-major {
    stroke: rgba(71, 85, 105, 0.75);
    stroke-width: 1.4;
}

.nav-tick-minor {
    display: none;
}

/* guard: mai generati da S26-HOTFIX */
/* Sprint 26-HOTFIX: classe dedicata per i tick settimanali */
.nav-tick-week {
    stroke: var(--lane-shared-border);
    stroke-width: 0.8px;
    opacity: 0.25;
    pointer-events: none;
}

.nav-tick-label {
    font-size: var(--font-size-label);
    fill: var(--lane-shared-label);
    text-anchor: middle;
    opacity: 0.55;
    pointer-events: none;
    font-family: var(--font-family-ui);
}

/* Glass cursor — definito nella sezione Sprint 19 (~line 2448) */

/* Cursor line — definita sotto con colore blu Sprint 25 (cerca .nav-cursor-line) */

@keyframes nav-cursor-pulse {

    0%,
    100% {
        opacity: 0.70;
    }

    50% {
        opacity: 0.35;
    }
}

/* Cursor EG label */
.nav-cursor-label {
    font-size: 10px;
    font-weight: 700;
    fill: #0f172a;
    font-family: monospace;
}

/* Sprint 26: nav-bg-rect — sfondo SVG uniforme, sostituisce le trim-band */
.nav-bg-rect {
    fill: rgba(248, 250, 252, 0.0);
    /* trasparente — il bg viene da .gest-nav-wrap */
    pointer-events: none;
}

/* nav-trim-band — rimossa dal template Sprint 26, CSS tenuto per retrocompat */
.nav-trim-band--faded {
    opacity: 0.28;
}

/* Post-mortem overlay */
.nav-postmrt-overlay {
    fill: rgba(120, 120, 120, 0.55);
}

/* Post-mortem text */
.nav-postmrt-text {
    font-size: 14px;
    font-weight: 700;
    fill: #1e293b;
    font-family: inherit;
}

/* Popover satin */
.nav-popover {
    position: absolute;
    width: 200px;
    min-height: 100px;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(40px) saturate(2.0);
    -webkit-backdrop-filter: blur(40px) saturate(2.0);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
    padding: .65rem .75rem .6rem;
    z-index: var(--z-tooltip);
    pointer-events: auto;
}

.nav-pop-close {
    position: absolute;
    top: .3rem;
    right: .4rem;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .2rem;
}

.nav-pop-title {
    font-size: .72rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: .22rem;
    padding-right: 1rem;
}

.nav-pop-meta {
    font-size: .6rem;
    color: #64748b;
    margin-bottom: .18rem;
}

.nav-pop-fonte {
    font-size: .58rem;
    color: #94a3b8;
    margin-bottom: .3rem;
}

.nav-pop-sparkline {
    display: block;
    margin-top: .25rem;
}

/* Q3: popup tail — posizione dinamica via --tail-offset (setPopoverTail in giada-core.js) */
.nav-popup-tail {
    position: absolute;
    bottom: -7px;
    left: var(--tail-offset, 50%);
    /* --tail-offset settato da JS */
    transform: translateX(-50%);
    width: 14px;
    height: 7px;
    overflow: hidden;
    pointer-events: none;
}

.nav-popup-tail::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--lane-shared-bg, rgba(255, 255, 255, 0.95));
    border: 1.5px solid var(--lane-shared-border, rgba(226, 232, 240, 0.80));
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.06);
}

/* Legend — Sprint 42: rimossa per pulizia visiva */
.gest-nav-legend {
    display: none;
    gap: .75rem;
    padding: .3rem .5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    /* 3 badge a destra — Sprint 37 */
}

.nav-leg-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .65rem;
    color: #64748b;
}

/* Trimester badges — Sprint 37 V3 */
.nav-leg-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.nav-leg-badge--t1 {
    background: rgba(59, 130, 246, 0.14);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.nav-leg-badge--t2 {
    background: rgba(249, 115, 22, 0.12);
    color: #c2410c;
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.nav-leg-badge--t3 {
    background: rgba(168, 85, 247, 0.12);
    color: #7c3aed;
    border: 1px solid rgba(168, 85, 247, 0.25);
}

/* Sprint 37: visite dot come quadrato rosso */
.nav-event-visita {
    fill: #ef4444;
    opacity: 0.90;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.nav-event-visita:hover {
    opacity: 1;
    transform: scale(1.2);
}

@media print {

    .gest-nav-wrap,
    .nav-popover {
        display: none !important;
    }
}

/* ── Sprint 19 — Triple-Track Magnetic Navigator ───────────────────────
   Layout 3 corsie: Visite (Y=30) · Esami (Y=60) · Eco (Y=90)
   Bloom animation · Magnetic snap · Real-time EG badge
────────────────────────────────────────────────────────────────────── */

/* Trimestre background zones — pointer-events off */
.nav-trim-zone {
    pointer-events: none;
}

/* Sprint 37 V3: fill vividi per riconoscimento T1/T2/T3 immediato */
.nav-trim-zone--t1 {
    fill: rgba(59, 130, 246, 0.14);
}

/* #3b82f6 blue */
.nav-trim-zone--t2 {
    fill: rgba(249, 115, 22, 0.12);
}

/* #f97316 orange */
.nav-trim-zone--t3 {
    fill: rgba(168, 85, 247, 0.12);
}

/* #a855f7 violet */

/* Track backbone lines */
.nav-track-line {
    stroke-width: 1.5;
    pointer-events: none;
    opacity: 0.80;
}

.nav-track--visite {
    stroke: var(--lane-maternal-border);
}

.nav-track--esami {
    stroke: rgba(100, 116, 139, 0.70);
}

.nav-track--eco {
    stroke: var(--lane-fetal-border);
}

/* Track labels */
.nav-track-label {
    font-size: 10px;
    font-family: monospace;
    font-weight: 700;
    pointer-events: none;
    opacity: 0.90;
}

.nav-track-label--visite {
    fill: var(--lane-maternal-border);
}

.nav-track-label--esami {
    fill: #475569;
}

.nav-track-label--eco {
    fill: var(--lane-fetal-border);
}

/* Navigator events — tutti i dot/diamanti/milestone sui 3 track */
.nav-event {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s var(--spring-standard);
    cursor: pointer;
}

.nav-event.in-cluster {
    transform: translateY(var(--cluster-dy, 0px));
}

.nav-event.is-bloomed {
    transform: translateY(0);
}

/* Cursor group — posizionato via SVG transform="translate(X,0)" */
/* Transizione spring applicata SOLO durante snap (classe .is-transitioning) */
#nav-cursor-group.is-transitioning {
    transition: transform 0.3s var(--spring-standard);
}

/* ── Sprint 28: Glass Pill Cursor — TRANSPARENT LOCKED STATE ─────────────
   REGOLA ASSOLUTA: backdropfilter NON va MAI dentro un elemento SVG.
   CURSOR STATE LOCK: nessun fill/stroke cambia mai in base a is-snapped
   o is-current-week. Il cursore rimane vetro trasparente + spine rossa
   in ogni stato: idle, drag, snapped, current-week.                      */
.nav-glass-cursor {
    fill: transparent;
    /* COMPLETAMENTE TRASPARENTE — nessun tint */
    stroke: none;
    pointer-events: none;
}

/* Nessun override di stato — cursor visually locked */

/* ── Glass Cursor Pill — HTML overlay, Hybrid Layering (backdrop-filter) ──
   Sfondo TRASPARENTE: solo effetto lente blur(2px), nessuna patina.      */
.nav-satin-pill {
    position: absolute;
    top: 2px;
    left: 0;
    width: 10px;
    /* stretto — corrisponde al cursore SVG */
    height: 116px;
    border-radius: 5px;
    background: transparent;
    /* NESSUN fill — lente pura */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: none;
    box-shadow: none;
    opacity: 0;
    /* nascosto finché JS non posiziona */
    pointer-events: none;
    will-change: transform, opacity;
    transform: translateX(0px);
    transition: opacity 0.25s var(--spring-standard);
}

.nav-satin-pill.is-visible {
    opacity: 1;
    transform: translateX(var(--overlay-x, 0px));
    /* fallback CSS-var per spring */
}

.nav-satin-pill.is-transitioning {
    transition:
        opacity 0.25s var(--spring-standard),
        transform 0.3s var(--spring-standard);
}

/* Spine rossa — indicatore di precisione centrale (STATO BLOCCATO) */
.nav-cursor-spine {
    stroke: #ef4444;
    /* red-500 — invariabile */
    stroke-width: 1.6;
    opacity: 0.90;
    pointer-events: none;
}

/* Nessun override is-snapped / is-current-week — spine rossa fissa in ogni stato */

/* nav-cursor-line — rimpiazzata dalla spine rossa, mantenuta nascosta */
.nav-cursor-line {
    display: none;
}

/* Milestone tooltip — appare su pointerenter, nascosto se is-snapped */
.nav-tooltip {
    position: absolute;
    background: var(--lane-shared-bg);
    border: 1px solid var(--lane-shared-border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: var(--font-size-label);
    color: var(--lane-shared-label);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s var(--ease-clinical);
    white-space: nowrap;
    z-index: var(--z-dropdown);
    transform: translateX(-50%);
}

.nav-tooltip.is-visible {
    opacity: 1;
}

/* Cursor EG label — text-shadow tramite SVG filter per leggibilità */
.nav-cursor-label {
    font-size: 10px;
    font-weight: 700;
    fill: #0f172a;
    font-family: monospace;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.70));
}

/* ── Progress Bar inferiore — avanzamento EG con colori per trimestre ──── */
.nav-progress-bar-wrap {
    border-radius: 4px;
    overflow: hidden;
    height: 8px;
    margin: 5px 0 3px;
    background: rgba(226, 232, 240, 0.45);
}

.nav-progress-bar-svg {
    width: 100%;
    height: 8px;
    display: block;
}

/* Segmenti di riempimento — colori coerenti con nav-trim-zone */
.nav-pb-t1 {
    fill: rgba(59, 130, 246, 0.80);
}

/* blue-500   — T1 */
.nav-pb-t2 {
    fill: rgba(99, 102, 241, 0.80);
}

/* indigo-500 — T2 */
.nav-pb-t3 {
    fill: rgba(168, 85, 247, 0.80);
}

/* purple-500 — T3 */
.nav-pb-marker {
    stroke: #ef4444;
    stroke-width: 2;
}

/* Info bar — si espande al primo snap */
.nav-info-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 0.5rem;
    font-size: 0.63rem;
    font-family: monospace;
    color: #64748b;
    transition: height 0.25s, padding 0.2s, opacity 0.2s;
}

.nav-info-bar.is-active {
    height: 1.6rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    opacity: 1;
}

.nav-info-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    color: #1e293b;
}

.nav-info-eg {
    color: var(--blu);
    font-weight: 700;
}

.nav-info-sep {
    color: #cbd5e1;
}

/* ── Sprint 31 — Bianchi Style Navigator ───────────────────────────────
   Cursor line SVG · Cursor pill HTML (backdrop-filter here only!) ·
   Week scale ticks/labels · CSS custom-property progress bar.
──────────────────────────────────────────────────────────────────────── */

/* Cursor line — dashed red, Sprint 37 V3 */
#nav-cursor-line {
    display: block;
    /* override legacy .nav-cursor-line { display:none } */
    stroke: #ef4444;
    stroke-width: 2;
    stroke-dasharray: 4 3;
    /* Sprint 37: dashed */
    opacity: 0.90;
    pointer-events: none;
}

/* Cursor pill — mantenuta per retrocompatibilità JS; non in DOM (Sprint 37.5) */
.nav-cursor-pill {
    display: none;
}

.nav-cursor-pill.is-dragging {
    transition: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Magnifier Lens — Sprint 37.5: Lente Magnifica iOS 26 Hyper-Depth
   Layer 2 HTML posizionato assolutamente sopra il SVG del navigatore.
   Posizione: left (aggiornata da syncOverlay() via JS), centrata -50%.
   pointer-events: none → drag delegato all'SVG sottostante (logica intatta).
   ══════════════════════════════════════════════════════════════════════════ */
.nav-magnifier-lens {
    position: absolute;
    top: 6px;
    left: 0;
    /* aggiornato da syncOverlay() */
    width: 56px;
    height: calc(100% - 14px);
    border-radius: 14px;
    /* Vetro sottilissimo: i colori delle bande filtrano attraverso */
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.32);
    /* Color pop: saturate 350% + contrast 128% = effetto lente vivida */
    backdrop-filter: blur(14px) saturate(350%) contrast(128%);
    -webkit-backdrop-filter: blur(14px) saturate(350%) contrast(128%);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18);
    transform: translateX(-50%);
    /* sempre centrata sul punto cursore */
    pointer-events: none;
    /* non blocca drag SVG */
    will-change: left;
    transition: left 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    z-index: 5;
    /* sopra SVG, sotto popup #nav-popover */
}

/* Disabilita spring durante drag live (rAF Q1) */
.nav-magnifier-lens.is-dragging {
    transition: none !important;
    cursor: grabbing;
}

/* State classes — effetti visivi opzionali */
.nav-magnifier-lens.is-snapped {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 4px 24px rgba(239, 68, 68, 0.18),
        0 4px 20px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

.nav-magnifier-lens.is-current-week {
    /* intentionally empty */
}

.nav-magnifier-lens.is-transitioning {
    /* intentionally empty */
}

/* Linea rossa verticale integrata — attraversa il pannello di altezza piena */
.nav-lens-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(239, 68, 68, 0.00) 0%,
            rgba(239, 68, 68, 0.85) 12%,
            rgba(239, 68, 68, 1.00) 30%,
            rgba(239, 68, 68, 1.00) 70%,
            rgba(239, 68, 68, 0.85) 88%,
            rgba(239, 68, 68, 0.00) 100%);
    border-radius: 2px;
    pointer-events: none;
}

/* Testo settimana — grande, centrato, su sfondo satinato per leggibilità */
#nav-cursor-eg-label,
.nav-lens-label {
    position: relative;
    /* sopra .nav-lens-line (z-index non necessario: stacking) */
    font-size: 1.05rem;
    font-weight: 800;
    font-family: monospace;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.98),
        0 1px 3px rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.72);
    border-radius: 5px;
    padding: 2px 5px;
    display: block;
    text-align: center;
}

/* Events background layer */
#nav-events-bg {
    fill: rgba(255, 255, 255, 0.0);
    pointer-events: none;
}

/* Week scale — minor ticks */
.nav-week-tick {
    stroke: var(--lane-shared-border);
    stroke-width: 0.8;
    opacity: 0.30;
    pointer-events: none;
}

.nav-week-tick--major {
    stroke-width: 1.4;
    opacity: 0.65;
}

/* Week scale labels */
.nav-week-label {
    font-size: 9px;
    fill: var(--lane-shared-label);
    opacity: 0.55;
    pointer-events: none;
    font-family: var(--font-family-ui);
}

.nav-week-label--major {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.75;
}

/* Rhombus event shapes (JS-created via createRhombus) */
.nav-rhombus-visit {
    fill: #3b82f6;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.5;
    cursor: pointer;
}

.nav-rhombus-exam {
    fill: #64748b;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.5;
    cursor: pointer;
}

.nav-rhombus-eco {
    fill: #8b5cf6;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.5;
    cursor: pointer;
}

.nav-rhombus-milestone {
    fill: #e2e8f0;
    stroke: #94a3b8;
    stroke-width: 1.5;
    cursor: pointer;
}

.nav-event-label {
    font-size: 8px;
    fill: #94a3b8;
    font-family: monospace;
    pointer-events: none;
}

/* CSS custom-property progress bar — SSR sets --eg-pct/--t1-pct/--t2-pct */
.nav-progress-bar {
    height: 8px;
    border-radius: 4px;
    margin: 5px 0 3px;
    background: linear-gradient(to right,
            rgba(59, 130, 246, 0.80) 0%,
            rgba(59, 130, 246, 0.80) min(var(--eg-pct, 0%), var(--t1-pct, 31%)),
            rgba(99, 102, 241, 0.80) min(var(--eg-pct, 0%), var(--t1-pct, 31%)),
            rgba(99, 102, 241, 0.80) min(var(--eg-pct, 0%), var(--t2-pct, 64%)),
            rgba(168, 85, 247, 0.80) min(var(--eg-pct, 0%), var(--t2-pct, 64%)),
            rgba(168, 85, 247, 0.80) var(--eg-pct, 0%),
            rgba(226, 232, 240, 0.45) var(--eg-pct, 0%) 100%);
}

/* ── Sprint 20 — Posizionamento iniziale EG corrente ───────────────────
   Cursor settimana corrente: visibile al caricamento, si azzera al drag.
   Spring-back al rilascio senza snap.
────────────────────────────────────────────────────────────────────── */
/* Sprint 25 — glass-cursor e spine nascosti globalmente; override via .nav-cursor-line */
/* (is-current-week sky + is-snapped solid-blue già gestiti sulla .nav-cursor-line sopra) */
/* Indicatore "oggi" — pallino fisso sulla timeline centrale (Y=60) */
.nav-today-dot {
    fill: #3b82f6;
    /* Sprint 25: blu coerente con nav-cursor-line */
    r: 4px;
    pointer-events: none;
}

/* 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 {  /* CONFLITTO style.css — vedi override giada_style.css in fondo */
    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 — Sprint 38: NEUTRALIZZATI (neon glow distrutti per DoD) */
.kpi-pill-danger {
    /* animation RIMOSSA — zero glow rosso esterno */
}

.kpi-pill-warning {
    /* animation RIMOSSA — zero glow arancio esterno */
}

@keyframes pill-danger-pulse {

    0%,
    100% {
        box-shadow: none;
    }
}

@keyframes pill-warning-pulse {

    0%,
    100% {
        box-shadow: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   CLINICAL FILTER BELT — Sprint 38
   7 filtri operativi · iOS 26 Hyper-Depth · WCAG 2.2 AAA
   Riposo: vetro semi-trasparente · Attivo: sfondo bianco + testo #1e293b
   Zero ombre esterne colorate. Zero neon glow.
══════════════════════════════════════════════════════════════════════════ */

.filter-belt {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .55rem .9rem;
    padding: .4rem 0 1rem;
    align-items: stretch;
}

/* ── Riposo: vetro Light Theme — Sprint 38.1 HOTFIX contrasto ── */
.filter-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .70rem 1.15rem .65rem;
    min-width: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.45);
    /* vetro più corposo */
    border: 1px solid rgba(15, 23, 42, 0.10);
    /* bordo scuro leggerissimo */
    border-bottom: 3px solid transparent;
    /* placeholder accent */
    color: #475569;
    /* Slate-600 — leggibile su sfondo chiaro */
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    user-select: none;
    white-space: nowrap;
    transition: background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* stacco minimo, zero glow */
}

/* ── Riposo hover ── */
.filter-pill:hover:not([aria-pressed="true"]),
.filter-pill:focus-visible:not([aria-pressed="true"]) {
    background: rgba(255, 255, 255, 0.75);
    /* fill bianco opaco — stacco visivo netto */
    border-color: rgba(15, 23, 42, 0.15);
    color: #1e293b;
    /* slate-800: contrasto 12:1 su bg/75 — AAA */
    text-shadow: none !important;
    /* rimuove qualsiasi shadow chiara di riposo */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── ATTIVO: sfondo bianco opaco, testo scuro — WCAG 2.2 contrasto ≥7:1 ── */
.filter-pill[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-bottom: 3px solid var(--fp-accent, #3b82f6);
    /* accent semantico */
    color: #1e293b;
    /* Slate 800 — contrasto 12:1 su bianco */
    box-shadow: none;
    /* zero glow neon — DoD Sprint 38 */
}

/* Valore numerico grande — "Value-over-Title" */
.fp-val {
    display: block;
    font-size: 1.38rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: inherit;
}

/* Etichetta piccola sotto il valore */
.fp-lbl {
    display: block;
    font-size: .56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.25;
    opacity: 0.80;
}

/* Quando attivo: numero con colore accent, label scura */
.filter-pill[aria-pressed="true"] .fp-val {
    color: var(--fp-accent, #3b82f6);
}

.filter-pill[aria-pressed="true"] .fp-lbl {
    color: #1e293b;
    opacity: 0.70;
}

/* ── HTMX: pulsing del bottone cliccato durante il caricamento ── */
.filter-pill.htmx-request {
    animation: pill-pulse 0.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pill-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ── HTMX: tabella fantasma durante il caricamento (delay 0.1s = no flash su NUC) ── */
#pazienti-wrapper.is-loading {
    opacity: 0.45;
    filter: blur(1.5px);
    transition: opacity 0.2s ease 0.1s, filter 0.2s ease 0.1s;
    pointer-events: none;
}

/* ── Responsive: filter belt su tablet/mobile ── */
@media (max-width: 768px) {
    .filter-belt {
        grid-template-columns: repeat(4, 1fr);
        gap: .4rem .6rem;
    }

    .filter-pill {
        padding: .60rem .9rem .55rem;
    }

    .fp-val {
        font-size: 1.15rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   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 — Sprint 21 (rilocato nel Navigator, toggle iconico)
   Toggle: #focus-toggle button → body.ui-focus-mode
   ON: slab anamnestici → grayscale(0.8) opacità ridotta
       Sentinel Belt + Navigator → inalterati (sempre brillanti)
══════════════════════════════════════════════════════════════════════════ */

/* .nav-header-controls + .nav-focus-btn rimossi — Sprint 31-HOTFIX fix-02 */

/* ── Slab header Ultima Visita — flex per ospitare pulsante Referto ─── */
.slab-vc-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.slab-vc-referto {
    flex-shrink: 0;
}

/* ── body.ui-focus-mode — Sprint 21 ─────────────────────────────────── */

/* Slab anamnestici: desaturati e dimmed (GPU safe, no blur dinamico) */
body.ui-focus-mode .focus-mode-dimmed {
    opacity: 0.22 !important;
    filter: grayscale(0.8) brightness(0.94) !important;
    transition: opacity .4s ease, filter .4s ease !important;
    pointer-events: none;
}

/* Slab con alert: glow Vision Pro blu — restano brillanti */
body.ui-focus-mode .card-scheda:not(.focus-mode-dimmed),
body.ui-focus-mode .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;
}

/* Sentinel Belt + Navigator: sempre inalterati in Focus Mode */
body.ui-focus-mode #sentinel-belt,
body.ui-focus-mode .gest-nav-wrap,
body.ui-focus-mode .sticky-context-console {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
}

/* ── .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 ──────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   A.R.I.A. CLINICAL INSIGHTS BOX — Phase 4 Sentinel EBM
   Satin Glass · Blur 60px · Saturazione 2.2 · Radius 20px · Lift -4px
   Conforme DNA iOS 26 Hyper-Depth (§UI.4)
══════════════════════════════════════════════════════════════════════════ */

.aria-insights-box {
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(30, 41, 59, 0.09),
        0 1px 3px rgba(30, 41, 59, 0.06);
    margin: 0.75rem 0 0.5rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
    overflow: hidden;
    /* Ottimizzazione rendering PC lenti: il browser salta paint/layout
       se il box è fuori viewport. Nessun impatto visivo. */
    content-visibility: auto;
    contain-intrinsic-size: 0 120px;
    /* stima altezza collassata per avoid CLS */
}

.aria-insights-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(30, 41, 59, 0.13),
        0 2px 6px rgba(30, 41, 59, 0.08);
}

.aria-insights-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
}

.aria-insights-icon {
    color: #5AABDB;
    display: flex;
}

.aria-insights-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.02em;
}

.aria-insights-badge {
    font-size: 0.57rem;
    font-weight: 700;
    color: #5AABDB;
    background: rgba(90, 171, 219, 0.12);
    border: 1px solid rgba(90, 171, 219, 0.3);
    border-radius: 6px;
    padding: 0.06rem 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aria-insights-counts {
    display: flex;
    gap: 0.3rem;
    flex: 1;
}

.aria-count-pill {
    font-size: 0.57rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 0.05rem 0.3rem;
}

.aria-pill-critico {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.aria-pill-moderato {
    color: #d97706;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.28);
}

.aria-pill-monit {
    color: #ca8a04;
    background: rgba(202, 138, 4, 0.10);
    border: 1px solid rgba(202, 138, 4, 0.22);
}

.aria-insights-toggle {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 6px;
    transition: background 0.15s;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.aria-insights-toggle:hover {
    background: rgba(100, 116, 139, 0.10);
}

.aria-insights-scroll {
    padding: 0.4rem 0.85rem 0.3rem;
    max-height: 320px;
    overflow-y: auto;
}

.aria-alert-row {
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

/* Varianti colore per livello (sostituiscono i style= inline rimossi dal template) */
.aria-alert-row-critico {
    background: rgba(239, 68, 68, 0.10);
    border-left: 3px solid #dc2626;
}

.aria-alert-row-critico .aria-alert-icon,
.aria-alert-row-critico .aria-alert-parametro {
    color: #dc2626;
}

.aria-alert-row-critico .aria-alert-grado {
    background: #dc2626;
}

.aria-alert-row-moderato {
    background: rgba(234, 179, 8, 0.09);
    border-left: 3px solid #d97706;
}

.aria-alert-row-moderato .aria-alert-icon,
.aria-alert-row-moderato .aria-alert-parametro {
    color: #d97706;
}

.aria-alert-row-moderato .aria-alert-grado {
    background: #d97706;
}

.aria-alert-row-monit {
    background: rgba(202, 138, 4, 0.07);
    border-left: 3px solid #ca8a04;
}

.aria-alert-row-monit .aria-alert-icon,
.aria-alert-row-monit .aria-alert-parametro {
    color: #ca8a04;
}

.aria-alert-row-monit .aria-alert-grado {
    background: #ca8a04;
}

.aria-alert-icon {
    font-size: 0.85rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.aria-alert-body {
    flex: 1;
    min-width: 0;
}

.aria-alert-header-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.18rem;
}

.aria-alert-parametro {
    font-size: 0.72rem;
    font-weight: 700;
}

.aria-alert-grado {
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    padding: 0.05rem 0.28rem;
}

.aria-alert-valore {
    font-size: 0.6rem;
    color: #64748b;
    font-family: monospace;
    background: rgba(100, 116, 139, 0.10);
    border-radius: 4px;
    padding: 0.05rem 0.28rem;
}

.aria-alert-descrizione {
    font-size: 0.68rem;
    color: #334155;
    line-height: 1.4;
}

.aria-alert-fonte {
    font-size: 0.6rem;
    color: #94a3b8;
    margin-top: 0.18rem;
    display: flex;
    gap: 0.25rem;
    align-items: flex-start;
}

.aria-insights-disclaimer {
    font-size: 0.58rem;
    color: #94a3b8;
    padding: 0.4rem 0.85rem 0.55rem;
    border-top: 1px solid rgba(100, 116, 139, 0.12);
    line-height: 1.5;
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;
}

/* ── Print: nasconde il box negli stampati ─────────────────────────────── */
@media print {
    .aria-insights-box {
        display: none !important;
    }
}

/* ── END A.R.I.A. CLINICAL INSIGHTS ─────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   SPRINT 11 — Glass Pills · Panoramic Slab · Omni-Search · Scrollspy
   iOS 26 Hyper-Depth: blur 60px · saturazione 2.2
══════════════════════════════════════════════════════════════════════════ */

/* ── Glass Pill ──────────────────────────────────────────────────────────── */
.glass-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid;
    cursor: default;
    transition: transform 0.12s, box-shadow 0.12s;
    backdrop-filter: blur(20px) saturate(2.2);
    -webkit-backdrop-filter: blur(20px) saturate(2.2);
}

a.glass-pill {
    cursor: pointer;
}

a.glass-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

.pill-danger {
    background: rgba(254, 202, 202, 0.58);
    border-color: rgba(239, 68, 68, 0.42);
    color: #b91c1c;
}

.pill-warning {
    background: rgba(254, 240, 138, 0.58);
    border-color: rgba(202, 138, 4, 0.42);
    color: #92400e;
}

.pill-success {
    background: rgba(187, 247, 208, 0.58);
    border-color: rgba(22, 163, 74, 0.38);
    color: #15803d;
}

.pill-info {
    background: rgba(186, 230, 253, 0.58);
    border-color: rgba(14, 165, 233, 0.38);
    color: #0369a1;
}

/* Sprint 21 — varianti Crystal e Ghost per pillole d'azione nell'header */
.glass-pill--crystal {
    background: rgba(219, 234, 254, 0.55);
    border-color: rgba(37, 99, 235, 0.38);
    color: #1d4ed8;
}

a.glass-pill--crystal:hover {
    background: rgba(219, 234, 254, 0.82);
    border-color: rgba(37, 99, 235, 0.55);
    color: #1e40af;
}

.glass-pill--ghost {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(100, 116, 139, 0.22);
    color: #64748b;
}

a.glass-pill--ghost:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(100, 116, 139, 0.40);
    color: #334155;
}

/* ── Slab Panoramic — legacy (kept for any surviving references) ─────────── */
.slab-panoramic {
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 12px rgba(30, 41, 59, 0.06);
}

/* ── Sprint 25 / Sprint 31 fix: 6-category Anamnesi Grid — 3 colonne ───── */
.slab-anam6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
    row-gap: 6px;
    /* row compatto (Task 4): meno aria verticale tra riga 1 e riga 2 */
    width: 100%;
    align-items: start;
    height: fit-content;
}

.anam6-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(40px) saturate(2);
    -webkit-backdrop-filter: blur(40px) saturate(2);
    border: 1px solid rgba(255, 255, 255, 0.50);
    box-shadow: 0 1px 8px rgba(30, 41, 59, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
    cursor: pointer;
}

.anam6-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, 0.56);
    text-decoration: none;
    color: inherit;
}

.anam6-card:focus {
    outline: 2px solid rgba(59, 130, 246, .55);
    outline-offset: 2px;
    text-decoration: none;
    color: inherit;
}

.anam6-card--alert {
    border-color: rgba(239, 68, 68, .30) !important;
    background: rgba(254, 242, 242, .72) !important;
}

.anam6-card--alert:hover {
    background: rgba(254, 226, 226, .82) !important;
}

.anam6-card-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

.anam6-card-title .bi {
    font-size: 0.75rem;
}

.anam6-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 22px;
}

.anam6-pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.anam6-pill--danger {
    background: rgba(220, 38, 38, .10);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, .25);
}

.anam6-pill--warn {
    background: rgba(234, 179, 8, .10);
    color: #b45309;
    border: 1px solid rgba(234, 179, 8, .30);
}

.anam6-pill--ok {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, .25);
}

.anam6-pill--info {
    background: rgba(99, 102, 241, .10);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, .25);
}

.anam6-muta {
    font-size: 0.70rem;
    color: #94a3b8;
    font-style: italic;
}

/* ── Omni-Search ─────────────────────────────────────────────────────────── */
.omni-search-wrap {
    position: sticky;
    top: calc(var(--topbar-h, 60px) + 4px);
    z-index: 200;
    margin-bottom: 0.85rem;
}

.omni-search-input {
    width: 100%;
    padding: 0.48rem 0.9rem 0.48rem 2.1rem;
    border-radius: 12px;
    border: 1.5px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(40px) saturate(2.2);
    -webkit-backdrop-filter: blur(40px) saturate(2.2);
    font-size: 0.84rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    color: #1e293b;
}

.omni-search-input:focus {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.omni-search-icon {
    position: absolute;
    left: 0.62rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.84rem;
    pointer-events: none;
}

.omni-no-results {
    text-align: center;
    padding: 0.35rem 0;
    font-size: 0.78rem;
    color: #94a3b8;
    display: none;
}

.omni-highlight {
    border: 2px solid #3B82F6 !important;
    animation: omni-pulse 400ms ease-out;
}

@keyframes omni-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.50);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* ── Scrollspy active — Fase 3C ──────────────────────────────────────────── */
.anam-nav-item.scrollspy-active {
    color: var(--blu, #2563eb);
    border-left: 3px solid var(--blu, #2563eb);
    font-weight: 700;
    background: rgba(219, 234, 254, 0.55);
}

/* ── Accordion section — Fase 3D ─────────────────────────────────────────── */
.anam-section {
    margin-bottom: 1.1rem;
    border-radius: 14px;
    border: 1.5px solid rgba(226, 232, 240, 0.85);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(40px) saturate(2.2);
    -webkit-backdrop-filter: blur(40px) saturate(2.2);
}

.anam-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.68rem 1rem;
    cursor: pointer;
    background: rgba(248, 250, 252, 0.72);
    border-bottom: 1.5px solid rgba(226, 232, 240, 0.85);
    user-select: none;
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    transition: background 0.12s;
}

.anam-section-header:hover {
    background: rgba(219, 234, 254, 0.42);
}

.anam-section-toggle {
    margin-left: auto;
    transition: transform 0.2s;
    font-size: 0.72rem;
    color: #94a3b8;
}

.anam-section.collapsed .anam-section-toggle {
    transform: rotate(-90deg);
}

.anam-section-status {
    font-size: 0.66rem;
    font-weight: 400;
    color: #94a3b8;
    margin-left: 0.25rem;
}

.anam-section-body {
    padding: 0.85rem 1rem;
    max-height: 4000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s, padding 0.2s;
}

.anam-section.collapsed .anam-section-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.anam-section[data-has-alert="1"] .anam-section-body {
    max-height: 4000px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ── Field save feedback — Fase 3B ──────────────────────────────────────── */
.save-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-sm11 0.6s linear infinite;
    vertical-align: middle;
    margin-left: 4px;
}

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

.save-ok {
    color: #16a34a;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 4px;
}

/* ── Error toast ─────────────────────────────────────────────────────────── */
#save-error-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 5rem;
    z-index: 9998;
    background: rgba(254, 215, 170, 0.94);
    backdrop-filter: blur(40px) saturate(2.2);
    -webkit-backdrop-filter: blur(40px) saturate(2.2);
    border: 1.5px solid rgba(251, 146, 60, 0.55);
    border-radius: 12px;
    padding: 0.68rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #7c2d12;
    display: none;
    max-width: 320px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* ── Undo toast ──────────────────────────────────────────────────────────── */
#undo-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 260px;
    z-index: 9998;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(40px) saturate(2.2);
    -webkit-backdrop-filter: blur(40px) saturate(2.2);
    border: 1.5px solid rgba(148, 163, 184, 0.4);
    border-radius: 12px;
    padding: 0.62rem 1rem;
    font-size: 0.82rem;
    color: #1e293b;
    display: none;
    max-width: 360px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    transition: opacity 0.2s;
}

@media print {

    .omni-search-wrap,
    #undo-toast,
    #save-error-toast {
        display: none !important;
    }
}

/* ── END SPRINT 11 ────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   UNIFIED ICON SYSTEM — Sprint 18
   Sprite: /static/svg/icons-sprite.svg · Macro: macros/ui_components.html
   iOS 26 Hyper-Depth · 1.5px stroke · fill=none · 24×24 viewBox
   Zero PNG/JPG — Solo SVG vettoriale — CSS variables ovunque
══════════════════════════════════════════════════════════════════════════ */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    overflow: visible;
    flex-shrink: 0;
}

/* ── Modificatori colore clinico ── */
.icon--ok {
    color: var(--verde);
}

.icon--warn {
    color: var(--giallo-d);
}

.icon--high {
    color: #ea580c;
}

.icon--danger {
    color: var(--rosso);
}

.icon--info {
    color: var(--blu);
}

.icon--purple {
    color: var(--viola-d);
}

.icon--cyan {
    color: #0891b2;
}

.icon--muted {
    color: var(--text-muted-glass);
}

.icon--amber {
    color: var(--giallo);
}

/* ── Modificatori dimensione ── */
.icon--sm {
    width: 0.875em;
    height: 0.875em;
}

.icon--lg {
    width: 1.25em;
    height: 1.25em;
}

.icon--xl {
    width: 1.5em;
    height: 1.5em;
}

.icon--2x {
    width: 2em;
    height: 2em;
}

.icon--3x {
    width: 3em;
    height: 3em;
}

/* ── Sidebar nav: icone 20×20 fisse ── */
.sidebar-nav-item .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Pulsanti con icona ── */
.btn .icon,
button .icon {
    margin-right: 0.3em;
}

/* ── Sì/No semantico nei loop anamnesi ── */
.val-si {
    color: var(--verde);
    font-weight: 600;
}

.val-no {
    color: var(--text-muted-glass);
    font-weight: 400;
}

@media print {
    .icon {
        display: none !important;
    }
}

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

/* ══════════════════════════════════════════════════════════════════
   Sprint 27 — Danger Zone + Modale Eliminazione
   ══════════════════════════════════════════════════════════════════ */

/* ── Danger Zone container ── */
.danger-zone {
    margin: 2.5rem auto 1.5rem;
    max-width: 680px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(239, 68, 68, 0.30);
    border-radius: 12px;
    background: rgba(254, 242, 242, 0.55);
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
}

.danger-zone__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #b91c1c;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
}

.danger-zone__desc {
    font-size: 0.84rem;
    color: #7f1d1d;
    margin: 0 0 1rem;
    line-height: 1.55;
    opacity: 0.85;
}

/* ── Bottone pericolo ── */
.btn-danger {  /* CONFLITTO style.css — vedi override giada_style.css in fondo */
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.50);
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.18);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ── Modale nativa <dialog> ── */
.modal-elimina {
    border: none;
    padding: 0;
    border-radius: 16px;
    max-width: 460px;
    width: 90vw;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    background: transparent;
}

.modal-elimina::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-elimina__panel {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-radius: 16px;
    padding: 2rem 1.75rem 1.5rem;
    border: 1px solid rgba(239, 68, 68, 0.20);
}

.modal-elimina__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #991b1b;
    margin: 0 0 0.85rem;
}

.modal-elimina__body {
    font-size: 0.875rem;
    color: var(--text-primary, #1e293b);
    line-height: 1.6;
    margin: 0 0 1.1rem;
}

.modal-elimina__body code {
    font-family: var(--font-family-mono, monospace);
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.92em;
    letter-spacing: 0.05em;
}

.modal-elimina__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: var(--font-family-mono, monospace);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1e293b;
    background: rgba(255, 255, 255, 0.80);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    margin-bottom: 1.2rem;
}

.modal-elimina__input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.modal-elimina__input.is-valid {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.modal-elimina__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.modal-elimina__btn {
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    border: 1px solid transparent;
}

.modal-elimina__btn--cancel {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary, #1e293b);
    border-color: rgba(0, 0, 0, 0.10);
}

.modal-elimina__btn--cancel:hover {
    background: rgba(0, 0, 0, 0.10);
}

/* Bottone confirm: disabilitato di default, animazione pulse quando attivo */
.btn-danger--confirm {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: #ef4444;
    color: #fff;
    border-color: #dc2626;
}

.btn-danger--confirm:not([disabled]) {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
    animation: pulse-danger 1.8s ease-in-out infinite;
}

@keyframes pulse-danger {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.40);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.00);
    }
}

/* ══ CLINICAL KPI — Sprint 34 ══════════════════════════════════════════════ */
.clinical-kpi-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: .3rem 0 .4rem;
}

.clinical-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.clinical-kpi__top {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.clinical-kpi__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

.clinical-kpi__label {
    font-size: 0.60rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.clinical-kpi__trend {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.trend--up {
    color: #dc2626;
}

.trend--down {
    color: #16a34a;
}

.trend--stable {
    color: #94a3b8;
}

/* WCAG 2.1 Alert: sfondo solido per contrasto AAA */
.clinical-kpi--alert {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 6px;
    padding: 2px 6px;
    margin: -2px -6px;
}

.clinical-kpi--alert .clinical-kpi__value {
    color: #b91c1c;
    text-shadow: none;
}

.clinical-kpi--warning .clinical-kpi__value {
    color: #d97706;
}

/* ══ DANGER ZONE — Sprint 34: Red Glass Slab ═══════════════════════════════ */
.danger-zone-wrap {
    margin-top: 3rem;
    padding: 0 1rem 4rem;
}

.danger-zone-slab {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.danger-zone-header {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.danger-zone-icon {
    width: 20px;
    height: 20px;
    color: #dc2626;
    margin-bottom: .35rem;
}

.danger-zone-title {
    font-size: .9rem;
    font-weight: 700;
    color: #dc2626;
}

.danger-zone-sub {
    font-size: .72rem;
    color: #f87171;
    opacity: .8;
}

.danger-zone-btn {
    flex-shrink: 0;
    background: rgba(220, 38, 38, 0.75);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: .5rem 1.5rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.danger-zone-btn:hover {
    background: rgba(220, 38, 38, 1);
}

@media (max-width: 480px) {
    .danger-zone-slab {
        flex-direction: column;
        align-items: flex-start;
    }

    .danger-zone-btn {
        width: 100%;
        text-align: center;
    }
}

/* ══ SOFT GLASS MODAL SYSTEM — Sprint 30 ════════════════════════════════ */
/* Contenitore globale modali — sempre presente nel DOM, vuoto a riposo */
#modal-container:empty {
    display: none;
}

/* Backdrop leggero: vetro sfocato, non scuro opprimente */
.giada-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(25px) saturate(1.4);
    -webkit-backdrop-filter: blur(25px) saturate(1.4);
    z-index: var(--z-modal-backdrop, 1090);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-out;
}

.giada-modal-backdrop.is-closing {
    opacity: 0;
    pointer-events: none;
}

/* Contenuto modale — Glass Slab iOS 26 */
.giada-modal-content {
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.14),
        0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    width: min(680px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    z-index: var(--z-modal-content, 401);
    animation: modal-in 0.22s var(--spring-standard) both;
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header modale */
.giada-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.5);
}

.giada-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lane-maternal-label);
}

.giada-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(203, 213, 225, 0.4);
    color: #6b7280;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s var(--ease-clinical);
    flex-shrink: 0;
}

.giada-modal-close:hover {
    background: rgba(203, 213, 225, 0.8);
}

/* Azioni form modale */
.giada-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(203, 213, 225, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS 26 HTMX MODAL OVERLAY — Sprint 31: Popup glassmorphic overlay
   Full-screen fixed overlay con backdrop blur + glass panel centered
   Animazione: fade-in backdrop + scale-in content panel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── #modal-overlay — Container fisso, nascosto di default ─────────────────
   Position: fixed, inset: 0, z-index: 1090. Display: none a riposo.
   Quando display: block, attivato da hx-on::after-swap nei button.         */
#modal-overlay {
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── .giada-modal-backdrop — Dark overlay con blur glassmorphic ─────────────
   rgba(15,23,42,0.45) + blur(25px) per isolamento visivo iOS 26.
   Click-to-close: hx-get="/modal/close".                                  */
.giada-modal-backdrop {
    animation: backdrop-in 0.3s ease-out forwards;
}

@keyframes backdrop-in {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 0.45;
        backdrop-filter: blur(25px);
    }
}

/* ── .giada-modal-content — Glass panel centra con spring animation ────────
   Background: rgba(255,255,255,0.93) + transform: translate(-50%,-50%).
   Animation: scale 0.8→1 con spring easing.                               */
.giada-modal-content {
    animation: modal-content-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modal-content-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ── .giada-modal-close — Pulsante chiudi rotondo ──────────────────────────
   28px ring, rounded, background muted, hover: more opaque.               */
.giada-modal-close {
    background: rgba(203, 213, 225, 0.4);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    font-size: 1.2rem;
    transition: background 0.2s ease;
}

.giada-modal-close:hover {
    background: rgba(203, 213, 225, 0.8);
}

/* ─────────────────────────────────────────────────────────────────────────
   MODAL GLASS ANAMNESI — iOS 26 Hyper-Depth Popup (SPRINT 32 / CLAUDE.md §6)
   Backdrop + Glass container + Scale animation 0.8→1 + iOS 26 glass styling
   ───────────────────────────────────────────────────────────────────────── */

/* ── #modal-container — Backdrop principale con blur e positioning ─────────
   Parent overlay che contiene tutte le modali. Position fixed, z-index alto.
   Backdrop satin glass: blur(20px) + dark overlay per isolamento visivo.       */
#modal-container {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    /* 1085 */
    background: rgba(15, 23, 42, 0.40);
    /* dark overlay */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    visibility: hidden;
    /* nascosto di default, attivato da HTMX */
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ── Quando HTMX carica il contenuto, la modal diventa visibile ─────────────*/
#modal-container[data-visible="true"],
#modal-container.show {
    visibility: visible;
    opacity: 1;
}

/* ── .modal-fragment — Contenitore principale della modal glass ───────────
   Satin Glass: rgba(255,255,255,0.35) + blur(60px) saturate(2.2).
   Border specular + box-shadow profonda per sollevamento iOS 26.
   Animation: scale 0.8→1 con spring curve per effetto di zoom.               */
.modal-fragment {
    background: var(--glass-satin-bg);
    /* rgba(255,255,255,0.35) */
    backdrop-filter: var(--glass-satin-blur);
    /* blur(60px) saturate(2.2) */
    -webkit-backdrop-filter: var(--glass-satin-blur);
    border: 1px solid rgba(255, 255, 255, 0.50);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20),
        0 4px 16px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.60);
    max-width: min(700px, 90vw);
    /* fluido su mobile */
    max-height: 85vh;
    overflow-y: auto;
    z-index: var(--z-modal);
    /* 2000 */
    animation: modal-glass-enter 0.4s var(--spring-standard);
    position: relative;
}

/* ── @keyframes modal-glass-enter — Zoom entrance 0.8→1 con spring curve ───
   User requirement: "scale 0.8→1, backdrop-blur-xl"                        */
@keyframes modal-glass-enter {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── .modal-fragment-header — Titolo + bottone chiudi ──────────────────────
   Flex layout: titolo a sx, bottone chiudi a dx.
   Border-bottom per separazione tra header e body.                          */
.modal-fragment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.30);
    flex-shrink: 0;
}

.modal-fragment-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.0rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.modal-fragment-title i {
    font-size: 1.2rem;
    color: var(--blu-d);
}

/* ── .modal-fragment-close — Bottone × per chiudere ─────────────────────────
   Cerchio trasparente on hover. Usa HTMX hx-get per il server.             */
.modal-fragment-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(100, 116, 139, 0.10);
    color: #64748b;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s var(--ease-clinical),
        color 0.15s var(--ease-clinical),
        transform 0.15s var(--ease-clinical);
}

.modal-fragment-close:hover {
    background: rgba(100, 116, 139, 0.25);
    color: #334155;
    transform: scale(1.1);
}

.modal-fragment-close:active {
    transform: scale(0.95);
}

/* ── .modal-fragment-body — Contenuto principale con scrolling ────────────
   Padding generoso per areazione. Scrollbar sottile.                       */
.modal-fragment-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-fragment-body::-webkit-scrollbar {
    width: 4px;
}

.modal-fragment-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-fragment-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.30);
    border-radius: 4px;
}

.modal-fragment-body::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.50);
}

/* ── Sezioni dentro il body ─────────────────────────────────────────────────
   Ogni sezione ha titolo + grid di pillole / campi.                       */
.modal-fragment-section {
    margin-bottom: 1.25rem;
}

.modal-fragment-section:last-child {
    margin-bottom: 0;
}

.modal-fragment-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.25);
}

/* ── Grid di pillole — Layout fluido con wrapping ─────────────────────────
   Ogni pillola rappresenta un checkbox booleano (es. "Diabete: Sì/No")      */
.modal-fragment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

/* ── .modal-fragment-pill — Pillola booleana (attiva/inattiva) ──────────────
   Satin glass con border speculare. Colore cambia in base a pill-active.    */
.modal-fragment-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1.5px solid transparent;
    background: rgba(226, 232, 240, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    cursor: default;
    transition: background 0.15s var(--ease-clinical),
        border-color 0.15s var(--ease-clinical),
        transform 0.15s var(--ease-clinical);
}

/* ── pill-active — Verde: valore TRUE ──────────────────────────────────── */
.modal-fragment-pill.pill-active {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.40);
    color: #15803d;
    font-weight: 600;
}

/* ── pill-inactive — Grigio: valore FALSE ────────────────────────────────*/
.modal-fragment-pill.pill-inactive {
    background: rgba(226, 232, 240, 0.50);
    border-color: rgba(203, 213, 225, 0.35);
    color: #94a3b8;
}

.pill-label {
    font-size: 0.70rem;
    opacity: 0.85;
}

.pill-val {
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── .modal-fragment-card — Card testuale per output campi ──────────────────
   Utilizzato per mostrare testi lunghi (descrizioni, note).                */
.modal-fragment-card {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.55);
    border: 1px solid rgba(203, 213, 225, 0.30);
    font-size: 0.80rem;
    color: #334155;
    line-height: 1.5;
}

.modal-fragment-card-label {
    font-size: 0.70rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}

/* ── .modal-fragment-text-field — Input/textarea negli EDIT modal ──────────
   Non usato nei fragment di sola lettura (scheda_paziente.html).           */
.modal-fragment-text-field {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid #dde3ea;
    border-radius: 8px;
    font-size: 0.80rem;
    background: rgba(255, 255, 255, 0.75);
    color: #1e293b;
    transition: border-color 0.15s;
}

.modal-fragment-text-field:focus {
    outline: none;
    border-color: var(--blu);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* ── .modal-fragment-footer — Azioni (bottoni) ─────────────────────────────
   Flex right-aligned per Chiudi + Modifica Completa.                      */
.modal-fragment-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 1.0rem 1.5rem;
    border-top: 1px solid rgba(203, 213, 225, 0.30);
    flex-shrink: 0;
}

.modal-fragment-footer .btn {
    font-size: 0.80rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE — Modal su schermi piccoli                                    */
@media (max-width: 640px) {
    #modal-container {
        padding: 0.75rem;
    }

    .modal-fragment {
        max-width: 95vw;
        max-height: 95vh;
    }

    .modal-fragment-header {
        padding: 1rem 1.2rem;
    }

    .modal-fragment-title {
        font-size: 0.90rem;
    }

    .modal-fragment-body {
        padding: 1rem;
    }

    .modal-fragment-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.5rem;
    }

    .modal-fragment-footer {
        padding: 0.85rem 1.2rem;
        flex-direction: column-reverse;
    }

    .modal-fragment-footer .btn {
        width: 100%;
    }
}

/* ── SPRINT 28 TASK-3: Anamnesi chip Rh-neg ─────────────────────────── */
.anam-chip--rh-neg {
    background: rgba(254, 226, 226, 0.7);
    color: var(--color-save-error);
    border-color: rgba(252, 165, 165, 0.6);
    font-weight: 700;
    box-shadow: none;
    /* zero glow esterno — Direttiva Pillole di Vetro */
}

/* Le anam6-card usano ora div con hx-get — cursor pointer */
.anam6-card {
    cursor: pointer;
}


/* ════════════════════════════════════════
   INLINE EDITOR STAGE — Sprint 39.1
   Zero dialog, zero z-index stack
   ════════════════════════════════════════ */
#stage-spinner,
.swap-spinner {
    display: none;
    padding: 1rem;
    text-align: center;
}

#stage-spinner.htmx-request,
.swap-spinner.htmx-request {
    display: block;
}

#anamnesi-editor-stage {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    /* Animazione su opacity e transform SOLO — niente 'all' per preservare GPU */
    transition:
        opacity 280ms ease,
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

#anamnesi-editor-stage.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Swap inline A / B / C — espansione clinica in-place ────────────────────
   Swap A: tra Scheda Gravidanza Attuale e Scheda Screening Infettivologico
   Swap B: tra Scheda Screening Infettivologico e il tris Visita/Analisi/Eco
   Swap C: tra il tris e l'Area di Pericolo
   Satin spec: bg rgba(255,255,255,0.35) · blur(60px) · saturate(2.2) · r=20px
   ───────────────────────────────────────────────────────────────────────── */
.swap-inline {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity 280ms ease,
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    /* SC 2.4.11 — assicura che il focus non sia oscurato dall'header */
    scroll-margin-top: var(--header-height, 80px);
    margin-bottom: 0.25rem;
}

.swap-inline.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Nasconde il container quando è vuoto (evita gap nel layout) */
.swap-inline:empty {
    margin-bottom: 0;
}

/* Glass-slab scoped agli swap: blur 60px · saturate 2.2 · r 20px */
.swap-inline .glass-slab {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    margin-bottom: 12px;
    cursor: default;
}

.swap-inline .glass-slab:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

/* ── Swap Panel — Glass Satin elevata iOS 26 — Sprint 45 ────────────────────
   Wrapper esterno dei 5 panel clinici (Gravidanza, Screening, Visite, Analisi, Eco).
   Il backdrop-filter è applicato QUI e SOLO QUI: nessun blur nidificato all'interno.
   isolation:isolate → stacking context separato (previene artefatti con grafici/tabelle).
   ────────────────────────────────────────────────────────────────────────────── */
.swap-panel {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    border-radius: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.80);
    margin-bottom: 12px;
    transform: translateY(-4px);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.30s cubic-bezier(0.16, 1, 0.3, 1);
}

.swap-panel:hover,
.swap-panel:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

/* ── Header tematici (no backdrop-filter — blur è sul .swap-panel padre) ─── */
.swap-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.swap-panel-header--verde {
    background: rgba(220, 252, 231, 0.55);
    border-bottom: 1px solid rgba(134, 239, 172, 0.45);
    color: #15803d;
}

.swap-panel-header--viola {
    background: rgba(124, 58, 237, 0.07);
    border-bottom: 1px solid rgba(167, 139, 250, 0.30);
    color: #4c1d95;
}

.swap-panel-header--blu {
    background: rgba(219, 234, 254, 0.55);
    border-bottom: 1px solid rgba(147, 197, 253, 0.45);
    color: #1e40af;
}

.swap-panel-header--indaco {
    background: rgba(237, 233, 254, 0.55);
    border-bottom: 1px solid rgba(196, 181, 253, 0.45);
    color: #4c1d95;
}

/* ── Corpo interno (no backdrop-filter — blur è sul .swap-panel padre) ───── */
.swap-panel__body {
    padding: 16px 18px;
}

/* Riga flat key/value (screening, analisi, tabella gravidanza) */
.swap-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .65rem;
    border-radius: 10px;
    margin-bottom: .4rem;
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(226, 232, 240, 0.45);
}

.swap-panel-row:last-child {
    margin-bottom: 0;
}

/* Blocco multi-riga (visite, ecografie — contengono KPI row + testo) */
.swap-panel-item {
    padding: .65rem .8rem;
    border-radius: 10px;
    margin-bottom: .5rem;
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(226, 232, 240, 0.45);
}

.swap-panel-item:last-child {
    margin-bottom: 0;
}

.swap-panel-item--alert {
    background: rgba(254, 226, 226, 0.65);
    border-color: rgba(252, 165, 165, 0.55);
}

/* ── GIADA TOAST — Sprint 39.4 ───────────────────────────────────────────── */
/* Usato da showToast() in scheda_paziente.html                               */
/* Triggered via HX-Trigger: {"showToast": {"message": "…", "type": "…"}}    */
.giada-toast {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    z-index: 10000;
    min-width: 220px;
    max-width: 360px;
    padding: 0.72rem 1.1rem;
    border-radius: 14px;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
    /* Slate-900 */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(60px) saturate(2.2);
    /* iOS 26 Hyper-Depth */
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.06);
    /* Animazione: invisibile → visibile */
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition:
        opacity 260ms ease,
        transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.giada-toast--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Variante success (verde) */
.giada-toast--success {
    background: rgba(220, 252, 231, 0.62);
    /* emerald-100/62 */
    border-color: rgba(74, 222, 128, 0.28);
    color: #14532d;
    /* green-900 */
}

/* Variante error (rosso) */
.giada-toast--error {
    background: rgba(254, 226, 226, 0.62);
    /* red-100/62 */
    border-color: rgba(252, 165, 165, 0.32);
    color: #7f1d1d;
    /* red-900 */
}

/* Variante warning (ambra) */
.giada-toast--warning {
    background: rgba(254, 243, 199, 0.62);
    /* amber-100/62 */
    border-color: rgba(251, 191, 36, 0.30);
    color: #78350f;
    /* amber-900 */
}

@media print {
    .giada-toast {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPRINT 40.3 — iOS 26 Triage Dashboard & Form Redesign
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Palette tematica per contesti anamnesi ───────────────────────────── */
:root {
    --color-personale: #f3e8ff;
    /* Viola soft */
    --color-familiare: #dbeafe;
    /* Blu soft */
    --color-ginecologica: #fee2e2;
    /* Rosso/Rosa soft */
    --color-ostetrica: #e0e7ff;
    /* Indaco soft */
    --color-immuno: #fae8ff;
    /* Fucsia soft */
    --color-stilevita: #ecfdf5;
    /* Emerald-50 */
}

/* ── 2. Glass Slab — form context (scoped a #anamnesi-editor-stage) ─────── */
/* Hyper-Depth: blur 60px + saturate 2.2 come da spec iOS 26.
   Scoped: non sovrascrive le .glass-slab card della home page (line 4316). */
#anamnesi-editor-stage .glass-slab {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    margin-bottom: 12px;
    cursor: default;
    /* panel, non card cliccabile */
}

#anamnesi-editor-stage .glass-slab:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

/* ── 2b. Micro-container categoria patologie (dentro .glass-slab) ─────── */
.pat-group {
    background: rgba(15, 23, 42, 0.028);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    padding: 10px 14px;
}

.pat-group__title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── 2c. iOS Switch — variante row (label sx, toggle dx) ────────────── */
.ios-switch--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.ios-switch--row:last-child {
    border-bottom: none;
}

.ios-switch--row .ios-switch__label {
    order: -1;
    flex: 1;
    color: #1e293b;
    font-size: 0.84rem;
}

/* ── 2d. IMC Badge vetro ─────────────────────────────────────────────── */
.imc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(20px);
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    letter-spacing: -0.01em;
    transition: background 0.2s, color 0.2s;
}

.imc-badge--sottopeso {
    color: #d97706;
    background: rgba(251, 191, 36, 0.18);
}

.imc-badge--normopeso {
    color: #059669;
    background: rgba(16, 185, 129, 0.14);
}

.imc-badge--sovrappeso {
    color: #ea580c;
    background: rgba(249, 115, 22, 0.15);
}

.imc-badge--obeso {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.14);
}

/* ── 2e. Pillola di Vetro — pulsante salva Hyper-Depth ──────────────── */
.btn-pillow-green {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 26px;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.40);
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.90) 0%,
            rgba(5, 150, 105, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(2.0);
    -webkit-backdrop-filter: blur(20px) saturate(2.0);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    text-decoration: none;
}

.btn-pillow-green:hover {
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.52);
    transform: translateY(-1px);
    color: #ffffff;
}

/* ── 3. iOS Switch ───────────────────────────────────────────────────────── */
/* Struttura HTML richiesta:
   <label class="ios-switch">
     <input type="checkbox" name="campo">
     <span class="ios-switch__track"><span class="ios-switch__thumb"></span></span>
     <span class="ios-switch__label">Etichetta</span>
   </label>
*/
.ios-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: #334155;
}

.ios-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ios-switch__track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: rgba(15, 23, 42, 0.15);
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.ios-switch input[type="checkbox"]:checked+.ios-switch__track {
    background: #10b981;
    /* Emerald-500 — conferma clinica */
}

.ios-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ios-switch input[type="checkbox"]:checked+.ios-switch__track .ios-switch__thumb {
    transform: translateX(18px);
}

/* ── 4. Fluid Grid 3 colonne per switch ──────────────────────────────────── */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

/* ── 5. Progressive disclosure — campi testo nascosti finché switch = off ── */
.reveal-field {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s ease, opacity 0.22s ease;
}

.reveal-field.is-open {
    max-height: 2000px;
    opacity: 1;
}

/* ── 6. Fragment header contestuale ─────────────────────────────────────── */
.fragment-header-personale {
    background: var(--color-personale);
}

.fragment-header-familiare {
    background: var(--color-familiare);
}

.fragment-header-ginecologica {
    background: var(--color-ginecologica);
}

.fragment-header-ostetrica {
    background: var(--color-ostetrica);
}

.fragment-header-immuno {
    background: var(--color-immuno);
}

.fragment-header-stilevita {
    background: var(--color-stilevita);
}

/* ── 7. Form Hint — Sprint 40.6 ─────────────────────────────────────────── */
/* Etichetta formato campo: sostituisce placeholder="es. ..." */
.form-hint {
    display: block;
    font-size: .72rem;
    color: #94a3b8;
    margin-top: .2rem;
    line-height: 1.3;
    font-style: italic;
}

/* ── 8. Feedback Float Button — Sprint 40.6 ──────────────────────────────── */
.btn-feedback-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1500;
    /* Pill — larghezza auto per contenere testo + icona */
    width: auto;
    height: auto;
    padding: .5rem 1rem .5rem .8rem;
    gap: .4rem;
    border-radius: 999px;
    border: none;
    background: rgba(124, 58, 237, 0.85);
    backdrop-filter: blur(12px) saturate(1.8);
    -webkit-backdrop-filter: blur(12px) saturate(1.8);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease;
}

.btn-feedback-float:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 28px rgba(124, 58, 237, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-feedback-float:active {
    transform: scale(0.95);
}

/* ── Card context menu — ⋮ three-dot dropdown (Sprint 45) ──────────────── */
/* Contenitore che wrappa card + menu; overflow:visible per far uscire il menu */
.card-ctx-container {
    position: relative;
}

.btn-card-ctx {
    background: none;
    border: none;
    padding: 2px 5px;
    border-radius: 6px;
    color: #64748b;
    line-height: 1;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.btn-card-ctx:hover {
    background: rgba(15, 23, 42, 0.07);
}

/* Menu posizionato sotto il card-ctx-container (= sotto la card) */
.card-ctx-menu {
    display: none;
    position: absolute;
    top: calc(100% - 0.25rem);
    right: 0.75rem;
    z-index: 600;
    min-width: 172px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.13),
        0 2px 6px rgba(15, 23, 42, 0.07);
    padding: 4px 0;
    white-space: nowrap;
}

.card-ctx-menu.open {
    display: block;
}

.card-ctx-menu a {
    display: flex;
    align-items: center;
    padding: 7px 14px;
    font-size: 0.81rem;
    color: #1e293b;
    text-decoration: none;
    transition: background 0.12s;
}

.card-ctx-menu a:hover {
    background: rgba(99, 102, 241, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════
   Sprint 42 — Anamnesi Ostetrica: Timeline + PUQE adattivo
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section slab wrapper ─────────────────────────────────────────── */
.ost-section-slab {
    border-top:    var(--glass-specular);
    border-radius: 20px;
    padding:       16px 18px;
}

.ost-section-header {
    display:        flex;
    align-items:    center;
    gap:            8px;
    font-size:      0.88rem;
    font-weight:    600;
    color:          #312e81;
    margin-bottom:  14px;
    padding-bottom: 10px;
    border-bottom:  1px solid rgba(99, 102, 241, 0.12);
}

/* ── Timeline verticale ──────────────────────────────────────────── */
.ost-timeline {
    position: relative;
}
.ost-timeline::before {
    content:      '';
    position:     absolute;
    left:         16px;
    top:          0;
    bottom:       0;
    border-left:  2px dashed rgba(99, 102, 241, 0.25);
}

.ost-tl-item {
    position:      relative;
    padding-left:  44px;
    margin-bottom: 16px;
}
.ost-tl-item:last-child {
    margin-bottom: 0;
}

.ost-tl-dot {
    position:      absolute;
    left:          10px;
    top:           4px;
    width:         12px;
    height:        12px;
    border-radius: 50%;
    box-shadow:    0 0 0 3px rgba(255, 255, 255, 0.7);
}

.ost-tl-content {
    background:        rgba(255, 255, 255, 0.45);
    border:            1px solid rgba(255, 255, 255, 0.55);
    border-radius:     14px;
    padding:           12px 14px;
}

.ost-tl-title {
    font-size:     0.92rem;
    margin-bottom: 6px;
    color:         #0f172a;
}

/* ── Chip row ────────────────────────────────────────────────────── */
.ost-chip-row {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    margin-top:  6px;
}

.ost-chip {
    background:    rgba(99, 102, 241, 0.08);
    border:        1px solid rgba(99, 102, 241, 0.18);
    border-radius: 999px;
    color:         #0f172a;
    font-size:     0.75rem;
    padding:       2px 10px;
    white-space:   nowrap;
}

/* ── Badge complicanze ───────────────────────────────────────────── */
.ost-badge-row {
    display:    flex;
    flex-wrap:  wrap;
    gap:        5px;
    margin-top: 6px;
}

.ost-badge-comp {
    background:    rgba(245, 158, 11, 0.12);
    border:        1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;
    color:         #0f172a;
    font-size:     0.72rem;
    padding:       2px 9px;
    white-space:   nowrap;
}

/* ── Pulsante elimina (timeline item) ───────────────────────────── */
.ost-btn-delete {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    background:    rgba(239, 68, 68, 0.07);
    border:        1px solid rgba(239, 68, 68, 0.22);
    border-radius: 999px;
    color:         #b91c1c;
    font-size:     0.75rem;
    padding:       4px 12px;
    cursor:        pointer;
    transition:    background 0.15s, transform 0.12s;
}
.ost-btn-delete:hover {
    background: rgba(239, 68, 68, 0.14);
    transform:  translateY(-1px);
}

/* ── Details / Summary (form aggiungi + PUQE inner) ─────────────── */
.ost-details-slab {
    border-top:    var(--glass-specular);
    border-radius: 20px;
    overflow:      hidden;
}

.ost-details-summary {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    list-style:      none;
    padding:         13px 18px;
    cursor:          pointer;
    font-size:       0.88rem;
    font-weight:     600;
    color:           #3730a3;
    user-select:     none;
}
.ost-details-summary::-webkit-details-marker { display: none; }

.ost-details-slab[open] .ost-chevron {
    transform: rotate(180deg);
}
.ost-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.ost-details-body {
    padding: 4px 18px 18px;
}

/* ── Form grid ───────────────────────────────────────────────────── */
.ost-form-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   10px;
    margin-bottom:         12px;
}
.ost-form-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
    .ost-form-grid      { grid-template-columns: 1fr; }
    .ost-form-grid-2col { grid-template-columns: 1fr; }
}

.ost-label {
    display:       block;
    font-size:     0.78rem;
    font-weight:   600;
    color:         #475569;
    margin-bottom: 4px;
}

.ost-input {
    width:         100%;
    background:    rgba(255, 255, 255, 0.55);
    border:        1px solid rgba(99, 102, 241, 0.18);
    border-radius: 10px;
    padding:       7px 11px;
    font-size:     0.85rem;
    color:         #0f172a;
    outline:       none;
    transition:    border-color 0.15s, box-shadow 0.15s;
    box-sizing:    border-box;
}
.ost-input:focus {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow:   0 0 0 3px rgba(99, 102, 241, 0.10);
}

/* ── Checkbox row (complicanze) ──────────────────────────────────── */
.ost-checkbox-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin-top: 6px;
}

.ost-checkbox-label {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    background:    rgba(99, 102, 241, 0.06);
    border:        1px solid rgba(99, 102, 241, 0.15);
    border-radius: 999px;
    padding:       4px 12px;
    font-size:     0.78rem;
    color:         #1e293b;
    cursor:        pointer;
    transition:    background 0.12s, border-color 0.12s;
}
.ost-checkbox-label:hover {
    background:    rgba(99, 102, 241, 0.12);
    border-color:  rgba(99, 102, 241, 0.30);
}
.ost-checkbox-label input[type="checkbox"] {
    accent-color: #6366f1;
    width:  13px;
    height: 13px;
}

/* ── Submit pill button ──────────────────────────────────────────── */
.ost-btn-submit {
    display:       inline-flex;
    align-items:   center;
    gap:           7px;
    background:    rgba(99, 102, 241, 0.08);
    border:        1px solid rgba(99, 102, 241, 0.18);
    border-radius: 999px;
    color:         #0f172a;
    font-size:     0.85rem;
    font-weight:   600;
    padding:       8px 20px;
    cursor:        pointer;
    transition:    background 0.15s, transform 0.12s;
}
.ost-btn-submit:hover {
    background: rgba(99, 102, 241, 0.15);
    transform:  translateY(-1px);
}

/* ── PUQE slab ───────────────────────────────────────────────────── */
.puqe-slab {
    border-top:    var(--glass-specular);
    border-radius: 20px;
    overflow:      hidden;
}

.puqe-summary {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    list-style:      none;
    padding:         13px 18px;
    cursor:          pointer;
    font-size:       0.88rem;
    font-weight:     600;
    color:           #5b21b6;
    user-select:     none;
}
.puqe-summary::-webkit-details-marker { display: none; }

.puqe-slab[open] .ost-chevron {
    transform: rotate(180deg);
}

.puqe-body {
    padding: 4px 18px 18px;
}

.puqe-badge-active {
    background:    rgba(99, 102, 241, 0.10);
    border:        1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    color:         #3730a3;
    font-size:     0.72rem;
    font-weight:   600;
    padding:       3px 11px;
}

/* ================================================================
   CONFIGURAZIONE STUDIO — CSS migrato da extra_css (Sprint 46)
   Motivo: evitare FOUC con hx-boost (inline <style> head-merge tardivo)
================================================================ */
.cfg-wrap { padding-bottom: 92px; }

.cfg-hero {
    background: linear-gradient(135deg, #1d6fe8 0%, #0a58ca 100%);
    border-radius: 14px;
    padding: 1.4rem 1.7rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 24px rgba(13,110,253,0.22), 0 2px 8px rgba(13,110,253,0.10);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.cfg-hero-icon {
    width: 50px; height: 50px;
    background: rgba(255,255,255,0.16);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cfg-hero-title {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}
.cfg-hero-sub {
    font-size: 0.79rem;
    opacity: 0.72;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.cfg-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.05), 0 4px 16px rgba(0,0,0,0.04);
    border: var(--glass-border);
    border-top: 4px solid var(--bs-primary, #0d6efd);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.cfg-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 800;
    font-size: 0.91rem;
    color: #1e293b;
    letter-spacing: 0.005em;
}
.cfg-card-header-icon {
    color: #0d6efd;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.9;
}
.cfg-card-body { padding: 1.3rem; }

.cfg-label {
    font-size: 0.67rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #f1f5f9;
}

.pdf-preview-inline {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.76rem;
    line-height: 1.7;
    min-height: 130px;
}
.pdf-preview-inline .pm-nome  { font-weight: 700; font-size: 0.88rem; color: #1a2535; }
.pdf-preview-inline .pm-sub   { color: #555; font-size: 0.73rem; }
.pdf-preview-inline .pm-sep   { border: none; border-top: 1px dashed #dde3ea; margin: 0.5rem 0; }
.pdf-preview-inline .pm-firma { max-width: 130px; max-height: 38px; object-fit: contain;
                                 border: 1px dashed #ccc; border-radius: 4px; padding: 2px; }

.firma-drop {
    border: 2px dashed #c8e4f5;
    border-radius: 10px;
    min-height: 80px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    background: #f8fbff;
    transition: all 0.2s;
    padding: 0.75rem;
}
.firma-drop:hover, .firma-drop.drag-over { border-color: #5AABDB; background: #eef6fc; }
.firma-img { max-width: 200px; max-height: 54px; object-fit: contain;
             border: 1px solid #dde3ea; border-radius: 6px; background: rgba(255,255,255,0.45); padding: 3px; }

.ruolo-btn {
    flex: 1;
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    background: #f8fafc;
    font-weight: 600; font-size: 0.88rem; color: #64748b;
    transition: all 0.2s; user-select: none;
}
.ruolo-btn.active { border-color: #5AABDB; background: #e8f4fb; color: #3d8fc0; }
.ruolo-btn:hover  { border-color: #a0d0ed; }
.ruolo-btn input[type=radio] { display: none; }

.studio-item {
    border: 1.5px solid #e2e8f0; border-radius: 12px;
    margin-bottom: 0.6rem; overflow: hidden; transition: box-shadow 0.2s;
}
.studio-item:hover { box-shadow: 0 2px 8px rgba(90,171,219,0.12); }
.studio-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1rem; background: #f8fafc; cursor: pointer;
    font-weight: 600; font-size: 0.85rem; gap: 0.5rem;
    border-bottom: 1px solid transparent;
}
.studio-header.open { border-bottom-color: #e8ecf0; }
.studio-body { padding: 0.9rem 1rem; }

.personale-member {
    background: #f8fafc; border: 1.5px solid #e2e8f0;
    border-radius: 12px; padding: 1rem 1.1rem; height: 100%;
}
.personale-member-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.72rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.07em;
    margin-bottom: 0.85rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.cfg-sticky-footer .btn-save {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cfg-sticky-footer .btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(22,163,74,0.30);
}

/* ================================================================
   NUOVO PAZIENTE — accordion items glass card (Sprint 46)
   Sostituisce Bootstrap default white con glass Soft per garantire
   contrasto sul body-mesh gradient anche senza backdrop-filter.
================================================================ */
/* ── Accordion card — sfondo opaco senza backdrop-filter ──────────────────
   MOTIVO: backdrop-filter sul contenitore padre crea un compositing layer
   che assorbe i figli dentro il vetro (bug Chrome/WebKit con overflow:hidden).
   Il look glass è ottenuto con solo background semi-opaco: nessun sipario.  ── */
.nuovo-paziente-form .accordion-item {
    background: rgba(186, 220, 252, 0.82) !important;  /* blu ghiaccio deciso — contrasto visibile vs input bianco */
    border: 1px solid rgba(99, 155, 210, 0.35) !important;
    border-radius: 14px !important;
    overflow: visible;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
    /* NESSUN backdrop-filter — evita compositing layer che copre i figli */
}

/* ── Accordion button (intestazione sezione) ── */
.nuovo-paziente-form .accordion-button {
    background: rgba(219, 234, 254, 0.72) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    color: #1e293b !important;
    box-shadow: none !important;
    border-radius: 14px 14px 0 0 !important;
}
.nuovo-paziente-form .accordion-button:not(.collapsed) {
    background: rgba(219, 234, 254, 0.72) !important;
    box-shadow: none !important;
}
.nuovo-paziente-form .accordion-button.collapsed {
    border-radius: 14px !important;
}
.nuovo-paziente-form .accordion-button::after {
    filter: brightness(0.45);
}

/* ── Neutralizzazione gabbia Bootstrap: accordion-collapse ────────────────
   Bootstrap imposta position:relative su .accordion-collapse creando uno
   stacking context locale che intrappola i figli indipendentemente dal loro
   z-index. position:static azzera lo stacking context senza violare il
   collasso/espansione (gestito da Bootstrap via height/display, non position). ── */
.nuovo-paziente-form .accordion-collapse {
    position: static !important;
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ── Corpo accordion — trasparente, senza stacking context proprio ── */
.nuovo-paziente-form .accordion-body {
    background: transparent !important;
    background-color: transparent !important;
    position: static !important;
}

/* ── Label — Slate 900 per massima leggibilità ── */
.nuovo-paziente-form .form-label {
    color: #0f172a !important;
    font-weight: 600;
    font-size: 0.875rem;
    position: relative !important;
    z-index: 2 !important;
    /* 2 = sopra sibling locali, sotto sidebar (z-index 1070) */
}

/* ── Testo helper sotto i campi ── */
.nuovo-paziente-form .form-text {
    color: #64748b;
}

/* ── Sub-header sezioni interne (h6) ── */
.nuovo-paziente-form h6 {
    color: #1e293b !important;
}

/* ── Input e select ─────────────────────────────────────────────────────────
   z-index: 2 = sopra sibling locali (accordion-collapse ecc.) ma SOTTO la
   sidebar (glass-sidebar z-index: 1070). Il valore precedente 9999 causava
   la sovrapposizione del form sul menu laterale. ── */
.nuovo-paziente-form .form-control,
.nuovo-paziente-form .form-select {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
    border-radius: 10px !important;
    position: relative !important;
    z-index: 2 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.nuovo-paziente-form .form-control::placeholder,
.nuovo-paziente-form .form-select::placeholder {
    color: #94a3b8;
    opacity: 1;
}
.nuovo-paziente-form .form-control:focus,
.nuovo-paziente-form .form-select:focus {
    background: rgba(255, 255, 255, 0.80) !important;
    border-color: rgba(99, 102, 241, 0.50) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
    color: #0f172a !important;
    outline: none;
    z-index: 3 !important;
    /* 3 = un layer sopra il default (2) in focus, ancora sotto sidebar (1070) */
}

/* ── Checkbox inline (interprete) ── */
.nuovo-paziente-form input[type="checkbox"] {
    accent-color: var(--blu-d);
    position: relative;
    z-index: 1;
}

/* ── Sezione Paziente — tinta viola (anagrafica_paziente.html) ─────────────
   Override del blu ghiaccio default per il blocco paziente.
   Nessun backdrop-filter: stessa regola anti-sipario del contenitore padre. ── */
.nuovo-paziente-form .accordion-item-paziente {
    background: rgba(237, 233, 254, 0.85) !important;
    border: 1px solid rgba(167, 139, 250, 0.35) !important;
    overflow: visible !important;  /* non mutilare lo stacking dei figli */
}
.nuovo-paziente-form .accordion-item-paziente .accordion-button,
.nuovo-paziente-form .accordion-item-paziente .accordion-button:not(.collapsed) {
    background: rgba(245, 240, 255, 0.75) !important;
    border-bottom: 1px solid rgba(167, 139, 250, 0.22) !important;
    box-shadow: none !important;
}
.nuovo-paziente-form .accordion-item-paziente .accordion-button.collapsed {
    border-radius: 14px !important;
}
.nuovo-paziente-form .accordion-item-paziente .accordion-button::after {
    filter: brightness(0.45) sepia(1) hue-rotate(240deg);
}

/* ================================================================
   (ripristino puqe-badge-muted sotto)
================================================================ */
/* ── Detail Table System (gravidanza_detail_panel & variants) ────────────────
   Semantic HTML table layout using CSS Grid + Flexbox.
   Replaces Bootstrap .table to reduce dependencies.
═════════════════════════════════════════════════════════════════════════════ */
.detail-table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    font-size: 0.84rem;
}

.detail-row {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.detail-value {
    font-weight: 500;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-badge {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    display: inline-block;
}

.detail-badge--warn {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.detail-bmi {
    font-weight: 600;
}

.detail-bmi--danger {
    color: #b91c1c;
}

.detail-bmi--warn {
    color: #d97706;
}

/* ── Button Glass Success — replacement for Bootstrap .btn-outline-success ── */
.btn-glass-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #15803d;
    background: rgba(220, 252, 231, 0.6);
    border: 1px solid rgba(134, 239, 172, 0.5);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.btn-glass-success:hover {
    background: rgba(220, 252, 231, 0.8);
    border-color: rgba(134, 239, 172, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.12);
}

.btn-glass-success:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.08);
}

.btn-glass-success--full {
    width: 100%;
}

/* ── Nuova Visita Fragment Modal Form (Sprint 45+) ──────────────────────────
   Scope: .nv-form and child elements
   Style system for modal form in HTMX modal body (#modal-body)
═════════════════════════════════════════════════════════════════════════════ */

.nv-form {
    padding: 0.1rem 0.25rem;
    font-size: 0.9rem;
}

/* Fieldset */
.nv-fieldset {
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.6rem;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(60px) saturate(2.0);
    -webkit-backdrop-filter: blur(60px) saturate(2.0);
}
.nv-legend {
    font-size: 0.71rem;
    font-weight: 700;
    color: var(--color-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 0 0.4rem;
}

/* Griglia interna al fieldset */
.nv-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    margin-top: 0.4rem;
}
.nv-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nv-field--full {
    grid-column: 1 / -1;
}

/* Label */
.nv-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    letter-spacing: .03em;
}
.nv-label abbr {
    font-weight: 400;
    text-decoration: none;
    color: #94a3b8;
}

/* Input / select / textarea */
.nv-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.42rem 0.65rem;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 10px;
    color: inherit;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.nv-input:focus {
    border-color: rgba(99,179,237,.7);
    box-shadow: 0 0 0 3px rgba(99,179,237,.18);
}
.nv-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 2rem;
    cursor: pointer;
}
.nv-input[type="number"]::-webkit-inner-spin-button,
.nv-input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.4;
}
textarea.nv-input {
    resize: vertical;
    min-height: 4.5rem;
}

/* Hint clinico */
.form-hint {
    font-size: 0.69rem;
    color: #94a3b8;
    line-height: 1.35;
    margin-top: 1px;
}

/* Checkbox row */
.nv-check-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0;
}
.nv-check-row input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: rgba(99,179,237,.9);
    cursor: pointer;
    flex-shrink: 0;
}
.nv-check-row .nv-label {
    font-size: 0.88rem;
    cursor: pointer;
}

/* Header */
.nv-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
.nv-header__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}
.nv-header__sub {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 2px;
}
.nv-btn-close {
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 8px;
    padding: 0.28rem 0.58rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
    transition: background .16s;
}
.nv-btn-close:hover { background: rgba(255,255,255,0.15); }

/* Footer */
.nv-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.nv-btn-cancel {
    padding: 0.45rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.07);
    cursor: pointer;
    font-size: 0.88rem;
    color: inherit;
    transition: background .16s;
}
.nv-btn-cancel:hover { background: rgba(255,255,255,0.13); }

/* ── Nuova Analisi Form System (Sprint 45) ──────────────────────────────────
   Namespace: .na-* per form nuovo esame laboratorio in modalità
═════════════════════════════════════════════════════════════════════════════ */

.na-badge-patient {
    background: rgba(255,255,255,0.12);
    color: var(--testo);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.na-badge-action {
    background: rgba(59,130,246,0.10);
    color: var(--blu-d);
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    border: 1px solid rgba(59,130,246,0.22);
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.na-note-esame {
    display: none;
    background: rgba(234,179,8,0.10);
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    border: 1px solid rgba(234,179,8,0.32);
    border-radius: 0.85rem;
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
    color: #92400e;
    font-weight: 500;
    line-height: 1.5;
}

.na-note-esame.active {
    display: block;
}

.na-badge-result {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    display: inline-block;
}

.na-badge-result--ok {
    background: #dcfce7;
    color: #16a34a;
}

.na-badge-result--danger {
    background: #fee2e2;
    color: #dc2626;
}

.na-badge-result--warning {
    background: #fef9c3;
    color: #ca8a04;
}

/* ── Evento Preview Fragment (Sprint 45) ─────────────────────────────────────
   Namespace: .ep-* per anteprima evento (visita/eco/esame/home)
═════════════════════════════════════════════════════════════════════════════ */

.evento-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.ep-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.ep-row {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.35rem 0;
}

.ep-label {
    font-weight: 500;
    color: #6b7280;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ep-value {
    font-weight: 500;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ep-delta {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    display: inline-block;
}

.ep-delta-up {
    background: rgba(245, 158, 11, 0.12);
    color: #ca8a04;
}

.ep-delta-down {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

/* ── Nuova Visita Full-Page Form (Sprint 46) ─────────────────────────────────
   Extends .nv-* namespace from fragment to full-page form
   Glass slabs per sezioni cliniche
═════════════════════════════════════════════════════════════════════════════ */

.nv-fieldset-slab {
    background: rgba(255,255,255,0.40);
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.nv-fieldset-slab--error {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.02);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}

.nv-fieldset-slab-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.nv-fieldset-slab-header i {
    font-size: 1.1rem;
}

.nv-fieldset-slab-header strong {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.nv-fieldset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem 1.2rem;
}

.nv-checkbox-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.65rem;
}

.nv-checkbox-box label {
    margin: 0;
    cursor: pointer;
    font-size: 0.88rem;
}

.nv-checkbox-box input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--blu-d);
    cursor: pointer;
    margin-right: 0.3rem;
}

.nv-field-hint {
    font-size: 0.7rem;
    color: #6b7280;
    display: block;
    margin-top: 0.2rem;
    font-weight: 400;
    line-height: 1.3;
}

.nv-alert-inline {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 0.78rem;
    color: #7f1d1d;
    margin-top: 0.5rem;
    font-weight: 500;
}

.nv-input.nv-input--error {
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.04);
}

.puqe-badge-muted {
    background:    rgba(148, 163, 184, 0.12);
    border:        1px solid rgba(148, 163, 184, 0.30);
    border-radius: 999px;
    color:         #64748b;
    font-size:     0.72rem;
    padding:       3px 11px;
}

/* ── SEMAFORO — Left-Border Validation (Sprint 46) ───────────────────────────
   iOS 26 Hyper-Depth System: pristine (gray), valid (green),
   error (red), warning (amber)
═════════════════════════════════════════════════════════════════════════════ */

.input-semaforo {
    border-left: 4px solid rgba(107, 114, 128, 0.40);
    border-radius: 12px;
    transition: border-left-color 0.3s ease;
}

/* PRISTINE — Non interagito (default grigio) */
.input-semaforo.semaforo-pristine {
    border-left-color: rgba(107, 114, 128, 0.40);
}

/* VALID — Compilato e valido (verde) */
.input-semaforo.semaforo-valid {
    border-left-color: rgba(34, 197, 94, 1);
    background: rgba(34, 197, 94, 0.02);
    box-shadow: inset 0 0 12px rgba(34, 197, 94, 0.15), 0 0 8px rgba(34, 197, 94, 0.20);
}

/* ERROR — Vuoto obbligatorio o invalido (rosso) */
.input-semaforo.semaforo-error {
    border-left-color: rgba(220, 38, 38, 1);
    background: rgba(220, 38, 38, 0.03);
    box-shadow: inset 0 0 12px rgba(220, 38, 38, 0.15), 0 0 8px rgba(220, 38, 38, 0.20);
}

/* WARNING — Valore sospetto (clinica) o fuori range (ambra) */
.input-semaforo.semaforo-warning {
    border-left-color: rgba(251, 146, 60, 1);
    background: rgba(251, 146, 60, 0.02);
    box-shadow: inset 0 0 12px rgba(251, 146, 60, 0.15), 0 0 8px rgba(251, 146, 60, 0.20);
}

/* Focus state — aggiunge glow sottile */
.input-semaforo:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--blu-rgb), 0.08);
}

/* ─── ANAMNESI GOLD — Solid Material Design ────────────────────────────── */

/* Header Slab (Titolo Sezione es. 'Nuova Visita') */
.inline-form-panel > div:first-child {
    background: #F9F9FF !important;
    color: #0f172a !important;
}

/* Corpo Slab (Box Dati es. 'Dati Vitali', 'Esame Ostetrico') */
.inline-form-panel div[style*="background:white"] {
    background: #F3F4F9 !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Input Focus Glow — colore dinamico per semaforo */
.inline-form-panel .nv-input,
.inline-form-panel input[type="text"],
.inline-form-panel input[type="number"],
.inline-form-panel input[type="date"],
.inline-form-panel textarea,
.inline-form-panel select {
    background: white !important;
    color: #0f172a !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.inline-form-panel input::placeholder,
.inline-form-panel textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

.inline-form-panel label {
    color: #0f172a !important;
    font-weight: 600;
}

/* Focus Glow — Verde se valido */
.inline-form-panel .input-semaforo.semaforo-valid:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15), inset 0 0 8px rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.5) !important;
}

/* Focus Glow — Rosso se errore */
.inline-form-panel .input-semaforo.semaforo-error:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15), inset 0 0 8px rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.5) !important;
}

/* Focus Glow — Ambra se warning */
.inline-form-panel .input-semaforo.semaforo-warning:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.15), inset 0 0 8px rgba(251, 146, 60, 0.10);
    border-color: rgba(251, 146, 60, 0.5) !important;
}

/* Generic focus fallback */
.inline-form-panel input:focus,
.inline-form-panel textarea:focus,
.inline-form-panel select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* Toggle staticgravidanza content */
#static-gravidanza-content {
    display: block;
}

#dynamic-interaction-box:not(:empty) ~ #static-gravidanza-content {
    display: none;
}

/* Button States */
.inline-form-panel button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.inline-form-panel button[type="submit"]:not(:disabled) {
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.inline-form-panel button[type="submit"]:not(:disabled):hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Compatibilità con stati HTML5 :valid/:invalid se non usati semaforo-* */
.form-control[required]:valid:not([data-semaforo="true"]) {
    border-left: 4px solid rgba(34, 197, 94, 1);
}

.form-control[required]:invalid:not([data-semaforo="true"]) {
    border-left: 4px solid rgba(220, 38, 38, 1);
}

/* ── QUICK-ACTION SLABS — Sprint 47 iOS 26 Hyper-Depth ────────────────────────
   Header Riepilogo Gravidanza: 3 pulsanti visita/esami/eco con hover expand
═════════════════════════════════════════════════════════════════════════════ */

:root {
    --slab-visita: oklch(0.55 0.15 240);   /* blu soft */
    --slab-esami:  oklch(0.65 0.14 65);    /* ambra caldo */
    --slab-eco:    oklch(0.52 0.14 155);   /* smeraldo */
}

/* EG Badge — micro-pillola crystal center */
.eg-badge-header {
    background: color-mix(in oklch, var(--blu-d) 18%, transparent);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid color-mix(in oklch, var(--blu-d) 30%, transparent);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
    opacity: 0.85;
    white-space: nowrap;
}

/* Quick-Actions Group container */
.quick-actions-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Quick-Action Slab — base (quiescent 40×36px) */
.quick-action-slab {
    width: auto;
    min-width: 44px;
    height: 36px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--slab-visita) 18%, transparent);
    backdrop-filter: blur(60px) saturate(2.2);
    -webkit-backdrop-filter: blur(60px) saturate(2.2);
    border: 1px solid color-mix(in oklch, var(--slab-visita) 35%, transparent);
    box-shadow: 0 4px 8px oklch(0 0 0 / 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms ease-in-out;
    padding-inline: 12px;
    position: relative;
    overflow: hidden;
}

/* Color variants */
.quick-action-slab.slab-visita {
    background: color-mix(in oklch, var(--slab-visita) 18%, transparent);
    border-color: color-mix(in oklch, var(--slab-visita) 35%, transparent);
}

.quick-action-slab.slab-visita:hover {
    background: color-mix(in oklch, var(--slab-visita) 28%, transparent);
}

.quick-action-slab.slab-esami {
    background: color-mix(in oklch, var(--slab-esami) 18%, transparent);
    border-color: color-mix(in oklch, var(--slab-esami) 35%, transparent);
}

.quick-action-slab.slab-esami:hover {
    background: color-mix(in oklch, var(--slab-esami) 28%, transparent);
}

.quick-action-slab.slab-eco {
    background: color-mix(in oklch, var(--slab-eco) 18%, transparent);
    border-color: color-mix(in oklch, var(--slab-eco) 35%, transparent);
}

.quick-action-slab.slab-eco:hover {
    background: color-mix(in oklch, var(--slab-eco) 28%, transparent);
}

/* Icon */
.quick-action-slab .lucide-icon {
    width: 18px;
    height: 18px;
    color: #0f172a;
    flex-shrink: 0;
    transition: margin-right 220ms ease-in-out;
}

/* Label (hidden quiescent) */
.quick-action-slab .slab-label {
    display: inline;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    margin-left: 8px;
    opacity: 1;
    transition: opacity 200ms ease-in-out;
}

/* Hover: subtle background change */
.quick-action-slab:hover {
    /* Background updated via color variant rules below */
}

/* Focus-visible (keyboard nav) */
.quick-action-slab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Touch target min 44×44px */
.quick-action-slab::before {
    content: '';
    position: absolute;
    inset: -4px;
    pointer-events: none;
}

/* Glow Sentinel — .slab--alert (pulse-glow animation) */
.quick-action-slab.slab--alert {
    animation: pulse-glow 2s ease-in-out infinite;
}

.quick-action-slab.slab--alert.slab-visita {
    --slab-glow: var(--slab-visita);
}

.quick-action-slab.slab--alert.slab-esami {
    --slab-glow: var(--slab-esami);
}

.quick-action-slab.slab--alert.slab-eco {
    --slab-glow: var(--slab-eco);
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 8px 2px color-mix(in oklch, var(--slab-glow, #0f172a) 50%, transparent),
                    0 4px 8px oklch(0 0 0 / 0.15);
    }
    50% {
        box-shadow: 0 0 18px 5px color-mix(in oklch, var(--slab-glow, #0f172a) 80%, transparent),
                    0 4px 8px oklch(0 0 0 / 0.15);
    }
}

/* Feedback — .slab--saved (green pulse 600ms) */
.quick-action-slab.slab--saved {
    animation: pulse-success 600ms ease-in-out forwards;
}

@keyframes pulse-success {
    0% {
        box-shadow: 0 0 14px 4px rgba(34, 197, 94, 0.6);
    }
    100% {
        box-shadow: 0 4px 8px oklch(0 0 0 / 0.15);
    }
}

/* Sprint 47: Inline Form Panel (HTMX-loaded forms) */
.inline-form-panel {
    background: white;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Box vuoto: sfondo neutro #F3F4F9 */
#dynamic-interaction-box:empty {
    background-color: #F3F4F9 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none;
}

/* ARIA: quando #dynamic-interaction-box ha contenuto, nasconde la griglia dati sottostante */
#dynamic-interaction-box:not(:empty) {
    position: relative;
    z-index: 10;
    background-color: #F3F4F9 !important;
    border: none !important;
    padding: 0 !important;
}

#dynamic-interaction-box:not(:empty) ~ .card-body {
    display: none;
}
/* ============================================================================
   SPRINT 61 OVERRIDES (da giada_style.css)
   Caricato dopo style.css — regole senza !important vengono sovrascritte.
   Per classi con CONFLITTO: questa sezione vince per cascata.
   ============================================================================ */

/**
 * G.I.A.D.A. Glass Hyper-Depth Design System
 * CSS Core: https://docs/07_GIADA_STYLE.md
 *
 * Principi fondamentali:
 * - Tutto è trasparenza e rifrazione (backdrop-filter).
 * - Due strati fisici: Crystal Glass (Radar, Output) e Satin Glass (Cantiere, Input).
 * - Semaforo legale: border-left 4px per validazione clinica.
 * - Elevazione G-Lift su hover per indicare interattività.
 */

/* ============================================================================
   1. ROOT VARIABLES (§1.1 DIZIONARIO TECNICO CSS)
   ============================================================================ */

/* ============================================================================
   2. RESET GLOBALE (Base Reset)
   ============================================================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-space);
  color: var(--text-slate);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

/* Rimuove outline di default per migliore estetica */
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* ============================================================================
   3. SLAB-RADAR (.slab-radar)
   ============================================================================
   Crystal Glass per output/sintesi.
   Blur: 24px, Saturazione: 2.2, Trasparenza: 0.35
   Border-radius: 20px
   Hover: G-Lift
   ============================================================================ */

.slab-radar {
  backdrop-filter: blur(80px) saturate(2.2);
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-top: 2px solid rgba(103, 232, 249, 0.6);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
              inset 0 0 20px rgba(255, 255, 255, 0.15);
  transition: all 0.4s ease-out;
}

.slab-radar:hover {
  border-top-color: rgba(103, 232, 249, 0.8);
  background-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-4px);
}

/* ============================================================================
   4. SLAB-CANTIERE (.slab-cantiere)
   ============================================================================
   Satin Glass per input/operatività.
   Blur: 60px, Saturazione: 1.0, Trasparenza: 0.35
   Border-radius: 20px
   Hover: G-Lift
   Obbligatorio: Semaforo border-left 4px
   ============================================================================ */

.slab-cantiere {
  backdrop-filter: blur(80px) saturate(2.2);
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-top: 2px solid rgba(103, 232, 249, 0.6);
  border-left: var(--semaforo-w) solid transparent;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
              inset 0 0 20px rgba(255, 255, 255, 0.15);
  transition: all 0.4s ease-out;
}

.slab-cantiere:hover {
  border-top-color: rgba(103, 232, 249, 0.8);
  background-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-4px);
}

/* ============================================================================
   TEXT & ICONS VISIBILITY (Task 3 — Surgical Readability)
   ============================================================================ */

.slab-radar,
.slab-cantiere {
  color: #f8fafc; /* Slate 50 — testo primario, massimo contrasto */
}

.slab-radar .text-secondary,
.slab-cantiere .text-secondary {
  color: #cbd5e1; /* Slate 300 — testo secondario */
}

/* Icone su slabs — glow ciano */
.slab-radar [class*="icon"],
.slab-cantiere [class*="icon"],
.slab-radar .bi,
.slab-cantiere .bi {
  filter: drop-shadow(0 0 8px rgba(103, 232, 249, 0.4));
}

/* KPI numeri — glow gemme */
.kpi-value,
.dashboard-stat-number {
  filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.3));
}

/* Badge (CE, RM) — glow */
/* CONFLITTO giada_style.css — .badge (style.css ha valori diversi sopra) */
.badge {
  filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.3));
}

/* ============================================================================
   5. GLASS-PILL (.glass-pill)
   ============================================================================
   Mini slab per input, pulsanti, pillole legali, Effetto Gemma.
   Radius totale: 50px (pillola) oppure 20px per integrated look
   Crystal Glass (Blur 24px, Sat 2.2)
   Usato per: Active state navigator, badge, pill badge
   ============================================================================ */

.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid;
  cursor: default;
  transition: transform 0.12s, box-shadow 0.12s;

  /* Crystal Glass per l'effetto gemma (§1.1) */
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(59, 130, 246, 0.38);
  color: #1d4ed8;
  backdrop-filter: blur(24px) saturate(2.2);
  -webkit-backdrop-filter: blur(24px) saturate(2.2);
}

a.glass-pill {
  cursor: pointer;
}

a.glass-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

.glass-pill:active {
  transform: translateY(-2px);
}

/* Variante per campi di input */
.glass-pill.input-variant {
  padding: 10px 14px;
  width: 100%;
  color: var(--text-slate);
  font-size: 14px;
}

.glass-pill.input-variant::placeholder {
  color: rgba(15, 23, 42, 0.5);
}

.glass-pill.input-variant:focus {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   6. SEMAFORO (border-left: 4px)
   ============================================================================
   Validazione legale/clinica su .slab-cantiere e componenti di input.
   Rosso: Obbligatorio vuoto / Invalido
   Verde: A norma SNLG 2025
   Ambra: Valido ma critico
   ============================================================================ */

/* CONFLITTO giada_style.css — .semaforo-rosso (style.css ha valori diversi sopra) */
.semaforo-rosso {
  border-left-color: var(--semaforo-red) !important;
}

/* CONFLITTO giada_style.css — .semaforo-verde (style.css ha valori diversi sopra) */
.semaforo-verde {
  border-left-color: var(--semaforo-green) !important;
}

.semaforo-ambra {
  border-left-color: var(--semaforo-amber) !important;
}

/* ============================================================================
   7. GRID & FLEX UTILITIES
   ============================================================================ */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-standard);
}

@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-12 {
  gap: 12px;
}

.gap-24 {
  gap: 24px;
}

/* ============================================================================
   8. ANIMAZIONI
   ============================================================================
   Pulse-Red: Per .glass-badge.critico (Sat 2.2 oscillante)
   Gemma-Pulse: Per .sidebar-nav-item.active (300ms smooth slide)
   ============================================================================ */

@keyframes pulse-red {
  0%, 100% {
    filter: saturate(var(--sat-radar));
    opacity: 1;
  }
  50% {
    filter: saturate(calc(var(--sat-radar) * 1.2));
    opacity: 0.8;
  }
}

/* ── Effetto Gemma — animazione transizione menu 300ms ── */
@keyframes gemma-pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.glass-badge {
  backdrop-filter: blur(var(--blur-radar)) saturate(var(--sat-radar));
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  transition: all var(--transition-smooth);
}

.glass-badge.critico {
  animation: pulse-red 2s ease-in-out infinite;
  border-left: var(--semaforo-w) solid var(--semaforo-red);
}

/* ============================================================================
   9. LAYOUT GLOBALE (§8.1-8.5)
   Fonte: docs/07_GIADA_STYLE.md §3 Navigazione Globale
   ============================================================================ */

.giada-container {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
  width: 100vw;
}

/* ══════════════════════════════════════════════════════════════════════════
   .giada-header — §3.1 L'Header
   Tipo: .slab-radar (Crystal Glass)
   Posizione: Fixed Top, h: 60px
   Componenti: Path-Pill (Breadcrumbs), Chrono-Radar (Data/Ora), User-Pill
══════════════════════════════════════════════════════════════════════════ */
.giada-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 1080;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-standard);

  /* Crystal Glass per output decisionale (§1.1) */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(2.2);
  -webkit-backdrop-filter: blur(24px) saturate(2.2);

  /* Specular highlight e bordo */
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.giada-header.glass-crystal {
  /* compatibilità con style.css */
  z-index: 1080;
}

/* ── Header row — logo sinistra, data/avatar destra ── */
/* CONFLITTO giada_style.css — .app-header-row (style.css ha valori diversi sopra) */
.app-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--gap-standard);
}

/* ══════════════════════════════════════════════════════════════════════════
   .giada-navigator — §3.2 Il Timone (Navigator)
   Posizione: Fixed Left, w: 72px (compresso) / 240px (esteso su hover)
   Materiale: Satin Glass (Blur 60px, Saturazione 2.2)
   Testo: Slate 900 (Opacità: 40% etichette sezioni, 100% voci)
══════════════════════════════════════════════════════════════════════════ */
.giada-navigator {
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 72px;
  z-index: 1070;

  /* Layout interno */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.75rem 0;

  /* Satin Glass per operatività (§1.1) */
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(60px) saturate(2.2);
  -webkit-backdrop-filter: blur(60px) saturate(2.2);

  /* Specular highlight e bordi */
  border-top: 1px solid rgba(255, 255, 255, 0.40);
  border-right: 1px solid rgba(255, 255, 255, 0.40);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.08);

  /* Transizione fluida compresso ↔ esteso */
  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 */
.giada-navigator:hover {
  width: 240px;
  overflow-y: auto;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.14);
}

.giada-navigator.glass-satin {
  /* compatibilità con style.css */
  z-index: 1070;
}

/* ── Voce di navigazione — icona centrata a 72px, label a scomparsa ── */
.giada-navigator .sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0 0.65rem 26px;
  color: var(--text-slate);
  text-decoration: none;
  border-radius: 10px;
  margin: 0.1rem 0;
  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);
}

.giada-navigator .sidebar-nav-item:hover {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
  transform: translateX(2px);
}

/* Effetto Gemma (Active State) — crystal glass highlight */
.giada-navigator .sidebar-nav-item.active {
  background: rgba(59, 130, 246, 0.13);
  color: #1d4ed8;
  font-weight: 600;
  position: relative;
}

/* ── Icone e SVG ── */
.giada-navigator .sidebar-nav-item i,
.giada-navigator .sidebar-nav-item svg {
  width: 20px;
  min-width: 20px;
  flex-shrink: 0;
  font-size: 1.15rem;
  text-align: center;
}

/* ── Label testuale — invisibile compresso, fade-in su hover ── */
.giada-navigator .sidebar-label {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.giada-navigator:hover .sidebar-label {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.12s;
}

/* ── Section label (40% opacità quando visibile) ── */
.giada-navigator .sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  display: none;
  padding: 0.5rem 0 0.25rem 26px;
  white-space: nowrap;
}

.giada-navigator:hover .sidebar-section-label {
  display: block;
  opacity: 1;
}

/* ── Micro-LED completezza anamnesi (dentro .sidebar-label, eredita opacity) ── */
.sidebar-anamnesi-led {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 5px;
  flex-shrink: 0;
}
.sidebar-anamnesi-led.led-ok   { background: #22c55e; }
.sidebar-anamnesi-led.led-warn { background: #dc2626; }

/* ── Spacer e Divider ── */
.giada-navigator .sidebar-spacer {
  flex: 1;
}

.giada-navigator .sidebar-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.07);
  margin: 0.5rem 0;
}

/* ── Back item, Patient chip, Firma ── */
.giada-navigator .sidebar-back-item {
  border-radius: 10px;
  padding: 0.65rem 0 0.65rem 26px;
}

.giada-navigator .sidebar-patient-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem 0.75rem 8px;
  margin: 0.25rem 0;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.08);
}

.giada-navigator .sidebar-patient-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.20);
  color: #1d4ed8;
  font-weight: 700;
  font-size: 0.875rem;
}

.giada-navigator .sidebar-patient-name {
  opacity: 0;
  transition: opacity 0.18s ease;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-slate);
  white-space: nowrap;
}

.giada-navigator:hover .sidebar-patient-name {
  opacity: 1;
  transition-delay: 0.12s;
}

/* ── Firma d'autore — sempre in fondo del navigator ── */
.giada-navigator .sidebar-firma {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem 0.5rem;
  margin-top: auto;
  font-size: 0.55rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.40;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.giada-navigator:hover .sidebar-firma {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   .giada-main — §8.2 Main Container
   Display: flex column, padding standard 24px
   Margin-left: 72px (navigator compresso) → 240px dinamico su hover
══════════════════════════════════════════════════════════════════════════ */
/* ── App shell — wrapper flex per sidebar + main ── */
.app-shell {
  display: flex;
  position: relative;
}

.giada-main {
  background: transparent !important;
  margin-left: var(--nav-w-collapsed);
  margin-top: 120px;
  margin-bottom: 0;
  padding: 24px;
  min-height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-standard);
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

/* Push layout — main si sposta quando sidebar si espande su hover */
body:has(.giada-navigator:hover) .giada-main {
  margin-left: var(--nav-w-expanded);
}

/* ============================================================================
   10. KPI ROW & CARD (§8.2)
   ============================================================================ */

.radar-kpi-row {
  display: flex;
  gap: var(--gap-standard);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.kpi-card {
  flex: 1;
  min-width: 200px;
  min-height: 120px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kpi-card .label {
  font-size: 12px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-card .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-slate);
}

/* ============================================================================
   11. PATIENT CANTIERE (§8.3)
   ============================================================================ */

.patient-cantiere {
  display: flex;
  flex-direction: column;
}

.cantiere-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.cantiere-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-slate);
}

.patient-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================================
   12. PATIENT ROW (§8.4)
   ============================================================================ */

.patient-row {
  padding: 12px 20px;
  border-left: var(--semaforo-w) solid transparent;
  cursor: pointer;
  transition: all var(--transition-smooth);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
}

.patient-row.slab-cantiere {
  backdrop-filter: blur(var(--blur-cantiere)) saturate(var(--sat-cantiere));
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
}

.patient-row:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: var(--g-lift);
}

.patient-row .patient-name {
  font-weight: 600;
  color: var(--text-slate);
}

.patient-row .patient-meta {
  font-size: 12px;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .patient-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   13. SEARCH PILL (§8.5)
   ============================================================================ */

.search-pill {
  width: 300px;
  padding: 10px 16px;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(var(--blur-radar)) saturate(var(--sat-radar));
  border: none;
  border-radius: 50px;
  color: var(--text-slate);
  font-size: 14px;
  transition: all var(--transition-smooth);
}

.search-pill::placeholder {
  color: rgba(15, 23, 42, 0.5);
}

.search-pill:focus {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .search-pill {
    width: 100%;
  }
}

/* ============================================================================
   14. FORM & INPUT COMPONENTS
   ============================================================================ */

.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-slate);
  opacity: 0.8;
}

/* CONFLITTO giada_style.css — .form-control (style.css ha valori diversi sopra) */
.form-control {
  padding: 10px 14px;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(var(--blur-cantiere)) saturate(var(--sat-cantiere));
  border: none;
  border-radius: 20px;
  border-left: var(--semaforo-w) solid transparent;
  color: var(--text-slate);
  font-size: 14px;
  transition: all var(--transition-smooth);
}

.form-control::placeholder {
  color: rgba(15, 23, 42, 0.5);
}

.form-control:focus {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230f172a' d='M0 3l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* ============================================================================
   15. LEGAL TOGGLE PILL (REFERTAZIONE NEGATIVA)
   ============================================================================
   3 stati: [N] Neutro, [A] Assente, [P] Presente
   ============================================================================ */

.legal-toggle-group {
  display: flex;
  gap: var(--gap-standard);
  align-items: center;
}

.legal-toggle-pill {
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(var(--blur-radar)) saturate(var(--sat-radar));
  border: none;
  border-radius: 50px;
  color: var(--text-slate);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
  border-left: 2px solid transparent;
}

.legal-toggle-pill:hover {
  background-color: rgba(255, 255, 255, 0.45);
}

.legal-toggle-pill.active {
  background-color: rgba(255, 255, 255, 0.6);
  border-left-color: var(--semaforo-green);
}

.legal-toggle-pill.neutro {
  opacity: 0.6;
}

.legal-toggle-pill.assente {
  border-left-color: var(--semaforo-amber);
}

.legal-toggle-pill.presente {
  border-left-color: var(--semaforo-green);
}

/* ============================================================================
   16. BUTTON STYLES
   ============================================================================ */

/* CONFLITTO giada_style.css — .btn (style.css ha valori diversi sopra) */
.btn {
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(var(--blur-radar)) saturate(var(--sat-radar));
  border: none;
  border-radius: 20px;
  color: var(--text-slate);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-standard);
}

.btn:hover {
  transform: var(--g-lift);
  background-color: rgba(255, 255, 255, 0.45);
}

.btn:active {
  transform: translateY(-2px);
}

/* CONFLITTO giada_style.css — .btn-primary (style.css ha valori diversi sopra) */
.btn-primary {
  background-color: rgba(16, 185, 129, 0.35);
  color: var(--semaforo-green);
}

.btn-primary:hover {
  background-color: rgba(16, 185, 129, 0.5);
}

/* CONFLITTO giada_style.css — .btn-danger (style.css ha valori diversi sopra) */
.btn-danger {
  background-color: rgba(239, 68, 68, 0.35);
  color: var(--semaforo-red);
}

.btn-danger:hover {
  background-color: rgba(239, 68, 68, 0.5);
}

/* ============================================================================
   17. BREADCRUMBS & NAVIGATION
   ============================================================================ */

.path-pill {
  display: flex;
  align-items: center;
  gap: var(--gap-standard);
  font-size: 12px;
  color: rgba(15, 23, 42, 0.7);
}

.path-pill a {
  color: var(--text-slate);
  text-decoration: none;
  transition: all var(--transition-smooth);
}

.path-pill a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.path-pill span {
  opacity: 0.5;
}

/* ============================================================================
   18. MENU & NAVIGATOR ITEMS
   ============================================================================ */

.nav-item {
  padding: 8px 12px;
  color: rgba(15, 23, 42, 0.6);
  cursor: pointer;
  transition: all var(--transition-smooth);
  border-radius: 12px;
  font-size: 13px;
  text-align: center;
  margin: 4px auto;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--text-slate);
}

.nav-item.active {
  background-color: rgba(16, 185, 129, 0.2);
  color: var(--semaforo-green);
  font-weight: 600;
}

/* Effetto Gemma per item attivo — animazione 300ms smooth slide */
.nav-item.active::before {
  content: '◆';
  margin-right: 6px;
  opacity: 0.8;
}

.giada-navigator .sidebar-nav-item.active {
  animation: gemma-pulse 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================================
   19. RESPONSIVE LAYOUT ADJUSTMENTS
   ============================================================================ */

@media (max-width: 1024px) {
  .giada-container {
    grid-template-columns: 1fr;
  }

  .giada-navigator {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    height: auto;
    padding: 8px 24px;
  }

  .nav-item {
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .giada-container {
    grid-template-rows: 60px auto 1fr;
  }

  .giada-header {
    flex-wrap: wrap;
    padding: 0 16px;
  }

  .giada-main {
    padding: 16px;
  }

  .radar-kpi-row {
    flex-direction: column;
  }

  .kpi-card {
    min-width: unset;
  }

  .search-pill {
    width: 100%;
  }

  .cantiere-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .patient-row {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

/* ============================================================================
   20. UTILITY CLASSES
   ============================================================================ */

.opacity-60 {
  opacity: 0.6;
}

.opacity-40 {
  opacity: 0.4;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mt-16 {
  margin-top: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.p-16 {
  padding: 16px;
}

.p-20 {
  padding: 20px;
}

.rounded-20 {
  border-radius: 20px;
}

.rounded-50 {
  border-radius: 50px;
}

.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

/* ============================================================================
   CAUSTICS ANIMATION (Task 4 — Subconscious Breathing)
   ============================================================================ */

@keyframes caustics-flow {
  0%, 100% {
    opacity: 0.06;
    transform: scale(1);
  }
  50% {
    opacity: 0.18;
    transform: scale(1.02);
  }
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 40% 50%, rgba(103, 232, 249, 0.08) 0%, transparent 50%);
  pointer-events: none;
  will-change: transform;
  animation: caustics-flow 11s ease-in-out infinite;
  z-index: -1;
}

/* ============================================================================
   21. SCROLLBAR STYLING (Chrome/Safari/Edge)
   ============================================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.5);
}

/* ============================================================================
   CAUSTICS ANIMATION (Task 4 — Subconscious Breathing)
   ============================================================================ */

@keyframes caustics-flow {
  0%, 100% {
    opacity: 0.06;
    transform: scale(1);
  }
  50% {
    opacity: 0.18;
    transform: scale(1.02);
  }
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 40% 50%, rgba(103, 232, 249, 0.08) 0%, transparent 50%);
  pointer-events: none;
  will-change: transform;
  animation: caustics-flow 11s ease-in-out infinite;
  z-index: -1;
}

/* ─────────────────────────────────────
   ARIA SENTINEL — Gems of Awareness
   Sprint 62
   ───────────────────────────────────── */

.gems-band {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 1rem;
  min-height: 44px;
}

.gem-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  min-width: 110px;
  cursor: help;
  transition: transform 180ms ease, box-shadow 180ms ease;
  animation: gem-appear 0.25s ease forwards;
}

.gem-pill.gem-critico      { border-left: 3px solid #ef4444; }
.gem-pill.gem-moderato     { border-left: 3px solid #f97316; }
.gem-pill.gem-monitoraggio { border-left: 3px solid #06b6d4; }

.gem-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gem-critico      .gem-icon { background: rgba(239,68,68,.10); }
.gem-moderato     .gem-icon { background: rgba(249,115,22,.10); }
.gem-monitoraggio .gem-icon { background: rgba(6,182,212,.10); }

.gem-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  text-align: center;
  max-width: 100px;
  line-height: 1.2;
  word-break: break-word;
}

.gem-grade {
  font-size: 0.6rem;
  font-weight: 700;
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 1px 5px;
}

.gem-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.07);
}

.gems-band-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #94a3b8;
  font-size: 0.78rem;
  padding: 0.5rem 0;
}

@keyframes gem-appear {
  from { opacity: 0; transform: scale(0.88) translateY(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ── Sprint 64 Revised: Toggle Clinico + Grid Expand ────────────────────── */

/* Griglia 3 colonne */
.fam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
@media (max-width: 900px) { .fam-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fam-grid { grid-template-columns: 1fr; } }

/* Cella base */
.fam-cell {
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 10px;
  padding: 10px 12px;
  transition: all 180ms cubic-bezier(0.16,1,0.3,1);
}
/* Cella espansa: occupa riga intera */
.fam-cell--active {
  grid-column: 1 / -1;
  background: rgba(255,255,255,.58);
  border-color: var(--blu);
  box-shadow: 0 2px 10px rgba(90,171,219,.15);
}
/* Red flag attiva: bordo rosso */
.fam-cell--redflag.fam-cell--active {
  border-color: var(--rosso);
  background: rgba(239,68,68,.03);
  box-shadow: 0 2px 8px rgba(239,68,68,.12);
}

/* Header cella */
.fam-cell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fam-cell__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .83rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Toggle clinico */
.clin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.clin-toggle__input { display: none; }

.clin-toggle__track {
  position: relative;
  width: 38px;
  height: 20px;
  background: var(--verde);
  border-radius: 999px;
  transition: background 180ms cubic-bezier(0.16,1,0.3,1);
}
.clin-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 180ms cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.clin-toggle__input:checked ~ .clin-toggle__track {
  background: var(--blu);
}
.clin-toggle__input:checked ~ .clin-toggle__track .clin-toggle__thumb {
  transform: translateX(18px);
}
.fam-cell--redflag .clin-toggle__input:checked ~ .clin-toggle__track {
  background: var(--rosso);
}

.clin-toggle__label-off {
  font-size: .72rem;
  color: var(--verde-d);
}
.clin-toggle__label-on {
  font-size: .72rem;
  color: var(--blu-d);
  font-weight: 600;
}
.fam-cell--redflag .clin-toggle__label-on { color: var(--rosso-d); }

/* Dettaglio espanso */
.fam-cell__detail {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  animation: fam-cell-expand 180ms cubic-bezier(0.16,1,0.3,1);
}
.fam-cell__detail[hidden] { display: none !important; }

@keyframes fam-cell-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pillole lato materno/paterno */
.fam-pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.fam-pill { cursor: pointer; }
.fam-pill input { display: none; }
.fam-pill span {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .77rem;
  border: 1px solid rgba(15,23,42,.15);
  background: rgba(255,255,255,.5);
  color: var(--text-muted-glass);
  transition: all 150ms ease;
}
.fam-pill input:checked + span {
  background: rgba(90,171,219,.14);
  border-color: var(--blu);
  color: var(--blu-d);
  font-weight: 600;
}

/* Segmented control grado parentela */
.fam-segmented {
  display: inline-flex;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.15);
}
.fam-seg-btn { cursor: pointer; }
.fam-seg-btn input { display: none; }
.fam-seg-btn span {
  display: inline-flex;
  padding: 3px 10px;
  font-size: .75rem;
  color: var(--text-muted-glass);
  background: rgba(255,255,255,.45);
  border-right: 1px solid rgba(15,23,42,.12);
  transition: all 120ms ease;
}
.fam-seg-btn:last-child span { border-right: none; }
.fam-seg-btn input:checked + span {
  background: var(--blu);
  color: #fff;
  font-weight: 600;
}

/* Input testo dettaglio */
.fam-detail-input {
  flex: 1;
  min-width: 180px;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.62);
  font-size: .82rem;
  color: var(--text-primary);
  transition: border-color var(--transition-smooth, 300ms ease-out);
}
.fam-detail-input:focus {
  outline: none;
  border-color: var(--blu);
}

/* Campi footer (padre + note) */
.fam-footer-field { margin-top: .6rem; }
.fam-footer-field label {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-muted-glass);
  margin-bottom: .2rem;
}
.fam-footer-field textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 6px;
  background: rgba(255,255,255,.55);
  font-size: .83rem;
  color: var(--text-primary);
  resize: vertical;
}
.fam-footer-field textarea:focus {
  outline: none;
  border-color: var(--blu);
}

/* Sezione Red Flag separata */
.fam-redflag-section {
  margin-top: 12px;
}
.fam-redflag-section__title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--rosso-d);
  margin-bottom: 6px;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   END OF GIADA_STYLE.CSS
   ============================================================================
   Tutti i colori e i blur seguono le variabili root (§1.1).
   Nessuna classe CSS inventata: solo .slab-radar, .slab-cantiere, .glass-pill.
   Semaforo border-left 4px su tutti i campi obbligatori.
   Responsive: 1 colonna su mobile, 2+ su desktop.
   Pronto per produzione: 2026-04-19
   ============================================================================ */