/**
 * Tracking BRT — stile dell'app embedded.
 *
 * Due regole da cui dipende il funzionamento, non l'estetica:
 *
 *  1. NESSUN `position: fixed`, da nessuna parte. Dentro l'iframe dell'admin un
 *     elemento fisso si ancora al viewport dell'IFRAME, che App Bridge
 *     dimensiona su tutta l'altezza del contenuto: su una pagina lunga viene
 *     disegnato fuori schermo. Barra di conferma e messaggi stanno nel flusso.
 *  2. NESSUNA unità `vh` e nessuna altezza percentuale sul corpo: l'altezza
 *     dell'iframe non è quella della finestra, e un layout tarato su `100vh`
 *     lascia mezza pagina bianca o taglia il contenuto.
 */

:root {
  color-scheme: light dark;

  --sfondo: #f1f1f1;
  --superficie: #ffffff;
  --superficie-tenue: #fafafa;
  --testo: #1a1a1a;
  --testo-tenue: #616161;
  --bordo: #dcdcdc;
  --bordo-forte: #c9c9c9;
  --primario: #303030;
  --primario-testo: #ffffff;
  --fuoco: #005bd3;

  --scrivi: #0c5132;
  --scrivi-sfondo: #cdfee1;
  --rivedere: #5e4200;
  --rivedere-sfondo: #ffe9b3;
  --salta: #4a4a4a;
  --salta-sfondo: #ebebeb;
  --errore: #8e1f0b;
  --errore-sfondo: #ffe4de;

  /* Livelli di fiducia: sfondo della sola «identità provata». Gli altri livelli
     riusano i colori sopra, ma con un'altra forma (vedi .pastiglia-livello). */
  --livello-provata-sfondo: #e8f1ff;

  --raggio: 10px;
  --raggio-piccolo: 6px;
  --ombra: 0 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #1a1a1a;
    --superficie: #242424;
    --superficie-tenue: #2b2b2b;
    --testo: #e3e3e3;
    --testo-tenue: #a8a8a8;
    --bordo: #3d3d3d;
    --bordo-forte: #4a4a4a;
    --primario: #e3e3e3;
    --primario-testo: #1a1a1a;
    --fuoco: #8ab4f8;

    --scrivi: #a6f0c6;
    --scrivi-sfondo: #0c3a22;
    --rivedere: #ffd79d;
    --rivedere-sfondo: #4a3200;
    --salta: #c9c9c9;
    --salta-sfondo: #333333;
    --errore: #ffb3a7;
    --errore-sfondo: #4d1409;
    --livello-provata-sfondo: #172a4a;
    --ombra: 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pagina {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

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

.testata {
  margin: 4px 0 16px;
}

h1 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.3;
}

h2 {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sottotitolo {
  margin: 0 0 12px;
  color: var(--testo-tenue);
  max-width: 70ch;
}

.numero-passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--primario);
  color: var(--primario-testo);
  font-size: 12px;
  font-weight: 600;
}

/* --------------------------------------------------------------- contenitori */

.riquadro {
  background: var(--superficie);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 16px;
  margin-bottom: 14px;
}

.nascosto {
  display: none !important;
}

.avviso-grave {
  border-left: 4px solid var(--errore);
  background: var(--errore-sfondo);
  color: var(--errore);
}

.avviso-grave h2,
.avviso-grave code {
  color: inherit;
}

.dettaglio-errore {
  margin: 8px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-word;
}

.nota {
  margin: 6px 0 0;
  color: var(--testo-tenue);
  font-size: 12.5px;
  max-width: 80ch;
}

.nota-attenzione {
  color: var(--rivedere);
  background: var(--rivedere-sfondo);
  border-radius: var(--raggio-piccolo);
  padding: 8px 10px;
}

.pie {
  color: var(--testo-tenue);
  font-size: 12.5px;
  padding: 0 4px 24px;
  max-width: 80ch;
}

/* ------------------------------------------------------------------ messaggi */

.messaggi:empty {
  display: none;
}

.messaggio {
  border-radius: var(--raggio-piccolo);
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--salta-sfondo);
  color: var(--testo);
}

.messaggio-ok {
  background: var(--scrivi-sfondo);
  color: var(--scrivi);
}

.messaggio-errore {
  background: var(--errore-sfondo);
  color: var(--errore);
}

/* ------------------------------------------------------------- scelta file */

.zona-drop {
  position: relative;
  border: 2px dashed var(--bordo-forte);
  border-radius: var(--raggio);
  background: var(--superficie-tenue);
  padding: 20px 16px;
  text-align: center;
}

.zona-drop-attiva {
  border-color: var(--fuoco);
  background: var(--scrivi-sfondo);
}

/* L'input resta raggiungibile da tastiera, ma lo si clicca tramite l'etichetta. */
.campo-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.zona-drop-etichetta {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  border-radius: var(--raggio-piccolo);
  padding: 6px 10px;
}

.zona-drop-etichetta strong {
  font-size: 15px;
}

