/* ============================================================
   VascularReport — foglio di stile comune del sito
   ------------------------------------------------------------
   Contiene le regole IDENTICHE condivise da tutte le pagine
   di contenuto (guida, linee guida, privacy, tecnica d'esame).
   Le regole specifiche di una singola pagina restano nel
   blocco <style> della pagina stessa, che viene caricato DOPO
   questo file e quindi lo puo sovrascrivere.

   Modificando questo file si cambia l'aspetto di tutte le
   pagine in una volta sola: e il presupposto della versione
   bilingue (le pagine /it/ e /en/ condividono lo stesso stile).

   Revisione 2026-08: impianto visivo modernizzato.
   - tipografia sans su tutta la gerarchia (i titoli erano serif)
   - palette neutra fredda, il verde resta il colore del marchio
   - superfici con ombre leggere al posto dei bordi pieni
   - supporto al tema scuro del sistema operativo
   I NOMI DELLE CLASSI E DELLE VARIABILI NON SONO CAMBIATI:
   ogni pagina esistente continua a funzionare senza modifiche.
   ============================================================ */

:root{
    /* Tema: bianco, azzurro, blu.
       color-scheme comunica al browser quali temi supporta la pagina:
       scrollbar, controlli nativi e sfondo iniziale si adattano da soli
       ed evitano il lampo bianco al caricamento in tema scuro. */
    color-scheme: light dark;
    accent-color: #0d5fb0;

    /* superfici */
    --bg: #ffffff;
    --bg-alt: #f2f7fc;          /* fasce alternate: bianco appena azzurrato */
    --panel: #ffffff;
    --panel-2: #f7fafd;

    /* testo */
    --ink: #0d1b2a;
    --ink-soft: #4a6076;
    --ink-faint: #5a738c;

    /* linee e bordi */
    --line: #dde8f2;
    --line-strong: #c3d4e5;

    /* marchio */
    --accent: #0d5fb0;          /* blu principale */
    --accent-hover: #094c8f;
    --accent-bright: #2e90d9;   /* azzurro */
    --accent-soft: #e6f1fb;
    --accent-tint: #f3f8fd;
    --accent-2: #0b6f9f;        /* azzurro profondo, per etichette e numeri */
    --accent-2-soft: #e4f4fb;
    --danger: #b3261e;
    --danger-soft: #fdf2f1;

    /* forma */
    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 20px;

    /* profondita */
    --shadow-xs: 0 1px 2px rgba(13,27,42,.05);
    --shadow-sm: 0 1px 3px rgba(13,27,42,.07), 0 1px 2px rgba(13,27,42,.04);
    --shadow-md: 0 4px 14px rgba(13,27,42,.08), 0 1px 3px rgba(13,27,42,.05);
    --shadow-lg: 0 18px 44px rgba(13,27,42,.12), 0 4px 12px rgba(13,27,42,.06);

    /* caratteri
       --serif conserva il nome storico ma non e piu un carattere
       con grazie: era la scelta che datava di piu il sito. */
    --serif: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  ui-monospace, "SF Mono", "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

    --ease: cubic-bezier(.4,0,.2,1);
  }

@media (prefers-color-scheme: dark){
  :root{
    accent-color: #6ab4f0;
    --bg: #0b1420;
    --bg-alt: #101c2b;
    --panel: #13202f;
    --panel-2: #182838;
    --ink: #e6eef7;
    --ink-soft: #a8bdd1;
    --ink-faint: #8ea6bd;
    --line: #22344a;
    --line-strong: #31485f;
    --accent: #6ab4f0;
    --accent-hover: #8cc7f6;
    --accent-bright: #6ab4f0;
    --accent-soft: #17293c;
    --accent-tint: #14212f;
    --accent-2: #58c4ea;
    --accent-2-soft: #10242e;
    --danger: #f19d97;
    --danger-soft: #2a1614;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 14px rgba(0,0,0,.42);
    --shadow-lg: 0 18px 44px rgba(0,0,0,.5);
  }
}

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

html{ scroll-behavior:smooth; }

