/* Mise en Place - foglio di stile di base. Schermate d'ufficio: leggibili,
   contrasto alto (WCAG 2.1 AA), niente effetti. */
:root {
  --blu: #1f3864; --blu-chiaro: #e8eef7; --testo: #1a1a1a; --grigio: #5a5a5a;
  --bordo: #c9c9c9; --sfondo: #f6f6f4; --bianco: #fff;
  --ok: #1e6b32; --ok-sfondo: #e4f3e7; --avviso: #7a4b00; --avviso-sfondo: #fff2d6;
  --errore: #8f1d1d; --errore-sfondo: #fbe3e3; --fuoco: #d97706;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--testo); background: var(--sfondo); line-height: 1.45; }
a { color: var(--blu); }
:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 2px; }
.salta { position: absolute; left: -999px; top: 0; background: var(--bianco); padding: .5rem 1rem; z-index: 10; }
.salta:focus { left: .5rem; top: .5rem; }

.testata { background: var(--blu); color: var(--bianco); }
.testata-interno { max-width: 1100px; margin: 0 auto; padding: .6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.marchio { color: var(--bianco); text-decoration: none; font-weight: 700; font-size: 1.25rem; }
.sottotitolo { color: #cfd8e8; font-size: .9rem; }
.etichetta { font-size: .75rem; font-weight: 700; letter-spacing: .05em; padding: .15rem .5rem; border-radius: 3px; }
.etichetta-collaudo { background: var(--fuoco); color: #1a1a1a; }
.navigazione { margin-left: auto; display: flex; gap: 1rem; }
.navigazione a { color: var(--bianco); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.navigazione a[aria-current="page"], .navigazione a:hover { border-bottom-color: var(--bianco); }

.contenuto { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.pie { max-width: 1100px; margin: 0 auto; padding: 1rem; color: var(--grigio); font-size: .85rem; border-top: 1px solid var(--bordo); }
h1 { font-size: 1.6rem; margin: .25rem 0 1rem; color: var(--blu); }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
code { background: var(--blu-chiaro); padding: 0 .3rem; border-radius: 3px; font-size: .95em; }
pre.dettaglio { background: var(--bianco); border: 1px solid var(--bordo); padding: .75rem; overflow-x: auto; font-size: .85rem; }

.scheda { background: var(--bianco); border: 1px solid var(--bordo); border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.scheda-pericolo { border-color: var(--errore); }
.avviso { padding: .6rem .9rem; border-radius: 4px; margin-bottom: .75rem; border: 1px solid; }
.avviso-ok { background: var(--ok-sfondo); color: var(--ok); border-color: var(--ok); }
.avviso-avviso { background: var(--avviso-sfondo); color: var(--avviso); border-color: var(--avviso); }
.avviso-errore { background: var(--errore-sfondo); color: var(--errore); border-color: var(--errore); }
.esito-ok { color: var(--ok); font-weight: 600; }
.esito-errore { color: var(--errore); font-weight: 600; }

.modulo { max-width: 32rem; }
.campo { margin-bottom: .8rem; }
.campo label { display: block; font-weight: 600; margin-bottom: .2rem; }
.campo input, .campo select, .campo textarea { width: 100%; padding: .45rem .55rem; font: inherit; border: 1px solid var(--grigio); border-radius: 4px; background: var(--bianco); }
.campo .aiuto { color: var(--grigio); font-size: .85rem; }
.bottone { display: inline-block; font: inherit; font-weight: 600; padding: .5rem 1rem; border-radius: 4px; border: 1px solid var(--blu); background: var(--blu); color: var(--bianco); cursor: pointer; text-decoration: none; }
.bottone:hover { background: #172a4b; }
.bottone-secondario { background: var(--bianco); color: var(--blu); }
.bottone-secondario:hover { background: var(--blu-chiaro); }
.bottone-pericolo { background: var(--errore); border-color: var(--errore); }
.bottone-pericolo:hover { background: #6e1414; }

.tabella { border-collapse: collapse; width: 100%; margin-top: .75rem; background: var(--bianco); }
.tabella caption { text-align: left; color: var(--grigio); font-size: .9rem; padding: .25rem 0; }
.tabella th, .tabella td { border: 1px solid var(--bordo); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.tabella th { background: var(--blu-chiaro); }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.scorri { overflow-x: auto; }

@media (max-width: 700px) {
  .navigazione { margin-left: 0; width: 100%; }
  .contenuto { padding: 1rem .75rem 2rem; }
}

/* Blocco 1 */
.barra-titolo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.barra-titolo h1, .barra-titolo h2 { margin: 0; }
.schede-anagrafiche { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: 1rem; font-size: .95rem; }
.schede-anagrafiche a { padding: .2rem .5rem; border-radius: 4px; text-decoration: none; }
.schede-anagrafiche a[aria-current="page"] { background: var(--blu); color: var(--bianco); }
.modulo-inline { display: inline; }
.collegamento { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.navigazione .collegamento { color: var(--bianco); text-decoration: none; }
.azioni a, .azioni form { margin-right: .6rem; }
.azioni-modulo { display: flex; gap: .75rem; margin-top: 1rem; align-items: center; }
.campo-errore input, .campo-errore select, .campo-errore textarea { border-color: var(--errore); border-width: 2px; }
.campo .errore { color: var(--errore); font-size: .9rem; font-weight: 600; }
.giorni { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.giorni label, .campo-check label { font-weight: 400; }
.numero { max-width: 12rem; text-align: right; }
.filtri { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; }
.filtri .campo { margin-bottom: 0; min-width: 10rem; }
.nota { color: var(--grigio); font-size: .9rem; }
.inattivo td { color: var(--grigio); font-style: italic; }
.evidenziata td { background: var(--avviso-sfondo); }
.paginazione { display: flex; gap: 1.5rem; margin-top: .75rem; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.scheda-collegamento { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: inherit; }
.scheda-collegamento:hover { border-color: var(--blu); }
.scheda-collegamento span { color: var(--grigio); font-size: .9rem; }
.tabella td small { color: var(--grigio); }

/* Blocco 2 */
.affiancati { display: flex; gap: .5rem; }
.affiancati select { width: auto; }
.modulo-riga { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin-top: .75rem; }
.modulo-riga label { display: flex; flex-direction: column; font-size: .9rem; font-weight: 600; gap: .2rem; }
.modulo-riga label.cresce { flex: 1 1 22rem; }
.modulo-riga input, .modulo-riga select { padding: .35rem .5rem; font: inherit; border: 1px solid var(--grigio); border-radius: 4px; }
.modulo-riga .numero { width: 7rem; }
.modulo-riga h3, .modulo-riga .aiuto { width: 100%; margin: 0; }
.visivamente-nascosto { position: absolute; left: -9999px; }
.tabella tfoot th, .tabella tfoot td { background: var(--blu-chiaro); }
.scheda-piatto { background: var(--bianco); padding: 1.5rem; border: 1px solid var(--bordo); max-width: 800px; }
.intestazione-stampa { height: 8.5rem; overflow: hidden; margin-bottom: .5rem; }
.intestazione-stampa img { width: 100%; height: auto; display: block; }
.procedimento { white-space: normal; line-height: 1.6; }
@media print {
  .testata, .pie, .salta, .solo-schermo, .avviso { display: none !important; }
  .contenuto { padding: 0; max-width: none; }
  .scheda-piatto { border: 0; padding: 0; max-width: none; }
  body { background: #fff; }
}

.allergeni { border: 1px solid var(--bordo); border-radius: 4px; padding: .5rem .75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem .75rem; }
.allergeni legend { font-weight: 600; }
.allergeni label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 400; }
.allergeni select { width: auto; }

/* Blocco 3 */
.griglia-due { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
.documento h1 { font-size: 1.3rem; }
.documento h2 { font-size: 1.05rem; margin-top: 1rem; }
.documento table { font-size: .9rem; }

/* Blocco 4 */
.tabella-prospetto th, .tabella-prospetto td { font-size: .9rem; padding: .3rem .4rem; }
.numero-cella { width: 5.5rem; text-align: right; padding: .2rem .3rem; font: inherit; border: 1px solid var(--grigio); border-radius: 3px; }

/* Logo nella testata */
.marchio { display: inline-flex; align-items: center; gap: .6rem; }
.logo { height: 3.6rem; width: auto; border-radius: 4px; background: var(--bianco); padding: 2px; }
.logo-ritaglio { display: inline-block; width: 2.4rem; height: 2.6rem; background: var(--bianco) url("intestazione_istituto.png") no-repeat; background-size: 26rem auto; background-position: -2.75rem -1rem; }

/* Pie di pagina e pagine legali */
.pie p { margin: .25rem 0; }
.pie a { color: var(--blu); }
.documento ul { padding-left: 1.2rem; }
.documento li { margin-bottom: .4rem; }

/* Stampa multipla */
hr.salto-pagina { border: 0; border-top: 2px dashed var(--bordo); margin: 2rem 0; }
@media print { hr.salto-pagina { border: 0; margin: 0; page-break-after: always; } }