/* cercaXbimbi — stile condiviso
   Palette calda toscana. Bordi marcati, ombre nette, angoli tondi.
   Vivace ma non infantile: la usano i genitori, ma i bambini guardano lo schermo. */

:root{
  --carta:#F2E9D8;
  --carta-scura:#E4D6BC;
  --inchiostro:#2E2A24;
  --inchiostro-tenue:#726A5C;
  --salvia:#6B8F71;
  --senape:#E0A426;
  --terracotta:#C4643C;
  --polvere:#5C7C94;
  --bordo:#2E2A24;
  --raggio:18px;
  --ombra:3px 3px 0 var(--bordo);
  --ombra-alta:5px 5px 0 var(--bordo);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--carta);
  background-image:radial-gradient(circle at 1px 1px,rgba(46,42,36,.07) 1px,transparent 0);
  background-size:14px 14px;
  color:var(--inchiostro);
  font-family:'Outfit',system-ui,sans-serif;
  min-height:100dvh;
  padding:16px 16px calc(100px + env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto;
}
:focus-visible{outline:3px solid var(--polvere);outline-offset:2px}

/* ---- intestazione ---- */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 20px}
.marchio{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo{
  width:44px;height:44px;flex:none;border:2.5px solid var(--bordo);border-radius:14px;
  background:var(--senape);box-shadow:var(--ombra);
  display:grid;place-items:center;font-size:22px;transform:rotate(-4deg)
}
h1{font-family:'Fraunces',serif;font-weight:800;font-size:26px;margin:0;letter-spacing:-.5px;line-height:1}
.sottotitolo{font-size:12px;color:var(--inchiostro-tenue);margin-top:3px;font-weight:500}
.contatore{
  font-family:'Fraunces',serif;font-weight:800;font-size:13px;
  border:2.5px solid var(--bordo);border-radius:999px;background:#fff;
  padding:7px 13px;box-shadow:var(--ombra);white-space:nowrap;text-decoration:none;color:inherit
}

/* ---- scheda ---- */
.scheda{
  background:#fff;border:2.5px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:var(--ombra-alta);padding:18px;margin-bottom:16px
}
.etichetta{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--inchiostro-tenue);margin-bottom:8px
}
input[type=text],textarea{
  width:100%;border:2.5px solid var(--bordo);border-radius:12px;background:var(--carta);
  padding:14px 15px;font:inherit;font-size:17px;color:var(--inchiostro);outline:none
}
input[type=text]:focus,textarea:focus{background:#fff;box-shadow:0 0 0 3px var(--senape)}
textarea{min-height:70px;resize:vertical;font-size:15px}

/* ---- posizione ---- */
.gps{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:2px dashed var(--carta-scura)}
.pallino{width:13px;height:13px;flex:none;border-radius:50%;border:2.5px solid var(--bordo);background:var(--carta-scura)}
.pallino.ok{background:var(--salvia);animation:pulsa 2s infinite}
.pallino.ko{background:var(--terracotta)}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(107,143,113,.6)}50%{box-shadow:0 0 0 7px rgba(107,143,113,0)}}
.gps-testo{font-size:13px;font-weight:500;flex:1}
.gps-coord{font-size:11px;color:var(--inchiostro-tenue);font-variant-numeric:tabular-nums}

.mini{
  border:2.5px solid var(--bordo);border-radius:10px;background:var(--carta);
  padding:7px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--bordo)
}
.mini:active{transform:translate(2px,2px);box-shadow:none}
.mini.larga{width:100%;margin-top:10px;padding:10px}

