/* pkg/ui/templates/css/app.css */
/* Design System AI v9 */
/* Target: MMG con presbiopia, monitor 1080p, Windows 11 */
/* Layout: single-page con sezioni collapsabili (non wizard) */

:root {
    /* Palette — tema chiaro, stile medico-scientifico sobrio (v0.9.5.148).
       Accento blu-petrolio desaturato (slate-teal): clinico, professionale,
       poco saturo. Stati semantici tenui. */
    --primary: #3D6478;
    --primary-dark: #2A4856;
    --primary-light: #E4ECEF;
    --success-bg: #E6EEE7;
    --success-text: #2E6B3E;
    --warning-bg: #F6EEDD;
    --warning-text: #8A5A1A;
    --error-bg: #F2E4E2;
    --error-text: #A33A30;
    --body-text: #1F2A30;
    --label-text: #5A6B73;
    --page-bg: #F4F6F7;
    --card-bg: #FFFFFF;
    /* v0.9.5.272 — bordi piu' contrastati per schermi economici (il vecchio
       #DDE3E6 su bianco sparato spariva). Due livelli, entrambi visibili. */
    --border-color: #C6D0D6;

    /* Typography */
    --font-main: 'Segoe UI', Arial, sans-serif;

    /* v0.9.5.279 — design system lotto 3: scala tipografica ridotta a
       5 livelli (erano 9 token: 10/11/12/13/14/16/18/20/24) + 1 asse
       "display" per i numeri-hero. Valori scelti per minimizzare il delta
       visivo (14/20/24 restano identici a prima) e per l'audience MMG su
       Full HD economici: corpo a 17px (>= floor presbiopia 16px), nessun
       micro sotto i 12px (i vecchi 9-11px sparivano sui bianchi sparati). */
    --text-xs:      12px;   /* micro chrome: badge, char-count, meta, hint, footer */
    --text-sm:      14px;   /* secondario/denso: celle tabella, bottoni small, sotto-label */
    --text-base:    17px;   /* corpo leggibile, input, paragrafi (floor presbiopia) */
    --text-lg:      20px;   /* sottotitoli, titoli di sezione, glifi-icona */
    --text-xl:      24px;   /* titoli principali, modali, % invalidita' */
    --text-display: 36px;   /* numeri-hero: score-circle, nome splash */

    /* Alias dei vecchi 9 token (ancora referenziati da var(--font-size-*)
       in molte regole: preservati per non rifare la grep su 6994 righe). */
    --font-size-min:   var(--text-base);
    --font-size-base:  var(--text-base);
    --font-size-small: var(--text-sm);
    --font-size-h1:    var(--text-xl);
    --font-size-h2:    var(--text-lg);
    --font-size-xxs:   var(--text-xs);
    --font-size-xs:    var(--text-xs);
    --font-size-sm:    var(--text-xs);
    --font-size-md:    var(--text-xs);
    --font-size-meta:  var(--text-xs);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* v0.9.5.282 — design system lotto 4: griglia 8pt PURA. Rimossi gli step
       dispari fuori-griglia --spacing-6/10/14 (non multipli di 4): i loro usi
       sono stati rimappati sui token di griglia (6→8 sm, 10→8 sm, 14→16 md).
       Restano 2px (hairline) e 12px (multiplo di 4) come unici intermedi. */
    --spacing-2xs: 2px;
    --spacing-12: 12px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* v0.9.5.268 Fase 3 — assi mancanti del design system: ombre, anello di
       focus e motion tokenizzati (prima 36 box-shadow ad-hoc, 0 token; 12
       durate diverse). Tre livelli di profondita' + una "voce di movimento"
       unica (la curva-firma gia' usata da .ai-materialize). */
    /* v0.9.5.272 — compromesso per schermi Full HD economici (bianchi
       sparati, scarsa resa di sfumature/linee sottili): ombre piu' COMPATTE
       e CONTRASTATE (un blur largo e tenue sparisce nel bianco sbiancato),
       focus-ring ben visibile. Edge dei pannelli affidato soprattutto ai
       bordi (vedi --border-color/--border-light), non alle ombre. */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.32);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
    --motion-fast: 0.15s;
    --motion-base: 0.25s;
    --motion-slow: 0.4s;
    --ease-standard: var(--ease-standard);

    /* v0.9.5.245 R1 H2 — Alias variabili legacy "fantasma".
       Diffusamente usate in app.css ma mai dichiarate: i fallback inline
       coprivano la maggior parte ma alcune restavano rotte
       (`.doc-item.doc-used` con `var(--primary-color)` senza fallback,
       `.lic-fallback-details border-radius:var(--radius)` collassava a 0).
       Mantenute come alias per non rifare la grep su 5984 righe. */
    --bg: var(--card-bg);
    --bg-card: var(--card-bg);
    --bg-muted: var(--page-bg);
    --surface: var(--card-bg);
    --border: var(--border-color);
    --border-light: #D9E0E4; /* v0.9.5.272 — era #ECEFF1 (invisibile su bianco sparato): divisori ora percepibili */
    --border-radius: var(--radius-md);
    --radius: var(--radius-md);
    --fg: var(--body-text);
    --text: var(--body-text);
    --text-main: var(--body-text);
    --text-muted: var(--label-text);
    --text-secondary: var(--label-text);
    --primary-color: var(--primary);
    --primary-bg: var(--primary-light);
    --hover-bg: var(--page-bg);
    --info-bg: #E3F2FD;
    --info-text: #1565C0;

    /* v0.9.5.245 R1 M6 — font-mono unificato (era 3 stringhe diverse). */
    --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

    /* v0.9.5.245 R1 H7 — scala z-index dichiarata (era 12 livelli ad-hoc
       da 1 a 10002). Aggiungere un overlay senza scala portava a
       impilamenti casuali. */
    --z-base: 1;
    --z-sticky: 100;
    --z-fab: 200;
    --z-dropdown: 300;
    --z-toast: 400;
    --z-drawer: 500;
    --z-popover: 600;
    --z-overlay: 1000;
    --z-modal: 1100;
    --z-modal-secondary: 1200;
    --z-tooltip: 1300;

    /* v0.9.5.245 R4 H5 — Tier bottoni canonici.
       L'app aveva 13 famiglie di bottoni con padding/font-size/radius/
       height arbitrari (.btn, .btn-toolbar, .btn-doc-text, .btn-regen,
       .btn-icon, .notif-action-btn, .cond-action-btn, .btn-doc-view,
       .btn-doc-view-sm, .btn-doc-convert, .btn-copy-inline, .btn-shutdown,
       .btn-disclaimer-accept). Definisco 4 tier semantici come token,
       poi le 13 classi vengono allineate ai token. */
    --btn-md-py: 14px;          /* primary action: padding vert */
    --btn-md-px: 28px;          /* primary action: padding horiz */
    --btn-md-h: 48px;           /* primary action: min-height */
    --btn-md-fs: var(--font-size-base);
    --btn-md-radius: var(--radius-md);
    --btn-sm-py: 8px;           /* secondary action */
    --btn-sm-px: 14px;
    --btn-sm-h: 32px;
    --btn-sm-fs: var(--font-size-md);
    --btn-sm-radius: 6px;
    --btn-xs-py: 2px;           /* inline action (toolbar, action-btn) */
    --btn-xs-px: 10px;
    --btn-xs-h: 22px;
    --btn-xs-fs: var(--font-size-xs);
    --btn-xs-radius: var(--radius-sm);
    --btn-icon-size: 36px;      /* icon-only square */
    --btn-icon-radius: var(--radius-md);
    --btn-icon-size-sm: 28px;   /* icon-only smaller (notif-action) */

    /* v0.9.5.245 R4 M4 — Sistema badge canonico.
       L'app aveva 25+ classi badge (section-badge, license-badge, bell-badge,
       task-nav-badge, doc-format-badge, doc-alert-badge, pa-rank-badge,
       pa-gravita-badge, conf-badge, motivo-badge, profilo-cond-storia-count,
       cop-badge-ok/miss/filtered, ...). Definisco un tier base + varianti
       size e color. Le classi specifiche restano e vengono mappate sui token. */
    --badge-py: 1px;
    --badge-px: 7px;
    --badge-radius: 10px;
    --badge-fs: var(--font-size-xxs);
    --badge-fs-sm: var(--font-size-xs);
    --badge-fs-md: var(--font-size-sm);
    --badge-weight: 700;
    --badge-letter-spacing: 0.04em;
    /* Colori semantici (gia' dichiarati in palette brand, replicati come
       alias semantici badge per espressivita' del codice consumer). */
    --badge-bg-success: var(--success-text);
    --badge-bg-warning: var(--warning-text);
    --badge-bg-error: var(--error-text);
    --badge-bg-info: var(--info-text);
    --badge-bg-neutral: var(--label-text);
    --badge-bg-primary: var(--primary);
    --badge-fg-on-dark: #fff;

    /* v0.9.5.245 R5 H6 — Pattern overlay/modal unificato.
       L'app aveva 8 overlay con backdrop/padding/box-shadow indipendenti
       (.disclaimer/lab-chart/lic-gate/cond-modal/doc-text-modal/
       doc-viewer/confirm/kbd-help). Token semantici per le 3 intensita'
       di backdrop comuni + padding tipico esterno. */
    --overlay-backdrop-light: rgba(0, 0, 0, 0.5);    /* modal generici */
    --overlay-backdrop-medium: rgba(0, 0, 0, 0.55);  /* modal primari */
    --overlay-backdrop-strong: rgba(0, 0, 0, 0.75);  /* disclaimer iniziale */
    --overlay-padding: var(--spacing-lg);            /* 24px gutter esterno */
}


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

body {
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    color: var(--body-text);
    background: var(--page-bg);
    line-height: 1.5;
}

/* v0.9.5.149 — Layout app-shell: header + sidebar + footer fissi,
   contenuto centrale scrollabile. Niente scroll di pagina. */
body.app-shell {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.app-shell .header { flex: 0 0 auto; }
body.app-shell main.task-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    max-width: none;
    padding: 0;
}
body.app-shell .app-footer { flex: 0 0 auto; }

/* Header */
.header {
    background: var(--primary);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Header ridotto in modalita' app-shell */
body.app-shell .header { padding: 8px 16px; }
body.app-shell .header h1 { font-size: var(--text-sm); }
body.app-shell .header .version { font-size: var(--font-size-xs); }
body.app-shell .app-logo { width: 26px; height: 26px; }

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-logo {
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

.header-titles {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.header h1 {
    font-size: var(--text-base);
    font-weight: 600;
    white-space: nowrap;
}

.header .version {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* Bottone torna su */
.btn-scroll-top {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: var(--z-sticky);
}
.btn-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
}
.btn-scroll-top:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}


/* Card */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

.card h2 {
    color: var(--primary-dark);
    font-size: var(--font-size-h2);
    margin-bottom: var(--spacing-md);
}

/* Bottoni grandi con label chiare */
/* v0.9.5.245 R4 H5 — Tier MD (primary action). Token-driven. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--btn-md-py) var(--btn-md-px);
    border: none;
    border-radius: var(--btn-md-radius);
    cursor: pointer;
    font-size: var(--btn-md-fs);
    font-weight: 600;
    font-family: var(--font-main);
    transition: background 0.1s, transform 0.05s;
    min-height: var(--btn-md-h); /* touch-friendly */
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-primary:disabled {
    background: #B0B0B0;
    cursor: not-allowed;
}

.btn-success {
    background: var(--success-text);
    color: white;
}

.btn-success:hover {
    background: #2a4319;
}

.btn-copy {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: var(--text-lg);
    padding: 18px 36px;
    min-width: 200px;
    justify-content: center;
}

.btn-copy:hover {
    background: var(--primary);
    color: white;
}

/* Disclaimer */
.disclaimer {
    background: var(--warning-bg);
    border: 1px solid var(--warning-text);
    padding: var(--spacing-md);
    margin: var(--spacing-md) auto;
    font-size: var(--font-size-min);
    border-radius: var(--radius-sm);
    text-align: center;
    max-width: 960px;
    padding: var(--spacing-md) var(--spacing-lg);
}
.disclaimer-warn {
    font-size: var(--font-size-xs);
    opacity: 0.85;
}

/* Score widget */
.score-widget {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-display);
    font-weight: 700;
    margin: 0 auto;
}

.score-label {
    font-size: var(--font-size-h2);
    font-weight: 700;
    margin-top: var(--spacing-sm);
    letter-spacing: 1px;
}

.score-optimal {
    background: var(--success-bg);
    color: var(--success-text);
    border: 3px double var(--success-text);
}

.score-sufficient {
    background: var(--success-bg);
    color: var(--success-text);
}

.score-incomplete {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.score-risk {
    background: var(--error-bg);
    color: var(--error-text);
}

/* Score breakdown bars */
.score-breakdown {
    max-width: 500px;
    margin: 0 auto var(--spacing-lg);
}

.score-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-small);
}

.score-cat {
    width: 160px;
    text-align: right;
    color: var(--label-text);
    font-weight: 600;
}

.score-bar {
    flex: 1;
    height: 12px;
    background: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.score-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.score-val {
    width: 50px;
    font-weight: 700;
    color: var(--primary-dark);
}

/* Score expandable rows */
.score-row-expandable {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.score-row-expandable:hover {
    background: var(--hover-bg, var(--page-bg));
    border-radius: 4px;
}

.score-expand-icon {
    width: 20px;
    text-align: center;
    font-size: var(--font-size-xxs);
    color: var(--label-text);
    transition: transform 0.2s ease;
}

.score-row-open .score-expand-icon {
    transform: rotate(180deg);
}

/* Score detail panel (sub-scores + suggestions) */
.score-detail-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-left: 170px;
    margin-bottom: 0;
}

.score-detail-panel.expanded {
    max-height: 500px;
    margin-bottom: var(--spacing-sm);
}

/* Sub-score rows */
.sub-score-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    margin-bottom: 3px;
    font-size: var(--font-size-sm);
    padding: 2px 0;
}

.sub-score-label {
    width: 200px;
    text-align: right;
    color: var(--label-text);
}

.sub-score-bar {
    flex: 1;
    height: 8px;
    background: #E8E8E8;
    border-radius: 4px;
    overflow: hidden;
}

.sub-score-val {
    width: 40px;
    font-weight: 600;
    font-size: var(--font-size-xs);
    color: var(--primary-dark);
}

/* Suggestions */
.suggestion {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 8px;
    margin: 3px 0;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    gap: var(--spacing-sm);
}

.suggestion-alta {
    background: var(--error-bg);
    color: var(--error-text);
}

