/* ==========================================================================
   Censimento Locali — foglio di stile unico, mobile first.

   Progettato per essere letto in piedi, per strada, con il sole sullo schermo
   e con la miopia. Le regole che NON si toccano:
     · corpo del testo 1.1875rem (19px), niente sotto 1rem (16px)
     · tutto in rem: cosi' l'ingrandimento del carattere di Android funziona
       davvero. Mai  html { font-size: Npx }
     · ogni cosa che si tocca e' alta almeno 3.5rem (56px)
     · contrasto del testo sempre sopra 7:1 (verificato colore per colore)
     · il colore non porta mai da solo un'informazione: c'e' sempre l'emoji
       e la parola scritta
   ========================================================================== */

/* ------------------------------- Colori ---------------------------------- */

:root {
  color-scheme: light;

  /* Superfici e testo — tema chiaro
     testo su carta 17.9:1 · testo tenue su carta 10.3:1 */
  --sfondo: #eceff4;
  --carta: #ffffff;
  --carta-alt: #f5f7fa;
  --testo: #0f172a;
  --testo-tenue: #374151;
  --bordo: #7e8b9e;          /* 3.5:1 sul bianco — si vede anche al sole */
  --bordo-tenue: #cdd4de;    /* solo separatori interni */
  --bordo-forte: #4a5568;    /* 7.5:1 — bordo dei campi da compilare */

  /* Accento */
  --accento: #1c40b0;        /* bianco sopra: 8.7:1 */
  --su-accento: #ffffff;
  --accento-testo: #16357a;  /* 11.5:1 sul bianco */
  --accento-velo: #dbe6ff;
  --intestazione: #1c40b0;
  --su-intestazione: #ffffff;

  /* Semantici (usati anche come colore di testo: tutti sopra 7:1 sul bianco) */
  --blu: #1c40b0;
  --blu-scuro: #16357a;
  --blu-chiaro: #dbe6ff;
  --verde: #12662f;          /* 7.1:1 */
  --arancio: #8a4200;        /* 7.3:1 */
  --rosso: #a91419;          /* 7.5:1 */
  --grigio: #414c5c;         /* 8.7:1 */

  /* Superfici neutre (bottoni "neutro", campi) */
  --neutro: #dfe4ec;
  --su-neutro: #0f172a;      /* 14.0:1 */
  --campo: #ffffff;
  --placeholder: #55606f;    /* 6.4:1 */

  /* I cinque stati della visita.
     Fondo scuro + testo bianco: contrasto fra 7.1:1 e 8.7:1. */
  --st-da_visitare: #414c5c;      --st-da_visitare-fg: #ffffff;
  --st-gia_visitato: #1c40b0;     --st-gia_visitato-fg: #ffffff;
  --st-da_ripassare: #8a4200;     --st-da_ripassare-fg: #ffffff;
  --st-non_interessato: #a91419;  --st-non_interessato-fg: #ffffff;
  --st-cliente: #12662f;          --st-cliente-fg: #ffffff;

  /* Colori dei puntini sulla mappa: le mappe restano chiare anche di notte,
     quindi questi NON cambiano con il tema scuro. */
  --mk-da_visitare: #414c5c;
  --mk-gia_visitato: #1c40b0;
  --mk-da_ripassare: #8a4200;
  --mk-non_interessato: #a91419;
  --mk-cliente: #12662f;

  /* Avvisi */
  --info-sf: #dbe6ff;   --info-tx: #16357a;   /* 9.2:1 */
  --att-sf: #ffedc7;    --att-tx: #6b3200;    /* 8.7:1 */
  --err-sf: #ffe0e0;    --err-tx: #8f1116;    /* 7.5:1 */

  /* Misure */
  --tocco: 3.5rem;            /* 56px: area toccabile minima */
  --raggio: 0.875rem;
  --raggio-p: 0.625rem;
  --altezza-nav: 4.75rem;
  --sp-1: 0.375rem;
  --sp-2: 0.625rem;
  --sp-3: 0.875rem;
  --sp-4: 1.25rem;
  --sp-5: 1.75rem;
  --ombra: 0 1px 2px rgba(15, 23, 42, .08);
  --ombra-alta: 0 6px 22px rgba(15, 23, 42, .28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    color-scheme: dark;

    --sfondo: #0a0e17;          /* vero scuro */
    --carta: #161d2b;
    --carta-alt: #1d2534;
    --testo: #f5f7fa;           /* 15.7:1 sulla carta */
    --testo-tenue: #c3ccd9;     /* 10.4:1 sulla carta */
    --bordo: #63708a;           /* 3.4:1 */
    --bordo-tenue: #333d4f;
    --bordo-forte: #8e9bb0;     /* 6.0:1 */

    --accento: #93b8fd;         /* fondo chiaro, testo quasi nero: 9.5:1 */
    --su-accento: #0a1020;
    --accento-testo: #9ec1ff;   /* 9.3:1 sulla carta */
    --accento-velo: #14294f;
    --intestazione: #16203a;
    --su-intestazione: #f5f7fa; /* 15.0:1 */

    --blu: #9ec1ff;
    --blu-scuro: #cfe0ff;
    --blu-chiaro: #14294f;
    --verde: #6ee79b;           /* 10.9:1 sulla carta */
    --arancio: #f0ad4e;         /* 8.7:1 */
    --rosso: #ff9d9d;           /* 8.5:1 */
    --grigio: #b3bfd0;          /* 9.1:1 */

    --neutro: #2b3546;
    --su-neutro: #f5f7fa;       /* 11.5:1 */
    --campo: #0f1521;
    --placeholder: #9aa4b2;     /* 7.2:1 sul campo scuro */

    /* Nel tema scuro gli stati diventano chiari con testo quasi nero:
       si staccano dalla carta (8.4-9.5:1) e restano leggibilissimi. */
    --st-da_visitare: #b3bfd0;      --st-da_visitare-fg: #0a0e17;
    --st-gia_visitato: #93b8fd;     --st-gia_visitato-fg: #0a0e17;
    --st-da_ripassare: #f0ad4e;     --st-da_ripassare-fg: #0a0e17;
    --st-non_interessato: #ff9d9d;  --st-non_interessato-fg: #0a0e17;
    --st-cliente: #5cd98c;          --st-cliente-fg: #0a0e17;

    --info-sf: #12305e;   --info-tx: #cfe0ff;   /* 9.8:1 */
    --att-sf: #3d2a05;    --att-tx: #ffd98a;    /* 10.2:1 */
    --err-sf: #4a1113;    --err-tx: #ffc2c2;    /* 10.0:1 */

    --ombra: 0 1px 2px rgba(0, 0, 0, .55);
    --ombra-alta: 0 6px 22px rgba(0, 0, 0, .7);
  }
}

