/* ============================================================
   PAGINA PONTE — foglio di stile unico (MODELLO SEGNAPOSTO)
   Scritto dal motore genera_pagina.php come style.css della
   pagina generata. I tre colori sono segnaposto: i contrasti
   (minimo 4.5:1, sulle coppie vere) li verifica il costruttore
   PRIMA del salvataggio (docs\20260913-colore-testo-pulsanti.md).
   Segnaposto anche la FASCIA colorata intorno alla scheda (valori
   già pronti e schiariti dal motore; spenta = none / 0px):
   docs\20260925-fascia-colorata-pagina-ponte.md.
   ⚠️ Regola dei gemelli: modifiche strutturali anche in
   template-unico\style.css (milan-paolo\ non più online dal
   30/09/2026). Consenso SMS tolto il 30/09/2026: al suo posto la
   sezione PROMOZIONE (docs\20260930-promozione-al-posto-del-consenso.md).
   08/10/2026: in coda le classi della paginetta «in preparazione»
   (scheda-neutra, testo-neutro), aspetto neutro senza i colori del
   cliente; poi la classe fascia-anteprima, usata solo da
   /qr/anteprima.php. Non riportate in template-unico\ (D25)
   (docs\20261008-pagina-in-preparazione-e-anteprima.md).
   10/10/2026: in coda la classe dati-fiscali (riga della partita IVA
   in fondo alla pagina). Non riportata in template-unico\ (D25)
   (docs\20261010-partita-iva-pagine-ponte.md).
   10/10/2026: in coda le tre righette (menu) al posto della freccetta
   sulle «Note sulla privacy», ✕ da aperte. Non riportate in
   template-unico\ (D25) (docs\20261010-partita-iva-pagine-ponte.md §9).
   ============================================================ */

:root {
    /* Colore principale del cliente — riempito dal motore */
    --colore-primario: #0b5cad;
    /* Colore secondario — riempito dal motore */
    --colore-secondario: #1d6f3d;
    /* Colore del testo dei pulsanti SECONDARI (WhatsApp/SMS)
       — riempito dal motore; di serie bianco, contrasto verificato dal
       costruttore. I pulsanti col primario restano col testo bianco
       (revisione 13/09/2026, docs\20260913-colore-testo-pulsanti.md §2) */
    --colore-testo-pulsanti: #ffffff;
    /* Fascia colorata intorno alla scheda (25/09/2026) — riempita dal
       motore coi colori del cliente GIÀ schiariti; fascia spenta =
       none e 0px (scheda identica a prima). Sulla fascia non c'è
       testo: nessun controllo di contrasto necessario
       (docs\20260925-fascia-colorata-pagina-ponte.md) */
    --fascia-sfondo: linear-gradient(180deg, #3b3397, #b03333);
    --fascia-spessore: 8px;

    /* Di seguito: colori neutri, di norma NON si toccano */
    --colore-fondo: #f4f5f7;
    --colore-scheda: #ffffff;
    --colore-testo: #24292f;
    --colore-testo-attenuato: #57606a;
    --colore-bordo: #e6e8eb;
    --raggio: 14px;
    --ombra: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* ---------- Base ---------- */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 1.25rem;
    /* Carattere ad alta leggibilità (scelta 08/09/2026): Verdana o
       simili, senza grazie — più comodo anche per i lettori dislessici.
       Solo font di sistema: nessun font esterno scaricato. */
    font-family: Verdana, Geneva, Tahoma, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--colore-testo);
    background-color: var(--colore-fondo);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100svh;
}

/* ---------- Accessibilità: link "salta al contenuto" ---------- */

.salta-contenuto {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--colore-primario);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 0 0 var(--raggio) 0;
    z-index: 10;
}

.salta-contenuto:focus {
    left: 0;
}

/* Focus visibile su tutti gli elementi interattivi (tastiera) */
a:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--colore-primario);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- La scheda centrale ---------- */

.scheda {
    background: var(--colore-scheda);   /* riserva per i browser che non capiscono la riga sotto */
    /* Fascia colorata (25/09/2026): il bordo trasparente lascia vedere
       lo strato sotto (colori della fascia), dentro resta bianco */
    border: var(--fascia-spessore) solid transparent;
    background:
        linear-gradient(var(--colore-scheda), var(--colore-scheda)) padding-box,
        var(--fascia-sfondo) border-box;
    width: 100%;
    max-width: 26rem;
    padding: 1.75rem 1.5rem;
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}

