/* InBolletta. Una cosa per schermata, testo grande, bersagli larghi.
   Misurato a 375 px (iPhone SE) e a 430 px (iPhone Pro Max).

   I colori stanno tutti qui sopra come variabili, definiti per intero nel blocco
   chiaro e ridefiniti in quello scuro. Nessun colore va scritto a mano piu'
   sotto, altrimenti in uno dei due temi resta illeggibile. */

:root {
  --fondo: #f1f4f7;
  --carta: #ffffff;
  --inchiostro: #16202a;
  --inchiostro-tenue: #55636f;
  --bordo: #c7d1da;

  --blu: #0b3d6b;         /* testo e bordi d'accento */
  --blu-fondo: #0b3d6b;   /* riempimenti pieni */
  --su-blu: #ffffff;      /* testo sopra i riempimenti pieni */
  --blu-tenue: #e4eef7;

  --verde: #0f6b3f;
  --verde-tenue: #e3f2e9;
  --ambra: #8a5a00;
  --ambra-tenue: #fbf1da;
  --rosso: #9b1c1c;
  --rosso-tenue: #fce9e9;
  --neutro-tenue: #eaeef2;

  --evidenza-fondo: #ffdf7a;
  --evidenza-testo: #3a2a00;

  --raggio: 12px;
  --tocco: 48px;
}

/* Tema scuro di sistema, salvo scelta esplicita del chiaro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0c131a;
    --carta: #161f29;
    --inchiostro: #e7eef5;
    --inchiostro-tenue: #9dafbf;
    --bordo: #2d3d4d;

    --blu: #8ab8e6;
    --blu-fondo: #0e4677;
    --su-blu: #ffffff;
    --blu-tenue: #17293a;

    --verde: #6cd09a;
    --verde-tenue: #12291e;
    --ambra: #e2b35c;
    --ambra-tenue: #2c2415;
    --rosso: #f39494;
    --rosso-tenue: #2e1719;
    --neutro-tenue: #1e2833;

    --evidenza-fondo: #6b5410;
    --evidenza-testo: #ffe9a8;
  }
}

/* Scelta esplicita dello scuro. */
:root[data-theme="dark"] {
  --fondo: #0c131a;
  --carta: #161f29;
  --inchiostro: #e7eef5;
  --inchiostro-tenue: #9dafbf;
  --bordo: #2d3d4d;

  --blu: #8ab8e6;
  --blu-fondo: #0e4677;
  --su-blu: #ffffff;
  --blu-tenue: #17293a;

  --verde: #6cd09a;
  --verde-tenue: #12291e;
  --ambra: #e2b35c;
  --ambra-tenue: #2c2415;
  --rosso: #f39494;
  --rosso-tenue: #2e1719;
  --neutro-tenue: #1e2833;

  --evidenza-fondo: #6b5410;
  --evidenza-testo: #ffe9a8;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--inchiostro);
  background: var(--fondo);
}

:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 2px;
  border-radius: 4px;
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blu-fondo);
  color: var(--su-blu);
  padding: 12px 16px;
  z-index: 10;
}
.salta:focus { left: 0; }

.visivamente-nascosto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.testata {
  background: var(--blu-fondo);
  color: var(--su-blu);
  padding: env(safe-area-inset-top) 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.marchio {
  color: var(--su-blu);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tocco);
}

.marchio img {
  width: 32px;
  height: 32px;
  flex: none;
  display: block;
}

.testata nav { display: flex; gap: 4px; }

.testata nav a {
  color: var(--su-blu);
  text-decoration: none;
  padding: 12px;
  min-height: var(--tocco);
  display: flex;
  align-items: center;
  border-bottom: 4px solid transparent;
}

.testata nav a[aria-current="page"] {
  border-bottom-color: #ffd166;
  font-weight: 700;
}

main {
  padding: 20px 16px 40px;
  max-width: 44rem;
  margin: 0 auto;
}

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 16px; text-wrap: balance; }
h2 { font-size: 1.125rem; margin: 24px 0 8px; }

.aiuto {
  color: var(--inchiostro-tenue);
  font-size: 0.9375rem;
  margin: 0 0 12px;
}

/* --- moduli ------------------------------------------------------------ */

label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

input[type="text"],
input[type="search"],
input[type="password"] {
  width: 100%;
  min-height: var(--tocco);
  font-size: 1.25rem;
  font-family: inherit;
  padding: 12px 14px;
  border: 2px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--inchiostro);
}

/* La spaziatura fissa serve dove si legge un codice carattere per carattere,
   non nei campi con dentro un nome di persona. */
#campo-codice,
#nuova-codice,
#nuova-matricola {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

input[aria-invalid="true"] { border-color: var(--rosso); }

button {
  font: inherit;
  min-height: var(--tocco);
  border-radius: var(--raggio);
  cursor: pointer;
  padding: 12px 18px;
}

.principale {
  width: 100%;
  margin-top: 12px;
  background: var(--blu-fondo);
  color: var(--su-blu);
  border: 2px solid var(--blu-fondo);
  font-weight: 700;
  font-size: 1.0625rem;
}

.filtri { border: 0; padding: 0; margin: 20px 0 0; }

.filtri legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: 8px;
}

.scelte { display: flex; flex-wrap: wrap; gap: 8px; }

.scelte label,
.interruttore {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tocco);
  padding: 8px 12px;
  border: 2px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  margin: 0;
}

.interruttore { margin-top: 12px; }

.scelte input,
.interruttore input {
  width: 22px;
  height: 22px;
  accent-color: var(--blu-fondo);
  margin: 0;
  flex: none;
}