.suggestion-media {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.suggestion-bassa {
    background: var(--info-bg, #e3f2fd);
    color: var(--info-text, #1565c0);
}

.suggestion-impact {
    white-space: nowrap;
    font-weight: 600;
    font-size: var(--font-size-xs);
}

/* Validation alerts */
.validation-alerts {
    margin-top: var(--spacing-md);
}

/* Classi utility introdotte per eliminare stili inline (CSP strict, C1).
   Usate dai rendering dinamici che prima usavano style="..." hardcoded.
   Per stili veramente dinamici (width %, color computato) i JS rendering
   usano setProperty su una CSS custom property (--pct, --color). */
.txt-error       { color: var(--error-text); }
.txt-warn        { color: var(--warning-text); }
.txt-muted       { color: var(--label-text); font-size: var(--font-size-small); }
.txt-right-small { text-align: right; margin-top: 4px; font-size: var(--font-size-xs); color: var(--label-text); }
.list-note       { margin-top: 8px; padding-left: 20px; }
.mt-8            { margin-top: 8px; }
.mt-8-bold       { margin-top: 8px; font-weight: 600; }

/* Modale apri-testo-documento: eredita da disclaimer-overlay ma con
   z-index/max-width specifici (era tutto inline). */
.doc-text-modal-overlay {
    z-index: var(--z-modal-secondary);
}
.doc-text-modal-box {
    max-width: 800px;
    max-height: 80vh;
    overflow: auto;
}
.doc-text-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.doc-text-modal-close-btn {
    padding: 4px 12px;
}
.doc-text-modal-textarea {
    width: 100%;
    font-size: var(--font-size-md);
}
.doc-text-modal-count {
    text-align: right;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--label-text);
}

/* Lab chart category header: colore dinamico tramite --cat-color */
.lab-dashboard-category {
    border-left: 3px solid var(--cat-color, var(--primary));
    margin-bottom: 8px;
    padding-left: 8px;
}
.lab-category-name {
    font-weight: 600;
    font-size: var(--font-size-md);
    color: var(--cat-color, var(--primary));
    margin: 8px 0 2px;
}
.lab-trend-dot-color { color: var(--trend-color, var(--label-text)); }
.lab-chart-clickable { cursor: pointer; }
.lab-stato-color {
    color: var(--cat-color, inherit);
    font-weight: 500;
}

/* Punteggio/score bar: width dinamica via --pct */
.score-fill-dyn { width: var(--pct, 0%); }
.alert-action-text { margin-top: 4px; }

/* WHODAS domain row: width fissi spostati da inline */
.whodas-domain-label { width: 180px; }
.whodas-domain-val   { width: 50px; text-align: right; font-weight: 600; }
.whodas-domain-bar-dyn { width: var(--pct, 0%); }

/* Profilo condizioni: sorgente non tracciata in opacita' */
.profilo-cond-src-missing { opacity: 0.6; }

/* Allegazione: messaggio vuoto per documenti */
.pa-docs-empty {
    color: var(--label-text);
    font-size: var(--font-size-small);
}

/* Toast notifica
   - Success/info: dismissibili automatici (~3s) in fondo a destra
   - Warning/error: persistenti finche' l'utente non li chiude,
     conforme audit H6 (errori critici non devono sparire in 2.5s).
   role="status" (info/success) / role="alert" (warning/error)
   vengono impostati da showToast() per screen reader. */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--success-text);
    color: white;
    padding: 16px 28px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: var(--z-toast);
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.toast.visible {
    opacity: 1;
    pointer-events: auto;
}
.toast.toast-success { background: var(--success-text); }
.toast.toast-info    { background: var(--primary); }
.toast.toast-warning { background: var(--warning-text); color: #fff; }
.toast.toast-error   { background: var(--error-text);   color: #fff; }

.toast-msg {
    flex: 1 1 auto;
    line-height: 1.4;
}
.toast-close {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: inherit;
    font-size: var(--text-lg);
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 700;
}
.toast-close:hover {
    background: rgba(255,255,255,0.2);
}
.toast-close:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────
   v0.9.5.144 — Bell notifications + drawer
   ────────────────────────────────────────────────────────────────── */
.btn-notifications {
    position: relative;
}
/* v0.9.5.245 R4 M4 — Tier badge XS (dot-style su icon). */
.bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--badge-bg-error);
    color: var(--badge-fg-on-dark);
    font-size: var(--badge-fs);
    font-weight: var(--badge-weight);
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--spacing-xs);
    border-radius: var(--spacing-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg);
}
.bell-badge.bell-badge-urgent {
    background: var(--warning-text); /* arancio urgent (allineato a brand) */
    animation: bell-pulse 2s ease-in-out infinite;
}
@keyframes bell-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.notifications-drawer {
    position: fixed;
    top: 60px;
    right: 16px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, var(--border-color));
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md);
    z-index: var(--z-drawer);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-section, var(--page-bg));
    border-bottom: 1px solid var(--border-color, var(--border-color));
    font-weight: 600;
    font-size: var(--text-sm);
}
.notifications-actions {
    display: flex;
    gap: 4px;
}
/* v0.9.5.245 R4 H5 — Tier XS allineato. */
.notif-action-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-size-min); /* 16px era originale, mantenuto: icona checkmark/X */
    padding: var(--btn-xs-py) var(--btn-xs-px);
    border-radius: var(--btn-xs-radius);
    line-height: 1;
}
.notif-action-btn:hover {
    background: rgba(0,0,0,0.05);
    color: var(--text-main, #222);
}
.notifications-body {
    overflow-y: auto;
    flex: 1;
}
.notifications-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted, var(--label-text));
    font-size: var(--font-size-md);
}
.notif-item {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light, var(--border-light));
}
.notif-item:last-child { border-bottom: none; }
.notif-item.notif-unread {
    background: rgba(0, 102, 204, 0.04);
}
.notif-dot, .notif-dot-urgent, .notif-dot-read {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 8px;
}
.notif-dot { background: var(--primary, #06c); }
.notif-dot-urgent { background: #e8851e; }
.notif-dot-read { background: var(--border-color); }
.notif-content { flex: 1; min-width: 0; }
.notif-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-main);
}
.notif-body {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 4px;
}
.notif-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.notif-link {
    color: var(--primary, #06c);
    text-decoration: none;
    font-weight: 600;
}
.notif-link:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────
   v0.9.5.144 — Tab Aggiornamenti
   ────────────────────────────────────────────────────────────────── */
.updater-value {
    font-size: var(--font-size-md);
    color: var(--text-main);
    padding: 4px 0;
}
.updater-status {
    padding: 12px;
    border-radius: var(--radius-sm, 4px);
    background: rgba(0,0,0,0.04);
    font-size: var(--font-size-md);
    font-weight: 600;
}
.updater-status-ok    { background: rgba(0, 150, 60, 0.12);  color: #0a7a0a; }
.updater-status-update{ background: rgba(232, 133, 30, 0.15); color: #c0680f; }
.updater-status-error { background: rgba(204, 51, 51, 0.10);  color: #c33; }
.updater-info {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border-color, var(--border-color));
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-card, #fff);
}
.updater-info > div { margin-bottom: 8px; font-size: var(--font-size-md); }
.updater-size { color: var(--text-muted); font-size: var(--font-size-sm); }
.updater-mandatory {
    display: inline-block;
    background: var(--error-text, #c33);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-top: 4px;
}
.updater-changelog {
    white-space: pre-wrap;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.03);
    border-radius: var(--radius-sm, 4px);
    max-height: 200px;
    overflow-y: auto;
}
.updater-actions {
    margin-top: 8px;
}
.updater-howto {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(0, 102, 204, 0.06);
    border-left: 3px solid var(--primary, #06c);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-sm);
    color: var(--text-main);
    line-height: 1.5;
}
.updater-howto-nopadtop {
    margin-top: 0;
}
.settings-group-separator {
    border-top: 1px dashed var(--border-color, var(--border-color));
    padding-top: 16px;
    margin-top: 16px;
}

/* Sezione fallback (richiesta via email + upload manuale) — collassata di default */
.lic-fallback-details {
    border: 1px dashed var(--border-color, var(--border-color));
    border-radius: var(--radius);
    padding: 0;
    background: rgba(0,0,0,0.02);
}
.lic-fallback-summary {
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
    font-size: var(--text-sm);
    list-style: revert;
}
.lic-fallback-summary:hover { color: var(--fg); }
.lic-fallback-details[open] .lic-fallback-summary {
    border-bottom: 1px solid var(--border-color, var(--border-color));
    color: var(--fg);
}
.lic-fallback-body { padding: 16px; }

/* Debug telemetria: riga "coda + flush" */
.tel-debug-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color, var(--border-color));
}
.tel-debug-row #tel-flush-btn { margin-left: auto; padding: 4px 12px; font-size: var(--text-sm); }

/* License gate overlay — blocco analisi senza licenza */
/* v0.9.5.245 R5 H6 — Pattern overlay unificato. */
.lic-gate-overlay {
    position: fixed; inset: 0;
    background: var(--overlay-backdrop-medium);
    display: flex; align-items: center; justify-content: center;
    padding: var(--overlay-padding);
    z-index: var(--z-modal);
}
.lic-gate-overlay.hidden { display: none; }
.lic-gate-box {
    background: var(--bg, #fff);
    color: var(--fg, #222);
    border-radius: 8px;
    padding: 28px 32px;
    max-width: 460px;
    box-shadow: var(--shadow-lg);
}
.lic-gate-box h2 { margin: 0 0 12px; color: #C62828; font-size: var(--text-lg); }
.lic-gate-msg { margin: 0 0 18px; line-height: 1.5; }
.lic-gate-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.lic-gate-hint { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; margin: 0; }
.lic-gate-hint code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px; }

/* ── Sprint 1: correzione patologie ───────────────────────────── */

/* Stato visivo della patologia */
.profilo-cond-rejected .profilo-cond-label {
    text-decoration: line-through;
    opacity: 0.6;
}
.profilo-cond-rejected { opacity: 0.7; }
.profilo-cond-modified { border-left: 3px solid var(--primary); }
.profilo-cond-manual { border-left: 3px solid var(--success-text); }

.profilo-cond-stato-badge {
    font-size: var(--text-xs);
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.profilo-cond-stato-rejected { background: var(--error-bg); color: var(--error-text); }
.profilo-cond-stato-modified { background: var(--info-bg); color: var(--info-text); }
.profilo-cond-stato-manual   { background: var(--success-bg); color: var(--success-text); }

/* Barra azioni nel pannello espandibile */
.cond-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    /* v0.9.5.274 — la barra azioni e' in CIMA al pannello: la tratteggiata
       va SOTTO i pulsanti (li separa dal contenuto), non sopra. */
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color, var(--border-color));
}
/* v0.9.5.245 R4 H5 — Tier XS allineato. */
.cond-action-btn {
    background: var(--bg-muted);
    border: 1px solid var(--border);
    color: var(--text);
    padding: var(--spacing-xs) var(--btn-xs-px);
    border-radius: var(--btn-xs-radius);
    font-size: var(--btn-xs-fs);
    cursor: pointer;
    white-space: nowrap;
}
.cond-action-btn:hover { background: #e3eaf5; border-color: var(--primary); }
.cond-action-reject:hover { background: var(--error-bg); border-color: var(--error-text); color: var(--error-text); }
.cond-action-note { font-size: var(--text-xs); color: var(--text-muted); flex: 1; }

/* Modali correzione */
/* v0.9.5.245 R5 H6 — Pattern overlay unificato. */
.cond-modal-overlay {
    position: fixed; inset: 0;
    background: var(--overlay-backdrop-light);
    display: flex; align-items: center; justify-content: center;
    padding: var(--overlay-padding);
    z-index: var(--z-modal);
}
.cond-modal {
    background: var(--bg, #fff);
    color: var(--fg, #222);
    border-radius: 8px;
    padding: 22px 26px;
    max-width: 480px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}
.cond-modal h3 { margin: 0 0 8px; color: var(--primary); font-size: var(--text-base); }
.cond-modal-desc { margin: 0 0 16px; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; }
.cond-modal-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--label-text);
    margin: 8px 0 3px;
}
.cond-modal-select, .cond-modal-input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #d4d9e0;
    border-radius: 4px;
    font-size: var(--text-sm);
    box-sizing: border-box;
}
.cond-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
.cond-modal-results {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
}
.cond-modal-result {
    padding: 8px 8px;
    cursor: pointer;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--page-bg);
}
.cond-modal-result:hover { background: #e3eaf5; }
.cond-modal-result strong { color: var(--primary); margin-right: 8px; }
.cond-modal-empty { padding: 8px; color: var(--text-muted); font-size: var(--text-sm); text-align: center; }

/* Sprint 2: selezione testo → patologia */
.cond-sel-popover {
    position: absolute;
    z-index: var(--z-modal-secondary);
    background: var(--primary);
    border-radius: 5px;
    box-shadow: var(--shadow-md);
}
.cond-sel-btn {
    background: transparent;
    border: none;
    color: #fff;
    padding: 7px 13px;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.cond-sel-btn:hover { background: rgba(255,255,255,0.12); border-radius: 5px; }
.cond-cand-group {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 8px 3px;
    letter-spacing: 0.4px;
}
.cond-cand-row {
    padding: 8px 8px;
    cursor: pointer;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--page-bg);
}
.cond-cand-row:hover { background: #e3eaf5; }
.cond-cand-row strong { color: var(--primary); margin-right: 8px; }
.cond-cand-neg { color: var(--error-text); font-size: var(--text-xs); font-weight: 600; }

/* ── Sprint 3: layout a fasi (sidebar + frame) ─────────────────── */

.task-layout {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.task-sidebar {
    flex: 0 0 92px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 8px;
    overflow-y: auto;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
}
.task-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, var(--label-text));
    cursor: pointer;
    font: inherit;
    transition: background 0.12s;
}
.task-nav-btn:hover { background: var(--primary-light); }
.task-nav-icon { line-height: 0; }
.task-nav-icon svg { width: 22px; height: 22px; display: block; }
.task-nav-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.2px; }
.task-nav-active {
    background: var(--primary);
    color: #fff;
}
.task-nav-active:hover { background: var(--primary); }
.task-nav-locked {
    opacity: 0.38;
    cursor: not-allowed;
}
.task-nav-locked:hover { background: transparent; }
/* v0.9.5.245 R4 M4 — Tier badge XS (dot count su task nav). */
.task-nav-badge {
    background: var(--badge-bg-warning);
    color: var(--badge-fg-on-dark);
    border-radius: var(--spacing-sm);
    font-size: var(--badge-fs);
    font-weight: var(--badge-weight);
    padding: 0 var(--spacing-xs);
    min-width: 14px;
    text-align: center;
}
.task-nav-active .task-nav-badge { background: #fff; color: var(--primary); }

/* v0.9.5.265 Fase 1a — gerarchia "una cosa sola": il Certificato e' il
   protagonista, gli altri sono satelliti (Prepara / Verifica). */
.task-sidebar { flex-basis: 106px; gap: 2px; }
.task-nav-grouplabel {
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--label-text);
    text-align: center; margin: 3px 0 1px; opacity: 0.65;
}
.task-nav-sep { height: 1px; background: var(--border-color); margin: 7px 8px 1px; }
.task-nav-label { line-height: 1.15; text-align: center; }
/* Il certificato domina: piu' grande, accentato, sempre riconoscibile. */
.task-nav-hero {
    background: var(--primary-light);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    padding: 13px 4px;
    color: var(--primary-dark);
}
.task-nav-hero .task-nav-icon svg { width: 29px; height: 29px; }
.task-nav-hero .task-nav-label { font-size: var(--text-sm); font-weight: 700; }
.task-nav-hero:hover { background: color-mix(in srgb, var(--primary) 20%, var(--primary-light)); }
.task-nav-hero.task-nav-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.task-nav-hero.task-nav-locked { opacity: 0.5; } /* resta la "meta" visibile anche se non attivo */

/* Il frame e' l'unica area scrollabile dell'app (app-shell). */
.task-frame {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 16px 22px;
}

/* Banner permanente di posizionamento regolatorio (footer fisso
   app-shell). Unico disclaimer dell'app. */
.app-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 22px;
    background: var(--warning-bg);
    color: var(--warning-text);
    border-top: 1px solid var(--border-color);
    line-height: 1.4;
}
.app-footer-icon { width: 26px; height: 26px; flex-shrink: 0; opacity: 0.85; }
.app-footer-text { display: flex; flex-direction: column; gap: 1px; }
.app-footer-line1 { font-size: var(--text-xs); }
.app-footer-line2 { font-size: var(--text-xs); opacity: 0.85; }
.app-footer-line1 strong { font-weight: 700; }
/* v0.9.5.265 — comprimi/riapri nota legale. */
.app-footer-close {
    flex-shrink: 0; align-self: flex-start;
    background: none; border: none; cursor: pointer;
    color: var(--warning-text); opacity: 0.7;
    font-size: var(--text-base); line-height: 1; padding: 2px 8px; border-radius: 4px;
}
.app-footer-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.app-footer-reopen {
    flex: 0 0 auto;
    align-self: stretch;
    background: var(--warning-bg);
    color: var(--warning-text);
    border: none; border-top: 1px solid var(--border-color);
    cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600;
    padding: 4px 22px; text-align: left;
}
.app-footer-reopen:hover { filter: brightness(0.97); }
body.app-shell .app-footer-reopen { flex: 0 0 auto; }

/* In modalita' fasi: una sezione visibile per volta. La sezione
   attiva mostra sempre il body (ignora lo stato accordion open/closed). */
.task-frame .section { display: none; }
.task-frame .section.phase-active {
    display: block;
    max-width: 1040px;
    margin: 0 auto;
}
/* La fase attiva mostra sempre il body, ignorando lo stato accordion
   (section-closed usa max-height:0 + opacity:0 — vanno forzati). */
.task-frame .section.phase-active .section-body {
    display: block;
    max-height: none;
    overflow: visible;
    opacity: 1;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}
/* Il chevron dell'header non serve piu' (niente collasso nelle fasi). */
.task-frame .section .section-chevron { display: none; }
.task-frame .section .section-header { cursor: default; }

/* Responsivo: su schermi stretti la sidebar diventa orizzontale. */
@media (max-width: 720px) {
    .task-layout { flex-direction: column; }
    .task-sidebar {
        flex-direction: row;
        flex: 0 0 auto;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color, var(--border-color));
        border-radius: 8px 8px 0 0;
        position: static;
    }
    .task-frame { padding: 8px 2px; width: 100%; }
}
.settings-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-size-md);
    margin-top: 8px;
}
.consent-status-line {
    font-size: var(--font-size-xs);
    margin-top: 4px;
    color: var(--text-muted, var(--label-text));
}

/* v0.9.5.144 — Richiesta licenza via Hub */
.lic-hub-status {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.04);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-md);
}
.lic-hub-status-text {
    font-weight: 600;
}
.lic-hub-status-text.status-active   { color: var(--success-text, #0a7a0a); }
.lic-hub-status-text.status-pending  { color: #c0680f; }
.lic-hub-status-text.status-revoked  { color: var(--error-text, #c33); }
.lic-hub-status-text.status-expired  { color: var(--text-muted, var(--label-text)); }
.lic-hub-status-text.status-none     { color: var(--text-muted, var(--label-text)); }
.lic-hub-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.lic-hub-message {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-md);
}
.lic-hub-message.lic-msg-ok    { background: rgba(10,122,10,0.10);  color: #0a7a0a; }
.lic-hub-message.lic-msg-error { background: rgba(204,51,51,0.10);  color: #c33; }
.lic-hub-message.lic-msg-info  { background: rgba(0,102,204,0.08);  color: var(--primary, #06c); }
.mono { font-family: var(--font-mono); }

/* Textarea per campi certificato */
.field-cert {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: var(--font-size-min);
    line-height: 1.5;
    resize: vertical;
}

.field-cert:focus {
    outline: 2px solid var(--primary);
    border-color: var(--primary);
}

/* Contatore caratteri */
.char-count {
    text-align: right;
    font-size: var(--font-size-small);
    color: var(--label-text);
    margin-top: var(--spacing-xs);
}

.char-count.warning {
    color: var(--warning-text);
    font-weight: 600;
}

.char-count.error {
    color: var(--error-text);
    font-weight: 700;
}

/* Alert badge */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-min);
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
    border-left: 4px solid var(--error-text);
}

.alert-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-left: 4px solid var(--warning-text);
}

.alert-info {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-left: 4px solid var(--primary);
}

/* Container */
.container {
    max-width: 960px;
    margin: var(--spacing-md) auto;
    padding: 0 var(--spacing-md);
}

/* Hidden utility */
.hidden {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   SEZIONI COLLAPSABILI — layout v7.0 single-page
   Ogni sezione ha: header cliccabile + body animato.
   Piu' sezioni aperte contemporaneamente (non accordion).
   ══════════════════════════════════════════════════════════════ */

.section {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Header sezione: cliccabile, contiene chevron + titolo + badge */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.15s;
}

.section-header:hover {
    background: var(--page-bg);
}

.section-header h2 {
    color: var(--primary-dark);
    font-size: var(--font-size-h2);
    margin: 0;
    flex: 1;
}

/* Chevron: ruota 90° quando chiuso, 0° quando aperto */
.section-chevron {
    font-size: var(--font-size-sm);
    color: var(--label-text);
    transition: transform 0.25s ease;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Badge contatore/stato nell'header */
/* v0.9.5.245 R4 M4 — Tier badge MD (header sezione). Token-driven. */
.section-badge {
    font-size: var(--badge-fs-md);
    font-weight: 600;
    color: var(--label-text);
    padding: var(--badge-py) var(--btn-xs-px);
    border-radius: var(--radius-lg);
    background: var(--bg-muted);
    white-space: nowrap;
}

.section-badge:empty {
    display: none;
}

.section-badge.badge-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.section-badge.badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

/* Body sezione: animazione altezza
   max-height alto per pazienti polipath con molti lab/cond: paz_geri_s10
   con 16 cond + 50+ lab values (Antropometria + Cardiologia + Coagulazione +
   ...) supera i 5000px e veniva troncato dal overflow:hidden. 20000px copre
   anche i casi piu' complessi senza pesare l'animazione. */
.section-body {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    max-height: 20000px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.35s ease, opacity 0.25s ease;
    opacity: 1;
}

/* Sezione chiusa: body nascosto con animazione */
.section-closed .section-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* Sezione aperta: chevron punta in basso */
.section-open .section-chevron {
    transform: rotate(0deg);
}

/* Sezione chiusa: chevron punta a destra */
.section-closed .section-chevron {
    transform: rotate(-90deg);
}

/* Sezione bloccata (non ancora sbloccata dall'analisi) */
.section-locked .section-header {
    opacity: 0.5;
    cursor: not-allowed;
}

.section-locked .section-header:hover {
    background: transparent;
}

/* ══════════════════════════════════════════════════════════════
   DROP ZONE — stile NotebookLM (grande all'avvio)
   Dopo il caricamento si riduce a barra compatta.
   ══════════════════════════════════════════════════════════════ */

.drop-zone {
    border: 3px dashed #B0C4DE;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    background: #FAFCFF;
    cursor: pointer;
}

/* Stato grande (avvio) — occupa spazio visivo */
.drop-zone-large {
    padding: var(--spacing-xl) var(--spacing-lg);
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stato compatto (dopo caricamento file) */
.drop-zone-compact {
    padding: var(--spacing-md);
    min-height: 0;
}

.drop-zone-compact .drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
}
.drop-zone-compact-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.drop-zone-files {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
}
.drop-zone-file-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-sm);
}
.drop-zone-file-row:last-child {
    border-bottom: none;
}
.drop-zone-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    color: var(--body-text);
}
.drop-zone-file-size {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}
.drop-zone-file-remove {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0;
    font-size: var(--text-sm);
}
.drop-zone-file-remove:hover {
    background: var(--danger-bg, #fee);
    color: var(--danger-text, #c00);
    border-color: var(--danger-text, #c00);
}

.drop-zone-compact .drop-zone-icon,
.drop-zone-compact .drop-zone-hint,
.drop-zone-compact .drop-zone-warning {
    display: none;
}

.drop-zone-compact .drop-zone-text {
    font-size: var(--font-size-small);
    margin: 0;
}

/* Stato upload in corso */
.drop-zone.uploading {
    opacity: 0.7;
    pointer-events: none;
}

.drop-zone-compact-text {
    font-weight: 600;
    color: var(--body-text);
}

/* v0.9.5.245 R4 H5 — Tier SM (secondary action). Token-driven. */
.btn-sm {
    padding: var(--btn-sm-py) var(--btn-sm-px);
    font-size: var(--btn-sm-fs);
    min-height: var(--btn-sm-h);
    border-radius: var(--btn-sm-radius);
}

/* Feedback drag-over */
.drop-zone.dragover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.drop-zone-icon {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

.drop-zone-text {
    font-size: var(--font-size-h2);
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: var(--spacing-xs);
}

.drop-zone-hint {
    font-size: var(--font-size-small);
    color: var(--label-text);
    margin-bottom: var(--spacing-md);
}

.drop-zone-buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.drop-zone-warning {
    font-size: var(--font-size-sm);
    color: var(--warning-text);
    margin-top: var(--spacing-sm);
}

/* ══════════════════════════════════════════════════════════════
   BOTTONE ANALIZZA — grande e prominente
   ══════════════════════════════════════════════════════════════ */

.source-actions {
    margin-top: var(--spacing-md);
    text-align: center;
}

.btn-analyze {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 16px 48px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-h2);
    font-weight: 700;
    font-family: var(--font-main);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    min-height: 56px;
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

.btn-analyze:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 40%, transparent);
}

.btn-analyze:active {
    transform: translateY(0);
}

.btn-analyze:disabled {
    background: #B0B0B0;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-new-patient {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px 32px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: var(--font-main);
    background: white;
    color: var(--primary);
    min-height: 48px;
    margin-left: var(--spacing-md);
    transition: background 0.15s, color 0.15s, box-shadow 0.2s;
}

.btn-new-patient:hover {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   BOTTONE RIGENERA — per rigenerare singolo campo certificato
   ══════════════════════════════════════════════════════════════ */

.field-actions {
    display: flex;
    gap: 8px;
}

/* v0.9.5.245 R4 H5 — Tier XS allineato. */
.btn-regen {
    padding: var(--btn-xs-py) var(--spacing-12);
    font-size: var(--btn-sm-fs);
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-text);
    border-radius: var(--btn-xs-radius);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-main);
    transition: background 0.15s;
}

.btn-regen:hover {
    background: var(--warning-text);
    color: #fff;
}

.btn-regen:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* ══════════════════════════════════════════════════════════════
   BOTTONE RIANALIZZA — nella toolbar documenti
   ══════════════════════════════════════════════════════════════ */

.btn-reanalyze {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-text);
}

.btn-reanalyze:hover {
    background: var(--success-text);
    color: white;
}

/* ══════════════════════════════════════════════════════════════
   TESTO REFERTO EDITABILE — pannello inline sotto il documento
   ══════════════════════════════════════════════════════════════ */

.doc-text-panel {
    margin-top: 4px;
    margin-left: 50px;
    padding: var(--spacing-sm);
    background: #F8F9FA;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.doc-text-area {
    width: 100%;
    min-height: 100px;
    max-height: 400px;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: vertical;
    background: white;
}

.doc-text-area:focus {
    outline: 2px solid var(--primary);
    border-color: var(--primary);
}

.doc-text-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--label-text);
}

/* v0.9.5.245 R1 H4 — rimosso .btn-doc-text duplicato (grigio neutro).
   La definizione canonica (verde #2E7D32 su #E8F5E9) e' alla linea ~2482
   e vinceva comunque per cascade. La versione grigia era dead code che
   confondeva chi leggeva il CSS. */

/* v0.9.5.245 R4 M4 — Tier badge XS (alert inline). */
.doc-alert-badge {
    font-size: var(--badge-fs);
    font-weight: var(--badge-weight);
    padding: var(--badge-py) var(--spacing-sm);
    border-radius: var(--spacing-sm);
    white-space: nowrap;
}

.doc-alert-oversize {
    background: var(--error-bg);
    color: var(--error-text);
}

.doc-alert-convert {
    background: var(--info-bg);
    color: var(--info-text);
}

/* Header actions */
.header-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* v0.9.5.245 R4 H5 — Tier ICON canonico (icon-only square). */
.btn-icon {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: var(--btn-icon-radius);
    color: white;
    cursor: pointer;
    padding: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-icon:hover {
    background: rgba(255,255,255,0.2);
    border-color: white;
}

.btn-shutdown {
    border-color: rgba(255,100,100,0.5);
    margin-left: 8px;
}
.btn-shutdown:hover {
    background: rgba(220,50,50,0.3);
    border-color: #ff6b6b;
}

.version {
    font-size: var(--font-size-small);
    opacity: 0.8;
}

/* File list */
.file-list {
    margin-top: var(--spacing-md);
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--page-bg);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-min);
}

.file-name {
    font-weight: 600;
}

.file-size {
    color: var(--label-text);
}

/* Field groups */
.field-group {
    margin-bottom: var(--spacing-lg);
}

.field-label {
    display: block;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-min);
}

/* Button rows */
.btn-row {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.copy-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: center;
}

/* Checkbox group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-min);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.checkbox-label:hover {
    background: var(--page-bg);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.cb-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.cb-motivo {
    font-size: var(--font-size-sm);
    color: var(--label-text);
    font-style: italic;
    max-width: 400px;
}

.cb-motivo.cb-suggerito {
    color: var(--primary);
    font-weight: 500;
}

.cb-motivo.cb-dubbio {
    color: var(--warning-text);
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   DIRECTORY INPUT — Step 1
   ══════════════════════════════════════════════════════════════ */

.dir-input-row {
    display: flex;
    gap: var(--spacing-sm);
}

.dir-input {
    flex: 1;
    min-width: 0;
    padding: 12px var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: var(--font-size-min);
    text-overflow: ellipsis;
}

.dir-input:focus {
    outline: 2px solid var(--primary);
    border-color: var(--primary);
}

/* .provincia-select rimosso in 0.9.0.1: selettore provincia eliminato. */

.options-row {
    margin-top: var(--spacing-md);
}

.whodas-suggest-banner {
    margin: var(--spacing-sm) 0;
    margin-left: 28px;
    padding: 8px 12px;
    background: #FFF8E1;
    border: 1px solid #FFB300;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-sm);
}
.whodas-suggest-banner .whodas-suggest-text { flex: 1; color: #5D4037; }
.whodas-suggest-banner .btn-toolbar {
    background: #FFB300; color: #fff; border: none; padding: 4px 16px;
    border-radius: var(--radius); cursor: pointer; font-weight: 600; white-space: nowrap;
}
.whodas-suggest-banner .btn-toolbar:hover { background: #FF8F00; }

/* Banner permanente scadenza licenza (<30gg o scaduta) */
.lic-expiry-banner {
    margin: 0;
    padding: 8px 16px;
    background: #FFF3E0;
    border-bottom: 2px solid #FB8C00;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--text-sm);
    color: #5D4037;
}
.lic-expiry-banner.hidden { display: none; }
.lic-expiry-banner.expired {
    background: #FFEBEE;
    border-bottom-color: #C62828;
    color: #B71C1C;
}
#lic-expiry-banner-text { flex: 1; font-weight: 500; }
.lic-expiry-banner-cta {
    background: #FB8C00; color: #fff; border: none; padding: 8px 16px;
    border-radius: var(--radius); cursor: pointer; font-weight: 600;
    white-space: nowrap;
}
.lic-expiry-banner-cta:hover { background: #EF6C00; }
.lic-expiry-banner.expired .lic-expiry-banner-cta { background: #C62828; }
.lic-expiry-banner.expired .lic-expiry-banner-cta:hover { background: #B71C1C; }

.domicilio-row {
    margin-top: var(--spacing-sm);
    margin-left: 28px;
}


/* v0.9.5.245 R5 L2 — .hw-badge rimosso (era hardware-badge SLM, dead da v9).
   .provincia-badge / .provincia-attiva rimossi in 0.9.0.1. */

/* v0.9.5.248 R8 — Banner ultra-70enni (Mess. INPS 1750 del 27/05/2026).
   Alert non bloccante, palette brand info. Visibile in sezione Documenti
   quando profilo.eta >= 70. */
.elderly-70-alert {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-12) var(--spacing-md);
    background: var(--info-bg);
    border-left: 4px solid var(--info-text);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-12);
    color: var(--body-text);
    font-size: var(--font-size-small);
    line-height: 1.45;
}
.elderly-70-alert.hidden { display: none; }
.elderly-70-alert-icon {
    flex-shrink: 0;
    color: var(--info-text);
    margin-top: 2px;
}
.elderly-70-alert-body { flex: 1; }
.elderly-70-alert-body strong:first-child {
    display: block;
    color: var(--info-text);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-md);
}
.elderly-70-alert-body p {
    margin: var(--spacing-xs) 0;
}
.elderly-70-alert-body ol {
    margin: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-md);
    padding-left: var(--spacing-md);
}
.elderly-70-alert-body ol li {
    margin-bottom: var(--spacing-2xs);
}
.elderly-70-alert-note {
    margin-top: var(--spacing-sm) !important;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-light);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* v0.9.5.250 R10 — Suggerimento risposte 2 domande Mess. INPS 1750 */
.elderly-70-question {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm) var(--spacing-12);
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}
.elderly-70-q-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.elderly-70-q-num {
    font-weight: 700;
    color: var(--info-text);
    font-size: var(--font-size-md);
    flex-shrink: 0;
}
.elderly-70-q-text {
    flex: 1;
    min-width: 280px;
}
.elderly-70-answer {
    flex-shrink: 0;
    padding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--font-size-md);
    letter-spacing: 0.04em;
}
.elderly-70-answer-yes {
    background: var(--success-text);
    color: var(--badge-fg-on-dark);
}
.elderly-70-answer-no {
    background: var(--label-text);
    color: var(--badge-fg-on-dark);
}
.elderly-70-reasons {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    list-style: disc;
}
.elderly-70-reasons li { margin-bottom: var(--spacing-2xs); }
.elderly-70-icd {
    background: var(--bg-muted);
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xxs);
}
.elderly-70-cat {
    font-style: italic;
    color: var(--primary);
    font-size: var(--font-size-xxs);
}
.elderly-70-routing {
    margin-top: var(--spacing-sm) !important;
    padding: var(--spacing-sm) var(--spacing-12);
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
}
.elderly-70-routing-old { color: var(--warning-text); }
.elderly-70-routing-new { color: var(--success-text); }
/* v0.9.5.280 — routing incerto: provincia di residenza non determinabile dai referti */
.elderly-70-routing-uncertain { color: var(--primary-dark); }

/* v0.9.5.254 R14 — Badge provincia sperimentale (gating banner Mess. 1750) */
.elderly-70-prov-badge {
    display: inline-block;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    padding: var(--badge-py) var(--btn-xs-px);
    border-radius: var(--badge-radius);
    font-size: var(--badge-fs-sm);
    font-weight: var(--badge-weight);
    line-height: 1.4;
    max-width: 100%;
    word-wrap: break-word;
}
.elderly-70-prov-yes {
    background: var(--success-bg);
    color: var(--success-text);
}
.elderly-70-prov-no {
    background: var(--warning-bg);
    color: var(--warning-text);
}
/* v0.9.5.280 — provincia non rilevata dai referti: stato neutro "da verificare" */
.elderly-70-prov-unknown {
    background: var(--page-bg);
    color: var(--primary-dark);
    border: 1px solid var(--border-color);
}

/* v0.9.5.255 R15 B1 — Avviso range eta L.118/1971 nel widget Invalidita.
   Pazienti <18 (indennita' mensile assistenza minori L.289/1990) o >67
   (assegno sociale L.335/1995) sono fuori dal range dell'invalidita'
   civile economica L.118/1971. */
.invalidita-eta-warning {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-12);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--warning-text);
    background: var(--warning-bg);
    color: var(--body-text);
    font-size: var(--font-size-md);
    line-height: 1.45;
}
.invalidita-eta-warning strong { color: var(--warning-text); }
.invalidita-eta-warning-minore { border-left-color: var(--info-text); background: var(--info-bg); }
.invalidita-eta-warning-minore strong { color: var(--info-text); }

/* v0.9.5.257 R17 — Benefici potenzialmente applicabili (audit MEDIUM
   F3/L68-1/L118-3). Lista scaglioni IT% + L.18/1980 con riferimenti
   normativi. */
.invalidita-benefici {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--success-bg);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--success-text);
    color: var(--body-text);
    font-size: var(--font-size-md);
    line-height: 1.5;
}
.invalidita-benefici summary {
    cursor: pointer;
    color: var(--success-text);
    font-size: var(--font-size-md);
    padding: var(--spacing-2xs) 0;
}
.invalidita-benefici summary strong { color: var(--success-text); }
.invalidita-benefici-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 var(--spacing-sm) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}
.invalidita-benefici-item {
    padding: var(--spacing-2xs) var(--spacing-sm);
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
}
.invalidita-benefici-item strong { color: var(--primary-dark); margin-right: var(--spacing-sm); }
.invalidita-benefici-item-disabled {
    opacity: 0.55;
    text-decoration: line-through;
}

/* v0.9.5.258 R18 #4 — Chip benefici applicabili (lista compatta). */
.invalidita-benefici-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}
.invalidita-benefici-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-2xs) var(--spacing-sm);
    background: var(--card-bg);
    border: 1px solid var(--success-text);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    color: var(--body-text);
}
.invalidita-benefici-chip strong {
    color: var(--success-text);
    font-weight: var(--badge-weight);
    font-size: var(--font-size-xs);
    background: var(--success-bg);
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
}
.invalidita-benefici-note {
    margin-top: var(--spacing-sm) !important;
    padding: var(--spacing-sm);
    background: var(--info-bg);
    border-radius: var(--radius-sm);
    color: var(--info-text);
    font-size: var(--font-size-sm);
    font-style: italic;
}
.invalidita-benefici-disclaimer {
    margin-top: var(--spacing-sm) !important;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-style: italic;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-light);
}

/* v0.9.5.256 R16 — Wizard onboarding licenza primo avvio.
   Overlay modale a 3 step (Machine ID, richiesta, upload .lic).
   Pattern allineato a .disclaimer-overlay (R5 H6 overlay unificato). */
.license-wizard-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--overlay-backdrop-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--overlay-padding);
}
.license-wizard-overlay.hidden { display: none; }
.license-wizard-box {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.license-wizard-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
}
.license-wizard-title {
    font-size: var(--font-size-h2);
    color: var(--primary-dark);
    font-weight: 700;
}
.license-wizard-subtitle {
    font-size: var(--font-size-small);
    color: var(--text-muted);
}

/* Stepper */
.license-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    list-style: none;
    padding: 0;
    margin: 0;
}
.license-wizard-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xs);
    opacity: 0.5;
}
.license-wizard-step-active { opacity: 1; }
.license-wizard-step-done { opacity: 0.8; }
.license-wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--text-muted);
    font-weight: var(--badge-weight);
    font-size: var(--font-size-md);
}
.license-wizard-step-active .license-wizard-step-num {
    background: var(--primary);
    color: var(--badge-fg-on-dark);
}
.license-wizard-step-done .license-wizard-step-num {
    background: var(--success-text);
    color: var(--badge-fg-on-dark);
}
.license-wizard-step-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.license-wizard-step-active .license-wizard-step-label { color: var(--primary-dark); }

/* Pane (step content) */
.license-wizard-pane { display: none; }
.license-wizard-pane-active { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.license-wizard-pane p {
    margin: 0;
    color: var(--body-text);
    font-size: var(--font-size-md);
    line-height: 1.5;
}

/* Step 1: Machine ID box */
.license-wizard-mid-box {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    padding: var(--spacing-sm) var(--spacing-12);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.license-wizard-mid-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.license-wizard-mid {
    font-family: var(--font-mono);
    font-size: var(--font-size-md);
    color: var(--primary-dark);
    word-break: break-all;
}

/* Step 2: form */
.license-wizard-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-sm);
}
.license-wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}
.license-wizard-mail-btn { text-decoration: none; }

/* Notes */
.license-wizard-note {
    margin-top: var(--spacing-xs) !important;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.45;
}
.license-wizard-note-faded { font-size: var(--font-size-xs); }
.license-wizard-note a { color: var(--primary); }

/* v0.9.5.265 Fase 1d — trial-first nel wizard. */
.license-wizard-trial { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.license-wizard-trial-btn { width: 100%; font-weight: 700; padding: var(--spacing-sm) var(--spacing-md); }
.license-wizard-toggle-paid {
    margin-top: var(--spacing-xs);
    background: none; border: none; cursor: pointer;
    color: var(--label-text); font: inherit; font-size: var(--font-size-sm);
    text-decoration: underline; align-self: center;
}
.license-wizard-toggle-paid:hover { color: var(--primary); }

/* v0.9.5.300 — 3 CTA equivalenti + selettore ciclo + pane attesa pagamento. */
.license-wizard-ciclo {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) 0;
    flex-wrap: wrap;
}
.license-wizard-ciclo-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--body-text);
}
.license-wizard-ciclo-opt small { color: var(--text-muted); }
.license-wizard-cta-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.license-wizard-cta {
    width: 100%;
    font-weight: 700;
    padding: var(--spacing-sm) var(--spacing-md);
}
.license-wizard-pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
}
.license-wizard-pay-title {
    font-weight: 600;
    margin: 0;
}
.license-wizard-pay-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: license-wizard-pay-spin 1s linear infinite;
}
@keyframes license-wizard-pay-spin {
    to { transform: rotate(360deg); }
}

/* Footer navigation */
.license-wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}
.license-wizard-skip {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    margin-left: auto;
    margin-right: var(--spacing-sm);
}
.license-wizard-skip:hover {
    background: var(--bg-muted);
    color: var(--body-text);
}

/* v0.9.5.259 R19 — Toggle tipo certificato (Nuovo D.Lgs 62/2024 vs
   Vecchio L.104/1992). */
.cert-mode-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-12);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.cert-mode-label {
    font-weight: 600;
    color: var(--primary-dark);
    font-size: var(--font-size-md);
}
.cert-mode-btn {
    padding: var(--btn-sm-py) var(--btn-sm-px);
    border-radius: var(--btn-sm-radius);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-main);
}
.cert-mode-btn:hover { background: var(--page-bg); }
.cert-mode-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.cert-mode-hint {
    flex-basis: 100%;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-style: italic;
    margin-top: var(--spacing-2xs);
}

/* v0.9.5.258 R18 #9 — Badge CF estero/tecnico nel pannello anagrafica */
.anagrafica-cf-badge {
    display: block;
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.4;
}
.anagrafica-cf-badge-tecnico {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-left: 4px solid var(--warning-text);
}
.anagrafica-cf-badge-estero {
    background: var(--info-bg);
    color: var(--info-text);
    border-left: 4px solid var(--info-text);
}

/* v0.9.5.252 R12 — Pannello anagrafica estratta dai referti */
.anagrafica-panel {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-12) var(--spacing-md);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.anagrafica-panel.hidden { display: none; }
.anagrafica-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
}
.anagrafica-title {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: var(--font-size-md);
}
.anagrafica-subtitle {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
}
.anagrafica-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-sm) var(--spacing-md);
}
.anagrafica-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.anagrafica-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.anagrafica-value {
    font-size: var(--font-size-md);
    color: var(--body-text);
    font-weight: 500;
    word-break: break-word;
}

/* v0.9.5.254 R14 — Widget suggerimenti vecchio cert L.104/1992.
   Pannello in fondo alla sezione Certificato (gemello "bottom" del
   banner Mess. INPS 1750 in sezione Documenti). Palette primary-light
   per differenziarlo dal banner info del banner top. */
/* v0.9.5.264 — "Materializzazione" del flusso magico: gli elementi rilevati
   dai referti (patologie/ICD-9) compaiono in cascata, come se il quadro
   clinico si componesse da solo. Stagger via --ai-i impostato inline.
   prefers-reduced-motion rispettato (accessibilita'). */
@keyframes aiMaterialize {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.ai-materialize {
    animation: aiMaterialize 0.42s var(--ease-standard) both;
    animation-delay: calc(var(--ai-i, 0) * 55ms);
}
@media (prefers-reduced-motion: reduce) {
    .ai-materialize { animation: none; }
}

/* v0.9.5.265 — feedback al cambio tipo certificato: i campi della nuova
   modalità lampeggiano brevemente per segnalare la riconfigurazione. */
@keyframes certModeFlash {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); }
    30%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.cert-mode-flash {
    animation: certModeFlash 1.3s ease-out both;
    border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: reduce) { .cert-mode-flash { animation: none; } }

/* v0.9.5.264 — PROVENIENZA ILLUMINATA (effetto WOW). Passando sopra una
   patologia rilevata, compare una card con la FRASE ESATTA del referto da cui
   proviene, con la keyword evidenziata. La "magia" e' verificabile: ogni
   patologia mostra la sua fonte letterale. Anti-allucinazione reso spettacolo. */
.profilo-cond-item.ai-evidence-active {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
    transition: box-shadow 0.18s ease, outline-color 0.18s ease;
}
.ai-evidence-card {
    position: fixed;
    z-index: 9999;
    max-width: 400px;
    min-width: 240px;
    padding: var(--spacing-12) var(--spacing-md);
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--primary) 24%, transparent),
                0 2px 10px rgba(0, 0, 0, 0.28);
    color: var(--body-text);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-6px) scale(0.98);
    transition: opacity 0.16s ease, transform 0.16s var(--ease-standard);
}
.ai-evidence-card.ai-evidence-show { opacity: 1; transform: translateX(0) scale(1); }
.ai-evidence-card-head {
    display: flex; align-items: center; gap: var(--spacing-sm);
    flex-wrap: wrap; margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-2xs);
    border-bottom: 1px solid var(--border-light);
}
.ai-evidence-doc { font-weight: 700; color: var(--primary-dark); }
.ai-evidence-sez {
    font-size: var(--font-size-xs); color: var(--label-text);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ai-evidence-frase { font-style: italic; color: var(--body-text); }
.ai-evidence-frase .ai-evidence-kw {
    background: color-mix(in srgb, var(--primary) 32%, transparent);
    color: var(--body-text);
    padding: 0 3px; border-radius: 3px; font-style: normal; font-weight: 700;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent);
}
.ai-evidence-foot {
    margin-top: var(--spacing-sm); font-size: var(--font-size-xs);
    color: var(--label-text); display: flex; align-items: center; gap: 8px;
}

/* v0.9.5.264 — Anteprima viva del CERTIFICATO (cuore dell'app). La Diagnosi
   appare come testo illuminato: i termini clinici rilevati sono evidenziati e
   l'hover ne mostra la fonte. Click = passa al textarea per modificare. */
.cert-edit-hidden { display: none !important; }
.cert-evidence {
    position: relative;
    min-height: 64px;
    padding: var(--spacing-12) var(--spacing-md);
    padding-right: 130px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 6%, var(--card-bg)) 0%, var(--card-bg) 100%);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    color: var(--body-text);
    font-size: var(--font-size-md);
    line-height: 1.6;
    cursor: text;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.cert-evidence:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.cert-evidence-edit-hint {
    position: absolute; top: 8px; right: 10px;
    font-size: var(--font-size-xs); color: var(--label-text);
    opacity: 0; transition: opacity 0.18s ease; pointer-events: none;
}
.cert-evidence:hover .cert-evidence-edit-hint { opacity: 1; }
.cert-evidence-empty { color: var(--label-text); }
/* Termine clinico illuminato: sottolineatura "evidenza" + glow su hover. */
.cert-term {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    border-radius: 3px 3px 0 0;
    padding: 0 2px;
    cursor: pointer; /* v0.9.5.273 — click = apri il referto-fonte */
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.cert-term:hover, .cert-term:focus {
    background: color-mix(in srgb, var(--primary) 26%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
    outline: none;
}

/* v0.9.5.270 Fase 4 — logo "reclaim-AI" + splash di avvio. */
.app-logo { display: block; flex-shrink: 0; }
.app-splash {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: var(--page-bg);
    transition: opacity 0.46s ease;
}
.app-splash-hide { opacity: 0; pointer-events: none; }
.app-splash-inner { text-align: center; animation: aiMaterialize 0.5s var(--ease-standard) both; }
.app-splash-logo { width: 92px; height: 92px; display: block; margin: 0 auto; }
.app-splash-name { margin-top: 12px; font-size: var(--text-display); font-weight: 800; color: var(--primary-dark); letter-spacing: -1px; line-height: 1; }
.app-splash-sub { margin-top: 4px; font-size: var(--text-sm); font-weight: 600; color: var(--label-text); letter-spacing: 0.4px; }
.app-splash-tag { margin-top: 8px; font-size: var(--text-xs); color: var(--label-text); opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .app-splash-inner { animation: none; } }

/* v0.9.5.267 Fase 2 — superficie invalidità minimale + "Come ho calcolato". */
.invalidita-orient { margin: 0 0 8px; line-height: 1.45; }
.invalidita-affid { margin: 0; font-size: var(--font-size-sm); color: var(--label-text); }
.invalidita-come-meta {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-sm); color: var(--label-text);
}
.invalidita-come-calcolato > summary { font-weight: 700; cursor: pointer; }

/* v0.9.5.265 Fase 1b — barra azione primaria del certificato. */
.cert-export-bar {
    display: flex; align-items: center; gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-light);
}
.cert-export-btn {
    font-size: var(--font-size-base);
    font-weight: 700;
    padding: var(--spacing-sm) var(--spacing-lg);
}
.cert-export-hint { color: var(--label-text); font-size: var(--font-size-sm); }

.vecchio-cert-panel {
    margin-top: var(--spacing-md);
    padding: var(--spacing-12) var(--spacing-md);
    background: var(--primary-light);
    border-left: 4px solid var(--primary-dark);
    border-radius: var(--radius-md);
    color: var(--body-text);
    font-size: var(--font-size-md);
    line-height: 1.45;
}
.vecchio-cert-panel.hidden { display: none; }
.vecchio-cert-header {
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light);
}
.vecchio-cert-header strong {
    color: var(--primary-dark);
    font-size: var(--font-size-md);
}
.vecchio-cert-subtitle {
    display: block;
    margin-top: var(--spacing-2xs);
    color: var(--label-text);
    font-size: var(--font-size-sm);
    font-weight: 400;
}
.vecchio-cert-body { display: flex; flex-direction: column; gap: var(--spacing-md); }
.vecchio-cert-section { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.vecchio-cert-section-title {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vecchio-cert-finalita-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.vecchio-cert-finalita-item {
    padding: var(--spacing-sm) var(--spacing-12);
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}
.vecchio-cert-chip {
    display: inline-block;
    padding: var(--spacing-2xs) var(--spacing-sm);
    background: var(--primary-dark);
    color: var(--badge-fg-on-dark);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--font-size-md);
    letter-spacing: 0.02em;
}
.vecchio-cert-question {
    padding: var(--spacing-sm) var(--spacing-12);
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}
.vecchio-cert-q-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.vecchio-cert-q-text { flex: 1; min-width: 280px; }
.vecchio-cert-answer {
    flex-shrink: 0;
    padding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--font-size-md);
    letter-spacing: 0.04em;
}
.vecchio-cert-answer-yes {
    background: var(--success-text);
    color: var(--badge-fg-on-dark);
}
.vecchio-cert-answer-no {
    background: var(--label-text);
    color: var(--badge-fg-on-dark);
}
.vecchio-cert-answer-unknown {
    background: var(--warning-text);
    color: var(--badge-fg-on-dark);
}
.vecchio-cert-reasons {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    list-style: disc;
}
.vecchio-cert-reasons li { margin-bottom: var(--spacing-2xs); }
.vecchio-cert-note {
    margin: var(--spacing-sm) 0 0 0 !important;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-light);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* v0.9.5.245 R4 M4 — Tier badge SM pill (header licenza). */
.license-badge {
    padding: var(--spacing-xs) var(--btn-xs-px);
    border-radius: var(--spacing-lg); /* 24px = pill perfetto */
    font-size: var(--badge-fs-sm);
    font-weight: var(--badge-weight);
    white-space: nowrap;
    cursor: pointer;
}
.license-badge.trial {
    background: var(--warning-bg);
    color: var(--warning-text);
}
.license-badge.active {
    background: var(--success-bg);
    color: var(--success-text);
}
.license-badge.expired {
    background: var(--error-bg);
    color: var(--error-text);
    animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* License settings tab */
.license-status-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.license-status-card.trial {
    border-left: 4px solid var(--warning-text);
}
.license-status-card.active {
    border-left: 4px solid var(--success-text);
}
.license-status-card.expired {
    border-left: 4px solid var(--error-text);
}
.license-status-label {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    margin-bottom: 2px;
}
.license-status-value {
    font-size: var(--font-size-base);
    font-weight: 600;
    word-break: break-all;
}
.license-mid {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    background: var(--bg-muted);
    padding: 8px 8px;
    border-radius: 4px;
    -webkit-user-select: all;
    user-select: all;
    cursor: pointer;
    word-break: break-all;
    line-height: 1.4;
}
.license-request-info {
    font-size: var(--font-size-md);
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
}
.license-request-mail {
    color: var(--primary);
    text-decoration: none;
}
.license-request-mail:hover {
    text-decoration: underline;
}
.license-request-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}
.license-request-input {
    padding: 8px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: var(--font-size-md);
    font-family: inherit;
    background: var(--bg);
    color: var(--text);
}
.license-request-input:focus {
    outline: none;
    border-color: var(--primary);
}
.license-request-btn {
    width: 100%;
}
@media (max-width: 600px) {
    .license-request-form {
        grid-template-columns: 1fr;
    }
}
.license-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.license-upload-area:hover,
.license-upload-area.license-upload-hover {
    border-color: var(--primary);
    background: var(--primary-bg);
}
.license-upload-hint {
    margin-top: 8px;
    color: var(--text-muted);
}
.license-detail-text {
    font-size: var(--text-sm);
}

/* Spinner */
.spinner-container {
    text-align: center;
    padding: var(--spacing-lg);
}

.spinner-container p {
    margin-top: var(--spacing-md);
    color: var(--label-text);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 0.8s linear infinite;
}

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

/* ══════════════════════════════════════════════════════════════
   DOCUMENTI TIMELINE — Step 2
   ══════════════════════════════════════════════════════════════ */

.docs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 8px;
}

/* Gruppo timeline: nodo-data + documenti */
.tl-group {
    position: relative;
    padding-left: 28px;
    padding-bottom: var(--spacing-md);
}

/* Linea verticale che connette i nodi */
.tl-group::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-light);
}

.tl-group.tl-group-last::before {
    bottom: 50%;
}

/* Riga nodo + data */
.tl-node-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 8px;
    position: relative;
}

/* Nodo circolare sulla linea */
.tl-node {
    position: absolute;
    left: -24px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: var(--card-bg);
    z-index: 1;
    flex-shrink: 0;
}

.tl-node-ok {
    background: var(--primary);
    border-color: var(--primary);
}

.tl-node-expired {
    background: var(--warning-text);
    border-color: var(--warning-text);
}

.tl-node-nodate {
    background: var(--border-color);
    border-color: #AAA;
}

/* Etichetta data */
.tl-date {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: 0.3px;
}

.tl-date-nodate {
    color: var(--label-text);
    font-style: italic;
}

.tl-date-expired {
    color: var(--warning-text);
}

.tl-expired-badge {
    font-size: var(--font-size-xxs);
    font-weight: 600;
    color: var(--warning-text);
    background: var(--warning-bg);
    padding: 1px 8px;
    border-radius: 8px;
    vertical-align: middle;
}

/* Container documenti sotto il nodo */
.tl-docs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.doc-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px var(--spacing-md);
    background: var(--page-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    border-left: 3px solid transparent;
}

.doc-valid {
    border-left-color: var(--success-text);
}

.doc-invalid {
    border-left-color: var(--error-text);
    background: var(--error-bg);
}

.doc-status {
    font-size: var(--text-base);
    font-weight: 700;
    width: 24px;
    text-align: center;
}

.doc-valid .doc-status { color: var(--success-text); }
.doc-invalid .doc-status { color: var(--error-text); }

.doc-type-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--primary-dark);
    vertical-align: -2px;
    margin-right: 4px;
}

.doc-item.doc-excluded .doc-type-icon {
    opacity: 0.4;
}

.doc-date-inline {
    font-size: 0.8em;
    color: var(--text-secondary, var(--label-text));
    min-width: 70px;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: all;
    user-select: all;
    padding: 1px 4px;
    border-radius: 3px;
    transition: background 0.15s;
}
.doc-date-inline:hover {
    background: var(--surface-alt, var(--page-bg));
}
.doc-date-inline.copied {
    background: #d4edda;
    color: #155724;
}
.doc-type-label {
    font-weight: 600;
    color: var(--primary-dark);
    white-space: nowrap;
}

.doc-name {
    font-weight: 400;
    font-size: var(--font-size-sm);
    color: var(--label-text);
    flex: 1;
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    word-break: break-all;
}

.doc-item.doc-used {
    border-left-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--page-bg));
}

.doc-used-badge {
    font-size: var(--font-size-xxs);
    font-weight: 700;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

/* v0.9.5.245 R4 H5 — Tier XS allineato. */
.btn-doc-view {
    font-size: var(--btn-xs-fs);
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--primary);
    padding: var(--btn-xs-py) var(--spacing-sm);
    border-radius: var(--btn-xs-radius);
    cursor: pointer;
    white-space: nowrap;
}

.btn-doc-view:hover {
    background: var(--primary);
    color: white;
}

