@charset "UTF-8";
/* ==========================================================================
   medicinatrasfusionaleag.it — foglio di stile
   1. Token   2. Basi   3. Layout   4. Testata   5. Apertura
   6. Elenco delle procedure   7. Scheda   8. Tabelle   9. Componenti
   10. Piede   11. Stampa e preferenze
   ========================================================================== */

/* ───────────────────────────────────────────────────────────── 1. Token ── */
:root {
  --sfondo:        #f6f7f9;
  --sfondo-alt:    #edf0f4;
  --superficie:    #ffffff;
  --superficie-2:  #f3f5f8;
  --bordo:         #dee3ea;
  --bordo-forte:   #c3ccd7;
  --testo:         #161a20;
  --testo-tenue:   #576070;
  --accento:       #0d5b6b;
  --accento-forte: #08424e;
  --accento-tenue: #e5f1f3;
  --accento-bordo: #b9d9df;
  --su-accento:    #ffffff;
  --vigore:        #12613f;
  --vigore-tenue:  #e6f3ec;
  --vigore-bordo:  #b7ddc8;
  --allarme:       #97231f;
  --allarme-tenue: #fbeceb;
  --allarme-bordo: #eec9c6;
  --neutro:        #4f5865;
  --neutro-tenue:  #eceef2;
  --fuoco:         #1d4ed8;
  --ombra-s: 0 1px 2px rgba(18, 24, 33, .05), 0 1px 3px rgba(18, 24, 33, .05);
  --ombra-m: 0 2px 4px rgba(18, 24, 33, .04), 0 10px 24px rgba(18, 24, 33, .07);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --t--1: clamp(.8rem, .78rem + .1vw, .855rem);
  --t-0:  clamp(.985rem, .96rem + .15vw, 1.055rem);
  --t-1:  clamp(1.1rem, 1.05rem + .25vw, 1.24rem);
  --t-2:  clamp(1.3rem, 1.2rem + .5vw, 1.58rem);
  --t-3:  clamp(1.55rem, 1.35rem + .95vw, 2.1rem);
  --t-4:  clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;
  --raggio-s: 6px; --raggio: 10px; --raggio-l: 16px;
  --largo: 72rem; --stretto: 54rem; --testata-h: 4.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --sfondo:        #12161b;
    --sfondo-alt:    #171c23;
    --superficie:    #1a2029;
    --superficie-2:  #212933;
    --bordo:         #2e3742;
    --bordo-forte:   #445062;
    --testo:         #e6eaef;
    --testo-tenue:   #a2adba;
    --accento:       #6cc2d3;
    --accento-forte: #93d6e3;
    --accento-tenue: #102b32;
    --accento-bordo: #26505c;
    --su-accento:    #06222a;
    --vigore:        #74d0a1;
    --vigore-tenue:  #10291f;
    --vigore-bordo:  #275842;
    --allarme:       #f0a19c;
    --allarme-tenue: #2c1917;
    --allarme-bordo: #5c322e;
    --neutro:        #aab3c0;
    --neutro-tenue:  #232a34;
    --fuoco:         #8ab4ff;
    --ombra-s: 0 1px 2px rgba(0, 0, 0, .4);
    --ombra-m: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .35);
  }
}

/* ───────────────────────────────────────────────────────────── 2. Basi ── */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata-h) + 1rem);
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 { line-height: 1.22; letter-spacing: -.012em; margin: 0 0 var(--s-3); font-weight: 650; }
h1 { font-size: var(--t-4); letter-spacing: -.02em; }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-1); }
p  { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accento); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accento-forte); }

code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  padding: .08em .38em;
  word-break: break-all;
}

:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 2px; border-radius: 3px; }

.visuale-nascosta {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 60;
  background: var(--accento); color: var(--su-accento);
  padding: var(--s-3) var(--s-4); border-radius: var(--raggio);
  transition: top .15s ease;
}
.salta:focus { top: var(--s-3); color: var(--su-accento); }

/* ─────────────────────────────────────────────────────────── 3. Layout ── */
.contenitore { width: min(100% - 2.5rem, var(--largo)); margin-inline: auto; }
.contenitore--stretto { width: min(100% - 2.5rem, var(--stretto)); padding-block: var(--s-7) var(--s-8); }
main { flex: 1 0 auto; }

