/* =========================================================================
   Manuale di Autocontrollo Piscina — design system
   Basato su DESIGN.md: "Navy ink on cool marble", tema chiaro.

   Inchiostro navy al posto del nero, un solo blu per le azioni primarie,
   superfici piatte su tela grigio-fredda, bordi hairline da 1px, ombre
   tinte di blu, raggi 24px sulle schede e 8px sui bottoni.

   Scritto a mano, senza framework né CDN: la pagina si carica anche su una
   rete chiusa e la Content-Security-Policy può restare stretta.
   Mobile-first: la vista critica è l'operatore a bordo vasca, in piedi,
   con il telefono in mano e le dita bagnate.
   ========================================================================= */

/* --- Tipografia (vendorizzata, vedi static/font/LEGGIMI.txt) ----------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/font/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/font/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Token ------------------------------------------------------------- */
:root {
  /* Colori — DESIGN.md */
  --ink-navy: #0b3558;
  --signal-blue: #006bff;
  --slate-gray: #476788;
  --mist-gray: #a6bbd1;
  --cloud: #f8f9fb;
  --paper: #ffffff;
  --pebble: #f0f3f8;
  --hairline: #d4e0ed;
  --coral-magenta: #e55cff;
  --sky-cyan: #0099ff;
  --deep-cobalt: #004eba;

  /* Stati operativi: non sono nel riferimento, che non ne ha bisogno.
     Qui sì — la conformità dell'acqua è il cuore del prodotto. Scelti
     desaturati per convivere con il navy e verificati a contrasto AA. */
  --ok-fg: #0e6b46;
  --ok-bg: #e2f4ec;
  --warn-fg: #8a5200;
  --warn-bg: #fdf0da;
  --danger-fg: #a81e17;
  --danger-bg: #fdeae8;

  /* Ruoli semantici */
  --sfondo: var(--cloud);
  --superficie: var(--paper);
  --superficie-alt: var(--pebble);
  --testo: var(--ink-navy);
  --testo-tenue: var(--slate-gray);
  --testo-spento: var(--mist-gray);
  --bordo: var(--hairline);
  --primario: var(--signal-blue);
  --primario-tenue: #e6f0ff;
  --scuro: var(--ink-navy);

  /* Raggi */
  --r-scheda: 24px;
  --r-pannello: 16px;
  --r-bottone: 8px;
  --r-input: 8px;
  --r-piccolo: 4px;
  --r-badge: 9999px;

  /* Ombre tinte di blu: mai nero neutro */
  --ombra-1: rgba(71, 103, 136, .04) 0 4px 5px 0, rgba(71, 103, 136, .03) 0 4px 10px 0,
    rgba(71, 103, 136, .05) 0 10px 20px 0;
  --ombra-2: rgba(71, 103, 136, .04) 0 4px 5px 0, rgba(71, 103, 136, .03) 0 8px 15px 0,
    rgba(71, 103, 136, .08) 0 30px 50px 0;
  --ombra-bottone: rgba(71, 103, 136, .04) 0 4px 5px 0, rgba(71, 103, 136, .03) 0 8px 15px 0,
    rgba(71, 103, 136, .06) 0 15px 30px 0;

  /* Spaziatura, base 8px */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;

  /* Area minima di tocco: sotto i 48px si sbaglia bersaglio. */
  --tocco: 48px;
  --barra-alta: 64px;
  --barra-bassa: 68px;
  --larghezza: 1200px;

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* --- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* clip, non hidden: non crea un contenitore di scorrimento e quindi non
     rompe position: sticky della barra superiore. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--testo);
  background: var(--sfondo);
  /* Niente scroll orizzontale: su mobile è il difetto che si nota subito. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* La scala editoriale di DESIGN.md (38–80px) vale per la copertina, che è
   la pagina di presentazione. Dentro l'applicazione, che è densa di dati e
   si usa a 375px, le intestazioni restano sui gradi bassi della stessa
   scala: 28px per i titoli di pagina, 20px per quelli dei pannelli. */
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.4; font-weight: 700; color: var(--ink-navy); }
h1 { font-size: 28px; line-height: 1.3; }
h2 { font-size: 20px; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 1em; }

a { color: var(--signal-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--signal-blue);
  outline-offset: 2px;
  border-radius: var(--r-piccolo);
}

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

.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal-blue); color: #fff; padding: 12px 16px;
  border-radius: var(--r-bottone); font-weight: 600;
}
.salta-al-contenuto:focus { left: 8px; top: 8px; }

/* --- Struttura --------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* Barra superiore piatta su carta, come la nav del riferimento: niente
   gradiente, solo una hairline a separarla dalla tela. */
.barra-alta {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--barra-alta);
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) clamp(16px, 3vw, var(--s-3));
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; color: var(--ink-navy); }
.marchio:hover { text-decoration: none; }
.marchio .segno-marchio {
  height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  /* Il marchio ha il suo fondo trasparente: dietro non va niente, o si
     vedrebbe il rettangolo sul vetro smerigliato della barra. */
}
.marchio .segno-marchio img, .riquadro-accesso .logo img, .stemma img { display: block; }
.marchio-testo { min-width: 0; }
.marchio-titolo {
  display: block; font-weight: 700; font-size: 16px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marchio-sotto { display: block; font-size: 12px; line-height: 1.5; color: var(--slate-gray); font-weight: 500; }

.barra-azioni { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }

.avatar {
  width: 40px; height: 40px; border-radius: var(--r-badge);
  background: var(--primario-tenue); color: var(--deep-cobalt);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
}
.avatar:hover { background: var(--signal-blue); color: #fff; text-decoration: none; }

.corpo { flex: 1; display: flex; width: 100%; }

.barra-lato { display: none; }

.contenuto {
  flex: 1; min-width: 0;
  padding: var(--s-3) clamp(16px, 3vw, var(--s-3));
  padding-bottom: calc(var(--barra-bassa) + var(--s-3));
  max-width: var(--larghezza);
  margin: 0 auto;
  width: 100%;
}

/* --- Navigazione in basso (mobile) ------------------------------------- */
.barra-bassa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.barra-bassa a {
  flex: 1; min-height: var(--barra-bassa);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 4px;
  color: var(--slate-gray); text-decoration: none;
  font-size: 11px; font-weight: 600; text-align: center;
}
.barra-bassa a:hover { text-decoration: none; }
.barra-bassa a[aria-current="page"] { color: var(--signal-blue); background: var(--primario-tenue); }
.barra-bassa svg { width: 22px; height: 22px; }

@media (min-width: 1024px) {
  .barra-bassa { display: none; }
  .contenuto { padding-bottom: var(--s-6); }
  .corpo { max-width: var(--larghezza); margin: 0 auto; gap: var(--s-3); padding: 0 var(--s-2); }
  .barra-lato {
    display: block; width: 240px; flex: 0 0 240px;
    padding: var(--s-3) 0; align-self: flex-start;
    position: sticky; top: calc(var(--barra-alta) + var(--s-2));
  }
  .barra-lato a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 2px;
    border-radius: var(--r-bottone);
    color: var(--slate-gray); text-decoration: none;
    font-size: 14px; font-weight: 500;
  }
  .barra-lato a:hover { background: var(--pebble); color: var(--ink-navy); text-decoration: none; }
  .barra-lato a[aria-current="page"] {
    background: var(--primario-tenue); color: var(--signal-blue); font-weight: 600;
  }
  .barra-lato svg { width: 20px; height: 20px; flex: 0 0 20px; }
  .barra-lato .gruppo {
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--slate-gray); padding: var(--s-3) 12px 6px; font-weight: 600;
  }
}

/* --- Superfici --------------------------------------------------------- */
.scheda {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-scheda);
  box-shadow: var(--ombra-1);
  padding: var(--s-3);
  margin-bottom: var(--s-2);
}
.scheda > :last-child { margin-bottom: 0; }

.scheda-testa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.scheda-testa h2, .scheda-testa h3 { margin: 0; }
.scheda-testa .spinta { margin-left: auto; }

.intestazione-pagina {
  display: flex; align-items: flex-start; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.intestazione-pagina h1 { margin: 0; }
.intestazione-pagina .sottotitolo { color: var(--slate-gray); font-size: 14px; margin: 4px 0 0; }
.intestazione-pagina .spinta { margin-left: auto; display: flex; gap: var(--s-1); flex-wrap: wrap; }

.griglia { display: grid; gap: var(--s-2); }
.griglia-2 { grid-template-columns: 1fr; }
.griglia-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 768px) { .griglia-2 { grid-template-columns: 1fr 1fr; } }

/* --- Bottoni ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tocco); padding: 10px 16px;
  border-radius: var(--r-bottone); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 16px; line-height: 1.4;
  text-decoration: none; cursor: pointer;
  background: var(--pebble); color: var(--ink-navy);
  transition: background .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 19px; height: 19px; }
/* Blu segnale solo per l'azione primaria, navy per la secondaria scura. */
.btn-primario { background: var(--signal-blue); color: #fff; box-shadow: var(--ombra-bottone); }
.btn-primario:hover { background: #0059d6; }
.btn-scuro { background: var(--ink-navy); color: #fff; }
.btn-scuro:hover { background: #09293f; }
.btn-contorno { background: var(--paper); border-color: var(--hairline); color: var(--ink-navy); }
.btn-contorno:hover { background: var(--pebble); }
.btn-pericolo { background: var(--danger-bg); color: var(--danger-fg); }
.btn-pericolo:hover { background: var(--danger-fg); color: #fff; }
.btn-piccolo { min-height: 38px; padding: 6px 12px; font-size: 14px; box-shadow: none; }
.btn-largo { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.gruppo-bottoni { display: flex; gap: var(--s-1); flex-wrap: wrap; }

/* --- Form -------------------------------------------------------------- */
.campo { margin-bottom: var(--s-2); }
.campo > label, .etichetta {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink-navy);
}
.aiuto { font-size: 12px; line-height: 1.5; color: var(--slate-gray); margin-top: 4px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="url"], input[type="file"], select, textarea {
  width: 100%; min-height: var(--tocco);
  padding: 10px 12px;
  font: inherit; font-size: 16px; /* 16px: evita lo zoom automatico su iOS */
  color: var(--ink-navy); background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--r-input);
}
input:hover, select:hover, textarea:hover { border-color: var(--mist-gray); }
input:focus, select:focus, textarea:focus { border-color: var(--signal-blue); }
textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
/* Mist Gray ha 1.97:1 su carta: nel riferimento serve per bordi, icone e
   testo disabilitato, non per un placeholder che va letto. */
input::placeholder, textarea::placeholder { color: var(--slate-gray); opacity: 1; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--pebble); color: var(--slate-gray); border-color: var(--pebble);
}

/* Campo numerico con i pulsanti +/-: a bordo vasca si corregge col pollice.
   Su schermo largo non si allarga a tutta riga: un pH ha quattro caratteri,
   un campo da 600px invita a cercare un contenuto che non c'è. */
.stepper { display: flex; align-items: stretch; gap: 8px; max-width: 320px; }
.stepper input { text-align: center; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper button {
  flex: 0 0 var(--tocco); width: var(--tocco); min-height: var(--tocco);
  font-size: 22px; font-weight: 600; line-height: 1;
  background: var(--pebble); color: var(--ink-navy);
  border: 1px solid var(--hairline); border-radius: var(--r-input);
  cursor: pointer;
}
.stepper button:hover { background: var(--primario-tenue); border-color: var(--signal-blue); color: var(--signal-blue); }

.segmenti { display: flex; gap: 8px; flex-wrap: wrap; }
.segmenti input { position: absolute; opacity: 0; pointer-events: none; }
.segmenti label {
  /* min-width: 0 è indispensabile — senza, i flex item non si restringono
     sotto la larghezza del contenuto e le etichette si accavallano. */
  flex: 1 1 0; min-width: 0; min-height: var(--tocco);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--r-input);
  background: var(--paper); font-weight: 600; font-size: 14px;
  line-height: 1.3; text-align: center; overflow-wrap: anywhere;
}
.segmenti label:hover { background: var(--pebble); }
.segmenti input:checked + label {
  border-color: var(--signal-blue); background: var(--primario-tenue); color: var(--signal-blue);
  box-shadow: inset 0 0 0 1px var(--signal-blue);
}
.segmenti input:focus-visible + label { outline: 3px solid var(--signal-blue); outline-offset: 2px; }
/* Da tablet in su le voci stanno comodamente su una riga. */
@media (min-width: 560px) {
  .segmenti label { flex-direction: row; gap: 8px; }
}

.riga-form { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .riga-form-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .riga-form-3 { grid-template-columns: repeat(3, 1fr); } }

/* Una casella con la sua frase accanto: il bersaglio è tutta la riga,
   perché una casella da 16px col pollice bagnato non si centra. */
.scelta {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer; font-size: 14px;
}
.scelta input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }
/* Quando la frase accanto è un titolo con la sua spiegazione sotto, la
   casella si allinea alla prima riga invece che a metà del blocco. */
.scelta.alta { align-items: flex-start; padding: 8px 0; }
.scelta.alta input[type="checkbox"] { margin-top: 2px; }

@media (max-width: 767px) {
  /* 38px misurati: sul telefono anche questo sale a 44. */
  form[action$="/spazi-acqua"] .btn { min-height: 44px; }
}

/* --- Stati e badge ----------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-badge);
  font-size: 12px; font-weight: 500;
  background: var(--pebble); color: var(--deep-cobalt);
  white-space: nowrap;
}
.badge-info { background: var(--primario-tenue); color: var(--deep-cobalt); }
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge-danger { background: var(--danger-bg); color: var(--danger-fg); }

/* Il colore non basta mai da solo: ogni stato ha anche una forma. */
.pallino { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
.pallino-quadro { border-radius: 1px; }
.pallino-rombo { border-radius: 1px; transform: rotate(45deg); }

.avviso {
  display: flex; gap: 12px; align-items: flex-start;
  padding: var(--s-2); border-radius: var(--r-pannello);
  border: 1px solid currentColor;
  margin-bottom: var(--s-2); font-size: 14px; line-height: 1.5;
}
.avviso svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.avviso-info { background: var(--primario-tenue); color: var(--deep-cobalt); }
.avviso-success { background: var(--ok-bg); color: var(--ok-fg); }
.avviso-warning { background: var(--warn-bg); color: var(--warn-fg); }
.avviso-danger { background: var(--danger-bg); color: var(--danger-fg); }
.avviso strong { display: block; }
.avviso .testo { color: var(--ink-navy); font-weight: 400; }
.avviso .testo strong { font-weight: 700; }

/* --- Tabelle ----------------------------------------------------------- */
/* position: relative è necessario, non decorativo: le etichette
   .solo-lettori dentro le celle sono in posizione assoluta e, senza un
   antenato posizionato, si ancorano al body sfuggendo a questo contenitore
   — allargando il documento e creando scroll orizzontale su mobile. */
.tabella-scorrevole {
  position: relative;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -4px; padding: 0 4px;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hairline); }
th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--slate-gray); font-weight: 600; white-space: nowrap;
}
tbody tr:hover { background: var(--cloud); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.vuoto { text-align: center; padding: var(--s-5) var(--s-2); color: var(--slate-gray); }
.vuoto svg { width: 40px; height: 40px; color: var(--mist-gray); margin-bottom: 8px; }

/* --- Copertina --------------------------------------------------------- */
/* Superficie piatta su carta con blob decorativi dietro, come prescrive
   DESIGN.md: niente gradienti di sfondo, l'atmosfera la fanno le macchie. */
/* I blob vivono sul contenitore, non sulla scheda: uno pseudo-elemento con
   z-index negativo dipinge comunque SOPRA lo sfondo del proprio genitore,
   quindi messo sulla scheda la tingerebbe invece di starle dietro. Sul
   contenitore — che è trasparente — resta davvero dietro alla carta. */
.copertina-zona { position: relative; isolation: isolate; margin-bottom: var(--s-3); }
.copertina-zona::before, .copertina-zona::after {
  content: ""; position: absolute; z-index: -1;
  border-radius: 50%; filter: blur(50px); opacity: .5;
  pointer-events: none;
}
/* Su schermo stretto i blob restano dentro i limiti orizzontali: se
   sbordano a destra allargano il documento e il telefono riduce lo zoom
   di tutta la pagina. Lo sbordo verticale invece è innocuo. */
.copertina-zona::before { width: 180px; height: 180px; right: 0; top: -48px; background: var(--sky-cyan); }
.copertina-zona::after { width: 150px; height: 150px; right: 60px; bottom: -28px; background: var(--coral-magenta); }
@media (min-width: 560px) {
  .copertina-zona::before { width: 230px; height: 230px; right: -56px; top: -56px; }
  .copertina-zona::after { width: 190px; height: 190px; right: 90px; bottom: -34px; }
}

.copertina {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-scheda);
  box-shadow: var(--ombra-2);
  /* Stretto: due righe non hanno bisogno di mezza schermata. Le sezioni
     devono vedersi senza scorrere, sono loro il contenuto della Home. */
  padding: clamp(20px, 3.5vw, var(--s-4));
  margin: 0;
}

/* La riserva bianca del marchio: due blu su fondo scuro sparirebbero, e
   schiarire un marchio altrui non si fa. Il riquadro è il modo previsto
   da qualunque manuale d'immagine per posarlo dove il fondo non tiene. */
.stemma {
  display: inline-flex; padding: 10px 14px; margin-bottom: 14px;
  background: #fff; border-radius: var(--r-pannello);
  box-shadow: 0 2px 12px rgba(6, 45, 77, .18);
}
@media (max-width: 767px) { .stemma { padding: 8px 12px; } .stemma img { height: 56px; width: auto; } }

.copertina .occhiello {
  text-transform: uppercase; letter-spacing: .08em; font-size: 12px;
  font-weight: 600; color: var(--slate-gray); margin-bottom: 12px;
}
/* La scala editoriale sta più in basso di prima: l'insegna del portale,
   non il frontespizio di un documento. */
.copertina h1 {
  font-size: clamp(30px, 5vw, 44px); line-height: 1.15; font-weight: 800;
  margin: 0 0 4px; letter-spacing: -.01em;
}
.copertina .struttura { font-size: clamp(17px, 2.2vw, 20px); font-weight: 600; color: var(--signal-blue); margin: 0; }
.copertina .riferimento { font-size: 16px; color: var(--slate-gray); margin-top: var(--s-2); max-width: 60ch; }

