/* Tema ARTEC: rosso del logo, fondo chiaro, schede arrotondate, pulsanti grandi (uso col dito). */
:root {
  --rosso: #BC182C;
  --rosso-scuro: #9a1323;
  --rosso-chiaro: #fbe9eb;
  --fondo: #f6f6f8;
  --scheda: #ffffff;
  --testo: #1d1d22;
  --grigio: #6b6b75;
  --grigio-chiaro: #e7e7ec;
  --verde: #2a9d55;
  --arancio: #f39a1e;
  --raggio: 16px;
  --ombra: 0 2px 10px rgba(20, 20, 40, .07);
  --tocco: 52px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo); color: var(--testo);
  font: 17px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
h1 { font-size: 1.7rem; margin: .1em 0; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 1.4em 0 .6em; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.banner-prova {
  position: sticky; top: 0; z-index: 20; text-align: center; font-weight: 700; font-size: .9rem;
  padding: 8px 12px; color: #3b2a00;
  background: repeating-linear-gradient(-45deg, #ffd34d 0 18px, #ffc21a 18px 36px);
}

.banner-rete {
  position: sticky; top: 0; z-index: 21; text-align: center; font-weight: 700; font-size: .9rem;
  padding: 8px 12px; color: #fff; background: var(--rosso);
}
.banner-rete.ok { background: var(--verde); }
.banner-rete a { color: inherit; text-decoration: underline; }

.guscio { display: flex; min-height: 100vh; }
main { flex: 1; padding: 20px 16px 110px; max-width: 980px; margin: 0 auto; width: 100%; }
.attesa { color: var(--grigio); text-align: center; margin-top: 30vh; }

/* Menu: in basso su telefono e tablet verticale, a sinistra su schermi larghi */
.menu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-around;
  background: var(--scheda); border-top: 1px solid var(--grigio-chiaro);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.menu-logo { display: none; }
.menu a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: var(--tocco);
  justify-content: center; font-size: .78rem; color: var(--grigio); border-radius: 12px; cursor: pointer; }
.menu a svg { width: 26px; height: 26px; fill: currentColor; }
.menu a.attivo { color: var(--rosso); font-weight: 700; }
.menu a small { font-size: .62rem; }

@media (min-width: 900px) {
  .menu { position: sticky; top: 0; height: 100vh; flex-direction: column; justify-content: flex-start; gap: 6px;
    width: 220px; border-top: 0; border-right: 1px solid var(--grigio-chiaro); padding: 20px 14px; }
  .menu-logo { display: block; width: 130px; margin: 0 auto 24px; }
  .menu a { flex: 0; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 14px; font-size: 1rem; }
  .menu a.attivo { background: var(--rosso-chiaro); }
  .menu a small { margin-left: auto; }
  main { padding: 32px 40px; }
  .banner-prova ~ .guscio .menu { height: calc(100vh - 36px); top: 36px; }
}

.scheda { background: var(--scheda); border-radius: var(--raggio); box-shadow: var(--ombra); }

/* Saluto e riquadri della home */
.saluto p { margin: 0; font-size: 1.25rem; }
.saluto h1 { font-size: 2.3rem; }
.saluto .sotto { color: var(--grigio); font-size: 1.05rem; }
.logo-piccolo { width: 92px; margin-bottom: 8px; }
@media (min-width: 900px) { .logo-piccolo { display: none; } }
.riquadri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .riquadri { grid-template-columns: repeat(4, 1fr); } }
.riquadro { background: var(--scheda); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 16px;
  min-height: 130px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.riquadro:active { transform: scale(.98); }
.riquadro small { color: var(--grigio); }
.icona { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--grigio-chiaro); }
.icona svg { width: 24px; height: 24px; fill: #444; }
.icona.rossa { background: var(--rosso); } .icona.rossa svg { fill: #fff; }
.icona.verde { background: var(--verde); } .icona.verde svg { fill: #fff; }

/* Elementi non ancora attivi: grigi con la scritta "da finire" */
.da-finire { opacity: .45; cursor: not-allowed !important; filter: grayscale(1); }
.da-finire small { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

/* Accesso */
.accesso { max-width: 440px; margin: 4vh auto 0; text-align: center; }
.logo-grande { width: 200px; margin-bottom: 10px; }
.accesso .sotto { color: var(--grigio); }
.modulo { text-align: left; padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; }
input:not([type=checkbox]) { font: inherit; min-height: var(--tocco); padding: 10px 14px; border: 1.5px solid var(--grigio-chiaro);
  border-radius: 12px; background: #fff; }
input:focus { outline: none; border-color: var(--rosso); box-shadow: 0 0 0 3px var(--rosso-chiaro); }
.errore { color: var(--rosso); font-weight: 600; margin: 0; }

.pulsante { font: inherit; font-weight: 700; min-height: var(--tocco); padding: 12px 20px; border-radius: 14px; border: 0;
  background: var(--grigio-chiaro); color: var(--testo); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pulsante.principale { background: var(--rosso); color: #fff; }
.pulsante.principale:active { background: var(--rosso-scuro); }
.pulsanti { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }

/* Barre e elenchi */
.barra-titolo { display: flex; align-items: center; gap: 10px; }
.indietro { font-size: 2.2rem; line-height: 1; width: var(--tocco); height: var(--tocco); display: grid; place-items: center; border-radius: 50%; }
.elenco { padding: 4px 16px; }
.riga { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; min-height: var(--tocco);
  border-bottom: 1px solid var(--grigio-chiaro); font-weight: 400; flex-direction: row; }
.riga:last-child { border-bottom: 0; }
.riga > span { display: flex; flex-direction: column; }
.riga small { color: var(--grigio); font-weight: 400; }
.percorso { font-size: .85rem; word-break: break-all; text-align: right; }
.interruttore input { width: 28px; height: 28px; accent-color: var(--rosso); flex: none; }
.voce-registro { padding: 12px 0; border-bottom: 1px solid var(--grigio-chiaro); overflow-wrap: anywhere; }
.voce-registro:last-child { border-bottom: 0; }
.voce-registro .quando { color: var(--grigio); font-size: .85rem; }
.voce-registro .valori { font-size: .85rem; color: var(--grigio); }
.nota { color: var(--grigio); font-size: .85rem; margin-top: 24px; }

/* Clienti */
.barra-titolo h1 { flex: 1; }
.pulsante.tondo { width: var(--tocco); height: var(--tocco); padding: 0; border-radius: 50%; font-size: 1.8rem; }
.cerca { width: 100%; margin: 14px 0 0; }
.lista-schede { display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.scheda-cliente { background: var(--scheda); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 12px 16px;
  display: flex; align-items: center; gap: 14px; min-height: 72px; }
.scheda-cliente:active { transform: scale(.99); }
.scheda-cliente .iniziale { width: 44px; height: 44px; border-radius: 50%; background: var(--rosso-chiaro); color: var(--rosso);
  font-weight: 800; display: grid; place-items: center; flex: none; }
.scheda-cliente .testo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.scheda-cliente small { color: var(--grigio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheda-cliente .freccia { color: var(--grigio); font-size: 1.6rem; }
.vuoto { color: var(--grigio); text-align: center; padding: 30px 0; }

.griglia { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .griglia { grid-template-columns: 1fr 1fr; } .griglia .largo { grid-column: 1 / -1; } }
.griglia .nota { margin: 0; }
textarea { font: inherit; min-height: 90px; padding: 10px 14px; border: 1.5px solid var(--grigio-chiaro); border-radius: 12px; resize: vertical; }
textarea:focus { outline: none; border-color: var(--rosso); box-shadow: 0 0 0 3px var(--rosso-chiaro); }
.errore-campo { color: var(--rosso); font-weight: 600; }
.errore-campo:empty { display: none; }
.campo-errato input, .campo-errato textarea { border-color: var(--rosso); }

.scelta { display: flex; gap: 8px; background: var(--fondo); padding: 5px; border-radius: 14px; }
.scelta label { flex: 1; }
.scelta input { position: absolute; opacity: 0; pointer-events: none; }
.scelta span { display: grid; place-items: center; min-height: 46px; border-radius: 10px; font-weight: 700; cursor: pointer; color: var(--grigio); }
.scelta input:checked + span { background: var(--scheda); color: var(--rosso); box-shadow: var(--ombra); }
.scelta input:focus-visible + span { outline: 3px solid var(--rosso-chiaro); }

.avviso { background: #fff6e0; border: 1.5px solid var(--arancio); border-radius: 14px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px; }
.avviso .riga { border-bottom-color: #f3e2b8; }
.avviso .pulsante { flex: none; }

/* Rilievi */
.icona.arancio { background: var(--arancio); } .icona.arancio svg { fill: #fff; }
.sotto-titolo { color: var(--grigio); margin: -4px 0 14px 62px; }
button.scheda-cliente { font: inherit; text-align: left; border: 0; width: 100%; cursor: pointer; color: inherit; }
.riga-cerca { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.riga-cerca .cerca { margin: 0; flex: 1; }
.riga-cerca .pulsante { flex: none; }
.pulsante.piccolo { min-height: 44px; padding: 8px 16px; margin: 6px 0 12px; font-size: .95rem; }
.pulsante.grande { min-height: 60px; font-size: 1.1rem; width: 100%; }
.pulsante:disabled { opacity: .45; cursor: not-allowed; }
.pulsanti.larghi { display: flex; flex-direction: column; gap: 12px; max-width: none; margin-top: 20px; }
@media (min-width: 700px) { .pulsanti.larghi { flex-direction: row; } }
.luogo { flex-direction: row; }
.luogo input { flex: 1; max-width: 60%; min-height: 44px; }
.scheda-voce { background: var(--scheda); border-radius: var(--raggio); box-shadow: var(--ombra); display: flex; align-items: center;
  gap: 12px; padding: 10px 12px; }
.testo-voce { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 64px; min-width: 0; }
.testo-voce .badge { flex: none; }
@media (max-width: 520px) { .testo-voce { flex-wrap: wrap; } .testo-voce .badge { margin-left: 48px; } }
.testo-voce .numero { width: 36px; height: 36px; border-radius: 50%; background: var(--rosso); color: #fff; font-weight: 800;
  display: grid; place-items: center; flex: none; }
.testo-voce .testo { flex: 1; display: flex; flex-direction: column; min-width: 140px; }
.testo-voce small { color: var(--grigio); }
.miniatura { width: 96px; height: 72px; border-radius: 10px; background: var(--fondo); border: 1.5px dashed var(--grigio-chiaro);
  color: var(--grigio); font-size: .62rem; display: grid; place-items: center; text-align: center; white-space: pre-line; flex: none; }
.badge { font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.badge.ok { background: #e3f5ea; color: var(--verde); }
.badge.da-fare { background: #fff1d6; color: #9a5b00; }
.elimina { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fondo); color: var(--grigio);
  font-size: 1.1rem; cursor: pointer; flex: none; }
.elimina:hover { background: var(--rosso-chiaro); color: var(--rosso); }
/* Conferma del rilievo */
.finestra-fondo { position: fixed; inset: 0; z-index: 60; background: rgba(20, 20, 30, .4); display: grid; place-items: center;
  padding: 16px; overflow: auto; }
.finestra { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; }
.finestra h2 { margin: 0; }
.scelte-preventivo { display: flex; flex-direction: column; gap: 8px; }
.scelta-preventivo { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px; border: 1.5px solid var(--grigio-chiaro);
  border-radius: 12px; cursor: pointer; font-weight: 400; }
.scelta-preventivo:has(input:checked) { border-color: var(--rosso); background: var(--rosso-chiaro); }
.scelta-preventivo input { width: 22px; height: 22px; accent-color: var(--rosso); flex: none; margin-top: 2px; }
.scelta-preventivo span { display: flex; flex-direction: column; gap: 2px; }
.scelta-preventivo small { color: var(--grigio); }
.esito.giallo { background: #fff6e0; border: 1.5px solid var(--arancio); }
.catena { padding: 16px 18px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.catena h2 { margin: 0; }
.catena .titolo-ok { color: var(--verde); }
.catena .titolo-errore { color: #b45f00; }
.catena .grande { font-size: 1.15rem; font-weight: 700; margin: 0; }
.passi { display: flex; flex-direction: column; gap: 8px; }
.passo { display: flex; gap: 12px; align-items: flex-start; }
.passo .segno { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none;
  background: var(--fondo); color: var(--grigio); }
.passo.ok .segno { background: #e3f5ea; color: var(--verde); }
.passo.errore .segno { background: #fde3e3; color: var(--rosso); }
.passo .testo { display: flex; flex-direction: column; min-width: 0; }
.passo small { color: var(--grigio); word-break: break-word; }
.passo.errore small { color: var(--rosso); font-weight: 600; }

.preventivatore { border-top: 1.5px solid var(--grigio-chiaro); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.preventivatore h3 { margin: 0; }
.stato-consegna { margin: 0; font-weight: 700; padding: 8px 12px; border-radius: 10px; }
.stato-consegna.attesa { background: #fff1d6; color: #9a5b00; }
.stato-consegna.fatto { background: #e3f5ea; color: var(--verde); }
.dettagli-consegna summary { cursor: pointer; color: var(--grigio); font-weight: 600; min-height: 36px; }
.istruzioni, .nota-agente { white-space: pre-wrap; background: var(--fondo); border-radius: 10px; padding: 12px; font-size: .85rem;
  max-height: 320px; overflow: auto; margin: 6px 0; }
.dettagli-consegna small { white-space: pre-wrap; word-break: break-all; display: block; }

.testa-voci { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 1.4em 0 .6em; }
.testa-voci h2 { margin: 0; }
.azioni-voce { display: flex; gap: 6px; flex: none; }
.azione { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fondo); color: var(--testo);
  font: inherit; font-size: 1.15rem; cursor: pointer; display: grid; place-items: center; }
.azione:hover { background: var(--rosso-chiaro); color: var(--rosso); }
@media (max-width: 520px) { .scheda-voce { flex-wrap: wrap; } .azioni-voce { width: 100%; justify-content: flex-end; } }
.esito { border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.esito.verde { background: #e3f5ea; border: 1.5px solid var(--verde); }
/* Scelta del prodotto: riquadri con il disegnino del tipo di prodotto */
.griglia-prodotti { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
@media (min-width: 640px) { .griglia-prodotti { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .griglia-prodotti { grid-template-columns: repeat(4, 1fr); } }
.riquadro.prodotto { border: 2px solid transparent; font: inherit; color: inherit; text-align: center; align-items: center;
  justify-content: flex-start; gap: 10px; padding: 18px 12px 16px; min-height: 150px;
  transition: border-color .15s, box-shadow .15s, transform .1s; }
.riquadro.prodotto:hover { border-color: var(--rosso-chiaro); box-shadow: 0 6px 18px rgba(188, 24, 44, .12); }
.riquadro.prodotto:focus-visible { outline: none; border-color: var(--rosso); }
.riquadro.prodotto .testo { display: flex; flex-direction: column; gap: 3px; }
.riquadro.prodotto b { font-size: 1.05rem; line-height: 1.2; }
.riquadro.prodotto small { font-size: .8rem; line-height: 1.3; }
.icona-prodotto { width: 64px; height: 64px; border-radius: 18px; background: var(--rosso-chiaro); display: grid; place-items: center; flex: none; }
.icona-prodotto svg { width: 44px; height: 44px; fill: none; stroke: var(--rosso); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icona-prodotto svg .fine { stroke-width: 1.4; }
.icona-prodotto svg .vetro { fill: rgba(188, 24, 44, .08); }
.testa-famiglia { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.testa-famiglia h2 { margin: 0; }
.etichetta { font-weight: 600; }
.con-unita { display: flex; align-items: center; gap: 8px; }
.con-unita input { flex: 1; }
.unita { color: var(--grigio); font-weight: 700; }
select { font: inherit; min-height: var(--tocco); padding: 10px 14px; border: 1.5px solid var(--grigio-chiaro); border-radius: 12px; background: #fff; }
.avviso-campo { color: #9a5b00; font-weight: 600; }
.avviso-campo:empty { display: none; }
.salvataggio { font-size: .85rem; color: var(--grigio); white-space: nowrap; }
.salvataggio.ok { color: var(--verde); }
.salvataggio.errore { color: var(--rosso); font-weight: 700; }
.miniatura img { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; background: #fff; }
.miniatura:has(img) { border-style: solid; }
.blocco-disegno { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.elenco-disegni { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; }
.riquadro-disegno { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 1 1 260px; max-width: 560px; }
.miniatura { position: relative; }
.conta-disegni { position: absolute; right: -6px; top: -6px; background: var(--rosso); color: #fff; font-size: .72rem;
  font-weight: 800; border-radius: 10px; padding: 1px 6px; }
.anteprima-disegno { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; object-fit: contain; border: 1.5px solid var(--grigio-chiaro);
  border-radius: 12px; background: #fff; }

.gruppo-campi { margin: 10px 0 -4px; font-size: 1rem; color: var(--rosso); border-bottom: 1.5px solid var(--rosso-chiaro);
  padding-bottom: 6px; }
.blocco-foto { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.elenco-foto { display: flex; flex-wrap: wrap; gap: 10px; }
.foto-voce { position: relative; width: 120px; height: 90px; }
.foto-voce img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--grigio-chiaro); }
.foto-voce .elimina { position: absolute; top: -10px; right: -10px; width: 36px; height: 36px; box-shadow: var(--ombra); background: #fff; }
label.pulsante { flex-direction: row; cursor: pointer; }

/* Editor del disegno: schermo intero */
body.con-editor { overflow: hidden; }
.editor { position: fixed; inset: 0; z-index: 50; background: #e9e9ee; display: flex; flex-direction: column; }
.editor-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: var(--scheda);
  box-shadow: var(--ombra); }
.editor-barra .gruppo { display: flex; gap: 4px; background: var(--fondo); padding: 4px; border-radius: 12px; }
.editor-barra .gruppo button { font: inherit; min-width: 48px; min-height: 48px; border: 0; border-radius: 9px; background: transparent;
  cursor: pointer; font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; color: var(--testo); }
.editor-barra .gruppo button small { font-size: .8rem; font-weight: 600; }
@media (max-width: 760px) {
  .editor-barra .gruppo button small { display: none; }
}
.editor-barra .gruppo button.attivo { background: var(--scheda); box-shadow: var(--ombra); color: var(--rosso); }
.editor-barra .gruppo button:disabled { opacity: .35; }
.editor-barra .colore { width: 48px; padding: 0; }
.editor-barra .colore.attivo { outline: 3px solid var(--scheda); box-shadow: 0 0 0 5px var(--rosso) !important; }
.editor-barra .spessore i { display: block; border-radius: 50%; background: var(--testo); }
.editor-barra .pulsante { min-height: 48px; }
.editor-area { flex: 1; display: grid; place-items: center; padding: 10px; min-height: 0; }
.editor-area canvas { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.15); border-radius: 6px; touch-action: none; }
.pannello-fondo { position: absolute; inset: 0; background: rgba(20, 20, 30, .35); display: grid; place-items: center; padding: 16px; overflow: auto; }
.pannello-guidato { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; }
.pannello-guidato h2 { margin: 0; }
.pannello-guidato .nota { margin: 0; }
.pannello-guidato .due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pannello-guidato .ante { display: flex; flex-direction: column; gap: 8px; }
.riga-anta { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: center; }
@media (max-width: 520px) { .riga-anta { grid-template-columns: 1fr; } .pannello-guidato .due { grid-template-columns: 1fr; } }
input:disabled, textarea:disabled, select:disabled { background: var(--fondo); color: var(--testo); }

/* Profili */
.scheda-profilo { flex-wrap: wrap; }
.scheda-profilo.spento { opacity: .55; }
.azioni-profilo { display: flex; gap: 8px; }
.azioni-profilo .pulsante.piccolo { margin: 0; }
.pulsanti.centrati { margin: 20px auto 0; }
.collegamento { color: var(--rosso); font-weight: 700; text-decoration: underline; }
.gruppo-campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; }

/* Calendario: tre colori ben distinti (lavori dei ragazzi, cose per me, ore fatte) */
:root { --cal-lavoro: #1f6fd1; --cal-lavoro-chiaro: #e6f0fc; --cal-personale: var(--rosso); --cal-personale-chiaro: var(--rosso-chiaro);
  --cal-ore: var(--verde); --cal-ore-chiaro: #e3f5ea; }
.attesa.piccola { margin: 20px 0; }
.cal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-barra .pulsante.piccolo { margin: 0; }
.cal-frecce { display: flex; gap: 6px; }
.cal-frecce .pulsante { min-width: 44px; padding: 8px 12px; }
.cal-titolo { flex: 1; min-width: 160px; font-size: 1.05rem; }
.cal-titolo::first-letter { text-transform: uppercase; }
.cal-viste { padding: 4px; }
.cal-viste span { min-height: 38px; padding: 0 12px; font-size: .9rem; }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; margin-bottom: 12px; color: var(--grigio); }
.cal-voce-legenda { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cal-voce-legenda i, .cal-dettaglio-tipo i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lavoro > i { background: var(--cal-lavoro); }
.personale > i { background: var(--cal-personale); }
.ore > i { background: var(--cal-ore); }
.cal-voce-legenda.da-finire { cursor: default !important; }

.cal-settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-colonna { background: var(--scheda); border-radius: 12px; box-shadow: var(--ombra); padding: 6px; min-height: 180px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-colonna.festivo { background: #fafafc; }
.cal-lista { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.cal-giorno-testa { font: inherit; border: 0; background: transparent; cursor: pointer; display: flex; align-items: baseline; gap: 6px;
  padding: 4px 6px; border-radius: 8px; color: var(--testo); }
.cal-giorno-testa small { color: var(--grigio); text-transform: uppercase; font-size: .75rem; font-weight: 700; }
.cal-giorno-testa.oggi b { background: var(--rosso); color: #fff; border-radius: 50%; min-width: 28px; height: 28px;
  display: inline-grid; place-items: center; }
.cal-aggiungi { font: inherit; border: 1.5px dashed var(--grigio-chiaro); background: transparent; border-radius: 8px; color: var(--grigio);
  min-height: 34px; cursor: pointer; font-weight: 700; }
.cal-aggiungi:hover { border-color: var(--rosso); color: var(--rosso); }
@media (max-width: 699px) {
  .cal-settimana { grid-template-columns: 1fr; }
  .cal-colonna { min-height: 0; }
  .cal-colonna .cal-aggiungi { align-self: flex-start; padding: 0 16px; }
}

.cal-impegno { font: inherit; text-align: left; border: 0; border-left: 5px solid; border-radius: 8px; padding: 5px 7px; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; font-size: .82rem; line-height: 1.25; color: var(--testo); }
.cal-impegno.lavoro { background: var(--cal-lavoro-chiaro); border-color: var(--cal-lavoro); }
.cal-impegno.personale { background: var(--cal-personale-chiaro); border-color: var(--cal-personale); }
.cal-impegno.ore { background: var(--cal-ore-chiaro); border-color: var(--cal-ore); }
.cal-impegno small { color: var(--grigio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-impegno .cal-riga { display: flex; flex-wrap: wrap; gap: 0 5px; align-items: baseline; min-width: 0; }
.cal-impegno:not(.mini) .cal-cosa { flex-basis: 100%; }
.cal-impegno .cal-cosa { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; word-break: break-word; }
.cal-impegno .cal-ora { font-weight: 800; white-space: nowrap; }
.cal-impegno.lavoro .cal-ora { color: var(--cal-lavoro); }
.cal-impegno.personale .cal-ora { color: var(--cal-personale); }
.cal-impegno.fatto { opacity: .6; }
.cal-impegno.fatto .cal-cosa { text-decoration: line-through; }
.cal-spunta { color: var(--verde); font-weight: 900; }
.cal-impegno.esteso { font-size: .95rem; padding: 10px 12px; min-height: var(--tocco); }
.cal-impegno.esteso .cal-cosa { -webkit-line-clamp: unset; }
.cal-impegno.mini { padding: 2px 5px; font-size: .72rem; border-left-width: 4px; }
.cal-impegno.mini .cal-cosa { -webkit-line-clamp: 1; font-weight: 600; }
.cal-impegno.mini .cal-riga { flex-wrap: nowrap; }

.cal-giorno { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cal-giorno .vuoto { padding: 16px 0; }
.cal-giorno .pulsante.piccolo { align-self: flex-start; margin: 4px 0 0; }

.cal-mese { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-mese-nome { text-align: center; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--grigio); padding: 4px 0; }
.cal-cella { background: var(--scheda); border-radius: 8px; box-shadow: var(--ombra); min-height: 92px; padding: 3px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cella.fuori { opacity: .45; }
.cal-cella .cal-giorno-testa { padding: 2px 4px; font-size: .85rem; }
.cal-altri { font: inherit; font-size: .72rem; font-weight: 700; color: var(--grigio); background: transparent; border: 0; cursor: pointer;
  text-align: left; padding: 0 4px; }
@media (max-width: 699px) { .cal-cella { min-height: 64px; } .cal-impegno.mini .cal-cosa { display: none; }
  .cal-impegno.mini { min-height: 8px; padding: 0; } }

.cal-dettaglio-tipo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--grigio); }
.cal-dettaglio { padding: 0; }
.cal-dettaglio .riga b { text-align: right; }
.cal-persone { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-persona { flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid var(--grigio-chiaro);
  border-radius: 12px; font-weight: 600; cursor: pointer; min-height: 48px; }
.cal-persona:has(input:checked) { border-color: var(--cal-lavoro); background: var(--cal-lavoro-chiaro); }
.cal-persona input { width: 22px; height: 22px; accent-color: var(--cal-lavoro); }
.cal-persone .nota { margin: 0; }
.cal-cliente { display: flex; flex-direction: column; gap: 6px; }
.cal-cliente input { width: 100%; }
.cal-cliente-scelto { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 14px;
  border-radius: 12px; background: var(--fondo); }
.cal-cliente-scelto .pulsante.piccolo { margin: 0; }
.cal-risultati { display: flex; flex-direction: column; gap: 4px; }
.cal-risultato { font: inherit; text-align: left; border: 1px solid var(--grigio-chiaro); background: #fff; border-radius: 10px;
  padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; }
.cal-risultato:hover { border-color: var(--rosso); }
.cal-risultato small { color: var(--grigio); font-weight: 400; }
.scelta-lavoro input:checked + span { color: var(--cal-lavoro); }
.cal-avviso { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.cal-avviso .pulsante.piccolo { margin: 0; }
.finestra h3 { margin: 6px 0 0; font-size: 1rem; }

/* Ore: modulo e elenco (ragazzi e admin) */
.modulo-ore { display: flex; flex-direction: column; gap: 10px; }
.campo-ore { display: flex; align-items: center; gap: 14px; padding: 12px 14px; font-weight: 400; flex-direction: row; }
.icona-ore { width: 40px; height: 40px; border-radius: 10px; background: var(--fondo); display: grid; place-items: center;
  font-size: 1.2rem; flex: none; }
.corpo-ore { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.corpo-ore > small:first-child { color: var(--grigio); font-weight: 600; }
.corpo-ore select, .corpo-ore input, .corpo-ore textarea { width: 100%; }
.valore-ore { font-size: 1.1rem; display: block; }
.nota-ore { color: var(--grigio); }
.conta { color: var(--grigio); text-align: right; }
.riquadri-ore { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.riquadro-ore { font: inherit; border: 0; border-radius: var(--raggio); background: var(--fondo); padding: 14px; display: flex;
  flex-direction: column; align-items: center; gap: 2px; min-height: 84px; }
.riquadro-ore span { font-size: 1.4rem; }
.elenco-ore { display: flex; flex-direction: column; gap: 6px; }
.riga-ora { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--cal-ore-chiaro);
  border-left: 5px solid var(--cal-ore); border-radius: 10px; flex-wrap: wrap; }
.riga-ora .testo { flex: 1; display: flex; flex-direction: column; min-width: 160px; }
.riga-ora small { color: var(--grigio); }
.riga-ora .pulsante.piccolo { margin: 0; min-height: 40px; }
.elenco-ore .nota { margin: 0; }

/* Versione dei ragazzi (layout della reference: saluto, tre riquadri, lista di oggi, azioni grandi) */
.ragazzi { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ragazzi h2 { margin: 10px 0 0; }
.testa-r { display: grid; grid-template-columns: var(--tocco) 1fr var(--tocco); align-items: center; }
.testa-r h1 { text-align: center; font-size: 1.35rem; margin: 0; }
.saluto-r p { margin: 0; font-size: 1.2rem; }
.saluto-r h1 { font-size: 2.2rem; margin: 0; }
.saluto-r .sotto { color: var(--grigio); font-size: 1rem; margin-top: 4px; }
.riga-logo { display: flex; justify-content: space-between; align-items: center; }
.riga-logo .logo-piccolo { display: block; }
.campanella { font-size: 1.4rem; }
.icona-r { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.icona-r svg { width: 26px; height: 26px; fill: currentColor; }
.icona-r.grigia { background: var(--fondo); color: #555; }
.icona-r.rossa { background: var(--rosso-chiaro); color: var(--rosso); }
.icona-r.piccola { width: 28px; height: 28px; }
.icona-r.piccola svg { width: 20px; height: 20px; }
.riquadri-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.riquadro-r { background: var(--scheda); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 12px 8px; display: flex;
  flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.riquadro-r b { font-size: 1.8rem; line-height: 1.1; }
.riquadro-r small { color: var(--grigio); font-size: .82rem; }
.riquadro-r.rosso { background: #fff3f4; } .riquadro-r.rosso .icona-r { color: var(--rosso); }
.riquadro-r.arancio { background: #fff8ec; } .riquadro-r.arancio .icona-r { color: var(--arancio); }
.nota-mini { font-size: .7rem !important; font-weight: 700; text-transform: uppercase; color: var(--grigio); }
.titolo-r { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.titolo-r .vedi { color: var(--rosso); font-weight: 600; }
.lista-r { display: flex; flex-direction: column; gap: 8px; }
.giorno-r { margin: 6px 0 0; font-weight: 700; color: var(--grigio); font-size: .9rem; text-transform: capitalize; }
.scheda-lavoro { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 72px; }
.scheda-lavoro .testo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.scheda-lavoro small { color: var(--grigio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheda-lavoro .freccia { color: var(--grigio); font-size: 1.6rem; }
.scheda-lavoro.fatto { opacity: .65; }
.azioni-r { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.azioni-r.tre { grid-template-columns: repeat(3, 1fr); }
.azione-r { font: inherit; border: 0; border-radius: var(--raggio); background: var(--grigio-chiaro); color: var(--testo); padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; text-align: center; cursor: pointer; }
.azione-r .icona-r { background: transparent; }
.azione-r.principale { background: var(--rosso); color: #fff; }
.azione-r small { font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.luogo-r { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--grigio); font-size: 1.05rem; }
.sotto-r { color: var(--grigio); margin: 0; text-transform: none; }
.griglia-r { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tessera-r { display: flex; gap: 10px; align-items: flex-start; padding: 12px; min-width: 0; }
.tessera-r .testo { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.tessera-r small { color: var(--grigio); word-break: break-word; }
.pill { display: inline-block; padding: 3px 12px; border-radius: 20px; font-weight: 700; font-size: .85rem; margin-top: 2px; }
.pill.corso { background: #e3f5ea; color: var(--verde); }
.pill.fatto { background: var(--grigio-chiaro); color: #444; }
.nota-r { margin: 0; color: var(--grigio); }
.lista-grigia { padding: 4px 16px; }
.conferma-r { padding: 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.conferma-r p.grande { font-size: 3rem; color: var(--verde); margin: 0; }
.conferma-r h2 { margin: 0; }
.menu-ragazzi a.da-finire { pointer-events: none; }
@media (max-width: 340px) { .azioni-r.tre { grid-template-columns: 1fr 1fr; } .griglia-r { grid-template-columns: 1fr; } }

/* Notifiche */
.notifiche-box .riga { flex-direction: column; align-items: flex-start; }
.notifiche-box .pulsanti { padding-bottom: 14px; }
.invito-notifiche { display: flex; flex-direction: column; padding: 12px 14px; border-left: 5px solid var(--rosso); }
.invito-notifiche small { color: var(--grigio); }
a.campanella { font-size: 1.4rem; }
.cal-campanella { font-size: .75rem; }

/* Versione dei ragazzi semplicissima: bottoni grandi a tutta larghezza */
.bottoni-r { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.bottone-r { font: inherit; font-size: 1.2rem; font-weight: 800; border: 0; border-radius: 18px; min-height: 68px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; text-align: center; cursor: pointer;
  background: var(--scheda); color: var(--testo); box-shadow: var(--ombra); }
.bottone-r.rosso { background: var(--rosso); color: #fff; }
.bottone-r.verde { background: var(--verde); color: #fff; }
.bottone-r.occupato { opacity: .6; pointer-events: none; }
.bottone-r:active { transform: scale(.98); }
.due-r { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.due-r .bottone-r { min-height: 60px; font-size: 1.05rem; }
.link-r { color: var(--rosso); font-weight: 700; text-align: center; padding: 10px; }
.lavoro-r { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.lavoro-r p { margin: 0; }
.cosa-r { font-size: 1.3rem; font-weight: 800; }
.riga-r { color: #444; }
.checklist-r { display: flex; flex-direction: column; gap: 8px; }
.voce-r { flex-direction: row; align-items: center; gap: 14px; background: var(--scheda); box-shadow: var(--ombra); border-radius: 14px;
  padding: 14px 16px; min-height: 64px; font-size: 1.1rem; cursor: pointer; }
.voce-r input { width: 32px; height: 32px; accent-color: var(--verde); flex: none; }
.voce-r span { flex: 1; }
.voce-r small { color: var(--grigio); font-weight: 400; }
.voce-r.fatta span { text-decoration: line-through; color: var(--grigio); }
.tipi-r { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tipo-r { font: inherit; border: 3px solid transparent; border-radius: 16px; background: var(--scheda); box-shadow: var(--ombra);
  min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.tipo-r span { font-size: 2rem; }
.tipo-r.scelto { border-color: var(--rosso); background: var(--rosso-chiaro); }
.testo-r { width: 100%; min-height: 90px; font-size: 1.1rem; }
.anteprime-r { display: flex; flex-wrap: wrap; gap: 8px; }
.anteprime-r img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
.urgente-r.acceso { background: #ffe1e1; color: var(--rosso); border: 3px solid var(--rosso); }
.nota-r { color: var(--grigio); margin: 0; text-align: center; }
.ragazzi .badge.da-fare { white-space: nowrap; }

/* Segnalazioni (admin) e checklist nel calendario */
.segnalazioni .segnalazione { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border-left: 6px solid var(--arancio); }
.segnalazione.urgente { border-left-color: var(--rosso); }
.testa-segn { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.testo-segn { margin: 0; font-size: 1.05rem; }
.nota-segn { color: var(--grigio); }
.segnalazione .pulsante { align-self: flex-start; }
.badge.urgente { background: var(--rosso); color: #fff; }
.icona.rossa svg { fill: #fff; }
.suggerimenti-checklist { display: flex; flex-wrap: wrap; gap: 6px; }
.suggerimenti-checklist .pulsante.piccolo { margin: 0; min-height: 36px; font-size: .85rem; }
.finestra .anteprime-r img { width: 72px; height: 72px; }

/* Admin nell'account di un ragazzo */
.banner-admin { text-align: center; font-weight: 700; font-size: .9rem; padding: 8px 12px;
  background: #1f6fd1; color: #fff; }
.dettagli-r { padding: 14px 16px; }
.dettagli-r summary { font-weight: 700; cursor: pointer; }

/* Voce del rilievo: disegno e foto in alto, «Altri dettagli» chiusi */
.media-voce { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; padding: 12px; border-radius: 14px;
  background: var(--fondo); }
.media-voce > * { flex: 1 1 260px; }
.avanzate { border: 1.5px solid var(--grigio-chiaro); border-radius: 14px; padding: 4px 14px; background: #fff; }
.avanzate > summary { cursor: pointer; padding: 12px 0; min-height: var(--tocco); display: flex; align-items: center;
  gap: 6px; list-style: none; }
.avanzate > summary::-webkit-details-marker { display: none; }
.avanzate > summary::after { content: "▾"; margin-left: auto; color: var(--grigio); font-size: 1.2rem; }
.avanzate[open] > summary::after { content: "▴"; }
.conta-avanzati { color: var(--grigio); font-weight: 400; }
.avanzate > .griglia { padding-bottom: 14px; }

/* Piantina del rilievo (richiesta di Simone, 28/10/2026) */
.blocco-piantina { padding: 14px 16px; }
.blocco-piantina .testa-voci { margin-top: 0; }
.anteprime-piantina { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.anteprima-piano { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1.5px solid var(--grigio-chiaro);
  border-radius: 12px; background: var(--scheda); cursor: pointer; font: inherit; color: var(--testo); text-align: left; }
.anteprima-piano img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #fff; border-radius: 6px; }
.anteprima-piano small { font-weight: 600; }
.barra-piani { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; background: var(--fondo);
  border-bottom: 1px solid var(--grigio-chiaro); }
.scheda-piano { font: inherit; font-weight: 600; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1.5px solid var(--grigio-chiaro);
  background: var(--scheda); color: var(--testo); cursor: pointer; }
.scheda-piano.attivo { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.area-piantina { display: block; padding: 0; overflow: hidden; }
.area-piantina canvas { display: block; box-shadow: none; border-radius: 0; touch-action: none; }
@media (max-width: 760px) {
  /* telefono: le barre stanno su una riga sola che scorre col dito, così il foglio resta grande */
  .editor-barra, .barra-piani { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .editor-barra > *, .barra-piani > * { flex: none; }
}
.riga-spunta { display: flex; align-items: center; gap: 8px; }
.testo-voce .numero.con-tag { background: var(--blu, #1f5fbf); }

/* Prodotti aggiunti al serramento */
.aggiunte { border-top: 1.5px solid var(--grigio-chiaro); padding-top: 8px; }
.aggiunte .nota { margin: 0 0 8px; }
.interruttori-aggiunte { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.interruttore-aggiunta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 22px;
  border: 1.5px solid var(--grigio-chiaro); background: var(--scheda); font-weight: 600; cursor: pointer; }
.interruttore-aggiunta:has(input:checked) { border-color: var(--rosso); background: #fdecee; color: var(--rosso); }
.interruttore-aggiunta input { width: 20px; height: 20px; accent-color: var(--rosso); }
.sezione-aggiunta { border: 1.5px solid #f2c9cf; border-radius: 12px; padding: 10px; margin-bottom: 10px; }