/*
 * Platone — componenti. Usa solo le variabili di ../tokens.css.
 * Catalogo con tutti gli stati: components/index.html. Inventario: ../README.md.
 */

/* ===================== Base ===================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--testo-base);
  line-height: var(--interlinea-base);
  color: var(--colore-testo);
  background: var(--colore-sfondo-pagina);
}
h1, h2, h3, h4 { font-family: var(--font-titoli); margin: 0; font-weight: var(--peso-semibold); }
p { margin: 0; }
a { color: var(--colore-primario); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--colore-focus); outline-offset: 2px; }
.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta-al-contenuto {
  position: absolute; left: var(--spazio-4); top: -100px; z-index: 100;
  background: var(--colore-superficie); color: var(--colore-testo);
  padding: var(--spazio-2) var(--spazio-4); border-radius: var(--raggio-sm);
}
.salta-al-contenuto:focus { top: var(--spazio-4); }

.icona { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icona--sm { width: 14px; height: 14px; }
.icona--lg { width: 20px; height: 20px; }

/* ===================== Shell: sidebar + barra in alto + pannello ===================== */
.shell {
  display: grid;
  grid-template-columns: var(--larghezza-sidebar) minmax(0, 1fr);
  grid-template-rows: var(--altezza-topbar) 1fr;
  min-height: 100vh;
  background: var(--colore-sfondo-shell);
}
/* fissa allo scroll e alta quanto la finestra: così anche il decoro resta sempre in vista */
.sidebar {
  grid-row: 1 / span 2;
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: var(--spazio-4) var(--spazio-3);
  color: var(--colore-su-primario);
  overflow: hidden;
}
.sidebar > nav { position: relative; z-index: 1; min-height: 0; overflow-y: auto; } /* finestre basse: scorre il menu, non la pagina */
/* decoro a cerchi concentrici del Figma, puramente grafico */
.sidebar::after {
  content: ""; position: absolute; inset: 35% -60% -10% -90%;
  background: repeating-radial-gradient(circle at 30% 60%, transparent 0 13px, var(--colore-sidebar-decoro) 13px 14px);
  -webkit-mask-image: radial-gradient(circle at 30% 60%, #000 30%, transparent 70%);
          mask-image: radial-gradient(circle at 30% 60%, #000 30%, transparent 70%);
  pointer-events: none;
}
.sidebar__logo {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  flex: none; height: 84px; margin-bottom: var(--spazio-6);
  background: var(--colore-superficie); border-radius: var(--raggio-md);
}
.sidebar__logo img { max-height: 64px; width: auto; }
.sidebar__nav { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-1); }
.sidebar__voce {
  display: flex; align-items: center; gap: var(--spazio-3);
  padding: var(--spazio-2) var(--spazio-3);
  border-radius: var(--raggio-sm);
  color: var(--colore-su-primario); text-decoration: none;
  font-size: var(--testo-base); font-weight: var(--peso-medio);
  transition: background var(--durata-rapida) var(--curva);
}
.sidebar__voce:hover { background: var(--colore-sidebar-voce-attiva); }
.sidebar__voce[aria-current="page"] { background: var(--colore-sidebar-voce-attiva); font-weight: var(--peso-semibold); }
.sidebar__voce:focus-visible { outline-color: var(--colore-su-primario); }

.topbar {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--spazio-8);
  color: var(--colore-su-primario);
}
.contenuto {
  background: var(--colore-sfondo-pagina);
  border-top-left-radius: var(--raggio-xl);
  padding: var(--spazio-8) var(--spazio-8) var(--spazio-10);
  min-width: 0;
}
.contenuto__interno { max-width: var(--larghezza-contenuto-max); margin: 0 auto; display: grid; gap: var(--spazio-5); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .sidebar { grid-row: auto; position: static; height: auto; padding-bottom: var(--spazio-2); }
  .sidebar::after { display: none; }
  .sidebar__logo { height: 56px; margin-bottom: var(--spazio-3); }
  .sidebar__nav { grid-auto-flow: column; overflow-x: auto; }
  .sidebar__voce { white-space: nowrap; }
  .contenuto { border-top-left-radius: var(--raggio-lg); padding: var(--spazio-5) var(--spazio-4); }
  .topbar { padding: 0 var(--spazio-4); }
}

