/* ============================================================
   VascularReport — menu laterale di navigazione
   ------------------------------------------------------------
   Barra a sinistra sempre visibile su schermo largo: marchio,
   voci di navigazione, azioni principali e collegamenti di
   servizio. Sotto i 1024 px diventa un pannello che si apre con
   il pulsante "Menu" della striscia in alto.

   Nato dentro <style> nella home il 27/08/2026, estratto qui il
   09/09/2026 quando il menu e' stato messo su tutte le pagine del
   sito tranne l'applicazione di refertazione. Come per
   sfondo-onde.css, il file e' uno solo: una modifica qui cambia
   la navigazione dell'intero sito, senza ritoccare 57 pagine.

   COME SI USA IN UNA PAGINA NUOVA
     1. nel <head>, DOPO gli altri fogli di stile:
          <link rel="stylesheet" href="/assets/menu-laterale.css?v=20260909">
     2. subito dopo <body> (e dopo il div dello sfondo a onde):
          la striscia .barra-mobile, il <div class="velo-menu">
          e l'<aside class="menu-laterale"> — vedi una pagina
          qualsiasi, per esempio /guida;
     3. tutto il resto del contenuto dentro <div class="corpo-sito">;
     4. prima di </body>:
          <script defer src="/assets/menu-laterale.js?v=20260909"></script>

   Va caricato per ultimo perche' due regole in fondo devono avere
   la meglio su barra-strumenti.css.
   ============================================================ */

/* ============================================================
   MENU LATERALE FISSO (27/08/2026)
   Barra a sinistra sempre visibile su schermo largo: marchio,
   voci di navigazione, azione principale e collegamenti di
   servizio. Sotto i 1024 px diventa un pannello che si apre
   con il pulsante in alto a sinistra.
   ============================================================ */

:root{ --barra: 274px; }