/* ---- chip ---- */
.griglia{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{
  display:flex;align-items:center;gap:9px;
  border:2.5px solid var(--bordo);border-radius:14px;background:var(--carta);
  padding:14px 12px;cursor:pointer;user-select:none;
  font-size:14px;font-weight:600;line-height:1.15;
  box-shadow:var(--ombra);transition:transform .1s,box-shadow .1s,background .1s
}
.chip .ico{font-size:21px;flex:none}
.chip:active{transform:translate(3px,3px);box-shadow:none}
.chip.on{color:#fff;background:var(--c);box-shadow:var(--ombra)}
.chip.on .ico{transform:scale(1.12)}
.chip[data-c=salvia]{--c:var(--salvia)}
.chip[data-c=senape]{--c:var(--senape)}
.chip[data-c=terracotta]{--c:var(--terracotta)}
.chip[data-c=polvere]{--c:var(--polvere)}
.chip.on[data-c=senape]{color:var(--inchiostro)}

/* ---- barra fissa in basso ---- */
.salva{
  position:fixed;left:0;right:0;bottom:0;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--carta) 65%,rgba(242,233,216,0));
  z-index:10
}
.salva-int{max-width:560px;margin:0 auto}
.btn{
  width:100%;border:3px solid var(--bordo);border-radius:16px;background:var(--salvia);color:#fff;
  padding:18px;font-family:'Fraunces',serif;font-weight:800;font-size:19px;letter-spacing:-.2px;
  cursor:pointer;box-shadow:var(--ombra-alta);text-decoration:none;display:block;text-align:center
}
.btn:active{transform:translate(5px,5px);box-shadow:none}
.btn:disabled{background:var(--carta-scura);color:var(--inchiostro-tenue);cursor:not-allowed;box-shadow:var(--ombra)}
.btn.segnala{background:var(--terracotta)}

/* ---- coda offline ---- */
.riga-coda{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-bottom:2px dashed var(--carta-scura);font-size:14px;font-weight:600
}
.riga-coda:last-child{border-bottom:none}
.attesa{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--terracotta);white-space:nowrap
}

/* ---- risultati della ricerca ---- */
h2{font-family:'Fraunces',serif;font-weight:800;font-size:17px;margin:26px 0 12px;display:flex;align-items:center;gap:9px}
h2 .linea{flex:1;height:2.5px;background:var(--carta-scura);border-radius:2px}

.voce{
  background:#fff;border:2.5px solid var(--bordo);border-radius:14px;box-shadow:var(--ombra);
  padding:14px;margin-bottom:11px
}
.voce-cima{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.voce-nome{font-family:'Fraunces',serif;font-weight:600;font-size:17px;line-height:1.25}
.voce-distanza{
  font-family:'Fraunces',serif;font-weight:800;font-size:12px;flex:none;
  border:2px solid var(--bordo);border-radius:999px;background:var(--carta);
  padding:4px 9px;white-space:nowrap
}
.voce-tag{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}

/* Il consenso emerge, non viene imposto: ogni flag porta con sé quante famiglie
   lo confermano sul totale di chi ha segnalato il locale. */
.tag{
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;
  border:2px solid var(--bordo);color:#fff
}
.tag .conta{
  font-variant-numeric:tabular-nums;font-size:10px;
  background:rgba(255,255,255,.28);border-radius:999px;padding:1px 5px
}
.tag.parziale{opacity:.75}

.voce-note{
  font-size:13px;color:var(--inchiostro-tenue);margin-top:9px;
  font-style:italic;line-height:1.45;
  border-left:3px solid var(--carta-scura);padding-left:9px
}
.voce-azioni{display:flex;gap:7px;margin-top:12px;padding-top:11px;border-top:2px dashed var(--carta-scura)}
.voce-azioni a{
  flex:1;text-align:center;text-decoration:none;
  border:2px solid var(--bordo);border-radius:9px;background:var(--carta);color:var(--inchiostro);
  padding:8px;font-size:12px;font-weight:700
}

/* ---- stati vuoti: un invito ad agire, non un vicolo cieco ---- */
.vuoto{text-align:center;padding:32px 22px;color:var(--inchiostro-tenue);font-size:14px;line-height:1.55}
.vuoto .grande{font-size:38px;display:block;margin-bottom:12px}
.vuoto b{color:var(--inchiostro);font-family:'Fraunces',serif;font-size:16px}

.nota-legale{
  font-size:11px;color:var(--inchiostro-tenue);line-height:1.5;
  text-align:center;padding:0 8px;margin:18px 0 0
}

/* ---- avviso a comparsa ---- */
.avviso{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(96px + env(safe-area-inset-bottom));
  background:var(--inchiostro);color:var(--carta);padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:20;white-space:nowrap;box-shadow:var(--ombra)
}
.avviso.vedi{opacity:1;transform:translateX(-50%) translateY(-6px)}

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