/* ===================== Menu a tendina (generico) ===================== */
.menu {
  position: absolute; z-index: 30;
  min-width: 220px; padding: var(--spazio-1);
  background: var(--colore-superficie); color: var(--colore-testo);
  border: 1px solid var(--colore-bordo); border-radius: var(--raggio-md);
  box-shadow: var(--ombra-menu);
  list-style: none; margin: 0;
}
.menu[hidden] { display: none; }
.menu__voce {
  display: flex; align-items: center; gap: var(--spazio-2); width: 100%;
  padding: var(--spazio-2) var(--spazio-3);
  border: 0; border-radius: var(--raggio-sm); background: none;
  font: inherit; font-size: var(--testo-base); color: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
}
.menu__voce:hover, .menu__voce:focus-visible, .menu__voce[aria-expanded="true"] { background: var(--colore-superficie-hover); outline: none; }
.menu__voce[aria-checked="true"], .menu__voce[aria-selected="true"] { background: var(--colore-primario-tenue); }
.menu__voce .icona--spunta { margin-left: auto; color: var(--colore-primario); visibility: hidden; }
.menu__voce[aria-checked="true"] .icona--spunta, .menu__voce[aria-selected="true"] .icona--spunta { visibility: visible; }
.menu__voce .icona--freccia { margin-left: auto; color: var(--colore-testo-terziario); }
.menu__voce--pericolo { color: var(--colore-pericolo-testo); }
.menu__testi { display: grid; }
.menu__testi small { color: var(--colore-testo-secondario); font-size: var(--testo-sm); line-height: var(--interlinea-sm); }
.menu__separatore { border: 0; border-top: 1px solid var(--colore-bordo); margin: var(--spazio-1) 0; }
.menu__intestazione { padding: var(--spazio-2) var(--spazio-3) var(--spazio-3); border-bottom: 1px solid var(--colore-bordo); margin-bottom: var(--spazio-1); }
.menu__intestazione strong { display: block; font-weight: var(--peso-semibold); }
.menu__intestazione .etichetta-area { display: inline-block; }
.menu-utente > .menu { min-width: 280px; }
.menu__intestazione span:not(.etichetta-area) { display: block; color: var(--colore-testo-secondario); font-size: var(--testo-sm); line-height: var(--interlinea-sm); }
.menu__gruppo { position: relative; }
/* il sottomenu esce a sinistra: il menu utente sta sul bordo destro */
.menu--sottomenu { top: calc(-1 * var(--spazio-1)); right: 100%; min-width: 260px; } /* attaccato: niente vuoto che faccia perdere l'hover */
@media (max-width: 600px) {
  .menu--sottomenu { position: static; box-shadow: none; border: 0; padding: 0 0 0 var(--spazio-4); }
}

/* ===================== Menu utente (barra in alto) ===================== */
.menu-utente { position: relative; }
.menu-utente__pulsante {
  display: inline-flex; align-items: center; gap: var(--spazio-2);
  padding: var(--spazio-2) var(--spazio-3);
  border: 0; border-radius: var(--raggio-sm); background: none;
  color: var(--colore-su-primario); font: inherit; font-weight: var(--peso-semibold);
  text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer;
}
.menu-utente__pulsante:hover, .menu-utente__pulsante[aria-expanded="true"] { background: var(--colore-sidebar-voce-attiva); }
.menu-utente__pulsante:focus-visible { outline-color: var(--colore-su-primario); }
.menu-utente__pulsante .icona { transition: transform var(--durata-rapida) var(--curva); }
.menu-utente__pulsante[aria-expanded="true"] .icona { transform: rotate(180deg); }
.menu-utente > .menu { right: 0; top: calc(100% + var(--spazio-1)); }
.etichetta-area {
  display: inline-block; margin-top: var(--spazio-1);
  padding: 0 var(--spazio-2); border-radius: var(--raggio-pillola);
  background: var(--colore-primario-tenue); color: var(--colore-primario);
  font-size: var(--testo-xs); line-height: var(--interlinea-xs); font-weight: var(--peso-semibold);
}

/* ===================== Intestazione pagina ===================== */
.intestazione-pagina { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--spazio-4); }
.intestazione-pagina__sovratitolo { font-size: var(--testo-xs); line-height: var(--interlinea-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--colore-testo-secondario); margin-bottom: var(--spazio-1); }
.intestazione-pagina__titolo { font-size: var(--testo-xl); line-height: var(--interlinea-xl); }
.intestazione-pagina__descrizione { margin-top: var(--spazio-1); color: var(--colore-testo-secondario); max-width: 64ch; }
.intestazione-pagina__azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-3); align-items: center; }

