/* ============================================================
   Codex — Tema "Moderno" (galleria calda, oro misurato)
   Design system della nuova UI: token, base, componenti.
   Palette chiara: avorio #f7f4ee · inchiostro #1d1a14 · oro #a67c1b · verderame #3d6b5e
   Palette scura:  fondo #171410 · superficie #211d17 · avorio #ece5d6 · oro #d3a648
   ============================================================ */

/* ====== TOKEN ====== */
:root{
  --fondo:#f7f4ee; --superficie:#fffdf9; --bordo:#e4dccb;
  --testo:#1d1a14; --testo-2:#6b6353;
  --oro:#a67c1b; --oro-chiaro:#d9b85c; --oro-t:rgba(166,124,27,.12);
  /* colore del testo SOPRA l'oro: nel tema scuro l'oro e' chiaro e il bianco
     sopra scende a 2,3:1 di contrasto — serve inchiostro, non bianco */
  --su-oro:#fff;
  --verde:#3d6b5e; --rosso:#b0472f;
  --ombra:0 1px 2px rgba(29,26,20,.05),0 12px 32px -12px rgba(29,26,20,.14);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --raggio:12px; --raggio-lg:16px;
  --transizione:.18s ease;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --fondo:#171410; --superficie:#211d17; --bordo:#383226;
  --testo:#ece5d6; --testo-2:#a89c85;
  --oro:#d3a648; --oro-chiaro:#e6c675; --oro-t:rgba(211,166,72,.14);
  --su-oro:#1d1a14;
  --verde:#7fb3a2; --rosso:#d4795f;
  --ombra:0 1px 2px rgba(0,0,0,.4),0 14px 34px -12px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --fondo:#171410; --superficie:#211d17; --bordo:#383226;
  --testo:#ece5d6; --testo-2:#a89c85;
  --oro:#d3a648; --oro-chiaro:#e6c675; --oro-t:rgba(211,166,72,.14);
  --su-oro:#1d1a14;
  --verde:#7fb3a2; --rosso:#d4795f;
  --ombra:0 1px 2px rgba(0,0,0,.4),0 14px 34px -12px rgba(0,0,0,.5);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --fondo:#f7f4ee; --superficie:#fffdf9; --bordo:#e4dccb;
  --testo:#1d1a14; --testo-2:#6b6353;
  --oro:#a67c1b; --oro-chiaro:#d9b85c; --oro-t:rgba(166,124,27,.12);
  --su-oro:#fff;
  --verde:#3d6b5e; --rosso:#b0472f;
  --ombra:0 1px 2px rgba(29,26,20,.05),0 12px 32px -12px rgba(29,26,20,.14);
  color-scheme:light;
}

/* ====== BASE ====== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo);color:var(--testo);
  font-family:var(--sans);font-size:15.5px;line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;width:100%}
.wrap-stretto{max-width:520px;margin:0 auto;padding:0 24px;width:100%}

h1,h2,h3{margin:0}
h1,h2{font-family:var(--serif);font-weight:400}
p{margin:0 0 .6em}
a{color:var(--oro);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
::selection{background:var(--oro-t)}

/* Titoli di pagina */
.titolo-pagina{font-size:clamp(28px,4vw,38px);line-height:1.15;margin:34px 0 8px;text-wrap:balance}
.sottotitolo{color:var(--testo-2);font-size:16px;max-width:60ch;margin-bottom:26px}
.occhiello{
  font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--oro);
  font-weight:600;margin:0 0 14px;
}

