/* ============================================================
   APP USCIERI — foglio di stile
   Pensato per: telefono, una mano sola, luce diurna forte, fretta.
   Regola guida: bersagli grandi, contrasto alto, poche cose a schermo.
============================================================ */

[hidden] { display: none !important; }

:root {
  --sfondo: #eef1f5;
  --carta: #ffffff;

  --testo: #16222e;
  --testo-tenue: #5a6673;

  --bordo: #d5dce4;
  --bordo-forte: #b9c4d0;

  --blu: #0f3f74;
  --blu-chiaro: #e7effa;

  --rosso: #b3261e;
  --rosso-chiaro: #fdecea;
  --ambra: #8a5a00;
  --ambra-chiaro: #fdf1dc;
  --viola: #6f5bc4;
  --verde: #1c6b45;

  --raggio: 14px;
  --barra-altezza: 62px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  /* Blocca il "tira giu' per ricaricare": in mezzo a un'assemblea una
     ricarica involontaria fa sparire la mappa per qualche secondo. */
  overscroll-behavior: none;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  position: fixed;
  inset: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ============================================================
   CONTROLLI DI BASE
============================================================ */
.bottone {
  border: 1px solid var(--bordo);
  background: var(--carta);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  touch-action: manipulation;
  line-height: 1.2;
}
.bottone:active { transform: translateY(1px); }

.bottone--primario {
  background: var(--blu);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

/* Bersaglio pieno: sotto stress, con una mano, il dito non mira */
.bottone--largo {
  display: block;
  width: 100%;
  padding: 16px;
  font-size: 17px;
  margin-top: 8px;
}

.bottone--icona {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
}
.bottone--icona svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.campo {
  width: 100%;
  border: 1px solid var(--bordo);
  background: var(--carta);
  border-radius: 12px;
  padding: 14px;
  outline: none;
}
.campo:focus {
  border-color: var(--blu);
  box-shadow: 0 0 0 4px var(--blu-chiaro);
}
.campo--grande { font-size: 17px; padding: 16px; }
.campo--testo { resize: vertical; font-family: inherit; }

.etichetta {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin: 18px 0 8px;
}

.collegamento {
  border: 0;
  background: none;
  padding: 0 0 0 6px;
  color: var(--blu);
  text-decoration: underline;
  cursor: pointer;
}

.errore { color: var(--rosso); min-height: 1.2em; margin: 10px 0 0; }

.esito { margin: 12px 0 0; font-size: 15px; }
.esito--errore { color: var(--rosso); }
.esito--attesa { color: var(--ambra); }
.esito--fatto { color: var(--verde); font-weight: 600; }

/* ============================================================
   SCHERMATA DEL NOME
============================================================ */
.nome {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.nome__box { width: min(460px, 100%); }
.nome__titolo { font-size: 26px; margin: 0 0 8px; }
.nome__aiuto { color: var(--testo-tenue); margin: 0 0 20px; line-height: 1.5; }

/* ============================================================
   IMPIANTO: viste + barra in basso
============================================================ */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.vista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.vista--scorrevole {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 16px 24px;
}

.testata {
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  padding: 10px 12px;
  flex-shrink: 0;
}
.testata--semplice {
  background: none;
  border: 0;
  padding: 18px 0 4px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.testata__titolo { font-size: 22px; margin: 0; }

/* Barra in basso: e' il punto piu' raggiungibile del telefono */
.barra {
  display: flex;
  background: var(--carta);
  border-top: 1px solid var(--bordo);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.barra__voce {
  flex: 1;
  border: 0;
  background: none;
  padding: 8px 4px 10px;
  min-height: var(--barra-altezza);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--testo-tenue);
  cursor: pointer;
  touch-action: manipulation;
}
.barra__voce svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.barra__voce span { font-size: 12px; }
.barra__voce.is-attiva { color: var(--blu); font-weight: 600; }

/* ============================================================
   MAPPA
============================================================ */
.tabs { display: flex; gap: 5px; }
.tabs__voce {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--bordo);
  background: var(--carta);
  border-radius: 10px;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.tabs__voce[aria-selected="true"] {
  background: var(--blu);
  border-color: var(--blu);
  color: #fff;
}

.mappa {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* grigio: stacca la planimetria bianca e fa capire dove finisce */
  background: var(--sfondo);
  /* Tiene Leaflet (z-index fino a 800) e i tasti dello zoom (900)
     chiusi qui dentro: senza, finivano sopra il velo e sopra la
     scheda del punto, coprendo la X di chiusura e il testo. */
  isolation: isolate;
}

/* Comandi dello zoom: colonna a destra, pollice destro, lontani dal
   bordo inferiore dove ci sono le voci di navigazione */
.zoom {
  position: absolute;
  right: 12px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* sopra la tela di Leaflet, che usa z-index fino a 800 */
  z-index: 900;
}
.zoom__tasto {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: rgba(255,255,255,.94);
  color: var(--testo);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.zoom__tasto:active { transform: translateY(1px); }
.zoom__tasto svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* La tela di Leaflet riempie tutto lo spazio disponibile */
.tela {
  width: 100%;
  height: 100%;
  background: var(--sfondo);
  outline: none;
}
/* Leaflet disegna le planimetrie: senza questo, ingrandendo molto,
   il browser sfuma i pixel e le scritte piccole diventano illeggibili */
.leaflet-image-layer {
  image-rendering: -webkit-optimize-contrast;
}

/* I marcatori. La dimensione arriva da --punto, che l'app aggiorna a
   ogni zoom (vedi dimensionaPunti in app.js). L'elemento di Leaflet
   e' un punto senza dimensioni: il cerchio ci si centra sopra. */
.leaflet-marker-icon.punto {
  width: 0;
  height: 0;
  cursor: pointer;
}
.punto > span {
  position: absolute;
  width: var(--punto, 26px);
  height: var(--punto, 26px);
  left: calc(var(--punto, 26px) / -2);
  top: calc(var(--punto, 26px) / -2);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--blu);
  color: #fff;
  font-size: clamp(12px, calc(var(--punto, 26px) * 0.44), 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  /* anello bianco: il numero resta leggibile anche sulle zone fitte
     della planimetria, fra sedie, frecce e simboli antincendio */
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* I cerchi non ricevono i tocchi: li riceve la mappa, che apre il punto
   col centro piu' vicino al dito (toccoSullaMappa in app.js). Cosi' anche
   i punti piccoli e ravvicinati si prendono al primo colpo. */
.punto > span { pointer-events: none; }
.punto--viola > span { background: var(--viola); }

@keyframes battito {
  0%   { box-shadow: 0 0 0 0 rgba(15,63,116,.85); }
  70%  { box-shadow: 0 0 0 26px rgba(15,63,116,0); }
  100% { box-shadow: 0 0 0 0 rgba(15,63,116,0); }
}
.punto.is-acceso { z-index: 5; }
.punto.is-acceso > span {
  animation: battito 1.1s 4;
  background: #0a2f57;
}

/* ============================================================
   SCHEDA DI DETTAGLIO (sale dal basso)
============================================================ */
.velo {
  position: fixed;
  inset: 0;
  background: rgba(16,24,34,.45);
  z-index: 80;
}

.scheda {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--carta);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -14px 40px rgba(0,0,0,.22);
  max-height: 80vh;
  overflow-y: auto;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.scheda__maniglia {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--bordo-forte);
  margin: 10px auto 0;
}
.scheda__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 8px 18px;
}
.scheda__titolo { font-size: 19px; margin: 0; }
.scheda__corpo { padding: 0 18px; }

.scheda__riga {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--bordo);
}
.scheda__etichetta { font-size: 13px; color: var(--testo-tenue); }
.scheda__valore { font-size: 16px; line-height: 1.45; }
.scheda__vuota { color: var(--testo-tenue); line-height: 1.5; }

body.bloccato { overflow: hidden; }

/* ============================================================
   EMERGENZA
============================================================ */
.contatti { display: grid; gap: 10px; margin-top: 12px; }

/* Blocchi a tutta larghezza: impossibile sbagliare bersaglio.
   Niente menu da aprire: sotto stress un tap in meno conta. */
.contatto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-radius: var(--raggio);
  text-decoration: none;
  color: var(--testo);
  background: var(--carta);
  border: 1px solid var(--bordo);
}
.contatto:active { transform: translateY(1px); }
.contatto__testo { display: flex; flex-direction: column; gap: 3px; }
.contatto__titolo { font-size: 17px; font-weight: 600; }
.contatto__chi { font-size: 14px; color: var(--testo-tenue); }
.contatto__freccia {
  width: 26px; height: 26px;
  flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.contatto--sanitaria { background: var(--rosso-chiaro); border-color: #f3c9c5; }
.contatto--sanitaria .contatto__titolo,
.contatto--sanitaria .contatto__freccia { color: var(--rosso); }

.contatto--altra { background: var(--ambra-chiaro); border-color: #efd9ac; }
.contatto--altra .contatto__titolo,
.contatto--altra .contatto__freccia { color: var(--ambra); }

.contatto--violenza { background: var(--blu-chiaro); border-color: #c3d7f0; }
.contatto--violenza .contatto__titolo,
.contatto--violenza .contatto__freccia { color: var(--blu); }

.nota-piede {
  color: var(--testo-tenue);
  font-size: 14px;
  line-height: 1.5;
  margin: 18px 0 0;
}

/* ============================================================
   SEGNALA
============================================================ */
.modulo { padding-bottom: 8px; }
.modulo__mittente {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--testo-tenue);
}
.modulo__mittente strong { color: var(--testo); }

.pastiglie { display: flex; flex-wrap: wrap; gap: 8px; }
.pastiglia {
  border: 1px solid var(--bordo);
  background: var(--carta);
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
}
.pastiglia.is-scelta {
  background: var(--blu);
  border-color: var(--blu);
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   DESKTOP — l'amministratore guarda da PC
============================================================ */
@media (min-width: 900px) {
  .vista--scorrevole { max-width: 720px; margin: 0 auto; width: 100%; }
  .scheda {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 32px));
    border-radius: var(--raggio);
    max-height: 76vh;
    padding-bottom: 16px;
  }
  .scheda__maniglia { display: none; }
  .barra__voce { flex-direction: row; gap: 8px; }
}