/* ============================================================
   ADRANO OGGI — tema
   Caricato dopo styles.css, che resta la struttura. Qui c'è solo la
   pelle: colori, forme, tipografia. Un altro Comune può avere il suo
   tema senza toccare una riga di struttura.

   Tre idee, sovrapposte:
   · i colori li dà Adrano — arancia rossa, pistacchio, pietra lavica
   · i titoli in serif, perché la calligrafia dà un'autorevolezza che
     il colore da solo non può dare
   · l'urgenza diventa incandescente: una scheda nera e accesa in mezzo
     alle altre. Non è decorazione, è la cosa che l'app deve fare meglio
     di tutte — farti capire in un decimo di secondo che stavolta è serio.

   E tutto questo si ribalta da solo al buio, seguendo il telefono.
   ============================================================ */

:root{
  --bg:#fdf6ee;
  --surface:#ffffff;
  --surface-2:#fbf1e6;
  --ink:#241a14;
  --ink-2:#4a3a2e;
  --muted:#6f5d4e;
  --line:#f0e2d2;
  --line-2:#e0cdb7;

  --primary:#c9411f;            /* arancia rossa */
  --primary-dark:#a9330f;
  --primary-soft:#fde8e0;

  --urgente:#b8331a;      --urgente-bg:#fde7e2;   --urgente-line:#f5c3b7;
  --importante:#8f5a0c;   --importante-bg:#fdf0d9; --importante-line:#f0d9a8;
  --info:#356b43;         --info-bg:#e9f4ea;      --info-line:#c2debe;   /* pistacchio */
  --ok:#356b43; --ok-bg:#e9f4ea;

  /* Le categorie dei negozi (06-11): il fondo della testata di chi non ha
     ancora foto e il colore del suo segno. Tinte chiare con l'inchiostro scuro
     della stessa famiglia: il testo sopra resta sopra 4,5:1. */
  --cat-alimentari-bg:#fbe9d2;     --cat-alimentari-ink:#7f430c;
  --cat-bar-bg:#fbe2dc;            --cat-bar-ink:#932a1a;
  --cat-abbigliamento-bg:#ece5f7;  --cat-abbigliamento-ink:#56398c;
  --cat-casa-bg:#e3ecf6;           --cat-casa-ink:#2b4f7b;
  --cat-bellezza-bg:#f9e3ee;       --cat-bellezza-ink:#902c5a;
  --cat-tecnologia-bg:#dff0f2;     --cat-tecnologia-ink:#1b5e68;
  --cat-servizi-bg:#e6f2e7;        --cat-servizi-ink:#30603c;
  --cat-altro-bg:#f2ebe2;          --cat-altro-ink:#5a4636;
  /* La lente delle foto a tutto schermo: scura in tutti e due i temi. */
  --lente-fondo:#0b0907; --lente-testo:#f7f2ec; --lente-linea:#5a4c40;

  --r-sm:12px; --r:20px; --r-lg:28px;
  --shadow:0 2px 4px rgba(120,60,30,.05), 0 14px 34px -18px rgba(120,60,30,.38);
  --nav-h:74px;
  --serif:"Bitstream Charter","Charter","Iowan Old Style","Palatino Linotype",Georgia,serif;
}