/* ====== HEADER / NAV ====== */
.sito-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--fondo) 82%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bordo);
}
.sito-header .wrap{display:flex;align-items:center;gap:26px;padding:14px 24px}
.logo{
  font-family:var(--serif);font-size:23px;letter-spacing:.5px;color:var(--testo);
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.logo:hover{text-decoration:none}
.logo i{
  width:26px;height:17px;border-radius:3px;display:inline-block;
  background:linear-gradient(135deg,var(--oro),var(--oro-chiaro));
  clip-path:polygon(0 0,100% 0,100% 100%,18% 100%,0 60%);
}
.nav-principale{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav-principale a{color:var(--testo-2);font-size:14.5px;transition:color var(--transizione)}
.nav-principale a:hover{color:var(--testo);text-decoration:none}
.nav-principale a.attiva{color:var(--testo);box-shadow:0 2px 0 var(--oro)}

/* Avatar + menu utente */
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--oro-t);color:var(--oro);
  display:grid;place-items:center;font-weight:600;font-size:14px;border:1px solid var(--oro);
  cursor:pointer;flex:none;
}
.menu-utente{position:relative}
.menu-utente>button{background:none;border:none;padding:0;cursor:pointer}
.tendina{
  position:absolute;right:0;top:calc(100% + 10px);min-width:210px;
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:var(--ombra);padding:8px;display:none;z-index:101;
}
.tendina.aperta{display:block}
.tendina a,.tendina button{
  display:block;width:100%;text-align:left;padding:8px 12px;border-radius:8px;
  color:var(--testo);font-size:14px;background:none;border:none;cursor:pointer;
  font-family:inherit;
}
.tendina a:hover,.tendina button:hover{background:var(--oro-t);text-decoration:none}
.tendina hr{border:none;border-top:1px solid var(--bordo);margin:6px 4px}
.tendina .voce-muta{color:var(--testo-2);font-size:12px;padding:4px 12px}

/* Toggle tema */
.tema-toggle{
  background:none;border:1px solid var(--bordo);border-radius:99px;cursor:pointer;
  width:34px;height:34px;display:grid;place-items:center;color:var(--testo-2);
  font-size:15px;transition:color var(--transizione),border-color var(--transizione);flex:none;
}
.tema-toggle:hover{color:var(--oro);border-color:var(--oro)}

/* Hamburger mobile */
.nav-burger{
  display:none;background:none;border:1px solid var(--bordo);border-radius:8px;
  cursor:pointer;padding:6px 9px;color:var(--testo);font-size:17px;line-height:1;
}

/* ====== BOTTONI ====== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--raggio);padding:12px 24px;font-size:15px;font-weight:600;
  background:var(--testo);color:var(--fondo);cursor:pointer;font-family:inherit;
  transition:opacity var(--transizione);text-decoration:none;
}
.btn:hover{opacity:.85;text-decoration:none;color:var(--fondo)}
.btn:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-oro{background:var(--oro);color:var(--su-oro,#fff)}
.btn-oro:hover{color:var(--su-oro,#fff)}
.btn-contorno{
  background:none;border:1px solid var(--bordo);color:var(--testo);
}
.btn-contorno:hover{opacity:1;border-color:var(--oro);color:var(--oro)}
.btn-piccolo{padding:8px 16px;font-size:13.5px;border-radius:10px}
.btn-blocco{width:100%}
.btn-pericolo{background:var(--rosso);color:var(--su-oro,#fff)}
.btn-pericolo:hover{color:var(--su-oro,#fff)}

/* ====== FORM ====== */
.campo{margin-bottom:18px}
.campo label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.campo .aiuto{font-size:12.5px;color:var(--testo-2);margin-top:5px}
input[type="text"],input[type="search"],input[type="email"],input[type="password"],
input[type="number"],input[type="date"],select,textarea{
  width:100%;padding:11px 14px;font-size:15px;font-family:inherit;
  background:var(--superficie);color:var(--testo);
  border:1px solid var(--bordo);border-radius:var(--raggio);
  transition:border-color var(--transizione);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--oro);outline-offset:-2px;border-color:var(--oro)}
input::placeholder,textarea::placeholder{color:var(--testo-2);opacity:.7}
input[type="checkbox"],input[type="radio"]{accent-color:var(--oro);width:16px;height:16px}
.campo-inline{display:flex;align-items:center;gap:9px;font-size:14px}
.campo-inline label{margin:0;font-weight:400}