/* ---------- Intestazione ---------- */

.intestazione {
    text-align: center;
    margin-bottom: 1.5rem;
}

.logo {
    max-width: 200px;
    max-height: 100px;
    width: auto;
    height: auto;
    margin-bottom: 0.75rem;
}

/* Variante logo a tutta larghezza della scheda:
   in index.html usare class="logo logo-grande" */
.logo-grande {
    width: 100%;
    max-width: 100%;
    max-height: none;
}

h1 {
    font-size: 1.4rem;
    margin: 0 0 0.25rem;
    color: #111111;
}

.sottotitolo {
    margin: 0;
    font-size: 0.95rem;
    color: var(--colore-testo-attenuato);
}

/* ---------- Sezioni ---------- */

.titolo-sezione {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--colore-testo-attenuato);
    border-bottom: 1px solid var(--colore-bordo);
    padding-bottom: 0.35rem;
    margin: 1.5rem 0 0.85rem;
}

/* ---------- Pulsanti d'azione ---------- */

.azione {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;              /* WCAG 2.2: area di tocco ampia */
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    color: #ffffff;                /* bianco di serie; sui SECONDARI comanda --colore-testo-pulsanti */
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    text-align: left;              /* a sinistra: più leggibile (12/09/2026, decisione Paolo) */
    transition: filter 0.15s ease, transform 0.1s ease;
}

.azione-primaria {
    background-color: var(--colore-primario);
}

.azione-secondaria {
    background-color: var(--colore-secondario);
    color: var(--colore-testo-pulsanti);   /* scelto dal costruttore, di serie bianco (13/09/2026) */
}

/* Pulsanti "documento" (PDF in sola lettura): stile a contorno */
.azione-doc {
    background-color: #ffffff;
    color: var(--colore-primario);
    border: 2px solid var(--colore-primario);
}

.azione:hover {
    filter: brightness(1.08);
}

.azione:active {
    transform: scale(0.98);
}

.nota-azione {
    font-size: 0.85rem;
    color: var(--colore-testo-attenuato);
    margin: 0.25rem 0 0;
    text-align: left;              /* a sinistra: più leggibile (12/09/2026, decisione Paolo) */
}

/* ---------- Orari e indirizzo ---------- */

.orari {
    margin: 0;
}

.riga-orario {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--colore-bordo);
}

.riga-orario:last-child {
    border-bottom: none;
}

.riga-orario dt {
    font-weight: 600;
}

.riga-orario dd {
    margin: 0;
    text-align: right;
}

.indirizzo {
    font-style: normal;
    line-height: 1.6;
}

.indirizzo a {
    color: var(--colore-primario);
    font-weight: 600;
}

/* ---------- Footer e privacy ---------- */

.pie-pagina {
    margin-top: 1.75rem;
    border-top: 1px solid var(--colore-bordo);
    padding-top: 1rem;
}

.privacy summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--colore-testo-attenuato);
    padding: 0.5rem 0;              /* area di tocco comoda anche qui */
}

.privacy-testo p {
    font-size: 0.8rem;
    color: var(--colore-testo-attenuato);
    margin: 0.5rem 0;
}

.firma {
    font-size: 0.75rem;
    color: var(--colore-testo-attenuato);
    text-align: center;
    margin: 1rem 0 0;
}

/* ---------- Rispetto delle preferenze di sistema ---------- */

@media (prefers-reduced-motion: reduce) {
    .azione {
        transition: none;
    }

    .azione:active {
        transform: none;
    }
}

/* ---------- Opzione foto: galleria con didascalie (08/09/2026) ---------- */

.foto {
    margin: 0 0 1rem;
}

.foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--colore-bordo);
}

.foto figcaption {
    font-size: 0.85rem;
    color: var(--colore-testo-attenuato);
    text-align: center;
    margin-top: 0.35rem;
}

/* ---------- Opzione documenti a scomparsa (12/09/2026) ----------
   01/10/2026 (decisione Paolo, docs\20261001-documenti-pulsante-e-frecce.md):
   la riga che apre l'elenco è un PULSANTE PIENO col colore primario e
   testo bianco (stessa regola di contrasto di azione-primaria), con
   una freccia disegnata a destra: in giù da chiuso, in su da aperto.
   Sopra c'è il titolino di sezione «Documenti». I pulsanti dentro
   riusano azione-doc (bianchi col bordo colorato). */

