/* Pannello di gestione: stesso aspetto dal telefono e dal computer.
   Colori dei pulsanti fissi in tutto il pannello: Modifica blu, Salva/Approva verde, Elimina/Rifiuta rosso, Sospendi/avvisi arancio */
:root {
	--blu-si: #204664;
	--arancio-si: #fa9c2d;
	--fondo: #f2f4f7;
	--carta: #ffffff;
	--testo: #1c2733;
	--grigio: #5d6b7a;
	--linea: #dbe1e8;
	--verde: #1f8a4c;
	--rosso: #c0392b;
	--blu: #2563a8;
	--arancio: #c96f00;
	--raggio: 8px;
}
*, *::before, *::after {box-sizing: border-box;}
body {margin: 0; background: var(--fondo); color: var(--testo); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;}
a {color: var(--blu);}
h1 {font-size: 1.6rem; margin: 0 0 1rem; line-height: 1.2;}
h2 {font-size: 1.2rem; margin: 1.6rem 0 .6rem;}
[hidden] {display: none !important;}
:focus-visible {outline: 3px solid var(--arancio-si); outline-offset: 2px;}
small {color: var(--grigio);}

/* barra e menu */
.barra {background: var(--blu-si); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .7rem 1rem;}
.barra a {color: #fff;}
.barra-marchio {font-weight: 700; font-size: 1.1rem; text-decoration: none; margin-right: auto;}
.barra-esci-attivita {background: var(--arancio-si); color: #1c2733 !important; padding: .2em .7em; border-radius: 99px; text-decoration: none; font-size: .85rem; font-weight: 600;}
.barra-utente {font-size: .9rem; opacity: .9;}
.menu {display: flex; gap: .2rem; overflow-x: auto; background: var(--carta); border-bottom: 1px solid var(--linea); padding: .3rem .5rem; scrollbar-width: thin;}
.menu a {white-space: nowrap; text-decoration: none; color: var(--testo); padding: .5rem .8rem; border-radius: 6px; font-weight: 500;}
.menu a[aria-current] {background: var(--blu-si); color: #fff;}
.menu .menu-super {color: var(--arancio);}
.menu .menu-sito {color: var(--grigio);}
.pagina {max-width: 60rem; margin: 0 auto; padding: 1.2rem 1rem 4rem;}
@media (min-width: 64rem) {
	body:not(.fuori) {display: grid; grid-template-columns: 14rem 1fr; grid-template-rows: auto 1fr;}
	.barra {grid-column: 1 / -1;}
	.menu {flex-direction: column; border-bottom: 0; border-right: 1px solid var(--linea); padding: 1rem .6rem; overflow: visible;}
	.menu .menu-super:first-of-type {margin-top: 1rem;}
	.pagina {padding-top: 2rem; width: 100%;}
}

/* pulsanti */
.btn {display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 2.5rem; padding: .45rem .95rem; border: 0; border-radius: var(--raggio); font-weight: 600; font-size: .95rem; line-height: 1.2; font-family: inherit; text-decoration: none; cursor: pointer; background: #e6e9ee; color: var(--testo); white-space: nowrap;}
.btn:hover {filter: brightness(1.07);}
.btn-verde {background: var(--verde); color: #fff;}
.btn-verde-chiaro {background: #dff2e7; color: var(--verde);}
.btn-rosso {background: var(--rosso); color: #fff;}
.btn-blu {background: var(--blu); color: #fff;}
.btn-arancio {background: var(--arancio); color: #fff;}
.btn-grigio {background: #e6e9ee; color: var(--testo);}
.btn-nuovo {background: var(--blu-si); color: #fff;}
.btn-largo {width: 100%; min-height: 3rem; font-size: 1.05rem;}
.btn:disabled {opacity: .55; cursor: wait;}

/* avvisi */
.avviso {padding: .75rem 1rem; border-radius: var(--raggio); margin: 0 0 1rem; font-weight: 500;}
.avviso-ok {background: #e1f4e8; color: #14532d;}
.avviso-errore {background: #fde4e1; color: #7f1d1d;}
.avviso-info {background: #fff1dd; color: #6b3b00;}
.avviso a {color: inherit; font-weight: 700;}
.aiuto {display: block; color: var(--grigio); font-size: .9rem; margin: .3rem 0 .8rem;}
.vuoto {color: var(--grigio); background: var(--carta); border: 1px dashed var(--linea); border-radius: var(--raggio); padding: 1rem;}
.testo-rosso {color: var(--rosso);}

/* elenchi */
.testa-elenco {display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem;}
.testa-elenco .cerca {flex: 1 1 12rem; min-height: 2.5rem; padding: .4rem .7rem; border: 1px solid var(--linea); border-radius: var(--raggio); font: inherit;}
.testa-elenco .btn-nuovo {margin-left: auto;}
.gruppo {font-size: 1.05rem; color: var(--blu-si); border-bottom: 2px solid var(--blu-si); padding-bottom: .2rem;}
.gruppo small {font-weight: 400;}
.righe {list-style: none; margin: 0 0 1rem; padding: 0;}
.riga {display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: .6rem .8rem; margin-bottom: .4rem;}
.riga.in-movimento {box-shadow: 0 6px 20px rgba(0, 0, 0, .15); border-color: var(--blu); opacity: .9;}
.maniglia {cursor: grab; color: var(--grigio); font-size: 1.3rem; touch-action: none; padding: .2rem; user-select: none;}
.miniatura {width: 48px; height: 48px; border-radius: 6px; background: var(--fondo); overflow: hidden; flex: none;}
.miniatura img {width: 100%; height: 100%; object-fit: cover;}
.riga-testo {flex: 1 1 14rem; display: flex; flex-wrap: wrap; gap: .1rem .8rem; align-items: baseline; color: var(--testo); text-decoration: none; min-width: 0;}
.riga-testo strong {flex-basis: 100%;}
.riga-dato {color: var(--grigio); font-size: .92rem;}
.riga-azioni {display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; margin-left: auto;}
.riga-azioni form {margin: 0;}
.campione {display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 4px; vertical-align: middle;}

/* interruttori: acceso o spento, si vede da lontano */
.interruttore {min-height: 2.5rem; padding: .4rem .8rem; border-radius: 99px; border: 2px solid var(--linea); background: var(--carta); color: var(--grigio); font-weight: 600; font-size: .9rem; font-family: inherit; cursor: pointer;}
.interruttore-visibile[aria-pressed="true"] {border-color: var(--verde); color: var(--verde);}
.interruttore-visibile[aria-pressed="false"] {text-decoration: line-through;}
.interruttore-esaurito[aria-pressed="true"] {background: var(--rosso); border-color: var(--rosso); color: #fff;}

/* moduli */
.modulo {background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1.2rem;}
.campo {margin-bottom: 1rem;}
.campo label, .etichetta {display: block; font-weight: 600; margin-bottom: .3rem;}
.campo input:not([type=checkbox]):not([type=radio]):not([type=color]), .campo select, .campo textarea, .naviga-giorno input, .campi-riga > input, .campi-riga > select {width: 100%; min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid #b8c2cd; border-radius: 6px; font: inherit; background: #fff; color: var(--testo);}
.campo .corto, input.corto {max-width: 10rem;}
.con-errore input, .con-errore select, .con-errore textarea {border-color: var(--rosso);}
.errore {display: block; color: var(--rosso); font-weight: 600; font-size: .9rem; margin-top: .2rem;}
.obbl {color: var(--rosso);}
.spunta {display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; margin: .2rem 1rem .2rem 0; cursor: pointer;}
.spunta input {width: 1.2rem; height: 1.2rem;}
.spunte {display: flex; flex-wrap: wrap;}
.gruppo-campi {border: 0; border-top: 1px solid var(--linea); padding: 1rem 0 0; margin: 1rem 0 0;}
.gruppo-campi legend {font-weight: 700; color: var(--blu-si); padding-right: .5rem;}
.campi-riga {display: flex; flex-wrap: wrap; gap: 0 1rem;}
.campi-riga .campo {flex: 1 1 10rem;}
.anteprima {max-width: 240px; border-radius: var(--raggio); display: block; margin-bottom: .5rem;}
.traduzione {border: 1px solid var(--linea); border-radius: var(--raggio); padding: .6rem .9rem; margin-top: 1rem; background: #fafbfc;}
.traduzione summary {cursor: pointer; font-weight: 600;}
.traduzione summary small {color: var(--arancio); margin-left: .4rem;}
.azioni-modulo {display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; border-top: 1px solid var(--linea); margin-top: 1.2rem; padding-top: 1rem;}
.modulo-elimina {display: flex; justify-content: flex-end; margin-top: 1rem;}
.sotto {text-align: center; margin: 1rem 0 0;}
.in-linea {display: inline-block; margin: 0 .4rem .6rem 0;}

/* accesso */
body.fuori {display: grid; place-items: center; min-height: 100vh; padding: 1rem; background: linear-gradient(160deg, #204664, #13293b);}
.riquadro-accesso {background: var(--carta); width: 100%; max-width: 26rem; border-radius: 14px; padding: 1.8rem 1.6rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);}
.riquadro-accesso .modulo {border: 0; padding: 0;}
.accesso-marchio {font-weight: 800; font-size: 1.5rem; margin: 0;}
.sol {color: var(--blu-si);} .inf {color: var(--arancio-si);}
.accesso-sotto {color: var(--grigio); margin: 0 0 1.4rem;}

/* prenotazioni */
.naviga-giorno {display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem;}
.naviga-giorno form {margin: 0;}
.naviga-giorno input[type=date] {width: auto;}
.naviga-giorno .btn-nuovo {margin-left: auto;}
.giorno-titolo {font-size: 1.1rem; margin: 0 0 1rem; color: var(--grigio);}
.giorno-titolo strong {color: var(--testo);}
.turno {margin-bottom: 1.6rem;}
.turno-testa {display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; border-bottom: 2px solid var(--blu-si); margin-bottom: .6rem; padding-bottom: .3rem;}
.turno-testa h2 {margin: 0; font-size: 1.4rem;}
.turno-testa h2 small {font-size: .9rem; font-weight: 500;}
.riempimento {display: flex; align-items: center; gap: .5rem; margin-left: auto; font-weight: 700;}
.riempimento-barra {display: block; width: 8rem; height: .55rem; background: var(--fondo); border-radius: 99px; overflow: hidden; border: 1px solid var(--linea);}
.riempimento-barra span {display: block; height: 100%; background: var(--verde);}
.riempimento-barra .quasi {background: var(--arancio);}
.riempimento-barra .pieno {background: var(--rosso);}
.prenotazioni {list-style: none; margin: 0; padding: 0;}
.prenotazione {display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; background: var(--carta); border: 1px solid var(--linea); border-left: 5px solid var(--verde); border-radius: var(--raggio); padding: .6rem .8rem; margin-bottom: .45rem;}
.prenotazione.stato-richiesta {border-left-color: var(--arancio-si); background: #fffaf2;}
.prenotazione.stato-arrivata {border-left-color: var(--blu);}
.prenotazione.stato-annullata, .prenotazione.stato-rifiutata, .prenotazione.stato-noshow {border-left-color: #b9c1ca; opacity: .65;}
.prenotazione.stato-annullata strong, .prenotazione.stato-rifiutata strong {text-decoration: line-through;}
.pren-persone {font-size: 1.6rem; font-weight: 800; min-width: 2.2rem; text-align: center; color: var(--blu-si);}
.pren-dati {flex: 1 1 12rem; display: flex; flex-direction: column;}
.pren-note {background: #fff6c8; padding: .1rem .4rem; border-radius: 4px; font-size: .92rem; align-self: flex-start; margin-top: .2rem;}
.pren-meta {color: var(--grigio); font-size: .85rem;}
.etichetta-stato {font-weight: 700;}
.stato-richiesta .etichetta-stato {color: var(--arancio);}
.scelta-turno {border: 1px solid var(--linea); border-radius: var(--raggio); padding: .4rem .7rem; background: #fff;}

/* cruscotto */
.tessere {display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; margin-bottom: 1.4rem;}
.tessera {display: flex; flex-direction: column; gap: .15rem; background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; padding: 1rem; color: var(--testo); text-decoration: none;}
.tessera-accesa {border-color: var(--arancio-si); box-shadow: inset 4px 0 0 var(--arancio-si);}
.tessera-titolo {color: var(--grigio); font-size: .9rem; font-weight: 600;}
.tessera-numero {font-size: 2.3rem; font-weight: 800; line-height: 1.1; color: var(--blu-si);}
.tessera-numero small {font-size: 1.1rem; color: var(--grigio);}
.tessera-testo {font-size: 1.5rem;}
.tessera-nota {color: var(--grigio); font-size: .88rem;}
.tessera .riempimento-barra {width: 100%; margin-top: .4rem;}
.riquadro {background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1rem;}
.riquadro h2 {margin-top: 0;}
.due-riquadri {display: grid; gap: 0 1rem;}
@media (min-width: 48rem) {.due-riquadri {grid-template-columns: 1fr 1fr;}}
.grafico {display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end;}
.colonna-grafico {display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--testo); min-width: 0;}
.cg-area {position: relative; width: 100%; height: 9rem; display: block;}
.cg-capienza, .cg-pieni {position: absolute; bottom: 0; left: 12%; right: 12%; border-radius: 4px 4px 0 0;}
.cg-capienza {background: #e3e9f0;}
.cg-pieni {background: var(--blu-si);}
.cg-pieni.pieno {background: var(--rosso);}
.cg-valore {font-size: .75rem; font-weight: 700; margin-top: .2rem;}
.cg-giorno {font-size: .72rem; color: var(--grigio); text-align: center; line-height: 1.2;}
.colonna-grafico.chiuso .cg-giorno {opacity: .5;}
.legenda-grafico {font-size: .85rem; color: var(--grigio); margin: .7rem 0 0;}
.legenda-grafico span {display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin: 0 .3rem 0 .8rem;}
.lg-pieni {background: var(--blu-si);} .lg-capienza {background: #e3e9f0;}
.numeri {display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .8rem; margin: 0;}
.numeri dt {color: var(--grigio); font-size: .85rem;}
.numeri dd {margin: 0; font-size: 1.8rem; font-weight: 800; color: var(--blu-si);}
.scintille {display: flex; align-items: flex-end; gap: 2px; height: 4rem; margin-top: 1rem;}
.scintille span {flex: 1; background: var(--arancio-si); border-radius: 2px 2px 0 0; min-height: 2px;}

/* QR */
.qr-fogli {display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem;}
.qr-cartoncino {background: #fff; border: 1px dashed #9aa6b2; border-radius: 10px; padding: 1rem; text-align: center; break-inside: avoid;}
.qr-codice svg {width: 100%; max-width: 10rem; height: auto;}
.qr-nome {font-weight: 800; margin: 0 0 .6rem;}
.qr-menu {font-weight: 700; font-size: 1.2rem; margin: .5rem 0 0;}
.qr-tavolo {margin: 0; font-size: 1.6rem; font-weight: 800;}
@media print {
	.barra, .menu, .solo-schermo, h1 {display: none !important;}
	body {background: #fff; display: block !important;}
	.pagina {max-width: none; padding: 0;}
	.qr-fogli {grid-template-columns: repeat(3, 1fr);}
}
@media (prefers-reduced-motion: reduce) {* {transition: none !important;}}