/* Barra di ricerca composta (input + bottone) */
.cerca{display:flex;box-shadow:var(--ombra);border-radius:var(--raggio);overflow:hidden}
.cerca input{border-right:none;border-radius:var(--raggio) 0 0 var(--raggio);padding:14px 18px}
.cerca .btn{border-radius:0 var(--raggio) var(--raggio) 0;padding:14px 24px}

/* Meter robustezza password */
.pw-meter{height:6px;border-radius:99px;background:var(--bordo);overflow:hidden;margin-top:8px}
.pw-meter i{display:block;height:100%;border-radius:99px;width:0;transition:width .25s,background .25s}
.pw-meter[data-forza="1"] i{width:25%;background:var(--rosso)}
.pw-meter[data-forza="2"] i{width:50%;background:#c98a2e}
.pw-meter[data-forza="3"] i{width:75%;background:var(--oro)}
.pw-meter[data-forza="4"] i{width:100%;background:var(--verde)}

/* ====== PANNELLI / CARD ====== */
.pannello{
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio-lg);
  box-shadow:var(--ombra);padding:26px 28px;
}
.pannello-piatto{box-shadow:none}

/* Tile del catalogo */
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.tile{
  background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio-lg);
  overflow:hidden;box-shadow:var(--ombra);position:relative;
  transition:transform var(--transizione),box-shadow var(--transizione);
}
.tile:hover{transform:translateY(-4px)}
.tile>a{color:inherit;display:block}
.tile>a:hover{text-decoration:none}
.tile .img{
  aspect-ratio:1.6;display:flex;align-items:flex-end;padding:12px 14px;
  background:var(--oro-t);position:relative;overflow:hidden;
}
.tile .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .corpo{padding:15px 18px 17px}
.tile h3{font-family:var(--serif);font-weight:400;font-size:17.5px;line-height:1.25}
.tile .meta{font-size:13px;color:var(--testo-2);margin:4px 0 0}
.trend-su{color:var(--verde);font-weight:600}
.trend-giu{color:var(--rosso);font-weight:600}

/* Badge stato collezione sul tile */
.badge-posseduta{
  position:absolute;top:12px;right:12px;z-index:1;
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  border-radius:99px;padding:3px 10px;
  background:var(--superficie);color:var(--oro);border:1px solid var(--oro);
}