.pillole { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s-3); }

/* --- Le 12 facciate ---------------------------------------------------- */
.punti { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }

.punto {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-3); min-height: 150px;
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-pannello); box-shadow: var(--ombra-1);
  text-decoration: none; color: var(--ink-navy);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.punto:hover {
  transform: translateY(-2px); box-shadow: var(--ombra-2);
  border-color: var(--signal-blue); text-decoration: none;
}
.punto .numero {
  width: 36px; height: 36px; border-radius: var(--r-bottone);
  display: grid; place-items: center;
  background: var(--primario-tenue); color: var(--deep-cobalt);
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.punto .titolo { font-weight: 600; font-size: 18px; line-height: 1.35; }
.punto .riassunto { font-size: 14px; color: var(--slate-gray); line-height: 1.45; }
.punto .aggancio {
  margin-top: auto; padding-top: 10px;
  font-size: 14px; font-weight: 600; color: var(--signal-blue);
  display: inline-flex; align-items: center; gap: 4px;
}

/* Facciata a pagina intera, sfogliabile lateralmente */
.sfoglia { position: relative; }

.sfoglia-barra { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-2); }
.sfoglia-barra .indice {
  font-size: 12px; font-weight: 600; color: var(--slate-gray);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sfoglia-nav {
  width: var(--tocco); height: var(--tocco); flex: 0 0 var(--tocco);
  display: grid; place-items: center;
  border-radius: var(--r-badge); border: 1px solid var(--hairline);
  background: var(--paper); color: var(--ink-navy); cursor: pointer;
  text-decoration: none;
}
.sfoglia-nav:hover {
  background: var(--primario-tenue); border-color: var(--signal-blue);
  color: var(--signal-blue); text-decoration: none;
}
.sfoglia-nav[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.sfoglia-nav svg { width: 22px; height: 22px; }

.sfoglia-punti { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; }
.sfoglia-punti a {
  width: 28px; height: 28px; border-radius: var(--r-piccolo);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; text-decoration: none;
  background: var(--pebble); color: var(--slate-gray);
}
.sfoglia-punti a:hover { background: var(--primario-tenue); color: var(--signal-blue); text-decoration: none; }
.sfoglia-punti a[aria-current="page"] { background: var(--signal-blue); color: #fff; }

.facciata { animation: entra .22s ease; }
.facciata.esce-sx { animation: esce-sx .18s ease forwards; }
.facciata.esce-dx { animation: esce-dx .18s ease forwards; }
@keyframes entra { from { opacity: 0; transform: translateX(var(--da, 14px)); } to { opacity: 1; transform: none; } }
@keyframes esce-sx { to { opacity: 0; transform: translateX(-14px); } }
@keyframes esce-dx { to { opacity: 0; transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) {
  .facciata, .facciata.esce-sx, .facciata.esce-dx { animation: none; }
  .punto { transition: none; }
}

.facciata-testa {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding-bottom: var(--s-2); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
}
.facciata-testa .numero-grande {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--r-pannello);
  display: grid; place-items: center;
  background: var(--ink-navy); color: #fff;
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.facciata-testa h1 { font-size: clamp(24px, 4vw, 38px); line-height: 1.21; margin: 0 0 6px; }
.facciata-testa .riassunto { color: var(--slate-gray); font-size: 16px; margin: 0; }

.testo-manuale { font-size: 16px; line-height: 1.7; color: var(--ink-navy); }
.testo-manuale p { margin: 0 0 1em; }
.testo-manuale .elenco { padding-left: 20px; margin: 0 0 1em; }
.testo-manuale .elenco li { margin-bottom: 6px; }

.suggerimento {
  background: var(--pebble); border: 1px solid var(--hairline);
  border-radius: var(--r-pannello); padding: var(--s-2);
  font-size: 14px; color: var(--slate-gray); margin-bottom: var(--s-2);
}
.suggerimento strong { color: var(--ink-navy); }

/* --- Stato vasche ------------------------------------------------------ */
.vasca { border-left: 4px solid var(--hairline); }
.vasca.stato-ok { border-left-color: var(--ok-fg); }
.vasca.stato-warn { border-left-color: var(--warn-fg); }
.vasca.stato-out_of_range { border-left-color: var(--danger-fg); }
.vasca.stato-unknown { border-left-color: var(--mist-gray); }

.parametri { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; margin-top: var(--s-2); }
.parametro {
  background: var(--pebble); border-radius: var(--r-bottone);
  padding: 10px 6px; text-align: center;
}
.parametro .etichetta-p {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate-gray); font-weight: 600;
}
.parametro .valore { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.parametro .unita { font-size: 11px; color: var(--slate-gray); }
.parametro.p-warn { background: var(--warn-bg); } .parametro.p-warn .valore { color: var(--warn-fg); }
.parametro.p-out { background: var(--danger-bg); } .parametro.p-out .valore { color: var(--danger-fg); }

.fasce { display: flex; gap: 8px; margin-top: var(--s-2); flex-wrap: wrap; }
.fascia {
  flex: 1 1 0; min-width: 92px; min-height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--r-bottone); border: 1px dashed var(--hairline);
  font-size: 12px; font-weight: 600; color: var(--slate-gray);
  text-decoration: none; padding: 6px;
}
.fascia.fatta { border-style: solid; background: var(--ok-bg); color: var(--ok-fg); border-color: transparent; }
.fascia.da-fare:hover {
  border-color: var(--signal-blue); color: var(--signal-blue);
  background: var(--primario-tenue); text-decoration: none;
}

/* --- Checklist --------------------------------------------------------- */
.attivita {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--hairline);
}
.attivita:last-child { border-bottom: 0; }
.attivita:hover { text-decoration: none; }
.attivita .spunta {
  flex: 0 0 var(--tocco); width: var(--tocco); height: var(--tocco);
  display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--hairline); border-radius: var(--r-bottone);
  background: var(--paper); color: transparent;
}
.attivita .spunta:hover { border-color: var(--signal-blue); }
.attivita.fatta .spunta { background: var(--ok-fg); border-color: var(--ok-fg); color: #fff; }
.attivita .descrizione { min-width: 0; flex: 1; }
.attivita .nome { display: block; font-weight: 600; font-size: 14px; color: var(--ink-navy); }
.attivita.fatta .nome { color: var(--slate-gray); text-decoration: line-through; }
.attivita .meta { display: block; font-size: 12px; color: var(--slate-gray); }

/* --- Riepilogo numerico ------------------------------------------------ */
.numeri { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.numero-scheda {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-pannello); padding: var(--s-2) var(--s-3); box-shadow: var(--ombra-1);
}
.numero-scheda .cifra { font-size: 38px; font-weight: 800; line-height: 1.21; font-variant-numeric: tabular-nums; }
.numero-scheda .didascalia { font-size: 12px; color: var(--slate-gray); font-weight: 500; }

/* --- Validazione live del form letture --------------------------------- */
.riscontro { margin-top: 8px; }
.riscontro:empty { display: none; }
.riscontro .avviso { margin-bottom: 8px; }
.riscontro .azione { font-size: 14px; margin-top: 6px; color: var(--ink-navy); }

.campo[data-stato="warn"] input { border-color: var(--warn-fg); background: var(--warn-bg); }
.campo[data-stato="out"] input { border-color: var(--danger-fg); background: var(--danger-bg); }
.campo[data-stato="ok"] input { border-color: var(--ok-fg); }
.limite { font-size: 12px; color: var(--slate-gray); font-weight: 500; margin-top: 4px; }

/* --- Credenziali provvisorie ------------------------------------------- */
.credenziali {
  background: var(--warn-bg); border: 1px solid var(--warn-fg);
  border-radius: var(--r-pannello); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2);
}
.credenziali code {
  display: inline-block; font-family: var(--mono); font-size: 16px;
  background: var(--paper); padding: 6px 10px; border-radius: var(--r-piccolo);
  border: 1px solid var(--hairline); user-select: all; word-break: break-all;
}

/* --- Pagine di servizio ------------------------------------------------- */
.centrata {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--s-3); background: var(--cloud);
  position: relative; isolation: isolate; overflow: hidden;
}
.centrata::before, .centrata::after {
  content: ""; position: absolute; z-index: -1;
  border-radius: 50%; filter: blur(80px); opacity: .3; pointer-events: none;
}
.centrata::before { width: 420px; height: 420px; top: -140px; left: -110px; background: var(--sky-cyan); }
.centrata::after { width: 360px; height: 360px; bottom: -150px; right: -110px; background: var(--coral-magenta); }

.riquadro-accesso {
  width: 100%; max-width: 440px;
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-scheda);
  padding: clamp(24px, 5vw, var(--s-5)); box-shadow: var(--ombra-2);
}
.riquadro-accesso .logo { text-align: center; margin-bottom: var(--s-3); }
.riquadro-accesso .logo .segno-marchio {
  margin: 0 auto 14px; display: grid; place-items: center;
}
.riquadro-accesso h1 { font-size: 24px; margin-bottom: 4px; }
.riquadro-accesso .sotto { color: var(--slate-gray); font-size: 14px; margin: 0; }

/* --- Dettagli ---------------------------------------------------------- */
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