/* ────────────────────────────────────────────────────────── 4. Testata ── */
.testata {
  position: sticky; top: 0; z-index: 40;
  background: var(--sfondo);
  background: color-mix(in srgb, var(--sfondo) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--bordo);
}
.testata__interno {
  min-height: var(--testata-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; padding-block: var(--s-3);
}
.marchio { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; }
.marchio__segno { width: 2rem; height: 2rem; flex: none; color: var(--accento); }
.marchio__testo { display: flex; flex-direction: column; line-height: 1.25; }
.marchio__nome { font-weight: 660; letter-spacing: -.015em; }
.marchio__nota { font-size: var(--t--1); color: var(--testo-tenue); }

.navigazione ul { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.navigazione a {
  display: block; padding: var(--s-2) var(--s-3); border-radius: var(--raggio-s);
  color: var(--testo-tenue); text-decoration: none; font-size: var(--t--1); font-weight: 520;
}
.navigazione a:hover { background: var(--sfondo-alt); color: var(--testo); }
.navigazione a[aria-current="page"] {
  color: var(--accento); background: var(--accento-tenue);
  box-shadow: inset 0 0 0 1px var(--accento-bordo);
}

/* ───────────────────────────────────────────────────────── 5. Apertura ── */
.apertura {
  background: linear-gradient(180deg, var(--sfondo-alt), var(--sfondo));
  border-bottom: 1px solid var(--bordo);
  padding-block: var(--s-7) var(--s-6);
}
.apertura__occhiello {
  font-size: var(--t--1); font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accento); margin-bottom: var(--s-3);
}
.apertura h1 { max-width: 22ch; }
.apertura__testo { max-width: 64ch; font-size: var(--t-1); color: var(--testo-tenue); }
.apertura__avvertenza {
  max-width: 64ch;
  border-left: 3px solid var(--accento-bordo);
  background: var(--accento-tenue);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 var(--raggio-s) var(--raggio-s) 0;
}

.cruscotto {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0;
}
.cruscotto > div {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--s-3) var(--s-4); min-width: 11rem;
  box-shadow: var(--ombra-s);
}
.cruscotto dt {
  font-size: var(--t--1); color: var(--testo-tenue); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600;
}
.cruscotto dd { margin: var(--s-1) 0 0; font-size: var(--t-2); font-weight: 640; font-variant-numeric: tabular-nums; }

/* ────────────────────────────────────────── 6. Elenco delle procedure ── */
.filtri {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-4) var(--s-5);
  padding: var(--s-4) 0 0; margin-top: var(--s-6);
}
.filtri__cerca { display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 18rem; }
.filtri__cerca label { font-size: var(--t--1); font-weight: 600; color: var(--testo-tenue); }
.filtri__cerca input {
  font: inherit; color: inherit; background: var(--superficie);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio);
  padding: var(--s-3) var(--s-4); width: 100%;
}
.filtri__aree { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filtro {
  font: inherit; font-size: var(--t--1); font-weight: 550; cursor: pointer;
  background: var(--superficie); color: var(--testo-tenue);
  border: 1px solid var(--bordo); border-radius: 999px; padding: var(--s-2) var(--s-4);
}
.filtro:hover { border-color: var(--bordo-forte); color: var(--testo); }
.filtro--attivo, .filtro[aria-pressed="true"] {
  background: var(--accento); border-color: var(--accento); color: var(--su-accento);
}
.filtri__esito { margin: var(--s-4) 0 0; color: var(--testo-tenue); font-size: var(--t--1); }

.sezione { margin-top: var(--s-7); }
.sezione__titolo {
  padding-bottom: var(--s-3); border-bottom: 2px solid var(--accento-bordo); margin-bottom: var(--s-3);
}
.sezione__nota { color: var(--testo-tenue); max-width: 70ch; margin-bottom: var(--s-5); }

.elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.voce {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-l); padding: var(--s-5); box-shadow: var(--ombra-s);
}
.voce__testa { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.voce__codice {
  font-family: var(--mono); font-size: var(--t--1); font-weight: 600;
  letter-spacing: .02em; color: var(--testo-tenue);
}
.voce__titolo { margin-bottom: var(--s-2); }
.voce__titolo a { color: inherit; text-decoration: none; }
.voce__titolo a:hover { color: var(--accento); text-decoration: underline; }
.voce__sintesi { color: var(--testo-tenue); max-width: 72ch; margin-bottom: var(--s-3); }
.voce__meta {
  font-size: var(--t--1); color: var(--testo-tenue); font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}
.voce__azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }

/* ──────────────────────────────────────────────────────────── 7. Scheda ── */
.briciole { font-size: var(--t--1); color: var(--testo-tenue); margin-bottom: var(--s-5); }
.briciole a { color: var(--testo-tenue); }
.briciole span { padding-inline: var(--s-1); }

.scheda__codice {
  font-family: var(--mono); font-weight: 620; color: var(--accento);
  letter-spacing: .03em; margin-bottom: var(--s-2);
}
.scheda__sintesi { font-size: var(--t-1); color: var(--testo-tenue); max-width: 68ch; }
.scheda__dati {
  display: flex; flex-wrap: wrap; gap: var(--s-5); margin: var(--s-5) 0;
  padding: var(--s-4) 0; border-block: 1px solid var(--bordo);
}
.scheda__dati dt {
  font-size: var(--t--1); text-transform: uppercase; letter-spacing: .05em;
  color: var(--testo-tenue); font-weight: 620;
}
.scheda__dati dd { margin: var(--s-1) 0 0; font-weight: 550; }

.corrente {
  background: var(--vigore-tenue); border: 1px solid var(--vigore-bordo);
  border-radius: var(--raggio-l); padding: var(--s-5); margin-bottom: var(--s-6);
}
.corrente__etichetta {
  font-size: var(--t--1); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--vigore); margin-bottom: var(--s-2);
}
.corrente__revisione { font-size: var(--t-2); font-weight: 650; margin-bottom: var(--s-2); }
.corrente__revisione span { font-weight: 450; color: var(--testo-tenue); }
.corrente__meta { font-size: var(--t--1); color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.corrente__note { max-width: 70ch; }
.corrente__note span { font-weight: 620; }
.corrente__azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; }

.impronta { margin-top: var(--s-4); font-size: var(--t--1); }
.impronta summary { cursor: pointer; color: var(--testo-tenue); font-weight: 550; }
.impronta p { margin: var(--s-3) 0 0; color: var(--testo-tenue); }
.impronta__breve { font-size: .78rem; }

.storico { margin-top: var(--s-6); }
.storico__nota { color: var(--testo-tenue); max-width: 72ch; }

.paragrafi-doc { margin-top: var(--s-6); }
.paragrafi-doc__nota { color: var(--testo-tenue); max-width: 72ch; }
.paragrafi {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  border-top: 1px solid var(--bordo);
}
.paragrafi li {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--bordo);
}
.paragrafi__numero {
  font-family: var(--mono); font-size: var(--t--1); font-weight: 620;
  color: var(--accento); font-variant-numeric: tabular-nums; padding-top: .2em;
}
.paragrafi__titolo { font-weight: 550; }
/* I sottoparagrafi rientrano e si alleggeriscono: la gerarchia del documento
   deve leggersi a colpo d'occhio come nell'indice cartaceo. */
.paragrafi li[data-livello="2"] { padding-left: var(--s-5); }
.paragrafi li[data-livello="3"] { padding-left: var(--s-7); }
.paragrafi li[data-livello="2"] .paragrafi__titolo,
.paragrafi li[data-livello="3"] .paragrafi__titolo {
  font-weight: 450; color: var(--testo-tenue);
}