.documenti summary {
    list-style: none;              /* via il triangolino di serie */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 48px;              /* WCAG 2.2: area di tocco ampia */
    padding: 0.85rem 1rem;
    margin: 0 0 0.75rem;
    border-radius: 12px;
    background-color: var(--colore-primario);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.documenti summary::-webkit-details-marker {
    display: none;                 /* triangolino di serie su Safari */
}

.documenti summary:hover {
    filter: brightness(1.08);
}

/* Freccia: due lati di un quadratino ruotato, colore del testo */
.documenti summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.15s ease;
}

.documenti[open] > summary::after {
    transform: translateY(25%) rotate(-135deg);
}

/* ---------- Freccia sulle «Note sulla privacy» (01/10/2026) ----------
   docs\20261001-documenti-pulsante-e-frecce.md — la riga resta discreta
   (grigia, piccola): si aggiunge solo una freccetta subito a destra. */

.privacy summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.privacy summary::-webkit-details-marker {
    display: none;
}

.privacy summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.15s ease;
}

.privacy[open] > summary::after {
    transform: translateY(25%) rotate(-135deg);
}

/* Meno animazioni per chi le ha chieste nel telefono */
@media (prefers-reduced-motion: reduce) {
    .documenti summary,
    .documenti summary::after,
    .privacy summary::after {
        transition: none;
    }
}

/* ---------- Aria regolabile sotto un paragrafo (09/09/2026) ----------
   Da attaccare al paragrafo PRIMA del punto dove serve respiro:
   class="... spazio-sotto". La misura si regola qui, una volta per
   tutti i punti della pagina (sostituisce i paragrafi vuoti).
   Copiata dalla pagina milan-paolo il 12/09/2026 (decisione Paolo). */

.spazio-sotto {
    margin-bottom: 1.25rem;
}

/* ---------- Grandezze dei caratteri delle note (12/09/2026) ----------
   Copiate paro paro dalla pagina milan-paolo (decisione Paolo):
   nota-azione-1 = riga di soccorso, un filo più piccola;
   nota-azione-2 = nota «il biglietto si può perdere», un filo più
   grande; testo-descrizione = racconto lungo, misura piena. */

.nota-azione-1 {
    font-size: 0.75rem;
    color: var(--colore-testo-attenuato);
    margin: 0.25rem 0 0;
    text-align: left;
}

.nota-azione-2 {
    font-size: 0.75rem;
    color: var(--colore-testo-attenuato);
    margin: 0.25rem 0 0;
    text-align: left;
}

/* ---------- Testo della sezione descrittiva (09/09/2026) ----------
   Come le note ma mezzo punto più grande: il racconto è lungo e
   così affatica meno. La misura si regola qui. */

.testo-descrizione {
    font-size: 1.0rem;
}

/* ---------- Sezione PROMOZIONE (30/09/2026) ----------
   docs\20260930-promozione-al-posto-del-consenso.md — in cima, sotto
   logo e nome: riquadro ben visibile col bordo del colore secondario
   del cliente, fondo bianco (contrasti dei testi invariati: il
   titolo è quasi nero, la riga di validità usa il primario, già
   garantito scuro dal costruttore). I due stati (in corso / nessuna
   promozione) li sceglie /script/promo.js con l'attributo hidden. */

.promo {
    border: 3px solid var(--colore-secondario);
    border-radius: 12px;
    padding: 1rem 1rem 0.5rem;
    margin: 0 0 1.25rem;
    background: #ffffff;
}

.promo-titolo {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111111;
    margin: 0 0 0.5rem;
}

.promo-testo {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.promo-validita {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--colore-primario);
    margin: 0 0 0.75rem;
}

.promo-vuota {
    font-size: 0.95rem;
    color: var(--colore-testo-attenuato);
    margin: 0 0 0.5rem;
}

.promo [hidden] {
    display: none;
}

/* ---------- Collegamento all'informativa completa (30/09/2026) ----------
   docs\20260930-promozione-al-posto-del-consenso.md §12.4 — riga
   sempre visibile sotto «Note sulla privacy», su ogni pagina. Stessa
   grandezza del titolo delle note, colore primario (già garantito
   scuro). Gemello delle righe in coda all'altro foglio di stile. */

.informativa-completa {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.25rem 0 0;
}

.informativa-completa a {
    color: var(--colore-primario);
}