code { font-family: var(--mono); font-size: .92em; }

/* --- Stampa ------------------------------------------------------------ */
@media print {
  .barra-alta, .barra-bassa, .barra-lato, .sfoglia-barra, .btn, .gruppo-bottoni { display: none !important; }
  .contenuto { padding: 0; max-width: none; }
  .scheda, .copertina { box-shadow: none; border: 1px solid #ccc; }
  .copertina-zona::before, .copertina-zona::after { display: none; }
}

/* =========================================================================
   STRATO ACQUATICO
   -------------------------------------------------------------------------
   DESIGN.md prescrive superfici piatte e vieta i gradienti di sfondo. Qui si
   deroga di proposito, ma solo sulle superfici di rappresentanza: copertina,
   barra, bottoni, schede di stato. Form e tabelle restano piatti e ad alto
   contrasto, perché è lì che l'operatore lavora in piedi, col telefono
   bagnato e il sole in faccia — e vetro e riflessi, lì, tolgono leggibilità.

   Nessuna immagine: tutto con gradienti CSS, zero byte in più da scaricare.
   ========================================================================= */

:root {
  /* Profondità dell'acqua. I valori sono tarati perché il bianco resti
     sopra 4,5:1 anche nel punto più chiaro del gradiente, macchia di luce
     inclusa: senza questo vincolo il titolo diventa illeggibile proprio
     nell'angolo dove cade il riflesso. */
  --acqua-fonda: #04223b;
  --acqua-media: #084a79;
  --acqua-alta: #0a6a9c;
  --acqua-chiara: #19a5c9;
  --acqua-schiuma: #bdeef7;

  /* Riflesso speculare: una luce sottile sul bordo superiore, come il sole
     che prende il pelo dell'acqua. */
  --lucido: inset 0 1px 0 rgba(255, 255, 255, .55);
  --lucido-forte: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(10, 53, 88, .08);
}

/* --- Barra superiore: vetro smerigliato ------------------------------- */
.barra-alta {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(212, 224, 237, .9);
}
.marchio .goccia {
  background: linear-gradient(160deg, var(--acqua-chiara), var(--signal-blue) 70%);
  color: #fff;
  box-shadow: var(--lucido), 0 2px 8px rgba(0, 107, 255, .3);
}

/* --- Copertina: acqua vista dall'alto ---------------------------------- */
.copertina {
  background:
    /* Velo scuro sul lato del testo: garantisce il contrasto per
       costruzione, invece di affidarlo a dove cade il riflesso. */
    linear-gradient(100deg, rgba(4, 34, 59, .62) 0%, rgba(4, 34, 59, .34) 48%, transparent 78%),
    /* due pozze di luce, come il riflesso del sole sul fondo */
    radial-gradient(120% 90% at 88% -15%, rgba(189, 238, 247, .26), transparent 58%),
    radial-gradient(90% 70% at 8% 115%, rgba(25, 165, 201, .22), transparent 62%),
    linear-gradient(165deg, var(--acqua-fonda), var(--acqua-media) 55%, var(--acqua-alta));
  border: none;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 10px 40px rgba(6, 45, 77, .35),
    0 30px 60px rgba(71, 103, 136, .18);
  overflow: hidden;
}
/* Le corde delle corsie: galleggianti bianchi, blu e rossi, quelli veri.
   Disegnate, non fotografate — due righe di SVG invece di 300 KB, e niente
   da autorizzare. Sfumano verso sinistra per non disturbare il titolo. */
.corde-corsia {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62px; width: 100%; z-index: 1; pointer-events: none;
}
@media (max-width: 767px) { .corde-corsia { height: 46px; } }
.copertina h1, .copertina .struttura, .stemma { position: relative; z-index: 2; }

/* Increspature: tre bande di luce diagonali, appena percettibili. */
.copertina::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    102deg,
    transparent 0 42px,
    rgba(255, 255, 255, .055) 42px 44px,
    transparent 44px 90px
  );
  mix-blend-mode: soft-light;
}
.copertina > * { position: relative; z-index: 1; }

