/* ============================================================
   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 può sovrascrivere.

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

:root{
    --bg: #f6f5f1;
    --panel: #ffffff;
    --ink: #1f2a24;
    --ink-soft: #5b6b62;
    --line: #dcdcd2;
    --accent: #2f5d4f;
    --accent-soft: #e7efe9;
    --accent-2: #9c6b3f;
    --danger: #8c3a3a;
    --radius: 10px;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --mono: "IBM Plex Mono", "SF Mono", monospace;
  }

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

a{ color: var(--accent); }

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

header.top{
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: sticky; top:0; z-index:10;
  }

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

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

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

.brand-text{
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--ink);
  }

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

.btn{
    display:inline-block;
    background: var(--accent);
    color:#fff !important;
    text-decoration:none;
    padding: 10px 22px;
    border-radius: var(--radius);
    font-size:.95rem;
    font-weight:600;
    border:1px solid var(--accent);
  }

.btn:hover{ background:#264c40; }

.intro{ padding: 56px 0 30px; }

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

h1{
    font-family: var(--serif);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight:600;
    line-height:1.18;
    margin-bottom: 14px;
  }

.intro p{ color: var(--ink-soft); max-width: 46em; }

/* layout con indice laterale */
.corpo{
    display:grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    padding: 30px 0 70px;
    align-items:start;
  }

aside.indice{
    position: sticky; top: 76px;
    border-left: 2px solid var(--line);
    padding-left: 16px;
    font-size:.88rem;
  }

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

aside.indice a{
    display:block;
    color: var(--ink-soft);
    text-decoration:none;
    padding: 4px 0;
  }

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

.num{
    font-family: var(--serif);
    color: var(--accent-2);
    font-size: 1.5rem;
    display:block;
    margin-bottom: 2px;
  }

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

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

.tab-nome{
    font-family: var(--mono);
    font-size:.85em;
    background: var(--accent-soft);
    border-radius: 6px;
    padding: 1px 7px;
  }

.esempio{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin: 14px 0 18px;
    font-family: var(--serif);
    font-size:.96rem;
    color: var(--ink);
    max-width: 56em;
  }

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

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

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

footer{
    border-top: 1px solid var(--line);
    padding: 24px 0 40px;
    font-size:.85rem;
    color: var(--ink-soft);
  }

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

a:focus-visible, .btn:focus-visible{
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
  }

/* Blocco "cosa deve contenere il referto" */
.checklist{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 20px 16px 20px;
    margin: 14px 0 20px;
    max-width: 58em;
  }

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

.checklist ul{ margin: 0 0 0 20px; }

.checklist li{ margin-bottom: 5px; font-size:.95rem; }

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

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

.fonti{
    font-size:.86rem; color: var(--ink-soft);
    max-width: 60em;
  }

.fonti li{ margin-bottom: 7px; }

.fonti a{ word-break: break-word; }

.disclaimer{
    border: 1px solid var(--line);
    border-left: 4px solid var(--danger);
    background: #fbf6f6;
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 26px 0 0;
    font-size:.9rem;
    max-width: 58em;
  }

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

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

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

.scheda:hover{ border-color: var(--accent); box-shadow: 0 2px 10px rgba(47,93,79,.10); }

.scheda b{
    display:block;
    font-family: var(--serif);
    font-size: 1.12rem;
    color: var(--accent);
    margin-bottom: 6px;
  }

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

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

.img-slot{
    margin: 18px 0 24px;
    max-width: 640px;
  }

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

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

.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: 4px;
    padding: 2px 7px;
  }

.img-slot figcaption{
    font-size:.82rem;
    color: var(--ink-soft);
    margin-top:7px;
    font-style:italic;
  }


/* Selettore di lingua IT/EN nelle pagine pubbliche (vedi assets/lingua.js). */
.sel-lingua-sito{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-shrink:0; }
.sel-lingua-sito button{ appearance:none; background:#fff; border:none; color:var(--ink-soft);
  font-family:inherit; font-size:.85rem; font-weight:600; padding:9px 13px; cursor:pointer;
  transition: background .15s, color .15s; }
.sel-lingua-sito button + button{ border-left:1px solid var(--line); }
.sel-lingua-sito button:hover{ background:var(--accent-soft); color:var(--accent); }
.sel-lingua-sito button.attiva{ background:var(--accent); color:#fff; }
.avviso-lingua{ max-width:1060px; margin:10px auto 0; padding:10px 16px; background:var(--accent-soft);
  border-left:3px solid var(--accent); border-radius:6px; font-size:.88rem; color:var(--ink); }
@media (max-width:720px){ .sel-lingua-sito button{ padding:11px 15px; font-size:.9rem; min-height:44px; } }