/* ==========================================================================
   Piattaforma HR · HSE · Medicina del Lavoro — foglio di stile del prototipo
   Nessuna dipendenza esterna: font di sistema, icone testuali, grafici SVG.
   ========================================================================== */

:root {
  --blu-900: #0f2942;
  --blu-800: #143a5e;
  --blu-700: #1b4d7e;
  --blu-600: #2166a5;
  --blu-100: #e3eefb;
  --blu-050: #f2f7fd;

  --testo: #16202b;
  --testo-tenue: #5b6b7c;
  --testo-fioco: #8798a8;
  --bordo: #dde4ec;
  --bordo-forte: #c2cedb;
  --fondo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-alt: #f8fafc;

  --rosso: #c0392b;
  --rosso-fondo: #fdecea;
  --ambra: #b26a00;
  --ambra-fondo: #fff4e0;
  --verde: #1d7a4c;
  --verde-fondo: #e6f5ec;
  --grigio-fondo: #eef1f5;
  --viola: #6b3fa0;
  --viola-fondo: #f1ebfa;

  --raggio: 8px;
  --raggio-s: 5px;
  --ombra: 0 1px 2px rgba(15, 41, 66, .06), 0 2px 8px rgba(15, 41, 66, .05);
  --ombra-alta: 0 8px 28px rgba(15, 41, 66, .16);

  --alt-topbar: 56px;
  --largh-laterale: 232px;

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

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--testo);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0 0 10px; }
a { color: var(--blu-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- avviso -- */

.avviso-prototipo {
  position: relative;
  background: #4a3a12;
  color: #ffe9b8;
  font-size: 12.5px;
  padding: 7px 40px 7px 16px;
  text-align: center;
}
.avviso-prototipo strong { color: #ffd166; }
.avviso-chiudi {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 13px; padding: 4px 8px; opacity: .8;
}
.avviso-chiudi:hover { opacity: 1; }
body.avviso-nascosto .avviso-prototipo { display: none; }

/* --------------------------------------------------------------- topbar -- */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--alt-topbar);
  padding: 0 16px;
  background: var(--blu-900);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}

.btn-menu {
  display: none;
  background: none; border: 0; color: #fff;
  font-size: 20px; cursor: pointer; padding: 4px 6px;
}

.marchio { display: flex; align-items: center; gap: 10px; color: #fff; }
.marchio:hover { text-decoration: none; }
.marchio-logo {
  width: 32px; height: 32px; border-radius: var(--raggio-s);
  background: linear-gradient(140deg, var(--blu-600), #3f8fd4);
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px; letter-spacing: .5px;
}
.marchio-testo { display: flex; flex-direction: column; line-height: 1.15; }
.marchio-testo strong { font-size: 13.5px; font-weight: 600; }
.marchio-testo small { font-size: 11px; color: #9fc0e0; }

.topbar-filtri { margin-left: 8px; }
.topbar-azioni { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.campo-inline { display: flex; align-items: center; gap: 6px; }
.campo-inline > span { font-size: 11px; color: #9fc0e0; text-transform: uppercase; letter-spacing: .4px; }
.campo-inline select {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; border-radius: var(--raggio-s);
  padding: 5px 8px; font-size: 12.5px; font-family: inherit;
  max-width: 210px;
}
.campo-inline select option { color: #16202b; background: #fff; }
.campo-ruolo select { background: rgba(255, 209, 102, .16); border-color: rgba(255, 209, 102, .45); }

.btn-notifiche {
  position: relative; background: none; border: 0; color: #fff;
  font-size: 16px; cursor: pointer; padding: 4px;
}
.pallino {
  position: absolute; top: 0; right: -2px;
  background: var(--rosso); color: #fff;
  font-size: 9.5px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: grid; place-items: center; padding: 0 3px;
}

.utente {
  display: flex; align-items: center; gap: 8px;
  padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .16);
}
.utente-iniziali {
  width: 30px; height: 30px; border-radius: 50%;
  background: #3f8fd4; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
}
.utente-testo { display: flex; flex-direction: column; line-height: 1.2; }
.utente-testo strong { font-size: 12.5px; font-weight: 600; }
.utente-testo small { font-size: 10.5px; color: #9fc0e0; }

/* --------------------------------------------------------------- guscio -- */

.guscio { display: flex; min-height: calc(100vh - var(--alt-topbar)); }

.laterale {
  width: var(--largh-laterale);
  flex: 0 0 var(--largh-laterale);
  background: var(--superficie);
  border-right: 1px solid var(--bordo);
  padding: 12px 0 16px;
  display: flex; flex-direction: column;
  position: sticky; top: var(--alt-topbar);
  height: calc(100vh - var(--alt-topbar));
  overflow-y: auto;
  z-index: 30;
}

.menu-gruppo { padding: 4px 0 8px; }
.menu-titolo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--testo-fioco); font-weight: 700;
  padding: 8px 16px 5px;
}
.menu-voce {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 16px; color: var(--testo); font-size: 13.5px;
  border-left: 3px solid transparent; cursor: pointer;
}
.menu-voce:hover { background: var(--blu-050); text-decoration: none; }
.menu-voce.attiva {
  background: var(--blu-100); border-left-color: var(--blu-600);
  color: var(--blu-800); font-weight: 600;
}
.menu-icona { width: 18px; text-align: center; font-size: 14px; opacity: .85; }
.menu-conta {
  margin-left: auto; background: var(--rosso); color: #fff;
  font-size: 10.5px; font-weight: 700; border-radius: 9px;
  padding: 1px 6px; min-width: 18px; text-align: center;
}
.menu-conta.tenue { background: var(--bordo-forte); color: var(--testo-tenue); }

.laterale-piede { margin-top: auto; padding: 12px 16px 0; }
.nota-ruolo {
  font-size: 11px; color: var(--testo-tenue); line-height: 1.4;
  background: var(--superficie-alt); border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); padding: 8px 10px; margin: 0;
}

.velo {
  position: fixed; inset: var(--alt-topbar) 0 0 0;
  background: rgba(15, 41, 66, .4); z-index: 29;
}

.contenuto { flex: 1; min-width: 0; padding: 18px 22px 60px; }
.contenuto:focus { outline: none; }

/* --------------------------------------------------------------- pagina -- */

.pagina-testa {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.pagina-testa .titoli { min-width: 0; }
.pagina-testa h1 { margin-bottom: 3px; }
.sottotitolo { color: var(--testo-tenue); font-size: 13px; margin: 0; }
.pagina-azioni { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.briciole { font-size: 12px; color: var(--testo-tenue); margin-bottom: 8px; }
.briciole a { color: var(--testo-tenue); }

/* --------------------------------------------------------------- schede -- */

.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  margin-bottom: 16px;
  overflow: hidden;
}
.scheda-testa {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--bordo);
  background: var(--superficie-alt);
}
.scheda-testa h2 { font-size: 13.5px; }
.scheda-testa .azioni { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.scheda-corpo { padding: 14px; }
.scheda-corpo.stretto { padding: 0; }
.scheda-piede {
  padding: 9px 14px; border-top: 1px solid var(--bordo);
  background: var(--superficie-alt); font-size: 12px; color: var(--testo-tenue);
}

/* ------------------------------------------------------------ indicatori -- */

.griglia-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.kpi {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 12px 14px;
  box-shadow: var(--ombra); position: relative; overflow: hidden;
  display: block; color: inherit;
}
a.kpi:hover { text-decoration: none; border-color: var(--bordo-forte); box-shadow: var(--ombra-alta); }
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--bordo-forte);
}
.kpi.critico::before { background: var(--rosso); }
.kpi.attenzione::before { background: var(--ambra); }
.kpi.buono::before { background: var(--verde); }
.kpi.neutro::before { background: var(--blu-600); }
.kpi-etichetta {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--testo-tenue); font-weight: 600; margin-bottom: 4px;
}
.kpi-valore { font-size: 26px; font-weight: 700; line-height: 1.1; }
.kpi.critico .kpi-valore { color: var(--rosso); }
.kpi.attenzione .kpi-valore { color: var(--ambra); }
.kpi.buono .kpi-valore { color: var(--verde); }
.kpi-nota { font-size: 11.5px; color: var(--testo-tenue); margin-top: 3px; }

/* --------------------------------------------------------------- tabelle -- */

.tabella-scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.dati {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.dati th {
  text-align: left; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--testo-tenue);
  padding: 8px 12px; border-bottom: 1px solid var(--bordo);
  background: var(--superficie-alt); white-space: nowrap; position: sticky; top: 0;
}
table.dati td {
  padding: 8px 12px; border-bottom: 1px solid var(--bordo);
  vertical-align: middle;
}
table.dati tbody tr:hover { background: var(--blu-050); }
table.dati tbody tr:last-child td { border-bottom: 0; }
table.dati td.num, table.dati th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dati td.compatta { white-space: nowrap; }
tr.cliccabile { cursor: pointer; }

.vuoto {
  padding: 28px 16px; text-align: center; color: var(--testo-tenue); font-size: 13px;
}
.vuoto-icona { font-size: 26px; display: block; margin-bottom: 6px; opacity: .5; }

/* --------------------------------------------------------- etichette --- */

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  padding: 2px 8px; border-radius: 11px; white-space: nowrap;
  background: var(--grigio-fondo); color: var(--testo-tenue);
}
.tag.rosso  { background: var(--rosso-fondo); color: var(--rosso); }
.tag.ambra  { background: var(--ambra-fondo); color: var(--ambra); }
.tag.verde  { background: var(--verde-fondo); color: var(--verde); }
.tag.blu    { background: var(--blu-100);     color: var(--blu-700); }
.tag.viola  { background: var(--viola-fondo); color: var(--viola); }
.tag.contorno { background: transparent; border: 1px solid var(--bordo-forte); }

.semaforo {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.semaforo.rosso { background: var(--rosso); }
.semaforo.ambra { background: var(--ambra); }
.semaforo.verde { background: var(--verde); }
.semaforo.grigio { background: var(--bordo-forte); }

.riservato {
  font-size: 11.5px; color: var(--testo-fioco); font-style: italic;
  display: inline-flex; align-items: center; gap: 5px;
}

/* --------------------------------------------------------------- bottoni -- */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 6px 13px; border-radius: var(--raggio-s);
  border: 1px solid var(--bordo-forte); background: var(--superficie);
  color: var(--testo); cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--superficie-alt); text-decoration: none; }
