/* CityForYou Segnalatori - stile del portale (grigio ardesia + turchese), mobile first */
:root{
  --ardesia:#37474f; --ardesia-scuro:#263238; --turchese:#00bfbf; --turchese-scuro:#00898f;
  --sfondo:#f1f3f3; --carta:#fff; --bordo:#d3dadc; --testo:#37474f; --tenue:#78909c;
  --ok:#2e7d32; --warn:#ef6c00; --ko:#c62828; --blu:#1565c0;
  --ombra:0 2px 10px rgba(38,50,56,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--sfondo);color:var(--testo);font-family:Tahoma,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55}
a{color:var(--turchese-scuro)}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:1.6rem}h2{font-size:1.25rem}h3{font-size:1.05rem}
img{max-width:100%}

/* struttura */
.barra{background:var(--ardesia);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.barra .marchio{font-weight:bold;font-size:1.05rem;color:#fff;text-decoration:none}
.barra .marchio span{color:var(--turchese)}
.barra nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.barra nav a{color:#cfd8dc;text-decoration:none;padding:6px 10px;border-radius:6px;font-size:.92rem}
.barra nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.barra nav a.attivo{background:var(--turchese);color:#fff}
main{max-width:1060px;margin:0 auto;padding:18px 14px 60px}
.stretto{max-width:680px}
footer.piede{text-align:center;color:var(--tenue);font-size:.82rem;padding:24px 14px 40px}

/* blocchi */
.carta{background:var(--carta);border:1px solid var(--bordo);border-radius:12px;padding:16px;box-shadow:var(--ombra);margin-bottom:16px}
.carta h2:first-child,.carta h3:first-child{margin-top:0}
.griglia{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.numeri{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:16px}
.numero{background:var(--carta);border:1px solid var(--bordo);border-left:5px solid var(--turchese);border-radius:10px;padding:12px 14px}
.numero b{display:block;font-size:1.6rem;line-height:1.1}
.numero span{color:var(--tenue);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.numero.verde{border-left-color:var(--ok)} .numero.giallo{border-left-color:var(--warn)} .numero.blu{border-left-color:var(--blu)}

/* tabelle */
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{padding:9px 8px;border-bottom:1px solid var(--bordo);text-align:left;vertical-align:top}
th{color:var(--tenue);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:0}
.scorri{overflow-x:auto}

/* etichette di stato */
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:bold;white-space:nowrap}
.tag.blu{background:#e3f2fd;color:var(--blu)}
.tag.giallo{background:#fff3e0;color:var(--warn)}
.tag.verde{background:#e8f5e9;color:var(--ok)}
.tag.grigio{background:#eceff1;color:var(--tenue)}

/* form */
label{display:block;font-weight:bold;font-size:.88rem;margin:12px 0 4px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--bordo);border-radius:8px;font:inherit;background:#fff;color:var(--testo)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--turchese);border-color:var(--turchese)}
textarea{min-height:90px;resize:vertical}
.riga{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.aiuto{color:var(--tenue);font-size:.82rem;margin:4px 0 0}
.nascondi{position:absolute;left:-9999px}

/* bottoni */
.btn{display:inline-block;background:var(--turchese);color:#fff;border:0;border-radius:8px;padding:11px 20px;font:inherit;font-weight:bold;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--turchese-scuro);color:#fff}
.btn.scuro{background:var(--ardesia)}
.btn.scuro:hover{background:var(--ardesia-scuro)}
.btn.vuoto{background:transparent;color:var(--ardesia);border:1px solid var(--bordo)}
.btn.vuoto:hover{background:#eceff1;color:var(--ardesia)}
.btn.wa{background:#25d366}
.btn.wa:hover{background:#1da851}
.btn.piccolo{padding:6px 12px;font-size:.85rem}
.btn.largo{display:block;width:100%}
.azioni{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* avvisi */
.avviso{padding:12px 14px;border-radius:10px;margin-bottom:16px;border:1px solid}
.avviso.ok{background:#e8f5e9;border-color:#a5d6a7;color:#1b5e20}
.avviso.ko{background:#ffebee;border-color:#ef9a9a;color:#b71c1c}
.avviso.info{background:#e0f7fa;border-color:#80deea;color:#006064}

/* pagina pubblica */
.eroe{background:linear-gradient(135deg,var(--ardesia),var(--ardesia-scuro));color:#fff;padding:34px 18px;text-align:center}
.eroe h1{font-size:1.75rem;margin-bottom:10px}
.eroe p{max-width:640px;margin:0 auto;color:#cfd8dc}
.eroe .codice{display:inline-block;margin-top:14px;background:rgba(0,191,191,.18);border:1px solid var(--turchese);color:#fff;border-radius:999px;padding:6px 16px;font-size:.9rem}
.elenco{list-style:none;padding:0;margin:0}
.elenco li{padding-left:28px;position:relative;margin-bottom:8px}
.elenco li::before{content:"\2714";position:absolute;left:0;color:var(--turchese);font-weight:bold}
.prezzo{font-size:2rem;font-weight:bold;color:var(--ardesia)}
.prezzo small{display:block;font-size:.85rem;font-weight:normal;color:var(--tenue)}
.passi{counter-reset:p;list-style:none;padding:0;margin:0}
.passi li{counter-increment:p;position:relative;padding-left:46px;margin-bottom:14px}
.passi li::before{content:counter(p);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--turchese);color:#fff;font-weight:bold;display:flex;align-items:center;justify-content:center}
.qrbox{text-align:center;background:#fff;border:1px solid var(--bordo);border-radius:12px;padding:14px}
.qrbox svg{max-width:100%;height:auto}
code.cod{background:#eceff1;padding:2px 8px;border-radius:6px;font-size:.95em;letter-spacing:.06em}