/* Il design system di Teriyaki (server/design-systems/teriyaki/DESIGN.md del Builder): carta e inchiostro,
   un solo accento lime, angoli vivi, nessuna ombra. Nei componenti solo token, mai esadecimali. */

@font-face { font-family: "Geist"; src: url("/pagina/fonts/Geist-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Geist"; src: url("/pagina/fonts/Geist-Medium.ttf"); font-weight: 500; }
@font-face { font-family: "Geist Mono"; src: url("/pagina/fonts/GeistMono-Medium.ttf"); font-weight: 500; }
@font-face { font-family: "Geist Mono"; src: url("/pagina/fonts/GeistMono-SemiBold.ttf"); font-weight: 600; }

:root {
  --primary: #b8ff38;
  --on-primary: #11140f;
  --ink: #11140f;
  --ink-soft: #4e534a;
  --paper: #f2f0e8;
  --paper-deep: #e9e6dc;
  --surface: #faf9f5;
  --muted: #686b61;
  --subtle: #a1a19a;
  --line: rgba(17, 20, 15, 0.18);
  --line-strong: rgba(17, 20, 15, 0.38);
  --mint: #dff5df;
  --lilac: #ece6ff;
  --coral: #ffd9c7;
  --ink-raised: #1b1e18;
  --ink-line: #3d3f3a;
  --velo: rgba(17, 20, 15, 0.4);
  --ombra-testo: rgba(17, 20, 15, 0.06);
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { background: var(--paper); }
body {
  background: var(--paper); color: var(--ink); font-family: var(--sans);
  font-size: 16px; line-height: 20.8px; letter-spacing: -0.8px; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
a.collegamento { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color 300ms var(--curva); }
a.collegamento:hover { text-decoration-color: var(--primary); }

.mono { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: -0.56px; text-transform: uppercase; line-height: 18.2px; }
.mono-sm { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: -0.48px; text-transform: uppercase; line-height: 15.6px; }
.tenue { color: var(--muted); }
.corpo { color: var(--ink-soft); }

/* Struttura: barra scura a sinistra con il copione, contenuto largo al massimo 1200px.
   La barra resta sopra il velo: con una scheda aperta il copione si legge ancora. */
:root { --barra: 320px; }
.app { display: grid; grid-template-columns: var(--barra) minmax(0, 1fr); min-height: 100vh; }
.barra {
  background-color: var(--ink); color: var(--paper); padding: 24px 16px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 0; height: 100vh; z-index: 12;
  background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
}
.barra .logo { height: 22px; width: auto; display: block; margin: 0 8px 8px; }
.barra nav { display: flex; flex-direction: column; gap: 4px; }
.voce {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--ink);
  transition: background-color 300ms var(--curva), color 300ms var(--curva);
}
.voce::before { content: ""; width: 8px; height: 8px; background: var(--ink-line); }
.voce:hover { background: var(--ink-raised); }
.voce.attiva { background: var(--primary); color: var(--ink); }
.voce.attiva::before { background: var(--ink); }
.voce .conta { margin-left: auto; }
.barra .fondo { display: flex; flex-direction: column; }

/* Il copione nella barra: sempre a portata di mano, scorre da solo. */
.guida {
  flex: 1; min-height: 0; overflow-y: auto; background: var(--ink); border: 1px solid var(--ink-line); padding: 16px;
  display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 19.6px; letter-spacing: -0.7px;
  scrollbar-width: thin; scrollbar-color: var(--ink-line) transparent;
}
.guida-testa { display: flex; flex-direction: column; gap: 4px; }
.guida-testa .per { color: var(--primary); overflow-wrap: anywhere; }
.guida .copione li::before { color: var(--subtle); }
.guida .copione .dato { color: var(--primary); }
.consiglio-barra { color: var(--subtle); padding-top: 12px; border-top: 1px solid var(--ink-line); }
/* Centralino, obiezioni e segreteria: chiusi finché servono. Chiari nella scheda, scuri nella barra. */
.piega { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.piega summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.piega summary::-webkit-details-marker { display: none; }
.piega summary::before { content: ""; width: 8px; height: 8px; background: var(--ink); transition: transform 300ms var(--curva), background-color 300ms var(--curva); }
.piega[open] summary::before { transform: rotate(45deg); }
.piega p + p, .piega summary + p, .piega summary + dl { margin-top: 8px; }
.piega .tenue, .obiezioni dd { color: var(--muted); }
.guida .piega { border-color: var(--ink-line); }
.guida .piega summary { color: var(--paper); }
.guida .piega summary::before { background: var(--ink-line); }
.guida .piega summary:hover::before, .guida .piega[open] summary::before { background: var(--primary); }
.guida .piega .tenue, .guida .obiezioni dd { color: var(--subtle); }
.obiezioni dt { margin-top: 12px; }
.obiezioni dt:first-child { margin-top: 0; }
.obiezioni dd { margin-top: 2px; }

main { padding: 40px; max-width: 1280px; width: 100%; min-width: 0; }
.titolo { font-size: 32px; line-height: 1.1; letter-spacing: -0.05em; font-weight: 400; }
.intro { color: var(--ink-soft); margin-top: 8px; max-width: 640px; }

/* Etichetta di sezione: [N.01], lineetta da 24px, > NOME, riga fino al bordo. */
.sezione { display: flex; align-items: center; gap: 12px; margin: 40px 0 16px; color: var(--ink-soft); }
.sezione .lineetta { width: 24px; height: 1px; background: var(--ink); }
.sezione .riga { flex: 1; height: 1px; background: var(--line); }
.sezione .azioni { display: flex; gap: 8px; }

/* Pulsanti. */
.btn-primario, .btn-secondario, .btn-testo {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  font-family: var(--mono); text-transform: uppercase; font-size: 14px; letter-spacing: -0.56px; line-height: 18.2px;
}
.btn-primario {
  position: relative; isolation: isolate; overflow: hidden; height: 40px; padding: 0 16px; border: 0;
  background: var(--primary); color: var(--on-primary); font-weight: 600; transition: color 500ms var(--curva);
}
.btn-primario::before { content: ""; width: 8px; height: 8px; background: var(--ink); transition: background-color 500ms var(--curva); }
.btn-primario::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--curva);
}
.btn-primario:hover { color: var(--paper); }
.btn-primario:hover::before { background: var(--primary); }
.btn-primario:hover::after { transform: scaleX(1); }
.btn-secondario {
  height: 36px; padding: 0 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); font-weight: 500;
  transition: background-color 300ms var(--curva), color 300ms var(--curva), border-color 300ms var(--curva);
}
.btn-secondario:hover { background: var(--primary); }
.btn-testo { height: 36px; padding: 0 8px; background: transparent; border: 0; color: var(--ink-soft); font-weight: 500; transition: background-color 300ms var(--curva); }
.btn-testo:hover { background: var(--ombra-testo); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* Chip. */
.chip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; background: var(--paper-deep); color: var(--ink-soft); white-space: nowrap; }
.chip.menta { background: var(--mint); }
.chip.lilla { background: var(--lilac); }
.chip.corallo { background: var(--coral); color: var(--ink); }
.chip.lime { background: var(--primary); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Cifre. */
.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.cifra { background: var(--surface); padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cifra .valore { font-size: 32px; line-height: 1.2; letter-spacing: -0.05em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.cifra .valore small { font-size: 16px; color: var(--muted); letter-spacing: -0.8px; }

/* Tabelle. */
.tabella-wrap { border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: var(--paper-deep); color: var(--ink-soft); text-align: left; padding: 8px 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: -0.48px; text-transform: uppercase; white-space: nowrap; }
td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); font-size: 14px; line-height: 18.2px; letter-spacing: -0.7px; }
td.azienda { color: var(--ink); font-size: 16px; letter-spacing: -0.8px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { cursor: pointer; transition: background-color 300ms var(--curva); }
tbody tr:hover { background: var(--paper); }
tbody tr.selezionata { background: var(--paper-deep); }
.vuoto { padding: 24px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.taglia { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 420px; }

/* Carte. */
.carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.carta { background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px; transition: border-color 300ms var(--curva); }
button.carta { text-align: left; cursor: pointer; font: inherit; }
button.carta:hover { background: var(--paper); }
.carta .valore { font-size: 32px; letter-spacing: -0.05em; line-height: 1.2; margin: 8px 0 4px; }

/* Campi. */
.filtri { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-bottom: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { color: var(--muted); }
.campo input, .campo select, .campo textarea {
  height: 40px; padding: 0 12px; background: var(--paper); border: 1px solid var(--line-strong); font-size: 16px;
  transition: border-color 300ms var(--curva); appearance: none; -webkit-appearance: none;
}
.campo select { padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
.campo textarea { height: 72px; padding: 10px 12px; resize: vertical; line-height: 20.8px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--ink); outline: none; }
.campo.largo { flex: 1; min-width: 220px; }

/* Gruppi come pulsanti a scelta. */
.scelta { display: flex; flex-wrap: wrap; gap: 0; border-left: 1px solid var(--ink); }
.scelta button { height: 36px; padding: 0 12px; border: 1px solid var(--ink); border-left: 0; background: var(--paper); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: background-color 300ms var(--curva); }
.scelta button:hover { background: var(--paper-deep); }
.scelta button.attiva { background: var(--ink); color: var(--paper); }
.scelta { margin-bottom: 16px; }
.filtri.senza-margine { margin: 0; }
td.num { white-space: nowrap; }
td.avanzamento { min-width: 160px; vertical-align: middle; }
progress { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; background: var(--paper-deep); display: block; }
progress::-webkit-progress-bar { background: var(--paper-deep); }
progress::-webkit-progress-value { background: var(--primary); }
progress::-moz-progress-bar { background: var(--primary); }

/* La scheda di un'azienda: pannello a destra con il velo d'inchiostro. */
.velo { position: fixed; inset: 0; background: var(--velo); z-index: 10; }
.scheda {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, calc(100% - var(--barra))); background: var(--paper); border-left: 1px solid var(--ink);
  z-index: 11; overflow-y: auto; display: flex; flex-direction: column;
}
.scheda .testa { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px 0 24px; background: var(--ink); color: var(--paper); }
.scheda .testa .btn-testo { color: var(--paper); }
.scheda .testa .btn-testo:hover { background: var(--ink-raised); }
.scheda .dentro { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.scheda .dentro > section { display: flex; flex-direction: column; gap: 12px; }
.scheda h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.05em; font-weight: 400; }
.scheda .meta { color: var(--ink-soft); }
.telefono { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: var(--surface); border: 1px solid var(--line); transition: border-color 300ms var(--curva); }
.telefono:hover { border-color: var(--ink); }
.telefono .numero { font-size: 32px; letter-spacing: -0.05em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.blocco { background: var(--surface); border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.blocco p, .blocco li { color: var(--ink-soft); }
.blocco .testo-lungo { white-space: pre-line; }
.righe-contatto { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; }
.righe-contatto dt { color: var(--muted); }
.righe-contatto dd { color: var(--ink-soft); overflow-wrap: anywhere; }
details.blocco summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.blocco summary::-webkit-details-marker { display: none; }
details.blocco summary::before { content: ""; width: 8px; height: 8px; background: var(--ink); transition: transform 300ms var(--curva); }
details.blocco[open] > summary::before { transform: rotate(45deg); }
.copione { display: flex; flex-direction: column; gap: 8px; counter-reset: passo; }
.copione li { list-style: none; display: grid; grid-template-columns: 40px 1fr; gap: 8px; }
.copione li::before { counter-increment: passo; content: "//00" counter(passo); font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.copione .dato { font-weight: 500; }
.solo-telefono { display: none; }
.spazio { margin-top: 24px; }
.modulo { display: flex; flex-direction: column; gap: 16px; }
.modulo .campo input, .modulo .campo textarea { width: 100%; }
.esiti { display: flex; flex-wrap: wrap; gap: 8px; }
.data-ora { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px; border: 1px solid var(--ink); background: var(--surface); }
.consiglio { display: flex; gap: 8px; align-items: baseline; color: var(--ink-soft); font-size: 14px; letter-spacing: -0.7px; }
.consiglio::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--ink); transform: translateY(-1px); }
.storia { display: flex; flex-direction: column; }
.storia li { list-style: none; display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.storia li p { color: var(--ink-soft); font-size: 14px; letter-spacing: -0.7px; }

/* Avviso in basso. */
.avviso { position: fixed; right: 24px; bottom: 24px; z-index: 20; padding: 12px 16px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); max-width: 420px; display: flex; gap: 8px; align-items: center; }
.avviso::before { content: ""; width: 8px; height: 8px; background: var(--primary); flex: none; }
.avviso.errore { background: var(--coral); color: var(--ink); }
.avviso.errore::before { background: var(--ink); }
[hidden] { display: none !important; }

/* Pagina d'accesso: il fondo scuro a quadretti della barra, una carta chiara al centro. */
.pagina-accesso {
  min-height: 100vh; background-color: var(--ink);
  background-image: linear-gradient(var(--ink-line) 1px, transparent 1px), linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
}
.accesso { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 24px 16px; }
.accesso .logo { height: 24px; width: auto; }
.carta-accesso { width: 100%; max-width: 400px; background: var(--paper); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.carta-accesso .intro { margin-top: -8px; }
.carta-accesso .campo input { width: 100%; }
.carta-accesso .btn-primario { justify-content: center; margin-top: 8px; }
.carta-accesso .btn-primario:disabled { cursor: wait; opacity: 0.6; }
.errore-accesso { background: var(--coral); color: var(--ink); padding: 8px 12px; }
.barra .fondo .esci { color: var(--subtle); justify-content: flex-start; }
.barra .fondo .esci:hover { color: var(--paper); background: var(--ink-raised); }

/* Telefono prima di tutto: sotto 810px la barra va in alto. */
@media (max-width: 809px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .scelta { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .scelta button { flex: none; }
  :root { --barra: 0px; }
  .barra { position: sticky; height: auto; flex-direction: row; align-items: center; padding: 12px 16px; gap: 12px; z-index: 5; overflow-x: auto; scrollbar-width: none; }
  .cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra .logo { height: 18px; margin: 0; }
  .barra nav { flex-direction: row; }
  .barra .fondo, .guida { display: none; }
  details.blocco.solo-telefono { display: flex; }
  .voce .conta { display: none; }
  /* Al telefono la tabella tiene solo azienda, telefono, stato e data: il resto è nella scheda. */
  [data-col="n"], [data-col="settore"], [data-col="tentativi"], [data-col="prossimo"] { display: none; }
  main { padding: 24px 16px; }
  .righe-contatto { grid-template-columns: 1fr; gap: 2px; }
  .righe-contatto dd { margin-bottom: 8px; }
  .storia li { grid-template-columns: 1fr; gap: 4px; }
}
@media (min-width: 810px) and (max-width: 1199px) { main { padding: 40px 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }