/*
 * Il modulo di prenotazione nel modello nuovo (il blocco modulo, kb/modelli/blocchi/modulo.php): passo 3.11 di
 * docs/rifacimento-2026-09-24/PIANO.md. Arriva DOPO il foglio del modulo di oggi (modulo.css), che resta com'e':
 * lo chiedono anche le tre pagine prenota del sito congelato, e finche' il motore nuovo e' spento il sito servito
 * non cambia di un byte. Qui solo cio' che il modello nuovo cambia, tutto dentro la classe kb del body del
 * layout nuovo:
 *   - il bottone di invio blu come gli altri bottoni del sito (PIANO 12; analisi-aspetto 15 e 21, decisione 6 al
 *     default: blu, squadrato): Roboto 500 16 px, bianco su --kb-blu, imbottitura 15 e 50 px, alto 46 (20.1); al
 *     passaggio l'azzurro e il "grow" dei bottoni (analisi-aspetto 2.1 e 18), fermo con prefers-reduced-motion;
 *   - il fuoco dei campi blu invece che giallo: il giallo non ha un'origine nel tema (analisi-aspetto 15);
 *   - il modulo in una colonna di 550 px come oggi (analisi-aspetto 15), col margine laterale del telefono;
 *   - i campi senza l'aspetto del browser e il segnaposto scuro, come oggi (misurati da tools/verifica_impaginazione.js).
 * Il markup del modulo non si tocca (i name sono il contratto col gestionale). Nei commenti nessun percorso
 * comincia con la barra: tools/verifica_asset.py legge ogni indirizzo scritto qui dentro.
 */

.kb-blocco-modulo{padding:20px var(--kb-margine) 80px}
.kb .kb-modulo{max-width:550px}
/* al tablet come oggi: la colonna del modulo e' la meta' del contenuto meno 66 px (426 a 1024, 298 a 768), in italiano
   meno 10 (482 a 1024, 354 a 768) */
@media (min-width:768px) and (max-width:1024px){
  .kb .kb-modulo{max-width:calc(50% - 66px)}
  .kb .kb-modulo:lang(it){max-width:calc(50% - 10px)}
}
/* i campi senza l'aspetto del browser, come oggi (il tema di oggi li spoglia tutti): le tendine senza la freccia e alte
   48 px come le caselle (spogliate prendono l'interlinea di 24 px del modulo, che Chrome ignora sulla tendina col suo
   aspetto), il segnaposto del messaggio scuro come il testo e non il grigio del browser */
.kb .kb-modulo select,.kb .kb-modulo textarea,.kb .kb-modulo input:not([type=checkbox]):not([type=radio]){-webkit-appearance:none;appearance:none}
.kb .kb-modulo ::placeholder{color:var(--kb-scuro);opacity:1}
.kb .kb-modulo input:focus,.kb .kb-modulo select:focus,.kb .kb-modulo textarea:focus{outline-color:var(--kb-blu);border-color:var(--kb-blu)}
.kb .kb-modulo .kb-invia{padding:15px 50px;border-radius:0;background:var(--kb-blu);color:var(--kb-bianco);font:500 16px/16px var(--kb-roboto);transition:transform .3s}
.kb .kb-modulo .kb-invia:hover,.kb .kb-modulo .kb-invia:focus-visible{background:var(--kb-azzurro);transform:scale(1.1)}
.kb .kb-modulo .kb-invia[disabled]{background:var(--kb-blu);transform:none}
@media (prefers-reduced-motion:reduce){
  .kb .kb-modulo .kb-invia{transition:none}
  .kb .kb-modulo .kb-invia:hover,.kb .kb-modulo .kb-invia:focus-visible{transform:none}
}