/* =====================================================================
   GESTIONE SICUREZZA — foglio di stile

   COLORI: UNI EN ISO 7010 / ISO 3864, la segnaletica di sicurezza vera.
           Rosso divieto, giallo avvertimento, verde salvataggio,
           blu prescrizione. I colori che i lavoratori hanno gia' sui muri.

   FONT:   di sistema. NESSUN font caricato da Google o altri CDN:
           manderebbe l'IP di ogni utente a un server terzo (GDPR).
   ===================================================================== */

:root {
  /* Segnaletica ISO 7010 */
  --rosso:        #C8102E;   /* divieto / antincendio  -> SCADUTA */
  --rosso-tenue:  #FBE9EC;
  --giallo:       #F2A900;   /* avvertimento           -> IN SCADENZA */
  --giallo-tenue: #FEF4E0;
  --verde:        #007A45;   /* salvataggio            -> IN REGOLA */
  --verde-tenue:  #E5F3EC;
  --blu:          #00539B;   /* prescrizione           -> DA FARE */
  --blu-tenue:    #E4EEF7;

  /* Struttura */
  --inchiostro:   #16181A;
  --grigio-scuro: #4A5054;
  --grigio:       #7C8388;
  --linea:        #D3D7DA;
  --linea-tenue:  #E6E9EB;
  --carta:        #F1F2F0;
  --bianco:       #FFFFFF;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --r: 3px;
  --ombra: 0 1px 2px rgba(22,24,26,.06), 0 4px 12px rgba(22,24,26,.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Etichette in stile segnaletica ---------- */
.etichetta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grigio);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* =====================================================================
   ACCESSO
   ===================================================================== */
.accesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(22,24,26,.02), rgba(22,24,26,.06)),
    var(--carta);
}

.riquadro {
  width: 100%;
  max-width: 400px;
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--ombra);
  overflow: hidden;
}

/* La fascia blu = "prescrizione": azione obbligatoria. ISO 7010. */
.riquadro-testata {
  padding: 26px 30px 22px;
  border-top: 5px solid var(--blu);
  border-bottom: 1px solid var(--linea-tenue);
}
.riquadro-testata h1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.riquadro-testata p {
  margin-top: 5px;
  font-size: 13px;
  color: var(--grigio);
}
.riquadro-corpo { padding: 26px 30px 30px; }

/* =====================================================================
   MODULI
   ===================================================================== */