/* ---------- Pulsante «Condividi» (01/10/2026) ----------
   docs\20261001-pulsante-condividi.md — il pulsante riusa azione
   azione-doc; qui solo la sezione nascosta di serie (la accende
   /script/condividi.js) e la riga «Link copiato». Gemello delle righe
   in coda all'altro foglio di stile. */

.condividi[hidden] {
    display: none;
}

.condividi-avviso {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--colore-primario);
    text-align: center;
    margin: 0.5rem 0 0;
    min-height: 1.2em;
}

/* ---------- Paginetta «in preparazione» (08/10/2026) ----------
   docs\20261008-pagina-in-preparazione-e-anteprima.md (A6) — usata
   solo da modello\in-preparazione.html. Aspetto NEUTRO, uguale per
   tutti (scelta di Paolo, 08/10/2026): niente fascia e nessun colore
   del cliente, solo i grigi neutri di :root. Contrasti: titolo quasi
   nero e testo #24292f su bianco; firma #57606a su bianco (6,4:1). */

.scheda.scheda-neutra {
    border: 0;
    background: var(--colore-scheda);
    text-align: center;
}

.testo-neutro {
    margin: 0.75rem 0 0;
    color: var(--colore-testo);
}

/* ---------- Fascia «ANTEPRIMA» (08/10/2026) ----------
   docs\20261008-pagina-in-preparazione-e-anteprima.md §5.3 — la
   inserisce solo /qr/anteprima.php in cima alla scheda, quando il
   cliente guarda la pagina in preparazione col link segreto. Nella
   pagina pubblica non c'è mai. Contrasto: bianco su #24292f (14,7:1). */

.fascia-anteprima {
    margin: 0 0 1.25rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background-color: var(--colore-testo);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    overflow-wrap: break-word;
}

/* ---------- Dischetto bianco dietro le icone (09/10/2026) ----------
   Decisione di Paolo (strada 1): le emoji dei pulsanti PIENI
   (azione-primaria e azione-secondaria) le disegna il telefono coi
   suoi colori; alcune (es. la cornetta 📞 su Android) sono scure e
   sul colore del pulsante quasi spariscono. Un dischetto bianco
   dietro l'icona le rende visibili con qualunque colore del cliente
   e su qualunque telefono. I pulsanti a contorno (azione-doc) hanno
   già il fondo bianco: non toccati.
   Stesso giorno, dopo il collaudo (strada 2 di Paolo): il dischetto
   dipende dall'ICONA, non dal pulsante — bianco dietro le icone
   scure (📞 💾, classe icona-scura), scuro semitrasparente dietro
   quelle chiare (💬 ✉️ 📄, classe icona-chiara), che sul bianco
   sparivano. Le classi stanno sugli span nel modello pagina.html.
   docs\20261009-dischetto-icone-pulsanti.md
   Gemello in coda a template-unico\style.css. */

.icona-scura,
.icona-chiara {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    line-height: 1;
}

.icona-scura {
    background-color: #ffffff;
}

.icona-chiara {
    background-color: rgba(0, 0, 0, 0.28);
}

/* ---------- Dati fiscali in fondo alla pagina (10/10/2026) ----------
   docs\20261010-partita-iva-pagine-ponte.md §4.3 — riga piccola come la
   firma, tra le note sulla privacy e l'informativa completa. Contrasto:
   #57606a su bianco (6,4:1). I numeri lunghi vanno a capo sul telefono
   invece di uscire dalla scheda. */

.dati-fiscali {
    font-size: 0.75rem;
    color: var(--colore-testo-attenuato);
    text-align: center;
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;
}

/* ---------- «Note sulla privacy»: tre righette al posto della freccetta (10/10/2026) ----------
   Richiesta di Paolo (10/10/2026, docs\20261010-partita-iva-pagine-ponte.md
   §9): da chiuse le tre righette tipiche dei menu, da aperte una ✕ (scelta
   1 di Paolo: si capisce subito come richiuderle). Disegnate col colore
   del testo, nessuna immagine e nessuno script. Queste righe vengono DOPO
   quelle della freccetta del 01/10/2026 e le sostituiscono (stesso
   elemento): la freccia del pulsante «Documenti» non cambia. */

.privacy summary::after {
    width: 0.8rem;
    height: 0.8rem;
    border: 0;
    transform: none;
    background:
        linear-gradient(currentColor, currentColor) 0 15% / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 85% / 100% 2px no-repeat;
}

.privacy[open] > summary::after {
    transform: none;
    background:
        linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}