/* public/stile.css (case-a-forli)
   VERSION: 1.5.0
   Novita' 1.5.0 (ramo prova): nel tema scuro scritte grigie e bordi piu' chiari (piu' contrasto: grigio 9,6:1 sul fondo
   delle caselle, bordi che si vedono).
   Novita' 1.4.0 (ramo prova): contrasti a norma WCAG AA. Il verde usato come testo nel tema chiaro piu' scuro
   (#0b7a4c, 5,4:1 sul bianco); --accent-testo per le scritte viola piccole su fondo viola chiaro (6,2:1 nel tema scuro).
   Novita' 1.3.0 (ramo prova): viola e verde menta insieme, come nei loghi «da marketer»: fondo blu notte nel tema
   scuro, il viola per i pulsanti e i link, il verde (--acido) per i cursori, le schede scelte e le cose funky; il
   viola nel tema chiaro piu' acceso, il verde un po' piu' scuro perche' si legga sul bianco.
   Novita' 1.2.0 (ramo prova): «Case Funky», viola e verde acido. Il viola e' il colore del sito (pulsanti, puntini,
   link); il verde acido (--acido) segna le cose funky accese: i filtri funky scelti, i numeri sui pulsanti, le novita'.
   Novita' 1.1.0 (ramo prova): il verde bosco al posto del blu, fondo caldo e neutri verdi; nel tema scuro un verde salvia.
   Lo stile comune delle pagine del sito (mappa, agenzie, uso, importa, porta): la palette (chiara o scura secondo
   il telefono o il computer), la tipografia, i raggi, le ombre, la barra in alto, i pulsanti, le pillole, il focus
   e la pillola «Un progetto darioricci.com» in basso a destra. Ogni pagina aggiunge solo quello che e' suo. */
:root{
  --bg:#f5f5fd;--card:#ffffff;--ink:#16173d;--muted:#5d6190;--rule:#dfe0f3;--accent:#5b3df5;--accent-ink:#ffffff;
  --acido:#1fbf7d;--acido-ink:#04291a;--verde:#0b7a4c;--accent-testo:#5b3df5;
  --sel:#ebe8ff;--ok:#2e7d32;--okbg:#e3f2e3;--err:#a33;--errbg:#fbe9e7;
  --r:10px;--r-s:7px;--ombra:0 1px 2px rgba(30,25,15,.06),0 2px 10px rgba(30,25,15,.05);--ombra-su:0 8px 28px rgba(0,0,0,.16);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0e0f30;--card:#17194a;--ink:#eef0ff;--muted:#c5c8f2;--rule:#41468f;--accent:#8c6dff;--accent-ink:#0e0f30;--accent-testo:#b4a2ff;
    --acido:#5ff0a8;--acido-ink:#05291b;--verde:#5ff0a8;
    --sel:#24276a;--ok:#8fd694;--okbg:#1d321e;--err:#e59a9a;--errbg:#3a1d1b;--ombra:0 1px 2px rgba(0,0,0,.4);--ombra-su:0 10px 30px rgba(0,0,0,.55);color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#0e0f30;--card:#17194a;--ink:#eef0ff;--muted:#c5c8f2;--rule:#41468f;--accent:#8c6dff;--accent-ink:#0e0f30;--accent-testo:#b4a2ff;
  --acido:#5ff0a8;--acido-ink:#05291b;--verde:#5ff0a8;
  --sel:#24276a;--ok:#8fd694;--okbg:#1d321e;--err:#e59a9a;--errbg:#3a1d1b;--ombra:0 1px 2px rgba(0,0,0,.4);--ombra-su:0 10px 30px rgba(0,0,0,.55);color-scheme:dark}

[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.45;background:var(--bg);color:var(--ink);overflow-x:hidden}
a{color:var(--accent);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
button,input,select,textarea{font:inherit;color:inherit}

/* la barra in alto: titolo, una riga discreta, i link; a destra chi e' entrato (chi-entrato.js) */
.barra{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--rule)}
.barra h1{font-size:1.08rem;font-weight:650;margin:0;letter-spacing:-.01em;white-space:nowrap}
.barra .sotto{font-size:.8rem}
.barra a.sotto{color:var(--muted);text-decoration:none}
.barra a.sotto:hover{color:var(--accent);text-decoration:underline}
.chi-entrato{margin-left:auto;font-size:.82rem!important;color:var(--muted);opacity:1!important}
.chi-entrato a{color:var(--muted)}
.chi-entrato a:hover{color:var(--accent)}
.sotto{font-size:.85rem;color:var(--muted)}

/* pulsanti e pillole */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;padding:6px 13px;border:1px solid var(--rule);border-radius:99px;background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;line-height:1.3}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pieno{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pieno:hover{filter:brightness(1.08);color:var(--accent-ink)}
.btn:disabled{opacity:.55;cursor:default}

/* la firma: sempre in basso a destra, piccola, sopra a tutto ma senza coprire i controlli (le pagine lasciano spazio) */
.firma-pill{position:fixed;right:10px;bottom:10px;z-index:1200;font-size:11px;line-height:1.2;color:var(--muted);background:var(--card);border:1px solid var(--rule);border-radius:99px;padding:4px 10px;text-decoration:none;box-shadow:var(--ombra);opacity:.95;white-space:nowrap}
.firma-pill:hover{opacity:1;color:var(--ink)}
.firma-pill b{font-weight:600;color:var(--ink)}
@media (max-width:600px){.firma-pill{right:8px;bottom:8px;font-size:10.5px;padding:3px 9px}}