/* ============================================================
   VascularReport — Strumenti clinici vascolari
   ------------------------------------------------------------
   Foglio di stile condiviso da tutte le pagine dei calcolatori
   e delle classificazioni (/abi, /tbi, /caprini, /wifi, ...).

   Va caricato SEMPRE dopo assets/site.css, di cui riusa le
   variabili di colore (--accent, --ink, --panel, --line...).
   Cosi le pagine seguono in automatico il tema chiaro/scuro
   gia gestito dal foglio principale.

   Le pagine non contengono CSS proprio: se serve cambiare
   l'aspetto di TUTTI gli strumenti si modifica solo questo file.
   ============================================================ */

/* ---------- barra di navigazione interna alla pagina ----------
   Volutamente NON sticky: l'intestazione del sito lo e gia (z-index 50),
   e una seconda barra fissa a top:0 le scorrerebbe sotto restando
   invisibile. Le sezioni hanno scroll-margin-top, quindi il salto alle
   ancore resta leggibile anche con l'intestazione fissa sopra. */
.strum-sommario{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.strum-sommario a{
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.strum-sommario a:hover,
.strum-sommario a:focus-visible{
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- sezioni ---------- */
.strum-sezione{ margin-bottom: 52px; scroll-margin-top: 78px; }
.strum-sezione > h2{
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.strum-sezione > h3{
  font-size: 1.06rem;
  font-weight: 650;
  margin: 26px 0 8px;
}
.strum-sezione p{ max-width: 62em; margin: 0 0 12px; }
.strum-sezione ul, .strum-sezione ol{ max-width: 60em; margin: 0 0 14px 22px; }
.strum-sezione li{ margin-bottom: 6px; }
.occhiello-sez{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 4px;
}

/* ---------- scheda del calcolatore ---------- */
.calcolatore{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 26px 26px;
}
.calc-gruppo{ margin-bottom: 22px; }
.calc-gruppo:last-of-type{ margin-bottom: 6px; }
.calc-gruppo > h4{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.calc-gruppo > .gruppo-nota{
  font-size: .84rem;
  color: var(--ink-soft);
  margin: -4px 0 10px;
}

.calc-elenco{ display: flex; flex-direction: column; gap: 8px; }

/* voce con casella di spunta */
label.voce{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
label.voce:hover{ border-color: var(--line-strong); }
label.voce input{ position: absolute; opacity: 0; width: 0; height: 0; }
label.voce .voce-testo{ font-size: .93rem; line-height: 1.45; }
label.voce .voce-testo small{
  display: block;
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
label.voce .voce-punti{
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
label.voce.negativa .voce-punti{ background: var(--danger-soft); color: var(--danger); }
label.voce:has(input:checked){ border-color: var(--accent); background: var(--accent-soft); }
label.voce.negativa:has(input:checked){ border-color: var(--danger); background: var(--danger-soft); }
label.voce:has(input:focus-visible){ outline: 2px solid var(--accent); outline-offset: 2px; }

/* campo numerico */
.campo-num{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.campo-num .cn-etichetta{ font-size: .93rem; }
.campo-num .cn-etichetta small{
  display: block;
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.campo-num .cn-input{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.campo-num input[type="number"]{
  width: 108px;
  padding: 9px 11px;
  font-size: .96rem;
  font-family: var(--mono);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.campo-num input[type="number"]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.campo-num .cn-unita{
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-soft);
  min-width: 52px;
}

/* menu a tendina */
.campo-sel{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.campo-sel .cs-etichetta{ font-size: .93rem; font-weight: 600; }
.campo-sel .cs-etichetta small{
  display: block;
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 2px;
}
.campo-sel select{
  width: 100%;
  padding: 9px 11px;
  font-size: .93rem;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.campo-sel select:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }

/* gruppo di scelte esclusive a pulsanti */
.campo-radio{
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.campo-radio .cr-etichetta{ font-size: .93rem; font-weight: 600; margin-bottom: 8px; }
.campo-radio .cr-opzioni{ display: flex; flex-wrap: wrap; gap: 8px; }
.campo-radio label{
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: var(--panel);
  transition: all .12s var(--ease);
}
.campo-radio label input{ position: absolute; opacity: 0; width: 0; height: 0; }
.campo-radio label:has(input:checked){
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.campo-radio label:has(input:focus-visible){ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- pulsanti ---------- */
.calc-azioni{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.calc-azioni button{
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .12s var(--ease);
}
.calc-azioni button.principale{ background: var(--accent); color: #fff; }
.calc-azioni button.principale:hover{ background: var(--accent-hover); }
.calc-azioni button.secondario{
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
.calc-azioni button.secondario:hover{ border-color: var(--ink-soft); color: var(--ink); }

/* ---------- risultato ---------- */
.risultato{ margin-top: 24px; }
.risultato[hidden]{ display: none; }
.ris-banner{
  border-radius: var(--radius);
  padding: 20px 24px;
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--accent);
  background: var(--accent-soft);
}
.ris-banner.livello-ok{ border-left-color: #1a7f4b; background: #e8f6ee; }
.ris-banner.livello-attenzione{ border-left-color: #b06c00; background: #fdf3e2; }
.ris-banner.livello-allerta{ border-left-color: var(--danger); background: var(--danger-soft); }
@media (prefers-color-scheme: dark){
  .ris-banner.livello-ok{ background: rgba(26,127,75,.16); }
  .ris-banner.livello-attenzione{ background: rgba(176,108,0,.16); }
  .ris-banner.livello-allerta{ background: rgba(179,38,30,.16); }
}
.ris-banner .rb-occhiello{
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.ris-banner h3{ font-size: 1.28rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -.02em; }
.ris-banner .rb-testo{ margin: 0; font-size: .96rem; color: var(--ink); max-width: 70ch; }

.ris-valori{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.ris-valori .rv{
  flex: 1 1 150px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.ris-valori .rv .rv-et{
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 3px;
}
.ris-valori .rv .rv-val{ font-size: 1.22rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.ris-valori .rv .rv-nota{ font-size: .8rem; color: var(--ink-soft); margin: 3px 0 0; }

.ris-note{
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .92rem;
}
.ris-note ul{ margin: 0 0 0 20px; }
.ris-note li{ margin-bottom: 5px; }
.ris-note li:last-child{ margin-bottom: 0; }

.ris-errore{
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: .9rem;
  font-weight: 600;
}
.ris-errore[hidden]{ display: none; }

/* ---------- tabelle di riferimento ---------- */
.tab-rif{
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 18px;
  font-size: .9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tab-rif caption{
  caption-side: top;
  text-align: left;
  font-size: .82rem;
  color: var(--ink-soft);
  padding-bottom: 6px;
}
.tab-rif th, .tab-rif td{
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.tab-rif thead th{
  background: var(--accent-tint);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
}
.tab-rif tbody tr:last-child td{ border-bottom: none; }
/* display:table-cell annulla il display:block della classe generica .num
   definita in site.css: senza questa riga una cella .num esce dalla
   colonna e la riga della tabella si spezza su piu livelli. */
.tab-rif td.num{ display: table-cell; font-family: var(--mono); white-space: nowrap; }
.tab-scroll{ overflow-x: auto; margin-bottom: 18px; }

/* ---------- riquadri ---------- */
.riquadro{
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 0 0 18px;
  max-width: 62em;
  font-size: .93rem;
}
.riquadro > b{ display: block; margin-bottom: 5px; color: var(--accent-2); }
.riquadro.avviso{ border-left-color: var(--danger); }
.riquadro.avviso > b{ color: var(--danger); }
.riquadro p:last-child{ margin-bottom: 0; }

.fonti-elenco{ list-style: none; margin: 0; padding: 0; max-width: 62em; }
.fonti-elenco li{
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  color: var(--ink-soft);
}
.fonti-elenco li:last-child{ border-bottom: none; }
.fonti-elenco b{ color: var(--ink); font-weight: 650; }

.strum-fine{ display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 46px; }

@media (max-width: 760px){
  .calcolatore{ padding: 18px 16px 20px; }
  label.voce{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .campo-num{ flex-direction: column; align-items: flex-start; }
  .campo-num .cn-input{ width: 100%; }
  .campo-num input[type="number"]{ flex: 1; width: auto; }
}