/* Guide Quenta — stile condiviso da tutte le pagine (quenta.it/guide/).
   Font e colori sono quelli delle app (ff_theme): Outfit per titoli ed etichette,
   Plus Jakarta Sans per il testo. Le costanti di impianto (--max, --gutter,
   --barra-h) sono le stesse del sito e delle pagine legali. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../assets/font/outfit.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../assets/font/plus-jakarta-sans.woff2) format('woff2')}

:root{--max:1200px;--gutter:24px;--barra-h:64px;--testo-w:760px;--indice-w:220px;--raggio:14px}
:root,[data-theme="light"]{
  --bg:#FAFAFF;--bg-alto:#FFFFFF;--border:#E2E4E8;--panel-bg:#F3F3F6;
  --text:#121212;--muted:#8A8A8E;--body:#202020;
  --accent:#0F5A54;--accent-soft:#E6F0EE;--mark:#FFF1B8;
  --warn-bg:#FEF6E2;--warn-border:#F6B40E;--warn-text:#6B4E06;
  --danger-bg:#FFECEE;--danger-border:#FF1B2B;--danger-text:#A3121D;
  --ombra:0 10px 30px rgba(0,0,0,.10);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#121212;--bg-alto:#1A1A1A;--border:#2A2A2A;--panel-bg:#202020;
  --text:#FFFFFF;--muted:#8E8B90;--body:#E5E5E5;
  --accent:#60AF9B;--accent-soft:rgba(96,175,155,.14);--mark:rgba(246,180,14,.28);
  --warn-bg:#2A2113;--warn-border:#F6B40E;--warn-text:#F6D79A;
  --danger-bg:#2A1616;--danger-border:#FF1B2B;--danger-text:#FF6B75;
  --ombra:0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121212;--bg-alto:#1A1A1A;--border:#2A2A2A;--panel-bg:#202020;
  --text:#FFFFFF;--muted:#8E8B90;--body:#E5E5E5;
  --accent:#60AF9B;--accent-soft:rgba(96,175,155,.14);--mark:rgba(246,180,14,.28);
  --warn-bg:#2A2113;--warn-border:#F6B40E;--warn-text:#F6D79A;
  --danger-bg:#2A1616;--danger-border:#FF1B2B;--danger-text:#FF6B75;
  --ombra:0 10px 30px rgba(0,0,0,.45);color-scheme:dark}}

/* passaggio morbido fra le pagine delle guide (Chrome, Edge, Safari 18) */
@view-transition{navigation:auto}
*{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:calc(var(--barra-h) + 18px)}
body{margin:0;background:var(--bg);color:var(--body);font:400 16px/1.65 'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.largo{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.ico{width:18px;height:18px;flex:none;vertical-align:-.2em}

/* ── testata ─────────────────────────────────────────────────────────────── */
.testata{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.barra{height:var(--barra-h);display:flex;align-items:center;gap:18px}
.marchio{display:flex;align-items:center;gap:7px;flex:none}
.marchio:hover{text-decoration:none}
.marchio img{display:block}
.q-scuro{display:none!important}
[data-theme="dark"] .q-chiaro{display:none!important}
[data-theme="dark"] .q-scuro{display:block!important}
.etichetta,.tag{font:600 9.5px 'Outfit',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:3px 7px;border-radius:5px;white-space:nowrap}
.etichetta{margin-left:4px}
.voci{display:flex;align-items:center;gap:2px;margin-left:auto}
.voce{font:500 13.5px 'Plus Jakarta Sans',sans-serif;color:var(--body);padding:7px 10px;border-radius:8px;white-space:nowrap}
.voce:hover{background:var(--panel-bg);text-decoration:none}
.voce.corrente{color:var(--accent);background:var(--accent-soft)}
.azioni{display:flex;align-items:center;gap:8px;flex:none}
.voci+.azioni{margin-left:0}
.tema,.menu{height:36px;border:1px solid var(--border);background:var(--panel-bg);color:var(--body);border-radius:9px;cursor:pointer}
.tema{width:36px;padding:0;display:flex;align-items:center;justify-content:center}
.tema svg{width:17px;height:17px}
.tema .i-sole{display:none}
[data-theme="dark"] .tema .i-luna{display:none}
[data-theme="dark"] .tema .i-sole{display:block}
.menu{display:none;font:500 13px 'Plus Jakarta Sans',sans-serif;padding:0 12px}

/* ricerca nella testata */
.cerca-breve{position:relative;width:240px}
.cerca-breve input{width:100%;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--bg-alto);color:var(--text);font:400 13.5px 'Plus Jakarta Sans',sans-serif;padding:0 10px 0 34px}
.cerca-breve input:focus{outline:none;border-color:var(--accent)}
.lente{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px;pointer-events:none}
.tendina{position:absolute;right:0;top:calc(100% + 8px);width:min(520px,calc(100vw - 2*var(--gutter)));max-height:70vh;overflow:auto;background:var(--bg-alto);border:1px solid var(--border);border-radius:var(--raggio);box-shadow:var(--ombra);padding:6px}
.tendina .ris{padding:10px}
.tendina .tutti{display:block;text-align:center;font:500 13px 'Plus Jakarta Sans';padding:10px;border-top:1px solid var(--border);margin-top:4px}

/* ── pezzi comuni ────────────────────────────────────────────────────────── */
.briciole{font-size:13px;color:var(--muted);margin:28px 0 18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.briciole .sep{color:var(--muted)}
.briciole span[aria-current]{color:var(--body)}
.tile{width:40px;height:40px;flex:none;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.tile .ico{width:20px;height:20px}
.tile.grande{width:56px;height:56px;border-radius:15px}
.tile.grande .ico{width:28px;height:28px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.testa{display:flex;gap:18px;align-items:flex-start;margin:0 0 26px}
.testa h1,.cerca-home h1{font:700 38px/1.12 'Outfit',sans-serif;letter-spacing:-.025em;color:var(--text);margin:0 0 10px;text-wrap:balance}
.sommario{font-size:17.5px;line-height:1.55;color:var(--body);margin:0;max-width:760px}
.eyebrow{font:600 10.5px 'Outfit',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.blocco{margin:48px 0 0}
.blocco h2,.gruppo h2{font:700 22px/1.25 'Outfit',sans-serif;color:var(--text);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.gruppo h2 .ico{width:22px;height:22px;color:var(--accent)}
.sotto{color:var(--muted);margin:-6px 0 16px;font-size:15px}
.conta{font:600 11px 'Outfit',sans-serif;color:var(--muted);background:var(--panel-bg);border:1px solid var(--border);padding:2px 8px;border-radius:999px}

/* schede (un oggetto) */
.griglia{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.elenco{display:grid;gap:8px}
.elenco.due{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.scheda{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:var(--raggio);background:var(--bg-alto);color:inherit;min-width:0;transition:border-color .12s,transform .12s}
.scheda:hover{border-color:var(--accent);text-decoration:none}
.scheda .dentro{display:flex;flex-direction:column;gap:3px;min-width:0}
.scheda .tags{margin:0 0 3px}
.scheda .tit{font:600 15.5px/1.35 'Outfit',sans-serif;color:var(--text)}
.scheda .desc{font-size:13.5px;line-height:1.5;color:var(--body)}
.scheda.riga{padding:10px 14px;align-items:center}
.scheda.riga .tile{width:34px;height:34px;border-radius:9px}
.scheda.riga .tile .ico{width:17px;height:17px}

/* ── pagina di un oggetto ────────────────────────────────────────────────── */
.colonne{display:block}
.colonne.con-indice{display:grid;grid-template-columns:minmax(0,var(--testo-w)) var(--indice-w);gap:48px;justify-content:space-between}
.indice{position:sticky;top:calc(var(--barra-h) + 24px);align-self:start;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--border);padding-left:16px;max-height:calc(100vh - var(--barra-h) - 48px);overflow:auto}
.indice-tit{font:600 10px 'Outfit',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.indice a{font-size:13px;color:var(--body);padding:4px 0}
.indice a.attivo{color:var(--accent);font-weight:600}
.articolo{max-width:var(--testo-w);min-width:0}
.articolo h3{font:700 21px/1.3 'Outfit',sans-serif;color:var(--text);margin:36px 0 10px}
.articolo h3:first-child{margin-top:0}
.articolo h4{font:600 16.5px/1.35 'Plus Jakarta Sans',sans-serif;color:var(--text);margin:26px 0 8px}
.articolo h5{font:600 15px/1.35 'Plus Jakarta Sans',sans-serif;color:var(--text);margin:20px 0 6px}
.articolo p{margin:0 0 14px}
.articolo ul,.articolo ol{margin:0 0 16px;padding-left:24px}
.articolo li{margin:0 0 6px}
.articolo li>ul,.articolo li>ol{margin:6px 0 0}
.articolo strong{color:var(--text);font-weight:600}
.articolo figure{margin:22px 0}
.articolo figure img{display:block;max-width:100%;height:auto;border:1px solid var(--border);border-radius:12px}
.articolo figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.articolo .ico{width:1.05em;height:1.05em;margin-right:.3em;color:var(--accent)}
.articolo li.casella{list-style:none;margin-left:-1.2em}
.articolo .ico-casella{color:var(--muted)}
.riquadro,.avviso,.pericolo{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:16px 18px;margin:22px 0}
.riquadro{background:var(--panel-bg);border:1px solid var(--border)}
.avviso{background:var(--warn-bg);border:1px solid var(--warn-border);border-left-width:3px}
.pericolo{background:var(--danger-bg);border:1px solid var(--danger-border);border-left-width:3px}
.articolo .ico-box{width:20px;height:20px;margin:3px 0 0}
.avviso .ico-box{color:var(--warn-border)}
.pericolo .ico-box{color:var(--danger-border)}
.box-testo{min-width:0;flex:1}
.box-testo>:last-child{margin-bottom:0}
.avviso p,.avviso li,.avviso strong{color:var(--warn-text)}
.pericolo p,.pericolo li,.pericolo strong{color:var(--danger-text)}
.tabella{overflow-x:auto;margin:18px 0 22px}
.articolo table{width:100%;border-collapse:collapse;font-size:14px}
.articolo th{text-align:left;padding:0 14px 9px 0;border-bottom:1px solid var(--border);font:600 10.5px 'Outfit',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.articolo td{padding:11px 14px 11px 0;border-bottom:1px solid var(--border);vertical-align:top}
.articolo tr:last-child td{border-bottom:none}
.articolo td:first-child{color:var(--text);font-weight:500}
.articolo ul.meta{list-style:none;padding:12px 16px;margin:4px 0 16px;background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;display:grid;gap:6px}
.articolo ul.meta li{margin:0;display:grid;grid-template-columns:130px 1fr;gap:12px;font-size:14px}
.articolo ul.meta li>strong{font:600 10.5px/2 'Outfit',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sfoglia{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:48px 0 0}
.sfoglia a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--raggio);color:var(--text);font:600 15px/1.35 'Outfit',sans-serif}
.sfoglia a span{font:500 12px 'Plus Jakarta Sans',sans-serif;color:var(--muted)}
.sfoglia a:hover{border-color:var(--accent);text-decoration:none}
.sfoglia .succ{text-align:right;align-items:flex-end}

/* ── pagina di un'area ───────────────────────────────────────────────────── */
.salti{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.salti a{font-size:13.5px;color:var(--body);padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg-alto)}
.salti a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.gruppo{margin:40px 0 0;scroll-margin-top:calc(var(--barra-h) + 18px)}
.argomenti{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.argomento{border:1px solid var(--border);border-radius:var(--raggio);background:var(--bg-alto);overflow:hidden}
.argomento .testa-arg{border:none;border-radius:0;border-bottom:1px solid var(--border)}
.domande{list-style:none;margin:0;padding:8px 16px 12px}
.domande li{margin:0;padding:6px 0;border-bottom:1px dashed var(--border);font-size:14px;line-height:1.45}
.domande li:last-child{border-bottom:none}
.domande a{color:var(--body)}
.domande a:hover{color:var(--accent)}

/* ── home e risultati ────────────────────────────────────────────────────── */
.cerca-home{padding:56px 0 8px;max-width:820px;margin:0 auto;text-align:center}
.cerca-home .sommario{margin:0 auto 26px}
.campo{position:relative}
.campo input{width:100%;height:58px;border:1.5px solid var(--border);border-radius:16px;background:var(--bg-alto);color:var(--text);font:400 17px 'Plus Jakarta Sans',sans-serif;padding:0 18px 0 52px;box-shadow:var(--ombra)}
.campo input:focus{outline:none;border-color:var(--accent)}
.campo .lente{left:18px;width:20px;height:20px}
.suggeriti{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 0}
.suggeriti button{font:500 13px 'Plus Jakarta Sans',sans-serif;color:var(--body);background:var(--panel-bg);border:1px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer}
.suggeriti button:hover{border-color:var(--accent);color:var(--accent)}
.risultati{text-align:left;margin:22px 0 0}
.risultati:empty{display:none}
.risultati .nota-ris{font-size:13.5px;color:var(--muted);margin:0 0 10px}
.ris{display:flex;gap:14px;align-items:flex-start;padding:14px 12px;border-radius:12px;color:inherit}
.ris:hover,.ris.sel{background:var(--panel-bg);text-decoration:none}
.ris .dentro{min-width:0;display:flex;flex-direction:column;gap:3px}
.ris .tit{font:600 16px/1.35 'Outfit',sans-serif;color:var(--text)}
.ris .desc{font-size:13.5px;line-height:1.5;color:var(--body)}
.ris .dove{font-size:12.5px;color:var(--accent)}
.ris mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 1px}
.risultati .vuoto{padding:18px;border:1px dashed var(--border);border-radius:12px;color:var(--body)}
.risultati .altri{display:block;margin:6px auto 0;font:500 13.5px 'Plus Jakarta Sans';color:var(--accent);background:none;border:none;cursor:pointer;padding:10px}
.aree{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card-area{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--border);border-radius:var(--raggio);background:var(--bg-alto);color:inherit}
.card-area:hover{border-color:var(--accent);text-decoration:none}
.card-area .tit{font:700 17px 'Outfit',sans-serif;color:var(--text)}
.card-area .desc{font-size:13.5px;line-height:1.5}
.card-area .conta{align-self:flex-start;margin-top:auto}
.percorsi{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));counter-reset:passo}
.percorso{padding:16px;border:1px solid var(--border);border-radius:var(--raggio);background:var(--panel-bg);counter-increment:passo}
.percorso h3{font:700 16.5px 'Outfit',sans-serif;color:var(--text);margin:0 0 4px;display:flex;align-items:center;gap:10px}
.percorso h3::before{content:counter(passo);width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.percorso p{font-size:13.5px;margin:0 0 12px}
.percorso .scheda .desc{display:none}
.aiuto{display:flex;gap:16px;align-items:flex-start;margin:48px 0 0;padding:22px 24px;border-radius:var(--raggio);border:1px solid var(--border);background:var(--panel-bg)}
.aiuto>.ico{width:28px;height:28px;color:var(--accent);margin-top:2px}
.aiuto h2{font:700 20px 'Outfit',sans-serif;color:var(--text);margin:0 0 6px}
.aiuto p{margin:0}
.piede{margin:72px 0 0;padding:22px 0 40px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted)}

/* ── schermi stretti ─────────────────────────────────────────────────────── */
@media (max-width:1060px){
  .colonne.con-indice{display:block}
  .indice{display:none}
  .cerca-breve{width:190px}
}
@media (max-width:900px){
  .menu{display:block}
  .voci{display:none;position:absolute;left:0;right:0;top:var(--barra-h);flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--border);padding:8px var(--gutter) 14px}
  .voci.aperto{display:flex}
  .azioni{margin-left:auto}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .marchio .parola{display:none!important}
  .cerca-breve{width:auto;flex:1}
  .barra{gap:10px}
  .azioni{flex:1;justify-content:flex-end}
  .testa{gap:12px}
  .testa h1,.cerca-home h1{font-size:28px}
  .tile.grande{width:44px;height:44px}
  .sommario{font-size:16px}
  .griglia,.elenco.due,.argomenti{grid-template-columns:1fr}
  .sfoglia{grid-template-columns:1fr}
  .articolo ul.meta li{grid-template-columns:1fr;gap:0}
  .cerca-home{padding-top:32px}
}