@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
  --blu: #0F2B5B;
  --blu-2: #1B3F7D;
  --giallo: #FFC20E;
  --carta: #F2F4F7;
  --bianco: #FFFFFF;
  --inchiostro: #14213D;
  --grigio: #5B6474;
  --linea: #D5DAE3;
  --rosso: #C62828;
  --arancio: #D9771E;
  --verde: #1E8449;
  --raggio: 6px;
  --f-testo: 'Atkinson Hyperlegible', 'Segoe UI', Arial, sans-serif;
  --f-tabellone: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--f-testo); color: var(--inchiostro); background: var(--carta); line-height: 1.5; font-size: 16px; }
h1, h2, h3 { font-family: var(--f-tabellone); font-weight: 600; line-height: 1.1; margin: 0; }
a { color: var(--blu-2); }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; }

.barra { background: var(--blu); color: var(--bianco); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.barra h1 { font-size: 26px; }
.barra .sotto { color: #B9C6DE; font-size: 14px; }
.barra a, .barra button.link { color: var(--bianco); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }

.contenuto { max-width: 1100px; margin: 0 auto; padding: 20px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--blu-2); background: var(--bianco); color: var(--blu); padding: 8px 14px; border-radius: var(--raggio); cursor: pointer; font-weight: 700; }
.btn:hover { background: #E8EEF8; }
.btn.primario { background: var(--blu); color: var(--bianco); border-color: var(--blu); }
.btn.primario:hover { background: var(--blu-2); }
.btn.pericolo { border-color: var(--rosso); color: var(--rosso); }
.btn.piccolo { padding: 4px 10px; font-size: 14px; }

.codice { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 0 .25em; background: var(--giallo); color: var(--blu); font-family: var(--f-tabellone); font-weight: 700; border-radius: 3px; }

.stato { font-weight: 700; font-size: 14px; }
.stato.ok { color: var(--verde); }
.stato.avviso { color: var(--arancio); }
.stato.grande { color: var(--rosso); }
.stato.attesa { color: var(--grigio); }

.errore { color: var(--rosso); font-weight: 700; }
.avviso-box { background: #FFF4D6; border-left: 5px solid var(--giallo); padding: 10px 14px; margin: 10px 0; border-radius: 0; }
.errore-box { background: #FDE7E7; border-left: 5px solid var(--rosso); padding: 10px 14px; margin: 10px 0; border-radius: 0; }

table.dati { width: 100%; border-collapse: collapse; background: var(--bianco); }
table.dati th, table.dati td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
table.dati th { font-size: 13px; color: var(--grigio); font-weight: 700; background: #F8F9FB; }
.scorri { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--raggio); }

label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; color: var(--grigio); }
label.campo input, label.campo select { font-weight: 400; color: var(--inchiostro); padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--bianco); }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }