/* Controllo ordini Liveticket
   Tono: strumento di biglietteria, sobrio. L'unico elemento con carattere
   sono le "matrici" dei biglietti che fanno da filtro per stato. */

:root {
  --sfondo: #eef0ec;
  --carta: #fbfbf8;
  --inchiostro: #1f2a2e;
  --tenue: #5d686c;
  --riga: #d3d8d2;
  --petrolio: #134e5e;

  --c-pagato_senza_biglietti: #b3362c;
  --c-biglietti_senza_pagamento: #7b2d7f;
  --c-biglietti_incompleti: #b5651d;
  --c-controlli_non_superati: #0f766e;
  --c-da_verificare: #2b5da8;
  --c-attesa: #8c7322;
  --c-non_concluso: #6b7378;
  --c-completo: #2f7a4b;
  --c-tutti: #1f2a2e;

  --raggio: 6px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #151b1d;
    --carta: #1e2629;
    --inchiostro: #e4e8e5;
    --tenue: #9aa5a8;
    --riga: #334045;
    --petrolio: #6fb6c8;
    --c-pagato_senza_biglietti: #ec7a6f;
    --c-biglietti_senza_pagamento: #c88bd0;
    --c-biglietti_incompleti: #e5a160;
    --c-controlli_non_superati: #5fc4b8;
    --c-da_verificare: #86a9e6;
    --c-attesa: #d2bb6a;
    --c-non_concluso: #a2abaf;
    --c-completo: #74c48f;
    --c-tutti: #e4e8e5;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font: 15px/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

a { color: var(--petrolio); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--petrolio);
  outline-offset: 2px;
}

h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 .75rem; }

main { padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 3rem; max-width: 1500px; }

/* ------------------------------------------------------------ testata */

.testata {
  background: var(--carta);
  border-bottom: 1px solid var(--riga);
  padding: .75rem clamp(1rem, 3vw, 2.5rem);
}
.testata-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; }
.marchio { font-size: 1.15rem; font-weight: 650; color: var(--inchiostro); text-decoration: none; }
nav { display: flex; gap: 1.25rem; }
nav a { text-decoration: none; color: var(--tenue); padding-bottom: 2px; }
nav a[aria-current="page"] { color: var(--inchiostro); border-bottom: 2px solid var(--petrolio); }

.casella {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-top: .4rem; color: var(--tenue); font-size: .9rem;
}
.casella form { margin: 0; }
.casella .errore { color: var(--c-pagato_senza_biglietti); font-weight: 600; }

/* ------------------------------------------------------------- filtri */

.filtri { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.filtri label { display: flex; flex-direction: column; font-size: .85rem; color: var(--tenue); gap: .2rem; }
.filtri .cerca { flex: 1 1 16rem; max-width: 26rem; }
input {
  font: inherit; color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--riga); border-radius: var(--raggio); padding: .4rem .55rem;
}
button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--petrolio); color: var(--carta);
  border: 1px solid var(--petrolio); border-radius: var(--raggio); padding: .4rem 1rem;
}
button.secondario { background: transparent; color: var(--petrolio); padding: .2rem .7rem; font-size: .85rem; }
.esporta { align-self: center; font-size: .9rem; }

/* ----------------------------------------- matrici (filtro per stato) */

