/* guscio.css -- la sala operativa: fianco, testata, colonna.

   Sostituisce la barra in alto del primo sito. Con ventuno voci divise in sei
   sezioni, una barra orizzontale diventa una fila che scorre e non si legge
   piu': la gerarchia delle sezioni e' meta' dell'informazione, e va vista. */

.guscio {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

/* ---------------------------- fianco ---------------------------- */
.fianco {
  background: var(--fondo-2);
  border-right: 1px solid var(--bordo);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.fianco-marchio {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 16px; border-bottom: 1px solid var(--bordo);
  position: sticky; top: 0; background: var(--fondo-2); z-index: 2;
}
.fianco-marchio strong {
  display: block; font-size: .82rem; letter-spacing: .1em; line-height: 1.2;
}
.fianco-marchio span {
  display: block; font-size: .62rem; color: var(--testo-3);
  letter-spacing: .16em; text-transform: uppercase;
}

#navigazione { padding: 10px 0 24px; }
.sezione-titolo {
  padding: 14px 16px 5px;
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--testo-3);
}
.voce {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 16px; border: none; background: transparent;
  color: var(--testo-2); font-size: .855rem; text-align: left;
  border-left: 2px solid transparent; border-radius: 0;
}
.voce:hover { background: var(--fondo-3); color: var(--testo); border-color: var(--bordo); }
.voce.attiva {
  background: var(--fondo-3); color: var(--ambra);
  border-left-color: var(--ambra);
}
.voce-segno { width: 15px; text-align: center; opacity: .75; flex: 0 0 auto; }
.voce-nome { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-conta {
  flex: 0 0 auto; min-width: 19px; text-align: center;
  font-size: .66rem; padding: 1px 6px; border-radius: 99px;
  background: var(--fondo); border: 1px solid var(--bordo); color: var(--testo-2);
}
.voce-conta.calda { border-color: rgba(217,83,79,.5); color: var(--rosso); }
.voce-conta.ambra { border-color: rgba(217,164,65,.5); color: var(--ambra); }

/* ---------------------------- testata ---------------------------- */
.colonna { display: flex; flex-direction: column; min-width: 0; }

.testata {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--bordo);
  background: var(--fondo-2);
  position: sticky; top: 0; z-index: 10;
}
.chip-riga { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: var(--raggio);
  background: var(--fondo); border: 1px solid var(--bordo);
  font-size: .76rem; color: var(--testo-2); white-space: nowrap;
}
.chip strong { color: var(--testo); font-weight: 600; }
.chip .puntino {
  width: 7px; height: 7px; border-radius: 50%; background: var(--testo-3); flex: 0 0 auto;
}
.chip .puntino.verde { background: var(--verde); box-shadow: 0 0 0 3px rgba(79,180,119,.15); }
.chip .puntino.ambra { background: var(--ambra); box-shadow: 0 0 0 3px rgba(217,164,65,.15); }
.chip .puntino.rosso { background: var(--rosso); box-shadow: 0 0 0 3px rgba(217,83,79,.15); }
.chip.blu { border-color: rgba(74,158,218,.4); }

.testata-utente { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.testata-nome { text-align: right; line-height: 1.25; }
.testata-nome strong { display: block; font-size: .82rem; }
.testata-nome span {
  display: block; font-size: .62rem; color: var(--testo-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.sigla {
  width: 32px; height: 32px; border-radius: var(--raggio);
  background: var(--fondo-3); border: 1px solid var(--bordo);
  display: grid; place-items: center; font-size: .72rem; letter-spacing: .04em;
  color: var(--testo-2);
}

/* ---------------------------- contenuto ---------------------------- */
main { padding: 22px 20px 40px; max-width: 1180px; width: 100%; }

.pagina-testa { margin-bottom: 18px; }
.pagina-testa h1 { margin: 0 0 4px; font-size: 1.45rem; letter-spacing: 0; }
.pagina-testa p { color: var(--testo-2); font-size: .89rem; margin: 0; max-width: 78ch; }
.pagina-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* La riga di sinistra colorata: serve a distinguere un blocco che chiede
   un'azione da uno che riporta soltanto. */
.scheda.urgente { border-left: 3px solid var(--rosso); }
.scheda.attesa  { border-left: 3px solid var(--ambra); }
.scheda.calma   { border-left: 3px solid var(--verde); }

.etichetta {
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--testo-3);
}

.passi { counter-reset: passo; list-style: none; margin: 0; padding: 0; }
.passi li {
  display: flex; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid rgba(42,52,65,.55); font-size: .87rem;
}
.passi li:last-child { border-bottom: none; }
.passi li::before {
  counter-increment: passo; content: counter(passo);
  flex: 0 0 auto; color: var(--blu); font-family: var(--mono); font-size: .8rem;
}

.barra-avanzamento { height: 6px; border-radius: 99px; background: var(--fondo); overflow: hidden; display: flex; }
.barra-avanzamento span { display: block; height: 100%; }

.velo { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; }
.solo-telefono { display: none; }

/* ---------------------------- telefono ---------------------------- */
@media (max-width: 900px) {
  .guscio { grid-template-columns: 1fr; }
  .fianco {
    position: fixed; left: 0; top: 0; bottom: 0; width: 250px; z-index: 40;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .fianco.aperto { transform: translateX(0); }
  .solo-telefono { display: inline-flex; }
  .testata { padding: 8px 12px; }
  main { padding: 14px 12px 32px; }
  .pagina-testa h1 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .fianco { transition: none; } }