/* --- istruzioni per la scansione ---------------------------------------- */

.istruzioni {
  margin-top: 20px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.istruzioni summary {
  min-height: var(--tocco);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--blu);
  cursor: pointer;
}

/* Non apre la fotocamera, perche' una pagina web non puo': apre le istruzioni.
   Ha l'aspetto di un pulsante perche' e' quello che la gente cerca, ma il
   testo dice esattamente cosa succede. */
.istruzioni--pulsante {
  border: 2px solid var(--blu);
  background: var(--carta);
}

.istruzioni--pulsante summary {
  font-size: 1.0625rem;
  font-weight: 700;
}

.istruzioni__icona {
  display: flex;
  flex: none;
  color: var(--blu);
}

.istruzioni__corpo {
  padding: 0 16px 8px;
  border-top: 1px solid var(--bordo);
}

.istruzioni__corpo p { margin: 12px 0; }

.istruzioni__corpo ol {
  margin: 12px 0;
  padding-left: 1.4em;
  display: grid;
  gap: 10px;
}

.istruzioni__nota {
  color: var(--inchiostro-tenue);
  font-size: 0.9375rem;
}

/* --- avvisi ------------------------------------------------------------ */

.avviso {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--raggio);
  border-left: 6px solid var(--bordo);
  background: var(--carta);
}

.avviso h2 { margin-top: 0; }

.avviso--errore { border-left-color: var(--rosso); background: var(--rosso-tenue); }
.avviso--attenzione { border-left-color: var(--ambra); background: var(--ambra-tenue); }
.avviso--niente { border-left-color: var(--inchiostro-tenue); }

/* --- elenchi di risultati ---------------------------------------------- */

.elenco {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.riga {
  display: block;
  background: var(--carta);
  border: 2px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  min-height: var(--tocco);
}

.riga:hover { border-color: var(--blu); }

.riga__titolo {
  font-weight: 700;
  font-size: 1.0625rem;
  display: block;
  overflow-wrap: anywhere;
}

.riga__sotto {
  color: var(--inchiostro-tenue);
  font-size: 0.9375rem;
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.riga__codice {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

/* --- etichette di stato ------------------------------------------------- */

.etichette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.etichetta {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.etichetta--luce { color: var(--ambra); border-color: var(--ambra); background: var(--ambra-tenue); }
.etichetta--acqua { color: var(--blu); border-color: var(--blu); background: var(--blu-tenue); }
.etichetta--gas { color: var(--rosso); border-color: var(--rosso); background: var(--rosso-tenue); }
.etichetta--telefono,
.etichetta--sconosciuto { color: var(--inchiostro-tenue); border-color: var(--inchiostro-tenue); background: var(--neutro-tenue); }
.etichetta--attiva { color: var(--verde); border-color: var(--verde); background: var(--verde-tenue); }
.etichetta--non_attiva { color: var(--rosso); border-color: var(--rosso); background: var(--rosso-tenue); }
.etichetta--da_volturare { color: var(--ambra); border-color: var(--ambra); background: var(--ambra-tenue); }

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

.torna {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocco);
  margin-bottom: 8px;
  color: var(--blu);
  font-weight: 600;
}

/* Le tre risposte che servono subito, senza scorrere. */
.risposta {
  background: var(--carta);
  border: 2px solid var(--blu);
  border-radius: var(--raggio);
  padding: 16px;
  margin-bottom: 16px;
}

.risposta dl { margin: 0; }

.risposta dt {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--inchiostro-tenue);
  font-weight: 700;
}

.risposta dd {
  margin: 2px 0 16px;
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.risposta dd:last-child { margin-bottom: 0; }

.risposta dd.assente {
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--inchiostro-tenue);
}

.dettagli {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 4px 16px 16px;
}

.dettagli dl { margin: 0; }

.dettagli dt {
  font-size: 0.875rem;
  color: var(--inchiostro-tenue);
  margin-top: 14px;
  font-weight: 600;
}

.dettagli dd { margin: 0; overflow-wrap: anywhere; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Il carattere che non coincide. Evidenziato, e anche detto a parole accanto,
   perche' il colore da solo non basta a chi non lo distingue. */
.diverso {
  background: var(--evidenza-fondo);
  color: var(--evidenza-testo);
  border-bottom: 3px solid var(--ambra);
  font-weight: 700;
  padding: 0 1px;
}

/* --- moduli di scrittura ------------------------------------------------- */

.campo { margin-bottom: 16px; }

.campo .aiuto { margin: 6px 0 0; }

textarea,
select {
  width: 100%;
  min-height: var(--tocco);
  font: inherit;
  padding: 12px 14px;
  border: 2px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--inchiostro);
}

textarea { resize: vertical; }

/* Nome e parola d'ordine stanno insieme e staccati dal resto: sono chi sei,
   non che cosa stai cambiando. */
.identita {
  border-top: 1px solid var(--bordo);
  margin-top: 20px;
  padding-top: 16px;
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 8px 0 0;
}

.esito-contenitore:empty { display: none; }

.esito {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--raggio);
  border-left: 6px solid;
  font-weight: 600;
}

.esito--bene { color: var(--verde); border-color: var(--verde); background: var(--verde-tenue); }
.esito--male { color: var(--rosso); border-color: var(--rosso); background: var(--rosso-tenue); }

button[disabled] { opacity: 0.6; cursor: default; }

.pieBase {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--inchiostro-tenue);
  font-size: 0.875rem;
}

@media (min-width: 26rem) {
  body { font-size: 1.125rem; }
  h1 { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}