.btn.primario { background: var(--blu-600); border-color: var(--blu-600); color: #fff; }
.btn.primario:hover { background: var(--blu-700); }
.btn.pericolo { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.btn.piccolo { font-size: 12px; padding: 4px 9px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icona {
  background: none; border: 0; cursor: pointer; font-size: 15px;
  color: var(--testo-tenue); padding: 4px 6px; border-radius: var(--raggio-s);
}
.btn-icona:hover { background: var(--grigio-fondo); }

/* ---------------------------------------------------------------- filtri -- */

.barra-filtri {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  padding: 11px 14px; background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  margin-bottom: 14px; box-shadow: var(--ombra);
}
.campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo > label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--testo-tenue); font-weight: 600;
}
.campo select, .campo input, .campo textarea {
  font: inherit; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  background: var(--superficie); color: var(--testo); min-width: 120px;
}
.campo input[type="search"] { min-width: 200px; }
.campo select:focus, .campo input:focus, .campo textarea:focus {
  outline: 2px solid var(--blu-100); border-color: var(--blu-600);
}
.filtri-spinta { margin-left: auto; display: flex; gap: 8px; align-items: flex-end; }

.gruppo-pillole { display: flex; gap: 5px; flex-wrap: wrap; }
.pillola {
  font: inherit; font-size: 12.5px; padding: 5px 11px;
  border: 1px solid var(--bordo-forte); background: var(--superficie);
  border-radius: 14px; cursor: pointer; color: var(--testo-tenue);
}
.pillola:hover { border-color: var(--blu-600); }
.pillola.attiva { background: var(--blu-700); border-color: var(--blu-700); color: #fff; font-weight: 600; }
.pillola .conta { opacity: .75; margin-left: 3px; }

/* ------------------------------------------------------------------ tab -- */

.tab { display: flex; gap: 2px; border-bottom: 1px solid var(--bordo); margin-bottom: 14px; overflow-x: auto; }
.tab-voce {
  font: inherit; font-size: 13px; padding: 8px 13px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--testo-tenue); cursor: pointer; white-space: nowrap;
}
.tab-voce:hover { color: var(--testo); }
.tab-voce.attiva { color: var(--blu-700); border-bottom-color: var(--blu-600); font-weight: 600; }

/* --------------------------------------------------------------- colonne -- */

.colonne { display: grid; gap: 16px; }
.colonne.due { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.colonne.tre { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.colonne.principale-laterale { grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); }

/* ------------------------------------------------------------- anagrafe -- */

.intestazione-dossier {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 16px; background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra); margin-bottom: 16px;
}
.avatar-grande {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--blu-700); color: #fff;
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
  flex: 0 0 auto;
}
.dossier-titoli { min-width: 0; }
.dossier-titoli h1 { margin-bottom: 3px; }
.dossier-meta { color: var(--testo-tenue); font-size: 12.5px; display: flex; gap: 10px; flex-wrap: wrap; }
.dossier-stato { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.elenco-dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 20px; }
.dato { min-width: 0; }
.dato dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--testo-tenue); font-weight: 600; margin-bottom: 2px;
}
.dato dd { margin: 0; font-size: 13.5px; word-break: break-word; }
.dato dd.vuoto-dato { color: var(--testo-fioco); }