.matrici {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: .6rem;
  margin-bottom: 1rem;
}
.matrice {
  --c: var(--c-tutti);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 4.2rem;
  text-decoration: none;
  color: var(--inchiostro);
  background: var(--carta);
  border-top: 4px solid var(--c);
  /* tacche semicircolari ai lati, come la matrice di un biglietto */
  -webkit-mask:
    radial-gradient(circle 8px at 0 55%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 55%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 8px at 0 55%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 55%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.matrice strong {
  font-size: 1.7rem; font-weight: 650; line-height: 1;
  padding: 0 .85rem 0 1.15rem;
  color: var(--c);
}
.matrice span {
  font-size: .85rem; line-height: 1.25;
  padding: .5rem 1rem .5rem .85rem;
  border-left: 2px dashed var(--riga);   /* la perforazione */
  align-self: stretch; display: flex; align-items: center;
}
.matrice:hover { background: color-mix(in srgb, var(--c) 7%, var(--carta)); }
.matrice.scelta { background: var(--c); color: var(--carta); }
.matrice.scelta strong { color: var(--carta); }
.matrice.scelta span { border-left-color: color-mix(in srgb, var(--carta) 55%, transparent); }
.matrice.vuota:not(.scelta) { opacity: .55; }

.m-pagato_senza_biglietti { --c: var(--c-pagato_senza_biglietti); }
.m-biglietti_senza_pagamento { --c: var(--c-biglietti_senza_pagamento); }
.m-biglietti_incompleti { --c: var(--c-biglietti_incompleti); }
.m-controlli_non_superati { --c: var(--c-controlli_non_superati); }
.m-da_verificare { --c: var(--c-da_verificare); }
.m-attesa { --c: var(--c-attesa); }
.m-non_concluso { --c: var(--c-non_concluso); }
.m-completo { --c: var(--c-completo); }

.spiegazione { color: var(--tenue); max-width: 70ch; margin: 0 0 1rem; }

/* ------------------------------------------------------------ tabelle */

.tabella-scorrevole { overflow-x: auto; background: var(--carta); border: 1px solid var(--riga); border-radius: var(--raggio); }
table.ordini { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ordini th {
  text-align: left; font-weight: 600; color: var(--tenue); font-size: .82rem;
  padding: .6rem .75rem; border-bottom: 1px solid var(--riga); white-space: nowrap;
}
.ordini td { padding: .55rem .75rem; border-bottom: 1px solid var(--riga); vertical-align: top; }
.ordini tbody tr:last-child td { border-bottom: 0; }
.ordini tbody tr:hover { background: color-mix(in srgb, var(--petrolio) 5%, transparent); }
.ordini .num { text-align: right; white-space: nowrap; }
.ordini th.num { text-align: right; }
.ordini small { display: block; color: var(--tenue); font-size: .8rem; }
.ordini .evento { min-width: 10rem; max-width: 26rem; }
.ordini .oggetto { min-width: 22rem; }

/* linea di stato a sinistra della riga */
.ordini tbody tr[class^="r-"] td:first-child { border-left: 4px solid var(--c, transparent); }
.r-pagato_senza_biglietti { --c: var(--c-pagato_senza_biglietti); }
.r-biglietti_senza_pagamento { --c: var(--c-biglietti_senza_pagamento); }
.r-biglietti_incompleti { --c: var(--c-biglietti_incompleti); }
.r-controlli_non_superati { --c: var(--c-controlli_non_superati); }
.r-da_verificare { --c: var(--c-da_verificare); }
.r-attesa { --c: var(--c-attesa); }
.r-non_concluso { --c: var(--c-non_concluso); }
.r-completo { --c: var(--c-completo); }

.codice { font-weight: 600; white-space: nowrap; }
.stato { font-weight: 600; white-space: nowrap; }
.s-pagato_senza_biglietti { color: var(--c-pagato_senza_biglietti); }
.s-biglietti_senza_pagamento { color: var(--c-biglietti_senza_pagamento); }
.s-biglietti_incompleti { color: var(--c-biglietti_incompleti); }
.s-controlli_non_superati { color: var(--c-controlli_non_superati); }
.s-da_verificare { color: var(--c-da_verificare); }
.s-attesa { color: var(--c-attesa); }
.s-non_concluso { color: var(--c-non_concluso); }
.s-completo { color: var(--c-completo); }

.ordini small.nota { color: var(--c-da_verificare); }
.ordini small.falliti { color: var(--c-non_concluso); }
.assente { color: var(--tenue); font-style: italic; }

.esito { font-weight: 600; }
.esito.ok { color: var(--c-completo); }
.esito.ko { color: var(--c-pagato_senza_biglietti); }
.esito.ignoto { color: var(--c-da_verificare); }

.vuoto { background: var(--carta); border: 1px dashed var(--riga); border-radius: var(--raggio); padding: 1.5rem; color: var(--tenue); }

/* ----------------------------------------------------- scheda ordine */

.scheda {
  background: var(--carta); border: 1px solid var(--riga); border-left: 5px solid var(--c);
  border-radius: var(--raggio); padding: 1.1rem 1.4rem; max-width: 60rem;
}
.scheda dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 1rem 0 0; }
.scheda dt { color: var(--tenue); }
.scheda dd { margin: 0; }

@media (max-width: 640px) {
  .matrici { grid-template-columns: 1fr 1fr; }
  .matrice strong { font-size: 1.35rem; padding-left: .9rem; }
}

/* ------------------------------------------- gestione delle anomalie */

nav .contatore {
  display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-left: .15em;
  border-radius: 1em; background: var(--c-attesa); color: var(--carta);
  font-size: .78rem; font-weight: 650; text-align: center; line-height: 1.45;
}
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

button.piccolo { font-size: .8rem; padding: .2rem .55rem; font-weight: 600; }
.ordini td.azioni { white-space: nowrap; }
.ordini td.azioni button { display: block; width: 100%; }
.ordini td.azioni button + button { margin-top: .3rem; }
.ordini .nota-testo { min-width: 14rem; max-width: 26rem; white-space: pre-line; }

dialog {
  border: 1px solid var(--riga); border-radius: var(--raggio);
  background: var(--carta); color: var(--inchiostro);
  padding: 1.25rem 1.4rem; width: min(32rem, calc(100vw - 2rem));
}
dialog::backdrop { background: rgb(15 25 28 / .45); }
dialog h2 { margin-top: 0; }

#form-gestione label, .form-gestione label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .85rem; color: var(--tenue); margin-bottom: .8rem;
}
textarea {
  font: inherit; color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--riga); border-radius: var(--raggio); padding: .45rem .55rem; resize: vertical;
}
textarea:focus-visible { outline: 3px solid var(--petrolio); outline-offset: 2px; }
.dialogo-pulsanti { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }

.gestione {
  background: var(--carta); border: 1px solid var(--riga); border-radius: var(--raggio);
  padding: 1rem 1.4rem; margin-top: 1.25rem; max-width: 60rem;
}
.gestione h2 { margin-top: 0; }
.form-gestione { max-width: 40rem; }
.form-gestione .dialogo-pulsanti { justify-content: flex-start; }

/* lo storico è davvero una sequenza nel tempo: lista ordinata con linea verticale */
.storico { list-style: none; margin: 1.25rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--riga); }
.storico li { position: relative; padding: 0 0 .9rem .9rem; }
.storico li::before {
  content: ""; position: absolute; left: calc(-1rem - 5px); top: .45rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--petrolio);
}
.storico-quando { color: var(--tenue); font-size: .85rem; margin-right: .6rem; }
.storico-azione { font-weight: 600; }
.storico p { margin: .2rem 0 0; white-space: pre-line; max-width: 70ch; }

.casella .versione { margin-left: auto; font-size: .8rem; }

/* ------------------------------------------------------------ controlli */

.ordini small.controllo-ko { color: var(--c-controlli_non_superati); }
.controlli {
  background: var(--carta); border: 1px solid var(--riga); border-radius: var(--raggio);
  padding: 1rem 1.4rem; margin-top: 1.25rem; max-width: 60rem;
}
.controlli h2 { margin-top: 0; }
.controlli .spiegazione { margin: .75rem 0 0; }
.tabella-controlli { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tabella-controlli th { text-align: left; font-weight: 500; padding: .35rem .9rem .35rem 0; }
.tabella-controlli td { padding: .35rem .9rem .35rem 0; color: var(--tenue); }
.tabella-controlli tr + tr > * { border-top: 1px solid var(--riga); }
.tabella-controlli .esito-controllo { font-weight: 650; white-space: nowrap; width: 8.5rem; }
.c-ok .esito-controllo { color: var(--c-completo); }
.c-ko .esito-controllo { color: var(--c-pagato_senza_biglietti); }
.c-ko th { font-weight: 650; }
.c-na .esito-controllo { color: var(--tenue); font-weight: 500; }

/* ---------------------------------------------------------------- guida */

.guida { max-width: 52rem; }
.guida h2 { margin-top: 2.25rem; }
.guida p, .guida li { max-width: 72ch; }
.guida dl { margin: 0; }
.guida dt { font-weight: 650; margin-top: 1rem; }
.guida dd { margin: .2rem 0 0; }
.guida dt.stato-guida { color: var(--c); }
.guida dt.stato-guida::before {
  content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .5rem;
  border-radius: 2px; background: var(--c); vertical-align: -.05rem;
}

/* ------------------------------------------------------- archiviazione */

.filtri .archivia { margin-left: auto; align-self: end; padding: .4rem 1rem; font-size: .9rem; }
button:disabled { opacity: .5; cursor: default; }
.avviso {
  border-radius: var(--raggio); padding: .7rem 1rem; margin: 0 0 1rem; max-width: 60rem;
  border: 1px solid; background: var(--carta);
}
.avviso-ok { border-color: var(--c-completo); color: var(--c-completo); }
.avviso-errore { border-color: var(--c-pagato_senza_biglietti); color: var(--c-pagato_senza_biglietti); }

/* ------------------------------------------------- selezione e spostamento */

.ordini th.scelta, .ordini td.scelta { width: 2.2rem; padding-right: 0; }
.ordini input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--petrolio); }
.barra-sposta {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  background: var(--petrolio); color: var(--carta);
  border-radius: var(--raggio); padding: .55rem .9rem; margin-bottom: .6rem;
}
.barra-sposta[hidden] { display: none; }
.barra-sposta label { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.barra-sposta select {
  font: inherit; font-size: .9rem; color: var(--inchiostro); background: var(--carta);
  border: 0; border-radius: var(--raggio); padding: .3rem .4rem; max-width: 18rem;
}
.barra-sposta button { background: var(--carta); color: var(--petrolio); border-color: var(--carta); }
.barra-sposta button.secondario { background: transparent; color: var(--carta); border-color: currentColor; }
.barra-sposta [data-sposta-conteggio] { font-weight: 600; }
.ordini td.num small { white-space: normal; max-width: 9rem; margin-left: auto; }
.ordini td .stato { white-space: normal; display: inline-block; max-width: 11rem; }

/* ------------------------------------------------------ app installata */

/* margini per notch e barre di sistema quando l'app è a tutto schermo */
.testata {
  padding-top: calc(.75rem + env(safe-area-inset-top));
  padding-left: calc(clamp(1rem, 3vw, 2.5rem) + env(safe-area-inset-left));
  padding-right: calc(clamp(1rem, 3vw, 2.5rem) + env(safe-area-inset-right));
}
main {
  padding-left: calc(clamp(1rem, 3vw, 2.5rem) + env(safe-area-inset-left));
  padding-right: calc(clamp(1rem, 3vw, 2.5rem) + env(safe-area-inset-right));
  padding-bottom: calc(3rem + env(safe-area-inset-bottom));
}
.casella form + form, .casella .versione + form { margin-left: .25rem; }

.pagina-accesso main { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; max-width: none; }
.scheda-accesso {
  width: min(24rem, 100%); background: var(--carta); border: 1px solid var(--riga);
  border-top: 4px solid var(--petrolio); border-radius: var(--raggio); padding: 1.5rem 1.6rem;
}
.scheda-accesso h1 { font-size: 1.25rem; margin-bottom: 1rem; }
.scheda-accesso label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--tenue); margin-bottom: .9rem; }
.scheda-accesso input { font-size: 1rem; }
.scheda-accesso button { width: 100%; padding: .6rem; font-size: 1rem; }
.scheda-accesso .spiegazione { margin: .9rem 0 0; font-size: .85rem; }