.doc-meta {
    color: var(--label-text);
    font-size: var(--font-size-sm);
}

.doc-error {
    color: var(--error-text);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* Document management header + toolbar */
.docs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.docs-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* v0.9.5.245 R4 H5 — Tier XS allineato. */
.btn-toolbar {
    font-size: var(--btn-xs-fs);
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid var(--primary);
    padding: var(--btn-xs-py) var(--btn-xs-px);
    border-radius: var(--btn-xs-radius);
    cursor: pointer;
    font-family: var(--font-main);
}

.btn-toolbar:hover {
    background: var(--primary);
    color: white;
}

.docs-counter {
    font-size: var(--font-size-sm);
    color: var(--label-text);
    font-weight: 600;
    margin-left: 4px;
}

/* Checkbox inclusione documento */
.doc-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* v0.9.5.245 R4 M4 — Tier badge XS (formato file). 9px e' sotto la scala
   ma intenzionale per non rubare spazio al filename. */
.doc-format-badge {
    font-size: var(--text-xs);
    font-weight: var(--badge-weight);
    padding: var(--badge-py) var(--spacing-sm);
    border-radius: var(--spacing-sm);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.format-pdf-nativo {
    background: var(--success-bg);
    color: var(--success-text);
}

.format-pdf-scan {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.format-docx, .format-rtf {
    background: #E3F2FD;
    color: #1565C0;
}

.format-immagine {
    background: #F3E5F5;
    color: #7B1FA2;
}

.format-altro {
    background: var(--page-bg);
    color: var(--label-text);
}

/* Documento escluso (deselezionato) */
.doc-item.doc-excluded {
    opacity: 0.45;
    border-left-color: var(--border-color) !important;
    background: #FAFAFA;
}

.doc-item.doc-excluded .doc-name,
.doc-item.doc-excluded .doc-type-label {
    text-decoration: line-through;
}

/* Bottone conversione su singolo doc */
/* v0.9.5.245 R4 H5+M5 — Tier XS + palette brand info. */
.btn-doc-convert {
    font-size: var(--font-size-xxs);
    font-weight: 600;
    color: var(--info-text);
    background: var(--info-bg);
    border: 1px solid var(--info-text);
    padding: var(--btn-xs-py) var(--spacing-sm);
    border-radius: var(--btn-xs-radius);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-main);
}

.btn-doc-convert:hover {
    background: var(--info-text);
    color: white;
}

/* v0.9.5.245 R4 H5 — Tier XS allineato. Palette viola mantenuta come
   accento categoriale (CDA2 = struttura formale, distinto da text/convert). */
.btn-doc-cda2 {
    font-size: var(--font-size-xxs);
    font-weight: 600;
    color: #6A1B9A;
    background: #F3E5F5;
    border: 1px solid #6A1B9A;
    padding: var(--btn-xs-py) var(--spacing-sm);
    border-radius: var(--btn-xs-radius);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-main);
}

.btn-doc-cda2:hover {
    background: #6A1B9A;
    color: white;
}

/* v0.9.5.245 R4 H5+M5 — Tier XS + palette brand success. */
.btn-doc-text {
    font-size: var(--font-size-xxs);
    font-weight: 600;
    color: var(--success-text);
    background: var(--success-bg);
    border: 1px solid var(--success-text);
    padding: var(--btn-xs-py) var(--spacing-sm);
    border-radius: var(--btn-xs-radius);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-main);
}

.btn-doc-text:hover {
    background: var(--success-text);
    color: white;
}

/* Alert dimensione > 2MB */
.doc-size-alert {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--warning-text);
    background: var(--warning-bg);
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Panel testo estratto (inline sotto il doc-item) */
.doc-text-panel {
    width: 100%;
    margin-top: var(--spacing-sm);
    grid-column: 1 / -1;
}

.doc-text-edit {
    width: 100%;
    min-height: 120px;
    max-height: 400px;
    padding: var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--body-text);
    background: #FAFAFA;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    resize: vertical;
    overflow-y: auto;
}

.doc-text-edit:focus {
    border-color: var(--primary);
    /* Focus indicator WCAG 2.4.7 + 2.4.11: box-shadow con colore
       --primary (contrasto >= 3:1 su bianco). --primary-light era
       troppo pallido per essere visibile. */
    outline: none;
    box-shadow: 0 0 0 2px var(--primary);
}

.doc-text-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-size: var(--font-size-sm);
    color: var(--label-text);
}

.doc-text-count {
    font-weight: 600;
}

.doc-text-hint {
    font-style: italic;
}

.doc-text-loading,
.doc-text-error {
    font-size: var(--font-size-md);
    padding: var(--spacing-sm);
    display: block;
}

.doc-text-loading {
    color: var(--label-text);
}

.doc-text-error {
    color: var(--error-text);
}

.doc-text-saved {
    color: var(--success-text, #2E7D32);
    font-weight: 600;
    transition: opacity 0.3s;
}

.doc-text-saved.hidden {
    display: none;
}

/* doc-item deve essere flex-wrap per il text panel sotto */
.doc-item {
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   PATOLOGIE-ALLEGATI — Pannello integrato
   ══════════════════════════════════════════════════════════════ */

.patologie-allegati {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.pa-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    background: var(--card-bg);
}
.pa-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}
.pa-panel-title {
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--primary-dark);
}
.pa-panel-count {
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-sm);
    font-weight: 700;
}
.pa-patologie-drop {
    min-height: 60px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    transition: border-color 0.2s, background 0.2s;
}
.pa-patologie-drop.icd9-drop-zone-highlight {
    border-color: var(--primary);
    background: var(--primary-light);
}
.pa-altre-header {
    font-weight: 600;
    font-size: var(--font-size-small);
    color: var(--label-text);
    margin: var(--spacing-sm) 0 var(--spacing-xs);
}
.pa-altre-drop {
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
    min-height: 40px;
    margin-bottom: var(--spacing-sm);
}

/* Card patologia nel pannello integrato */
.pa-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    margin-bottom: 8px;
    transition: box-shadow 0.15s;
}
.pa-card:hover { box-shadow: var(--shadow-sm); }
.pa-card-miss {
    border-left-color: var(--error-text);
    background: #fef7f5;
}

/* v0.9.5.149 — codici eccedenti il limite portale (dal 6° in poi):
   visivamente distinti dai primi 5 che entrano nel certificato INPS. */
.pa-card-extra {
    border-left-color: var(--border-color);
    background: var(--page-bg);
}
.pa-card-extra .profilo-cond-label,
.pa-card-extra .profilo-cond-code { opacity: 0.72; }
.pa-extra-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 16px 2px 8px;
    color: var(--label-text);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pa-extra-divider::before,
.pa-extra-divider::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--border-color);
}
.pa-extra-divider span { padding: 0 12px; }

.pa-card-main {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.pa-card-main .profilo-cond-code {
    flex-shrink: 0;
}
.pa-card-main .profilo-cond-label {
    flex: 1;
    min-width: 0;
}
.pa-card-main .icd9-chip-drag {
    flex-shrink: 0;
    cursor: grab;
    color: var(--label-text);
    font-size: var(--text-sm);
}
.pa-card-main .icd9-chip-remove {
    flex-shrink: 0;
}
.pa-card-main .icd9-chip-copy,
.icd9-chip-copy {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--text-muted);
    line-height: 1;
}
.pa-card-main .icd9-chip-copy:hover,
.icd9-chip-copy:hover {
    background: var(--bg-muted);
    color: var(--text);
    border-color: var(--primary);
}

/* Documenti dentro la card — layout tabellare */
.pa-card .profilo-cond-sources-list {
    margin-top: 8px;
    border-top: 1px solid #e8e8e8;
    padding-top: 8px;
}

/* Riga documento tabellare — 6 colonne (con stella) o 5 colonne (senza stella, lab) */
.pa-doc-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: var(--font-size-md);
    border-bottom: 1px solid var(--page-bg);
}
/* Senza stella (lab referti): 5 colonne */
.lab-files-list .pa-doc-row {
    grid-template-columns: 1fr auto auto auto auto;
}
.pa-doc-row:last-of-type { border-bottom: none; }

/* Stelle per documenti */
.pa-star {
    background: none;
    border: none;
    font-size: var(--text-base);
    cursor: pointer;
    padding: 0;
    color: var(--border-color);
    transition: color 0.15s;
    line-height: 1;
    width: 28px;
    text-align: center;
}
.pa-star.starred { color: #e6a817; }
.pa-star:hover { color: #d4960f; }

/* Colonne doc-row */
.pa-doc-row-file {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-weight: 500;
}
.pa-doc-row-tipo {
    white-space: nowrap;
    color: var(--primary-dark);
    font-weight: 600;
    font-size: var(--font-size-sm);
}
.pa-doc-row-data {
    white-space: nowrap;
    color: var(--label-text);
    font-size: var(--font-size-sm);
}
.pa-doc-row .btn-doc-view-sm {
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
}
.pa-doc-row .btn-doc-view-sm:hover {
    background: var(--primary);
    color: #fff;
}

/* Testo inline espanso — riga che si estende in altezza */
.pa-doc-text-inline {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 8px 8px;
    background: var(--page-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}
.pa-doc-text-inline textarea {
    width: 100%;
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    border: none;
    background: transparent;
    resize: vertical;
    min-height: 80px;
    color: var(--body-text);
}
.pa-doc-text-inline textarea:focus {
    /* Focus visible WCAG 2.4.7: bordo visibile al tab (il parent
       .pa-doc-text-inline ha gia' un contorno, ma serve differenziare
       lo stato focus per accessibilita'). */
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.pa-doc-text-inline .doc-text-footer {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--label-text);
    margin-top: 4px;
}

/* Popup modale per visualizzazione documento (Apri) */
/* v0.9.5.245 R5 H6 — Pattern overlay unificato. */
.doc-viewer-modal {
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop-light);
    z-index: var(--z-modal-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--overlay-padding);
}
.doc-viewer-modal-box {
    background: #fff;
    border-radius: var(--radius-md);
    width: 90vw;
    height: 85vh;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.doc-viewer-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.doc-viewer-modal-header strong {
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-viewer-modal-body {
    flex: 1;
    overflow: hidden;
}
.doc-viewer-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Badge nella header della card */
.cop-badge-miss {
    background: var(--error-text);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Panel 2: documenti selezionati */
.pa-docs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
/* Pannello Documenti da Allegare — layout row con wrap:
   [num] [tipo] [data] [filename] [coverage] [slot] [Testo] [Apri] [Explorer]
   Elementi flex inline che vanno a capo solo se la larghezza non basta.
   Il JS in renderPAPanel2 produce span/button flat come figli diretti di
   .pa-doc-item: flex-direction: row e' corretto, flex-direction: column
   (precedente) metteva ogni elemento su una riga propria. */
/* Layout 2 righe (0.9.0.10): l'item e' un container column con due
   sotto-righe flex-row. Riga top: anagrafica file (num, tipo, filename,
   azioni). Riga bottom: info clinico-amministrative (data, patologie,
   slot allegazione INPS). Lo split impedisce al filename lungo di
   competere per spazio con i badge. */
.pa-doc-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: var(--font-size-small);
}
.pa-doc-row-top,
.pa-doc-row-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    row-gap: 4px;
    width: 100%;
}
.pa-doc-row-top {
    /* Filename + azioni: la riga top deve consentire il filename largo
       e spingere le azioni a destra. */
}
.pa-doc-row-bottom {
    /* Lieve indent rispetto alla riga top per chiarire la gerarchia
       visiva. La data, le patologie e il slot sono raggruppati. */
    padding-left: 30px;
    color: var(--label-text);
    font-size: var(--font-size-xs);
}
.pa-doc-motivo {
    padding-left: 30px;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
}
.pa-doc-data-warn {
    color: #d97706;
    margin-left: 4px;
    cursor: help;
    font-size: var(--font-size-xs);
}
.pa-doc-num {
    font-weight: 700;
    color: var(--primary-dark);
    min-width: 22px;
    flex: 0 0 auto;
}
.pa-doc-tipo {
    color: #fff;
    background: var(--primary);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}
.pa-doc-data {
    color: var(--label-text);
    background: var(--bg);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    white-space: nowrap;
    flex: 0 0 auto;
}
.pa-copy-on-click {
    cursor: copy;
    transition: background 0.15s, transform 0.1s;
}
.pa-copy-on-click:hover {
    filter: brightness(0.92);
}
.pa-copy-on-click.pa-copied {
    background: var(--success-text, #4caf50) !important;
    color: #fff !important;
    transform: scale(0.96);
}

/* Storia clinica progressiva (progression_families) */
.profilo-cond-storia-count {
    background: var(--label-text, var(--label-text));
    color: #fff;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-left: 4px;
    cursor: help;
}
.profilo-cond-storia {
    background: var(--bg);
    border-left: 3px solid var(--primary);
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: var(--font-size-sm);
}
.profilo-cond-storia-title {
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 4px;
    font-size: var(--font-size-sm);
}
.profilo-cond-storia-criterio {
    font-size: var(--font-size-xs);
    color: var(--label-text);
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.4;
}
.profilo-cond-storia-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    color: var(--body-text);
    opacity: 0.8;
}
.profilo-cond-storia-step::before {
    content: "○";
    color: var(--label-text);
}
.profilo-cond-storia-data {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--label-text);
    min-width: 80px;
}
.profilo-cond-storia-icd9 {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    background: var(--primary-light);
    padding: 1px 8px;
    border-radius: 4px;
}
.profilo-cond-storia-label {
    color: var(--body-text);
}
.profilo-cond-storia-score {
    font-size: var(--font-size-xs);
    color: var(--label-text);
    font-style: italic;
}
.profilo-cond-storia-src {
    font-size: var(--font-size-xs);
    color: var(--label-text);
    margin-left: auto;
}
.profilo-cond-storia-current {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color);
    font-weight: 600;
    color: var(--primary-dark);
}
.pa-doc-file {
    color: var(--body-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 140px;
    max-width: 420px;
    flex: 1 1 200px;
}
.pa-doc-spacer {
    flex: 1 1 auto;
}
.pa-doc-slot {
    color: var(--body-text);
    font-style: italic;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    max-width: 260px;
}
.pa-doc-desc {
    color: var(--primary-dark);
    background: var(--bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    -webkit-user-select: all;
    user-select: all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 520px;
    flex: 1 1 auto;
}
.pa-doc-desc:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}
.pa-doc-desc.copied {
    border-color: var(--success-text);
    background: #e8f5e9;
}
.pa-doc-coverage {
    background: var(--success-text);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}
/* Il badge "N pat." e' cliccabile in 0.9.0.3: al click apre popover
   ancorato con tabella patologie (vedi openPatologiePopover). Stili
   button-reset per mantenere l'aspetto badge ma renderlo interattivo. */
button.pa-doc-coverage-btn {
    border: none;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    transition: filter 0.12s;
}
button.pa-doc-coverage-btn:hover {
    filter: brightness(1.1);
}
button.pa-doc-coverage-btn:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
button.pa-doc-coverage-btn[aria-expanded="true"] {
    filter: brightness(0.9);
}

/* Popover patologie attestate */
.pat-popover {
    position: absolute;
    z-index: var(--z-popover);
    max-width: min(560px, calc(100vw - 24px));
    min-width: 320px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, var(--border-color));
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    padding: 8px 12px;
    font-size: var(--font-size-md);
    color: var(--body-text);
}
.pat-popover-title {
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--primary-dark, #1F3864);
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #e1e6ec);
}
.pat-popover-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-md);
}
.pat-popover-table thead th {
    text-align: left;
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    color: var(--label-text, #595959);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color, #e1e6ec);
}
.pat-popover-table tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: top;
}
.pat-popover-table tbody tr:last-child td {
    border-bottom: none;
}
.pat-popover-code {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--primary-dark, #1F3864);
    white-space: nowrap;
    width: 80px;
}
.pat-popover-label {
    color: var(--body-text);
    line-height: 1.35;
}
.pat-popover-date {
    font-family: var(--font-mono);
    color: var(--label-text, #595959);
    white-space: nowrap;
    font-size: var(--font-size-sm);
    width: 110px;
}
/* Gruppo azioni (Testo/Apri/Cartella) come blocco unitario:
   - margin-left:auto + order:99 → sempre alla fine della riga
   - flex-wrap:nowrap interno → i 3 bottoni non si separano mai
   - se nel contenitore non c'e' spazio, il gruppo va a capo INSIEME
     sulla riga successiva, sempre allineato a destra (grazie a
     margin-left:auto). Nessuna rottura in "mezzo bottone qua, mezzo la'". */
.pa-doc-actions {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    order: 99;
}
.pa-doc-actions .btn-doc-view-sm {
    flex: 0 0 auto;
}
.pa-doc-date {
    color: var(--label-text);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* Badge "solo diagnosi" per patologie oltre la 5a */
.pa-badge-extra {
    background: var(--label-text);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

/* v0.9.5.245 R4 M4 — Tier badge SM circle (rank). */
.pa-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--badge-bg-primary);
    color: var(--badge-fg-on-dark);
    font-size: var(--badge-fs-md);
    font-weight: var(--badge-weight);
    flex-shrink: 0;
}
.pa-card[data-idx="0"] .pa-rank-badge,
.pa-card[data-idx="1"] .pa-rank-badge,
.pa-card[data-idx="2"] .pa-rank-badge,
.pa-card[data-idx="3"] .pa-rank-badge,
.pa-card[data-idx="4"] .pa-rank-badge {
    background: var(--primary);
}
.pa-card:not([data-idx="0"]):not([data-idx="1"]):not([data-idx="2"]):not([data-idx="3"]):not([data-idx="4"]) .pa-rank-badge {
    background: var(--label-text);
}

/* v0.9.5.245 R4 M4 — Tier badge SM (gravita'). */
.pa-gravita-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: var(--spacing-sm);
    padding: 0 var(--spacing-xs);
    font-size: var(--badge-fs-sm);
    font-weight: var(--badge-weight);
    cursor: help;
    flex-shrink: 0;
    color: white;
}
.pa-g1, .pa-g2, .pa-g3 { background: var(--label-text); }
.pa-g4, .pa-g5 { background: #e6a817; }
.pa-g6, .pa-g7 { background: #e07b39; }
.pa-g8, .pa-g9, .pa-g10 { background: var(--error-text); }

/* Badge copertura */
.cop-badge-ok {
    background: var(--success-text);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}
.cop-badge-miss {
    background: var(--error-text);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
}
/* v0.9.5.194 ISSUE-011: badge per cond filtrate dal pipeline (PS
   transitorio / risolto / sospetto / sussunto / ecc.). Colore "info"
   ambra/giallo per distinguere da "documentata" (verde) e
   "non documentata" (rosso). La cond E' documentata nei referti, ma
   l'engine l'ha de-prioritizzata per ragioni cliniche/medico-legali.
   Tooltip mostra la reason completa via title=. */
.cop-badge-filtered {
    background: #b58900;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

/* ══════════════════════════════════════════════════════════════
   QUESITI Q1-Q6 — Step 2
   ══════════════════════════════════════════════════════════════ */

.quesiti-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.quesito-item {
    padding: 8px var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    border-left: 3px solid transparent;
}

.quesito-suggerito {
    background: var(--warning-bg);
    border-left-color: var(--warning-text);
}

.quesito-normale {
    background: var(--page-bg);
    border-left-color: var(--border-color);
}

.quesito-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-min);
}

.quesito-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.quesito-codice {
    font-weight: 700;
    color: var(--primary-dark);
    min-width: 28px;
}

.quesito-titolo {
    flex: 1;
}

.quesito-motivo {
    margin-top: 4px;
    margin-left: 36px;
    font-size: var(--font-size-md);
    color: var(--warning-text);
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   PIPELINE NOTES
   ══════════════════════════════════════════════════════════════ */

.pipeline-notes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.pipeline-note {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
}

.note-info {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.note-warn {
    background: var(--error-bg);
    color: var(--error-text);
}

/* ══════════════════════════════════════════════════════════════
   ICD-9 SEARCH + CHIPS
   ══════════════════════════════════════════════════════════════ */

.icd9-search-row {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
}

.icd9-search {
    flex: 1;
    padding: 12px var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: var(--font-size-min);
}

.icd9-search:focus {
    outline: 2px solid var(--primary);
    border-color: var(--primary);
}

.icd9-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-md);
}

.icd9-results-count {
    padding: 8px var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--label-text);
    background: var(--page-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1;
}

.icd9-result-item {
    padding: 8px var(--spacing-md);
    cursor: pointer;
    display: flex;
    gap: var(--spacing-sm);
    align-items: baseline;
    border-bottom: 1px solid #F0F0F0;
    font-size: var(--font-size-small);
}

.icd9-result-item:hover {
    background: var(--primary-light);
}

.icd9-code {
    font-weight: 700;
    color: var(--primary-dark);
    min-width: 60px;
}

.icd9-desc {
    flex: 1;
    color: var(--body-text);
}

.icd9-tipo {
    font-size: var(--font-size-sm);
    color: var(--label-text);
    text-transform: uppercase;
}

/* ── Finder: selettore standard + modalita' ── */

.icd9-finder {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: visible;
}

.icd9-finder-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 8px 8px;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.icd9-std-tabs,
.icd9-mode-tabs {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
}

.icd9-std-tab,
.icd9-mode-tab {
    border: 0;
    background: transparent;
    padding: 8px 12px;
    font-family: var(--font-main);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--label-text);
    cursor: pointer;
    border-right: 1px solid var(--border-light);
}