/* Scelta manuale "Scuro": vale anche se il telefono e' in chiaro. */
:root[data-tema="scuro"] {
    color-scheme: dark;

    --sfondo: #0a0e17;          /* vero scuro */
    --carta: #161d2b;
    --carta-alt: #1d2534;
    --testo: #f5f7fa;           /* 15.7:1 sulla carta */
    --testo-tenue: #c3ccd9;     /* 10.4:1 sulla carta */
    --bordo: #63708a;           /* 3.4:1 */
    --bordo-tenue: #333d4f;
    --bordo-forte: #8e9bb0;     /* 6.0:1 */

    --accento: #93b8fd;         /* fondo chiaro, testo quasi nero: 9.5:1 */
    --su-accento: #0a1020;
    --accento-testo: #9ec1ff;   /* 9.3:1 sulla carta */
    --accento-velo: #14294f;
    --intestazione: #16203a;
    --su-intestazione: #f5f7fa; /* 15.0:1 */

    --blu: #9ec1ff;
    --blu-scuro: #cfe0ff;
    --blu-chiaro: #14294f;
    --verde: #6ee79b;           /* 10.9:1 sulla carta */
    --arancio: #f0ad4e;         /* 8.7:1 */
    --rosso: #ff9d9d;           /* 8.5:1 */
    --grigio: #b3bfd0;          /* 9.1:1 */

    --neutro: #2b3546;
    --su-neutro: #f5f7fa;       /* 11.5:1 */
    --campo: #0f1521;
    --placeholder: #9aa4b2;     /* 7.2:1 sul campo scuro */

    /* Nel tema scuro gli stati diventano chiari con testo quasi nero:
       si staccano dalla carta (8.4-9.5:1) e restano leggibilissimi. */
    --st-da_visitare: #b3bfd0;      --st-da_visitare-fg: #0a0e17;
    --st-gia_visitato: #93b8fd;     --st-gia_visitato-fg: #0a0e17;
    --st-da_ripassare: #f0ad4e;     --st-da_ripassare-fg: #0a0e17;
    --st-non_interessato: #ff9d9d;  --st-non_interessato-fg: #0a0e17;
    --st-cliente: #5cd98c;          --st-cliente-fg: #0a0e17;

    --info-sf: #12305e;   --info-tx: #cfe0ff;   /* 9.8:1 */
    --att-sf: #3d2a05;    --att-tx: #ffd98a;    /* 10.2:1 */
    --err-sf: #4a1113;    --err-tx: #ffc2c2;    /* 10.0:1 */

    --ombra: 0 1px 2px rgba(0, 0, 0, .55);
    --ombra-alta: 0 6px 22px rgba(0, 0, 0, .7);
  }


* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* NIENTE font-size in px qui sopra: il 100% e' la misura scelta dal sistema,
   cosi' "Dimensioni carattere" di Android ingrandisce davvero tutta l'app.
   La voce "Dimensione del testo" in Impostazioni scrive una percentuale
   su questo stesso elemento. */
html {
  font-size: 100%;
}

body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1875rem;      /* 19px */
  line-height: 1.5;
  color: var(--testo);
  background: var(--sfondo);
  overscroll-behavior-y: contain;
  overflow-x: hidden;
  /* Parole lunghissime (indirizzi, siti, GOOGLE_PLACES_API_KEY) vanno a capo
     invece di allargare la pagina e farla scorrere di lato. */
  overflow-wrap: break-word;
}

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

/* ------------------------------- Struttura ------------------------------- */

#app { min-height: 100vh; display: flex; flex-direction: column; }

.intestazione {
  position: sticky; top: 0; z-index: 40;
  background: var(--intestazione); color: var(--su-intestazione);
  padding: env(safe-area-inset-top) var(--sp-3) 0;
  border-bottom: 2px solid rgba(0, 0, 0, .25);
}
.intestazione__riga { display: flex; align-items: center; gap: var(--sp-2); min-height: 3.5rem; }
.intestazione__titolo { font-size: 1.375rem; font-weight: 700; margin: 0; flex: 1; line-height: 1.25; }
.intestazione__sub { font-size: 1rem; margin: 0 0 var(--sp-2); }
.intestazione button {
  background: rgba(255, 255, 255, .18); color: var(--su-intestazione);
  border: 2px solid currentColor; border-radius: var(--raggio-p);
  min-height: var(--tocco); min-width: var(--tocco); padding: 0 var(--sp-3);
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.intestazione button:active { background: rgba(255, 255, 255, .35); }

main {
  flex: 1;
  padding: var(--sp-3) var(--sp-3) calc(var(--altezza-nav) + 2rem + env(safe-area-inset-bottom));
  max-width: 56rem; width: 100%; margin: 0 auto;
}

/* --------------------------------- Nav ----------------------------------- */

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  /* minmax(0, 1fr): con il testo molto ingrandito le cinque caselle restano
     dentro lo schermo invece di allargare la barra e far scorrere la pagina. */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  /* 8px fissi: e' il distacco minimo fra due bersagli. Restano fissi anche
     quando il testo e' ingrandito, cosi' le cinque etichette continuano a
     starci in una riga sola. */
  gap: 8px;
  background: var(--carta);
  border-top: 2px solid var(--bordo);
  padding: 0 0 env(safe-area-inset-bottom);
}
.nav a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.125rem; min-height: var(--altezza-nav); padding: 0.375rem 0;
  text-decoration: none; text-align: center; line-height: 1.15;
  color: var(--testo-tenue);          /* 10.3:1 */
  font-size: 1rem; font-weight: 700;  /* 16px, non piu' 11.5px */
  border-top: 4px solid transparent;
  border-radius: 0 0 var(--raggio-p) var(--raggio-p);
  min-width: 0;
}
.nav a .ic { font-size: 1.75rem; line-height: 1; }
.nav a.attivo {
  color: var(--accento-testo);        /* 9.9:1 sul velo azzurro */
  background: var(--accento-velo);
  border-top-color: var(--accento-testo);
}
.nav .pallino {
  position: absolute; top: 0.25rem; left: 55%;
  background: var(--rosso); color: var(--carta);
  font-size: 1rem; font-weight: 700;
  min-width: 1.625rem; height: 1.625rem; border-radius: 0.875rem;
  display: grid; place-items: center; padding: 0 0.3125rem;
  border: 2px solid var(--carta);
}

/* -------------------------------- Elementi ------------------------------- */

.carta {
  background: var(--carta);
  border: 2px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.carta--stretta { padding: var(--sp-3); }

h2 {
  font-size: 1.4375rem;      /* 23px */
  font-weight: 700; line-height: 1.3;
  margin: 0 0 var(--sp-3);
  padding-left: 0.75rem;
  border-left: 0.375rem solid var(--accento-testo);
}
h3 {
  font-size: 1.25rem;        /* 20px, non piu' 16px maiuscoletto */
  font-weight: 700; line-height: 1.3;
  margin: var(--sp-5) 0 var(--sp-2);
  color: var(--testo);
  text-transform: none; letter-spacing: 0;
}
p.aiuto {
  color: var(--testo-tenue);
  font-size: 1.125rem;       /* 18px, non piu' 14px */
  line-height: 1.5;
  margin: var(--sp-1) 0 var(--sp-3);
}

label.campo { display: block; margin-bottom: var(--sp-4); }
label.campo > span {
  display: block; font-weight: 700;
  font-size: 1.0625rem;      /* 17px, non piu' 14px */
  line-height: 1.4;
  margin-bottom: var(--sp-1);
  color: var(--testo);
}

select, input, textarea {
  width: 100%; font: inherit; font-size: 1.1875rem;   /* 19px */
  line-height: 1.4;
  padding: 0.8125rem 0.75rem;
  border: 2px solid var(--bordo-forte);
  border-radius: var(--raggio-p);
  background: var(--campo); color: var(--testo);
  min-height: var(--tocco);
}
::placeholder { color: var(--placeholder); opacity: 1; }
select {
  appearance: none; padding-right: 3rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M6 9.5l6 6 6-6' fill='none' stroke='%234a5568' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 0.75rem center;
  background-size: 1.5rem 1.5rem;
}
textarea { min-height: 6.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--accento-testo); outline-offset: 1px;
  border-color: var(--accento-testo);
}
input[type="checkbox"] {
  width: var(--tocco); height: var(--tocco); min-height: var(--tocco);
  flex: 0 0 auto; margin: 0; padding: 0;
  accent-color: var(--accento-testo);
  border: 0;
}
input[type="file"] { min-height: auto; }
/* I campi spenti dal browser diventano grigio su grigio: qui restano leggibili
   (testo tenue su fondo neutro = 8.9:1) e si capisce lo stesso che sono spenti. */