.zona-drop-etichetta span {
  color: var(--testo-tenue);
}

.campo-file:focus + .zona-drop-etichetta,
.campo-file:focus-visible + .zona-drop-etichetta {
  outline: 2px solid var(--fuoco);
  outline-offset: 2px;
}

.nome-file {
  margin: 10px 0 0;
  font-weight: 600;
  word-break: break-all;
}

/* -------------------------------------------------------------------- azioni */

.barra-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.barra-azioni-coda {
  margin-top: 0;
}

.riempi {
  flex: 1 1 auto;
}

.btn {
  font: inherit;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  color: var(--testo);
  padding: 8px 14px;
  cursor: pointer;
  min-height: 36px;
}

.btn:hover:not(:disabled) {
  background: var(--superficie-tenue);
}

.btn:focus-visible {
  outline: 2px solid var(--fuoco);
  outline-offset: 1px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primario {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--primario-testo);
  font-weight: 600;
}

.btn-primario:hover:not(:disabled) {
  filter: brightness(1.15);
  background: var(--primario);
}

.btn-piatto {
  background: transparent;
  border-color: transparent;
  color: var(--testo-tenue);
  text-decoration: underline;
  padding: 8px 10px;
}

.btn-piatto:hover:not(:disabled) {
  color: var(--testo);
  background: var(--superficie-tenue);
}

/* -------------------------------------------------------------------- modulo */

.modulo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campo > label {
  font-weight: 600;
}

.campo-interruttore > label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}

.campo-interruttore input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 18px;
  accent-color: var(--fuoco);
  cursor: pointer;
}

select,
input[type="number"] {
  font: inherit;
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  padding: 7px 9px;
  min-height: 36px;
  max-width: 100%;
}

.campo-breve input[type="number"] {
  max-width: 120px;
}

/* ------------------------------------------------------------------- attesa */

.attesa {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rotella {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid var(--bordo-forte);
  border-top-color: var(--fuoco);
  border-radius: 50%;
  animation: gira 0.8s linear infinite;
}

@keyframes gira {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rotella {
    animation: none;
  }
}

/* ---------------------------------------------------------------- riepilogo */

.riepilogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.tessera {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--raggio-piccolo);
  background: var(--superficie-tenue);
  border: 1px solid var(--bordo);
}

.tessera-numero {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.1;
}

.tessera-etichetta {
  color: var(--testo-tenue);
  font-size: 12.5px;
}

.tessera-scrivi {
  background: var(--scrivi-sfondo);
  border-color: transparent;
  color: var(--scrivi);
}

.tessera-rivedere {
  background: var(--rivedere-sfondo);
  border-color: transparent;
  color: var(--rivedere);
}

.tessera-salta {
  background: var(--salta-sfondo);
  border-color: transparent;
  color: var(--salta);
}

.avvisi:empty {
  display: none;
}

.avviso {
  margin: 0 0 8px;
  padding: 9px 11px;
  border-radius: var(--raggio-piccolo);
  background: var(--rivedere-sfondo);
  color: var(--rivedere);
  font-size: 13px;
}

/* ------------------------------------------------------------- conferma */

.pannello-conferma {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio);
  background: var(--superficie-tenue);
}

/* --------------------------------------------------------------- gruppi */

.gruppo {
  background: var(--superficie);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 10px 14px 14px;
  margin-bottom: 12px;
}

/* Il bordo colorato dice a che categoria appartiene il gruppo anche quando è
   chiuso, senza dover leggere l'etichetta. */
.gruppo-scrivi {
  border-left: 3px solid var(--scrivi);
}

.gruppo-rivedere {
  border-left: 3px solid var(--rivedere);
}

.gruppo-salta {
  border-left: 3px solid var(--bordo-forte);
}

.gruppo-titolo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
  font-weight: 600;
}

.gruppo-conteggio {
  color: var(--testo-tenue);
  font-weight: 400;
  font-size: 13px;
}

.pastiglia {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--salta-sfondo);
  color: var(--salta);
}

.pastiglia-scrivi {
  background: var(--scrivi-sfondo);
  color: var(--scrivi);
}

.pastiglia-rivedere {
  background: var(--rivedere-sfondo);
  color: var(--rivedere);
}

.pastiglia-salta {
  background: var(--salta-sfondo);
  color: var(--salta);
}

/* Esito incerto: la scrittura potrebbe essere passata su Shopify senza che la
   risposta sia arrivata. Non e' un errore (dire "errore" farebbe rifare il
   lavoro) e non e' un successo: va guardato. Colore proprio, piu' tenue del
   rosso, con il bordo che lo distingue dal grigio dei salti. */
.pastiglia-incerto {
  background: var(--rivedere-sfondo);
  color: var(--rivedere);
  box-shadow: inset 0 0 0 1px currentColor;
}

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

.tabella-scorrevole {
  overflow-x: auto;
  margin-top: 8px;
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabella th,
.tabella td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bordo);
}