/* L'intestazione resta fissa in alto (header.top, position:sticky): senza
   questo margine il collegamento a un'ancora porterebbe il bersaglio
   esattamente sotto la barra, che lo coprirebbe. 'scroll-margin-top' lo
   ferma piu' in alto della barra, cosi' il titolo di destinazione resta
   la prima cosa che si legge. */
:target{ scroll-margin-top: 84px; }
h1[id], h2[id], h3[id], section[id]{ scroll-margin-top: 84px; }

body{
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv02","cv03","cv04","ss01";
  }

a{ color: var(--accent); text-underline-offset: 3px; }

img{ max-width:100%; height:auto; }

::selection{ background: var(--accent-soft); color: var(--accent); }

.wrap{ max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- intestazione ---------- */

header.top{
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    position: sticky; top:0; z-index:50;
  }

.top-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap: 18px;
    padding: 12px 0;
    flex-wrap: wrap;
  }

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    flex-shrink:0;
  }

.brand img{ height:38px; width:auto; }

.brand-text{
    font-family: var(--serif);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing:-.015em;
    color: var(--ink);
  }

.brand-text b{ color: var(--accent); font-weight:700; }

/* Selettore di lingua ("English"/"Italiano"): sta sulla riga del marchio,
   subito dopo il logo, e non piu' in fondo ai pulsanti del menu. Cosi' si
   trova sempre nello stesso punto, in ogni pagina e a ogni larghezza.

   'margin-right:auto' lo tiene attaccato al logo e spinge il menu verso
   destra; il filetto verticale lo separa dal marchio senza aggiungere
   riquadri. */
.top-inner > .cambio-lingua{
    margin-right: auto;
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }

/* Con tre lingue i collegamenti sono due (il secondo lo crea
   assets/lingua.js) e stanno dentro .cambio-lingua-gruppo. Il contenitore
   prende il posto che prima era del collegamento singolo: e' lui a portare
   il filetto verticale e a spingere il menu verso destra, cosi' la coppia
   si sposta tutta intera invece di dividersi ai due lati della riga. */
.cambio-lingua-gruppo{
    display:inline-flex; align-items:center; gap:2px; flex-shrink:0;
  }
.top-inner > .cambio-lingua-gruppo{
    margin-right: auto;
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }
/* Dentro il gruppo il filetto non si ripete: separa la coppia dal marchio,
   non i due collegamenti fra loro. */
.cambio-lingua-gruppo > .cambio-lingua{ border-left:none; padding-left:4px; }

/* Nel piede della barra laterale i collegamenti sono due pulsanti tondi:
   la distanza fra loro deve essere quella degli altri pulsanti della fila,
   non quella stretta dell'intestazione. */
.menu-piede .cambio-lingua-gruppo{ gap:10px; }
.menu-piede .cambio-lingua-gruppo > .cambio-lingua{ padding-left:0; }

/* ---------- pulsanti ----------
   .btn        = azione primaria, riempita
   .btn.secondary = azione secondaria, contorno
   .btn.ghost  = azione terziaria, solo testo
   Le pagine che usano solo .btn continuano a funzionare. */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background: var(--accent);
    color:#fff !important;
    text-decoration:none;
    padding: 11px 22px;
    border-radius: 10px;
    font-size:.94rem;
    font-weight:600;
    letter-spacing:-.005em;
    border:1px solid var(--accent);
    box-shadow: var(--shadow-xs);
    transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
    white-space: nowrap;
    cursor: pointer;
  }

