/* Pagina del telefono di La mia stalla. Colori, caratteri, tasti e avvisi sono quelli della guida di stile
   (azienda/stile.md §2-5): tasti grandi, scritte grandi, un colore = un significato. Mai testo sotto i 16 px. */
@font-face {
  font-family: "Atkinson Hyperlegible Next"; src: url("/statici/atkinson.ttf") format("truetype");
  font-weight: 200 800; font-display: swap;
}
:root {
  --fondo: #F6F4EE; --carta: #FFFFFF; --paglia: #EEEBE2; --testo: #1A211D; --tenue: #4F5852; --bordo: #D9D4C7;
  --campo: #7D857E; --verde: #1F6B4A; --verde-premuto: #174F37; --verde-chiaro: #E4F0E8; --su-verde: #FFFFFF;
  --barra: #1F6B4A; --rosso: #B42318; --rosso-fondo: #FDECEA; --arancio: #A65300; --arancio-fondo: #FFF1DC;
  --blu: #1D5FA8; --blu-fondo: #E7F0FB; --anello: #1D5FA8; --ombra: rgba(31, 107, 74, .10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101411; --carta: #191F1B; --paglia: #222924; --testo: #ECEFEA; --tenue: #A9B3AB; --bordo: #333B35;
    --campo: #7B867D; --verde: #63C08F; --verde-premuto: #7FD0A4; --verde-chiaro: #16291E; --su-verde: #0A1F13;
    --barra: #17402D; --rosso: #FF8B7E; --rosso-fondo: #3B1915; --arancio: #F2A94B; --arancio-fondo: #33250E;
    --blu: #82B6F2; --blu-fondo: #14243A; --anello: #82B6F2; --ombra: rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--fondo); color: var(--testo);
  font: 18px/1.5 "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:focus-visible { outline: 3px solid var(--anello); outline-offset: 2px; }
.ic { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* Barra in alto */
.testa {
  display: flex; align-items: center; gap: 12px; background: var(--barra); color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
}
.testa img { width: 44px; height: 44px; border-radius: 10px; }
.marchio { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marchio b { font-size: 21px; font-weight: 700; }
.marchio small { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 560px; margin: 0 auto; padding: 8px 16px calc(104px + env(safe-area-inset-bottom)); }
h1 { font-size: 26px; line-height: 1.2; margin: 8px 0 12px; }
h2 { font-size: 21px; line-height: 1.2; margin: 24px 0 12px; }
.nota { color: var(--tenue); font-size: 16px; margin: 8px 0; }
a { color: var(--verde); }

/* Le tre schermate: la barra in basso sceglie quale si vede */
body[data-vista="stalla"] [data-vista]:not([data-vista="stalla"]),
body[data-vista="capi"] [data-vista]:not([data-vista="capi"]),
body[data-vista="manda"] [data-vista]:not([data-vista="manda"]) { display: none; }
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--carta); border-top: 1px solid var(--bordo); padding-bottom: env(safe-area-inset-bottom);
}
.barra button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px;
  background: none; border: 0; border-top: 4px solid transparent; color: var(--tenue); font-size: 16px; font-weight: 600;
}
.barra button[aria-current="page"] { color: var(--verde); border-top-color: var(--verde); background: var(--verde-chiaro); }
.barra .ic { width: 28px; height: 28px; }

/* Stato dei dati e tasto «Aggiorna adesso» */
.scheda {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 18px; padding: 16px; margin: 14px 0;
}
.scheda > :first-child { margin-top: 0; }
.scheda > :last-child { margin-bottom: 0; }
.stato .nota { margin: 6px 0 0; }
.fonte {
  display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--verde); background: var(--verde-chiaro); border-radius: 8px; padding: 2px 10px;
}
.stato.vecchio { border-left: 6px solid var(--arancio); }
.stato.vecchio .fonte { color: var(--arancio); background: var(--arancio-fondo); }
.aggiorna { margin-top: 14px; }

/* I tre numeri */
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.numeri div { background: var(--paglia); border-radius: 14px; padding: 12px 6px; text-align: center; }
.numeri b { display: block; font-size: 30px; line-height: 1.1; font-weight: 700; }
.numeri span { display: block; font-size: 16px; line-height: 1.25; margin-top: 4px; color: var(--tenue); }
.numeri .allerta b { color: var(--rosso); }