/* ===================== Bottoni ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-2);
  min-height: 36px; padding: 0 var(--spazio-4);
  border: 1px solid transparent; border-radius: var(--raggio-sm);
  font: inherit; font-size: var(--testo-base); font-weight: var(--peso-medio); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--durata-rapida) var(--curva), border-color var(--durata-rapida) var(--curva), color var(--durata-rapida) var(--curva);
}
.btn:focus-visible { outline: none; box-shadow: var(--anello-focus); }
.btn--primario { background: var(--colore-primario); color: var(--colore-su-primario); }
.btn--primario:hover { background: var(--colore-primario-hover); }
.btn--secondario { background: var(--colore-superficie); color: var(--colore-testo); border-color: var(--colore-bordo-forte); }
.btn--secondario:hover { background: var(--colore-superficie-tenue); }
.btn--tenue { background: var(--colore-neutro-tenue); color: var(--colore-testo); }
.btn--tenue:hover { background: var(--colore-bordo); }
.btn--fantasma { background: none; color: var(--colore-testo); padding: 0 var(--spazio-2); }
.btn--fantasma:hover { background: var(--colore-neutro-tenue); }
.btn--collegamento { background: none; color: var(--colore-primario); padding: 0; min-height: auto; font-weight: var(--peso-medio); }
.btn--collegamento:hover { text-decoration: underline; }
.btn--pericolo { background: var(--colore-pericolo); color: var(--colore-su-primario); }
.btn--pericolo:hover { background: var(--colore-pericolo-testo); }
.btn--sm { min-height: 30px; padding: 0 var(--spazio-3); font-size: var(--testo-sm); }
.btn--icona {
  width: 32px; min-height: 32px; padding: 0;
  background: none; color: var(--colore-testo-secondario); border-radius: var(--raggio-pillola);
}
.btn--icona:hover { background: var(--colore-neutro-tenue); color: var(--colore-testo); }
.btn--icona-bordo { border-color: var(--colore-primario-bordo-tenue); color: var(--colore-primario); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--colore-disabilitato-sfondo); color: var(--colore-disabilitato-testo);
  border-color: transparent; cursor: not-allowed;
}
.btn--icona:disabled { background: none; }
.btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--colore-su-primario); border-right-color: transparent; border-radius: 50%;
  animation: gira 700ms linear infinite;
}
.btn--secondario[aria-busy="true"]::after { border-color: var(--colore-primario); border-right-color: transparent; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ===================== Badge di stato ===================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--spazio-1);
  padding: 2px var(--spazio-2); border-radius: var(--raggio-pillola);
  font-size: var(--testo-xs); line-height: var(--interlinea-xs); font-weight: var(--peso-medio);
  white-space: nowrap;
  background: var(--colore-neutro-tenue); color: var(--colore-neutro-testo);
}
.badge--punto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--successo { background: var(--colore-successo-tenue); color: var(--colore-successo-testo); }
.badge--pericolo { background: var(--colore-pericolo-tenue); color: var(--colore-pericolo-testo); }
.badge--avviso { background: var(--colore-avviso-tenue); color: var(--colore-avviso-testo); }
.badge--info { background: var(--colore-info-tenue); color: var(--colore-info-testo); }
.badge--primario { background: var(--colore-primario-tenue); color: var(--colore-primario); }
.badge--contatore {
  min-width: 18px; justify-content: center; padding: 0 var(--spazio-1);
  background: var(--colore-primario); color: var(--colore-su-primario); border-radius: var(--raggio-sm);
}
.gruppo-badge { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }

/* ===================== Card ===================== */
.card {
  background: var(--colore-superficie);
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-card);
  min-width: 0;
}
.card__intestazione {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spazio-3);
  padding: var(--spazio-4) var(--spazio-5);
}
.card__titolo { font-size: var(--testo-md); line-height: var(--interlinea-md); }
.card__sottotitolo { color: var(--colore-testo-secondario); font-size: var(--testo-sm); line-height: var(--interlinea-sm); }
.card__corpo { padding: 0 var(--spazio-5) var(--spazio-5); }
.card__corpo--pieno { padding: var(--spazio-5); }
.card__piede {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spazio-3);
  padding: var(--spazio-3) var(--spazio-5);
}
.card__piede--destra { justify-content: flex-end; }

/* ===================== KPI ===================== */
.griglia-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spazio-4); }
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { box-shadow: var(--ombra-menu); }
.kpi { display: flex; justify-content: space-between; gap: var(--spazio-3); padding: var(--spazio-4) var(--spazio-5); }
.kpi__etichetta { font-size: var(--testo-xs); line-height: var(--interlinea-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--colore-testo-secondario); }
.kpi__valore { font-size: var(--testo-kpi); line-height: var(--interlinea-kpi); font-weight: var(--peso-semibold); margin-top: var(--spazio-2); }
.kpi__nota { font-size: var(--testo-xs); line-height: var(--interlinea-xs); color: var(--colore-testo-secondario); }
.kpi__icona {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--raggio-md); background: var(--colore-neutro-tenue); color: var(--colore-neutro-testo);
}
.kpi__icona--primario { background: var(--colore-primario-tenue); color: var(--colore-primario); }
.kpi__icona--avviso { background: var(--colore-avviso-tenue); color: var(--colore-avviso-testo); }
.kpi__icona--pericolo { background: var(--colore-pericolo-tenue); color: var(--colore-pericolo); }

/* ===================== Schede (tab a pillola) ===================== */
.schede { display: flex; flex-wrap: wrap; gap: var(--spazio-1); }
.scheda {
  display: inline-flex; align-items: center; gap: var(--spazio-2);
  padding: var(--spazio-1) var(--spazio-3);
  border: 1px solid transparent; border-radius: var(--raggio-sm); background: none;
  font: inherit; font-size: var(--testo-base); color: var(--colore-testo-secondario); cursor: pointer;
  white-space: nowrap;
}
.scheda:hover { color: var(--colore-testo); background: var(--colore-neutro-tenue); }
.scheda[aria-selected="true"] {
  color: var(--colore-testo); font-weight: var(--peso-medio);
  background: var(--colore-superficie); border-color: var(--colore-bordo); box-shadow: var(--ombra-card);
}
.scheda:focus-visible { outline: none; box-shadow: var(--anello-focus); }
.pannello-scheda[hidden] { display: none; }
.pannello-scheda { display: grid; gap: var(--spazio-5); }
.schede--centrate { justify-content: center; }