.icd9-std-tab:last-child,
.icd9-mode-tab:last-child {
    border-right: 0;
}

.icd9-std-tab.active,
.icd9-mode-tab.active {
    background: var(--primary);
    color: #fff;
}

.icd9-std-tab:hover:not(.active),
.icd9-mode-tab:hover:not(.active) {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.icd9-finder-body {
    position: relative;
    padding: 8px;
}

.icd9-mode-panel {
    display: block;
}

.icd9-mode-panel.hidden {
    display: none;
}

/* ── Albero ── */

.icd9-tree-toolbar {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
    margin-bottom: 8px;
}

.icd9-kind-btn {
    border: 0;
    background: transparent;
    padding: 4px 8px;
    font-family: var(--font-main);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--label-text);
    cursor: pointer;
    border-right: 1px solid var(--border-light);
}

.icd9-kind-btn:last-child {
    border-right: 0;
}

.icd9-kind-btn.active {
    background: var(--primary-dark);
    color: #fff;
}

.icd9-kind-btn:hover:not(.active) {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.icd9-tree {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 0;
    background: #fff;
}

.icd9-tree-node {
    -webkit-user-select: none;
    user-select: none;
}

.icd9-tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: var(--font-size-small);
    line-height: 1.35;
}

.icd9-tree-row:hover {
    background: var(--primary-light);
}

.icd9-tree-row.highlight {
    background: #fff3cd;
    animation: icd9-tree-flash 1.6s ease-out;
}

@keyframes icd9-tree-flash {
    0% { background: #ffe082; }
    100% { background: transparent; }
}

.icd9-tree-chevron {
    width: 14px;
    flex-shrink: 0;
    text-align: center;
    color: var(--label-text);
    font-size: var(--font-size-xs);
    transition: transform 0.15s;
}

.icd9-tree-chevron.expanded {
    transform: rotate(90deg);
}

.icd9-tree-chevron.empty {
    visibility: hidden;
}

.icd9-tree-code {
    font-weight: 700;
    color: var(--primary-dark);
    min-width: 60px;
    flex-shrink: 0;
}

.icd9-tree-label {
    flex: 1;
    color: var(--body-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icd9-tree-add {
    flex-shrink: 0;
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary-dark);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    visibility: hidden;
}

.icd9-tree-row:hover .icd9-tree-add,
.icd9-tree-row:focus-within .icd9-tree-add {
    visibility: visible;
}

.icd9-tree-add:hover {
    background: var(--primary);
    color: #fff;
}

.icd9-tree-children {
    border-left: 1px dashed var(--border-color);
    margin-left: 13px;
    padding-left: 0;
}

.icd9-tree-loading,
.icd9-tree-empty {
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    color: var(--label-text);
    font-style: italic;
}

/* Tipo nodo: distinzioni visive */
.icd9-tree-node[data-type="chapter"] > .icd9-tree-row > .icd9-tree-code {
    font-size: var(--font-size-xs);
    color: var(--label-text);
}

.icd9-tree-node[data-type="chapter"] > .icd9-tree-row > .icd9-tree-label {
    font-weight: 600;
    color: var(--body-text);
}

.icd9-tree-node[data-type="block"] > .icd9-tree-row > .icd9-tree-label {
    color: #444;
}

.icd9-tree-node[data-type="leaf"] > .icd9-tree-row > .icd9-tree-label {
    color: var(--label-text);
    font-size: var(--font-size-md);
}

/* ── Bottone "Mostra in albero" sui risultati di ricerca ── */

.icd9-result-show-tree {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--label-text);
    border-radius: var(--radius-sm);
    padding: 1px 8px;
    font-size: var(--font-size-xxs);
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
}

.icd9-result-show-tree:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-color: var(--primary);
}

/* ── ICD-10 placeholder ── */

.icd9-coming-soon {
    padding: 12px 16px;
    background: #f5f7fa;
    border: 1px dashed #C0C8D2;
    border-radius: var(--radius-sm);
    color: #4a5560;
    font-size: var(--font-size-md);
}

.icd9-coming-soon strong {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-dark);
    font-size: var(--text-sm);
}

.icd9-coming-soon p {
    margin: 0;
    line-height: 1.45;
}

.patologia-valid {
    font-size: var(--font-size-xxs);
    color: var(--success-text);
    background: #e8f5e9;
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
    font-weight: 600;
}

.patologia-invalid {
    font-size: var(--font-size-xxs);
    color: var(--warning-text);
    background: #fff3e0;
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
    font-weight: 600;
}

/* Chips per codici selezionati */
.icd9-code-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.icd9-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: 20px;
    padding: 8px 12px;
    font-size: var(--font-size-small);
}

.icd9-chip-invalid {
    background: var(--error-bg);
    border-color: var(--error-text);
}

.icd9-chip-num {
    font-weight: 700;
    color: var(--primary-dark);
}

.icd9-chip-code {
    font-weight: 700;
    color: var(--primary);
}

.icd9-chip-invalid .icd9-chip-code {
    color: var(--error-text);
}

.icd9-chip-desc {
    color: var(--body-text);
}

.icd9-chip-warn {
    background: var(--error-text);
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.icd9-chip[draggable] {
    cursor: grab;
    transition: opacity 0.2s, box-shadow 0.2s, transform 0.15s;
}

.icd9-chip-drag {
    color: var(--label-text);
    font-size: var(--text-sm);
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0.5;
}

.icd9-chip:hover .icd9-chip-drag {
    opacity: 1;
}

.icd9-chip-dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.icd9-chip-dragover {
    box-shadow: 0 0 0 2px var(--primary);
    transform: scale(1.03);
}

.icd9-chip-remove {
    background: none;
    border: none;
    color: var(--error-text);
    font-size: var(--text-base);
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
}

.icd9-chip-remove:hover {
    color: red;
}

/* ══════════════════════════════════════════════════════════════
   COPY SECTION — Step 5
   ══════════════════════════════════════════════════════════════ */

.copy-section {
    margin-top: var(--spacing-lg);
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   CHAT PANEL
   ══════════════════════════════════════════════════════════════ */





#chat-toggle-icon {
    font-size: var(--text-lg);
    font-weight: 700;
    width: 24px;
    text-align: center;
}









/* ══════════════════════════════════════════════════════════════
   SETTINGS PANEL
   ══════════════════════════════════════════════════════════════ */

.settings-panel {
    position: fixed;
    left: 16px;
    bottom: 16px;
    width: 380px;
    max-height: 80vh;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    z-index: var(--z-drawer);
    transition: transform 0.25s ease, opacity 0.25s ease;
    overflow: hidden;
}

.settings-hidden {
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px var(--spacing-md);
    background: var(--primary-dark);
    color: white;
    cursor: pointer;
    font-weight: 700;
    font-size: var(--font-size-min);
    -webkit-user-select: none;
    user-select: none;
}

#settings-toggle-icon {
    font-size: var(--text-lg);
    font-weight: 700;
    width: 24px;
    text-align: center;
}

.settings-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

/* Tabs */
.settings-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: var(--spacing-md);
    background: var(--page-bg);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.settings-tab {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-main);
    font-size: var(--font-size-small);
    font-weight: 600;
    cursor: pointer;
    color: var(--label-text);
    transition: background 0.15s, color 0.15s;
}

.settings-tab:hover {
    background: rgba(0,0,0,0.05);
}

.settings-tab-active {
    background: var(--primary) !important;
    color: white !important;
}

/* Settings content */
.settings-content {
    /* container for tab content */
}

/* Group / Form items */
.settings-group {
    margin-bottom: var(--spacing-md);
}

.settings-label {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-small);
    color: var(--primary-dark);
    margin-bottom: var(--spacing-xs);
}

/* v0.9.5.245 R5 L6 — variante con gap verticale (sostituisce
   style="margin-top:14px" inline su .settings-label). */
.settings-label.settings-label-gap {
    margin-top: var(--spacing-md);
}

/* v0.9.5.245 R5 L6 — utility .muted referenziata dall'HTML ma assente
   in CSS (era usata con inline style font-size: var(--text-sm)). Ora token-driven. */
.muted {
    color: var(--text-muted);
    font-size: var(--font-size-meta);
}

.settings-input,
.settings-select {
    width: 100%;
    padding: 8px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: var(--font-size-small);
    background: white;
}

.settings-input:focus,
.settings-select:focus {
    outline: 2px solid var(--primary);
    border-color: var(--primary);
}

.settings-hint {
    font-size: var(--font-size-xs);
    color: var(--label-text);
    margin-top: 2px;
}


.settings-range {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--label-text);
    margin-top: 2px;
}

.settings-info {
    font-size: var(--font-size-sm);
    color: var(--label-text);
    margin-top: 4px;
    line-height: 1.5;
    padding: 8px 8px;
    background: var(--page-bg);
    border-radius: var(--radius-sm);
}


/* ══════════════════════════════════════════════════════════════ */
/* COPY BUTTON INLINE — sui textarea anamnesi/decorso/diagnosi  */
/* ══════════════════════════════════════════════════════════════ */

.field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* v0.9.5.245 R4 H5 — Tier XS allineato. */
.btn-copy-inline {
    padding: var(--btn-xs-py) var(--spacing-12);
    font-size: var(--btn-sm-fs);
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid var(--primary);
    border-radius: var(--btn-xs-radius);
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s;
}

.btn-copy-inline:hover {
    background: var(--primary);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════ */
/* WHODAS 2.0 — questionario disabilita                         */
/* ══════════════════════════════════════════════════════════════ */

.whodas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.whodas-actions {
    display: flex;
    gap: 8px;
}

.whodas-intro {
    font-size: var(--font-size-small);
    color: var(--label-text);
    margin-bottom: 8px;
}

/* Dominio accordion */
.whodas-domain {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    overflow: hidden;
}

.whodas-domain-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--primary-light);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 600;
    font-size: var(--text-sm);
}

.whodas-domain-header:hover {
    background: #c5d7f0;
}

.whodas-domain-score {
    font-size: var(--font-size-md);
    font-weight: 400;
    color: var(--label-text);
}

.whodas-domain-body {
    padding: 8px 12px 8px;
    display: none;
}

.whodas-domain.open .whodas-domain-body {
    display: block;
}

.whodas-domain-intro {
    font-size: var(--font-size-sm);
    color: var(--label-text);
    margin-bottom: 8px;
}

.whodas-domain-toggle {
    font-size: var(--text-base);
    transition: transform 0.2s;
}

.whodas-domain.open .whodas-domain-toggle {
    transform: rotate(90deg);
}

/* Singolo item */
.whodas-item {
    padding: 5px 0;
    border-bottom: 1px solid var(--page-bg);
}

.whodas-item:last-child {
    border-bottom: none;
}

.whodas-item-label {
    font-size: var(--text-sm);
    color: var(--body-text);
    margin-bottom: 3px;
}

.whodas-item-hint {
    font-size: var(--font-size-sm);
    color: var(--label-text);
    font-style: italic;
    margin-bottom: 3px;
}

/* Radio scale 1-5 — box colorati per severità */
.whodas-scale {
    display: flex;
    gap: 8px;
    margin: 4px 0 2px;
}

.whodas-radio {
    display: none;
}

.whodas-radio-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 72px;
    max-width: 110px;
    padding: 8px 4px 8px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}

.whodas-radio-label .whodas-val {
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1;
}

.whodas-radio-label .whodas-lbl {
    font-size: var(--font-size-xs);
    margin-top: 2px;
    line-height: 1.2;
}

/* v0.9.5.245 R2 H3 — colori per livello brand-coordinated.
   Pre-R2: usava Material palette (green/orange/deep-orange/red/purple)
   visivamente fuori dal brand slate-teal. Post-R2: 5 livelli mappati
   su scala success → warning → error → error-dark, mantenendo
   discriminabilita' visiva. */