html{ scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

.menu-laterale{
  position: fixed; top:0; left:0; bottom:0; width: var(--barra);
  z-index: 60; display:flex; flex-direction:column;
  padding: 26px 20px 22px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
}

.menu-laterale .marchio{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color: var(--ink); margin-bottom: 26px;
}
.menu-laterale .marchio img{ width: 104px; height:auto; }
.menu-laterale .marchio span{
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -.02em;
}
.menu-laterale .marchio b{ color: var(--accent); font-weight: 750; }

.menu-voci{ display:flex; flex-direction:column; gap: 2px; }
.menu-voci a{
  display:block; text-align:center; text-decoration:none;
  font-size: .95rem; font-weight: 500; color: var(--ink-soft);
  padding: 10px 12px; border-radius: 100px;
  border: 1px solid transparent;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.menu-voci a:hover{ color: var(--accent); background: var(--accent-tint); }
.menu-voci a.attiva{
  color: var(--accent); font-weight: 600;
  border-color: var(--accent); background: var(--panel);
}

/* ------------------------------------------------------------
   Sotto-menu con l'indice della pagina (lo costruisce
   assets/menu-laterale.js riusando l'indice gia' presente nella
   pagina; dove non c'e', qui non c'e' nulla da mostrare).

   Le voci sono volutamente diverse da quelle del menu principale:
   piu' piccole, allineate a sinistra e con un filetto verticale,
   cosi' si legge a colpo d'occhio che stanno "dentro" la pagina
   corrente e non portano altrove.
   ------------------------------------------------------------ */
/* Innestato sotto la voce di menu che porta alla pagina corrente:
   niente filetto e niente stacco, deve leggersi come la continuazione
   di quella voce. */
.menu-indice{
  margin: 2px 0 6px;
}
/* Ripiego: quando la pagina non ha una voce propria nel menu (ne' una
   sezione di appartenenza) l'indice torna in fondo all'elenco, e li'
   invece un filetto che lo separi serve. */
.menu-laterale > .menu-indice{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.menu-indice > summary{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 8px;
  border-radius: 8px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
/* La freccina la disegniamo noi: il triangolino di sistema cambia
   forma da un browser all'altro. */
.menu-indice > summary::-webkit-details-marker{ display: none; }
.menu-indice > summary::before{
  content: "";
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s var(--ease);
}
.menu-indice[open] > summary::before{ transform: rotate(90deg); }
.menu-indice > summary:hover{ color: var(--accent); background: var(--accent-tint); }
.menu-indice > summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.menu-indice nav{
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 6px;
  padding-left: 10px;      /* rientro: dipendono dalla voce qui sopra */
}
.menu-indice nav a{
  display: block;
  text-decoration: none;
  /* Ora che il blocco vive dentro #menu-voci, la regola '.menu-voci a'
     lo raggiunge e gli passerebbe la pastiglia centrata delle voci di
     navigazione: qui si torna a un elenco allineato a sinistra. */
  text-align: left;
  border: 0;
  font-size: .855rem;
  line-height: 1.35;
  color: var(--ink-soft);
  padding: 6px 10px 6px 14px;
  border-left: 2px solid var(--line);
  border-radius: 0 8px 8px 0;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.menu-indice nav a:hover{
  color: var(--accent);
  background: var(--accent-tint);
  border-left-color: var(--accent);
}
.menu-indice nav a.attiva{
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-tint);
  border-left-color: var(--accent);
}

@media (prefers-reduced-motion: reduce){
  .menu-indice > summary::before{ transition: none; }
}

.menu-azioni{
  display:flex; flex-direction:column; gap: 9px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.menu-azioni .btn{ width:100%; justify-content:center; text-align:center; }

.menu-piede{
  margin-top: auto; padding-top: 22px;
  display:flex; justify-content:center; gap: 10px; flex-wrap:wrap;
}
.menu-piede a{
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color:#fff; text-decoration:none;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.menu-piede a:hover{ background: var(--accent-hover); transform: translateY(-1px); }
.menu-piede svg{ width:17px; height:17px; display:block; }
.menu-piede .bandierina{ background: var(--panel-2); border:1px solid var(--line); padding:0; }
.menu-piede .bandierina svg{ width:22px; height:11px; border-radius:2px; }

/* Il contenuto scorre a destra della barra. */
.corpo-sito{ margin-left: var(--barra); }

/* Stacco fra la barra e il testo. Il margine qui sopra porta il contenuto
   esattamente a filo del bordo della barra, e i 24px di padding di .wrap
   non bastavano: il testo sembrava appiccicato al menu. Il respiro si da'
   al contenitore del testo, non a .corpo-sito, cosi' le fasce a tutta
   larghezza — la striscia "Modalita' demo", per esempio — restano a filo
   invece di lasciare una banda bianca lungo la barra.
   Sotto i 1024px la barra non c'e' e non serve nulla. */
@media (min-width: 1025px){
  .corpo-sito .wrap{ padding-left: 52px; }
}

/* Pulsante di apertura e velo: esistono solo su schermo stretto. */
.apri-menu{
  display:none; position: fixed; top: 12px; left: 12px; z-index: 80;
  align-items:center; gap: 8px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 9px 14px; font-family: var(--sans); font-size: .9rem; font-weight: 600;
  cursor: pointer;
}
.apri-menu span.barre{ display:block; width:16px; height:11px; position:relative; }
.apri-menu span.barre::before,
.apri-menu span.barre::after,
.apri-menu span.barre i{
  content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background: var(--accent);
}
.apri-menu span.barre::before{ top:0; }
.apri-menu span.barre i{ top:4.5px; }
.apri-menu span.barre::after{ bottom:0; }

.velo-menu{
  display:none; position: fixed; inset:0; z-index: 55;
  background: rgba(8,18,30,.45);
}
.velo-menu.visibile{ display:block; }

.salta-contenuto{
  position:absolute; left:-9999px; top:0;
  background: var(--accent); color:#fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  z-index: 100; text-decoration:none;
}
.salta-contenuto:focus{ left:0; }

.barra-mobile{ display:none; }
.marchio-mobile{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  color: var(--ink); font-family: var(--serif); font-weight:600; font-size:.98rem;
  letter-spacing:-.02em;
}
.marchio-mobile img{ width:34px; height:auto; }
.marchio-mobile b{ color: var(--accent); font-weight:750; }

@media (max-width: 1024px){
  .barra-mobile{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    position: fixed; top:0; left:0; right:0; z-index: 80;
    padding: 8px 12px;
    background: var(--panel); border-bottom: 1px solid var(--line);
  }
  .apri-menu{ position: static; box-shadow: none; }
  .menu-laterale{
    /* la striscia in alto resta sopra il pannello: il contenuto
       parte piu' in basso per non finirci sotto */
    padding-top: 72px;
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
    box-shadow: var(--shadow-lg);
    width: min(300px, 86vw);
  }
  .menu-laterale.aperto{ transform: translateX(0); }
  .corpo-sito{ margin-left: 0; padding-top: 66px; }
  .apri-menu{ display:inline-flex; }
}

/* ------------------------------------------------------------
   Convivenza con la barra degli strumenti dei calcolatori
   (assets/barra-strumenti.css, 22 pagine).

   Su schermo largo non si pestano i piedi: quella e' una colonna
   dentro al contenuto, questa e' fissa a sinistra. La barra degli
   strumenti si stacca da sola dal bordo alto, perche' il suo
   'top: 84px' vale solo dove esiste header.top — e da oggi in
   quelle pagine l'intestazione non c'e' piu'.

   Sotto i 1024 px invece diventano tutt'e due pannelli a
   scomparsa ancorati a sinistra: la striscia .barra-mobile sta
   sopra (z-index 80) e coprirebbe le prime voci del pannello
   strumenti, che parte da top:0. Stesso rimedio gia' usato per
   .menu-laterale: si comincia piu' in basso.
   ------------------------------------------------------------ */
@media (max-width: 1024px){
  /* Due selettori per lo stesso motivo spiegato in barra-strumenti.css:
     con uno solo questa regola peserebbe meno di quella che imposta il
     padding la' dentro, e non avrebbe effetto. */
  body:has(.menu-laterale) .barra-strumenti,
  body:has(.menu-laterale):not(:has(header.top)) .barra-strumenti{ padding-top: 72px; }
}

/* ------------------------------------------------------------
   In stampa la navigazione non serve e ruberebbe spazio: la barra
   sparisce e il contenuto riprende tutta la larghezza del foglio.
   Senza questa regola le pagine stampate — che qui si stampano
   davvero, sono protocolli da portare in ambulatorio — uscivano con
   una colonna vuota di 274px a sinistra.
   ------------------------------------------------------------ */
@media print{
  .menu-laterale,
  .barra-mobile,
  .velo-menu,
  .apri-menu{ display: none !important; }
  .corpo-sito{ margin-left: 0 !important; padding-top: 0 !important; }
  .corpo-sito .wrap{ padding-left: 24px !important; }
}