/* ===================== Campi del form ===================== */
.campo { display: grid; gap: var(--spazio-1); align-content: start; min-width: 0; }
.campo__etichetta { font-size: var(--testo-sm); line-height: var(--interlinea-sm); font-weight: var(--peso-medio); color: var(--colore-testo); }
.campo__obbligatorio { color: var(--colore-pericolo-testo); }
.campo__controllo {
  width: 100%; min-height: 36px; padding: var(--spazio-2) var(--spazio-3);
  border: 1px solid var(--colore-bordo-forte); border-radius: var(--raggio-sm);
  background: var(--colore-superficie); color: var(--colore-testo);
  font: inherit; font-size: var(--testo-base);
  transition: border-color var(--durata-rapida) var(--curva), box-shadow var(--durata-rapida) var(--curva);
}
.campo__controllo::placeholder { color: var(--colore-testo-terziario); }
.campo__controllo:hover { border-color: var(--colore-testo-terziario); }
.campo__controllo:focus { outline: none; border-color: var(--colore-focus); box-shadow: var(--anello-focus); }
.campo__controllo:disabled, .campo__controllo[readonly] {
  background: var(--colore-disabilitato-sfondo); color: var(--colore-testo-secondario); border-color: var(--colore-bordo);
}
.campo__controllo[aria-invalid="true"] { border-color: var(--colore-pericolo); }
.campo__controllo[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--colore-pericolo-tenue); }
textarea.campo__controllo { min-height: 72px; resize: vertical; }
.campo__controllo--data { max-width: 200px; }
.campo__controllo--numero { max-width: 96px; }
.campo__aiuto { font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--colore-testo-secondario); }
.campo__errore { display: flex; gap: var(--spazio-1); align-items: center; font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--colore-pericolo-testo); }
.campo__errore[hidden] { display: none; }

/* select con freccia disegnata dai token (niente colori dentro data-uri) */
.campo__select { position: relative; }
.campo__select select { appearance: none; padding-right: var(--spazio-8); }
.campo__select::after {
  content: ""; position: absolute; right: var(--spazio-3); top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: var(--colore-testo-secondario); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.griglia-campi { display: grid; gap: var(--spazio-4); }
.griglia-campi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia-campi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .griglia-campi--2, .griglia-campi--3 { grid-template-columns: 1fr; } }

/* gruppo di scelte (checkbox / radio) */
.scelte { border: 0; margin: 0; padding: 0; min-width: 0; }
.scelte legend { padding: 0; margin-bottom: var(--spazio-2); }
.scelte__elenco { display: flex; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-5); }
.scelte__elenco--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scelta { display: inline-flex; align-items: center; gap: var(--spazio-2); cursor: pointer; font-size: var(--testo-base); }
.scelta input { width: 16px; height: 16px; margin: 0; accent-color: var(--colore-primario); cursor: pointer; }

/* interruttore */
.interruttore { display: inline-flex; align-items: center; gap: var(--spazio-2); cursor: pointer; font-size: var(--testo-base); }
.interruttore input {
  appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 36px; height: 20px; border-radius: var(--raggio-pillola);
  background: var(--colore-bordo-forte); position: relative;
  transition: background var(--durata-rapida) var(--curva);
}
.interruttore input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--colore-superficie); box-shadow: var(--ombra-card);
  transition: transform var(--durata-rapida) var(--curva);
}
.interruttore input:checked { background: var(--colore-primario); }
.interruttore input:checked::after { transform: translateX(16px); }
.interruttore input:focus-visible { outline: none; box-shadow: var(--anello-focus); }
.interruttore input:disabled { opacity: 0.5; cursor: not-allowed; }

/* area caricamento file */
.area-file {
  display: grid; justify-items: center; gap: var(--spazio-1);
  padding: var(--spazio-6) var(--spazio-4);
  border: 1px dashed var(--colore-bordo-forte); border-radius: var(--raggio-md);
  background: var(--colore-superficie-tenue); text-align: center; cursor: pointer;
  transition: border-color var(--durata-rapida) var(--curva), background var(--durata-rapida) var(--curva);
}
.area-file:hover, .area-file.is-trascinamento { border-color: var(--colore-primario); background: var(--colore-primario-tenue); }
.area-file:focus-within { box-shadow: var(--anello-focus); border-color: var(--colore-primario); }
.area-file .icona { color: var(--colore-primario); width: 24px; height: 24px; }
.area-file__testo span { color: var(--colore-primario); font-weight: var(--peso-medio); }
.area-file__formati { font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--colore-testo-secondario); }
.area-file--errore { border-color: var(--colore-pericolo); background: var(--colore-pericolo-tenue); }
.area-file--scelto {
  display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: default;
  border-style: solid; background: var(--colore-superficie);
}
.area-file--scelto .icona { width: 20px; height: 20px; }

/* ===================== Barra filtri ===================== */
.filtri {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spazio-3);
  padding: var(--spazio-4) var(--spazio-5);
}
.filtri .campo { flex: 1 1 160px; max-width: 220px; }
.filtri__azioni { display: flex; gap: var(--spazio-2); }

