/* FrigoDiario: pensato per un tablet appoggiato in cucina, mani bagnate, tocchi grandi */
:root { --accento: #2f6f9f; --accento-chiaro: #e3eef6; --verde: #2e7d4f; --verde-chiaro: #e5f3ea; }
.barra { display: flex; align-items: center; gap: .8em; padding: .7em 1.2em; background: var(--carta); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.logo { font-size: 1.25em; letter-spacing: -.02em; }
.logo span { color: var(--accento); }
.schede { display: flex; gap: .4em; margin-left: auto; flex-wrap: wrap; }
.schede button.attiva { background: var(--accento); color: #fff; border-color: var(--accento); }
.fascia { border-radius: 0; text-align: center; }
main { max-width: 1100px; margin: 0 auto; padding: 1.2em; }
.pannello { display: none; }
.pannello.attivo { display: block; }
.centro { text-align: center; }
.piccola { font-size: .85em; }
.spazio { margin-top: .9em; }
.spazio-su { margin-top: 1em; }
button.grande { font-size: 1.8em; padding: .1em .6em; }

.giorno-testa { display: flex; align-items: center; justify-content: center; gap: 1em; }
.giorno-testa h1 { font-size: 1.5em; margin: 0; min-width: 12em; text-align: center; }
@media (max-width: 560px) { .giorno-testa { gap: .3em; } .giorno-testa h1 { font-size: 1.15em; min-width: 0; flex: 1; } main { padding: .8em; } .barra { padding: .6em .8em; } .schede button { padding: .4em .7em; } }
.apparecchi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1em; margin-top: 1em; }
.app { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1em; box-shadow: var(--ombra); }
.app h3 { margin: 0; font-size: 1.15em; }
.app .limiti { color: var(--tenue); font-size: .9em; margin: .1em 0 .8em; }
.turni { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.turni.uno { grid-template-columns: 1fr; }
.casella { border: 2px dashed #b9c3cc; border-radius: 12px; padding: .8em .5em; text-align: center; background: var(--fondo); cursor: pointer; font: inherit; color: inherit; width: 100%; display: block; }
.casella:hover { border-color: var(--accento); }
.casella .tu { display: block; font-size: .95em; color: #4a5560; font-weight: 600; }
.casella .val { display: block; font-size: 1.7em; font-weight: 700; line-height: 1.3; }
.casella .chi { display: block; font-size: .9em; color: #4a5560; }
.casella.fatta { border-style: solid; border-color: #bcd9c6; background: var(--verde-chiaro); }
.casella.fatta .val { color: var(--verde); }
.casella.fuori { border-style: solid; border-color: #e7a59c; background: var(--rosso-chiaro); }
.casella.fuori .val { color: var(--rosso); }
.casella.manca { border-color: #e0b24a; background: var(--giallo-chiaro); }
.casella .rileva { display: block; font-size: 1.1em; font-weight: 600; color: var(--accento); padding: .45em 0; }

dialog { border: 0; border-radius: 20px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: min(460px, 96vw); max-height: 96vh; overflow-y: auto; }
dialog::backdrop { background: rgba(20,30,40,.45); }
.tast { padding: 1.1em 1.1em 0; }
.tast .piede { position: sticky; bottom: 0; background: #fff; padding: .8em 0 1em; margin-top: .8em; border-top: 1px solid var(--bordo); }
.tast .piede button { font-size: 1.1em; padding: .6em 1.2em; }
.display:focus { outline: none; }
.tast-titolo { margin: 0; font-size: 1.1em; }
.tast-limiti { margin: .2em 0 .6em; }
.display { font-size: 2.6em; font-weight: 800; text-align: center; background: var(--fondo); border-radius: 12px; padding: .2em; margin-bottom: .6em; }
.display.fuori { color: var(--rosso); background: var(--rosso-chiaro); }
.display.dentro { color: var(--verde); background: var(--verde-chiaro); }
.tasti { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45em; }
.tasti button { font-size: 1.7em; font-weight: 600; padding: .45em 0; border-radius: 12px; justify-content: center; color: var(--testo); }
.t-operatori { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .8em; }
.t-operatori button.si { background: var(--accento); color: #fff; border-color: var(--accento); }
.t-fuori { margin-top: .8em; }
.t-azioni { display: flex; flex-wrap: wrap; gap: .4em; margin: .5em 0; }
.t-azioni button { font-size: .9em; }
.t-azioni button.si { background: var(--rosso); color: #fff; border-color: var(--rosso); }

.tabella-mese { overflow-x: auto; }
.tabella-mese table { border-collapse: collapse; background: var(--carta); font-size: .85em; min-width: 100%; }
.tabella-mese th, .tabella-mese td { border: 1px solid var(--bordo); padding: .3em .4em; text-align: center; white-space: nowrap; }
.tabella-mese td.nc { background: var(--rosso-chiaro); color: var(--rosso); font-weight: 700; }
.tabella-mese td.manca { background: var(--giallo-chiaro); }
.tabella-mese td.futuro { background: #fafafa; }
.voce-app { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) 80px 80px auto; gap: .5em; align-items: end; padding: .6em 0; border-bottom: 1px dashed var(--bordo); }
@media (max-width: 640px) { .voce-app { grid-template-columns: 1fr 1fr; } }

#stampa { display: none; }
@media print {
  body.stampando #app, body.stampando dialog { display: none; }
  body.stampando #stampa { display: block; }
  body { background: #fff; }
}
.registro { font: 8.5pt/1.3 Arial, sans-serif; color: #111; }
.registro h1 { font-size: 14pt; margin: 0; }
.registro header p { margin: 1mm 0 3mm; }
.registro h2 { font-size: 11pt; margin: 5mm 0 2mm; }
.registro table { width: 100%; border-collapse: collapse; margin-bottom: 4mm; break-inside: auto; }
.registro th, .registro td { border: .4pt solid #777; padding: .4mm 1mm; text-align: center; }
.registro table.reg td { height: 4.6mm; }
.registro th small, .registro td small { display: block; font-size: 6pt; color: #555; }
.registro table.reg td small { display: inline; margin-left: 1mm; font-size: 7pt; }
.registro td.gg { font-weight: 700; width: 9mm; }
.registro td.nc { font-weight: 700; background: #eee; }
.registro .nc-tab td { text-align: left; }
.registro tr { break-inside: avoid; }
.registro footer { display: flex; justify-content: space-between; margin-top: 4mm; font-size: 8.5pt; gap: 4mm; }
.registro .ok { font-style: italic; }
.registro .filigrana { text-align: center; font-weight: 700; margin-top: 3mm; }