/* Agenda La Grande Rosy Center — stesso stile a mattoncini delle altre app, toni rosa e prugna. */
:root {
  --bg: #fdf0f6;
  --carta: #ffffff;
  --inchiostro: #2b1830;
  --tenue: #6d5a70;
  --bordo: #2b183026;
  --ombra: #2b183033;

  --rosa: #b83280;
  --rosa-scuro: #7a1f55;
  --rosa-chiaro: #ffe3f1;

  --libera: #18864b;  --libera-chiaro: #dcf5e6;
  --bambini: #c92a2a; --bambini-chiaro: #ffe1e1;
  --vuoto: #8a7a8c;   --vuoto-chiaro: #f3eef4;
  --ver: #a86b00;     --ver-chiaro: #fff1c7;

  --r: 16px;
  --spessore: 0 4px 0 var(--ombra);
  --font-titoli: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--inchiostro); font: 500 16px/1.4 var(--font);
  background-color: var(--bg);
  background-image: radial-gradient(circle at 12px 12px, #f7cfe2 3px, transparent 3.5px);
  background-size: 48px 48px;
  min-height: 100vh;
}
h1, h2, h3 { font-family: var(--font-titoli); margin: 0; letter-spacing: .2px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mattone { background: var(--carta); border: 2px solid var(--bordo); border-radius: var(--r); box-shadow: var(--spessore); }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  background: var(--carta); border: 2px solid var(--bordo); box-shadow: 0 3px 0 var(--ombra);
  font-weight: 800; transition: transform .08s ease, box-shadow .08s ease; text-decoration: none;
}
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ombra); }
.btn.grande { min-height: 52px; font-size: 17px; padding: 10px 18px; }
.btn.primario { background: var(--rosa); border-color: var(--rosa-scuro); color: #fff; }
.btn.giusy { background: var(--rosa-chiaro); border-color: var(--rosa); color: var(--rosa-scuro); }
.btn.pericolo { background: var(--bambini-chiaro); border-color: var(--bambini); color: var(--bambini); }
.btn.attivo { outline: 3px solid var(--inchiostro); outline-offset: 1px; }
.btn:focus-visible, .chip-info:focus-visible, .app:focus-visible, .banda:focus-visible, .orario-btn:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* ---------- accesso ---------- */
.accesso { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 30; }
.accesso form { width: min(380px, 100%); padding: 28px 22px; display: grid; gap: 10px; text-align: center; }
.accesso input { min-height: 52px; border-radius: 12px; border: 2px solid var(--bordo); padding: 0 14px; font-size: 18px; }
.accesso-logo { display: flex; gap: 8px; justify-content: center; }
.accesso-logo span { width: 26px; height: 26px; border-radius: 8px; background: var(--rosa); box-shadow: 0 3px 0 var(--rosa-scuro); }
.accesso-logo span:nth-child(2) { background: #f39ac4; box-shadow: 0 3px 0 #c0628f; }
.accesso-logo span:nth-child(3) { background: var(--libera); box-shadow: 0 3px 0 #0f5a31; }
.errore { color: var(--bambini); font-weight: 800; min-height: 1.4em; margin: 0; }

/* ---------- testata ---------- */
#app { max-width: 1700px; margin: 0 auto; padding: 12px 16px 48px; }
.testata { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 0; }
.logo { width: 64px; height: 64px; border-radius: 20px; flex: none; display: grid; place-items: center; text-align: center;
  background: var(--rosa); color: #fff; font: 700 17px/1 var(--font-titoli); letter-spacing: 1px;
  box-shadow: 0 4px 0 var(--rosa-scuro); }
.titolo h1 { font-size: clamp(22px, 4vw, 32px); }
.sotto { margin: 2px 0 0; color: var(--tenue); font-weight: 700; }
.menu { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sync { width: 100%; margin: 0; font-size: 14px; font-weight: 700; color: var(--tenue); }
.sync.ok::before { content: "● "; color: var(--libera); }
.sync.attesa::before { content: "● "; color: var(--ver); }
.sync.errore::before { content: "● "; color: var(--bambini); }

/* ---------- barra settimana ---------- */
.barra-settimana { display: grid; gap: 10px; margin-bottom: 12px; }
.naviga { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vai { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 12px; background: var(--carta); border: 2px solid var(--bordo); border-radius: 12px; box-shadow: 0 3px 0 var(--ombra); font-weight: 800; }
.vai input { border: 0; background: transparent; min-height: 44px; font-weight: 700; }
#titolo-settimana { font-size: clamp(20px, 3vw, 28px); }
.info-riga { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-info { min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--inchiostro); background: var(--carta); font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; }
.chip-info.fisso { cursor: default; border-style: dashed; border-color: var(--bordo); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; font-weight: 700; color: var(--tenue); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.q { width: 16px; height: 16px; border-radius: 5px; border: 2px solid; display: inline-block; }
.q.libera { background: var(--libera-chiaro); border-color: var(--libera); }
.q.bambini { background: var(--bambini-chiaro); border-color: var(--bambini); }
.q.vuoto { background: var(--vuoto-chiaro); border-color: var(--vuoto); border-style: dashed; }

/* ---------- griglia settimanale (lunedì-sabato) ---------- */
.griglia { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.griglia.sette { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.giorno { background: var(--carta); border: 2px solid var(--bordo); border-radius: var(--r); box-shadow: var(--spessore); min-width: 0; display: flex; flex-direction: column; }
.giorno.oggi { border-color: var(--rosa-scuro); box-shadow: 0 4px 0 var(--rosa-scuro), 0 0 0 3px var(--rosa); }
.giorno.passato { opacity: .8; }
.g-testa { padding: 10px 12px 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.g-testa .gs { font: 700 20px var(--font-titoli); }
.g-testa .gn { font-weight: 800; color: var(--tenue); }
.g-testa .conta { margin-left: auto; font: 800 12.5px var(--font); padding: 2px 9px; border-radius: 999px; background: var(--rosa-chiaro); color: var(--rosa-scuro); }
.badge-oggi { font: 800 12px var(--font); background: var(--rosa); color: #fff; padding: 2px 8px; border-radius: 999px; }

.banda { margin: 0 8px; padding: 7px 10px; border-radius: 12px; border: 2px solid; text-align: left; cursor: pointer; display: grid; gap: 1px; min-height: 48px; }
.banda b { font-size: 14px; }
.banda small { font-size: 12.5px; font-weight: 700; }
.banda.libera { background: var(--libera-chiaro); border-color: var(--libera); color: #0f5a31; }
.banda.bambini { background: var(--bambini-chiaro); border-color: var(--bambini); color: #8a1c1c; }
.banda.vuoto { background: var(--vuoto-chiaro); border-color: var(--vuoto); border-style: dashed; color: var(--tenue); }

.lista-app { padding: 8px; display: grid; gap: 7px; }
.vuoto-giorno { color: var(--tenue); font-size: 13.5px; text-align: center; margin: 6px 0; }
.app { position: relative; text-align: left; cursor: pointer; border-radius: 12px; border: 2px solid var(--rosa); background: var(--rosa-chiaro);
  padding: 7px 10px 7px 14px; display: grid; gap: 2px; min-width: 0; animation: entra .2s ease; }
.app::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 10px 0 0 10px; background: var(--rosa); }
.app .ora { font: 700 16px var(--font-titoli); }
.app .nome { font-weight: 800; font-size: 15px; word-break: break-word; }
.app .nota { font-size: 12.5px; color: var(--tenue); font-style: italic; word-break: break-word; }
.app.senza-ora { border-style: dashed; background: #fff; }
.app.senza-ora .ora { font: 800 12.5px var(--font); color: var(--ver); }
.app.allarme { border-color: var(--bambini); background: var(--bambini-chiaro); }
.app.allarme::before { background: var(--bambini); }
.app.sovrapposto { outline: 3px dashed var(--ver); outline-offset: 1px; }
.avv { font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 8px; width: fit-content; }
.avv.bambini { background: var(--bambini); color: #fff; }
.avv.sovr { background: var(--ver-chiaro); color: var(--ver); border: 1px solid var(--ver); }
.aggiungi { margin: 0 8px 10px; min-height: 48px; border-radius: 12px; border: 2px dashed var(--rosa-scuro); background: #fff; color: var(--rosa-scuro); font-weight: 800; cursor: pointer; }
@keyframes entra { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- modali ---------- */
.velo { position: fixed; inset: 0; background: #2b183080; display: grid; place-items: center; padding: 12px; z-index: 40; animation: appare .15s ease; }
@keyframes appare { from { opacity: 0; } }
.finestra { width: min(640px, 100%); max-height: calc(100vh - 24px); overflow: auto; background: var(--carta); border-radius: 20px; border: 3px solid var(--inchiostro); box-shadow: 0 6px 0 var(--inchiostro); }
.finestra.larga { width: min(900px, 100%); }
.f-testa { position: sticky; top: 0; background: var(--rosa); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 3px solid var(--inchiostro); z-index: 2; }
.f-testa h2 { font-size: 21px; flex: 1; }
.f-chiudi { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--inchiostro); background: #fff; color: var(--inchiostro); font-size: 20px; font-weight: 800; cursor: pointer; }
.f-corpo { padding: 16px; display: grid; gap: 14px; }
.f-piede { position: sticky; bottom: 0; background: var(--carta); padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; border-top: 2px solid var(--bordo); z-index: 2; }
.f-piede .sinistra { margin-right: auto; }
.campo { display: grid; gap: 6px; position: relative; }
.campo > span, .gruppo-titolo { font-weight: 800; font-size: 14px; color: var(--tenue); }
.campo input, .campo select, .campo textarea { min-height: 48px; border-radius: 12px; border: 2px solid var(--bordo); padding: 8px 12px; background: #fff; width: 100%; }
.campo textarea { min-height: 64px; resize: vertical; }
.riga-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelte .btn { flex: 1 1 auto; }
.box { padding: 12px; border-radius: 14px; border: 2px solid var(--bordo); background: #fbf6f9; display: grid; gap: 8px; }
.box.info { background: var(--libera-chiaro); border-color: var(--libera); }
.box.attenzione { background: var(--ver-chiaro); border-color: var(--ver); }
.box.errore { background: var(--bambini-chiaro); border-color: var(--bambini); color: #8a1c1c; font-weight: 700; }
.box p { margin: 0; }

/* suggerimenti nome */
.sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.sugg button { min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--rosa); background: var(--rosa-chiaro); color: var(--rosa-scuro); font-weight: 800; cursor: pointer; }
.cliente-info { font-size: 13.5px; font-weight: 700; color: var(--tenue); }

/* scelta orario */
.orari { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.orario-btn { min-height: 46px; border-radius: 10px; border: 2px solid; font-weight: 800; cursor: pointer; display: grid; place-items: center; line-height: 1.05; padding: 2px; }
.orario-btn small { font-size: 12px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orario-btn.libero { background: var(--libera-chiaro); border-color: var(--libera); color: #0f5a31; }
.orario-btn.bambini { background: var(--bambini-chiaro); border-color: var(--bambini); color: #8a1c1c; }
.orario-btn.occupato { background: #eee; border-color: #999; color: #555; }
.orario-btn.scelto { background: var(--rosa); border-color: var(--rosa-scuro); color: #fff; box-shadow: 0 3px 0 var(--rosa-scuro); }
.riga-ora { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.riga-ora input[type=time] { min-height: 46px; border-radius: 10px; border: 2px solid var(--bordo); padding: 0 10px; }

/* turni giusy */
.turni-sett { display: grid; gap: 8px; }
.riga-turno { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; border: 2px solid var(--bordo); background: #fff; }
.riga-turno.domenica { opacity: .75; }
.riga-turno .gg { font: 700 16px var(--font-titoli); }
.riga-turno .gg small { display: block; font: 700 12.5px var(--font); color: var(--tenue); }
.tipi { display: flex; flex-wrap: wrap; gap: 6px; }
.tipi button { flex: 1 1 auto; min-height: 42px; padding: 4px 10px; border-radius: 10px; border: 2px solid var(--bordo); background: #fff; font-weight: 800; cursor: pointer; font-size: 14px; }
.tipi button.on.mattina, .tipi button.on.pomeriggio { background: var(--bambini-chiaro); border-color: var(--bambini); color: #8a1c1c; }
.tipi button.on.riposo, .tipi button.on.libero { background: var(--libera-chiaro); border-color: var(--libera); color: #0f5a31; }
.tipi button.on.nessuno { background: var(--vuoto-chiaro); border-color: var(--vuoto); }
.ore-turno { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--tenue); }
.ore-turno input { min-height: 40px; border-radius: 10px; border: 2px solid var(--bordo); padding: 0 8px; }

/* rubrica */
.cerca { min-height: 50px; border-radius: 12px; border: 2px solid var(--bordo); padding: 0 14px; width: 100%; font-size: 17px; }
.lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lista li > button { width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--bordo); background: #fff; cursor: pointer; display: grid; gap: 2px; }
.lista li b { font-size: 16px; }
.lista li small { color: var(--tenue); font-weight: 700; }
.storico { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.storico li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fbf6f9; border: 1px solid var(--bordo); font-weight: 700; }
.storico li.futuro { background: var(--rosa-chiaro); border-color: var(--rosa); }
.coll { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.coll input { min-height: 46px; border-radius: 10px; border: 2px solid var(--bordo); padding: 0 10px; width: 100%; }

/* ---------- telefono ---------- */
@media (max-width: 1100px) {
  .griglia { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; gap: 10px; -webkit-overflow-scrolling: touch; }
  .giorno { flex: 0 0 min(300px, 84vw); scroll-snap-align: start; }
  .menu .btn span { display: none; }
  .menu .btn.giusy span { display: inline; }
}
@media (max-width: 700px) {
  #app { padding: 8px 16px 40px; }
  .logo { width: 52px; height: 52px; font-size: 14px; border-radius: 16px; }
  .menu { margin-left: 0; width: 100%; }
  .menu .btn { flex: 1; padding: 8px 6px; }
  .naviga .btn span { display: none; }
  .naviga .btn { flex: 1; }
  .vai { flex: 1 1 100%; }
  .f-piede .btn { flex: 1 1 auto; }
  .riga-turno { grid-template-columns: 1fr; }
  .ore-turno { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* ---------- stampa settimanale ---------- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; font-size: 11px; }
  .menu, .sync, .naviga, .info-riga, .legenda, .aggiungi, #modali, .logo { display: none !important; }
  #app { padding: 0; max-width: none; }
  .griglia { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; overflow: visible !important; gap: 4px; }
  .giorno, .mattone { box-shadow: none !important; break-inside: avoid; opacity: 1 !important; }
  .giorno { flex: none !important; }
  .griglia.sette { grid-template-columns: repeat(7, 1fr) !important; }
  .app { animation: none; padding: 3px 4px 3px 9px; }
  .banda { min-height: 0; padding: 3px 6px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}