/* ─────────────────────────────────────────────────────────── 8. Tabelle ── */
.tabella__scorrevole { overflow-x: auto; margin-top: var(--s-5); border-radius: var(--raggio); }
.tabella {
  width: 100%; border-collapse: collapse; background: var(--superficie);
  font-size: var(--t--1); min-width: 40rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.tabella th, .tabella td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--bordo); vertical-align: top;
}
.tabella thead th {
  background: var(--superficie-2); font-weight: 640; white-space: nowrap;
  font-size: var(--t--1); color: var(--testo-tenue);
}
.tabella tbody tr:last-child th, .tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody th { font-weight: 620; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella td { font-variant-numeric: tabular-nums; }
.tabella__nota { color: var(--testo-tenue); font-weight: 400; }

/* ──────────────────────────────────────────────────────── 9. Componenti ── */
.etichetta {
  display: inline-block; font-size: .74rem; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; padding: .18em .6em; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.etichetta--vigore   { background: var(--vigore-tenue); color: var(--vigore); border-color: var(--vigore-bordo); }
.etichetta--superata { background: var(--neutro-tenue); color: var(--neutro); border-color: var(--bordo); }
.etichetta--ritirata { background: var(--allarme-tenue); color: var(--allarme); border-color: var(--allarme-bordo); }

.pulsante {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t--1); font-weight: 600; text-decoration: none;
  padding: var(--s-3) var(--s-5); border-radius: var(--raggio);
  border: 1px solid var(--bordo-forte); background: var(--superficie); color: var(--testo);
}
.pulsante:hover { background: var(--superficie-2); color: var(--testo); border-color: var(--accento-bordo); }
.pulsante--principale {
  background: var(--accento); border-color: var(--accento); color: var(--su-accento);
}
.pulsante--principale:hover {
  background: var(--accento-forte); border-color: var(--accento-forte); color: var(--su-accento);
}

.riquadro {
  border: 1px solid var(--bordo); border-radius: var(--raggio-l);
  padding: var(--s-5); margin-bottom: var(--s-6); background: var(--superficie);
}
.riquadro h2 { font-size: var(--t-1); margin-bottom: var(--s-2); }
.riquadro--allarme {
  background: var(--allarme-tenue); border-color: var(--allarme-bordo);
}
.riquadro--allarme h2 { color: var(--allarme); }

.vuoto {
  background: var(--superficie); border: 1px dashed var(--bordo-forte);
  border-radius: var(--raggio-l); padding: var(--s-7) var(--s-5);
  margin: var(--s-7) 0; text-align: center;
}
.vuoto h2 { font-size: var(--t-1); }
.vuoto p { color: var(--testo-tenue); max-width: 60ch; margin-inline: auto; }

.guida__apertura { font-size: var(--t-1); color: var(--testo-tenue); max-width: 68ch; }
.contenitore--stretto h2 { margin-top: var(--s-6); }
.contenitore--stretto p, .contenitore--stretto li { max-width: 68ch; }
.lista { padding-left: 1.2em; }
.lista li { margin-bottom: var(--s-2); }

/* ───────────────────────────────────────────────────────────── 10. Piede ── */
.piede {
  margin-top: var(--s-8); border-top: 1px solid var(--bordo);
  background: var(--sfondo-alt); color: var(--testo-tenue); font-size: var(--t--1);
}
.piede__interno {
  display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8); padding-block: var(--s-6);
}
.piede__struttura { font-weight: 650; color: var(--testo); margin-bottom: var(--s-2); }
.piede__responsabile { margin-top: var(--s-3); }
.piede__titoletto {
  font-weight: 650; color: var(--testo); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: var(--s-3);
}
.piede__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.piede__coda { border-top: 1px solid var(--bordo); padding-block: var(--s-4) var(--s-6); }
.piede__coda p { margin-bottom: var(--s-2); max-width: 78ch; }

/* ──────────────────────────────────────────── 11. Stampa e preferenze ── */
@media (max-width: 40rem) {
  .testata__interno { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .testata { position: static; }
  .voce { padding: var(--s-4); }
  .voce__azioni .pulsante { flex: 1 1 auto; justify-content: center; }
  .paragrafi li { grid-template-columns: 2.75rem 1fr; gap: var(--s-2); }
  .paragrafi li[data-livello="2"] { padding-left: var(--s-4); }
  .paragrafi li[data-livello="3"] { padding-left: var(--s-5); }
}

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

@media print {
  .testata, .navigazione, .filtri, .filtri__esito, .salta, .voce__azioni, .corrente__azioni { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .voce, .tabella, .corrente, .riquadro { break-inside: avoid; box-shadow: none; }
  a { color: #000; text-decoration: none; }
  .apertura { background: none; }
  .piede__coda::after {
    content: "Stampa non soggetta a controllo di aggiornamento: verificare la revisione in vigore sul sito.";
    display: block; margin-top: .5rem; font-weight: 700;
  }
}