body{
  background:
    radial-gradient(900px 420px at 100% -140px, #fde3cf 0%, transparent 65%),
    var(--bg);
}

/* ---------------- tipografia ---------------- */
.ob h1, .det h1, .avviso h3, .segn b, .successo h1, .stato-vuoto b, .simile .desc{
  font-family:var(--serif); letter-spacing:-.005em;
}
.ob h1{font-size:2.05rem; line-height:1.16; font-weight:700}
.det h1{font-size:1.62rem; line-height:1.2}
.avviso h3{font-size:1.24rem; font-weight:600; line-height:1.24}
.det .corpo{font-family:var(--serif); font-size:1.06rem; line-height:1.62}
.top .marchio{font-family:var(--serif); font-size:1.2rem; font-weight:700; color:var(--primary); letter-spacing:-.02em}
.sezione-tit{
  font-family:var(--serif); font-style:italic; font-weight:700;
  font-size:1rem; text-transform:none; letter-spacing:0; color:var(--primary-dark);
}
.fonte-box{font-family:var(--serif); font-style:italic}
.fonte-box b{font-family:var(--font); font-style:normal}
.successo .codice{font-family:var(--serif)}

/* ---------------- testata ---------------- */
.top{background:rgba(253,246,238,.9); border-bottom:0; backdrop-filter:blur(14px) saturate(1.4)}
.top .luogo{background:var(--surface); border:0; box-shadow:var(--shadow); color:var(--ink-2); font-weight:600}
.top .luogo svg{color:var(--primary)}

/* ---------------- schede ---------------- */
.avviso, .segn, .simile{
  border:0; border-left:0; border-radius:var(--r-lg); padding:19px 21px;
  box-shadow:var(--shadow); margin-bottom:13px; position:relative;
}
.avviso.g-importante{background:linear-gradient(165deg,#fdf2de,#fff 62%)}
.avviso.g-info{background:linear-gradient(165deg,#eaf5eb,#fff 62%)}
.avviso::after{content:""; position:absolute; right:18px; top:19px; width:9px; height:9px; border-radius:50%}
.avviso.g-importante::after{background:var(--importante); box-shadow:0 0 0 5px rgba(143,90,12,.14)}
.avviso.g-info::after{background:var(--info); box-shadow:0 0 0 5px rgba(53,107,67,.14)}

.chip{border:0; border-radius:100px; font-weight:800; padding:5px 11px}
.g-importante .chip{background:var(--importante); color:#fff}
.g-info .chip{background:var(--info); color:#fff}

/* ---- la brace: l'urgenza si vede da lontano ---- */
.avviso.g-urgente{
  background:linear-gradient(155deg,#2a1410 0%, #180b09 70%);
  color:#fbeae5;
  box-shadow:0 2px 4px rgba(120,30,15,.18), 0 18px 40px -18px rgba(195,52,28,.75);
}
.avviso.g-urgente h3{color:#fff8f5}
.avviso.g-urgente .quando, .avviso.g-urgente .zone, .avviso.g-urgente .categoria{color:#e6c2b6}
.avviso.g-urgente .quando svg, .avviso.g-urgente .zone svg, .avviso.g-urgente .categoria svg{color:#ff8a6b}
.avviso.g-urgente .chip{background:#ff7a5c; color:#2a0d06; box-shadow:0 0 22px 2px rgba(255,106,77,.55)}
.avviso.g-urgente::after{background:#ff8a6b; box-shadow:0 0 0 5px rgba(255,138,107,.22), 0 0 16px 3px rgba(255,106,77,.8)}

.det.g-urgente{
  background:linear-gradient(160deg,#2a1410 0%, #180b09 65%);
  color:#fbeae5; border-top:0;
  box-shadow:0 22px 50px -22px rgba(195,52,28,.7);
}
.det.g-urgente h1{color:#fff8f5}
.det.g-urgente .corpo{color:#eccdc2}
.det.g-urgente .chip{background:#ff7a5c; color:#2a0d06; box-shadow:0 0 22px 2px rgba(255,106,77,.5)}
.det.g-urgente .categoria{color:#e6c2b6}
.det.g-urgente .meta{border-top-color:#542b23}
.det.g-urgente .meta dt{color:#c49a8c}
.det.g-urgente .meta dd{color:#fbeae5}
.det.g-urgente .fonte-box{background:#1f100d; border-color:#542b23; color:#eccdc2}
.det.g-urgente .fonte-box b{color:#c49a8c}
.det.g-urgente .btn-2{background:#2e1712; color:#ffa992; box-shadow:none; border:1px solid #542b23}

/* ---------------- controlli ---------------- */
.btn{
  border-radius:100px; font-weight:750; min-height:58px;
  background:linear-gradient(180deg,var(--primary),var(--primary-dark));
  box-shadow:0 12px 26px -12px rgba(201,65,31,.75);
}
.btn:hover{background:linear-gradient(180deg,#b8380f,#8f2a0a)}
.btn-2{background:var(--surface); color:var(--primary-dark); border:0; box-shadow:var(--shadow)}
.btn-back{color:var(--primary-dark)}
/* Il secondario deve SEMBRARE secondario. Senza azzerare sfondo e ombra si
   portava dietro il gradiente e l'ombra di .btn: due pulsanti principali uno
   sopra l'altro, e il testo scuro sul rosso stava a 2,84:1 — sotto il minimo.
   La differenza si vedeva proprio nella prima schermata che incontra un
   cittadino, quella del permesso notifiche. */
.btn-3{
  background:none; box-shadow:none; border-radius:100px;
  color:var(--primary-dark); font-weight:600;
}
.btn-3:hover{background:var(--surface-2); color:var(--primary-dark)}

.nav.mobile-solo{
  left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--surface); border:0; border-radius:26px; padding-bottom:0;
  box-shadow:0 10px 34px -12px rgba(120,60,30,.4);
}
.nav a{color:var(--muted); font-weight:600; position:relative; z-index:1}
.nav a[aria-current="page"]{color:var(--primary-dark)}
.nav.mobile-solo a[aria-current="page"]::before{
  content:""; position:absolute; inset:9px 8px; background:var(--primary-soft);
  border-radius:18px; z-index:-1;
}
main{padding-bottom:calc(var(--nav-h) + 34px)}

/* ---------------- superfici ---------------- */
.stato-vuoto{background:var(--surface); border:0; box-shadow:var(--shadow); border-radius:var(--r-lg)}
.rifiuti-oggi{border:0; box-shadow:var(--shadow); border-radius:var(--r-lg); background:linear-gradient(165deg,#e6f3e8,#fff 70%)}
.gruppo{border:0; box-shadow:var(--shadow); border-radius:var(--r-lg)}
.cat{border:0; box-shadow:var(--shadow); border-radius:var(--r)}
.cat[aria-pressed="true"]{background:var(--primary-soft); color:var(--primary-dark); box-shadow:0 0 0 2px var(--primary) inset}
.campo input, textarea, #via-man{border:0; box-shadow:var(--shadow); background:var(--surface); border-radius:var(--r)}
.foto-scatta{border:2px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2)}
table.cal{border:0; box-shadow:var(--shadow); border-radius:var(--r-lg); overflow:hidden}
.det{border:0; box-shadow:var(--shadow); border-radius:var(--r-lg)}
.zone-lista button{border:0; box-shadow:var(--shadow); background:var(--surface); border-radius:var(--r)}
.zone-lista button[aria-pressed="true"]{background:var(--primary-soft); box-shadow:0 0 0 2px var(--primary) inset}
.ob-steps span.on{background:var(--primary)}
.punti svg{color:var(--primary)}
.successo svg{color:var(--info)}
.successo .codice{border:0; box-shadow:var(--shadow); border-radius:100px}
fieldset.passo legend .n{background:var(--primary)}

/* ============================================================
   AL BUIO
   Di giorno resta chiaro e leggibile al sole; di notte diventa lava.

   Non è più agganciato direttamente all'impostazione del telefono: si
   attiva sull'attributo data-tema, che un pezzetto di codice nella testata
   mette a "scuro" o "chiaro" prima ancora che la pagina venga disegnata.
   Così la persona può scegliere — automatico, chiaro o scuro — e la scelta
   vale anche quando è diversa da quella di sistema. Il vantaggio di
   risolverlo in JavaScript e non con due blocchi di CSS è che le regole
   restano scritte una volta sola: due copie prima o poi divergono, e la
   copia scura è quella che nessuno guarda.
   ============================================================ */

:root[data-tema="scuro"]{
  --bg:#0e0c0b; --surface:#1a1613; --surface-2:#221d19;
  --ink:#f7f2ec; --ink-2:#d3cabe; --muted:#a19485;
  --line:#2c251f; --line-2:#3d332b;
  --primary:#ffa25a; --primary-dark:#ff8a35; --primary-soft:#2f2116;
  --campo-fuoco:#241d18;   /* il campo si schiarisce, non diventa bianco */
  --urgente:#ff8467; --urgente-bg:#2a1512; --urgente-line:#5c2a20;
  --importante:#ffc478; --importante-bg:#2a1f10; --importante-line:#5a4220;
  --info:#8fd0a4; --info-bg:#12241a; --info-line:#25412f;
  --ok:#8fd0a4; --ok-bg:#12241a;
  --cat-alimentari-bg:#2a1f13;     --cat-alimentari-ink:#ffc68c;
  --cat-bar-bg:#2c1714;            --cat-bar-ink:#ffa595;
  --cat-abbigliamento-bg:#211b2e;  --cat-abbigliamento-ink:#cdb9f6;
  --cat-casa-bg:#15202c;           --cat-casa-ink:#a3c6f0;
  --cat-bellezza-bg:#2a1620;       --cat-bellezza-ink:#f6a8cb;
  --cat-tecnologia-bg:#112529;     --cat-tecnologia-ink:#92d8e2;
  --cat-servizi-bg:#12241a;        --cat-servizi-ink:#8fd0a4;
  --cat-altro-bg:#231d17;          --cat-altro-ink:#dccab6;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -18px rgba(0,0,0,.95);
}
:root[data-tema="scuro"] body{background:radial-gradient(1100px 600px at 50% -180px,#241a12 0%,transparent 70%),var(--bg)}

:root[data-tema="scuro"] .top{background:rgba(14,12,11,.75)}
:root[data-tema="scuro"] .top .luogo{background:var(--surface-2); color:var(--ink-2); box-shadow:none; border:1px solid var(--line-2)}

:root[data-tema="scuro"] .avviso.g-importante{background:linear-gradient(165deg,#2a1f10,#1a1613 62%)}
:root[data-tema="scuro"] .avviso.g-info{background:linear-gradient(165deg,#12241a,#1a1613 62%)}
/* Al buio la brace non può essere "più scura": diventa più accesa. */
:root[data-tema="scuro"] .avviso.g-urgente, :root[data-tema="scuro"] .det.g-urgente{
  background:linear-gradient(155deg,#3d1c15 0%, #22100c 72%);
  border:1px solid #6b3225;
  box-shadow:0 0 0 1px rgba(255,122,92,.18), 0 20px 44px -18px rgba(255,106,77,.5);
}
:root[data-tema="scuro"] .g-importante .chip{background:var(--importante); color:#2a1c06}
:root[data-tema="scuro"] .g-info .chip{background:var(--info); color:#0b1a10}
:root[data-tema="scuro"] .avviso.g-urgente .chip, :root[data-tema="scuro"] .det.g-urgente .chip{background:#ff8467; color:#2a0d06}

:root[data-tema="scuro"] .btn{background:linear-gradient(180deg,#ffb072,var(--primary-dark)); color:#2a1404}
:root[data-tema="scuro"] .btn:hover{background:linear-gradient(180deg,#ffbd8a,#ff9440)}
:root[data-tema="scuro"] .btn-2, :root[data-tema="scuro"] .gruppo,
:root[data-tema="scuro"] .cat, :root[data-tema="scuro"] .campo input,
:root[data-tema="scuro"] textarea, :root[data-tema="scuro"] #via-man,
:root[data-tema="scuro"] table.cal, :root[data-tema="scuro"] .zone-lista button,
:root[data-tema="scuro"] .stato-vuoto, :root[data-tema="scuro"] .det,
:root[data-tema="scuro"] .nav.mobile-solo, :root[data-tema="scuro"] .segn,
:root[data-tema="scuro"] .simile{
  background:var(--surface); color:var(--ink);
}
:root[data-tema="scuro"] .btn-2{color:var(--primary)}
:root[data-tema="scuro"] .btn-3{background:none; box-shadow:none; color:var(--ink)}
:root[data-tema="scuro"] .btn-3:hover{background:var(--surface-2); color:var(--ink)}
:root[data-tema="scuro"] .rifiuti-oggi{background:linear-gradient(165deg,#12241a,#1a1613 70%); border-color:#25412f}
:root[data-tema="scuro"] .foto-scatta{background:var(--surface-2); border-color:var(--line-2)}
:root[data-tema="scuro"] .nav.mobile-solo a[aria-current="page"]::before{background:var(--primary-soft)}
:root[data-tema="scuro"] table.cal th{background:var(--surface-2)}
:root[data-tema="scuro"] table.cal tr.oggi td{background:var(--ok-bg)}
:root[data-tema="scuro"] .toast{background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink)}
:root[data-tema="scuro"] .cat[aria-pressed="true"]{background:var(--primary-soft)}
:root[data-tema="scuro"] .det.g-urgente .fonte-box{background:#2a140f; border-color:#6b3225}


/* ============ TABLET E COMPUTER (D2694) ============
   Da 768 px (e almeno 560 di altezza) compare il menu laterale invece della
   barra in basso, e il contenuto sta in una colonna centrata, piu' larga su
   schermo grande. Tasti e gruppi di interruttori non si stirano a tutta
   larghezza: l'interruttore resta vicino alla sua etichetta. */
@media (min-width:768px) and (min-height:560px){
  main{margin:0 auto; max-width:760px}
  main .btn{width:auto; min-width:220px; max-width:420px}
  main .gruppo{max-width:640px}
}
@media (min-width:1200px) and (min-height:560px){
  main{max-width:960px}
}

/* ============ TASTI PICCOLI DEI RIQUADRI (D2696) ============
   «Come si fa», «Installa», «Attiva», «Non ora» non avevano uno stile:
   uscivano con l'aspetto di serie del browser e alti ~33 px. */
.mini{
  font:inherit; font-size:.92rem; font-weight:600; min-height:44px; padding:0 18px;
  border-radius:var(--r-sm); border:1.5px solid var(--line-2); background:var(--surface);
  color:var(--primary-dark); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.mini svg{width:18px;height:18px}
.mini.forte{background:var(--primary); border-color:var(--primary); color:#fff}
:root[data-tema="scuro"] .mini.forte{color:#2a1404}
.mini:hover{filter:brightness(.97)}

/* ============ TASTI SPENTI CHE SPIEGANO (D2697) ============ */
.manca{color:var(--ink-2); font-size:.92rem; margin:0 0 10px; min-height:1.3em}
.manca:empty{display:none}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---- D2698: il messaggio della posizione non va a pezzi a 320 px ---- */
.pos-negata > div{min-width:0}
.pos-negata span{display:block; overflow-wrap:anywhere}

/* ============ PROFILO (D2699, D2706) ============ */
.sw span{box-shadow:inset 0 0 0 2px var(--muted)}          /* spento: si vede il bordo */
.sw input:checked + span{box-shadow:none}
.tipo-notifica.spenta{opacity:.55}
.riga .val.sempre{font-size:.85rem; font-weight:650; color:var(--primary-dark)}
.riga .val .mini{pointer-events:none}
.riga.pericolo{border:1.5px solid var(--urgente); border-radius:var(--r)}
.riga.pericolo .val svg{transform:none; color:var(--urgente)}
#r-ripara .val svg{transform:none}
#promemoria-ora-riga{flex-wrap:wrap; gap:10px}
#promemoria-ora-riga .tema-scelta{width:100%; display:flex; gap:8px}
#promemoria-ora-riga .tema-scelta button{flex:1; min-height:44px}
#promemoria-ora-riga .tema-scelta button:disabled{opacity:.5}
details.altre-zone > summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--primary-dark)}
.diagnosi .versione{color:var(--muted); font-size:.85rem}

/* ============ RIFIUTI (D2707) ============ */
.data-oggi{margin:-4px 0 14px; color:var(--ink-2); font-weight:600}
.cal .gg{white-space:nowrap}
.cal-eti{white-space:nowrap}
@media (max-width:440px){
  .sera-stretta{font-size:.95rem; color:var(--ink-2); font-weight:560}
}

/* ============ BENVENUTO (D2708) ============ */
.ob-body{padding-bottom:150px}                       /* il tasto in basso non copre piu' le voci */
.ob-passo{display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.9rem; margin:-14px 0 18px}
.ob-foot .btn + .btn{margin-top:12px}
.ob-foot .manca{text-align:center; margin:8px 0 0}
.zone-lista button[aria-pressed="true"]{border-color:var(--primary); background:var(--primary-soft); box-shadow:inset 0 0 0 1.5px var(--primary)}
.zone-lista button svg{opacity:0}
.zone-lista button[aria-pressed="true"] svg{opacity:1; color:var(--primary)}

/* ============ SALUTE (D2704) ============
   «oggi», «domani» e «Di turno adesso» non sono un allarme: niente rosso. */
.riga .val.aperta{color:var(--ok); background:var(--ok-bg); padding:6px 12px; border-radius:100px; font-weight:650}
.cal-eti{color:var(--ink-2)}
.riga .val.senza-numero{font-size:.85rem; font-weight:500; color:var(--muted)}

/* ============ ETICHETTE E ARCHIVIO (D2700, D2701) ============
   Niente maiuscolo spaziato; schede concluse sobrie, titoli non barrati. */
.sezione-tit, table.cal th, .zone-lista .tipo, .fonte-box b, .segn .stato, .s-cima .stato, .ra-et,
.avviso .chip, .doc th, .doc dt{text-transform:none; letter-spacing:0}
.sezione-tit{font-size:.95rem; color:var(--ink-2)}
.avviso.concluso, .avviso.annullato{background:var(--surface); box-shadow:none; border-color:var(--line-2)}
.avviso.concluso .chip, .avviso.annullato .chip{background:var(--surface-2); color:var(--ink-2)}
.avviso.annullato h3, .avviso.concluso h3{text-decoration:none}
.filtri{padding-left:18px; padding-right:18px; scroll-padding:0 18px}
.filtri button{min-height:44px}