/* Aggiunta rapida: spunta di collezione sul tile (fast input) */
.tile.mia{border-color:color-mix(in srgb,var(--oro) 55%,var(--bordo))}
.fi-spunta{
  position:absolute;top:10px;right:10px;z-index:2;
  width:32px;height:32px;border-radius:99px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;line-height:0;
  background:color-mix(in srgb,var(--superficie) 88%,transparent);
  color:var(--testo-2);border:1px dashed var(--bordo);
  backdrop-filter:blur(3px);
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.fi-spunta svg{width:17px;height:17px}
.fi-spunta .fi-si{display:none}
.fi-spunta:hover{color:var(--oro);border-color:var(--oro);border-style:solid}
.fi-spunta:active{transform:scale(.9)}
.fi-spunta:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.fi-spunta[aria-pressed="true"]{
  background:var(--oro);color:var(--su-oro,#fff);border:1px solid var(--oro);border-style:solid;
}
.fi-spunta[aria-pressed="true"] .fi-si{display:block}
.fi-spunta[aria-pressed="true"] .fi-no{display:none}
.fi-spunta[aria-busy="true"]{opacity:.55;pointer-events:none}
/* su touch la spunta resta sempre leggibile: non c'e' hover a rivelarla */
@media (hover:hover){
  .tile .fi-spunta[aria-pressed="false"]{opacity:.72}
  .tile:hover .fi-spunta,.tile .fi-spunta:focus-visible{opacity:1}
}

/* Comandi in blocco ("possiedo tutta la serie") */
.fi-azioni{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.fi-azioni .muto{font-size:12.5px}

/* Conferma delle operazioni in blocco */
.fi-dialogo{
  border:1px solid var(--bordo);border-radius:16px;padding:24px 26px;
  max-width:min(92vw,460px);background:var(--superficie);color:var(--testo);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}
.fi-dialogo::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.fi-dialogo h3{font-family:var(--serif);font-size:21px;margin:0 0 10px}
.fi-dialogo p{font-size:14px;line-height:1.55;margin:0 0 10px}
.fi-dialogo .fi-d-nota{font-size:12.5px}
.fi-d-azioni{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
@media (max-width:420px){
  .fi-dialogo{padding:20px 18px}
  .fi-d-azioni{flex-direction:column-reverse}
  .fi-d-azioni .btn{width:100%}
}

/* Pannello rapido: conservazione senza aprire la scheda */
.fi-matita{
  position:absolute;top:10px;right:48px;z-index:2;
  width:32px;height:32px;border-radius:99px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;line-height:0;
  background:color-mix(in srgb,var(--superficie) 88%,transparent);
  color:var(--testo-2);border:1px solid var(--bordo);
  backdrop-filter:blur(3px);
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.fi-matita svg{width:15px;height:15px}
.fi-matita:hover{color:var(--oro);border-color:var(--oro)}
.fi-matita:active{transform:scale(.9)}
.fi-matita:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
/* compare solo sulle schede possedute: sulle altre non avrebbe niente da modificare */
.tile:not(.mia) .fi-matita{display:none}
@media (hover:hover){
  .tile .fi-matita{opacity:0}
  .tile:hover .fi-matita,.tile .fi-matita:focus-visible{opacity:1}
}

.fi-pannello{max-width:min(92vw,400px)}
.fi-p-riga{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid var(--bordo);
}
.fi-p-riga label{display:flex;align-items:center;gap:8px;min-width:96px;cursor:pointer}
.fi-p-riga select{
  flex:1;padding:7px 10px;border-radius:9px;font:inherit;font-size:13.5px;
  background:var(--fondo);color:var(--testo);border:1px solid var(--bordo);
}
.fi-p-riga input[type=number]{
  width:62px;padding:7px 8px;border-radius:9px;font:inherit;font-size:13.5px;text-align:center;
  background:var(--fondo);color:var(--testo);border:1px solid var(--bordo);
}
.fi-p-riga input[type=number]:disabled{opacity:.4}
.fi-p-doppioni{font-size:12.5px;margin:10px 0 0;color:var(--oro)}
.fi-p-scambio{
  display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;
  padding:12px 0;border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo);
  margin-bottom:12px;
}
.fi-pannello input[type=checkbox]{width:16px;height:16px;accent-color:var(--oro);margin:0}

/* Riquadro di conferma per la cancellazione dell'account */
.canc-dialogo{
  border:1px solid var(--bordo);border-radius:16px;padding:24px 26px;
  max-width:min(94vw,480px);background:var(--superficie);color:var(--testo);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.canc-dialogo::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.canc-dialogo h3{font-family:var(--serif);font-size:21px;margin:0 0 10px}
.canc-dialogo .canc-p{font-size:14px;line-height:1.55;margin:0 0 10px}
.canc-dialogo .canc-ul{margin:0 0 12px;padding-left:20px}
.canc-dialogo .canc-ul li{font-size:13.5px;line-height:1.7}
.canc-dialogo .canc-nota{
  font-size:12.5px;line-height:1.5;color:var(--testo-2);margin:0 0 8px;
}
.canc-dialogo .canc-azioni{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.canc-dialogo .canc-esito{font-size:13px;color:var(--rosso,#b3341f);margin-top:10px}
@media (max-width:480px){
  .canc-dialogo{padding:20px 18px}
  .canc-dialogo .canc-azioni{flex-direction:column-reverse}
  .canc-dialogo .canc-azioni .btn{width:100%}
}

/* Ricerca nel testo stampato sulle schede (OCR) */
.ocr-blocco{
  margin:26px 0 8px;padding:18px 20px;border:1px solid var(--bordo);
  border-radius:14px;background:var(--oro-t);
}
.ocr-testata h3{font-family:var(--serif);font-size:19px;margin:0 0 4px}
.ocr-testata .muto{font-size:13px;margin:0}
.ocr-griglia{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin-top:14px;
}
.ocr-scheda{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;
  padding:8px;border-radius:10px;border:1px solid transparent;transition:border-color .15s,background .15s;
}
.ocr-scheda:hover{border-color:var(--oro);background:var(--superficie)}
.ocr-scheda img{width:100%;aspect-ratio:1.6;object-fit:contain;border-radius:7px;background:var(--superficie)}
.ocr-tit{font-size:12.5px;line-height:1.3;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ocr-cod{font-family:ui-monospace,monospace;font-size:11px;color:var(--testo-2)}
.ocr-vuoto{background:transparent}
.ocr-vuoto .muto{font-size:13px;margin:0}

/* Riscontro delle operazioni rapide */
.fi-avviso{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:9999;
  max-width:min(92vw,420px);padding:10px 16px;border-radius:99px;
  background:var(--testo);color:var(--fondo);
  font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.fi-avviso.err{background:var(--rosso);color:var(--su-oro,#fff)}
/* errore mostrato DENTRO un <dialog> (il toast finirebbe dietro al top layer) */
.fi-p-errore{color:var(--rosso);font-size:13px;font-weight:600;margin:8px 0 0}
.fi-avviso.visibile{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){
  .fi-spunta,.fi-avviso{transition:none}
}

/* Pillole / etichette generiche */
.pillola{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  border-radius:99px;padding:3px 11px;background:var(--oro-t);color:var(--oro);
}
.pillola-neutra{background:var(--bordo);color:var(--testo-2)}
.pillola-verde{background:color-mix(in srgb,var(--verde) 14%,transparent);color:var(--verde)}
.pillola-rossa{background:color-mix(in srgb,var(--rosso) 14%,transparent);color:var(--rosso)}

/* ====== SEZIONI ====== */
section{padding:44px 0 8px}
.testata{display:flex;align-items:baseline;gap:18px;margin-bottom:22px}
.testata h2{font-size:26px}
.testata .azione{margin-left:auto;font-size:14px;white-space:nowrap}

/* Barre di progresso serie */
.barra{height:7px;border-radius:99px;background:var(--bordo);overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--oro),var(--oro-chiaro))}

/* KPI */
.kpi small{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--testo-2)}
.kpi b{font-family:var(--serif);font-size:30px;font-weight:400;display:block;font-variant-numeric:tabular-nums}

/* ====== TABELLE ====== */
.tabella-scroll{overflow-x:auto}
table.tabella{width:100%;border-collapse:collapse;font-size:14px}
.tabella th{
  text-align:left;font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:var(--testo-2);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--bordo);
}
.tabella td{padding:10px 12px;border-bottom:1px solid var(--bordo)}
.tabella tr:last-child td{border-bottom:none}
.tabella tbody tr:hover{background:var(--oro-t)}

/* ====== AVVISI ====== */
.avviso{
  border:1px solid var(--bordo);border-left:3px solid var(--oro);
  background:var(--superficie);border-radius:var(--raggio);
  padding:13px 17px;font-size:14px;margin:0 0 18px;
}
.avviso-ok{border-left-color:var(--verde)}
.avviso-errore{border-left-color:var(--rosso)}

/* ====== FOOTER ====== */
.sito-footer{border-top:1px solid var(--bordo);color:var(--testo-2);font-size:13px;margin-top:56px}
.sito-footer .wrap{padding:22px 24px;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.sito-footer a{color:inherit}
.sito-footer a:hover{color:var(--testo)}

/* ====== DIALOG ====== */
dialog.cdx-dialog{
  border:1px solid var(--bordo);border-radius:var(--raggio-lg);box-shadow:var(--ombra);
  background:var(--superficie);color:var(--testo);padding:0;max-width:min(92vw,440px);width:100%;
}
dialog.cdx-dialog::backdrop{background:rgba(20,14,6,.45);backdrop-filter:blur(2px)}
.cdx-dialog-testa{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bordo)}
.cdx-dialog-testa h3{font-size:19px}
.cdx-dialog-x{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--testo-2);padding:2px 6px}
.cdx-dialog-x:hover{color:var(--testo)}
.cdx-dialog-corpo{padding:18px 20px}
.cdx-dialog-piede{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--bordo)}

/* ====== PAGINAZIONE ====== */
.paginazione{display:flex;list-style:none;margin:0;padding:0;gap:4px}
.paginazione a{
  display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;
  border:1px solid var(--bordo);border-radius:9px;color:var(--testo);font-size:13.5px;
  font-variant-numeric:tabular-nums;
}
.paginazione a:hover{border-color:var(--oro);color:var(--oro);text-decoration:none}
.paginazione .active a{background:var(--oro);border-color:var(--oro);color:var(--su-oro,#fff);pointer-events:none}
.paginazione .disabled a{opacity:.4;pointer-events:none}

/* ====== COMPAT (classi usate dai JS condivisi con la vecchia UI) ====== */
.d-none{display:none!important}
/* Spinner di caricamento (classi usate dai JS condivisi: contatti, ecc.).
   Il tema nuovo non include Bootstrap, quindi lo definiamo qui. */
.spinner-border{
  display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;
  border:.16em solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:cdx-spin .7s linear infinite;
}
.spinner-border-sm{width:.9em;height:.9em;border-width:.14em}
@keyframes cdx-spin{to{transform:rotate(360deg)}}
.alert{
  border:1px solid var(--bordo);border-left:3px solid var(--oro);
  background:var(--superficie);border-radius:var(--raggio);
  padding:13px 17px;font-size:14px;margin:14px 0;
}
.alert-danger{border-left-color:var(--rosso);color:var(--rosso)}
.alert-success{border-left-color:var(--verde);color:var(--verde)}
/* il colore resta sul bordo; il TESTO usa l'inchiostro del tema: interi paragrafi
   in ambra su avorio stavano a 2,9:1 di contrasto nel tema chiaro */
.alert-warning{border-left-color:#c98a2e;color:var(--testo)}
.alert-info{border-left-color:var(--oro);color:var(--testo)}
.invalid-feedback{display:none;font-size:12.5px;color:var(--rosso);margin-top:5px}
.was-validated input:invalid,.was-validated select:invalid{border-color:var(--rosso)}
.was-validated input:invalid~.invalid-feedback,
.was-validated select:invalid~.invalid-feedback,
.was-validated .form-check-input:invalid~.invalid-feedback{display:block}
.progress{height:6px;border-radius:99px;background:var(--bordo);overflow:hidden;margin-top:8px}
.progress-bar{display:block;height:100%;border-radius:99px;background:var(--oro);transition:width .25s,background-color .25s}
.progress-bar.bg-danger{background:var(--rosso)}
.progress-bar.bg-warning{background:#c98a2e}
.progress-bar.bg-info{background:var(--oro)}
.progress-bar.bg-success{background:var(--verde)}
.toggle-password{
  position:absolute;top:36px;right:12px;cursor:pointer;color:var(--testo-2);
  width:20px;height:20px;display:grid;place-items:center;
}
.toggle-password:hover{color:var(--oro)}

/* ====== AUTH ====== */
.auth-scatola{max-width:460px;margin:56px auto 40px;padding:0 20px}
.auth-scatola .pannello{padding:32px 34px}
.auth-scatola h1{font-size:27px;text-align:center;margin-bottom:24px}
.auth-alt{display:flex;align-items:center;gap:14px;color:var(--testo-2);font-size:13px;margin:22px 0}
.auth-alt::before,.auth-alt::after{content:"";flex:1;height:1px;background:var(--bordo)}
.auth-nota{text-align:center;font-size:13.5px;color:var(--testo-2);margin-top:18px}

/* ====== UTILITY ====== */
.muto{color:var(--testo-2)}
.serif{font-family:var(--serif);font-weight:400}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.centro{text-align:center}
.flex{display:flex;align-items:center;gap:12px}
.flex-tra{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nascosto{display:none!important}
/* visibile solo ai lettori di schermo (etichette di campi altrimenti evidenti) */
.visivamente-nascosto{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:40px}

/* Skeleton di caricamento */
@keyframes cdx-pulse{0%,100%{opacity:.55}50%{opacity:.25}}
.skeleton{background:var(--bordo);border-radius:8px;animation:cdx-pulse 1.4s infinite}

/* ====== RESPONSIVE ====== */
@media (max-width:880px){
  .sito-header .wrap{gap:14px;flex-wrap:wrap}
  .nav-burger{display:block;margin-left:auto}
  .nav-principale{
    display:none;flex-direction:column;align-items:flex-start;gap:4px;
    width:100%;order:10;padding:10px 0 6px;margin-left:0;
    border-top:1px solid var(--bordo);
  }
  .nav-principale.aperta{display:flex}
  .nav-principale a{padding:8px 4px;font-size:15.5px;width:100%}
  .nav-principale a.attiva{box-shadow:inset 3px 0 0 var(--oro);padding-left:12px}
  .menu-utente{order:5}
  .tema-toggle{order:4;margin-left:auto}
  .nav-burger{order:6;margin-left:0}
}
@media (max-width:560px){
  .wrap,.wrap-stretto{padding:0 16px}
  .pannello{padding:20px 18px}
  .griglia{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}

  /* Topbar su una sola riga: con gap/padding pieni logo+tema+Registrati+utente+burger
     superavano i 375px e l'hamburger finiva a capo (header alto 116px). */
  .sito-header .wrap{gap:8px;padding:12px 14px}
  .sito-header .logo{font-size:19px}
  .sito-header .btn-piccolo{padding:5px 11px;font-size:13px}
  .tema-toggle,.nav-burger{flex:none}
}

/* Riduzione animazioni. Lo spinner resta escluso: fermo diventerebbe un anello
   statico indistinguibile da un'icona, senza piu' indicare attivita' in corso. */
@media (prefers-reduced-motion:reduce){
  *:not(.spinner-border):not(.spinner-border-sm){animation:none!important;transition:none!important}
}

/* ====== PAGINE LEGALI (privacy, termini) ======
   Il testo e' condiviso con la UI classica, quindi arriva senza classi del tema: qui gli si
   da' respiro e gerarchia, invece del riquadro bianco che si portava dietro da Bootstrap. */
/* Solo padding verticale: la classe convive con .wrap sullo STESSO div e questa regola
   vince (viene dopo). Un `padding:28px 0 56px` azzerava i 24/16px laterali di .wrap e
   su telefono il testo toccava i bordi. */
.pagina-legale{max-width:820px;margin:0 auto;padding-top:28px;padding-bottom:56px}
.pagina-legale h1{font-size:clamp(26px,3.4vw,34px);margin:0 0 6px}
.pagina-legale h2{font-size:19px;margin:30px 0 8px;padding-top:14px;border-top:1px solid var(--bordo)}
.pagina-legale h3{font-size:15.5px;margin:18px 0 6px;color:var(--oro);font-family:var(--sans)}
.pagina-legale p{margin:0 0 12px;line-height:1.65}
.pagina-legale ul{margin:0 0 14px;padding-left:20px}
.pagina-legale li{margin-bottom:7px;line-height:1.6}
.pagina-legale code{
  font-family:ui-monospace,monospace;font-size:12.5px;background:var(--oro-t);
  padding:1px 6px;border-radius:5px;
}
.pagina-legale .muto{color:var(--testo-2)}