/* --------------------------------------------------------------- barre -- */

.barra-avanzamento {
  height: 6px; background: var(--grigio-fondo); border-radius: 3px;
  overflow: hidden; min-width: 70px;
}
.barra-avanzamento > span { display: block; height: 100%; border-radius: 3px; background: var(--verde); }
.barra-avanzamento.attenzione > span { background: var(--ambra); }
.barra-avanzamento.critico > span { background: var(--rosso); }

.riga-copertura { display: flex; align-items: center; gap: 9px; }
.riga-copertura .perc { font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; font-weight: 600; }

/* ------------------------------------------------------------- calendario -- */

.calendario { display: grid; grid-template-columns: 190px 1fr; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; background: var(--superficie); }
.cal-intestazione { display: flex; border-bottom: 1px solid var(--bordo); background: var(--superficie-alt); }
.cal-giorno {
  flex: 1 0 26px; text-align: center; font-size: 10px; padding: 5px 0;
  color: var(--testo-tenue); border-left: 1px solid var(--bordo);
}
.cal-giorno.festivo { background: var(--grigio-fondo); }
.cal-riga { display: flex; border-bottom: 1px solid var(--bordo); min-height: 30px; align-items: stretch; }
.cal-riga:last-child { border-bottom: 0; }
.cal-nome { width: 190px; flex: 0 0 190px; padding: 6px 10px; font-size: 12.5px; border-right: 1px solid var(--bordo); display: flex; align-items: center; }
.cal-celle { display: flex; flex: 1; position: relative; }
.cal-cella { flex: 1 0 26px; border-left: 1px solid var(--bordo); }
.cal-cella.festivo { background: var(--superficie-alt); }
.cal-cella.oggi { box-shadow: inset 2px 0 0 var(--blu-600); }
.cal-barra {
  position: absolute; height: 18px; top: 6px; border-radius: 3px;
  font-size: 10.5px; color: #fff; padding: 0 6px; line-height: 18px;
  overflow: hidden; white-space: nowrap; cursor: pointer;
}
.cal-barra.approvata { background: var(--verde); }
.cal-barra.attesa { background: var(--ambra); }
.cal-barra.trasferta { background: var(--viola); }