/* ---------------------------------------------- telefono: righe come schede */

@media (max-width: 760px) {
  body { font-size: 16px; }
  .testata-riga { gap: .4rem 1rem; }
  nav { flex-wrap: wrap; gap: .3rem 1rem; }
  .filtri label { flex: 1 1 9rem; }
  .filtri .cerca { flex-basis: 100%; max-width: none; }
  .filtri .archivia { margin-left: 0; flex-basis: 100%; }

  .tabella-scorrevole:has(table.schede) { background: transparent; border: 0; overflow: visible; }
  table.schede thead { display: none; }
  table.schede, table.schede tbody, table.schede tr, table.schede td { display: block; width: 100%; }
  table.schede tr {
    position: relative; background: var(--carta); border: 1px solid var(--riga);
    border-left: 5px solid var(--c, var(--riga)); border-radius: var(--raggio);
    padding: .7rem .9rem .6rem; margin-bottom: .6rem;
  }
  table.schede tbody tr[class^="r-"] td:first-child { border-left: 0; }
  table.schede td { border: 0; padding: .12rem 0; text-align: left; max-width: none; min-width: 0; }
  table.schede td.num { text-align: left; white-space: normal; }
  table.schede td.num small { margin-left: 0; max-width: none; display: inline; }
  table.schede td.num small::before { content: ", "; }
  table.schede td[data-etichetta]::before {
    content: attr(data-etichetta); display: inline-block; min-width: 6.5rem;
    color: var(--tenue); font-size: .8rem;
  }
  table.schede td[data-etichetta]:empty { display: none; }
  table.schede td.scelta { position: absolute; top: .7rem; right: .8rem; width: auto; padding: 0; }
  table.schede td.scelta input { width: 1.4rem; height: 1.4rem; }
  table.schede .codice { font-size: 1.05rem; }
  table.schede td .stato { max-width: none; }
  table.schede td.azioni { display: flex; gap: .5rem; padding-top: .5rem; }
  table.schede td.azioni button { width: auto; flex: 1; padding: .5rem; font-size: .9rem; }
  table.schede td.azioni button + button { margin-top: 0; }
  table.schede td.azioni:empty { display: none; }
  .barra-sposta { top: env(safe-area-inset-top); }
  .barra-sposta select { max-width: 100%; flex: 1; }
}
@media (max-width: 760px) {
  .matrice.vuota:not(.scelta) { display: none; }   /* su telefono si mostrano solo gli stati con ordini */
}

/* ---------------------------------------------------------- statistiche */