/* ===================== Tabella ===================== */
.tabella-contenitore { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: var(--testo-sm); line-height: var(--interlinea-sm); }
.tabella th {
  padding: var(--spazio-2) var(--spazio-3); text-align: left; vertical-align: bottom;
  font-weight: var(--peso-medio); color: var(--colore-testo-secondario);
  background: var(--colore-superficie-tenue); border-bottom: 1px solid var(--colore-bordo);
}
.tabella td { padding: var(--spazio-2) var(--spazio-3); border-bottom: 1px solid var(--colore-bordo); vertical-align: middle; }
.tabella th:first-child, .tabella td:first-child { padding-left: var(--spazio-5); }
.tabella th:last-child, .tabella td:last-child { padding-right: var(--spazio-5); }
.tabella tbody tr:hover { background: var(--colore-superficie-hover); }
.tabella tbody tr[aria-selected="true"] { background: var(--colore-primario-tenue); }
.tabella__numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabella__azioni { text-align: right; white-space: nowrap; }
.tabella__selezione { width: 1%; }
.tabella__selezione input { width: 16px; height: 16px; accent-color: var(--colore-primario); }
.tabella__ordina {
  display: inline-flex; align-items: center; gap: var(--spazio-1);
  border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer;
}
.tabella__ordina .icona { color: var(--colore-testo-terziario); }
th[aria-sort="ascending"] .tabella__ordina, th[aria-sort="descending"] .tabella__ordina { color: var(--colore-testo); }
.tabella__testo-lungo { display: inline-block; vertical-align: middle; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabella__secondario { color: var(--colore-testo-secondario); }
.tabella__vuota { text-align: center; color: var(--colore-testo-secondario); }
.testo-pericolo { color: var(--colore-pericolo-testo); }
.cella-documento { display: inline-flex; align-items: center; gap: var(--spazio-2); }
.cella-documento .icona { color: var(--colore-primario); }

/* ===================== Paginazione ===================== */
.paginazione { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-3); flex-wrap: wrap; }
.paginazione__info { font-size: var(--testo-sm); color: var(--colore-testo-secondario); }
.paginazione__pulsanti { display: flex; gap: var(--spazio-1); }
.paginazione__pulsanti .btn { width: 30px; min-height: 30px; padding: 0; border-color: var(--colore-bordo); }
.paginazione__pulsanti .btn[aria-current="page"] { background: var(--colore-primario-tenue); color: var(--colore-primario); border-color: transparent; }

/* ===================== Avvisi in pagina ===================== */
.avviso {
  display: flex; gap: var(--spazio-2); align-items: flex-start;
  padding: var(--spazio-2) var(--spazio-3); border-radius: var(--raggio-md);
  font-size: var(--testo-sm); line-height: var(--interlinea-sm);
  background: var(--colore-info-tenue); color: var(--colore-info-testo);
}
.avviso .icona { margin-top: 1px; }
.avviso--pericolo { background: var(--colore-pericolo-tenue); color: var(--colore-pericolo-testo); }
.avviso--avviso { background: var(--colore-avviso-tenue); color: var(--colore-avviso-testo); }
.avviso--primario { background: var(--colore-primario-tenue); color: var(--colore-primario); }
.avviso a { color: inherit; font-weight: var(--peso-semibold); }

/* ===================== Stati: vuoto / caricamento / errore / permesso negato ===================== */
.stato {
  display: grid; justify-items: center; gap: var(--spazio-2);
  padding: var(--spazio-10) var(--spazio-6); text-align: center;
}
.stato__icona {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--colore-neutro-tenue); color: var(--colore-neutro-testo); margin-bottom: var(--spazio-2);
}
.stato__icona .icona { width: 22px; height: 22px; }
.stato--errore .stato__icona { background: var(--colore-pericolo-tenue); color: var(--colore-pericolo); }
.stato--negato .stato__icona { background: var(--colore-avviso-tenue); color: var(--colore-avviso-testo); }
.stato--primario .stato__icona { background: var(--colore-primario-tenue); color: var(--colore-primario); }
.stato__titolo { font-size: var(--testo-md); line-height: var(--interlinea-md); font-weight: var(--peso-semibold); }
.stato__testo { color: var(--colore-testo-secondario); max-width: 44ch; }
.stato__azioni { margin-top: var(--spazio-2); display: flex; gap: var(--spazio-2); }
.stato--compatto { padding: var(--spazio-4); }

.scheletro {
  display: block; height: 12px; border-radius: var(--raggio-sm);
  background: linear-gradient(90deg, var(--colore-neutro-tenue) 0%, var(--colore-superficie-tenue) 50%, var(--colore-neutro-tenue) 100%);
  background-size: 200% 100%; animation: luccica 1.2s ease-in-out infinite;
}
@keyframes luccica { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .scheletro, .btn[aria-busy="true"]::after { animation: none; } }

/* ===================== Documento richiesto (FO, scheda "Da caricare") ===================== */
.elenco-richieste { display: grid; gap: var(--spazio-3); list-style: none; margin: 0; padding: 0; }
.richiesta-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spazio-2) var(--spazio-6); padding: var(--spazio-4) var(--spazio-5); }
.richiesta-doc__corpo { display: grid; gap: var(--spazio-2); justify-items: start; }
.richiesta-doc__titolo { font-size: var(--testo-base); line-height: var(--interlinea-base); font-weight: var(--peso-semibold); }
.richiesta-doc__descrizione, .richiesta-doc__scadenza { font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--colore-testo-secondario); }
.richiesta-doc__scadenza--superata { color: var(--colore-pericolo-testo); }
.richiesta-doc .avviso { justify-self: stretch; max-width: 560px; }
@media (max-width: 600px) { .richiesta-doc { grid-template-columns: 1fr; } }