.copertina .occhiello { color: rgba(255, 255, 255, .75); }
.copertina h1 { color: #fff; text-shadow: 0 2px 20px rgba(6, 45, 77, .4); }
.copertina .struttura { color: var(--acqua-schiuma); }
.copertina .riferimento { color: rgba(255, 255, 255, .88); }

/* Sulla copertina i bottoni cambiano registro: il contorno chiaro sparirebbe. */
.copertina .btn-contorno {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.copertina .btn-contorno:hover { background: rgba(255, 255, 255, .26); }
.copertina .btn-scuro {
  background: rgba(6, 45, 77, .55);
  border-color: rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* I blob dietro non servono più: l'acqua è dentro la scheda. */
.copertina-zona::before, .copertina-zona::after { display: none; }

/* --- Bottoni: riflesso sul bordo alto ---------------------------------- */
.btn-primario {
  background: linear-gradient(180deg, #2a86ff, var(--signal-blue) 55%, #005fe0);
  box-shadow: var(--lucido), 0 2px 6px rgba(0, 107, 255, .28), 0 8px 20px rgba(0, 107, 255, .18);
}
.btn-primario:hover { background: linear-gradient(180deg, #1a7bff, #0062e6 60%, #0053c7); }
.btn-scuro {
  background: linear-gradient(180deg, #164a74, var(--ink-navy) 60%);
  box-shadow: var(--lucido), 0 2px 6px rgba(11, 53, 88, .25);
}
.btn-contorno { box-shadow: var(--lucido-forte); }

/* --- Schede vasca: velo d'acqua ---------------------------------------- */
.vasca {
  background:
    linear-gradient(180deg, rgba(232, 248, 252, .55), rgba(255, 255, 255, 0) 120px),
    var(--paper);
  box-shadow: var(--lucido-forte), var(--ombra-1);
}
.parametro {
  background: linear-gradient(180deg, #ffffff, var(--pebble));
  box-shadow: var(--lucido), inset 0 0 0 1px rgba(212, 224, 237, .7);
}
.parametro.p-warn { background: linear-gradient(180deg, #fff8ec, var(--warn-bg)); }
.parametro.p-out  { background: linear-gradient(180deg, #fff1f0, var(--danger-bg)); }

/* --- Numeri di riepilogo ----------------------------------------------- */
.numero-scheda {
  background: linear-gradient(180deg, #ffffff, #f4f9fc);
  box-shadow: var(--lucido-forte), var(--ombra-1);
}

/* --- Facciate del manuale ---------------------------------------------- */
.facciata-testa .numero-grande {
  background: linear-gradient(160deg, var(--acqua-media), var(--acqua-fonda));
  box-shadow: var(--lucido), 0 4px 14px rgba(6, 45, 77, .3);
}
.punto .numero {
  background: linear-gradient(180deg, #eaf4ff, var(--primario-tenue));
  box-shadow: var(--lucido), inset 0 0 0 1px rgba(0, 107, 255, .14);
}
.punto { box-shadow: var(--lucido-forte), var(--ombra-1); }

/* --- Pagina di accesso: immersione ------------------------------------- */
.centrata {
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(189, 238, 247, .28), transparent 60%),
    linear-gradient(170deg, var(--acqua-fonda), var(--acqua-media) 60%, var(--acqua-alta));
}
.centrata::before, .centrata::after { display: none; }
.riquadro-accesso {
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 20px 60px rgba(6, 45, 77, .4);
}
.riquadro-accesso .logo .goccia {
  background: linear-gradient(160deg, var(--acqua-chiara), var(--signal-blue) 70%);
  color: #fff;
  box-shadow: var(--lucido), 0 4px 16px rgba(0, 107, 255, .3);
}

/* --- Navigazione in basso ---------------------------------------------- */
.barra-bassa {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* --- Dove il lucido NON entra ------------------------------------------
   Campi, tabelle e riscontro di validazione restano piatti e ad alto
   contrasto: è la parte che si usa al sole, con le dita bagnate. */
input, select, textarea, .stepper input, table, .tabella-scorrevole { background-image: none; }

/* Chi ha chiesto meno trasparenza o meno movimento la ottiene. */
@media (prefers-reduced-transparency: reduce) {
  .barra-alta, .barra-bassa, .riquadro-accesso { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .barra-alta, .barra-bassa { background: var(--paper); }
}
@media (prefers-contrast: more) {
  .copertina::before { display: none; }
  .vasca, .parametro, .numero-scheda, .punto { background-image: none; }
}

@media print {
  .copertina { background: #fff !important; color: #000 !important; }
  .copertina h1, .copertina .struttura, .copertina .riferimento { color: #000 !important; }
  .copertina::before { display: none; }
}

/* =========================================================================
   STRATO VETRO
   -------------------------------------------------------------------------
   Superfici traslucide con sfocatura di sfondo, riflesso sul bordo alto e
   ombre ampie e morbide. Il vetro funziona solo se dietro c'è qualcosa da
   sfocare: per questo la tela prende una velatura d'acqua, altrimenti
   resterebbe grigio chiaro con un bordo lucido sopra.

   La sfocatura costa in disegno, quindi è riservata alle superfici grandi
   e strutturali. Gli elementi minuti (badge, pillole) sono traslucidi ma
   non sfocati: moltiplicare i livelli di blur su una lista lunga si paga
   in scorrimento, soprattutto su telefono.
   ========================================================================= */

:root {
  --vetro: rgba(255, 255, 255, .72);
  --vetro-denso: rgba(255, 255, 255, .86);
  --vetro-tenue: rgba(255, 255, 255, .5);
  --vetro-rim: inset 0 1px 0 rgba(255, 255, 255, .9),
               inset 0 0 0 1px rgba(255, 255, 255, .35);
  --vetro-ombra: 0 1px 1px rgba(6, 45, 77, .04),
                 0 8px 24px rgba(6, 45, 77, .07),
                 0 24px 56px rgba(6, 45, 77, .07);
  --vetro-ombra-alta: 0 2px 4px rgba(6, 45, 77, .06),
                      0 16px 40px rgba(6, 45, 77, .1),
                      0 40px 80px rgba(6, 45, 77, .1);
  --sfoca: saturate(180%) blur(20px);
}

/* --- La tela: acqua lontana, appena accennata ------------------------- */
body {
  background:
    radial-gradient(58% 48% at 10% 0%, rgba(25, 165, 201, .16), transparent 62%),
    radial-gradient(48% 42% at 94% 6%, rgba(0, 107, 255, .11), transparent 64%),
    radial-gradient(72% 58% at 52% 102%, rgba(168, 230, 240, .2), transparent 62%),
    var(--cloud);
  background-attachment: fixed;
}

/* --- Superfici principali --------------------------------------------- */
.scheda,
.numero-scheda,
.punto,
.riquadro-accesso {
  background-color: var(--vetro);
  background-image: none;
  backdrop-filter: var(--sfoca);
  -webkit-backdrop-filter: var(--sfoca);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--vetro-rim), var(--vetro-ombra);
}
.punto:hover {
  background-color: var(--vetro-denso);
  border-color: rgba(255, 255, 255, .85);
  box-shadow: var(--vetro-rim), var(--vetro-ombra-alta);
}
/* Più denso delle altre superfici di vetro: qui dietro c'è acqua scura, e
   a 0.80 il testo secondario scendeva a 3,9:1. A 0.90 risale a 4,8:1. */
.riquadro-accesso { background-color: rgba(255, 255, 255, .9); }

/* Le schede vasca tengono il velo d'acqua, ma su base di vetro. */
.vasca {
  background-image: linear-gradient(180deg, rgba(210, 240, 250, .5), rgba(255, 255, 255, 0) 140px);
}

/* --- Barre: vetro più denso, perché ci passa sotto il contenuto -------- */
.barra-alta, .barra-bassa {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.barra-alta { border-bottom: 1px solid rgba(255, 255, 255, .5); }
.barra-bassa { border-top: 1px solid rgba(255, 255, 255, .5); }

@media (min-width: 1024px) {
  .barra-lato a[aria-current="page"] {
    background: var(--vetro-denso);
    box-shadow: var(--vetro-rim), 0 2px 8px rgba(6, 45, 77, .08);
  }
  .barra-lato a:hover { background: var(--vetro-tenue); }
}

/* --- Campi: incassati, non sporgenti ----------------------------------
   Apple scava i campi di testo invece di sollevarli, e li tiene quasi
   opachi: dentro ci si legge e ci si scrive, non è una superficie da
   ammirare. Qui vale doppio, perché si compilano al sole. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="url"], select, textarea,
.stepper input {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(6, 45, 77, .12);
  box-shadow: inset 0 1px 2px rgba(6, 45, 77, .06);
}
input:focus, select:focus, textarea:focus {
  background: #fff;
  border-color: var(--signal-blue);
  box-shadow: inset 0 1px 2px rgba(6, 45, 77, .04), 0 0 0 4px rgba(0, 107, 255, .16);
}

/* --- Selettori a segmenti: pista incassata, pillola che galleggia ------ */
.segmenti {
  background: rgba(6, 45, 77, .055);
  border-radius: calc(var(--r-input) + 4px);
  padding: 4px;
  gap: 4px;
  box-shadow: inset 0 1px 2px rgba(6, 45, 77, .07);
}
.segmenti label {
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--slate-gray);
}
.segmenti label:hover { background: rgba(255, 255, 255, .5); }
.segmenti input:checked + label {
  background: #fff;
  border-color: rgba(255, 255, 255, .9);
  color: var(--ink-navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
              0 1px 2px rgba(6, 45, 77, .1), 0 4px 10px rgba(6, 45, 77, .08);
}

/* --- Elementi minuti: traslucidi ma senza sfocatura -------------------- */
.badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.sfoglia-nav, .avatar, .sfoglia-punti a, .fascia, .attivita .spunta {
  background-color: var(--vetro-denso);
  box-shadow: var(--vetro-rim), 0 1px 3px rgba(6, 45, 77, .07);
}
.sfoglia-punti a[aria-current="page"],
.attivita.fatta .spunta {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(6, 45, 77, .18);
}
.fascia.fatta { background-color: var(--ok-bg); }
.parametro {
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--vetro-rim), inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.parametro.p-warn { background: rgba(253, 240, 218, .85); }
.parametro.p-out  { background: rgba(253, 234, 232, .85); }

/* --- Avvisi: vetro colorato ------------------------------------------- */
.avviso {
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.avviso-info    { background: rgba(230, 240, 255, .8); }
.avviso-success { background: rgba(226, 244, 236, .8); }
.avviso-warning { background: rgba(253, 240, 218, .82); }
.avviso-danger  { background: rgba(253, 234, 232, .82); }

/* --- Tabelle ----------------------------------------------------------- */
th { background: rgba(255, 255, 255, .4); }
tbody tr:hover { background: rgba(255, 255, 255, .55); }
td, th { border-bottom-color: rgba(6, 45, 77, .08); }

/* --- Facciate del manuale ---------------------------------------------- */
.facciata-testa { border-bottom-color: rgba(6, 45, 77, .1); }
.suggerimento {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.credenziali { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* --- Finestra di conferma ---------------------------------------------- */
dialog {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: var(--sfoca);
  -webkit-backdrop-filter: var(--sfoca);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--vetro-rim), var(--vetro-ombra-alta);
}
dialog::backdrop { background: rgba(6, 45, 77, .35); backdrop-filter: blur(4px); }

/* --- Rinunce consapevoli ----------------------------------------------
   Chi chiede meno trasparenza, più contrasto o meno movimento riceve
   superfici piene: il vetro è un di più, non un requisito. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body { background: var(--cloud); }
  .scheda, .numero-scheda, .punto, .riquadro-accesso, .barra-alta, .barra-bassa,
  .avviso, dialog, .parametro, .sfoglia-nav, .avatar, .sfoglia-punti a,
  .fascia, .attivita .spunta, .suggerimento, th {
    background-color: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--hairline);
  }
  .avviso-info { background-color: var(--primario-tenue); }
  .avviso-success { background-color: var(--ok-bg); }
  .avviso-warning { background-color: var(--warn-bg); }
  .avviso-danger { background-color: var(--danger-bg); }
  .segmenti { background: var(--pebble); }
}

@media print {
  body { background: #fff; }
  .scheda, .punto, .numero-scheda { background: #fff !important; backdrop-filter: none; box-shadow: none; }
}

/* =========================================================================
   VELO E BORDO SU TUTTE LE SUPERFICI
   -------------------------------------------------------------------------
   Il trattamento nato per le schede vasca — velo d'acqua che sfuma
   dall'alto e barra verticale sul fianco sinistro — diventa il motivo
   comune di tutti i riquadri.

   Il velo è identico ovunque, cambia solo l'altezza perché su una scheda
   bassa una sfumatura da 140px la tingerebbe tutta.

   La barra invece resta neutra di default e si colora SOLO dove dice
   qualcosa: lo stato di una vasca, la gravità di una non conformità. Se la
   colorassimo ovunque, il verde e il rosso smetterebbero di saltare
   all'occhio proprio dove servono — il colore informa finché è raro.
   ========================================================================= */

.scheda,
.punto,
.numero-scheda {
  position: relative;
  background-image: linear-gradient(180deg, rgba(210, 240, 250, .5), rgba(255, 255, 255, 0) 140px);
  border-left: 4px solid rgba(25, 165, 201, .3);
}
.punto {
  background-image: linear-gradient(180deg, rgba(210, 240, 250, .5), rgba(255, 255, 255, 0) 100px);
}
.numero-scheda {
  background-image: linear-gradient(180deg, rgba(210, 240, 250, .5), rgba(255, 255, 255, 0) 76px);
}
.punto:hover { border-left-color: var(--signal-blue); }

/* La barra si colora dove porta un'informazione. */
.vasca.stato-ok { border-left-color: var(--ok-fg); }
.vasca.stato-warn { border-left-color: var(--warn-fg); }
.vasca.stato-out_of_range { border-left-color: var(--danger-fg); }
.vasca.stato-unknown { border-left-color: var(--mist-gray); }

/* Il riquadro di accesso resta senza barra: è una pagina sola, centrata,
   non un elenco di schede da scorrere. */
.riquadro-accesso {
  border-left-width: 1px;
  background-image: linear-gradient(180deg, rgba(210, 240, 250, .45), rgba(255, 255, 255, 0) 120px);
}

/* Il blu segnale pieno è pensato per i riempimenti, non per il testo: su
   bianco è già al limite (4,62:1) e sul velo d'acqua scende a 4,17. I link
   e i richiami testuali usano quindi una tonalità appena più profonda —
   stessa famiglia, 4,79:1 sul velo — mentre i bottoni pieni restano col
   blu originale, dove il contrasto lo dà il bianco sopra. */
:root { --blu-testo: #0062ec; }

a,
.punto .aggancio,
.riscontro .avviso a { color: var(--blu-testo); }
.barra-lato a[aria-current="page"],
.barra-bassa a[aria-current="page"] { color: var(--blu-testo); }
.copertina a, .btn-primario, .btn-scuro { color: #fff; }

/* --- Calendario delle manutenzioni ------------------------------------ */
.calendario { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.calendario th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate-gray); padding: 4px 2px; text-align: center; background: none;
}
.calendario td { padding: 0; border: none; vertical-align: top; }

.casella {
  display: flex; flex-direction: column; gap: 3px;
  min-height: 62px; padding: 6px 5px;
  border-radius: var(--r-bottone);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(212, 224, 237, .8);
  text-decoration: none; color: var(--ink-navy);
}
a.casella:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--signal-blue); text-decoration: none; }
.casella.fuori { opacity: .35; }
.casella.oggi { box-shadow: inset 0 0 0 2px var(--signal-blue); }
.casella .giorno { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.casella .conteggio { font-size: 11px; color: var(--slate-gray); line-height: 1.3; }
/* Chi è in acqua quel giorno: la riga che rende utile il calendario delle
   corsie. Sul telefono non c'è spazio e resta il numero. */
.casella .occupante {
  font-size: 10px; color: var(--slate-gray); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Lo stato si legge dalla pastiglia, non dal solo colore del fondo. */
.pastiglia {
  display: inline-flex; align-items: center; gap: 3px; align-self: flex-start;
  padding: 1px 6px; border-radius: var(--r-badge);
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.pastiglia-completo { background: var(--ok-bg); color: var(--ok-fg); }
.pastiglia-parziale { background: var(--warn-bg); color: var(--warn-fg); }
.pastiglia-scoperto { background: var(--danger-bg); color: var(--danger-fg); }
/* Corsie impegnate: non è uno stato da sistemare, è il normale andamento
   della piscina. L'ambra della manutenzione qui direbbe la cosa sbagliata. */
.pastiglia-acqua { background: var(--primario-tenue); color: var(--deep-cobalt); }

@media (max-width: 560px) {
  .calendario { border-spacing: 2px; }
  .casella { min-height: 52px; padding: 4px 3px; }
  .casella .conteggio, .casella .occupante { display: none; }
}

/* --- Orari di apertura -------------------------------------------------- */
.orari-riga {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: 1fr;
  padding: 8px 0; border-bottom: 1px solid var(--bordo);
}
.orari-riga:last-of-type { border-bottom: 0; }
.orari-riga .giorno-nome { font-weight: 600; text-transform: capitalize; }
/* Quattro colonne. La colonna delle fasce chiede lo spazio di due intervalli
   affiancati; quando non c'è, le fasce vanno a capo da sole invece di
   tagliare l'orario di chiusura. */
@media (min-width: 720px) {
  .orari-riga { grid-template-columns: 90px minmax(0, 1fr) minmax(110px, .7fr) 78px; }
}
@media (min-width: 1000px) {
  .orari-riga { grid-template-columns: 90px minmax(420px, auto) minmax(110px, 1fr) 78px; }
}
.orari-intestazione {
  border-bottom: 2px solid var(--bordo);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate-gray); font-weight: 700;
}
.fasce-orarie { display: flex; gap: 10px; flex-wrap: wrap; }
.fascia-oraria { display: flex; gap: 5px; align-items: center; }
.fascia-oraria > span[aria-hidden] { color: var(--slate-gray); }
/* Larghezza fissa: un campo orario non ha motivo di allargarsi. */
.fascia-oraria input[type="time"] { width: 104px; min-width: 104px; padding-inline: 8px; }
@media (pointer: fine) and (min-width: 768px) {
  .fascia-oraria input[type="time"] { width: 92px; min-width: 92px; }
}

/* =========================================================================
   DENSITÀ DA SCRIVANIA
   -------------------------------------------------------------------------
   I moduli con campi alti 48px e testo a 16px sono giusti per un dito
   bagnato a bordo vasca, non per compilare venti campi col mouse.

   La distinzione è `pointer: fine`: il mouse ha una precisione che il dito
   non ha. Sui dispositivi tattili non si scende sotto i 16px perché iOS
   ingrandisce la pagina da solo quando si tocca un campo più piccolo, e
   poi la lascia zoomata — un difetto peggiore del campo grande.
   ========================================================================= */

@media (pointer: fine) and (min-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], input[type="time"], input[type="search"], input[type="tel"], input[type="url"], input[type="file"],
  select, textarea, .stepper input {
    font-size: 14px;
    min-height: 38px;
    padding: 7px 10px;
  }
  textarea { min-height: 76px; line-height: 1.5; }

  .campo { margin-bottom: 14px; }
  .campo > label, .etichetta { font-size: 13px; margin-bottom: 4px; }
  .aiuto, .limite { font-size: 12px; }

  .stepper { gap: 6px; max-width: 280px; }
  .stepper button { flex: 0 0 38px; width: 38px; min-height: 38px; font-size: 18px; }
  .stepper input { font-size: 16px; }

  .segmenti label { min-height: 38px; font-size: 13px; padding: 6px 10px; }
  .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .btn-piccolo { min-height: 32px; padding: 4px 10px; font-size: 13px; }
  .btn svg { width: 17px; height: 17px; }

  .scheda { padding: 18px 20px; }
  .riga-form { gap: 14px; }
  table { font-size: 13px; }
  th, td { padding: 7px 10px; }
}

/* =========================================================================
   SEZIONI RICHIUDIBILI
   -------------------------------------------------------------------------
   Compiti, permessi, passi di una procedura e note di un prodotto sono
   lunghi da leggere e corti da consultare: stanno chiusi finché non
   servono, così la scheda resta alta quanto basta a dire cosa contiene.
   ========================================================================= */

.apri {
  border-top: 1px solid var(--bordo);
  margin-top: 10px;
  padding-top: 8px;
}
.apri > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--blu-testo);
  min-height: 32px;
}
.apri > summary::-webkit-details-marker { display: none; }
.apri > summary::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
  margin-left: 3px; margin-right: 3px;
}
.apri[open] > summary::before { transform: rotate(45deg); }
.apri > summary:hover { text-decoration: underline; }
.apri > summary .conta {
  font-weight: 500; color: var(--slate-gray);
}
.apri-corpo { padding: 6px 0 4px; font-size: 14px; }
.apri-corpo .elenco { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .apri > summary::before { transition: none; }
}

/* Riga compatta di una scheda-persona o scheda-elemento. */
.riga-titolo {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.riga-titolo .corpo { flex: 1; min-width: 180px; }
.riga-titolo .nome-forte { font-weight: 600; font-size: 15px; line-height: 1.35; }
.riga-titolo .sotto-riga { font-size: 12px; color: var(--slate-gray); line-height: 1.45; }

.elemento {
  padding: 12px 0;
  border-bottom: 1px solid var(--bordo);
}
.elemento:last-of-type { border-bottom: 0; }
.azioni-riga { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* --- Ritorno alla pagina precedente ------------------------------------
   Punta al genitore logico, non alla cronologia del browser: dopo un
   salvataggio la cronologia è piena di redirect e il tasto del browser
   riporterebbe a un modulo già inviato. */
.torna {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; margin-bottom: 4px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-badge);
  font-size: 13px; font-weight: 600;
  color: var(--slate-gray); text-decoration: none;
}
.torna:hover {
  background: var(--vetro-denso);
  color: var(--blu-testo);
  text-decoration: none;
  box-shadow: var(--vetro-rim), 0 1px 3px rgba(6, 45, 77, .07);
}
.torna svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Su telefono il bersaglio cresce: è il primo gesto che si cerca. */
@media (max-width: 767px) {
  .torna { min-height: 44px; font-size: 14px; padding-right: 14px; }
  .torna svg { width: 20px; height: 20px; flex: 0 0 20px; }
}

/* ── Avvisi ──────────────────────────────────────────────────────────────
   Note con una data, che compaiono in cima alla pagina di oggi.

   Non sono riquadri come gli altri: sono più stretti in verticale e hanno
   la barra a sinistra come gli altri elementi del motivo, ma restano
   volutamente sobri. Un avviso che urla come una non conformità
   svaluterebbe le non conformità — quelle riguardano la sicurezza dei
   bagnanti, queste il fatto che domani viene il tecnico. */
.avvisi-oggi { margin-bottom: var(--s-3); }

.avviso-nota {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--primario);
  border-radius: var(--r-piccolo);
  box-shadow: var(--ombra-1);
}
.avviso-nota .segno { display: flex; color: var(--primario); flex: 0 0 auto; margin-top: 1px; }
/* Non si chiama `.corpo`: quella classe è già il contenitore di pagina, ed
   è `display: flex` — ereditandola i due paragrafi della nota diventavano
   due colonne affiancate invece di due righe. */
.avviso-nota .nota-corpo { flex: 1 1 auto; min-width: 0; }
.avviso-nota .testo-nota {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--testo);
  /* Un avviso scritto da un telefono può non avere spazi: senza questo una
     parola lunga sfonderebbe il riquadro a 375px. */
  overflow-wrap: anywhere;
}
.avviso-nota .meta-nota {
  margin: 2px 0 0; font-size: 12px; color: var(--testo-tenue);
}

.avviso-nota.importante {
  border-left-color: var(--warn-fg);
  background: var(--warn-bg);
}
.avviso-nota.importante .segno { color: var(--warn-fg); }
.avviso-nota.importante .testo-nota { color: var(--warn-fg); }
/* Niente `opacity` per smorzare il meta: a .85 su questo fondo il
   contrasto scende a 4.17:1, sotto la soglia AA di 4.5. Il colore pieno
   resta a 5.67:1 e la gerarchia la fa già la dimensione. */
.avviso-nota.importante .meta-nota { color: var(--warn-fg); }

/* Già letto: resta visibile — sparire del tutto farebbe dubitare di
   averlo visto — ma smette di chiedere attenzione. Vince anche
   sull'importante: un avviso letto che continuasse a stare sull'ambra
   terrebbe acceso un allarme a cui si è già risposto, e a forza di
   allarmi accesi si smette di guardarli. */
.avviso-nota.letto,
.avviso-nota.letto.importante {
  background: var(--paper);
  border-left-color: var(--hairline);
  box-shadow: none;
}
/* `--testo-spento` sta a 1,44:1 su bianco: un'icona a quel contrasto non è
   smorzata, è sparita, e lascia un buco al posto del segno. */
.avviso-nota.letto .segno,
.avviso-nota.letto.importante .segno { color: var(--testo-tenue); }
.avviso-nota.letto .testo-nota,
.avviso-nota.letto.importante .testo-nota { font-weight: 500; color: var(--testo-tenue); }
.avviso-nota.letto.importante .meta-nota { color: var(--testo-tenue); }

.spunta-letto {
  display: flex; align-items: center; gap: 4px;
  flex: 0 0 auto; color: var(--ok-fg); font-size: 12px; font-weight: 600;
}

.avviso-riga.importante { border-left: 3px solid var(--warn-fg); }
.avviso-riga .testo-nota { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.letture-avviso { display: flex; align-items: flex-start; gap: 5px; color: var(--ok-fg); }
.letture-avviso svg { flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 767px) {
  /* Il bersaglio del «Ho letto» va a 44px come tutto il resto sul touch,
     e l'avviso passa su due righe per non comprimere il testo. */
  .avviso-nota { flex-wrap: wrap; }
  .avviso-nota form { width: 100%; }
  .avviso-nota form .btn { width: 100%; min-height: 44px; }
}

/* Richiamo agli avvisi sulla copertina: compare solo se ce n'è almeno uno
   da leggere, quindi può permettersi di occupare spazio. */
.richiamo-avvisi {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: var(--s-2);
  background: var(--primario-tenue);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--primario);
  border-radius: var(--r-piccolo);
  color: var(--testo); text-decoration: none;
  min-height: 44px;
}
.richiamo-avvisi:hover { box-shadow: var(--ombra-1); }
.richiamo-avvisi svg { flex: 0 0 auto; color: var(--primario); }
.richiamo-avvisi span { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--testo-tenue); }
.richiamo-avvisi strong { display: block; font-size: 14px; color: var(--testo); }

/* ── Spazi acqua ─────────────────────────────────────────────────────────
   Chi occupa quante corsie, e quante restano. La barra delle corsie è la
   parte che si legge: una riga di quadratini, pieni quanti sono presi. */
.giorni { display: flex; gap: 6px; align-items: center; margin-bottom: var(--s-2); }

.fascia-acqua {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
}
.fascia-acqua:first-of-type { border-top: 0; }
.fascia-acqua .ore {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--testo);
  font-variant-numeric: tabular-nums;
}
.fascia-acqua .resto { font-size: 12px; color: var(--testo-tenue); text-align: right; }
.fascia-acqua.piena .resto { color: var(--warn-fg); font-weight: 600; }
.fascia-acqua .eccesso { color: var(--danger-fg); }

.corsie { display: flex; gap: 3px; min-width: 0; }
.corsia {
  flex: 1 1 0; min-width: 4px; height: 16px;
  background: var(--primario-tenue);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.corsia.presa { background: var(--primario); border-color: var(--primario); }

.occupanti { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.occupanti li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--hairline);
}
.occupanti .quante {
  flex: 0 0 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primario-tenue); color: var(--blu-testo);
  border-radius: var(--r-piccolo);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.occupanti .chi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.occupanti .chi strong { font-size: 14px; overflow-wrap: anywhere; }
.occupanti .chi .aiuto { font-size: 12px; }

@media (max-width: 767px) {
  /* A 375px le tre colonne della fascia si pestano i piedi: l'orario e il
     residuo salgono sopra la barra, che resta a tutta larghezza. */
  .fascia-acqua { grid-template-columns: auto 1fr; grid-template-areas: "ore resto" "barra barra"; }
  .fascia-acqua .ore { grid-area: ore; }
  .fascia-acqua .resto { grid-area: resto; }
  .fascia-acqua .corsie { grid-area: barra; }
  /* 44px come il resto dell'applicazione. Conta doppio qui: «Revoca» è
     un bersaglio distruttivo in una lista di righe ravvicinate, e un
     bottone piccolo fra due righe si sbaglia proprio perché è piccolo. */
  .occupanti li form .btn,
  .giorni .btn { min-height: 44px; }
  .giorni .btn { padding-left: 14px; padding-right: 14px; }
}

/* ── Materiale ───────────────────────────────────────────────────────────
   I tre stati sono tre bottoni sempre visibili, non un menu: aprire,
   scegliere e confermare sono tre gesti per dire «manca il cloro», e a tre
   gesti con le mani bagnate non lo si dice. */
.elenco-materiale { list-style: none; margin: 0; padding: 0; }

.voce-materiale {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--hairline);
}
.voce-materiale:first-child { border-top: 0; }
.voce-materiale .descrizione { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.voce-materiale .descrizione strong { font-size: 14px; overflow-wrap: anywhere; }
.voce-materiale .descrizione .aiuto { font-size: 12px; }
.voce-materiale .firma-stato { font-weight: 600; }
.voce-materiale.stato-mancante .firma-stato { color: var(--danger-fg); }
.voce-materiale.stato-scarso .firma-stato { color: var(--warn-fg); }

.stati { display: flex; gap: 0; flex: 0 0 auto; }
.stati form { display: flex; }
.scelta-stato {
  min-height: 36px; padding: 0 10px;
  border: 1px solid var(--bordo); background: var(--paper);
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--testo-tenue); cursor: pointer;
  white-space: nowrap;
}
.stati form:first-child .scelta-stato { border-radius: var(--r-bottone) 0 0 var(--r-bottone); }
.stati form:last-child .scelta-stato { border-radius: 0 var(--r-bottone) var(--r-bottone) 0; }
.stati form:not(:first-child) .scelta-stato { border-left: 0; }
.scelta-stato:hover { background: var(--primario-tenue); }

/* Lo stato attuale non si legge dal solo colore: il bottone premuto porta
   aria-pressed, e visivamente cambia anche il peso del bordo. */
.scelta-stato.attivo { color: #fff; border-color: transparent; }
.scelta-stato.ok.attivo { background: var(--ok-fg); }
.scelta-stato.scarso.attivo { background: var(--warn-fg); }
.scelta-stato.mancante.attivo { background: var(--danger-fg); }

/* Compatto e staccato dal gruppo degli stati: non è un quarto stato. */
.voce-materiale .toglie { flex: 0 0 auto; margin-left: auto; }
.toglie-voce {
  border-radius: var(--r-bottone);
  /* Non `--testo-spento`: su fondo chiaro sta a 1,97:1, illeggibile. Un
     bottone si smorza con la dimensione e la posizione, non sbiadendo il
     testo finché non si vede più. */
  color: var(--testo-tenue);
}
.toglie-voce:hover { background: var(--danger-bg); color: var(--danger-fg); }
.da-procurare { border-left: 3px solid var(--warn-fg); }

/* ── Segnalazioni ───────────────────────────────────────────────────────── */
.segnalazione.urgente { border-left: 3px solid var(--danger-fg); }
.testo-segnalazione { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.risoluzione {
  display: flex; align-items: flex-start; gap: 6px;
  margin: var(--s-1) 0 0; padding: 8px 10px;
  background: var(--ok-bg); color: var(--ok-fg);
  border-radius: var(--r-piccolo); font-size: 13px;
}
.risoluzione svg { flex: 0 0 auto; margin-top: 2px; }
.risoluzione .aiuto { color: inherit; opacity: 1; font-weight: 600; }
.azioni-segnalazione { margin-top: var(--s-2); }
.azioni-segnalazione .campo { margin-bottom: 8px; }

@media (max-width: 767px) {
  /* A 375px i tre stati non stanno accanto alla descrizione: vanno sotto,
     a tutta larghezza, e salgono a 44px come ogni altro bersaglio. */
  .voce-materiale .descrizione { flex: 1 1 100%; }
  .stati { width: 100%; }
  .stati form { flex: 1 1 0; }
  .scelta-stato { width: 100%; min-height: 44px; }
  /* Resta piccolo anche sul telefono: a tutta larghezza sotto «Manca»
     diventerebbe il bersaglio più facile da centrare per sbaglio. */
  .voce-materiale .toglie { width: auto; }
  .toglie-voce { min-height: 44px; padding: 0 14px; }
  .azioni-segnalazione .azioni-riga .btn { flex: 1 1 0; min-height: 44px; }
}

/* ── Allegati di una facciata ───────────────────────────────────────────── */
/* Quello che su carta sarebbe spillato alla facciata: planimetrie, referti,
   foto dei filtri. Sta dentro la facciata, non in un archivio a parte. */
.allegati-facciata {
  margin-top: var(--s-3);
  border-top: 2px solid var(--bordo);
  padding-top: var(--s-2);
}
.allegati-facciata h2 { display: flex; align-items: center; gap: 6px; }
.allegato {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--hairline);
}
.allegato:first-of-type { border-top: 0; }
.allegato-apri {
  flex: 1 1 200px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 44px; justify-content: center;
  color: inherit; text-decoration: none;
}
.allegato-apri:hover .allegato-nome { color: var(--primario); text-decoration: underline; }
.allegato-nome { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.allegato-meta { font-size: 12px; color: var(--testo-tenue); }

.aggiungi-allegato { margin-top: var(--s-1); }
.aggiungi-allegato summary {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--primario);
}
.aggiungi-allegato summary::-webkit-details-marker { display: none; }
.aggiungi-allegato summary::marker { content: ""; }
.modulo-allegato { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--s-1); }
.modulo-allegato label { font-size: 13px; font-weight: 600; margin-top: 6px; }
/* 16px pieni: sotto, iOS ingrandisce la pagina da sé all'apertura del campo. */
.modulo-allegato input, .modulo-allegato select { font-size: 16px; min-height: 44px; }
.modulo-allegato input[type="file"] { padding: 10px; }
.modulo-allegato .btn { margin-top: var(--s-1); align-self: flex-start; min-height: 44px; }

/* ── Le tre sezioni: le porte del tool ──────────────────────────────────── */
/* Il cliente lo ha chiesto così: una parte documentale, una di raccolta dei
   dati, una per le corsie. Qui si scelgono, e da qui non si torna più
   indietro a cercare la voce giusta in un menu di diciannove. */
.sezioni {
  display: grid; gap: var(--s-2);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-3);
}
@media (min-width: 760px) {
  .sezioni { grid-template-columns: repeat(3, 1fr); }
}
.sezione {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-3) var(--s-2);
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--r-scheda); box-shadow: var(--ombra-1);
  color: inherit; text-decoration: none;
  min-height: 160px;
}
.sezione:hover, .sezione:focus-visible {
  text-decoration: none; border-color: var(--primario);
  box-shadow: var(--ombra-2); transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .sezione:hover { transform: none; } }
.sezione .segno {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pannello);
  background: var(--primario-tenue); color: var(--deep-cobalt);
}
.sezione h2 { font-size: 1.1rem; margin: 6px 0 0; }
.sezione p { margin: 0; font-size: 14px; color: var(--testo-tenue); }
.sezione .conta {
  margin-top: auto; padding-top: var(--s-1);
  font-size: 13px; font-weight: 600; color: var(--primario);
  display: flex; align-items: center; gap: 4px;
}

/* Le scorciatoie in fondo alla porta di una sezione: su mobile sono
   l'unico modo di arrivare alle pagine che non stanno nella barra in
   basso, che tiene solo le tre che si toccano ogni turno. */
.scorciatoie { display: grid; gap: var(--s-1); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .scorciatoie { grid-template-columns: repeat(4, 1fr); } }
.scorciatoia {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 72px; padding: 12px;
  border: 1px solid var(--bordo); border-radius: var(--r-pannello);
  background: var(--superficie); color: inherit; text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.scorciatoia:hover { text-decoration: none; border-color: var(--primario); color: var(--primario); }
.scorciatoia .pastiglia { font-weight: 700; }

@media (max-width: 767px) {
  /* 38px misurati: sul telefono anche «Elimina» sale a 44, come ogni
     altro bersaglio. Resta piccolo in larghezza — non deve essere il
     bottone più facile da centrare della riga. */
  .allegato form .btn { min-height: 44px; }
}

/* ── Uscire dalla sezione ───────────────────────────────────────────────── */
/* Dentro una sezione si vedono le sue pagine e basta: la Home è la via
   d'uscita, e deve esserci sempre — in cima alla laterale e come prima
   voce della barra del telefono. */
.torna-alla-home { font-weight: 600; }

/* Le impostazioni in fondo alla Home: una riga di collegamenti, non una
   quarta sezione. */
.impostazioni-in-fondo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  margin-top: var(--s-4); padding-top: var(--s-2);
  border-top: 1px solid var(--bordo);
  font-size: 14px;
}
.impostazioni-in-fondo > span {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--testo-tenue);
}
.impostazioni-in-fondo a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  /* Non `--primario`: sulla tela della copertina misura 4,38:1, sotto il
     minimo per un testo da 14px. Il cobalto scuro sta a 7,12:1. */
  color: var(--deep-cobalt);
}

/* ── La carta intestata del manuale ─────────────────────────────────────
   Il riferimento di legge e l'anagrafica stavano sulla Home, quando la
   Home era la copertina del manuale. Ora la Home è del gestionale e
   queste due righe stanno dove comincia il documento. */
.occhiello-manuale {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
  font-weight: 700; color: var(--testo-tenue); margin: 0 0 4px;
}
.struttura-manuale { margin: 4px 0 0; font-size: 14px; color: var(--testo-tenue); }

/* ── Collaboratori ───────────────────────────────────────────────────────
   L'elenco risponde a una domanda sola — chi ha qualcosa di scaduto — e
   quindi lo stato è una striscia di colore sul fianco oltre che una
   parola: il colore si vede scorrendo, la parola regge da sola per chi
   non lo distingue. */
/* Venti persone in venti schede erano venti schede: l'elenco sta in una
   scheda sola, con le righe separate da un filo. Lo stato resta una
   striscia di colore sul fianco oltre che una parola — il colore si vede
   scorrendo, la parola regge da sola per chi non lo distingue. */
.elenco-collaboratori { padding: 0; overflow: hidden; }
.riga-collaboratore {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 12px 8px 10px;
  text-decoration: none; color: inherit;
  border-left: 4px solid var(--hairline);
  border-top: 1px solid var(--hairline);
}
.elenco-collaboratori > .riga-collaboratore:first-child { border-top: 0; }
.riga-collaboratore:hover { background: var(--primario-tenue); }
.riga-collaboratore .chi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.riga-collaboratore .chi strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.riga-collaboratore .chi .aiuto { font-size: 12px; margin: 0; line-height: 1.35; }
.riga-collaboratore .badge { flex: 0 0 auto; }
.riga-collaboratore .freccia { display: flex; flex: 0 0 auto; color: var(--testo-tenue); }
.riga-collaboratore.stato-ok { border-left-color: var(--ok-fg); }
.riga-collaboratore.stato-attenzione { border-left-color: var(--warn-fg); }
.riga-collaboratore.stato-scaduto { border-left-color: var(--danger-fg); }
/* Chi non collabora più resta consultabile ma non deve attirare l'occhio. */
.riga-collaboratore.spenta { opacity: .72; }
.conteggio-elenco { margin-top: calc(var(--s-2) * -0.5); }

/* La ricerca: campo e bottone sulla stessa riga, perché insieme sono un
   gesto solo. Sotto i 480px il bottone va a capo a tutta larghezza
   invece di stringere il campo a due centimetri. */
.barra-ricerca {
  display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.barra-ricerca .campo { flex: 1 1 170px; margin: 0; }
.barra-ricerca .btn { min-height: 44px; flex: 0 0 auto; }
/* A 375px nome, stato e freccia stanno su una riga sola: mandare a capo
   lo stato faceva righe da 90px, cioè il contrario di compattare. A
   stringersi è la seconda riga, che può andare a capo senza danno. */
.riga-collaboratore .chi .aiuto { overflow-wrap: anywhere; }

.documento {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  padding: 10px 0 10px 10px;
  border-top: 1px solid var(--hairline);
  border-left: 3px solid transparent;
}
.documento:first-of-type { border-top: 0; }
.documento.stato-attenzione { border-left-color: var(--warn-fg); }
.documento.stato-scaduto { border-left-color: var(--danger-fg); }
.documento .corpo { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.documento .corpo strong { font-size: 15px; overflow-wrap: anywhere; }
.documento .corpo .aiuto { font-size: 12px; margin: 0; }
.documento .scadenza { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.documento .scadenza .aiuto { margin: 0; font-size: 12px; }
.documento .azioni-riga { margin-top: 0; }
/* Il nome del file può essere lungo: il bottone si accorcia invece di
   spingere fuori pagina il resto della riga. */
.documento .azioni-riga .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767px) {
  .documento { gap: 8px; }
  .documento .azioni-riga { width: 100%; }
  .documento .azioni-riga .btn { min-height: 44px; }
}