/* Avvisi: striscia + icona + parola fissa (mai solo il colore) */
.avviso {
  display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 14px 14px 14px 12px; margin: 10px 0;
  border-left: 6px solid;
}
.avviso > div { min-width: 0; }
.avviso .ic { width: 28px; height: 28px; margin-top: 1px; }
.avviso .parola { display: block; font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.avviso p { margin: 2px 0 0; }
.avviso.rosso { background: var(--rosso-fondo); border-color: var(--rosso); }
.avviso.rosso .ic, .avviso.rosso .parola { color: var(--rosso); }
.avviso.arancio { background: var(--arancio-fondo); border-color: var(--arancio); }
.avviso.arancio .ic, .avviso.arancio .parola { color: var(--arancio); }
.avviso.blu { background: var(--blu-fondo); border-color: var(--blu); }
.avviso.blu .ic, .avviso.blu .parola { color: var(--blu); }
.avviso.verde { background: var(--verde-chiaro); border-color: var(--verde); }
.avviso.verde .ic, .avviso.verde .parola { color: var(--verde); }
.avviso.modelli ul { margin: 6px 0 0; padding-left: 20px; }
.avviso.modelli li { margin: 4px 0; }

/* Capi in stalla */
.capi h2 { margin-top: 16px; }
.cerca { position: relative; display: block; }
.cerca .ic { position: absolute; left: 14px; top: 16px; color: var(--tenue); }
.cerca input {
  display: block; width: 100%; min-height: 56px; padding: 12px 14px 12px 48px; font: inherit; color: var(--testo);
  background: var(--carta); border: 2px solid var(--campo); border-radius: 14px;
}
.cerca input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--anello); }
#elenco-capi { list-style: none; margin: 12px 0 0; padding: 0; }
#elenco-capi li {
  padding: 10px 12px; margin: 0 0 8px; background: var(--carta); border: 1px solid var(--bordo);
  border-left: 6px solid var(--bordo); border-radius: 14px;
}
#elenco-capi li.rosso { border-left-color: var(--rosso); }
#elenco-capi li.arancio { border-left-color: var(--arancio); }
#elenco-capi b {
  display: block; font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: .02em; color: var(--tenue);
  white-space: nowrap;
}
#elenco-capi u { text-decoration: none; font-weight: 800; font-size: 28px; color: var(--testo); letter-spacing: .03em; }
#elenco-capi em {
  display: inline-block; margin: 6px 0 2px; font-style: normal; font-size: 16px; font-weight: 700; letter-spacing: .06em;
  border-radius: 8px; padding: 2px 10px;
}
#elenco-capi li.rosso em { color: var(--rosso); background: var(--rosso-fondo); }
#elenco-capi li.arancio em { color: var(--arancio); background: var(--arancio-fondo); }
#elenco-capi span { display: block; font-size: 16px; color: var(--tenue); }
.capi #nessun-capo { margin: 12px 0; }

/* Tasti */
button { font: inherit; color: inherit; cursor: pointer; }
.tasti { display: grid; gap: 12px; }
button.grande, a.grande {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; text-align: left; text-decoration: none;
  color: var(--testo); background: var(--carta); border: 2px solid var(--verde); border-radius: 18px; padding: 12px 16px;
  box-shadow: 0 2px 6px var(--ombra);
}
button.grande:active, a.grande:active { background: var(--verde-chiaro); }
.grande .cerchio {
  width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: var(--verde); color: var(--su-verde);
}
.grande b { display: block; font-size: 19px; line-height: 1.25; }
.grande small { display: block; color: var(--tenue); font-size: 16px; line-height: 1.3; }
.installa-card { margin: 14px 0; }
button.primario, button.medio {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  border-radius: 14px; margin: 12px 0 0; font-weight: 600;
}
button.primario { background: var(--verde); color: var(--su-verde); border: 2px solid var(--verde); font-size: 19px; }
button.primario:active { background: var(--verde-premuto); border-color: var(--verde-premuto); }
button.primario:disabled { opacity: .6; }
button.medio { background: var(--carta); color: var(--verde); border: 2px solid var(--verde); }
button.medio:active { background: var(--verde-chiaro); }
button.medio:disabled { color: var(--tenue); border-color: var(--bordo); background: var(--paglia); }
textarea {
  width: 100%; margin-top: 12px; padding: 12px; font: inherit; font-size: 18px; color: var(--testo);
  background: var(--fondo); border: 2px solid var(--campo); border-radius: 14px; resize: vertical;
}
textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--anello); }
#elenco { list-style: none; padding: 0; margin: 0; }
#elenco li {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bordo);
  font-size: 16px; overflow-wrap: anywhere;
}
#elenco li:last-child { border-bottom: 0; }
.ok { color: var(--verde); font-weight: 600; }
.errore { color: var(--rosso); font-weight: 600; }
.cassetta { font-weight: 600; color: var(--verde); }
input.codice {
  display: block; width: 100%; margin-top: 14px; padding: 14px; text-align: center; letter-spacing: .12em;
  font: 600 24px/1.2 ui-monospace, "SF Mono", Consolas, monospace; text-transform: uppercase; color: var(--testo);
  background: var(--fondo); border: 2px solid var(--campo); border-radius: 14px;
}
input.codice:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--anello); }
.testo h1 { font-size: 22px; }
.testo p, .testo li { font-size: 16px; }

/* «Installa l'app» */
.indietro { display: inline-block; padding: 12px 0; font-weight: 600; }
.sistema { background: var(--carta); border: 1px solid var(--bordo); border-radius: 18px; margin: 14px 0; padding: 0 16px; }
.sistema summary { font-size: 19px; font-weight: 700; padding: 16px 0; cursor: pointer; }
.passi { list-style: none; counter-reset: passo; margin: 0 0 12px; padding: 0; }
.passi li { counter-increment: passo; position: relative; padding: 4px 0 14px 52px; min-height: 44px; }
.passi li::before {
  content: counter(passo); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--verde); color: var(--su-verde); font-weight: 700; text-align: center; line-height: 36px;
}
.ic.piccola { width: 22px; height: 22px; vertical-align: -5px; }
.gia-installata { display: none; align-items: center; gap: 12px; }
.gia-installata .ic { width: 36px; height: 36px; color: var(--verde); }
.gia-installata p { margin: 0; }
.installata .gia-installata { display: flex; }
.installata .da-installare, .installata .solo-browser { display: none; }
@media (display-mode: standalone) {
  .gia-installata { display: flex; }
  .da-installare, .solo-browser { display: none; }
}
[hidden] { display: none !important; }