.intervallo { margin: 0 0 .8rem; color: var(--tenue); }
.intervallo strong { color: var(--inchiostro); font-weight: 600; }
.statistiche { max-width: 64rem; }
.giorno-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.giorno-scelta h1 { margin: 0; flex-basis: 100%; }
.giorno-scelta form { margin: 0; }
.freccia {
  display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--riga); background: var(--carta); text-decoration: none; font-size: 1.4rem; line-height: 1;
}

.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.cifre > div { background: var(--carta); border: 1px solid var(--riga); border-radius: var(--raggio); padding: .8rem 1rem; }
.cifre dt { color: var(--tenue); font-size: .85rem; }
.cifre dd { margin: .1rem 0 0; font-size: 1.9rem; font-weight: 650; line-height: 1.15; color: var(--petrolio); }
.cifre dd.nota-cifra { font-size: .82rem; font-weight: 400; color: var(--tenue); margin-top: .25rem; }

.riquadro { background: var(--carta); border: 1px solid var(--riga); border-radius: var(--raggio); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.riquadro h2 { margin: 0 0 .75rem; }
.affiancati { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1rem; }
.riquadro .tabella-controlli td.num { text-align: right; color: var(--inchiostro); }
.riquadro details { margin-top: .75rem; }
.riquadro summary { cursor: pointer; color: var(--petrolio); }
.riquadro details .tabella-scorrevole { margin-top: .6rem; }

.grafico-orario { width: 100%; height: auto; display: block; font-family: inherit; }
.grafico-orario .griglia { stroke: var(--riga); stroke-width: 1; }
.grafico-orario .asse { fill: var(--tenue); font-size: 11px; }
.grafico-orario .valore { fill: var(--inchiostro); font-size: 10px; font-weight: 600; }
.grafico-orario .zona { fill: transparent; }
.grafico-orario g:hover .zona { fill: color-mix(in srgb, var(--petrolio) 7%, transparent); }
.grafico-orario .ora-attuale { fill: color-mix(in srgb, var(--c-attesa) 10%, transparent); }
.grafico-orario .media7 { fill: none; stroke: var(--petrolio); stroke-width: 2; stroke-dasharray: 5 4; }
.b-completo { fill: var(--c-completo); background: var(--c-completo); }
.b-anomalia { fill: var(--c-pagato_senza_biglietti); background: var(--c-pagato_senza_biglietti); }
.b-attesa { fill: var(--c-attesa); background: var(--c-attesa); }
.b-non_concluso { fill: var(--c-non_concluso); background: var(--c-non_concluso); }

.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: 0; margin: .5rem 0 0; font-size: .85rem; color: var(--tenue); }
.legenda li { display: flex; align-items: center; gap: .4rem; }
.campione { width: .8rem; height: .8rem; border-radius: 2px; display: inline-block; }
.campione-linea { width: 1.4rem; border-top: 2px dashed var(--petrolio); display: inline-block; }
.archivio-estensione { margin-top: 1.5rem; font-size: .85rem; }

