/* Lo STILE delle pagine che vede il cliente — prenota.html e richieste.html.
 *
 * Perché esiste (11/09/2026). Le due pagine sono gemelle e il loro CSS era
 * ricopiato riga per riga: stessi colori, stesse bolle, stessi tastini, in due
 * file. È la regola #10 in attesa di succedere, e stava per succedere di nuovo
 * — le schede nuove e la barra del carrello sarebbero state la terza e la
 * quarta copia.
 *
 * ⚠️ Qui sta SOLO ciò che è davvero identico nelle due pagine. Quello che
 * differisce per buoni motivi (la testata, le misure del logo) resta nel
 * <style> della sua pagina, che viene dopo e quindi può sovrascrivere.
 *
 * ⚠️ `:root` è qui perché è da qui che passeranno le PALETTE: un posto solo in
 * cui cambiare i colori del link, non due da tenere allineati a mano.
 *
 * ⚠️ Una sola regola `*{}` in tutto (regola tecnica 4): due si sovrascrivono e
 * rompono il font. Sta qui, e le pagine non ne hanno più una loro.
 */

  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--shell);min-height:100vh;color:var(--text);-webkit-font-smoothing:antialiased}

  /* ⚠️ `height` e non `min-height` (11/09/2026). Con `min-height` la colonna
     cresceva oltre lo schermo e a scorrere era la PAGINA: la conversazione non
     scorreva dentro di sé, e tutto ciò che le sta sotto — la barra del carrello
     e l'informativa — finiva fuori dalla vista. Con un catalogo da 18 articoli
     la barra «Continua» stava a 1936px su una finestra di 780: il difetto che
     Erik aveva segnalato, risolto a metà. Ora l'altezza è fissa, `.chat` è il
     pezzo che scorre, e sotto resta sempre in vista.
     `100dvh` prima di tutto, con `100vh` come ripiego per i Safari vecchi:
     su iPhone la barra del browser mangia la differenza fra le due. */
  .wrap{max-width:480px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column}

  /* ⚠️ `min-height:0` + il tetto sul piede (11/09/2026, trovato in review e
     verificato aprendo la pagina). Con l'altezza fissa, aprire l'informativa
     art. 13 faceva crescere il piede di 700px e l'unico pezzo che poteva
     cedere era la conversazione: da 570px a **34** — spariva, e il piede usciva
     comunque dallo schermo. Ora il piede ha un tetto e scorre dentro di sé:
     il testo legale si legge tutto e la conversazione resta dov'è. */
  .chat{flex:1 1 0;min-height:0;overflow-y:auto;padding:6px 18px 28px;display:flex;flex-direction:column}

  .bub{background:var(--bg2);border:1px solid var(--border);border-radius:16px;border-top-left-radius:5px;padding:12px 14px;font-size:14px;line-height:1.5;max-width:86%;margin:9px 0;box-shadow:0 4px 16px rgba(16,40,24,.07);align-self:flex-start;animation:rise .3s ease}

  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .opts{display:flex;flex-direction:column;gap:8px;align-items:flex-end;margin:2px 0 6px}
  .opt{background:var(--bg2);border:1.5px solid var(--border);color:var(--text);font-size:14px;font-weight:700;padding:11px 16px;border-radius:22px;box-shadow:0 2px 8px rgba(16,40,24,.06);cursor:pointer;transition:all .15s;text-align:right}
  .opt:hover{border-color:var(--green);color:var(--green)}
  .opt.sel{background:var(--green);color:var(--onGreen);border-color:var(--green);box-shadow:0 5px 16px var(--glow)}
  .opt .price{margin-left:8px;font-weight:800;font-size:12.5px;color:var(--green)}
  .opt:hover .price,.opt.sel .price{color:inherit}
  .opts.locked .opt{pointer-events:none;opacity:.55}
  .opts.locked .opt.sel{opacity:1}

  /* LE SCHEDE. Erik, 11/09/2026: «cosa ne pensi se i pulsanti li facciamo come
     le schede dei moduli così riempie di più la pagina? perché così mi sembra
     troppo vuoto. e magari con qualche iconcina stile quelle della barra di
     navigazione». Le pillole allineate a destra lasciavano mezza schermata
     vuota, e un catalogo da 39 articoli erano 39 righe da scorrere: in due
     colonne sono la metà delle schermate. Scelta sua fra una colonna e due,
     viste tutt'e due disegnate (11/09). */
  /* ⚠️ `minmax(0,1fr)` e non `1fr` (11/09/2026, provato a 320px con un nome
     vero lungo). In una griglia una colonna `1fr` non scende MAI sotto il suo
     contenuto più largo: bastava un nome senza spazi — «Protezioneparaurti…» —
     e la colonna si allargava, spingendo quella di destra FUORI dallo schermo.
     Le schede a destra uscivano tagliate a metà, e la pagina non mostrava
     nemmeno una barra di scorrimento che lo facesse capire. `minmax(0,…)` dice
     alla colonna che può stringersi; `overflow-wrap` sull'etichetta dice alla
     parola che può spezzarsi. Servono tutt'e due: la prima da sola lascia il
     testo tagliato dentro la scheda. */
  .opts.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch;margin:4px 0 8px}
  /* Una colonna dove il testo è una FRASE e non un'etichetta (le FAQ): in due
     colonne una domanda intera diventa una scheda alta e stretta, illeggibile. */
  .opts.cards.larghe{grid-template-columns:minmax(0,1fr)}
  .opts.cards .opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;
    gap:9px;text-align:left;border-radius:16px;padding:13px;min-height:122px;width:100%;min-width:0}
  .opts.cards.larghe .opt{flex-direction:row;align-items:center;gap:12px;min-height:0;padding:12px 14px}
  .opt .ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;
    border-radius:12px;color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent)}
  /* ⚠️ `color-mix` e non l'alpha attaccato al token (regola tecnica 7): `--green`
     è una var, e `var(--green)22` è CSS invalido che il browser scarta in silenzio. */
  .opt.sel .ico{color:var(--onGreen);background:color-mix(in srgb,var(--onGreen) 14%,transparent)}
  .opts.cards .opt .lbl{font-size:13.5px;font-weight:800;line-height:1.32;min-width:0;overflow-wrap:anywhere}
  .opts.cards.larghe .opt .lbl{flex:1;font-size:14px;font-weight:700;min-width:0;overflow-wrap:anywhere}
  .opts.cards .opt .price{margin:auto 0 0;font-size:14.5px}
  .opts.cards.larghe .opt .price{margin:0 0 0 auto}
  /* «custom» — il segno che QUESTO articolo si può personalizzare (Erik,
     11/09/2026: «quelli personalizzabili mettilo sulla scheda da qualche
     parte»). Prima l'unico indizio era il «da» davanti al prezzo, che nessuno
     legge come «personalizzabile»; e la differenza si scopriva solo dopo, al
     passo dei dati. Sta in fondo, sotto il prezzo: una riga sua, così non va a
     sbattere contro un prezzo lungo su schede da 140px. */
  .opt .custom{align-self:flex-start;margin-top:4px;font-size:10.5px;font-weight:800;
    letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
    color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
  .opt.sel .custom{color:var(--onGreen);background:color-mix(in srgb,var(--onGreen) 16%,transparent)}
  /* La spunta: un ✓ nell'angolo, non un «☑» davanti al nome — dentro una scheda
     il quadratino sembrava un carattere finito lì per sbaglio. */
  .opt .flag{position:absolute;top:9px;right:9px;width:21px;height:21px;border-radius:50%;
    border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:900;line-height:1;color:transparent}
  .opt.sel .flag{background:var(--onGreen);border-color:var(--onGreen);color:var(--green)}

  /* LA BARRA DEL CARRELLO — a fondo schermo, larga quanto la pagina.
     Prima «Continua con X articoli» era un `.opt.sel`: la STESSA pillola verde
     degli articoli spuntati, nella stessa fila, alla stessa altezza. Erik,
     11/09/2026: «è troppo uguale alle altre voci, rischi di perderlo di vista
     se non leggi bene». Aveva ragione — verde su verde, in fondo a una colonna
     di verdi. Quindi non è più una voce dell'elenco: è la barra dell'app, e sta
     dove stanno le barre. Fondo pieno (`--bg2`) e non una velatura: le palette
     cambieranno i colori, e una velatura su un fondo ignoto non si sa com'esce. */
  /* IL PIEDE — l'informativa art. 13 vive qui dentro, e aperta è lunga. Il
     tetto + `overflow` sono la ragione per cui può esserlo senza mangiarsi la
     conversazione: il testo legale scorre dentro il suo riquadro. */
  /* «Ricomincia» quando chiede conferma. Erik, 11/09: «metti anche un annulla,
     se uno sbaglia può tornare all'inizio». Il tasto sta accanto a «Indietro»,
     che si tocca spesso: senza la seconda conferma un tocco di striscio
     butterebbe via un carrello pieno e una descrizione già scritta. */
  /* Due tasti di fila nella testata: il secondo non si ri-spinge a destra da
     solo, se no fra «Indietro» e «Ricomincia» si apre un buco. */
  /* Il titolo della casella di consenso: una riga sua, così si legge in un
     colpo d'occhio invece che come una frase lunga in grigio. */
  /* Tre righe, ognuna con un peso diverso: la DOMANDA si legge da sola, il
     «per cosa» sta sotto per chi lo vuole, il resto è una postilla. Serve così
     perché la domanda corta da sola non sarebbe un consenso specifico — e uno
     generico non vale niente (Erik, 11/09: «metti una domanda semplice»). */
  .b-consenso b{display:block;font-size:13.5px;margin-bottom:2px}
  .b-consenso em{display:block;font-size:11.5px;margin-top:3px}
  .back + .back{margin-left:0}
  .back.avviso{border-color:var(--err);color:var(--err)}
  .foot{flex:0 0 auto;max-height:40%;overflow-y:auto;text-align:center;font-size:11px;
    color:var(--textD);padding:6px 18px 18px;opacity:.8}
  .barra{display:none;background:var(--bg2);border-top:1px solid var(--border);
    box-shadow:0 -10px 28px rgba(0,0,0,.22);
    padding:10px 18px calc(12px + env(safe-area-inset-bottom))}
  .barra.on{display:block;animation:rise .25s ease}
  .barra button{width:100%;font-family:inherit;cursor:pointer;border:none}
  .barra .altro{display:block;background:none;color:var(--textD);font-size:12.5px;font-weight:700;padding:3px 0 10px}
  .barra .altro:hover{color:var(--green)}
  .barra .vai{display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:var(--green);color:var(--onGreen);border-radius:14px;padding:13px 18px;
    font-size:16px;font-weight:800;text-align:left;box-shadow:0 8px 26px var(--glow)}
  .barra .vai small{display:block;font-size:11.5px;font-weight:700;opacity:.72;margin-top:1px}
  .barra .vai .tot{font-size:17px;font-weight:900;white-space:nowrap}

/* ── PALETTE — GENERATO da scripts/palette/build.mjs, non toccare a mano ── */

/* I colori nascono da due soli valori per palette (src/temi.js) e passano
   tutti il contrasto WCAG AA: chi aggiunge una tinta rilancia il generatore,
   non scrive i colori a mano. `verde` è anche il :root, cioè il default. */

/* Verde Sliss — Il verde di casa */
:root,
:root[data-tema="verde"]{
  --green:#4ADE80;
  --greenH:#86EFAC;
  --greenS:rgba(74,222,128,.15);
  --bg2:#15291E;
  --border:rgba(130,200,165,.16);
  --text:#F0F7F4;
  --textD:#8FB6A4;
  --onGreen:#06231A;
  --err:#FB7185;
  --field:#1E3829;
  --textShell:#A9C7B9;
  --greenShell:#4ADE80;
  --ansBg:rgba(74,222,128,.10);
  --ansBorder:rgba(74,222,128,.28);
  --shell:radial-gradient(ellipse 82% 42% at 24% -5%,rgba(74,222,128,.15) 0,transparent 56%),radial-gradient(ellipse 60% 36% at 82% 5%,rgba(45,212,191,.09) 0,transparent 48%),linear-gradient(170deg,#145A38 0,#0F3D2A 24%,#0C2E20 50%,#0A2518 76%,#081E15 100%);
  --glow:rgba(74,222,128,.28);
}

/* Notte — Blu profondo, tecnico */
:root[data-tema="notte"]{
  --green:#60A5FA;
  --greenH:#8DBEFB;
  --greenS:rgba(96,165,250,0.15);
  --bg2:#142741;
  --border:rgba(176,210,253,0.2);
  --text:#F2F8FF;
  --textD:#9EA9B7;
  --textShell:#ABB4C0;
  --greenShell:#7EB6FB;
  --onGreen:#111820;
  --err:#FB7185;
  --field:#19304F;
  --ansBg:rgba(96,165,250,0.1);
  --ansBorder:rgba(96,165,250,0.28);
  --shell:radial-gradient(ellipse 82% 42% at 24% -5%,rgba(96,165,250,0.15) 0,transparent 56%),radial-gradient(ellipse 60% 36% at 82% 5%,rgba(141,190,251,0.09) 0,transparent 48%),linear-gradient(170deg,#394658 0,#212F43 24%,#0E1D33 50%,#0E1B2E 76%,#0D1828 100%);
  --glow:rgba(96,165,250,0.28);
}

/* Ambra — Oro caldo su bruno */
:root[data-tema="ambra"]{
  --green:#FBBF24;
  --greenH:#FCD161;
  --greenS:rgba(251,191,36,0.15);
  --bg2:#32260A;
  --border:rgba(253,223,146,0.2);
  --text:#FFFAED;
  --textD:#B1A997;
  --textShell:#B8B1A0;
  --greenShell:#FBBF24;
  --onGreen:#27200D;
  --err:#FB7185;
  --field:#41310C;
  --ansBg:rgba(251,191,36,0.1);
  --ansBorder:rgba(251,191,36,0.28);
  --shell:radial-gradient(ellipse 82% 42% at 24% -5%,rgba(251,191,36,0.15) 0,transparent 56%),radial-gradient(ellipse 60% 36% at 82% 5%,rgba(252,209,97,0.09) 0,transparent 48%),linear-gradient(170deg,#4B4334 0,#352C1C 24%,#231A08 50%,#201808 76%,#1C1609 100%);
  --glow:rgba(251,191,36,0.28);
}

/* Corallo — Rosso acceso, deciso */
:root[data-tema="corallo"]{
  --green:#FB7185;
  --greenH:#FC99A7;
  --greenS:rgba(251,113,133,0.15);
  --bg2:#391821;
  --border:rgba(253,184,194,0.2);
  --text:#FFF4F5;
  --textD:#B4A0A4;
  --textShell:#BBA9AC;
  --greenShell:#FC8C9C;
  --onGreen:#190E10;
  --err:#FB7185;
  --field:#471E28;
  --ansBg:rgba(251,113,133,0.1);
  --ansBorder:rgba(251,113,133,0.28);
  --shell:radial-gradient(ellipse 82% 42% at 24% -5%,rgba(251,113,133,0.15) 0,transparent 56%),radial-gradient(ellipse 60% 36% at 82% 5%,rgba(252,153,167,0.09) 0,transparent 48%),linear-gradient(170deg,#503C42 0,#3B242B 24%,#2A1119 50%,#261017 76%,#210F15 100%);
  --glow:rgba(251,113,133,0.28);
}

/* Viola — Lilla su notte viola */
:root[data-tema="viola"]{
  --green:#A78BFA;
  --greenH:#C0ABFB;
  --greenS:rgba(167,139,250,0.15);
  --bg2:#261C41;
  --border:rgba(211,197,253,0.2);
  --text:#F8F6FF;
  --textD:#A8A3B7;
  --textShell:#B0ABBD;
  --greenShell:#B8A1FB;
  --onGreen:#110E16;
  --err:#FB7185;
  --field:#2F254F;
  --ansBg:rgba(167,139,250,0.1);
  --ansBorder:rgba(167,139,250,0.28);
  --shell:radial-gradient(ellipse 82% 42% at 24% -5%,rgba(167,139,250,0.15) 0,transparent 56%),radial-gradient(ellipse 60% 36% at 82% 5%,rgba(192,171,251,0.09) 0,transparent 48%),linear-gradient(170deg,#453E58 0,#2E2743 24%,#1C1433 50%,#1A132E 76%,#171128 100%);
  --glow:rgba(167,139,250,0.28);
}

/* Grafite — Neutro, minimale */
:root[data-tema="grafite"]{
  --green:#D4D4D8;
  --greenH:#E0E0E3;
  --greenS:rgba(212,212,216,0.15);
  --bg2:#242528;
  --border:rgba(234,234,236,0.2);
  --text:#FCFCFC;
  --textD:#AAAAAB;
  --textShell:#AEAEAF;
  --greenShell:#D4D4D8;
  --onGreen:#222223;
  --err:#FB7185;
  --field:#313235;
  --ansBg:rgba(212,212,216,0.1);
  --ansBorder:rgba(212,212,216,0.28);
  --shell:radial-gradient(ellipse 82% 42% at 24% -5%,rgba(212,212,216,0.15) 0,transparent 56%),radial-gradient(ellipse 60% 36% at 82% 5%,rgba(224,224,227,0.09) 0,transparent 48%),linear-gradient(170deg,#414244 0,#2A2A2D 24%,#17181B 50%,#151619 76%,#131416 100%);
  --glow:rgba(212,212,216,0.28);
}

/* Carta — Chiaro, marchio scuro */
:root[data-tema="carta"]{
  --green:#1F2937;
  --greenH:#1B232F;
  --greenS:rgba(31,41,55,0.15);
  --bg2:#F4F4F5;
  --border:rgba(21,26,33,0.22);
  --text:#0C0C0E;
  --textD:#646466;
  --textShell:#646466;
  --greenShell:#1F2937;
  --onGreen:#E4E5E7;
  --err:#B91C1C;
  --field:#E9EAEB;
  --ansBg:rgba(31,41,55,0.08);
  --ansBorder:rgba(31,41,55,0.28);
  --shell:radial-gradient(ellipse 82% 42% at 24% -5%,rgba(31,41,55,0.1) 0,transparent 56%),radial-gradient(ellipse 60% 36% at 82% 5%,rgba(27,35,47,0.07) 0,transparent 48%),linear-gradient(170deg,#FAFAF9 0,#F6F6F5 24%,#F2F2F0 50%,#F2F2F0 76%,#ECECEA 100%);
  --glow:rgba(31,41,55,0.16);
}

/* Panna — Chiaro caldo, terracotta */
:root[data-tema="panna"]{
  --green:#7C2D12;
  --greenH:#672711;
  --greenS:rgba(124,45,18,0.15);
  --bg2:#F8F5F3;
  --border:rgba(67,28,14,0.22);
  --text:#130D0B;
  --textD:#6A6563;
  --textShell:#6A6563;
  --greenShell:#7C2D12;
  --onGreen:#EFE6E3;
  --err:#B91C1C;
  --field:#F2EAE7;
  --ansBg:rgba(124,45,18,0.08);
  --ansBorder:rgba(124,45,18,0.28);
  --shell:radial-gradient(ellipse 82% 42% at 24% -5%,rgba(124,45,18,0.1) 0,transparent 56%),radial-gradient(ellipse 60% 36% at 82% 5%,rgba(103,39,17,0.07) 0,transparent 48%),linear-gradient(170deg,#FDFAF6 0,#FCF7EF 24%,#FAF3E8 50%,#FAF3E8 76%,#F6EDE2 100%);
  --glow:rgba(124,45,18,0.16);
}

/* Il tema del sistema operativo per i controlli nativi (caselle, cursori). */
:root{color-scheme:dark}
:root[data-tema="carta"]{color-scheme:light}
:root[data-tema="panna"]{color-scheme:light}

/* ── PALETTE — fine del blocco generato ── */