select:disabled, input:disabled, textarea:disabled {
  opacity: 1;
  color: var(--testo-tenue); -webkit-text-fill-color: var(--testo-tenue);
  background-color: var(--neutro); border-color: var(--bordo);
  border-style: dashed;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: var(--tocco); padding: 0.75rem 1.125rem;
  font: inherit; font-size: 1.1875rem; font-weight: 700; line-height: 1.3;
  text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--raggio-p); cursor: pointer;
  background: var(--accento); color: var(--su-accento);
}
.btn:active { filter: brightness(.88); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--grande { min-height: 4.25rem; font-size: 1.375rem; }
.btn--secondario {
  background: var(--carta); color: var(--accento-testo);
  border-color: var(--accento-testo);
}
.btn--neutro { background: var(--neutro); color: var(--su-neutro); border-color: var(--bordo); }
.btn--verde { background: var(--verde); color: var(--carta); }
.btn--rosso { background: var(--rosso); color: var(--carta); }
.btn--piccolo { min-height: var(--tocco); font-size: 1.0625rem; padding: 0.5rem 0.875rem; width: auto; }

/* Nel tema scuro i fondi semantici sono chiari: il testo sopra deve essere scuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .btn--verde,
  :root:not([data-tema="chiaro"]) .btn--rosso { color: #0a0e17; }
}

/* Scelta manuale "Scuro": vale anche se il telefono e' in chiaro. */
:root[data-tema="scuro"] .btn--verde,
  :root[data-tema="scuro"] .btn--rosso { color: #0a0e17; }


/* Le colonne si adattano: se il testo e' ingrandito i bottoni vanno a capo
   invece di stringersi fino a diventare illeggibili. */
.riga-btn { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-2); }
.riga-btn--3 { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.riga-btn > label.campo { min-width: 0; margin-bottom: 0; }
/* Due menu a tendina affiancati su uno schermo stretto tagliano le parole:
   sotto i 26rem vanno uno sopra l'altro. */
@media (max-width: 26rem) {
  .riga-btn > label.campo { grid-column: 1 / -1; }
}

details > summary {
  min-height: var(--tocco);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.1875rem; font-weight: 700; cursor: pointer;
  padding: 0.75rem 0 !important;
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: '\25BE'; margin-left: auto; font-size: 1.5rem; line-height: 1;
  color: var(--accento-testo);
}
details[open] > summary::after { content: '\25B4'; }

/* --------------------------------- Stati --------------------------------- */
/* Una classe sola porta con se' il colore di fondo e quello del testo.
   Il colore non e' mai l'unico segnale: accanto c'e' sempre l'emoji e la parola. */

.stato--da_visitare     { --sc: var(--st-da_visitare);     --sc-fg: var(--st-da_visitare-fg); }
.stato--gia_visitato    { --sc: var(--st-gia_visitato);    --sc-fg: var(--st-gia_visitato-fg); }
.stato--da_ripassare    { --sc: var(--st-da_ripassare);    --sc-fg: var(--st-da_ripassare-fg); }
.stato--non_interessato { --sc: var(--st-non_interessato); --sc-fg: var(--st-non_interessato-fg); }
.stato--cliente         { --sc: var(--st-cliente);         --sc-fg: var(--st-cliente-fg); }

/* --------------------------------- Liste --------------------------------- */

.elenco { list-style: none; margin: 0; padding: 0; }

.locale {
  background: var(--carta);
  border: 2px solid var(--bordo);
  border-left: 0.75rem solid var(--sc, var(--grigio));
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  display: block; cursor: pointer; position: relative;
}
.locale:active { background: var(--carta-alt); }
.locale__nome {
  font-weight: 700; font-size: 1.25rem; line-height: 1.3;
  margin: 0 0 0.25rem; padding-right: 1.75rem;
}
.locale__meta {
  font-size: 1.0625rem;      /* 17px, non piu' 14px */
  line-height: 1.45;
  color: var(--testo-tenue); margin: 0.125rem 0;
}
.locale__badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 1rem;           /* 16px, non piu' 12px */
  font-weight: 700; line-height: 1.3;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--raggio-p);
  background: var(--sc, var(--grigio)); color: var(--sc-fg, #fff);
  margin-top: var(--sp-2); margin-right: var(--sp-1);
}
.locale__badge--ora { background: var(--testo); color: var(--carta); }
.locale__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.locale__azioni a {
  flex: 1 1 7rem; text-align: center; text-decoration: none;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
  padding: 0.5rem; border-radius: var(--raggio-p);
  background: var(--accento-velo); color: var(--accento-testo);
  border: 2px solid var(--accento-testo);
  min-height: var(--tocco); display: flex; align-items: center; justify-content: center; gap: 0.375rem;
}
.locale__chevron {
  position: absolute; right: 0.625rem; top: 0.75rem;
  color: var(--testo-tenue); font-size: 1.75rem; line-height: 1;
}

/* Pillole: vanno tutte a capo, niente striscia da scorrere di lato. */
.pillole, .pillole--righe {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  overflow: visible; padding: 0 0 var(--sp-2);
}
.pillola {
  flex: 0 1 auto;
  padding: 0.5rem 1rem; border-radius: var(--raggio-p);
  border: 2px solid var(--bordo-forte); background: var(--carta); color: var(--testo);
  font: inherit; font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
  cursor: pointer; min-height: var(--tocco);
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.pillola.attiva {
  background: var(--accento); border-color: var(--accento); color: var(--su-accento);
  box-shadow: inset 0 0 0 2px var(--carta);
}
.pillola--legenda {
  cursor: default;
  background: var(--sc, var(--grigio)); color: var(--sc-fg, #fff);
  border-color: var(--sc, var(--grigio));
}

/* Con il testo molto ingrandito le tre caselle diventano due + una,
   invece di sfondare lo schermo di lato. */
/* Tre colonne fisse: con "auto-fit" andavano a capo appena il testo cresceva,
   e i contatori si mangiavano mezzo schermo prima del primo locale. */
.contatori {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
/* I contatori sono pulsanti veri: portano all'elenco corrispondente. */
.contatore {
  font: inherit; width: 100%; cursor: pointer; -webkit-appearance: none;
  background: var(--carta); border: 2px solid var(--bordo);
  border-radius: var(--raggio-p); padding: 0.5rem 0.25rem;
  text-align: center; box-shadow: var(--ombra); min-width: 0;
}
.contatore b { display: block; font-size: 1.75rem; line-height: 1.15; font-weight: 700; }
.contatore:active { transform: scale(.97); }
.contatore--attivo {
  border-color: var(--blu); background: var(--blu-chiaro);
  box-shadow: inset 0 0 0 1px var(--blu);
}
.contatore span {
  display: block; font-size: 1rem; line-height: 1.25;
  color: var(--testo-tenue); font-weight: 700; overflow-wrap: anywhere;
}

.vuoto { text-align: center; padding: var(--sp-5) var(--sp-4); color: var(--testo-tenue); font-size: 1.1875rem; }
.vuoto .emo { font-size: 3.5rem; display: block; margin-bottom: var(--sp-2); }

/* --------------------------------- Scheda -------------------------------- */
/* Etichetta sopra e valore sotto: a schermo stretto e con il testo ingrandito
   non si schiaccia mai in due colonne strette. */

.dett { display: block; margin: 0; }
.dett dt {
  font-size: 1rem; font-weight: 700; color: var(--testo-tenue);
  line-height: 1.4; padding-top: 0.625rem;
}
.dett dd {
  margin: 0 0 0.625rem; font-size: 1.125rem; line-height: 1.5;
  word-break: break-word; padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--bordo-tenue);
}
.dett dd:last-child { border-bottom: 0; }
.dett a { color: var(--accento-testo); font-weight: 700; }

.stati { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.stato-btn {
  min-height: var(--tocco);
  padding: 0.625rem 0.875rem;
  border-radius: var(--raggio-p);
  border: 2px solid var(--bordo-forte);
  background: var(--carta); color: var(--testo);
  font: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.3;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.stato-btn.attivo {
  background: var(--sc, var(--accento)); color: var(--sc-fg, var(--su-accento));
  border-color: var(--sc, var(--accento));
  box-shadow: inset 0 0 0 2px var(--carta);
}

.storico { list-style: none; margin: 0; padding: 0; }
.storico li {
  border-left: 3px solid var(--bordo); padding: 0 0 var(--sp-4) var(--sp-4);
  position: relative;
}
.storico li::before {
  content: ''; position: absolute; left: -0.5rem; top: 0.375rem;
  width: 0.875rem; height: 0.875rem; border-radius: 50%;
  background: var(--accento-testo); border: 2px solid var(--carta);
}
.storico .quando { font-size: 1rem; color: var(--testo-tenue); font-weight: 700; line-height: 1.4; }
.storico .cosa { font-size: 1.125rem; line-height: 1.45; }

/* --------------------------------- Mappa --------------------------------- */

#mappa {
  height: 58vh; min-height: 20rem;
  border: 2px solid var(--bordo); border-radius: var(--raggio);
  overflow: hidden; margin-bottom: var(--sp-3);
}
.leaflet-popup-content { font-size: 1.0625rem; line-height: 1.5; margin: 1rem 1.25rem; min-width: 12rem; }
.leaflet-popup-content b { font-size: 1.1875rem; }
.leaflet-popup-content-wrapper { border-radius: var(--raggio-p); }
/* La crocetta di chiusura di Leaflet e' minuscola: la portiamo alla misura minima. */
.leaflet-container .leaflet-popup a.leaflet-popup-close-button {
  width: 3.5rem; height: 3.5rem; font-size: 1.75rem; line-height: 3.25rem;
  color: #16357a; padding: 0;
}
.leaflet-popup-content a {
  color: #16357a; font-weight: 700;
  display: inline-block; min-height: 2.75rem; line-height: 2.75rem;
}
.leaflet-popup-content .stato-testo { font-weight: 700; }
/* Comandi zoom di Leaflet: erano 30px, troppo piccoli per essere presi al volo.
   Il foglio di stile di Leaflet viene caricato DOPO il nostro (lo aggiunge
   mappa.js a runtime), quindi a parita' di specificita' vincerebbe lui:
   serve un selettore piu' specifico, non basta ripetere la stessa regola. */
.leaflet-container.leaflet-touch .leaflet-bar a,
.leaflet-container .leaflet-bar a {
  width: 3.5rem; height: 3.5rem; line-height: 3.5rem; font-size: 1.5rem;
}
/* Puntino di stato: cerchio colorato + simbolo bianco, cosi' si distingue
   anche a colpo d'occhio e non solo dal colore. */
.marker-stato {
  width: 2.125rem; height: 2.125rem; border-radius: 50%;
  background: var(--mk, #414c5c);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .55);
  color: #fff; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ------------------------------ Avanzamento ------------------------------ */

.barra {
  height: 0.875rem; background: var(--neutro);
  border: 2px solid var(--bordo); border-radius: 0.5rem;
  overflow: hidden; margin: var(--sp-2) 0;
}
.barra > i { display: block; height: 100%; background: var(--accento); transition: width .25s; }
.log {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1rem; line-height: 1.5;
  background: #0f172a; color: #b9f6d0;   /* 14.6:1 */
  padding: var(--sp-3); border-radius: var(--raggio-p);
  max-height: 15rem; overflow: auto; white-space: pre-wrap;
}

/* --------------------------------- Toast --------------------------------- */

.toast {
  position: fixed; left: var(--sp-3); right: var(--sp-3);
  bottom: calc(var(--altezza-nav) + 1rem + env(safe-area-inset-bottom));
  background: #111827; color: #ffffff;   /* 17.7:1 */
  padding: var(--sp-3) var(--sp-4); border-radius: var(--raggio-p);
  font-size: 1.125rem; font-weight: 700; line-height: 1.45;
  z-index: 100; box-shadow: var(--ombra-alta);
  border: 2px solid rgba(255, 255, 255, .35);
  opacity: 0; transform: translateY(0.875rem); pointer-events: none; transition: .22s;
}
.toast.visibile { opacity: 1; transform: none; }
.toast--errore { background: #8f1116; }
.toast--attesa { background: #16357a; }

/* --------------------------------- Modale -------------------------------- */

.modale-sfondo { position: fixed; inset: 0; background: rgba(10, 14, 23, .7); z-index: 90; display: flex; align-items: flex-end; }
.modale {
  background: var(--carta); color: var(--testo);
  width: 100%; max-height: 92vh; overflow: auto;
  border: 2px solid var(--bordo); border-bottom: 0;
  border-radius: var(--raggio) var(--raggio) 0 0;
  padding: var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom));
}
@media (min-width: 40rem) {
  .modale-sfondo { align-items: center; justify-content: center; }
  .modale { max-width: 35rem; border-radius: var(--raggio); border-bottom: 2px solid var(--bordo); }
  .stati { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------- Avvisi -------------------------------- */

.avviso {
  overflow-wrap: anywhere;
  border-radius: var(--raggio-p);
  border: 2px solid currentColor;
  padding: var(--sp-3) var(--sp-3);
  font-size: 1.125rem; line-height: 1.5;
  margin-bottom: var(--sp-3);
}
.avviso--info { background: var(--info-sf); color: var(--info-tx); }
.avviso--attenzione { background: var(--att-sf); color: var(--att-tx); }
.avviso--errore { background: var(--err-sf); color: var(--err-tx); }
.avviso b { font-weight: 700; }

/* ------------------------------ Righe zona ------------------------------- */

.zona-riga {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 2px solid var(--bordo-tenue);
}
.zona-riga:last-child { border-bottom: 0; }
.zona-riga .nome {
  flex: 1 1 9rem; min-width: 0;
  font-weight: 700; font-size: 1.125rem; line-height: 1.4;
  display: flex; align-items: center; min-height: var(--tocco);
  flex-wrap: wrap; gap: 0 0.375rem;
}
.zona-riga .info {
  font-size: 1rem; color: var(--testo-tenue); font-weight: 400;
  display: block; width: 100%; line-height: 1.45;
}
.zona-riga select { flex: 1 1 100%; width: 100%; min-width: 0; }
.zona-riga .btn { flex: 0 0 auto; }

/* ------------------------------- Spinner --------------------------------- */

.spinner {
  display: inline-block; width: 1.25rem; height: 1.25rem;
  border: 3px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  border-radius: 50%; animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* --------------------------- Schermi piu' larghi -------------------------- */

@media (min-width: 40rem) {
  .contatori { gap: var(--sp-3); }
}