/* Il Borgo in tasca — grafica "Borgo"
   Caricato DOPO app.css solo quando il Comune (o l'anteprima dello staff) sceglie questa grafica.
   Riprende il linguaggio del sito vetrina ilborgointasca.it: notte stellata e oro per barre ed eroi,
   carta crema per le pagine, titoli serif Fraunces, bottoni a pillola dorati, smeraldo per il verde.
   Ha una palette sua: il colore scelto dal Comune non la modifica. */
/* il @font-face di Fraunces sta in app.css, condiviso con il lato visita di tutte le grafiche */

:root{
  --notte:#0a1119; --notte2:#0c1a17; --inchiostro:#221a12;
  --oro:#e3a63b; --oro-chiaro:#f0c069; --oro-scuro:#cf8a1d;
  --smeraldo:#2fbe8f; --smeraldo-scuro:#1f5a4a; --muted-chiaro:#a9b6c6;
  --sfondo:#f7f3ec; --carta:#ffffff; --carta2:#efe8dc; --testo:#221a12; --muted:#6f6152; --bordo:#e4dac9;
  --raggio:20px; --ombra:0 10px 30px rgba(60,40,10,.07);
  --nav-h:78px;
  --display:'Fraunces',Georgia,serif;
  --cielo-notte:radial-gradient(1.4px 1.4px at 12% 22%,#fff 60%,transparent),radial-gradient(1px 1px at 28% 8%,#ffdca8 60%,transparent),radial-gradient(1.6px 1.6px at 41% 31%,#fff 60%,transparent),radial-gradient(1px 1px at 55% 12%,#cfe4ff 60%,transparent),radial-gradient(1.3px 1.3px at 66% 26%,#fff 60%,transparent),radial-gradient(1px 1px at 78% 45%,#ffdca8 60%,transparent),radial-gradient(1.6px 1.6px at 90% 19%,#fff 60%,transparent),radial-gradient(1px 1px at 8% 64%,#cfe4ff 60%,transparent),radial-gradient(1.2px 1.2px at 84% 71%,#fff 60%,transparent);
}
/* palette fissa: vince sul colore del Comune iniettato su :root */
body{--primario:var(--smeraldo-scuro);--primario-scuro:#153f34;--accento:var(--oro);--verde:var(--smeraldo-scuro)}
.tema-visita{--sfondo:#f7f3ec}
.tema-notte{--sfondo:var(--notte);--carta:#121b2a;--testo:#e9eef5;--muted:var(--muted-chiaro);--bordo:#233247;--primario:#f0c069;--primario-scuro:var(--oro-scuro)}
.tema-admin{--sfondo:#f4f1ea}

body{-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.15}
h1{font-size:1.8rem}
h2{font-size:1.25rem}
a{color:var(--smeraldo-scuro)}
.tema-notte a{color:var(--oro-chiaro)}
.section-head a{font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b0620e}

/* barra in alto: la notte del sito vetrina, con l'oro per il nome */
.topbar{background:rgba(10,17,25,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.topbar-brand strong{font-family:var(--display);font-weight:700;letter-spacing:0}
.topbar-brand small{color:var(--oro-chiaro);opacity:1}
.btn-icon{background:rgba(255,255,255,.12)}
.fin-top .btn-icon,.scan-top .btn-icon,.fin-epoche-nav .btn-icon{background:rgba(0,0,0,.45)}

/* barra in basso: pillola notturna flottante, voce attiva in oro.
   La pillola galleggia a 10px dal fondo e la bolla centrale sporge: piu' respiro sotto. */
body{padding-bottom:calc(var(--nav-h) + 36px + env(safe-area-inset-bottom))}
.bottomnav{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:64px;padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(10,17,25,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 34px rgba(10,17,25,.35)}
.bottomnav a,.bottomnav .navbtn{color:var(--muted-chiaro);border-radius:17px;font-weight:600}
.bottomnav a.active,.nav-turista a.active{background:rgba(227,166,59,.14);color:var(--oro-chiaro);font-weight:700}
.bottomnav a.visita{color:var(--muted-chiaro)}
.bottomnav a.visita span:first-child{color:var(--smeraldo)}
/* Chiedi, l'assistente: la bolla d'oro delle azioni, piu' grande delle altre voci e con la scritta in oro.
   L'anello color notte la stacca dalla carta crema (li' l'oro da solo si perde) e la incastona nella barra.
   Alla prima apertura del giorno un alone la presenta: la classe .alone la mette app.js. */
.bottomnav a.nav-chiedi{color:var(--oro-chiaro);font-weight:700}
.bottomnav .nav-chiedi span:first-child{width:52px;height:52px;margin-top:-26px;font-size:1.45rem;color:#20150a;
  background:linear-gradient(135deg,var(--oro-chiaro),var(--oro) 45%,var(--oro-scuro));border:3px solid var(--notte);box-shadow:0 6px 20px rgba(227,166,59,.45)}
.bottomnav .nav-chiedi.active span:first-child{background:linear-gradient(135deg,var(--oro-scuro),#b0620e)}
.bottomnav .nav-chiedi.alone span:first-child{animation:alone 1.7s ease-out .35s 2}
@keyframes alone{
  from{box-shadow:0 0 0 0 rgba(240,192,105,.6),0 6px 20px rgba(227,166,59,.45)}
  to{box-shadow:0 0 0 16px rgba(240,192,105,0),0 6px 20px rgba(227,166,59,.45)}
}
@media (prefers-reduced-motion:reduce){.bottomnav .nav-chiedi.alone span:first-child{animation:none}}
@media(min-width:720px){.bottomnav{left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 20px);max-width:640px;border-radius:22px;border-top:1px solid rgba(255,255,255,.08)}}
.offline-banner{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));left:10px;right:10px;border-radius:12px;background:var(--notte)}

/* card: bianche su carta crema, angoli ampi, ombra calda */
.card,.riga{border-radius:var(--raggio)}
.card-soft{background:var(--carta2);box-shadow:none}
.tema-notte .card-soft{background:rgba(255,255,255,.06)}
.card-link{transition:transform .15s,box-shadow .15s}
.card-link:hover{box-shadow:0 14px 44px rgba(60,40,10,.13)}
.riga-num{background:var(--oro);color:#241708}
.avviso-urgente{border-left-width:5px}

/* eroi: il cielo notturno con le stelle della vetrina */
.hero-visita,.hero-comune{background:var(--cielo-notte),radial-gradient(120% 120% at 75% -10%,#17324a 0%,#0d2033 45%,var(--notte) 80%);color:#fff;border-radius:24px;padding:1.5rem 1.3rem;margin:.6rem 0 1rem}
.hero-comune h1,.hero-visita h1{color:#fff}
.hero-comune p{color:var(--muted-chiaro)}
.hero-stat span{background:rgba(227,166,59,.16);border:1px solid rgba(227,166,59,.35);color:var(--oro-chiaro);padding:.25em .7em;border-radius:999px;font-weight:600;font-size:.8rem}
.hero-notte{background:var(--cielo-notte),linear-gradient(180deg,#0b1626,var(--notte2));border-radius:24px}

/* tessere: icona in riquadro crema; quella "Scopri il borgo" in smeraldo scuro */
.tile{border-radius:var(--raggio);gap:.5rem}
.tile span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.45rem;background:var(--carta2)}
.tema-notte .tile span{background:rgba(255,255,255,.1)}
.tile-visita{background:linear-gradient(135deg,var(--smeraldo-scuro),#153f34);color:#fff}
.tile-visita span{background:rgba(255,255,255,.16)}
.tile small{color:var(--muted)}
.tile-visita small{color:rgba(255,255,255,.8)}

/* numeri del pannello: il serif dei KPI della vetrina */
.stat{border-radius:var(--raggio)}
.stat strong{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--smeraldo-scuro)}
/* i numeri degli eventi (tavole del 22/10/26): il verde dei numeri e l'oro dei bottoni, non i colori di base del pannello */
.gesto b{font-family:var(--display);font-weight:700;color:var(--smeraldo-scuro)}
.linguette a[aria-current]{border-bottom-color:var(--oro)}
.periodo a[aria-current]{background:var(--smeraldo-scuro);border-color:var(--smeraldo-scuro)}
.legenda .l-sito,.grafico-barre .barra-sito,.fonte-barra span{background:var(--smeraldo-scuro);fill:var(--smeraldo-scuro)}
.legenda .l-app,.grafico-barre .barra-app{background:var(--oro);fill:var(--oro)}
.numeri-evento{color:var(--smeraldo-scuro)}
.numeri-evento a{color:#b0620e}
.tema-notte .stat strong{color:var(--oro-chiaro)}
.stat-warn{border-left-color:var(--oro)}

/* badge e chip: pillole; la chip attiva è dorata come i tag della vetrina */
.badge{border-radius:999px;background:var(--carta2);color:#5a4a2e}
.badge-urgente,.badge-emergenza{background:#c0392b;color:#fff}
.chip{border-radius:999px;font-weight:600}
.chip.active{background:var(--oro);border-color:var(--oro);color:#241708}
.evento-data{background:var(--oro);color:#241708;border-radius:14px}
.evento-data .ora{opacity:.75}
.card-rifiuti{border-left-color:var(--smeraldo)}
.giorno-card.oggi{outline-color:var(--oro)}
.giorno-nome small{color:#b0620e}

/* form e bottoni: pillole; il primario è il bottone d'oro della vetrina */
input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea{border-radius:14px;border-color:var(--bordo)}
input:focus,select:focus,textarea:focus{outline:0;border:1px solid var(--oro);box-shadow:0 0 0 4px rgba(227,166,59,.22)}
.btn{border-radius:999px;font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--oro),var(--oro-scuro));color:#20150a;border-color:transparent;box-shadow:0 8px 22px rgba(227,166,59,.35)}
.btn-primary:active{box-shadow:none}
.btn-play{background:linear-gradient(135deg,var(--oro),var(--oro-scuro));color:#20150a}
.foto-drop{border-radius:18px;border-color:#d9c79f;background:#fbf7ef}
.flash{border-radius:14px;font-weight:600}
.switch input:checked+span{background:var(--smeraldo-scuro)}
.flash-success{background:#dff2e7;color:#1f5a4a}

/* POI, viaggio nel tempo, audio */
.poi-ph{background:var(--carta2)}
.audio-player{border-left-color:var(--oro)}
.audio-tappe .tappa-num{background:var(--carta2)}
.audio-tappe button.active{color:#b0620e}
.audio-tappe button.active .tappa-num{background:var(--oro);color:#241708}
.tempo-slider input[type=range]{accent-color:var(--oro)}
.tempo-tacche span.active{color:#b0620e}
.fin-bottom input[type=range]{accent-color:var(--oro)}

/* mappa */
.poi-marker{border-color:var(--smeraldo-scuro)}
.poi-marker.vicino{border-color:var(--oro)}
.poi-marker .num{background:var(--smeraldo-scuro)}
.vicino-toast{background:var(--notte);border:1px solid rgba(227,166,59,.4)}
.vicino-toast a{color:var(--oro-chiaro)}
/* sopra la bolla di Chiedi, che sporge dalla barra */
.mappa-toolbar{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + .9rem)}

/* chat: le bolle della vetrina — l'assistente su carta, l'utente in smeraldo scuro */
.msg{border-radius:18px}
.msg-ai{border-bottom-left-radius:5px}
.msg-user{background:linear-gradient(135deg,var(--smeraldo-scuro),#17453a);border-bottom-right-radius:5px}
.chat-avatar{background:linear-gradient(135deg,var(--smeraldo-scuro),#153f34)}
.ai-box{border-left-color:var(--oro)}

/* cielo stellato */
.cielo-qualita{border-radius:14px}
.card-luna .luna-emoji,.luna-emoji{filter:drop-shadow(0 0 18px rgba(240,220,170,.5))}

/* benvenuto (scelta dell'anima): la notte stellata come sipario */
.benvenuto{background:var(--cielo-notte),radial-gradient(120% 100% at 75% -10%,#17324a 0%,#0d2033 45%,var(--notte) 80%)}
.benv-testa h2{font-family:var(--display)}
.benv-card{border-radius:20px}
.benv-borgo{background:linear-gradient(135deg,var(--smeraldo-scuro),#153f34)}

/* pannelli in-app, barre di servizio */
.sheet{border-radius:24px 24px 0 0}
@media(min-width:720px){.sheet{border-radius:24px}}
.sheet-nav a.attivo{outline-color:var(--oro)}
.anteprima-tema{background:var(--notte);border:1px solid rgba(227,166,59,.4);border-radius:12px}
.anteprima-tema a{color:var(--oro-chiaro)}
.attesa-spinner{border-top-color:var(--oro)}

/* selettore della grafica nelle impostazioni */
.tema-scelta{border-radius:18px}
.tema-scelta:has(input:checked){border-color:var(--oro);box-shadow:0 0 0 3px rgba(227,166,59,.3)}

/* stemma */
.brand-icon:has(img){background:#fff;border-radius:12px;padding:2px}