/* ============================================================
VascularReport — barra laterale degli strumenti clinici
------------------------------------------------------------
Elenco a pulsanti dei 19 calcolatori e classificazioni,
raggruppato per argomento. Compare identico sulla pagina
indice (/calcolatori-medici) e su ogni pagina di strumento,
cosi' si passa da un calcolatore all'altro senza tornare
indietro.
Markup atteso:
...contenuto...
Da 1024px in giu' la colonna diventa un pannello a scomparsa
aperto dal pulsante flottante: su schermo stretto una colonna
fissa toglierebbe troppo spazio al contenuto. La logica di
apertura sta in barra-strumenti.js.
============================================================ */
.corpo-calc{
display: grid;
grid-template-columns: 264px minmax(0, 1fr);
gap: 44px;
align-items: start;
}
/* minmax(0,1fr) sopra e min-width:0 qui evitano che una tabella
larga dentro il contenuto sfondi la colonna. */
.colonna-calc{ min-width: 0; }
.barra-strumenti{
position: sticky;
top: 84px; /* altezza dell'intestazione fissa */
max-height: calc(100vh - 108px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--panel-2, var(--panel, #f7fafd));
border: 1px solid var(--line);
border-radius: var(--radius, 14px);
padding: 16px 14px 18px;
}
/* Le due pagine storiche (Wells, selettore anticoagulante) non hanno
l'intestazione appiccicata: senza questa regola la barra resterebbe
ancorata 84px piu' in basso del necessario. */
body:not(:has(header.top)) .barra-strumenti{
top: 20px;
max-height: calc(100vh - 44px);
}
.testa-barra{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.titolo-barra{
font-family: var(--mono);
font-size: .66rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-faint, var(--ink-soft, #5a738c));
}
/* Il pulsante di chiusura serve solo al pannello a scomparsa. */
.chiudi-strumenti{
display: none;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
font-size: 1.5rem;
line-height: 1;
color: var(--ink-soft);
background: transparent;
border: 1px solid var(--line);
border-radius: 9px;
cursor: pointer;
}
.chiudi-strumenti:hover{ color: var(--accent); border-color: var(--accent); }
.gruppo-strumenti + .gruppo-strumenti{ margin-top: 16px; }
.voce-gruppo{
font-size: .68rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--accent-2);
margin: 0 0 7px;
padding-bottom: 5px;
border-bottom: 1px solid var(--line);
}
/* Pulsanti blu pieni, il peso visivo dell'azione primaria del sito,
solo piu' compatti perche' impilati in colonna. */
.barra-strumenti nav a{
display: flex;
align-items: center;
min-height: 40px;
padding: 8px 12px;
margin-bottom: 6px;
font-size: .9rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.005em;
text-decoration: none;
color: #fff;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 10px;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(13,27,42,.05));
transition: background .18s var(--ease, cubic-bezier(.4,0,.2,1)), transform .18s var(--ease, cubic-bezier(.4,0,.2,1)), box-shadow .18s var(--ease, cubic-bezier(.4,0,.2,1));
}
.barra-strumenti nav a:last-child{ margin-bottom: 0; }
.barra-strumenti nav a:hover,
.barra-strumenti nav a:focus-visible{
background: var(--accent-hover, #094c8f);
border-color: var(--accent-hover, #094c8f);
transform: translateX(2px);
box-shadow: var(--shadow-md, 0 4px 14px rgba(13,27,42,.08));
}
.barra-strumenti nav a:active{ transform: none; }
/* Strumento della pagina che si sta leggendo. */
.barra-strumenti nav a[aria-current="page"]{
background: var(--accent-hover, #094c8f);
border-color: var(--accent-hover, #094c8f);
box-shadow: inset 3px 0 0 var(--accent-bright, #2e90d9);
cursor: default;
}
.barra-strumenti nav a[aria-current="page"]:hover{ transform: none; }
/* In tema scuro l'azzurro di marchio e' chiaro: il testo torna scuro,
come gia' fa .btn in site.css. */
@media (prefers-color-scheme: dark){
.barra-strumenti nav a{ color: #0b1420; }
}
/* Pulsante flottante e velo: esistono solo sotto i 1024px. */
.apri-strumenti{
display: none;
position: fixed;
right: 18px;
bottom: calc(18px + env(safe-area-inset-bottom));
z-index: 65;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 12px 20px;
font-family: inherit;
font-size: .94rem;
font-weight: 600;
color: #fff;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 999px;
box-shadow: var(--shadow-lg, 0 18px 44px rgba(13,27,42,.12));
cursor: pointer;
}
.velo-strumenti{ display: none; }
@media (max-width: 1024px){
.corpo-calc{ grid-template-columns: minmax(0, 1fr); gap: 0; }
.barra-strumenti,
body:not(:has(header.top)) .barra-strumenti{
position: fixed;
top: 0; left: 0; bottom: 0;
width: min(312px, 86vw);
max-height: none;
z-index: 70;
border: 0;
border-right: 1px solid var(--line);
border-radius: 0;
background: var(--panel);
box-shadow: var(--shadow-lg, 0 18px 44px rgba(13,27,42,.12));
padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
transform: translateX(-102%);
visibility: hidden;
transition: transform .26s var(--ease, cubic-bezier(.4,0,.2,1)), visibility .26s var(--ease, cubic-bezier(.4,0,.2,1));
}
/* Le due righe, non una: la regola che tiene il pannello fuori campo
e' scritta anche come 'body:not(:has(header.top)) .barra-strumenti',
che pesa piu' di 'body.strumenti-aperti .barra-strumenti'. Nelle
pagine senza header.top — da oggi tutte quelle con il menu laterale —
il pannello non si sarebbe piu' aperto. */
body.strumenti-aperti .barra-strumenti,
body.strumenti-aperti:not(:has(header.top)) .barra-strumenti{ transform: none; visibility: visible; }
.chiudi-strumenti{ display: inline-flex; }
.apri-strumenti{ display: inline-flex; }
.velo-strumenti{
display: block;
position: fixed;
inset: 0;
z-index: 60;
background: rgba(6, 17, 28, .5);
opacity: 0;
visibility: hidden;
transition: opacity .26s var(--ease, cubic-bezier(.4,0,.2,1)), visibility .26s var(--ease, cubic-bezier(.4,0,.2,1));
}
body.strumenti-aperti .velo-strumenti{ opacity: 1; visibility: visible; }
body.strumenti-aperti{ overflow: hidden; }
}