/* ═══════════════════════════════════════════════════════════════════════
   GUIDA IN LINEA (templates/guida.php, app/Guida.php)
   Indice a sinistra, capitolo a destra; su schermi stretti l'indice va
   sopra e si chiude. In stampa resta solo il capitolo.
   ═══════════════════════════════════════════════════════════════════════ */
.guida {
    --g-blu: #1A4B7C;
    --g-blu-scuro: #0D2240;
    --g-bordo: #e2e8f0;
    --g-fondo: #f8fafc;
    --g-testo: #1e293b;
    --g-tenue: #64748b;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin-top: 1rem;
}

/* ── indice ── */
/* ⚠️ L'INDICE RESTA FERMO SCORRENDO (16/10/2026).
   `.main-content` ha `overflow-x: hidden`, che lo rende un contenitore di
   scorrimento: li' dentro un elemento «sticky» non si ferma mai, perche' a
   scorrere e' la pagina e non lui. `overflow-x: clip` taglia lo stesso quello
   che sborda ma NON crea il contenitore. Vale solo sulla pagina della guida
   (`:has(> .guida)`): le altre pagine restano come sono. Un browser senza
   `:has` mostra l'indice che scorre con la pagina, come prima. */
.main-content:has(> .guida) { overflow-x: clip; }
.guida-indice {
    position: sticky;
    top: 76px;                       /* sotto la barra in alto (sticky anche lei) */
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: #fff;
    border: 1px solid var(--g-bordo);
    border-radius: .75rem;
    padding: .75rem;
    font-size: .88rem;
}
.guida-cerca { position: relative; margin-bottom: .6rem; }
.guida-cerca i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--g-tenue); }
.guida-cerca input {
    width: 100%; padding: .5rem .6rem .5rem 2rem; border: 1px solid #cbd5e1; border-radius: .5rem;
    font-size: .92rem; background: var(--g-fondo);
}
.guida-cerca input:focus { outline: 2px solid #93c5fd; border-color: var(--g-blu); background: #fff; }
.guida-indice-titolo {
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--g-tenue); padding: .25rem .25rem .4rem; cursor: pointer; list-style: none;
}
.guida-indice-titolo::-webkit-details-marker { display: none; }
.guida-indice nav a { color: var(--g-testo); text-decoration: none; }
.guida-voce-home { display: flex; gap: .5rem; align-items: center; padding: .4rem .5rem; border-radius: .4rem; }
.guida-capitolo summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; border-radius: .4rem;
}
.guida-capitolo summary::-webkit-details-marker { display: none; }
.guida-capitolo summary::after {
    content: "\203A"; margin-left: auto; padding: 0 .4rem; color: var(--g-tenue); transition: transform .15s;
}
.guida-capitolo[open] summary::after { transform: rotate(90deg); }
.guida-capitolo summary a { display: flex; gap: .5rem; align-items: center; padding: .4rem .5rem; flex: 1; font-weight: 600; }
.guida-capitolo summary:hover, .guida-voce-home:hover { background: var(--g-fondo); }
.guida-indice a.attiva { color: var(--g-blu); }
.guida-voce-home.attiva { background: #e0ecf8; font-weight: 600; }
.guida-capitolo ul { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 1.85rem; }
.guida-capitolo li a {
    display: block; padding: .22rem .5rem; border-left: 2px solid var(--g-bordo); color: #475569; line-height: 1.3;
}
.guida-capitolo li a:hover { color: var(--g-blu); border-left-color: #93c5fd; }
.guida-capitolo li a.attiva { color: var(--g-blu); border-left-color: var(--g-blu); font-weight: 600; }

/* ── contenuto ── */
.guida-contenuto {
    background: #fff; border: 1px solid var(--g-bordo); border-radius: .75rem;
    padding: 1.25rem 1.75rem 1.75rem; min-width: 0; color: var(--g-testo);
    font-size: .97rem; line-height: 1.65;
}
.guida-briciole { font-size: .82rem; color: var(--g-tenue); margin-bottom: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.guida-briciole a { color: var(--g-tenue); text-decoration: none; }
.guida-briciole a:hover { color: var(--g-blu); text-decoration: underline; }
.guida-h1 { font-size: 1.6rem; font-weight: 700; color: var(--g-blu-scuro); margin: 0 0 .75rem; }
.guida-sottotitolo { color: #475569; max-width: 60rem; }
.guida-intro { font-size: 1.02rem; }
.guida-contenuto h2 {
    font-size: 1.28rem; font-weight: 700; color: var(--g-blu-scuro); margin: 2rem 0 .75rem;
    padding-top: .9rem; border-top: 1px solid var(--g-bordo); scroll-margin-top: 80px;
}
.guida-contenuto h3 { font-size: 1.06rem; font-weight: 700; margin: 1.4rem 0 .5rem; color: var(--g-testo); scroll-margin-top: 80px; }
.guida-contenuto h4 { font-size: .97rem; font-weight: 700; margin: 1.1rem 0 .4rem; color: #334155; }
.guida-contenuto p { margin: 0 0 .8rem; }
.guida-contenuto ul, .guida-contenuto ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.guida-contenuto li { margin-bottom: .3rem; }
.guida-contenuto ol > li::marker { font-weight: 700; color: var(--g-blu); }
.guida-contenuto code { background: #f1f5f9; padding: .05rem .35rem; border-radius: .25rem; font-size: .88em; color: #0f172a; }
.guida-contenuto blockquote { border-left: 3px solid var(--g-bordo); margin: 0 0 1rem; padding: .2rem 0 .2rem 1rem; color: #475569; }
.guida-ancora { margin-left: .4rem; color: #cbd5e1; text-decoration: none; font-weight: 400; opacity: 0; transition: opacity .15s; }
.guida-contenuto h2:hover .guida-ancora { opacity: 1; }
.guida-link, .guida-link-pagina { color: var(--g-blu); font-weight: 500; }
.guida-link-pagina i { font-size: .8em; }
.guida-errore { color: #b91c1c; font-weight: 600; }

/* tasti */
.guida-tasti { white-space: nowrap; }
.guida-tasti kbd, .guida-contenuto kbd {
    display: inline-block; min-width: 1.6em; padding: .05rem .4rem; margin: 0 .1rem; font: 600 .82em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #0f172a; background: #fff; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: .3rem; text-align: center;
}

/* sommario del capitolo */
.guida-sommario { background: var(--g-fondo); border: 1px solid var(--g-bordo); border-radius: .6rem; padding: .75rem 1rem; margin: 1rem 0 .5rem; }
.guida-sommario strong { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--g-tenue); }
.guida-sommario ol { columns: 2; column-gap: 2rem; margin: .4rem 0 0; }
.guida-sommario a { color: var(--g-blu); text-decoration: none; }
.guida-sommario a:hover { text-decoration: underline; }

/* riquadri */
.guida-riquadro { border-radius: .6rem; padding: .7rem 1rem .2rem; margin: 0 0 1rem; border: 1px solid; border-left-width: 4px; }
.guida-riquadro-titolo { font-weight: 700; font-size: .86rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.guida-riquadro p { margin-bottom: .55rem; }
.guida-nota { background: #eff6ff; border-color: #bfdbfe; border-left-color: #2563eb; }
.guida-nota .guida-riquadro-titolo { color: #1d4ed8; }
.guida-attenzione { background: #fff7ed; border-color: #fed7aa; border-left-color: #ea580c; }
.guida-attenzione .guida-riquadro-titolo { color: #c2410c; }
.guida-suggerimento { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; }
.guida-suggerimento .guida-riquadro-titolo { color: #15803d; }
.guida-admin { background: #f5f3ff; border-color: #ddd6fe; border-left-color: #7c3aed; }
.guida-admin .guida-riquadro-titolo { color: #6d28d9; }

/* tabelle */
.guida-tabella { overflow-x: auto; margin: 0 0 1rem; border: 1px solid var(--g-bordo); border-radius: .5rem; }
.guida-tabella table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.guida-tabella th { background: var(--g-fondo); text-align: left; font-weight: 700; padding: .5rem .7rem; border-bottom: 1px solid var(--g-bordo); white-space: nowrap; }
.guida-tabella td { padding: .45rem .7rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.guida-tabella tr:last-child td { border-bottom: 0; }

/* figure */
.guida-figura { margin: .5rem 0 1.25rem; }
.guida-zoom {
    display: block; padding: 0; border: 1px solid var(--g-bordo); border-radius: .5rem; background: #fff;
    cursor: zoom-in; overflow: hidden; max-width: 100%; box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.guida-zoom:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.guida-zoom img { display: block; max-width: 100%; height: auto; }
.guida-figura figcaption { font-size: .84rem; color: var(--g-tenue); margin-top: .4rem; }
.guida-fig-n { font-weight: 700; color: #475569; }

/* copertina */
.guida-copertina { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; margin-top: 1.2rem; }
.guida-scheda {
    display: flex; gap: .85rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--g-bordo); border-radius: .7rem;
    text-decoration: none; color: var(--g-testo); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.guida-scheda:hover { border-color: #93c5fd; box-shadow: 0 4px 14px rgba(26, 75, 124, .1); }
.guida-scheda-icona {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: .6rem; display: flex; align-items: center; justify-content: center;
    background: #e0ecf8; color: var(--g-blu); font-size: 1.25rem;
}
.guida-scheda-testo { display: flex; flex-direction: column; gap: .15rem; }
.guida-scheda-testo span { font-size: .87rem; color: #475569; line-height: 1.4; }
.guida-scheda-testo small { color: var(--g-tenue); font-size: .76rem; }

/* risultati della ricerca */
.guida-risultati { margin-bottom: 1rem; }
.guida-risultati-testa { font-size: .85rem; color: var(--g-tenue); margin-bottom: .5rem; }
.guida-risultato { display: block; padding: .6rem .8rem; border: 1px solid var(--g-bordo); border-radius: .5rem; margin-bottom: .5rem; text-decoration: none; color: var(--g-testo); }
.guida-risultato:hover { border-color: #93c5fd; background: var(--g-fondo); }
.guida-risultato strong { display: block; color: var(--g-blu); }
.guida-risultato small { color: var(--g-tenue); }
.guida-risultato p { margin: .2rem 0 0; font-size: .87rem; color: #475569; }
.guida-risultato mark, .guida-contenuto mark { background: #fef08a; padding: 0 .1rem; border-radius: .15rem; }

/* precedente / successivo */
.guida-prevnext { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--g-bordo); }
.guida-prev, .guida-next {
    display: flex; flex-direction: column; gap: .1rem; padding: .6rem .9rem; border: 1px solid var(--g-bordo); border-radius: .55rem;
    text-decoration: none; color: var(--g-blu); font-weight: 600; max-width: 48%;
}
.guida-next { text-align: right; margin-left: auto; }
.guida-prev small, .guida-next small { color: var(--g-tenue); font-weight: 400; }
.guida-prev:hover, .guida-next:hover { border-color: #93c5fd; background: var(--g-fondo); }

/* lente (immagine ingrandita) */
.guida-lente {
    position: fixed; inset: 0; z-index: 9500; background: rgba(15, 23, 42, .86); display: flex;
    align-items: center; justify-content: center; padding: 2.5rem 1rem 1rem; cursor: zoom-out;
}
.guida-lente[hidden] { display: none; }
.guida-lente figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.guida-lente img { max-width: 100%; max-height: calc(100vh - 6rem); border-radius: .4rem; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.guida-lente figcaption { color: #e2e8f0; margin-top: .6rem; font-size: .9rem; text-align: center; }
.guida-lente-chiudi {
    position: absolute; top: .5rem; right: .9rem; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer;
}

/* il pulsante «Guida» in testa alle pagine e il «?» in alto (layout.php) */
.guida-pulsante {
    display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: .45rem;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
    font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.guida-pulsante:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.guida-pulsante-barra { margin-left: auto; }
.guida-topbar {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #f0f4f8; color: #1A4B7C; font-size: 1.15rem; text-decoration: none; flex-shrink: 0;
}
.guida-topbar:hover { background: #e2e8f0; color: #0D2240; }

/* ── schermi stretti ── */
@media (max-width: 860px) {
    .guida { grid-template-columns: minmax(0, 1fr); }
    .guida-indice { position: static; max-height: none; overflow: visible; }
    .guida-indice-tutto:not([open]) { margin-bottom: 0; }
    .guida-contenuto { padding: 1rem; }
    .guida-sommario ol { columns: 1; }
    .guida-prev, .guida-next { max-width: 100%; }
    .guida-prevnext { flex-direction: column; }
}

/* ── stampa: solo il capitolo ── */
@media print {
    .guida { display: block; margin: 0; }
    .guida-indice, .guida-briciole, .guida-prevnext, .guida-risultati, .guida-ancora, .guida-lente, .guida-pulsante { display: none !important; }
    .guida-contenuto { border: 0; padding: 0; font-size: 11pt; }
    .guida-contenuto h2 { break-after: avoid; page-break-after: avoid; }
    .guida-figura, .guida-riquadro, .guida-tabella { break-inside: avoid; page-break-inside: avoid; }
    .guida-zoom { box-shadow: none; }
    .guida-sommario ol { columns: 2; }
    .guida-link::after { content: ""; }
}