@media (max-width: 760px) {
  .grafico-orario .asse { font-size: 15px; }
  .grafico-orario .valore { display: none; }
  .cifre dd { font-size: 1.6rem; }
}
.riquadro h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .4rem; }
.riquadro p { max-width: 75ch; }
.riquadro form { margin: .4rem 0; }
.form-storico { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.form-storico input { width: 4.5rem; margin: 0 .3rem; }
progress { width: 100%; max-width: 32rem; height: .8rem; accent-color: var(--petrolio); }
.testo-errore { color: var(--c-pagato_senza_biglietti); }
.archivio-estensione { font-size: 1rem; margin-top: 1.5rem; }

/* ----------------------------------------------------- accesso e utenti */

.casella .chi { display: inline-flex; gap: .8rem; margin-left: .5rem; }
.casella .chi a { color: var(--inchiostro); text-decoration: none; font-weight: 600; }
.casella .chi a[aria-current="page"] { border-bottom: 2px solid var(--petrolio); }
.pagina-account { max-width: 56rem; }
.modulo { display: flex; flex-direction: column; gap: .7rem; max-width: 26rem; }
.modulo label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--tenue); }
.modulo button { align-self: flex-start; }
.modulo-riga { flex-direction: row; flex-wrap: wrap; align-items: end; max-width: none; }
.modulo select, .in-riga select {
  font: inherit; color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--riga); border-radius: var(--raggio); padding: .4rem .5rem;
}
.in-riga { display: inline; margin: 0; }
.azioni-utente { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 14rem; }
.azioni-utente .in-riga { display: block; }
.campo-codice { font-size: 1.4rem; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
.qr { background: #fff; display: inline-block; padding: .5rem; border-radius: var(--raggio); margin: .5rem 0; }
.qr svg { width: 12rem; height: 12rem; display: block; }
.chiave-totp { word-break: break-all; font-size: .95rem; }
.passi { padding-left: 1.2rem; max-width: 70ch; }
.passi li { margin-bottom: .3rem; }
.testo-ok { color: var(--c-completo); }
.temporanea p { margin: .2rem 0; }
.temporanea code { font-size: 1.1rem; background: var(--sfondo); padding: .1rem .4rem; border-radius: 4px; user-select: all; }
.modulo-email { display: inline-flex; gap: .3rem; align-items: center; }
.modulo-email input { width: 15rem; font-size: .88rem; padding: .3rem .45rem; }

/* ---------------------------------------------- impostazioni e sistema */

.pagina-impostazioni { max-width: 62rem; }
.indice-impostazioni { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .9rem 1.2rem; }
.campo { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--tenue); }
.campo input, .campo select { font-size: .95rem; }
.campo small { font-size: .78rem; }
.campo-spunta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--inchiostro); font-size: .92rem; }
.campo-spunta small { flex-basis: 100%; color: var(--tenue); }
.campo-spunta input { width: 1.1rem; height: 1.1rem; accent-color: var(--petrolio); }
.campo-breve { max-width: 22rem; margin-bottom: .5rem; }
.sezione-impostazioni { scroll-margin-top: 1rem; }
.prova { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--riga); }
.esito-prova { margin-top: .6rem; font-size: .9rem; }
.esito-prova ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.esito-prova.in-corso { color: var(--tenue); }
.esito-prova.riuscita strong { color: var(--c-completo); }
.esito-prova.non-riuscita strong { color: var(--c-pagato_senza_biglietti); }
.barra-salva {
  position: sticky; bottom: 0; z-index: 2; display: flex; gap: .6rem; flex-wrap: wrap;
  background: var(--sfondo); padding: .8rem 0 calc(.8rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--riga);
}
.avviso ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.dati-sistema { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0 0 1rem; }
.dati-sistema dt { color: var(--tenue); }
.dati-sistema dd { margin: 0; word-break: break-all; }
.pacchetto { border: 1px solid var(--riga); border-radius: var(--raggio); padding: .8rem 1rem; margin: .8rem 0; }
.pacchetto h3 { margin: 0 0 .4rem; }
.pacchetto h3 small { font-weight: 400; color: var(--tenue); }
.novita { padding-left: 1.2rem; font-size: .9rem; max-width: 75ch; }
.registro {
  background: #11181b; color: #d7dfdc; font-size: .78rem; line-height: 1.45; padding: .8rem 1rem;
  border-radius: var(--raggio); max-height: 28rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.riavvio { margin: 3rem auto; text-align: left; }
.riavvio progress { width: 100%; }

.testo-attenzione { color: var(--c-biglietti_incompleti); }

.banner-ricerche {
  background: color-mix(in srgb, var(--c-da_verificare) 10%, var(--carta)); border: 1px solid var(--c-da_verificare);
  border-radius: var(--raggio); padding: .55rem .9rem; margin: 0 0 1rem; font-size: .9rem; max-width: 60rem;
}
.banner-ricerche p { margin: .15rem 0; }
.ordini small.nota-ricerca { color: var(--c-da_verificare); }
.ordini small.nota-ricerca.in-corso { font-weight: 600; }

.selettori { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.selettore { display: inline-flex; border: 1px solid var(--riga); border-radius: var(--raggio); overflow: hidden; background: var(--carta); }
.selettore a { padding: .3rem .75rem; text-decoration: none; color: var(--inchiostro); font-size: .88rem; }
.selettore a + a { border-left: 1px solid var(--riga); }
.selettore a[aria-current="true"] { background: var(--petrolio); color: var(--carta); font-weight: 600; }
.tabella-metodi th[scope="row"] { font-weight: 600; white-space: nowrap; }
.barra-quota { display: inline-block; width: 7rem; height: .55rem; border-radius: 1rem; background: var(--sfondo);
  vertical-align: middle; overflow: hidden; margin-right: .35rem; }
.barra-quota span { display: block; height: 100%; background: var(--petrolio); }
.barra-quota.bassa span { background: var(--c-pagato_senza_biglietti); }

.cifre > .cifra-scelta { padding: 0; }
.cifra-scelta a { display: block; padding: .8rem 1rem; color: inherit; text-decoration: none; border-radius: var(--raggio); height: 100%; }
.cifra-scelta a:hover { background: color-mix(in srgb, var(--petrolio) 6%, var(--carta)); }
.cifre > .cifra-scelta.attiva { border-color: var(--petrolio); box-shadow: inset 0 0 0 1px var(--petrolio); }
.cifra-scelta.attiva dt::after { content: " (nel grafico)"; font-size: .78rem; }

.tabella-incassi th { font-weight: 500; }
.tabella-incassi tr.sotto th { padding-left: 1.2rem; color: var(--tenue); }
.tabella-incassi tr.totale > * { font-weight: 650; border-top: 2px solid var(--riga); }
.tabella-incassi td.num { white-space: nowrap; width: 9rem; }
.tabella-incassi .nota-riga { color: var(--tenue); font-size: .85rem; }

.filtro-attivo { background: color-mix(in srgb, var(--petrolio) 8%, var(--carta)); border: 1px solid var(--petrolio);
  border-radius: var(--raggio); padding: .55rem .9rem; margin: 0 0 .8rem; font-size: .92rem; }
.filtro-attivo a { margin-left: .6rem; }
.ordini tfoot .riga-totale > * { font-weight: 650; border-top: 2px solid var(--riga); border-bottom: 0; }
.tabella-metodi th[scope="row"] a { color: var(--petrolio); }

.tag-locale { display: block; font-weight: 400; color: var(--tenue); font-size: .78rem; }

.banner-ricerche { position: relative; padding-right: 2.4rem; }
.banner-ricerche[hidden] { display: none; }
.chiudi-banner { position: absolute; top: .3rem; right: .4rem; background: transparent; border: 0; color: var(--inchiostro);
  font-size: 1.3rem; line-height: 1; padding: .15rem .45rem; cursor: pointer; }
.chiudi-banner:hover { background: color-mix(in srgb, var(--inchiostro) 10%, transparent); border-radius: var(--raggio); }
th.intestazione-ordinabile { cursor: pointer; user-select: none; white-space: nowrap; }
th.intestazione-ordinabile:hover { color: var(--petrolio); }
th.intestazione-ordinabile::after { content: " ↕"; opacity: .35; font-size: .8em; }
th[aria-sort="ascending"]::after { content: " ▲"; opacity: 1; }
th[aria-sort="descending"]::after { content: " ▼"; opacity: 1; }

/* --------------------------------------------------------------- menu */
.testata-riga { position: relative; }
.menu-utente { margin-left: auto; position: relative; align-self: center; }
.menu-utente summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem;
  padding: .35rem .7rem; border: 1px solid var(--riga); border-radius: var(--raggio); background: var(--carta);
  font-weight: 600; color: var(--inchiostro); user-select: none;
}
.menu-utente summary::-webkit-details-marker { display: none; }
.menu-utente[open] summary, .menu-utente summary:hover { border-color: var(--petrolio); }
.hamburger { display: inline-flex; flex-direction: column; gap: 3px; }
.hamburger span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
.menu-pannello {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; min-width: 15rem;
  background: var(--carta); border: 1px solid var(--riga); border-radius: var(--raggio);
  box-shadow: 0 8px 24px rgb(0 0 0 / .12); padding: .4rem 0; display: flex; flex-direction: column;
}
.menu-pannello a { padding: .5rem 1rem; color: var(--inchiostro); text-decoration: none; }
.menu-pannello a:hover { background: color-mix(in srgb, var(--petrolio) 8%, transparent); }
.menu-pannello a[aria-current="page"] { font-weight: 650; color: var(--petrolio); }
.menu-pannello hr { border: 0; border-top: 1px solid var(--riga); margin: .35rem 0; width: 100%; }
.menu-versione { padding: .2rem 1rem; font-size: .8rem; color: var(--tenue); }
.menu-pannello form { padding: .4rem 1rem .3rem; margin: 0; }
.menu-pannello form button { width: 100%; }
.solo-mobile { display: none; flex-direction: column; }
@media (max-width: 760px) {
  .nav-principale { display: none; }
  .solo-mobile { display: flex; }
  .menu-nome { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-pannello { position: fixed; left: .6rem; right: .6rem; top: calc(3.6rem + env(safe-area-inset-top)); min-width: 0; }
}

/* ------------------------------------------------------------ geografia */
.geo-griglia { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 1.2rem; align-items: start; }
.geo-cartina svg { width: 100%; height: auto; display: block; }
.cartina .regione { stroke: var(--carta); stroke-width: 1.2; fill: var(--sfondo); transition: opacity .15s; }
.cartina a:hover .regione { opacity: .75; }
.cartina .regione.livello-0 { fill: color-mix(in srgb, var(--riga) 70%, var(--carta)); }
.livello-1 { fill: color-mix(in srgb, var(--petrolio) 18%, var(--carta)); background: color-mix(in srgb, var(--petrolio) 18%, var(--carta)); }
.livello-2 { fill: color-mix(in srgb, var(--petrolio) 36%, var(--carta)); background: color-mix(in srgb, var(--petrolio) 36%, var(--carta)); }
.livello-3 { fill: color-mix(in srgb, var(--petrolio) 55%, var(--carta)); background: color-mix(in srgb, var(--petrolio) 55%, var(--carta)); }
.livello-4 { fill: color-mix(in srgb, var(--petrolio) 75%, var(--carta)); background: color-mix(in srgb, var(--petrolio) 75%, var(--carta)); }
.livello-5 { fill: var(--petrolio); background: var(--petrolio); }
.cartina .regione.scelta { stroke: var(--c-biglietti_incompleti); stroke-width: 3; }
.geo-legenda { display: flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--tenue); margin-top: .4rem; }
.campione-geo { width: 1.3rem; height: .7rem; border-radius: 2px; display: inline-block; }
.riga-scelta > * { background: color-mix(in srgb, var(--c-biglietti_incompleti) 10%, transparent); }
.tabella-alta { max-height: 26rem; overflow-y: auto; }
@media (max-width: 760px) { .geo-griglia { grid-template-columns: 1fr; } .geo-cartina { max-width: 20rem; margin: 0 auto; } }

.cartina .regione.livello-1 { fill: color-mix(in srgb, var(--petrolio) 18%, var(--carta)); }
.cartina .regione.livello-2 { fill: color-mix(in srgb, var(--petrolio) 36%, var(--carta)); }
.cartina .regione.livello-3 { fill: color-mix(in srgb, var(--petrolio) 55%, var(--carta)); }
.cartina .regione.livello-4 { fill: color-mix(in srgb, var(--petrolio) 75%, var(--carta)); }
.cartina .regione.livello-5 { fill: var(--petrolio); }

.pulsanti-sistema { display: flex; flex-wrap: wrap; gap: .6rem; }
.pulsanti-sistema form { margin: 0; }
button.pericolo { color: var(--c-pagato_senza_biglietti); border-color: var(--c-pagato_senza_biglietti); }

.banner-pausa { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; max-width: 60rem;
  background: color-mix(in srgb, var(--c-attesa) 14%, var(--carta)); border: 1px solid var(--c-attesa);
  border-radius: var(--raggio); padding: .55rem .9rem; margin: 0 0 1rem; font-size: .92rem; }
.banner-pausa p { margin: 0; flex: 1 1 20rem; }
.banner-pausa form { margin: 0; }

/* ------------------------------------------- impostazioni comprimibili */
details.sezione-impostazioni > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; }
details.sezione-impostazioni > summary::-webkit-details-marker { display: none; }
details.sezione-impostazioni > summary::before { content: "▸"; color: var(--tenue); font-size: .9rem; transition: transform .15s; }
details.sezione-impostazioni[open] > summary::before { transform: rotate(90deg); }
details.sezione-impostazioni > summary h2 { margin: 0; }
details.sezione-impostazioni[open] > summary { margin-bottom: .8rem; }
details.sezione-impostazioni[data-errore] > summary h2 { color: var(--c-pagato_senza_biglietti); }
.comandi-sezioni { display: flex; gap: .5rem; margin: 0 0 .6rem; }
.dialogo-installa { max-width: 28rem; border: 1px solid var(--riga); border-radius: var(--raggio); padding: 1.2rem 1.4rem; }
.dialogo-installa ol { padding-left: 1.3rem; }
.dialogo-installa::backdrop { background: rgb(0 0 0 / .35); }

.esito-prontezza { padding: .5rem .8rem; border-radius: var(--raggio); margin: 0 0 .6rem; }
.esito-prontezza.esito-ok { background: color-mix(in srgb, var(--c-completo) 12%, var(--carta)); }
.esito-prontezza.esito-avviso { background: color-mix(in srgb, var(--c-attesa) 14%, var(--carta)); }
.esito-prontezza.esito-ko { background: color-mix(in srgb, var(--c-pagato_senza_biglietti) 12%, var(--carta)); }
.elenco-prontezza { list-style: none; padding: 0; margin: 0 0 .8rem; }
.elenco-prontezza li { padding: .3rem 0; border-bottom: 1px dashed var(--riga); font-size: .92rem; }
.elenco-prontezza .segno { display: inline-block; width: 1.2rem; font-weight: 700; }
.elenco-prontezza .p-ok .segno { color: var(--c-completo); }
.elenco-prontezza .p-avviso .segno { color: var(--c-attesa); }
.elenco-prontezza .p-ko .segno { color: var(--c-pagato_senza_biglietti); }