.tabella th {
  color: var(--testo-tenue);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tabella tr:last-child td {
  border-bottom: none;
}

.tabella td span {
  display: block;
}

.tabella a {
  color: var(--fuoco);
  font-weight: 600;
}

.numerica {
  white-space: nowrap;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}

.minuto {
  color: var(--testo-tenue);
  font-size: 12px;
}

.forte {
  font-weight: 600;
}

.vuoto {
  color: var(--testo-tenue);
  text-align: center;
  padding: 16px;
}

/* ----------------------------------------------------------------- chips */

.chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.chip {
  display: inline-block !important;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  border: 1px solid transparent;
}

.chip-si {
  background: var(--scrivi-sfondo);
  color: var(--scrivi);
}

.chip-no {
  background: var(--salta-sfondo);
  color: var(--testo-tenue);
}

/* Disaccordo SPIEGATO (vedi l'elenco «Spiegato» sotto la riga): non è una
   conferma e non è un fallimento, quindi né il verde dei riscontri concordi né
   il pieno grigio di quelli diversi. Solo contorno tratteggiato; la frase
   completa sta nel title. */
.chip-spiegato {
  background: transparent;
  border-color: var(--bordo-forte);
  border-style: dashed;
  color: var(--testo-tenue);
  cursor: help;
}

/* ---------------------------------------------------- intestazione di giornata */

/* Una volta sola, sopra l'anteprima: dice cosa vale per TUTTO il file. */
.giornata:empty {
  display: none;
}

.giornata {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--bordo-forte);
  border-radius: var(--raggio-piccolo);
  background: var(--superficie-tenue);
}

/* Riferimento del gestionale assente su ogni riga: nessuna riga può essere
   certa per identità. Si nota, ma non è un allarme: è lo stato del file. */
.giornata-zero {
  border-left-color: var(--rivedere);
}

.giornata-riga {
  margin: 0;
  max-width: 80ch;
}

.giornata-riga + .giornata-riga {
  margin-top: 4px;
  color: var(--testo-tenue);
  font-size: 13px;
}

/* ------------------------------------------------------ fiducia della riga */

/* La riga della fiducia sta sotto la sua riga e ne condivide il filo: niente
   bordo in mezzo, così le due si leggono come un'unica voce. */
.tabella tr.con-fiducia td {
  border-bottom: none;
}

.tabella tr.riga-fiducia td {
  padding-top: 0;
  padding-bottom: 12px;
}

.fiducia {
  max-width: 100ch;
  margin-left: 4px;
  padding: 2px 0 0 12px;
  border-left: 2px solid var(--bordo);
}

/* Le pastiglie dei LIVELLI si distinguono da quelle delle decisioni: quelle
   sono tonde e piene, queste sono quasi rettangolari e vuote, col solo
   contorno. «unico» è la situazione normale e resta neutro; il colore compare
   solo dove c'è qualcosa da guardare. Il significato sta comunque nel testo,
   mai nel solo colore. */
.pastiglia-livello {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--bordo-forte);
  border-radius: 4px;
  background: transparent;
  color: var(--testo-tenue);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

.livello-identita-provata {
  border-color: var(--fuoco);
  background: var(--livello-provata-sfondo);
  color: var(--fuoco);
}

.livello-unico-con-fratello {
  padding: 0 7px;
  border: 2px solid var(--rivedere);
  color: var(--rivedere);
}

.livello-ambiguo {
  padding: 0 7px;
  border: 2px solid var(--errore);
  background: var(--errore-sfondo);
  color: var(--errore);
}

/* Un livello che questa versione non conosce: contorno tratteggiato, testo normale. */
.livello-sconosciuto {
  border-style: dashed;
  color: var(--testo);
}

.fiducia-sotto,
.fiducia-base {
  margin: 4px 0 0;
  font-size: 12.5px;
}

.fiducia-base {
  color: var(--testo-tenue);
}

.elenchi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 16px;
  margin-top: 8px;
}

.elenco {
  padding-left: 8px;
  border-left: 3px solid var(--bordo-forte);
}

.elenco-titolo {
  margin: 0 0 2px;
  color: var(--testo-tenue);
  font-size: 12px;
  font-weight: 600;
}

.elenco-voci {
  margin: 0;
  padding-left: 16px;
  font-size: 12.5px;
}

.elenco-non-combacia {
  border-left-color: var(--rivedere);
}

.elenco-non-combacia .elenco-titolo {
  color: var(--rivedere);
}

/* «Non si è potuto controllare» NON vale come riscontro: tratteggio e corsivo
   lo fanno sembrare ciò che è, un dato che manca, non una conferma. */
.elenco-non-controllabile {
  border-left-style: dashed;
}

.elenco-non-controllabile .elenco-voci {
  color: var(--testo-tenue);
  font-style: italic;
}

/* ------------------------------------------------------------- telefono */

@media (max-width: 640px) {
  .pagina {
    padding: 12px;
  }

  .riquadro,
  .gruppo {
    border-radius: 8px;
    padding: 13px;
  }

  .riepilogo {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .barra-azioni .btn {
    flex: 1 1 auto;
  }
}