/* ===================== Riga documento compatta (widget in Home FO) ===================== */
.elenco-doc { display: grid; gap: var(--spazio-2); list-style: none; margin: 0; padding: 0; }
.doc-riga {
  display: grid; gap: var(--spazio-1); justify-items: start;
  padding: var(--spazio-3); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-md);
}
.doc-riga__nome { display: inline-flex; align-items: center; gap: var(--spazio-2); font-weight: var(--peso-medio); }
.doc-riga__nome .icona { color: var(--colore-primario); }
.doc-riga__meta { font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--colore-testo-secondario); }

/* ===================== Modali e pannello laterale (dialog nativo) ===================== */
.modale {
  width: min(var(--larghezza-modale-sm), calc(100vw - 2 * var(--spazio-4)));
  max-height: calc(100vh - 2 * var(--spazio-8));
  padding: 0; border: 0; border-radius: var(--raggio-lg);
  background: var(--colore-superficie); color: var(--colore-testo);
  box-shadow: var(--ombra-modale);
}
.modale[open] { display: flex; flex-direction: column; }
.modale::backdrop { background: var(--colore-velo); }
.modale--md { width: min(var(--larghezza-modale-md), calc(100vw - 2 * var(--spazio-4))); }
.modale--lg { width: min(var(--larghezza-modale-lg), calc(100vw - 2 * var(--spazio-4))); }
.modale__intestazione {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spazio-3);
  padding: var(--spazio-5) var(--spazio-5) var(--spazio-3);
}
.modale__titolo { font-size: var(--testo-md); line-height: var(--interlinea-md); }
.modale__sottotitolo { margin-top: var(--spazio-1); font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--colore-testo-secondario); }
.modale__corpo { padding: var(--spazio-2) var(--spazio-5) var(--spazio-5); overflow-y: auto; display: grid; gap: var(--spazio-4); }
.modale__piede {
  display: flex; justify-content: flex-end; gap: var(--spazio-2); flex-wrap: wrap;
  padding: var(--spazio-3) var(--spazio-5) var(--spazio-5);
}
.modale__piede--separato { border-top: 1px solid var(--colore-bordo); padding-top: var(--spazio-4); }
.modale--laterale {
  margin: 0 0 0 auto; height: 100vh; max-height: 100vh;
  width: min(var(--larghezza-drawer), 100vw); border-radius: var(--raggio-lg) 0 0 var(--raggio-lg);
}
.modale--laterale[open] { animation: entra-da-destra var(--durata-media) var(--curva); }
@keyframes entra-da-destra { from { transform: translateX(32px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .modale--laterale[open] { animation: none; } }
.modale__colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spazio-5); }
@media (max-width: 700px) { .modale__colonne { grid-template-columns: 1fr; } }

/* ===================== Anteprima documento (simulata) ===================== */
.anteprima-doc {
  display: grid; grid-template-rows: 1fr auto;
  border: 1px solid var(--colore-bordo); border-radius: var(--raggio-md); background: var(--colore-superficie-tenue); overflow: hidden;
}
.anteprima-doc__foglio {
  margin: var(--spazio-5) auto; width: min(240px, 80%);
  padding: var(--spazio-5); display: grid; gap: var(--spazio-2);
  background: var(--colore-superficie); border-radius: var(--raggio-md); box-shadow: var(--ombra-card);
  font-size: var(--testo-sm); line-height: var(--interlinea-sm);
}
.anteprima-doc__foglio .icona { color: var(--colore-primario); width: 24px; height: 24px; }
.anteprima-doc__righe { display: grid; gap: var(--spazio-1); }
.anteprima-doc__righe span { height: 6px; border-radius: 3px; background: var(--colore-neutro-tenue); }
.anteprima-doc__righe span:nth-child(2n) { width: 80%; }
.anteprima-doc__nota { color: var(--colore-testo-terziario); font-size: var(--testo-xs); }
.anteprima-doc__file {
  display: flex; align-items: center; gap: var(--spazio-2);
  padding: var(--spazio-3) var(--spazio-4); background: var(--colore-superficie); border-top: 1px solid var(--colore-bordo);
  font-size: var(--testo-sm); color: var(--colore-testo); text-decoration: none;
}
.anteprima-doc__file:hover { color: var(--colore-primario); }

/* coppie etichetta / valore */
.dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-3) var(--spazio-4); margin: 0; }
.dati--1 { grid-template-columns: 1fr; }
.dati dt { font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--colore-testo-secondario); }
.dati dd { margin: 0; font-weight: var(--peso-medio); }