.campo { margin-bottom: 17px; }
.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--grigio-scuro);
}
.campo input {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--inchiostro);
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  transition: border-color .12s, box-shadow .12s;
}
.campo input:focus {
  outline: none;
  border-color: var(--blu);
  box-shadow: 0 0 0 3px rgba(0,83,155,.14);
}
.campo .aiuto {
  margin-top: 6px;
  font-size: 12px;
  color: var(--grigio);
}

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bianco);
  background: var(--blu);
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .12s;
}
.bottone:hover  { background: #00447F; }
.bottone:focus-visible { outline: 3px solid rgba(0,83,155,.35); outline-offset: 2px; }
.bottone-neutro { background: var(--grigio-scuro); }
.bottone-neutro:hover { background: var(--inchiostro); }

/* =====================================================================
   AVVISI  -  colori ISO
   ===================================================================== */
.avviso {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 18px;
  font-size: 13.5px;
  border-radius: var(--r);
  border-left: 4px solid;
}
.avviso-errore  { background: var(--rosso-tenue);  border-color: var(--rosso);  color: #8A0B20; }
.avviso-ok      { background: var(--verde-tenue);  border-color: var(--verde);  color: #005731; }
.avviso-attenz  { background: var(--giallo-tenue); border-color: var(--giallo); color: #7A5500; }
.avviso-info    { background: var(--blu-tenue);    border-color: var(--blu);    color: #003A6B; }

/* =====================================================================
   TESTATA APPLICAZIONE
   ===================================================================== */
.testata {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  height: 56px;
  background: var(--inchiostro);
  color: var(--bianco);
}
.testata .marchio {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.testata .marchio span { color: var(--giallo); }

.menu { display: flex; gap: 2px; margin-left: 8px; flex: 1; }
.menu a {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  border-radius: var(--r);
}
.menu a:hover   { color: #fff; background: rgba(255,255,255,.08); }
.menu a.attivo  { color: var(--inchiostro); background: var(--giallo); }

.testata-destra { display: flex; align-items: center; gap: 14px; }
.testata-destra .chi { font-size: 12.5px; color: rgba(255,255,255,.7); }
.testata-destra .chi b { color: #fff; font-weight: 600; }
.testata-destra a.esci {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.62); text-decoration: none;
  padding: 5px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r);
}
.testata-destra a.esci:hover { color: #fff; border-color: rgba(255,255,255,.5); }

/* Selettore azienda */
.selettore {
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12.5px;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r);
}
.selettore option { color: var(--inchiostro); }

/* =====================================================================
   PAGINA
   ===================================================================== */
.pagina { max-width: 2200px; margin: 0 auto; padding: 26px 24px 60px; }

.titolo-pagina {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}
.titolo-pagina h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.titolo-pagina .sotto { font-size: 13px; color: var(--grigio); margin-top: 2px; }

/* ---------- Contatori ---------- */
.contatori {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.contatore {
  padding: 15px 16px;
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--linea);
  border-radius: var(--r);
}
.contatore .n {
  display: block;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.contatore .et {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grigio);
}
.contatore.rosso  { border-top-color: var(--rosso);  }
.contatore.rosso  .n { color: var(--rosso);  }
.contatore.giallo { border-top-color: var(--giallo); }
.contatore.giallo .n { color: #B37A00; }
.contatore.blu    { border-top-color: var(--blu);    }
.contatore.blu    .n { color: var(--blu);    }
.contatore.verde  { border-top-color: var(--verde);  }
.contatore.verde  .n { color: var(--verde);  }

/* ---------- Riquadro contenuto ---------- */
.scheda {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  margin-bottom: 22px;
  overflow: hidden;
}
.scheda-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linea-tenue);
  background: #FAFBFB;
}
.scheda-testata h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grigio-scuro);
}
.scheda-corpo { padding: 18px; }

/* ---------- Avvisi in elenco (targhe di sicurezza) ---------- */
.targa {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linea-tenue);
}
.targa:last-child { border-bottom: 0; }
.targa .indicatore {
  flex: 0 0 4px;
  align-self: stretch;
  min-height: 34px;
  border-radius: 2px;
}
.targa.rosso  .indicatore { background: var(--rosso);  }
.targa.giallo .indicatore { background: var(--giallo); }
.targa .testo { flex: 1; min-width: 0; }
.targa .capo { font-size: 14px; font-weight: 600; }
.targa .coda { font-size: 12.5px; color: var(--grigio); margin-top: 1px; }
.targa .grado {
  flex: 0 0 auto;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 2px;
}
.targa.rosso  .grado { background: var(--rosso-tenue);  color: #8A0B20; }
.targa.giallo .grado { background: var(--giallo-tenue); color: #7A5500; }

/* ---------- Tabella ---------- */
table.dati { width: 100%; border-collapse: collapse; font-size: 14px; }
table.dati th {
  padding: 9px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grigio);
  background: #FAFBFB;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
table.dati td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea-tenue);
  vertical-align: middle;
}
table.dati tbody tr:last-child td { border-bottom: 0; }
table.dati tbody tr:hover { background: #FBFCFC; }
table.dati td.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pastiglie di stato ---------- */
.stato {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
}
.stato-scaduta        { background: var(--rosso);  color: #fff; }
.stato-in_scadenza    { background: var(--giallo); color: #3D2A00; }
.stato-ok             { background: var(--verde-tenue); color: #005731; }
.stato-da_effettuare  { background: var(--blu-tenue);   color: #003A6B; }
.stato-non_incaricato { background: var(--linea-tenue); color: var(--grigio); }

.vuoto { padding: 34px 18px; text-align: center; color: var(--grigio); font-size: 14px; }

/* ---------- Accessibilita' ---------- */
:focus-visible { outline: 3px solid rgba(0,83,155,.4); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Telefono ---------- */
@media (max-width: 720px) {
  .testata { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .menu { order: 3; width: 100%; overflow-x: auto; }
  .pagina { padding: 18px 14px 40px; }
  table.dati { font-size: 13px; }
  table.dati th, table.dati td { padding: 8px 9px; }
}