/* ---------------------------------------------------------------- linea -- */

.cronologia { position: relative; padding-left: 20px; }
.cronologia::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--bordo); }
.cron-voce { position: relative; padding-bottom: 14px; }
.cron-voce::before {
  content: ""; position: absolute; left: -18px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--blu-600);
}
.cron-data { font-size: 11.5px; color: var(--testo-tenue); }
.cron-testo { font-size: 13px; }

/* --------------------------------------------------------------- avvisi -- */

.avviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 13px; border-radius: var(--raggio-s);
  font-size: 13px; margin-bottom: 12px; border: 1px solid;
}
.avviso .icona { flex: 0 0 auto; font-size: 14px; line-height: 1.4; }
.avviso.rosso { background: var(--rosso-fondo); border-color: #f3c3bd; color: #8d2c20; }
.avviso.ambra { background: var(--ambra-fondo); border-color: #f0d9a8; color: #7d4a00; }
.avviso.verde { background: var(--verde-fondo); border-color: #b8e0c8; color: #135c39; }
.avviso.blu   { background: var(--blu-050);    border-color: #c4dcf5; color: var(--blu-800); }

/* -------------------------------------------------------------- pannello -- */

.pannello-fondo { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
/* display:flex batterebbe l'attributo hidden: senza questa riga il pannello
   resterebbe sempre aperto sopra la pagina. */
.pannello-fondo[hidden] { display: none; }
.pannello-velo { position: absolute; inset: 0; background: rgba(15, 41, 66, .45); }
.pannello-corpo {
  position: relative; width: min(560px, 100%); background: var(--superficie);
  display: flex; flex-direction: column; box-shadow: var(--ombra-alta);
}
.pannello-testa {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--bordo);
  background: var(--superficie-alt);
}
.pannello-testa h2 { font-size: 15px; }
.pannello-testa .btn-icona { margin-left: auto; }
.pannello-contenuto { padding: 16px; overflow-y: auto; flex: 1; }

/* ---------------------------------------------------------------- form -- */

.modulo { display: grid; gap: 13px; }
.modulo .campo > label { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--testo); }
.modulo .campo input, .modulo .campo select, .modulo .campo textarea { width: 100%; }
.modulo-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.aiuto { font-size: 11.5px; color: var(--testo-tenue); }
.modulo-azioni { display: flex; gap: 8px; padding-top: 4px; }

/* ----------------------------------------------------------- selfservice -- */

.self { max-width: 620px; margin: 0 auto; }
.self-saluto { margin-bottom: 14px; }
.self-saluto h1 { font-size: 19px; }
.griglia-azioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.azione-grande {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 14px 12px; text-align: center;
  cursor: pointer; box-shadow: var(--ombra); color: inherit;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  font: inherit; font-size: 13px;
}
.azione-grande:hover { border-color: var(--blu-600); text-decoration: none; }
.azione-grande .emoji { font-size: 22px; }
.azione-grande strong { font-weight: 600; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista > li {
  display: flex; gap: 11px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--bordo);
}
.lista > li:last-child { border-bottom: 0; }
.lista .principale { flex: 1; min-width: 0; }
.lista .principale strong { display: block; font-weight: 600; font-size: 13.5px; }
.lista .principale small { color: var(--testo-tenue); font-size: 12px; }

.barra-mobile { display: none; }

/* --------------------------------------------------------------- grafici -- */

.grafico { width: 100%; height: auto; display: block; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--testo-tenue); margin-top: 8px; }
.legenda span { display: flex; align-items: center; gap: 5px; }
.legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* --------------------------------------------------------------- utilità -- */

.tenue { color: var(--testo-tenue); }
.fioco { color: var(--testo-fioco); }
.piccolo { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; }
.grassetto { font-weight: 600; }
.destra { text-align: right; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 12px; }
.mb0 { margin-bottom: 0; }
.rif {
  font-family: var(--mono); font-size: 10.5px; color: var(--testo-fioco);
  border: 1px solid var(--bordo); border-radius: 3px; padding: 0 4px;
  vertical-align: middle; white-space: nowrap;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1100px) {
  .colonne.principale-laterale { grid-template-columns: 1fr; }
  .topbar-filtri { display: none; }
}

@media (max-width: 860px) {
  .btn-menu { display: block; }
  .laterale {
    position: fixed; left: 0; top: var(--alt-topbar);
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: var(--ombra-alta);
  }
  body.menu-aperto .laterale { transform: translateX(0); }
  .marchio-testo small { display: none; }
  .campo-ruolo > span { display: none; }
  .utente-testo { display: none; }
  .contenuto { padding: 14px 13px 74px; }
  .pagina-testa { gap: 10px; }
  .pagina-azioni { margin-left: 0; width: 100%; }
  .griglia-kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
  .kpi-valore { font-size: 22px; }
  .calendario { grid-template-columns: 1fr; }
  .cal-nome { width: 120px; flex-basis: 120px; font-size: 11.5px; }
  .modulo-riga { grid-template-columns: 1fr; }
  .pannello-corpo { width: 100%; height: 100%; }

  /* Barra inferiore: è la navigazione del self-service da smartphone. */
  body.mobile-self .barra-mobile {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--superficie); border-top: 1px solid var(--bordo);
    z-index: 45; padding-bottom: env(safe-area-inset-bottom);
  }
  .barra-mobile a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 2px; font-size: 10.5px; color: var(--testo-tenue);
  }
  .barra-mobile a.attiva { color: var(--blu-700); font-weight: 600; }
  .barra-mobile a:hover { text-decoration: none; }
  .barra-mobile .emoji { font-size: 17px; }
}

@media (max-width: 520px) {
  table.dati th, table.dati td { padding: 7px 9px; }
  .topbar { gap: 8px; padding: 0 10px; }
}

@media print {
  .topbar, .laterale, .avviso-prototipo, .pagina-azioni, .barra-filtri, .barra-mobile { display: none !important; }
  .contenuto { padding: 0; }
  .scheda { box-shadow: none; break-inside: avoid; }
}

/* ------------------------------------------------- aggiunte lato server -- */

/* Messaggi di sistema (django.contrib.messages). */
.messaggi { margin-bottom: 14px; }

/* Pagina di accesso: unica schermata senza guscio. */
.accesso {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--fondo); padding: 20px;
}
.accesso-riquadro {
  width: min(400px, 100%); background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-alta); padding: 26px;
}
.accesso-marchio { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.accesso-marchio .marchio-logo { width: 38px; height: 38px; font-size: 14px; }
.accesso-marchio strong { font-size: 15px; }
.accesso-marchio small { display: block; font-size: 11.5px; color: var(--testo-tenue); }
.errore-campo { color: var(--rosso); font-size: 12px; margin-top: 3px; }

/* Paginazione */
.paginazione {
  display: flex; gap: 6px; align-items: center; justify-content: center;
  padding: 12px; font-size: 13px;
}
.paginazione .corrente { font-weight: 600; color: var(--testo); }