/* storico versioni */
.storico { display: grid; gap: var(--spazio-2); list-style: none; margin: 0; padding: 0; }
.storico__voce { padding: var(--spazio-3); border-radius: var(--raggio-md); background: var(--colore-superficie-tenue); display: grid; gap: var(--spazio-1); }
.storico__riga { display: flex; justify-content: space-between; gap: var(--spazio-2); align-items: center; font-weight: var(--peso-medio); }
.storico__meta { font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--colore-testo-secondario); }
.storico__meta--piccola { font-size: var(--testo-xs); line-height: var(--interlinea-xs); }
.titolo-sezione { font-size: var(--testo-base); line-height: var(--interlinea-base); font-weight: var(--peso-semibold); }

/* ===================== Notifiche (toast) ===================== */
.notifiche { position: fixed; right: var(--spazio-6); bottom: var(--spazio-6); z-index: 60; display: grid; gap: var(--spazio-2); }
.notifica {
  display: flex; align-items: center; gap: var(--spazio-3); min-width: 280px; max-width: 420px;
  padding: var(--spazio-3) var(--spazio-4); border-radius: var(--raggio-md);
  background: var(--colore-testo); color: var(--colore-su-primario); box-shadow: var(--ombra-menu);
  animation: entra-dal-basso var(--durata-media) var(--curva);
}
.notifica--successo .icona { color: var(--colore-successo-tenue); }
.notifica--errore { background: var(--colore-pericolo-testo); }
@keyframes entra-dal-basso { from { transform: translateY(8px); opacity: 0; } }

/* ===================== Matrice documenti (BO) ===================== */
.legenda-requisiti { display: flex; gap: var(--spazio-2); flex-wrap: wrap; }
.requisito {
  appearance: none; width: 100%; min-width: 120px; min-height: 30px;
  padding: var(--spazio-1) var(--spazio-6) var(--spazio-1) var(--spazio-2);
  border: 1px solid var(--colore-bordo); border-radius: var(--raggio-sm);
  font: inherit; font-size: var(--testo-sm); cursor: pointer;
  background: var(--colore-neutro-tenue); color: var(--colore-neutro-testo);
}
.requisito[data-valore="obbligatorio"] { background: var(--colore-primario); border-color: var(--colore-primario); color: var(--colore-su-primario); }
.requisito[data-valore="facoltativo"] { background: var(--colore-primario-tenue); border-color: var(--colore-primario-bordo-tenue); color: var(--colore-primario); }
.requisito:focus-visible { outline: none; box-shadow: var(--anello-focus); }
.requisito--etichetta { width: auto; min-width: 0; padding-right: var(--spazio-2); cursor: default; }
.requisito-cella { position: relative; }
.requisito-cella::after {
  content: ""; position: absolute; right: var(--spazio-3); top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: currentColor; pointer-events: none; color: var(--colore-testo-secondario);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.requisito-cella:has([data-valore="obbligatorio"])::after { color: var(--colore-su-primario); }
.requisito-cella:has([data-valore="facoltativo"])::after { color: var(--colore-primario); }
.tabella--matrice th { text-align: center; }
.tabella--matrice td { width: 140px; }
.tabella--matrice th:first-child, .tabella--matrice td:first-child { text-align: left; min-width: 220px; position: sticky; left: 0; background: var(--colore-superficie); z-index: 1; }
.tabella--matrice thead th:first-child { background: var(--colore-superficie-tenue); }
.tabella--matrice tbody th { color: var(--colore-testo); font-weight: var(--peso-regolare); vertical-align: middle; border-bottom: 1px solid var(--colore-bordo); }
.tabella--matrice .bordo-gruppo { border-left: 1px solid var(--colore-bordo); }

/* ===================== Elenco selezionabile + editor (Template email) ===================== */
.layout-editor { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); gap: var(--spazio-4); align-items: start; }
@media (max-width: 1100px) { .layout-editor { grid-template-columns: 1fr; } }
.lista-selezione { list-style: none; margin: 0; padding: var(--spazio-1) 0; }
.lista-selezione__voce {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-2); width: 100%;
  padding: var(--spazio-3) var(--spazio-4); border: 0; background: none; text-align: left;
  font: inherit; color: var(--colore-testo); cursor: pointer; border-bottom: 1px solid var(--colore-bordo);
}
.lista-selezione li:last-child .lista-selezione__voce { border-bottom: 0; }
.lista-selezione__voce:hover { background: var(--colore-superficie-hover); }
.lista-selezione__voce[aria-current="true"] { background: var(--colore-primario-tenue); color: var(--colore-primario); font-weight: var(--peso-medio); }
.chip {
  display: inline-flex; align-items: center; padding: var(--spazio-1) var(--spazio-2);
  border: 1px solid var(--colore-bordo); border-radius: var(--raggio-sm); background: var(--colore-superficie-tenue);
  font: inherit; font-size: var(--testo-sm); color: var(--colore-testo); cursor: pointer;
}
.chip:hover { border-color: var(--colore-primario); color: var(--colore-primario); }
.chip:focus-visible { outline: none; box-shadow: var(--anello-focus); }
.gruppo-chip { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.anteprima-email { display: grid; gap: var(--spazio-1); }
.anteprima-email__intestazione { padding: var(--spazio-3) var(--spazio-4); border-bottom: 1px solid var(--colore-bordo); font-size: var(--testo-sm); color: var(--colore-testo-secondario); }
.anteprima-email__corpo { padding: var(--spazio-4); display: grid; gap: var(--spazio-3); }
.anteprima-email__oggetto { font-weight: var(--peso-semibold); }
.anteprima-email__testo { white-space: pre-line; }
.anteprima-email--riquadro { border: 1px solid var(--colore-bordo); border-radius: var(--raggio-md); }

/* ===================== Grafico a barre impilate ===================== */
.grafico { position: relative; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico__griglia { stroke: var(--colore-grafico-griglia); stroke-dasharray: 3 3; }
.grafico__asse { fill: var(--colore-testo-secondario); font-size: 11px; font-family: var(--font-testo); }
.grafico__colonna-hover { fill: var(--colore-neutro-tenue); opacity: 0; }
.grafico__gruppo:hover .grafico__colonna-hover, .grafico__gruppo:focus .grafico__colonna-hover { opacity: 1; }
.grafico__gruppo:focus { outline: none; }
.grafico__gruppo:focus-visible .grafico__colonna-hover { stroke: var(--colore-focus); stroke-width: 2; }
.grafico__suggerimento {
  position: absolute; z-index: 5; pointer-events: none;
  padding: var(--spazio-2) var(--spazio-3); min-width: 150px;
  background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-md); box-shadow: var(--ombra-menu);
  font-size: var(--testo-sm); line-height: var(--interlinea-sm);
}
.grafico__suggerimento[hidden] { display: none; }
.grafico__suggerimento strong { display: block; margin-bottom: var(--spazio-1); }
.legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spazio-2) var(--spazio-4); list-style: none; margin: var(--spazio-3) 0 0; padding: 0; font-size: var(--testo-sm); color: var(--colore-testo-secondario); }
.legenda li, .grafico__suggerimento li { display: inline-flex; align-items: center; gap: var(--spazio-2); }
.grafico__suggerimento ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.campione { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.campione--durc { background: var(--colore-serie-durc); }
.campione--polizza { background: var(--colore-serie-polizza); }
.campione--certificazione { background: var(--colore-serie-certificazione); }
.campione--carta { background: var(--colore-serie-carta); }
.campione--autocertificazione { background: var(--colore-serie-autocertificazione); }
.dettagli-tabella summary { cursor: pointer; font-size: var(--testo-sm); color: var(--colore-primario); margin-top: var(--spazio-3); }

/* ===================== Vetrina (carosello) e blocchi Home FO ===================== */
.benvenuto { color: var(--colore-su-primario); }
.benvenuto__titolo { font-size: var(--testo-xl); line-height: var(--interlinea-xl); }
.benvenuto__sottotitolo { font-weight: var(--peso-medio); margin-top: var(--spazio-1); }
.vetrina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spazio-4); }
@media (max-width: 900px) { .vetrina { grid-template-columns: 1fr; } }
.vetrina__card { display: flex; gap: var(--spazio-4); align-items: center; padding: var(--spazio-4) var(--spazio-5); color: inherit; text-decoration: none; }
.vetrina__card:hover { box-shadow: var(--ombra-menu); }
.vetrina__titolo, .vetrina__testo { display: block; }
.vetrina__illustrazione {
  display: grid; place-items: center; width: 72px; height: 72px; flex: none;
  border-radius: var(--raggio-lg); background: var(--colore-primario-tenue); color: var(--colore-primario);
}
.vetrina__illustrazione .icona { width: 36px; height: 36px; stroke-width: 1.5; }
.vetrina__titolo { font-size: var(--testo-lg); line-height: var(--interlinea-lg); text-align: center; }
.vetrina__testo { font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--colore-testo-secondario); text-align: center; margin-top: var(--spazio-1); }
.indicatori { display: flex; justify-content: center; gap: var(--spazio-2); }
.indicatori button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--colore-bordo-forte); cursor: pointer; }
.indicatori button[aria-current="true"] { background: var(--colore-primario); }
.banner {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--spazio-5); align-items: center;
  padding: var(--spazio-6); border-radius: var(--raggio-lg); background: var(--colore-primario-tenue);
}
@media (max-width: 900px) { .banner { grid-template-columns: 1fr; } }
.banner__titolo { font-size: var(--testo-xl); line-height: var(--interlinea-xl); font-weight: var(--peso-bold); }
.banner__scelta { display: flex; gap: var(--spazio-3); align-items: flex-start; padding: var(--spazio-4); background: var(--colore-superficie); border-radius: var(--raggio-md); }
.banner__scelta > .icona { width: 40px; height: 40px; stroke-width: 1.25; color: var(--colore-testo); }
.banner__scelta strong { display: block; margin-bottom: var(--spazio-2); }
.griglia-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-4); align-items: start; }
@media (max-width: 900px) { .griglia-2 { grid-template-columns: 1fr; } }

/* utilità di composizione minime */
.pila { display: grid; gap: var(--spazio-4); }
.pila--stretta { gap: var(--spazio-2); }
.riga { display: flex; gap: var(--spazio-3); align-items: center; flex-wrap: wrap; }
.riga--spaziata { justify-content: space-between; }
.riga--fine { justify-content: flex-end; }
.riga--basso { align-items: flex-end; }