/* ============================================================
   Base: reset, testo, cornice. Usa solo i token di token.css.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--testo);
  font: 400 var(--t-base)/1.45 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0;
}
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
small { font-size: var(--t-piccolo); }
code { font-family: var(--font-codice); font-size: .92em; background: var(--neutro-tenue); padding: 0 var(--s1); border-radius: var(--r1); }

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

.ic { width: 18px; height: 18px; flex: none; fill: currentColor; vertical-align: -4px; }
.tenue { color: var(--testo-3); }
.tono-testo-ok { color: var(--ok); } .tono-testo-ambra { color: var(--ambra); } .tono-testo-rosso { color: var(--rosso); }
.testo-errore { color: var(--rosso); }
.sotto-riga { display: block; color: var(--testo-3); font-weight: 400; }

.salta { position: fixed; left: var(--s2); top: -48px; z-index: 100; background: var(--superficie); padding: var(--s2) var(--s3); border-radius: var(--r2); }
.salta:focus { top: var(--s2); }

.app-avvio { display: grid; place-items: center; height: 100%; color: var(--testo-3); }

/* --- Cornice ------------------------------------------------------------ */
.app {
  display: grid; height: 100dvh;
  grid-template-columns: var(--colonna-l) minmax(0, 1fr);
  grid-template-rows: var(--testata-h) minmax(0, 1fr);
  grid-template-areas: "colonna testata" "colonna area";
}
.app.colonna-compressa { grid-template-columns: var(--colonna-chiusa-l) minmax(0, 1fr); }

.colonna {
  grid-area: colonna; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--colonna-fondo); color: var(--colonna-testo); font-size: var(--t-base);
}
.colonna-logo { display: flex; align-items: center; height: var(--testata-h); padding: 0 var(--s3); flex: none; }
.colonna-logo img { height: 24px; display: block; }
.colonna-nav { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s1) var(--s2) var(--s2); scrollbar-width: thin; scrollbar-color: var(--colonna-bordo) transparent; }
.gruppo { margin-bottom: var(--s3); }
.gruppo-nome { padding: var(--s1) var(--s2); color: var(--colonna-testo-2); font-size: var(--t-micro); font-weight: 600; }
.voce {
  position: relative; display: flex; align-items: center; gap: var(--s2); width: 100%; height: 30px; padding: 0 var(--s2);
  border-radius: var(--r2); color: var(--colonna-testo); text-decoration: none; white-space: nowrap; overflow: hidden;
}
.voce > span:not(.avatar) { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.voce small { color: var(--colonna-testo-2); font-variant-numeric: tabular-nums; }
.voce:hover { background: var(--colonna-passaggio); }
.voce.attiva { background: var(--colonna-passaggio); font-weight: 600; }
.voce.attiva::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--marchio); }
.voce:focus-visible, .voce-esci:focus-visible, .area-piu:focus-visible { outline-color: var(--colonna-testo); }
.voce-pipe { height: 26px; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--marchio); }
.area-nome { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 var(--s2); font-weight: 600; color: var(--colonna-testo-2); font-size: var(--t-micro); }
.area-piu { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--r1); background: none; color: var(--colonna-testo-2); cursor: pointer; opacity: 0; }
.area-piu .ic { width: 14px; height: 14px; }
.area:hover .area-piu, .area-piu:focus-visible { opacity: 1; }
.area-piu:hover { background: var(--colonna-passaggio); color: var(--colonna-testo); }
.colonna-piede { flex: none; padding: var(--s2); border-top: 1px solid var(--colonna-bordo); }
.colonna-fondo { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s1); padding: 0 var(--s2); color: var(--colonna-testo-2); font-size: var(--t-micro); }
.voce-esci { display: inline-flex; align-items: center; gap: var(--s1); height: 24px; padding: 0; border: 0; background: none; color: var(--colonna-testo-2); cursor: pointer; font-size: var(--t-micro); }
.voce-esci .ic { width: 14px; height: 14px; }
.voce-esci:hover { color: var(--colonna-testo); }

/* colonna compressa: solo icone, il nome sta nel titolo. L'avatar è un'icona e resta. */
.colonna-compressa .gruppo-nome, .colonna-compressa .area-nome, .colonna-compressa .voce span:not(.avatar),
.colonna-compressa .voce small, .colonna-compressa .colonna-fondo { display: none; }
.colonna-compressa .voce { justify-content: center; padding: 0; }
.colonna-compressa .colonna-logo { padding: 0 var(--s2); }
.colonna-compressa .colonna-logo img { height: 18px; object-fit: cover; object-position: left; width: 34px; }
.colonna-compressa .gruppo { padding-bottom: var(--s2); border-bottom: 1px solid var(--colonna-bordo); }
.colonna-compressa .gruppo:last-child { border-bottom: 0; }
.colonna-compressa .area { margin-top: 0; }

.testata {
  grid-area: testata; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3) 0 var(--s2); min-width: 0;
  background: var(--superficie); border-bottom: 1px solid var(--bordo);
}
.testata-contesto { flex: 1; min-width: 0; color: var(--testo-3); font-size: var(--t-piccolo); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.testata-destra { display: flex; align-items: center; gap: var(--s1); }


main.area { grid-area: area; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; margin: 0; outline: none; }

/* --- Modelli di pagina --------------------------------------------------- */
.pagina { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pagina-testa {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center;
  padding: var(--s3) var(--pagina-m) var(--s2);
}
.pagina-titoli { min-width: 0; }
.pagina-testa h1 { font-size: var(--t-pagina); font-weight: 650; line-height: 1.25; }
.pagina-titoli p { color: var(--testo-3); font-size: var(--t-piccolo); margin-top: 2px; }
.pagina-azioni { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.pagina-sotto { grid-column: 1 / -1; min-width: 0; display: grid; gap: var(--s2); }
.pagina-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s1) var(--pagina-m) var(--s6); }
.pagina-corpo.senza-margine { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/* --- Stati globali ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Telefono ------------------------------------------------------------ */
.barra-telefono { display: none; }
@media (max-width: 768px) {
  :root { --pagina-m: 12px; --testata-h: 48px; --bersaglio: 44px; }
  body { font-size: var(--t-medio); }
  .app, .app.colonna-compressa {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--testata-h) minmax(0, 1fr) 56px;
    grid-template-areas: "testata" "area" "barra";
  }
  .colonna { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(280px, 84vw); transform: translateX(-100%); transition: transform .16s ease; grid-area: unset; }
  .colonna.aperta { transform: none; }
  .colonna-velo { position: fixed; inset: 0; z-index: 39; background: var(--velo); }
  .colonna-compressa .gruppo-nome, .colonna-compressa .area-nome, .colonna-compressa .voce span:not(.avatar),
  .colonna-compressa .voce small { display: revert; }
  .colonna-compressa .colonna-fondo { display: flex; }
  .colonna-compressa .voce { justify-content: flex-start; padding: 0 var(--s2); }
  .voce, .voce-pipe { height: 44px; }
  .area-piu { opacity: 1; width: 32px; height: 32px; }
  .barra-telefono { grid-area: barra; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--superficie); border-top: 1px solid var(--bordo); }
  .barra-telefono a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--testo-3); text-decoration: none; font-size: var(--t-micro); }
  .barra-telefono a.attiva { color: var(--accento); font-weight: 600; }
  .barra-telefono .ic { width: 22px; height: 22px; }
  .pagina-testa { padding-top: var(--s2); }
  .pagina-testa h1 { font-size: 18px; }
}