/* Stile di Sofia Papetti, dal biglietto da visita: verde acqua #7eaba9, pesca #fcceb1, bianco;
   Bodoni Moda per nome e titoli, Roboto per i testi (Light invece del Thin del biglietto: sul telefono
   il Thin non si legge). Caratteri dentro l'app, nessuna richiesta a Google. */
@font-face { font-family: "Bodoni Moda"; src: url("/font/bodoni-moda-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/font/roboto-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/font/roboto-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/font/roboto-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --verde: #7eaba9;
  --pesca: #fcceb1;
  --testata: #7eaba9;
  --sfondo: #f6f9f8;
  --carta: #ffffff;
  --testo: #2c4341;
  --tenue: #647c7a;
  --linea: #d8e5e4;
  --accento: #4c7c7a;
  --accento-chiaro: #fde9db;
  --su-accento: #ffffff;
  --errore: #b0413e;
  --ok: #3c7a5d;
}
@media (prefers-color-scheme: dark) {
  :root {
    --testata: #3c5c5b;
    --sfondo: #172322; --carta: #20302f; --testo: #edf4f3; --tenue: #a2b8b6;
    --linea: #33494a; --accento: #fcceb1; --accento-chiaro: #3b322c; --su-accento: #1c2a29;
    --errore: #f08a7e; --ok: #8fd1ad;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sfondo); color: var(--testo);
  font: 300 16px/1.5 "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; }
strong, b { font-weight: 500; }
main { max-width: 560px; margin: 0 auto; padding: 16px 16px 48px; }
h1 { font: 400 1.6rem/1.2 "Bodoni Moda", Georgia, serif; margin: 8px 0 4px; }
h2 { font: 400 1.3rem/1.25 "Bodoni Moda", Georgia, serif; margin: 26px 0 10px; }
p { margin: 6px 0; }
.tenue { color: var(--tenue); font-size: .93rem; }
.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: 16px; padding: 16px; margin: 12px 0; }
.scelta { display: block; width: 100%; text-align: left; background: var(--carta); color: var(--testo);
  border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; margin: 8px 0; font: inherit; cursor: pointer; }
.scelta:hover, .scelta:focus-visible { border-color: var(--accento); outline: none; }
.scelta.attiva { border-color: var(--accento); background: var(--accento-chiaro); }
.scelta .riga { display: flex; justify-content: space-between; gap: 12px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.chip { flex: 0 0 auto; border: 1px solid var(--linea); background: var(--carta); color: var(--testo);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 400; cursor: pointer; }
.chip.attiva { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.orari { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
label { display: block; margin: 12px 0 4px; font-size: .95rem; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=number], input[type=url], textarea, select {
  width: 100%; padding: 12px; border: 1px solid var(--linea); border-radius: 12px;
  background: var(--carta); color: var(--testo); font: inherit; }
.domanda { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.domanda:last-child { border-bottom: 0; }
.sino { display: flex; gap: 8px; margin-top: 8px; }
.sino button { flex: 1; }
.spunta { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: .95rem; }
.spunta input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accento); }
.pulsante { display: block; width: 100%; background: var(--accento); color: var(--su-accento); border: 0; border-radius: 999px;
  padding: 15px; font: inherit; font-weight: 500; letter-spacing: .02em; margin-top: 20px; cursor: pointer; }
.pulsante:disabled { opacity: .45; cursor: default; }
.pulsante.secondario { background: transparent; color: var(--accento); border: 1px solid var(--accento); }
.errore { color: var(--errore); margin: 10px 0; }
.ok { color: var(--ok); }
.indietro { background: none; border: 0; color: var(--accento); font: inherit; font-weight: 400; padding: 8px 0; cursor: pointer; }
a { color: var(--accento); }
.nascosto { display: none !important; }

/* Testata col logo, come il fronte del biglietto: «Sofia» bianco, «Papetti» pesca, «CIGLIA» spaziato */
.testata { position: relative; overflow: hidden; background: var(--testata); color: #fff; padding: 28px 16px 26px; }
.testata .dentro { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.logo { display: inline-flex; flex-direction: column; line-height: 1; }
.logo-sofia { font: 400 1.55rem/1 "Bodoni Moda", Georgia, serif; color: #fff; margin-left: 1.1em; }
.logo-papetti { font: 400 2.9rem/1 "Bodoni Moda", Georgia, serif; color: var(--pesca); margin-top: -2px; }
.logo-ciglia { font: 300 .78rem/1 "Roboto", sans-serif; letter-spacing: .32em; color: #fff; align-self: flex-end; margin-top: 4px; }
.testata .motto { font-weight: 300; color: #fff; opacity: .95; margin-top: 12px; max-width: 62%; }
.macchie { position: absolute; right: -28px; top: -20px; height: 150%; opacity: .95; pointer-events: none; }
@media (prefers-color-scheme: dark) { .macchie { opacity: .55; } }

/* vista settimanale */
.testa-settimana { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; }
.testa-settimana .chip:disabled { opacity: .3; cursor: default; }
.settimana { display: grid; gap: 6px; }
.colonna { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.giorno-testa { text-align: center; font-size: .82rem; color: var(--tenue); padding-bottom: 4px; border-bottom: 1px solid var(--linea); }
.ora-libera { border: 1px solid var(--linea); background: var(--carta); color: var(--testo); border-radius: 8px;
  padding: 8px 0; font: inherit; font-size: .88rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.ora-libera:hover, .ora-libera:focus-visible { border-color: var(--accento); background: var(--accento-chiaro); outline: none; }
.vuoto { text-align: center; color: var(--tenue); padding: 8px 0; }