.whodas-radio-label[data-severity="1"] { background: var(--success-bg); color: var(--success-text); border-color: #C3D4C6; }
.whodas-radio-label[data-severity="2"] { background: #F0EBD8; color: #6D7A33; border-color: #D8D3B8; }
.whodas-radio-label[data-severity="3"] { background: var(--warning-bg); color: var(--warning-text); border-color: #E8DCBE; }
.whodas-radio-label[data-severity="4"] { background: var(--error-bg); color: var(--error-text); border-color: #E5C3BE; }
.whodas-radio-label[data-severity="5"] { background: #E8D5D3; color: #5A1E1A; border-color: #C9A8A4; }

/* Hover — alza e bordo pieno (stessa famiglia, piu' saturo) */
.whodas-radio-label:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.whodas-radio-label[data-severity="1"]:hover { border-color: var(--success-text); }
.whodas-radio-label[data-severity="2"]:hover { border-color: #6D7A33; }
.whodas-radio-label[data-severity="3"]:hover { border-color: var(--warning-text); }
.whodas-radio-label[data-severity="4"]:hover { border-color: var(--error-text); }
.whodas-radio-label[data-severity="5"]:hover { border-color: #5A1E1A; }

/* Selezionato — sfondo pieno, testo bianco, ombra */
.whodas-radio:checked + .whodas-radio-label {
    color: #fff;
    font-weight: 700;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.whodas-radio:checked + .whodas-radio-label[data-severity="1"] { background: var(--success-text); border-color: var(--success-text); }
.whodas-radio:checked + .whodas-radio-label[data-severity="2"] { background: #6D7A33; border-color: #6D7A33; }
.whodas-radio:checked + .whodas-radio-label[data-severity="3"] { background: var(--warning-text); border-color: var(--warning-text); }
.whodas-radio:checked + .whodas-radio-label[data-severity="4"] { background: var(--error-text); border-color: var(--error-text); }
.whodas-radio:checked + .whodas-radio-label[data-severity="5"] { background: #5A1E1A; border-color: #5A1E1A; }

/* Chip suggerimento AI */
.whodas-suggestion {
    display: inline-block;
    font-size: var(--font-size-xs);
    padding: 1px 8px;
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid #e8c547;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 2px;
}

.whodas-suggestion:hover {
    background: #ffe680;
}

/* Summary */
.whodas-summary {
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--page-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.whodas-total {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: 8px;
}

.whodas-domain-score-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-md);
    padding: 1px 0;
}

.whodas-domain-score-bar {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    flex: 1;
    margin-left: 8px;
    align-self: center;
}

.whodas-domain-score-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.score-color-green { background: var(--success-text); }
.score-color-yellow { background: #d4a017; }
.score-color-orange { background: var(--warning-text); }
.score-color-red { background: var(--error-text); }

/* ══════════════════════════════════════════════════════════════ */
/* PROFILO CLINICO — Step 2, condizioni + lab + selezione ICD-9 */
/* ══════════════════════════════════════════════════════════════ */

.profilo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.profilo-section {
    margin-bottom: 8px;
}

.profilo-section-title {
    font-weight: 700;
    font-size: var(--font-size-small);
    color: var(--primary-dark);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Condizione clinica */
.profilo-cond-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    border-left: 3px solid var(--primary);
    background: var(--page-bg);
    margin-bottom: 4px;
    transition: box-shadow 0.15s;
}

.profilo-cond-item:hover {
    box-shadow: var(--shadow-sm);
}

.profilo-cond-label {
    font-weight: 600;
    flex: 1;
    min-width: 150px;
    color: var(--body-text);
}

.profilo-cond-code {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--primary);
    background: var(--primary-light);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.profilo-cond-sources-list {
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e8ecf0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profilo-cond-source {
    display: block;
    padding: 8px 8px;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid #f0f2f5;
}

.profilo-cond-source:last-child {
    border-bottom: none;
}

/* Head: file + tipo + data + buttons sulla prima riga */
.profilo-cond-src-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

/* Badge verbatim (✓) vs derivato (⚠) */
.profilo-cond-verbatim {
    color: #2a7d2e;
    font-weight: 700;
    font-size: var(--font-size-md);
}
.profilo-cond-derived {
    color: #b07900;
    font-weight: 700;
    font-size: var(--font-size-md);
}
.profilo-cond-derived-hint {
    color: #b07900;
    font-weight: 700;
    margin-left: 4px;
}

/* Sezione del referto (§ Diagnosi) */
.profilo-cond-src-sezione {
    font-size: var(--font-size-xs);
    color: #4a5b6f;
    background: #e9eef4;
    padding: 1px 8px;
    border-radius: 3px;
}

/* Keyword e frase verbatim (audit trail) */
.profilo-cond-src-kw {
    font-size: var(--font-size-xs);
    color: var(--body-text);
    margin-top: 2px;
    padding-left: 8px;
}
.profilo-cond-src-kw em {
    color: var(--primary-dark);
    font-weight: 500;
    font-style: normal;
    background: var(--primary-light);
    padding: 0 3px;
}

.profilo-cond-src-frase {
    font-size: var(--font-size-xs);
    color: var(--label-text);
    font-style: italic;
    margin-top: 3px;
    padding: 4px 8px;
    background: #fafbfc;
    border-left: 2px solid #d5dbe3;
    line-height: 1.35;
}

/* Regole applicate (variant/dedup/mutex) */
.profilo-cond-src-regole {
    font-size: var(--font-size-xxs);
    color: var(--label-text);
    margin-top: 3px;
    padding-left: 8px;
}
.profilo-cond-regola {
    display: inline-block;
    background: #f4f0e9;
    color: #6c4f1c;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 4px;
    font-family: var(--font-mono);
}

/* Testo inline espanso */
.profilo-cond-source .pa-doc-text-inline {
    margin-top: 8px;
}

/* Viewer testo con highlight (Fase 3 audit trail) */
.doc-text-scroll {
    max-height: 220px;
    overflow: auto;
    border: 1px solid #d5dbe3;
    background: #fafbfc;
    border-radius: 4px;
    padding: 8px 8px;
}
.doc-text-scroll pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: #222;
    line-height: 1.45;
}
mark.doc-text-hi {
    background: #fff3a0;
    color: #1a1a1a;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 600;
    box-shadow: 0 0 0 1px #d9b900;
}
.doc-text-hint {
    color: var(--label-text);
    font-style: italic;
    font-size: var(--font-size-xxs);
}

.profilo-cond-src-file {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--body-text);
}

.profilo-cond-src-tipo {
    color: #fff;
    background: var(--primary);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    justify-content: center;
    font-weight: 600;
    white-space: nowrap;
}

.profilo-cond-src-data {
    white-space: nowrap;
    color: var(--label-text);
    font-size: var(--font-size-xs);
    justify-content: center;
}

.profilo-cond-source .btn-doc-view-sm {
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.profilo-cond-source .btn-doc-view-sm:hover {
    background: var(--primary);
    color: #fff;
}

/* v0.9.5.245 R4 H5 — Tier XS allineato (variante pill: radius maggiore). */
.btn-doc-view-sm {
    font-size: var(--btn-xs-fs);
    padding: var(--btn-xs-py) var(--btn-xs-px);
    border-radius: var(--radius-md);
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
}
.btn-doc-view-sm:hover {
    background: var(--primary);
    color: #fff;
}

/* ── Sub-section collapsabile (livello inferiore) ── */
.subsection {
    margin-top: 12px;
    border-top: 1px solid #e0e6f0;
    padding-top: 4px;
}
.subsection-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 4px;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.15s ease;
}
.subsection-header:hover {
    background: var(--primary-light, #E8EFF9);
}
.subsection-chevron {
    font-size: var(--font-size-xxs);
    color: var(--label-text, #8895A7);
    transition: transform 0.2s ease;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.subsection-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-dark, #1A3A6B);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.subsection-body {
    max-height: 3000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}
.subsection-closed .subsection-chevron {
    transform: rotate(-90deg);
}
.subsection-closed .subsection-body {
    max-height: 0;
    opacity: 0;
}

/* v0.9.5.149 — nelle fasi le sottosezioni restano sempre aperte:
   niente collasso interno, navigazione solo via sidebar. */
.task-frame .subsection-body {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible;
}
.task-frame .subsection-chevron { display: none; }
.task-frame .subsection-header { cursor: default; }

/* Valore lab */
.profilo-lab-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 16px;
    font-size: var(--font-size-md);
    background: #F0F4FF;
    border: 1px solid #C5D3F0;
    margin: 2px 4px 2px 0;
}

.profilo-lab-name {
    font-weight: 600;
    color: var(--primary-dark);
}

.profilo-lab-value {
    font-weight: 700;
    color: var(--body-text);
}

.profilo-lab-unit {
    color: var(--label-text);
    font-size: var(--font-size-xs);
}

.profilo-lab-date {
    color: var(--label-text);
    font-size: var(--font-size-xs);
}

/* Lab category grouping */
.lab-category {
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
}

.lab-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F8F9FA;
    border-left: 3px solid var(--border-color);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--body-text);
}

.lab-category-header:hover {
    background: #ECEFF1;
}

.lab-category-chevron {
    font-size: var(--font-size-xxs);
    transition: transform 0.2s;
    color: var(--label-text);
}

.lab-category.collapsed .lab-category-chevron {
    transform: rotate(-90deg);
}

.lab-category-name {
    flex: 1;
}

.lab-category-count {
    font-size: var(--font-size-xs);
    color: var(--label-text);
    font-weight: 400;
}

.lab-category-body {
    padding: 8px 12px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.lab-category.collapsed .lab-category-body {
    display: none;
}

/* Selezione codici ICD-9 dal profilo */
.profilo-icd9-selection {
    margin-top: 8px;
}

.profilo-icd9-title {
    font-weight: 700;
    font-size: var(--font-size-small);
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.profilo-icd9-note {
    font-size: var(--font-size-sm);
    color: var(--label-text);
    margin-bottom: 8px;
    font-style: italic;
}

.profilo-icd9-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    background: var(--page-bg);
    margin-bottom: 3px;
    cursor: pointer;
    transition: background 0.15s;
}

.profilo-icd9-item:hover {
    background: var(--primary-light);
}

.profilo-icd9-item.selected {
    background: var(--success-bg);
    border-left: 3px solid var(--success-text);
}

.profilo-icd9-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.profilo-icd9-item .profilo-cond-code {
    min-width: 60px;
    text-align: center;
}

.profilo-icd9-item .profilo-cond-label {
    flex: 1;
}

/* ── Sprint 3: Drag handle per items "Altre patologie" ── */
.profilo-icd9-item[draggable] {
    cursor: grab;
    transition: opacity 0.2s, background 0.15s, transform 0.15s;
}

.profilo-icd9-item .icd9-chip-drag {
    opacity: 0.4;
    font-size: var(--text-sm);
    cursor: grab;
}

.profilo-icd9-item:hover .icd9-chip-drag {
    opacity: 1;
}

/* ── Sprint 3: Due zone drag&drop ICD-9 ── */
.icd9-drop-zone {
    border: 2px dashed #C5D3F0;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: border-color 0.2s, background 0.2s;
}

.icd9-drop-zone-selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.icd9-drop-zone-other {
    border-color: var(--border-color);
    background: var(--page-bg);
}

.icd9-drop-zone-highlight {
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
    border-style: solid !important;
}

.icd9-drop-placeholder {
    color: var(--label-text);
    font-size: var(--font-size-small);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-md) 0;
}

/* ── Sprint 3: Condizioni cliccabili con sorgenti espandibili ── */
.profilo-cond-expandable {
    cursor: pointer;
    transition: background 0.15s;
}

.profilo-cond-expandable:hover {
    background: var(--primary-light);
}

.profilo-cond-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
}

.profilo-cond-suggerito {
    font-size: var(--font-size-xxs);
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Warning medico-legale: condizione gravità ≥8 con UNA sola sorgente.
   Alto rischio FP da keyword incidentale — il medico deve verificare
   criticamente prima di includere nel certificato. */
.profilo-cond-single-source-warn {
    font-size: var(--font-size-xxs);
    font-weight: 700;
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: help;
}
.profilo-cond-item.profilo-cond-single-src-warn {
    border-left: 3px solid #dc2626;
    background: linear-gradient(to right, rgba(254, 226, 226, 0.3), transparent 30%);
}

.profilo-cond-suggested {
    opacity: 0.75;
}

/* Confidence badge: indicatore di affidabilita' del match (0-100).
   <70 = "verifica" (rosso scuro, richiede review medica esplicita)
   70-89 = numero (giallo, revisione consigliata)
   >=90 = nessun badge (alta confidence, default invisibile)
   Soglie da pkg/engine/confidence.go computeCondConfidence. */
.profilo-cond-conf-low {
    font-size: var(--font-size-xxs);
    font-weight: 700;
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #f87171;
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: help;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.profilo-cond-conf-mid {
    font-size: var(--font-size-xxs);
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: help;
}
/* Bordo sinistro per cond a bassa confidence — visibilita' immediata
   sulla lista. Sovrascrivibile da .profilo-cond-single-src-warn (rosso
   piu' acceso) se entrambi i flag attivi. */
.profilo-cond-item.profilo-cond-conf-low-cls {
    border-left: 3px solid #dc2626;
}
.profilo-cond-item.profilo-cond-conf-mid-cls {
    border-left: 3px solid #f59e0b;
}

/* Badge "negazione vicino" — INDIPENDENTE da confidence numerico.
   Triggera quando una derivazione contiene un verbo negante nella
   stessa frase (sentence_scope_verbs) ma la cond non e' stata
   strict-negata. Stile arancione/ambra per attirare l'attenzione
   senza confondere col rosso 'verifica' (low confidence) e col
   giallo 'rivedere' (mid). Caso reale: enumerazione 'Nega A, B, C, kw'
   dove kw potrebbe o no far parte dell'enumerazione. */
.profilo-cond-neg-nearby {
    font-size: var(--font-size-xxs);
    font-weight: 700;
    color: #c2410c;
    background: #ffedd5;
    border: 1px solid #fb923c;
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: help;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.profilo-cond-item.profilo-cond-neg-nearby-cls {
    border-left: 3px dashed #ea580c;
}

/* Summary header in cima al pannello "Condizioni rilevate":
   conta le cond per bucket di confidence (verifica/rivedere/OK) */
.profilo-cond-conf-summary {
    font-size: var(--font-size-sm);
    margin-bottom: 8px;
    padding: 8px 8px;
    background: #f9fafb;
    border-radius: 6px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.profilo-cond-conf-summary-low {
    color: #991b1b;
    font-weight: 600;
}
.profilo-cond-conf-summary-mid {
    color: #92400e;
    font-weight: 500;
}
.profilo-cond-conf-summary-high {
    color: #166534;
}

.profilo-cond-src-count {
    font-size: var(--font-size-xs);
    color: var(--primary);
    white-space: nowrap;
    margin-left: auto;
    font-weight: 600;
}

.profilo-cond-sources-hidden {
    display: none;
}

.profilo-cond-expanded {
    background: var(--primary-light);
    border-left-color: var(--primary-dark);
}

.profilo-cond-expanded .profilo-cond-src-count::after {
    content: ' \25B2';
}

.profilo-cond-expandable:not(.profilo-cond-expanded) .profilo-cond-src-count::after {
    content: ' \25BC';
}

/* ═══════════════════════════════════════════════════════════
   TERAPIE FARMACOLOGICHE
   ═══════════════════════════════════════════════════════════ */

.terapia-classe {
    margin-bottom: var(--spacing-sm);
}

.terapia-classe-header {
    font-weight: 700;
    font-size: var(--font-size-min);
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.terapia-farmaco {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    font-size: var(--font-size-min);
    line-height: 1.4;
}

.terapia-farmaco-nome {
    font-weight: 600;
    color: var(--body-text);
    min-width: 120px;
}

.terapia-posologia {
    color: var(--label-text);
    flex: 1;
}

.terapia-farmaco-src {
    font-size: var(--font-size-xs);
    color: var(--label-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ═══════════════════════════════════════════════════════════
   RX-TABLE — Terapie e Procedure (stile farmacia/ospedaliero)
   Tabella compatta a colonne fisse, tipografia mono per dose/ATC,
   header classe come riga di raggruppamento, legenda esplicativa.
   ═══════════════════════════════════════════════════════════ */
.rx-table-wrap {
    margin: 2px 0 var(--spacing-sm);
    border: 1px solid var(--border-color, #d7dbe0);
    border-radius: var(--radius-sm, 4px);
    background: #fbfcfd;
    overflow-x: auto;
}
.rx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--body-text);
}
.rx-table thead th {
    position: sticky;
    top: 0;
    background: #eef3f7;
    color: var(--primary-dark);
    font-weight: 600;
    text-align: left;
    padding: 8px 8px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    font-size: var(--font-size-xs);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.rx-table tbody td {
    padding: 5px 8px;
    border-bottom: 1px solid #eef1f4;
    vertical-align: top;
}
.rx-row:hover td {
    background: #f6f9fb;
}
.rx-class-row td {
    background: #e8edf2 !important;
    padding: 4px 8px !important;
    font-size: var(--font-size-xs);
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border-color) !important;
}
.rx-class-name {
    font-weight: 700;
    color: var(--primary-dark);
    text-transform: uppercase;
}
.rx-class-ctx {
    font-style: italic;
    color: #627080;
    margin-left: 8px;
}
.rx-class-count {
    font-size: var(--font-size-xs);
    color: #627080;
    font-style: italic;
    margin-left: 8px;
    letter-spacing: 0;
    text-transform: none;
}
/* Colonne terapie: larghezze consigliate */
.rx-col-principio { width: 20%; }
.rx-col-brand     { width: 18%; }
.rx-col-dose      { width: 9%;  }
.rx-col-poso      { width: 18%; }
.rx-col-atc       { width: 9%;  }
.rx-col-src       { width: 26%; }
/* Colonne procedure */
.rx-col-data      { width: 11%; }
.rx-col-nome      { width: 20%; }
.rx-col-testo     { width: 44%; }
/* Stile celle */
.rx-cell-principio  { font-weight: 600; }
.rx-cell-brand      { color: #344552; }
.rx-cell-dose       { font-family: var(--font-mono); color: #344552; white-space: nowrap; }
.rx-cell-poso       { color: #344552; }
.rx-cell-atc        { font-family: var(--font-mono); color: #627080; font-size: var(--font-size-xs); }
.rx-cell-src        { color: #627080; font-size: var(--font-size-xs); white-space: normal; word-break: break-word; }
.rx-cell-data       { font-family: var(--font-mono); color: var(--primary-dark); white-space: nowrap; }
.rx-cell-nome       { font-weight: 600; }
.rx-cell-testo      { color: #344552; line-height: 1.35; }
.rx-row-minimal .rx-no-detail { color: #9aa6b2; font-size: var(--font-size-xs); font-style: italic; }
/* Link sorgente: bottoni inline cliccabili nella cella Referto.
   Il click e' gestito dal bind globale btn-doc-view (events.js). */
.rx-src-link {
    display: inline-block;
    background: #eef3f7;
    color: var(--primary-dark);
    border: 1px solid var(--border-color);
    padding: 1px 8px;
    margin: 1px 2px 1px 0;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-family: inherit;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}
.rx-src-link:hover {
    background: #dbe5ee;
    border-color: #8fa3b6;
}
.rx-src-plain {
    display: inline-block;
    color: #9aa6b2;
    font-size: var(--font-size-xs);
    padding: 1px 4px;
}
.rx-src-empty {
    color: #c0c8d0;
    font-size: var(--font-size-xs);
}
.rx-legend {
    padding: 8px 8px;
    font-size: var(--font-size-xs);
    color: #8090a0;
    background: #f2f5f8;
    border-top: 1px solid #e1e6ec;
    line-height: 1.4;
}
.subsection-count {
    display: inline-block;
    background: var(--primary, #1f3a54);
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════
   CSP-SAFE: classi sostitutive degli inline style rimossi
   ═══════════════════════════════════════════════════════════ */
/* v7: source-actions e dir-input-group sostituiscono step1-* */
.dir-input-group { margin-bottom: var(--spacing-md); }

.analysis-spinner-box { margin-top: 16px; padding: 16px; background: var(--page-bg); border-radius: 8px; border: 1px solid var(--border-color); }
.analysis-spinner-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.progress-label { font-weight: 600; color: var(--primary-dark); }
.progress-timer { font-size: var(--font-size-md); color: var(--label-text); }
.progress-track { width: 100%; height: 24px; background: var(--border-color); border-radius: 12px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 12px; transition: width 0.3s ease; display: flex; align-items: center; justify-content: center; }
.progress-pct { font-size: var(--font-size-xs); font-weight: 700; color: #fff; }
.progress-footer { display: flex; justify-content: space-between; margin-top: 8px; }
.progress-detail, .progress-phase { font-size: var(--font-size-sm); color: var(--label-text); }

.docs-convert-box { margin-top: 8px; }
.whodas-works-label { margin-bottom: 8px; }

.btn-full { width: 100%; margin-top: 8px; }
.btn-rec-margin { margin-top: 12px; }

.settings-divider { border-top: 1px solid var(--border-color); margin: 16px 0 8px; padding-top: 12px; }
.settings-loading-text { color: var(--label-text); }

/* Confirm dialog per azioni distruttive (reset paziente, ecc).
   Conforme audit H4 + WCAG 3.3.4 (prevenzione errori). Focus
   iniziale su Annulla, ESC chiude, Tab trap tra i due bottoni. */
/* v0.9.5.245 R5 H6 — Pattern overlay unificato. */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--overlay-backdrop-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--overlay-padding);
}
.confirm-box {
    background: var(--card-bg, #fff);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-lg);
    max-width: 480px;
    width: 100%;
    padding: 22px 24px;
    border-top: 4px solid var(--primary);
}
.confirm-box-danger {
    border-top-color: var(--error-text);
}
.confirm-title {
    font-size: var(--text-base);
    margin: 0 0 8px;
    color: var(--primary-dark, #1F3864);
    font-weight: 700;
}
.confirm-box-danger .confirm-title {
    color: var(--error-text);
}
.confirm-msg {
    margin: 0 0 18px;
    color: var(--body-text);
    line-height: 1.5;
    font-size: var(--font-size-base);
}
.confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.confirm-actions .btn {
    min-width: 110px;
}
.btn-danger {
    background: var(--error-text);
    color: #fff;
    border: 1px solid var(--error-text);
}
.btn-danger:hover {
    background: #6b3008;
}

/* v0.9.5.245 R5 H6 — Pattern overlay unificato (backdrop strong: disclaimer iniziale). */
.disclaimer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--overlay-backdrop-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--overlay-padding);
}

.disclaimer-overlay.disclaimer-hidden {
    display: none;
}

.disclaimer-box {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.disclaimer-text {
    white-space: pre-wrap;
    font-family: var(--font-main);
    font-size: var(--font-size-min);
    line-height: 1.6;
    color: var(--body-text);
    margin-bottom: var(--spacing-lg);
}

.btn-disclaimer-accept {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   UPDATE BANNER — notifica aggiornamento disponibile
   ══════════════════════════════════════════════════════════════ */

/* v0.9.5.245 R5 L2 — brand color allineato (era #1e40af Tailwind blue-800). */
.update-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-dark);
    color: #fff;
    font-size: var(--font-size-md);
    z-index: var(--z-toast);
    position: relative;
}

.update-banner-text {
    flex: 1;
}

.update-banner-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.update-banner-link:hover {
    opacity: 0.85;
}

.update-banner-close {
    background: none;
    border: none;
    color: #fff;
    font-size: var(--text-base);
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}

.update-banner-close:hover {
    opacity: 1;
}












/* Progress circolare */







/* Custom model import */



/* ══════════════════════════════════════════════════════════════
   WCAG 2.1 AA — Accessibility
   ══════════════════════════════════════════════════════════════ */

/* Skip-link (visibile solo a focus da tastiera) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary);
    color: #fff;
    padding: 8px 16px;
    z-index: var(--z-modal);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
    top: 0;
}

/* Focus-visible su tutti gli interattivi */
.section-header:focus-visible,
.btn-icon:focus-visible,

/* Lab Dashboard */
#lab-dashboard { margin-top: 16px; }
.lab-dashboard-title { font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.5px; color: var(--primary-dark, #1a237e); margin-bottom: 8px; text-transform: uppercase; }
.lab-dashboard-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-md); table-layout: fixed; }
.lab-dashboard-table col.lab-col-param   { width: 25%; }
.lab-dashboard-table col.lab-col-valore  { width: 22%; }
.lab-dashboard-table col.lab-col-trend   { width: 8%; }
.lab-dashboard-table col.lab-col-range   { width: 15%; }
.lab-dashboard-table col.lab-col-spark   { width: 30%; }
.lab-dashboard-table th { text-align: left; font-weight: 600; color: var(--primary-dark, #1a237e); border-bottom: 2px solid #C5D3F0; padding: 8px 8px; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.3px; }
.lab-dashboard-table td { padding: 5px 8px; border-bottom: 1px solid #eef0f5; vertical-align: middle; }
.lab-dashboard-table tr:hover { background: #f5f7ff; }
.lab-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.lab-val-normal { color: var(--success-text); }
.lab-val-borderline { color: var(--warning-text); }
.lab-val-abnormal { color: var(--error-text); }
.lab-unit { font-weight: 400; color: var(--text-muted); font-size: var(--font-size-xs); margin-left: 2px; }
.lab-trend { font-size: var(--font-size-md); text-align: center; }
.trend-up-bad, .trend-down-bad { color: var(--error-text); }
.trend-up-good, .trend-down-good { color: var(--success-text); }
.trend-stable { color: var(--warning-text); }
.lab-range { font-size: var(--font-size-xs); color: var(--label-text); }
/* v0.9.5.284 — unità non confrontabile col range: nota neutra (no falso allarme) */
.lab-range-unit-warn { color: var(--warning-text); cursor: help; font-weight: 600; }
.lab-sparkline { display: block; }
.lab-date-small { font-size: var(--font-size-xxs); color: var(--label-text); display: block; }

/* Lab files list */
.lab-files-title { font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.5px; color: var(--primary-dark, #1a237e); margin: 16px 0 8px; text-transform: uppercase; }
.lab-files-list { display: flex; flex-direction: column; gap: 4px; }
.lab-file-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #eef0f5; font-size: var(--font-size-md); }
.lab-file-item:hover { background: #f5f7ff; }
.lab-file-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-file-tipo { font-size: var(--font-size-xs); color: var(--label-text); flex-shrink: 0; }
.lab-file-date { font-size: var(--font-size-xs); color: var(--label-text); flex-shrink: 0; min-width: 70px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   LAB CHART MODAL — grafico ingrandito con valori
   ══════════════════════════════════════════════════════════════ */
/* v0.9.5.245 R5 H6 — Pattern overlay unificato. */
.lab-chart-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-secondary);
    background: var(--overlay-backdrop-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--overlay-padding);
}
.lab-chart-overlay.hidden { display: none; }
.lab-chart-box {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-width: 680px;
    width: 100%;
    padding: 24px;
    position: relative;
}
.lab-chart-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: var(--text-lg);
    cursor: pointer;
    color: var(--label-text);
    line-height: 1;
}
.lab-chart-close:hover { color: var(--body-text); }
.lab-chart-title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: 4px;
}
.lab-chart-subtitle {
    font-size: var(--font-size-sm);
    color: var(--label-text);
    margin-bottom: 16px;
}
.lab-chart-svg { width: 100%; height: auto; }
.lab-chart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: var(--font-size-sm);
}
.lab-chart-table th {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--label-text);
    font-weight: 500;
}
.lab-chart-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--page-bg);
}
.lab-sparkline { cursor: pointer; }
.lab-sparkline:hover { opacity: 0.7; }

/* Screen-reader only (testo nascosto visivamente, leggibile da screen reader) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus-visible esteso a tutti gli interattivi */
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.icd9-chip:focus-visible,
.icd9-other-chip:focus-visible,
.profilo-cond-expandable:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

/* ICD-9 chip keyboard-selected */
.icd9-chip-kbd-selected {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* ── Keyboard shortcuts help overlay ── */
/* v0.9.5.245 R5 H6 — Pattern overlay unificato. */
.kbd-help-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop-medium);
    z-index: var(--z-modal-secondary);
    justify-content: center;
    align-items: center;
    padding: var(--overlay-padding);
}
.kbd-help-overlay.visible {
    display: flex;
}
.kbd-help-box {
    background: #fff;
    border-radius: var(--radius-lg, 12px);
    padding: 28px 36px;
    max-width: 520px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}
.kbd-help-box h2 {
    margin: 0 0 16px;
    font-size: var(--text-base);
    color: var(--primary);
}
.kbd-help-table {
    width: 100%;
    border-collapse: collapse;
}
.kbd-help-table td {
    padding: 8px 0;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--page-bg);
}
.kbd-help-table td:first-child {
    font-weight: 600;
    white-space: nowrap;
    padding-right: 20px;
    color: var(--body-text);
}
.kbd-help-table td:last-child {
    color: var(--label-text);
}
kbd {
    display: inline-block;
    padding: 2px 7px;
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    background: #f4f4f4;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 1px 0 #bbb;
}
.kbd-help-section {
    padding-top: 12px;
    font-weight: 600;
    color: var(--primary);
}
.kbd-help-footer {
    margin: 16px 0 0;
    font-size: var(--font-size-sm);
    color: var(--label-text);
    text-align: center;
}

/* ═══ Score clinici ═══ */
.scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    padding: 8px 0;
}
.score-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, var(--border-color));
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid var(--primary);
}
/* v0.9.5.245 R2 H3 — palette semaforica unificata su brand slate-teal.
   Pre-R2: usava Bootstrap (#28a745 verde, #fd7e14 arancio, #dc3545 rosso,
   #007bff blu, #6c757d grigio). Le score-card cambiavano famiglia
   cromatica rispetto al resto dell'app (banner, badge, callout). */
.score-card.score-normal { border-left-color: var(--success-text); }
.score-card.score-warning { border-left-color: var(--warning-text); }
.score-card.score-error { border-left-color: var(--error-text); }
.score-card.score-info { border-left-color: var(--info-text); }
.score-card.score-missing {
    border-left-color: var(--label-text);
    background: var(--bg-muted);
}
.score-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.score-card-name {
    font-weight: 600;
    font-size: var(--font-size-md);
}
.score-status-ok { color: var(--success-text); }
.score-status-missing { color: var(--warning-text); }
.score-card-value {
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: 4px;
}
.score-card-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--label-text));
    line-height: 1.4;
}
.score-card-inputs {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border, var(--border-color));
}
.score-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.score-input-row label {
    font-size: var(--font-size-sm);
    min-width: 100px;
    color: var(--text-secondary, var(--label-text));
}
.score-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border, var(--border-color));
    border-radius: 4px;
    font-size: var(--font-size-md);
    background: var(--bg-card, #fff);
    color: var(--text, var(--body-text));
}
.score-input:focus {
    border-color: var(--primary);
    /* Focus WCAG 2.4.7: box-shadow come secondo indicatore oltre
       al border-color, visibile anche se l'utente non distingue
       colori (contrasto >= 3:1). */
    outline: none;
    box-shadow: 0 0 0 2px var(--primary);
}
.btn-score-submit {
    margin-top: 8px;
    padding: 5px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.btn-score-submit:hover { opacity: 0.9; }
.score-card-lab-note {
    font-size: var(--font-size-xs);
    color: var(--text-muted, var(--label-text));
    margin-top: 8px;
    font-style: italic;
}
.scores-na-section {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border, var(--border-color));
}
.scores-na-title {
    font-size: var(--font-size-sm);
    color: var(--text-muted, var(--label-text));
    margin-bottom: 4px;
}
.score-card-na {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    background: var(--bg-hover, var(--page-bg));
    color: var(--text-muted, var(--label-text));
}
.score-na-reason {
    font-size: var(--font-size-xxs);
    margin-left: 4px;
    opacity: 0.7;
}
.scores-empty {
    color: var(--text-muted, var(--label-text));
    font-size: var(--font-size-md);
    padding: 12px;
    text-align: center;
}

/* Sorgente prevalente audit trail (v8.2.59):
   fonte con authority massima evidenziata con bordo dorato + stella. */
.profilo-cond-source-principale {
    background: linear-gradient(90deg, #fffbe6 0%, transparent 100%);
    border-left: 3px solid #f0a030;
    padding-left: 8px;
}
.profilo-cond-src-principale {
    font-size: var(--font-size-md);
    color: #c77800;
    margin-right: 4px;
}

/* ────────────────────────────────────────────────────────
   Stima invalidità DM 1992 — supporto decisionale MMG.
   v0.9.5.77 frontend (sprint chiusura 76C).
   NOT parte del certificato firmato. Disclaimer permanente.
   ──────────────────────────────────────────────────────── */
.invalidita-disclaimer {
    background: #fff8e6;
    border-left: 4px solid #d49600;
    padding: 8px 16px;
    margin-bottom: 16px;
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: #5c4400;
    border-radius: 4px;
}
.invalidita-disclaimer strong {
    color: #8a5c00;
}
.invalidita-widget {
    margin-bottom: 16px;
}
.invalidita-summary {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 16px;
    background: var(--bg-card, var(--page-bg));
    border-radius: 6px;
}
.invalidita-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}
.invalidita-circle.it-sub  { background: var(--label-text); }            /* <11% sotto sbarramento */
.invalidita-circle.it-low  { background: var(--success-text); }          /* 11-45% */
.invalidita-circle.it-mid  { background: var(--warning-text); }          /* 46-74% (soglia agevolazioni 46) */
.invalidita-circle.it-high { background: var(--error-text); }            /* >=75% */
.invalidita-pct {
    font-size: var(--text-xl);
    line-height: 1;
}
.invalidita-label {
    font-size: var(--font-size-xxs);
    margin-top: 4px;
    opacity: 0.9;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.invalidita-meta {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
    font-size: var(--font-size-md);
    color: var(--text, var(--body-text));
}
.invalidita-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.invalidita-detail-group {
    border: 1px solid var(--border, var(--border-color));
    border-radius: 4px;
    padding: 8px 12px;
    background: var(--bg-card, #fff);
}
.invalidita-detail-group > summary {
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--text, var(--body-text));
    padding: 4px 0;
}
.invalidita-detail-group[open] > summary {
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border, var(--border-light));
}
.invalidita-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-md);
}
.invalidita-table th,
.invalidita-table td {
    padding: 8px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-light, var(--page-bg));
}
.invalidita-table th {
    font-weight: 600;
    color: var(--text-muted, var(--label-text));
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.invalidita-pct-cell {
    text-align: right !important;
    font-weight: 600;
    color: var(--text, var(--body-text));
}
.invalidita-list {
    margin: 0;
    padding-left: 22px;
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--text, var(--body-text));
}
.invalidita-list code {
    background: var(--bg-hover, var(--page-bg));
    padding: 1px 4px;
    border-radius: 3px;
    font-size: var(--font-size-sm);
}
.invalidita-motivo {
    display: block;
    color: var(--text-muted, var(--label-text));
    font-size: var(--font-size-sm);
    margin-top: 2px;
}
.invalidita-steps li {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}
.invalidita-empty {
    color: var(--text-muted, var(--label-text));
    font-size: var(--font-size-md);
    padding: 16px;
    text-align: center;
    font-style: italic;
}

/* v0.9.5.79 sprint E — Confidence band badge stima IT% */
.conf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 8px;
    color: white;
}
.conf-badge.conf-alta   { background: var(--success-text); }   /* >=70% DM ufficiale */
.conf-badge.conf-media  { background: var(--warning-text); }   /* 40-70% */
.conf-badge.conf-bassa  { background: var(--error-text); }     /* <40% (mostly gravity fallback) */
.conf-badge.conf-nd     { background: var(--label-text); }     /* nessuna minorazione */
.conf-mix-inline {
    color: var(--text-muted, var(--label-text));
    font-size: var(--font-size-sm);
    margin-left: 8px;
}

/* v0.9.5.80 sprint B — Motivo ammissione MinoraIP (audit trail). */
.motivo-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: var(--font-size-xxs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: white;
    background: #757575;
}
.motivo-badge.mot-dm-lookup           { background: #2e7d32; }   /* verde scuro: ufficiale */
.motivo-badge.mot-explicit            { background: #1565c0; }   /* blu scuro: curato */
.motivo-badge.mot-fallback-gravity    { background: #f57c00; }   /* arancio: stima */
.motivo-badge.mot-concurrent-apparato { background: #6a1b9a; }   /* viola: art. 2 concorrenza */

/* v0.9.5.110 bughunt B4 M9 — classe CSS per btn-convert success-state.
   Sostituisce gli inline style btn.style.* (CSP strict compatible). */
.btn-converted-ok {
    background: var(--success-text);
    color: white;
    border-color: var(--success-text);
    cursor: pointer;
}

/* ──────────────────────────────────────────────────────────────────────
   Coverage Banner — v0.9.5.210 Sprint L #3.B
   Mitigation Automation Bias: banner visibile sopra il profilo clinico
   quando la documentazione del paziente è scarsa o datata.
   Wording: ChatGPT Q9 trilaterale 2026-05-27.
   ────────────────────────────────────────────────────────────────────── */
.coverage-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    margin: 12px 0 20px 0;
    border-radius: 6px;
    border-left: 4px solid transparent;
    font-size: var(--text-sm);
    line-height: 1.45;
}

.coverage-banner.coverage-low {
    background: #fff4e5;
    border-left-color: #ed6c02;
    color: #663c00;
}

.coverage-banner.coverage-medium {
    background: #fff8e1;
    border-left-color: #fbc02d;
    color: #6f5800;
}

.coverage-banner-icon {
    font-size: var(--text-lg);
    line-height: 1;
    flex-shrink: 0;
    padding-top: 2px;
}

.coverage-banner-content {
    flex: 1;
}

.coverage-banner-title {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: 4px;
}

.coverage-banner-message {
    margin-bottom: 8px;
}

.coverage-banner-details {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    font-style: italic;
}

/* v0.9.5.298/302 — campo "disabilità intellettiva/relazionale" (vecchio cert):
   checkbox + codice ICD-9 (largh. fissa) + descrizione (flessibile).
   NB: gli input NON usano .field-cert (che ha min-height 120px da textarea):
   sono input a riga singola con altezza normale. */
.disint-check {
    margin: 6px 0 4px;
}
.disint-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.disint-input {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: var(--font-size-min);
    line-height: 38px;
    background: #fff;
    box-sizing: border-box;
}
.disint-input:focus {
    outline: 2px solid var(--primary);
    border-color: var(--primary);
}
.disint-row .disint-icd {
    flex: 0 0 130px;
}
.disint-row .disint-desc {
    flex: 1 1 auto;
}

/* v0.9.5.305 — fonti (referti) per Obiettività e Terapia: i loro termini non
   sono condizioni, quindi mostriamo i referti sorgente sotto al campo. */
.cert-sources {
    margin-top: 6px;
    font-size: var(--text-xs, 12px);
    color: var(--label-text, #5A6B73);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.cert-sources-label {
    font-weight: 600;
}
.cert-source-chip {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--border-color, #C6D0D6);
    border-radius: 10px;
    background: var(--page-bg, #F4F6F7);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}