.btn:hover{
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

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

.btn.secondary{
    background: var(--panel);
    color: var(--accent) !important;
    border-color: var(--line-strong);
    box-shadow: var(--shadow-xs);
  }
.btn.secondary:hover{
    background: var(--accent-tint);
    border-color: var(--accent);
  }

.btn.ghost{
    background: transparent;
    color: var(--accent) !important;
    border-color: transparent;
    box-shadow: none;
    padding-left: 12px; padding-right: 12px;
  }
.btn.ghost:hover{ background: var(--accent-soft); box-shadow: none; }

/* .btn.rosso = variante rossa, usata per il pulsante "Calcolatori medici"
   nell'intestazione: lo distingue a colpo d'occhio dal pulsante blu che
   apre l'applicazione di refertazione.

   Il rosso e' volutamente lo stesso nei due temi: su fondo bianco e su
   fondo scuro il contrasto con il testo bianco resta di circa 6:1, sopra
   la soglia AA, mentre --danger in tema scuro diventa un rosa chiaro
   pensato per i messaggi di errore e non per una superficie piena. */
.btn.rosso{
    background: #c0271b;
    border-color: #c0271b;
    color: #fff !important;
  }
.btn.rosso:hover{
    background: #9e1e14;
    border-color: #9e1e14;
  }

@media (prefers-color-scheme: dark){
  .btn{ color:#0b1420 !important; }
  .btn.secondary, .btn.ghost{ color: var(--accent) !important; }
  .btn.rosso{ color:#fff !important; }
}

/* ---------- testate di pagina ---------- */

/* Solo verticale: con la scorciatoia 'padding' questa regola azzerava
   anche i 24px orizzontali di .wrap (che sta piu' su nel foglio), e il
   titolo delle pagine finiva incollato al bordo — allo schermo sul
   telefono, alla barra laterale sul desktop. */
.intro{ padding-top: 60px; padding-bottom: 28px; }

.eyebrow{
    font-family: var(--mono);
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.13em;
    color: var(--accent-2);
    margin-bottom: 14px;
    font-weight:500;
  }

h1{
    font-family: var(--serif);
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 700;
    line-height:1.12;
    letter-spacing:-.028em;
    margin-bottom: 16px;
    text-wrap: balance;
  }

.intro p{
    color: var(--ink-soft);
    max-width: 44em;
    font-size: 1.06rem;
  }

/* ---------- layout con indice laterale ---------- */

.corpo{
    display:grid;
    /* minmax(0,1fr) e non 1fr: senza, la colonna del testo non puo'
       scendere sotto la larghezza del suo contenuto piu' largo (una
       tabella, un titolo lungo) e sfonda la finestra a destra. */
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 52px;
    /* Solo verticale, come per .intro: con la scorciatoia si azzeravano
       anche i 24px orizzontali di .wrap e il testo delle pagine arrivava
       a filo del bordo destro della finestra. */
    padding-top: 26px;
    padding-bottom: 80px;
    align-items:start;
  }

aside.indice{
    position: sticky; top: 84px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 16px;
    font-size:.88rem;
  }

aside.indice .titolo{
    font-family: var(--mono);
    font-size:.66rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
  }

aside.indice a{
    display:block;
    color: var(--ink-soft);
    text-decoration:none;
    padding: 6px 9px;
    border-radius: 7px;
    transition: background .15s var(--ease), color .15s var(--ease);
  }

aside.indice a:hover{ color: var(--accent); background: var(--accent-soft); }

.num{
    font-family: var(--mono);
    color: var(--accent-2);
    font-size: .82rem;
    font-weight:600;
    letter-spacing:.06em;
    display:block;
    margin-bottom: 4px;
  }

/* ---------- elementi in linea ---------- */

.ui{
    font-family: var(--sans);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 2px 9px;
    font-size:.88em;
    font-weight:500;
    white-space: nowrap;
  }

.ui.verde{ background: var(--accent); border-color: var(--accent); color:#fff; }

.tab-nome{
    font-family: var(--mono);
    font-size:.84em;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 7px;
    padding: 2px 8px;
  }

/* ---------- blocchi di contenuto ---------- */

.esempio{
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin: 16px 0 20px;
    font-family: var(--sans);
    font-size:.96rem;
    color: var(--ink);
    max-width: 56em;
    box-shadow: var(--shadow-xs);
  }

.esempio .etichetta{
    font-family: var(--mono);
    font-size:.66rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: var(--ink-faint);
    margin-bottom: 9px;
  }

.checklist{
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin: 16px 0 22px;
    max-width: 58em;
    box-shadow: var(--shadow-xs);
  }

.checklist .titolo{
    font-family: var(--mono);
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color: var(--accent);
    margin-bottom: 11px;
  }

.checklist ul{ margin: 0 0 0 20px; }
.checklist li{ margin-bottom: 6px; font-size:.95rem; }

.disclaimer{
    border: 1px solid var(--line);
    border-left: 3px solid var(--danger);
    background: var(--danger-soft);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin: 28px 0 0;
    font-size:.9rem;
    max-width: 58em;
  }

.disclaimer b{ color: var(--danger); display:block; margin-bottom: 5px; }

td.val{ font-family: var(--mono); font-size:.86rem; white-space:nowrap; }

.fonte-tab{ font-size:.8rem; color: var(--ink-faint); margin: 0 0 20px; max-width: 60em; }

.fonti{ font-size:.86rem; color: var(--ink-soft); max-width: 60em; }
.fonti li{ margin-bottom: 8px; }
.fonti a{ word-break: break-word; }

/* ---------- griglia di schede ---------- */

.griglia{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 16px;
  }

.scheda{
    display:block;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    text-decoration:none;
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
  }

.scheda:hover{
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

.scheda b{
    display:block;
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight:650;
    letter-spacing:-.015em;
    color: var(--accent);
    margin-bottom: 7px;
  }

.scheda span{ font-size:.91rem; color: var(--ink-soft); }

/* ---------- chiusura pagina ---------- */

.cta-fine{
    border-top: 1px solid var(--line);
    text-align:center;
    padding: 56px 0 64px;
  }

.cta-fine p{ color: var(--ink-soft); margin-bottom: 24px; }

footer{
    border-top: 1px solid var(--line);
    background: var(--bg-alt);
    padding: 28px 0 44px;
    font-size:.85rem;
    color: var(--ink-faint);
  }

footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

a:focus-visible, .btn:focus-visible, button:focus-visible{
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
    border-radius: 4px;
  }

.bozza-banner{
    background: var(--accent-2);
    color:#fff;
    text-align:center;
    font-size:.85rem;
    font-weight:600;
    padding: 9px 12px;
  }

/* ---------- immagini con didascalia ---------- */

.img-slot{ margin: 20px 0 26px; max-width: 660px; }

.img-slot img{
    display:block;
    width:100%;
    height:auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }

.img-slot .img-slot-vuoto{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height: 220px;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--accent-tint);
    color: var(--ink-soft);
    font-size:.85rem;
    text-align:center;
    padding: 24px;
  }

.img-slot .img-slot-vuoto .emoji{ font-size:1.9rem; }

.img-slot .img-slot-vuoto code{
    font-family: var(--mono);
    font-size:.75rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 2px 7px;
  }

.img-slot figcaption{
    font-size:.82rem;
    color: var(--ink-faint);
    margin-top:9px;
  }

/* ---------- cambio di lingua (vedi assets/lingua.js) ----------
   Non è più una coppia di pulsanti IT/EN ma un solo collegamento
   discreto verso l'altra lingua: chi legge in italiano vede
   "English" con la bandiera britannica, chi legge in inglese vede
   "Italiano" con il tricolore. Mostrare solo la lingua di
   destinazione elimina la domanda "quale dei due è quello attivo?". */

.cambio-lingua{
    display:inline-flex; align-items:center; gap:7px;
    text-decoration:none; color:var(--ink-faint);
    font-size:.82rem; font-weight:500; letter-spacing:.01em;
    padding:6px 4px; border-bottom:1px solid transparent;
    flex-shrink:0; white-space:nowrap;
    transition: color .15s var(--ease), border-color .15s var(--ease);
  }
.cambio-lingua:hover,
.cambio-lingua:focus-visible{ color:var(--accent); border-bottom-color:var(--accent); }

.cambio-lingua .bandiera{
    width:19px; height:13px; flex-shrink:0; display:block;
    border-radius:2px; object-fit:cover;
    box-shadow:0 0 0 1px rgba(0,0,0,.14);
  }

/* Il vecchio selettore a due pulsanti non è più presente nelle pagine;
   le regole restano solo per non rompere eventuali copie non aggiornate. */
.sel-lingua-sito{ display:inline-flex; gap:6px; flex-shrink:0; }
.sel-lingua-sito button{
    appearance:none; background:transparent; border:1px solid var(--line);
    border-radius:8px; color:var(--ink-soft);
    font-family:inherit; font-size:.82rem; font-weight:600; padding:8px 12px; cursor:pointer;
  }
.sel-lingua-sito button.attiva{ background:var(--accent); color:#fff; }

.avviso-lingua{
    max-width:1140px; margin:12px auto 0; padding:11px 18px;
    background:var(--accent-soft);
    border-left:3px solid var(--accent);
    border-radius:8px; font-size:.88rem; color:var(--ink);
  }

/* ---------- adattamento agli schermi piccoli ---------- */

@media (max-width: 900px){
  .corpo{ grid-template-columns: 1fr; gap: 26px; }
  aside.indice{ position: static; }
}

@media (max-width: 720px){
  .wrap{ padding: 0 18px; }
  .intro{ padding-top: 40px; padding-bottom: 20px; }   /* solo verticale: vedi sopra */
  .top-inner{ padding: 10px 0; gap: 12px; }
  .brand img{ height: 32px; }
  .cambio-lingua{ font-size:.88rem; min-height:44px; padding:6px 2px; }
  :target,
  h1[id], h2[id], h3[id], section[id]{ scroll-margin-top: 72px; }
  .btn{ padding: 12px 20px; min-height: 44px; }
  footer .wrap{ flex-direction: column; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- navigazione principale (condivisa da tutte le pagine) ----------
   Il menu dell'intestazione è identico su tutto il sito: le sue regole
   stanno qui e non nel <style> delle singole pagine, così cambiarle in un
   punto solo cambia l'intestazione ovunque.

   La specificità è volutamente alta (nav.mainnav a.nav-voce) perché alcune
   pagine hanno ancora nel proprio blocco <style> una regola generica
   "nav.mainnav a" che, caricata dopo questo foglio, prevarrebbe. */

nav.mainnav{
  display:flex;
  gap:26px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
  row-gap:10px;
}
nav.mainnav a.nav-voce{
  text-decoration:none;
  color: var(--ink-soft);
  font-size:.9rem;
  font-weight:500;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
nav.mainnav a.nav-voce:hover{ color: var(--accent); border-bottom-color: var(--accent); }
/* I due pulsanti principali ("Calcolatori medici" e "Apri VASCULAR REPORT")
   stanno accanto al marchio, non piu' in fondo alle voci del menu: sono le
   due azioni della pagina e devono trovarsi subito, nello stesso punto in
   ogni pagina e a ogni larghezza di schermo. */
.top-inner > .nav-btns,
nav.mainnav .nav-btns{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* Attaccati al marchio: il 'gap' di 18px della riga verrebbe letto come
   uno stacco, quindi lo si riduce a 10px solo qui. Il resto dello spazio
   libero finisce dopo il selettore di lingua (margin-right:auto), non fra
   logo e pulsanti. */
.top-inner > .nav-btns{ margin-left:-8px; }

/* Sotto gli 860 px (telefono e tablet in verticale) il menu testuale
   sparisce, ma i DUE pulsanti principali restano: sul telefono sono le
   uniche azioni disponibili e stanno in cima, sulla riga del marchio o
   subito sotto, senza menu da aprire.

   I pulsanti si stringono (testo piu' piccolo, meno spaziatura interna e
   possibilita' di andare a capo, che sovrascrive il nowrap di .btn) ma
   restano accanto al marchio; solo sotto i 520 px prendono una riga tutta
   loro. L'altezza minima di 44 px rispetta le indicazioni sulle aree
   toccabili.

   Il selettore di lingua non sta fra i pulsanti: resta sulla stessa riga,
   all'estremita' destra (vedi '.top-inner > .cambio-lingua'). */
@media (max-width: 860px){
  /* Restano solo marchio, pulsanti e selettore di lingua: le voci testuali
     del menu spariscono e con esse il contenitore, che altrimenti
     lascerebbe una riga vuota sotto l'intestazione. */
  nav.mainnav{ display:none; }

  .top-inner{ gap:8px; }

  /* I pulsanti restano sulla riga del marchio anche sul telefono: si
     stringono invece di scendere su una riga propria centrata. Il
     selettore di lingua va all'estremita' destra della stessa riga. */
  .top-inner > .nav-btns{
    margin-left:0;
    gap:6px;
    flex:0 1 auto;
    min-width:0;
  }
  .top-inner > .nav-btns .btn{
    min-width:0;
    white-space:normal;
    text-align:center;
    line-height:1.2;
    font-size:.8rem;
    padding:9px 11px;
    min-height:44px;
  }
  .top-inner > .cambio-lingua,
  .top-inner > .cambio-lingua-gruppo{ margin-right:0; margin-left:auto; }
}

/* Schermo molto stretto: la riga non basta piu' per marchio e pulsanti
   insieme, quindi i due pulsanti prendono una riga intera e se la
   dividono a meta'. */
@media (max-width: 520px){
  .top-inner > .nav-btns{
    width:100%;
    flex:1 1 100%;
    gap:8px;
    align-items:stretch;
  }
  .top-inner > .nav-btns .btn{ flex:1 1 0; }
}

/* Schermi molto stretti: si riduce ancora il testo prima di far sfondare
   la riga, invece di impilare i pulsanti uno sotto l'altro (occuperebbero
   troppa altezza in un'intestazione che resta fissa in alto). */
@media (max-width: 380px){
  .top-inner > .nav-btns .btn{ font-size:.8rem; padding:9px 8px; }
}


/* VR: copyright sempre centrato in tutte le pagine */
.copyright,
footer .copyright,
footer.copyright,
[data-copyright="vr"]{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  max-width:1140px;
  box-sizing:border-box;
}


/* ------------------------------------------------------------
   Riquadro di confronto e tabelle scorrevoli.

   Nascevano dentro <style> in linee-guida.html. Quando le linee
   guida sono state distribuite nelle pagine di tecnica, distretto
   per distretto (09/09/2026), il markup si e' spostato ma queste
   due regole erano rimaste indietro: senza, i riquadri di
   confronto perdono la banda colorata e le tabelle larghe
   sfondano la pagina sui telefoni. Stanno qui e non nei singoli
   <style> cosi' valgono ovunque, una volta sola.

   '.box.confronto' pesa piu' di '.box': vince sulla definizione
   che ogni pagina tiene nel proprio <style>, anche se questa
   arriva prima nel foglio. */
.box.confronto{ border-left-color: var(--accent-2); background: #f5fafd; }
.box.confronto b:first-child{ color: var(--accent-2); }

@media (prefers-color-scheme: dark){
  .box.confronto{ background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
}

/* Il riquadro scorre a qualunque larghezza: una tabella con molte
   colonne puo' non entrare nella colonna del testo anche su schermo
   largo — succedeva alle linee guida anticoagulanti, che sfondavano la
   finestra di 262px a 1180px. Quando la tabella ci sta, la barra di
   scorrimento non compare e non cambia niente. */
.tab-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px){
  .tab-scroll table{ min-width: 460px; }
}


/* ---------- sommario in cima alla pagina ----------
   Fila di pastiglie con le sezioni della pagina, alternativa alla
   colonna sticky 'aside.indice' per le pagine senza indice laterale.
   Nato in /tecnica-esame-ecd il 09/09/2026 e spostato qui quando lo
   hanno adottato anche /guida e /link-utili.

   Lo rilegge anche assets/menu-laterale.js, che ne fa il sotto-menu
   della barra laterale: le due cose restano in sincrono da sole. */
.sommario-pagina{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }
.sommario-pagina a{
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 7px 15px;
    border-radius: 100px;
    transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  }
.sommario-pagina a:hover{
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-tint);
  }
.sommario-pagina a.attiva{
    color: var(--accent);
    font-weight: 600;
    border-color: var(--accent);
  }
/* Etichetta di gruppo: serve dove le voci sono tante e divise per
   argomento, come in /link-utili. Occupa una riga intera. */
.sommario-pagina .titolo{
    flex: 0 0 100%;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 12px 0 -2px;
  }
/* Il primo gruppo non ha bisogno dello stacco: e' gia' in cima. */
.sommario-pagina > .titolo:first-child{ margin-top: 0; }

@media (max-width: 720px){
  .sommario-pagina{ gap: 6px; }
  .sommario-pagina a{ font-size: .84rem; padding: 6px 13px; }
}