/* =========================================================================
   RETROBOTTEGA — INTERFACCIA
   Guscio (colonna del menu, testata) e pezzi comuni: bottoni, campi,
   tabelle, celle numeriche, chip, schede, pannelli, finestre, avvisi.
   ========================================================================= */

/* Misura di base di ogni icona: i componenti la ridefiniscono */
.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

/* ---- Guscio ------------------------------------------------------------ */
.app { min-height: 100vh; }

.menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--menu);
  background: var(--verde-950);
  color: #dcebe8;
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.menu__marchio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: inherit;
}
.menu__marchio:hover { text-decoration: none; }
.menu__marchio img { width: 150px; height: auto; }
.menu__marchio .dato { color: var(--ambra); letter-spacing: .18em; }

.menu__negozio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--t-xs);
}
.menu__negozio b { font-weight: 600; color: #fff; }
.menu__negozio small { grid-column: 2; color: #9fc2bc; }

.menu__voci {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.menu__sezione {
  padding: 16px 20px 6px;
  font-family: var(--f-dato);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #86aca6;
}
.menu__voce {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 17px;
  border-left: 3px solid transparent;
  color: #dcebe8;
  font-size: 14px;
  font-weight: 500;
}
.menu__voce .ic { width: 19px; height: 19px; opacity: .85; }
.menu__voce:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.menu__voce.attiva {
  background: var(--verde-900);
  border-left-color: var(--verde);
  color: #fff;
}
.menu__voce.attiva .ic { opacity: 1; }
.menu__n {
  font-family: var(--f-dato);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  padding: 1px 6px;
  text-align: center;
  color: #b7d3ce;
  background: rgba(255, 255, 255, .08);
}
.menu__n--ambra { background: var(--ambra); color: var(--inchiostro); font-weight: 600; }
.menu__n--errore { background: #e0584f; color: #fff; font-weight: 600; }

.menu__piede {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--t-xs);
  color: #9fc2bc;
  display: grid;
  gap: 6px;
}
.menu__piede a { color: #cfe5e1; }

.corpo {
  margin-left: var(--menu);
  min-width: 0;
}

.testa {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--testa);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--margine);
  background: var(--carta);
  border-bottom: var(--filo);
}
.testa__menu { display: none; }
.briciole {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--f-dato);
  font-size: var(--t-dato);
  letter-spacing: var(--cr-dato);
  text-transform: uppercase;
  color: var(--inchiostro-3);
  white-space: nowrap;
  overflow: hidden;
}
.briciole a { color: var(--inchiostro-2); }
.briciole .ic { width: 12px; height: 12px; flex: none; }
.briciole b { color: var(--inchiostro); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.testa__spazio { flex: 1; }

.cerca-ovunque {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(360px, 34vw);
  height: 38px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--linea-forte);
  background: var(--carta);
  color: var(--inchiostro-3);
  font-size: var(--t-sm);
  text-align: left;
}
.cerca-ovunque .ic { width: 17px; height: 17px; flex: none; }
.cerca-ovunque span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cerca-ovunque:hover { border-color: var(--inchiostro-3); }
kbd {
  font-family: var(--f-dato);
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--linea);
  background: var(--carta-2);
  color: var(--inchiostro-2);
}

.vivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--linea);
  background: var(--carta);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--inchiostro-2);
}
.vivo .spia { background: var(--spento); }
.vivo[aria-pressed="true"] { color: var(--ok); border-color: #b6d8c8; background: var(--ok-velo); }
.vivo[aria-pressed="true"] .spia { background: var(--ok); animation: pulsa 1.8s infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 112, 74, .45); } 60% { box-shadow: 0 0 0 6px rgba(22, 112, 74, 0); } }

.testa__icona {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  background: var(--carta);
  color: var(--inchiostro-2);
}
.testa__icona .ic { width: 19px; height: 19px; }
.testa__icona:hover { border-color: var(--inchiostro-3); color: var(--inchiostro); }
.testa__icona b {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-family: var(--f-dato);
  font-size: 10px;
  background: var(--ambra);
  color: var(--inchiostro);
}
.utente {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  font-size: var(--t-sm);
  font-weight: 600;
}
.utente__sigla {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--verde-900);
  color: #fff;
  font-family: var(--f-dato);
  font-size: 12px;
  font-weight: 600;
}
.utente small { display: block; font-weight: 400; color: var(--inchiostro-3); font-size: 11.5px; line-height: 1.2; }
.utente span:last-child { text-align: left; line-height: 1.25; }

.vista { min-height: calc(100vh - var(--testa)); }

/* ---- Pagina ------------------------------------------------------------ */
.pagina {
  padding: 28px var(--margine) 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: entra var(--medio) var(--curva);
}
@keyframes entra { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pagina__testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.pagina__testa h1 { font-size: var(--t-xl); font-weight: 700; }
.pagina__testa p { margin-top: 6px; color: var(--inchiostro-2); max-width: 70ch; }
.pagina__azioni { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pagina__occhiello { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

/* ---- Fascia di celle numeriche (come le ante: contigue, divise da un filo) */
.fascia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--carta);
  border: var(--filo);
}
.cella {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px 18px;
  border-right: var(--filo);
  min-width: 0;
  color: inherit;
}
.cella:last-child { border-right: 0; }
a.cella:hover, button.cella:hover { background: var(--verde-50); text-decoration: none; }
button.cella { border: 0; border-right: var(--filo); background: none; text-align: left; font: inherit; }
.cella__num {
  font-size: var(--t-kpi);
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cella__num small { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--inchiostro-3); margin-left: 4px; }
.cella__sotto { font-size: var(--t-xs); color: var(--inchiostro-3); }
.cella--ambra { box-shadow: inset 0 3px 0 var(--ambra); }
.cella--errore { box-shadow: inset 0 3px 0 var(--errore); }
.cella--ok { box-shadow: inset 0 3px 0 var(--ok); }
.cella--verde { box-shadow: inset 0 3px 0 var(--verde); }
.cella .ic { width: 16px; height: 16px; }

/* ---- Blocco: una superficie con testata, dentro alla griglia della pagina */
.blocco {
  background: var(--carta);
  border: var(--filo);
  min-width: 0;
}
.blocco__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: var(--filo);
  min-height: 56px;
  flex-wrap: wrap;
}
.blocco__testa h2 { font-size: var(--t-md); font-weight: 650; letter-spacing: -.01em; }
.blocco__testa h2 small { font-weight: 400; color: var(--inchiostro-3); margin-left: 8px; font-size: var(--t-xs); }
.blocco__testa > .ic { width: 20px; height: 20px; color: var(--inchiostro-3); }
.blocco__piede .ic { width: 15px; height: 15px; color: var(--inchiostro-3); }
.nota > .ic { width: 19px; height: 19px; }
.blocco__testa .dato { display: block; margin-bottom: 2px; }
.blocco__corpo { padding: 20px; }
.blocco__corpo--stretto { padding: 12px 20px; }
.blocco__corpo--nudo { padding: 0; }
.blocco__piede {
  padding: 12px 20px;
  border-top: var(--filo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--inchiostro-3);
}

.griglia { display: grid; gap: 24px; }
.griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia--lato { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.griglia--lato-sx { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.pila { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pila--stretta { gap: 12px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila--spazio { justify-content: space-between; }

/* ---- Bottoni ------------------------------------------------------------ */
.b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  background: none;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--inchiostro);
  transition: background var(--veloce), border-color var(--veloce), color var(--veloce);
  text-decoration: none;
}
.b:hover { text-decoration: none; }
.b .ic { width: 17px; height: 17px; flex: none; }
.b--primario { background: var(--ambra); border-color: var(--ambra); color: var(--inchiostro); }
.b--primario:hover { background: var(--ambra-chiara); border-color: var(--ambra-chiara); }
.b--secondario { background: var(--carta); border-color: var(--linea-forte); }
.b--secondario:hover { border-color: var(--inchiostro-3); background: var(--carta-2); }
.b--scuro { background: var(--verde-900); border-color: var(--verde-900); color: #fff; }
.b--scuro:hover { background: var(--verde-800); border-color: var(--verde-800); }
.b--testo { color: var(--verde-scuro); padding: 0 8px; }
.b--testo:hover { background: var(--verde-50); }
.b--pericolo { background: var(--errore); border-color: var(--errore); color: #fff; }
.b--pericolo:hover { background: #8f1d16; }
.b--pericolo-testo { color: var(--errore); background: var(--carta); border-color: #e2b8b4; }
.b--pericolo-testo:hover { background: var(--errore-velo); }
.b--piccolo { height: 30px; padding: 0 10px; font-size: var(--t-xs); gap: 6px; }
.b--piccolo .ic { width: 15px; height: 15px; }
.b--testo.b--piccolo { padding: 0 6px; }
.b[disabled] { opacity: .45; cursor: not-allowed; }
.b--solo-icona { padding: 0; width: 38px; }
.b--piccolo.b--solo-icona { width: 30px; }

/* ---- Chip e spie -------------------------------------------------------- */
.spia {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;   /* eccezione dichiarata: il pallino di stato */
  background: currentColor;
}
.spia--ok { background: var(--ok); }
.spia--attesa { background: var(--ambra-scura); }
.spia--ambra { background: var(--ambra); }
.spia--errore { background: var(--errore); }
.spia--info, .spia--verde { background: var(--verde); }
.spia--spento { background: var(--spento); }
.spia--scuro { background: var(--verde-900); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1;
}
.chip--ok { background: var(--ok-velo); color: var(--ok); }
.chip--ok .spia { background: var(--ok); }
.chip--attesa { background: var(--attesa-velo); color: var(--attesa); }
.chip--attesa .spia { background: var(--ambra-scura); }
.chip--ambra { background: var(--ambra); color: var(--inchiostro); }
.chip--ambra .spia { background: var(--inchiostro); }
.chip--errore { background: var(--errore-velo); color: var(--errore); }
.chip--errore .spia { background: var(--errore); }
.chip--info { background: var(--verde-50); color: var(--verde-800); }
.chip--info .spia { background: var(--verde); }
.chip--spento { background: var(--spento-velo); color: var(--inchiostro-2); }
.chip--spento .spia { background: var(--spento); }
.chip--scuro { background: var(--verde-900); color: #fff; }
.chip--scuro .spia { background: var(--verde-chiaro); }
.chip--bordo { background: var(--carta); border-color: var(--linea-forte); color: var(--inchiostro-2); }

.codice {
  font-family: var(--f-dato);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--inchiostro);
}
a .codice, a.codice { color: var(--verde-scuro); }

/* Il numero dello sportello: la targhetta sull'anta */
.targa {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 6px;
  font-family: var(--f-dato);
  font-size: 12px;
  font-weight: 600;
  background: var(--verde-900);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.targa--ambra { background: var(--ambra); color: var(--inchiostro); }
.targa--vuota { background: var(--carta-2); color: var(--inchiostro-3); border: 1px dashed var(--linea-forte); }
.targhe { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* ---- Campi ------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label { font-size: var(--t-xs); font-weight: 600; color: var(--inchiostro-2); }
.campo__obb { color: var(--errore); }
.campo input:not([type=checkbox]):not([type=radio]),
.campo select,
.campo textarea,
.cerca-tab input,
.filtri input,
.filtri select {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--linea-forte);
  border-radius: 0;
  background: var(--carta);
  font-size: var(--t-sm);
  color: var(--inchiostro);
  transition: border-color var(--veloce);
}
.campo textarea { height: auto; padding: 9px 11px; line-height: 1.45; resize: vertical; }
.campo select, .filtri select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337504d' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--inchiostro-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .cerca-tab input:focus, .filtri input:focus, .filtri select:focus {
  outline: 2px solid var(--verde);
  outline-offset: -1px;
  border-color: var(--verde);
}
.campo input[disabled], .campo select[disabled], .campo textarea[disabled] { background: var(--carta-2); color: var(--inchiostro-3); }
.campo__unita { display: flex; }
.campo__unita input { flex: 1; min-width: 0; }
.campo__unita > span {
  display: grid;
  place-items: center;
  padding: 0 11px;
  border: 1px solid var(--linea-forte);
  border-left: 0;
  background: var(--carta-2);
  font-size: var(--t-xs);
  color: var(--inchiostro-3);
  white-space: nowrap;
}
.campo__piede { display: flex; justify-content: space-between; gap: 12px; }
.campo__piede small, .campo small { font-size: 12px; color: var(--inchiostro-3); line-height: 1.4; }
.campo__contatore { font-family: var(--f-dato); font-size: 11px; color: var(--inchiostro-3); white-space: nowrap; }
.campo__contatore.oltre { color: var(--errore); font-weight: 600; }
.campo--errore input, .campo--errore select, .campo--errore textarea { border-color: var(--errore) !important; }
.campo__errore { font-size: 12px; color: var(--errore); font-weight: 600; }

.campi { display: grid; gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campi--1 { grid-template-columns: 1fr; }
.campi .largo { grid-column: 1 / -1; }
.gruppo-campi { display: grid; gap: 14px; }
.gruppo-campi + .gruppo-campi { margin-top: 24px; padding-top: 22px; border-top: var(--filo-chiaro); }
.gruppo-campi > h3 { font-size: var(--t-md); }
.gruppo-campi > p { color: var(--inchiostro-3); font-size: var(--t-xs); margin-top: -8px; }

.interruttore {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  cursor: pointer;
  font-size: var(--t-sm);
}
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore__leva {
  position: relative;
  width: 38px;
  height: 22px;
  margin-top: 1px;
  background: var(--carta-3);
  border: 1px solid var(--linea-forte);
  transition: background var(--veloce);
}
.interruttore__leva::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--inchiostro-3);
  transition: transform var(--veloce), background var(--veloce);
}
.interruttore input:checked + .interruttore__leva { background: var(--verde-900); border-color: var(--verde-900); }
.interruttore input:checked + .interruttore__leva::after { transform: translateX(16px); background: var(--ambra); }
.interruttore input:focus-visible + .interruttore__leva { outline: 2px solid var(--verde); outline-offset: 2px; }
.interruttore input[disabled] + .interruttore__leva { opacity: .5; }
.interruttore__testo { display: grid; gap: 2px; }
.interruttore__testo span { font-weight: 600; }
.interruttore__testo small { color: var(--inchiostro-3); font-size: 12px; line-height: 1.4; }

.scelte-giorni { display: flex; flex-wrap: wrap; border: var(--filo); width: fit-content; }
.scelte-giorni label { position: relative; cursor: pointer; }
.scelte-giorni input { position: absolute; opacity: 0; }
.scelte-giorni span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 40px;
  font-family: var(--f-dato);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-right: var(--filo);
  background: var(--carta);
  color: var(--inchiostro-2);
}
.scelte-giorni label:last-child span { border-right: 0; }
.scelte-giorni input:checked + span { background: var(--verde-900); color: #fff; }
.scelte-giorni input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: -2px; }

/* ---- Barra dei filtri sopra le tabelle ---------------------------------- */
.filtri {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: var(--filo);
  background: var(--carta);
}
.filtri label.campo-filtro { display: grid; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--inchiostro-3); }
.filtri input, .filtri select { height: 34px; width: auto; min-width: 140px; }
.filtri .spazio { flex: 1; }
.cerca-tab {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 240px;
  flex: 0 1 320px;
}
.cerca-tab .ic { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--inchiostro-3); pointer-events: none; }
.cerca-tab input { padding-left: 34px; height: 34px; }

/* ---- Tabelle ------------------------------------------------------------ */
.tabella { background: var(--carta); }
.tabella__scorri { overflow-x: auto; }
.tabella table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabella th {
  position: sticky;
  top: 0;
  background: var(--carta-2);
  border-bottom: var(--filo);
  padding: 0 14px;
  height: 38px;
  text-align: left;
  font-family: var(--f-dato);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inchiostro-3);
  white-space: nowrap;
}
.tabella th:first-child, .tabella td:first-child { padding-left: 20px; }
.tabella th:last-child, .tabella td:last-child { padding-right: 20px; }
.th-ordina {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.th-ordina .ic { width: 12px; height: 12px; }
.th-ordina:hover, .th-ordina.attivo { color: var(--inchiostro); }
.tabella td {
  padding: 10px 14px;
  border-bottom: var(--filo-chiaro);
  vertical-align: middle;
}
.tabella td.destra, .tabella th.destra { text-align: right; }
.tabella th.destra .th-ordina { flex-direction: row-reverse; }
.tabella td { font-variant-numeric: tabular-nums; }
.tabella tr.cliccabile { cursor: pointer; }
.tabella tr.cliccabile:hover td { background: var(--verde-50); }
.tabella tr.cliccabile:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.tabella tr.vuota td { padding: 40px 20px; text-align: center; color: var(--inchiostro-3); }
.tabella tr.tenue td { color: var(--inchiostro-3); }
.tabella tr.evidenza td { background: #fffaf0; }
.tabella td .sotto { display: block; font-size: 12px; color: var(--inchiostro-3); margin-top: 2px; }
.tabella td.azioni { text-align: right; white-space: nowrap; }
.tabella td.azioni .b { vertical-align: middle; }
.tabella td.nowrap { white-space: nowrap; }
.tabella__piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  font-size: var(--t-xs);
  border-top: var(--filo-chiaro);
}
.tabella__pagine { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Schede e segmenti -------------------------------------------------- */
.schede {
  display: flex;
  gap: 0;
  border-bottom: var(--filo);
  overflow-x: auto;
  scrollbar-width: none;
}
.scheda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--inchiostro-3);
  white-space: nowrap;
}
.scheda:hover { color: var(--inchiostro); }
.scheda.attiva { color: var(--inchiostro); border-bottom-color: var(--inchiostro); }
.scheda__n {
  font-family: var(--f-dato);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--carta-3);
  color: var(--inchiostro-2);
  font-variant-numeric: tabular-nums;
}
.scheda__n--ambra { background: var(--ambra); color: var(--inchiostro); }
.scheda__n--errore { background: var(--errore); color: #fff; }

.segmenti { display: inline-flex; flex-wrap: wrap; border: var(--filo); background: var(--carta); }
.segmento {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-right: var(--filo);
  background: none;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--inchiostro-2);
}
.segmento:last-child { border-right: 0; }
.segmento b { font-family: var(--f-dato); font-weight: 500; color: var(--inchiostro-3); }
.segmento:hover { background: var(--carta-2); }
.segmento.attivo { background: var(--verde-900); color: #fff; }
.segmento.attivo b { color: var(--verde-100); }

/* ---- Note ---------------------------------------------------------------- */
.nota {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding: 12px 16px;
  font-size: var(--t-sm);
  background: var(--verde-50);
  color: var(--verde-800);
  border-left: 3px solid var(--verde);
}
.nota .ic { width: 19px; height: 19px; margin-top: 1px; }
.nota b { color: inherit; }
.nota--attesa { background: var(--attesa-velo); color: var(--attesa); border-left-color: var(--ambra-scura); }
.nota--errore { background: var(--errore-velo); color: var(--errore); border-left-color: var(--errore); }
.nota--ok { background: var(--ok-velo); color: var(--ok); border-left-color: var(--ok); }
.nota--neutra { background: var(--carta-2); color: var(--inchiostro-2); border-left-color: var(--linea-forte); }
.nota p + p { margin-top: 4px; }

/* ---- Elenchi di dati (etichetta : valore) -------------------------------- */
.dati { display: grid; grid-template-columns: max-content 1fr; gap: 0; font-size: var(--t-sm); }
.dati dt, .dati dd { margin: 0; padding: 9px 0; border-bottom: var(--filo-chiaro); }
.dati dt { color: var(--inchiostro-3); padding-right: 24px; font-size: var(--t-xs); }
.dati dd { font-variant-numeric: tabular-nums; min-width: 0; }
.dati > :nth-last-child(-n+2) { border-bottom: 0; }

.vuoto {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
  color: var(--inchiostro-3);
}
.vuoto .ic { width: 28px; height: 28px; color: var(--linea-forte); }
.vuoto b { color: var(--inchiostro-2); }

/* ---- Grafici ------------------------------------------------------------- */
.grafico { width: 100%; height: auto; overflow: visible; }
.grafico__griglia { stroke: var(--linea-chiara); stroke-width: 1; }
.grafico__base { stroke: var(--linea-forte); stroke-width: 1; }
.grafico__tacca, .grafico__asse { font-family: var(--f-dato); font-size: 10px; fill: var(--inchiostro-3); }
.grafico__barra { fill: var(--verde); }
.grafico__barra:hover { fill: var(--verde-600); }
.grafico__barra.evidenza { fill: var(--ambra); }
.grafico__barra.tenue { fill: var(--verde-100); }

.proporzione { display: flex; height: 12px; gap: 2px; background: var(--carta); }
.proporzione__parte { min-width: 3px; }
.proporzione__parte--ok { background: var(--ok); }
.proporzione__parte--attesa { background: var(--ambra-scura); }
.proporzione__parte--ambra { background: var(--ambra); }
.proporzione__parte--errore { background: var(--errore); }
.proporzione__parte--info, .proporzione__parte--verde { background: var(--verde); }
.proporzione__parte--spento { background: var(--linea-forte); }
.proporzione__parte--scuro { background: var(--verde-900); }
.proporzione__legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: var(--t-xs); color: var(--inchiostro-2); }
.proporzione__legenda span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Strati: velo, finestra, pannello, avvisi, tavolozza --------------- */
.velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--velo);
  animation: velo var(--veloce) ease-out;
}
@keyframes velo { from { opacity: 0; } to { opacity: 1; } }

.velo--finestra { display: grid; place-items: center; padding: 24px; z-index: 70; }
.finestra {
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border-top: 4px solid var(--verde);
  animation: sale var(--medio) var(--curva);
}
.finestra--larga { width: min(760px, 100%); }
.finestra--pericolo { border-top-color: var(--errore); }
@keyframes sale { from { transform: translateY(10px); opacity: .6; } to { transform: none; opacity: 1; } }
.finestra__testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px 6px 24px; }
.finestra__testa h2 { font-size: var(--t-lg); }
.finestra__testa .dato { display: block; margin-bottom: 4px; }
.finestra__corpo { padding: 8px 24px 20px; overflow-y: auto; display: grid; gap: 14px; color: var(--inchiostro-2); }
.finestra__piede { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: var(--filo); background: var(--carta-2); }

.velo--pannello { display: flex; justify-content: flex-end; }
.velo--pannello.subito, .velo--pannello.subito .pannello { animation: none; }
.pannello {
  width: min(520px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border-left: 4px solid var(--verde);
  animation: scorre var(--medio) var(--curva);
}
.pannello--largo { width: min(760px, 100%); }
@keyframes scorre { from { transform: translateX(24px); opacity: .5; } to { transform: none; opacity: 1; } }
.pannello__testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 20px 16px 24px; border-bottom: var(--filo); }
.pannello__testa h2 { font-size: var(--t-lg); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pannello__testa .dato { display: block; margin-bottom: 4px; }
.pannello__testa p { margin-top: 4px; font-size: var(--t-sm); }
.pannello__corpo { flex: 1; overflow-y: auto; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 22px; }
.pannello__piede { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: var(--filo); background: var(--carta-2); flex-wrap: wrap; }
.pannello__sezione { display: grid; gap: 10px; }
.pannello__sezione > h3 { font-size: 13px; font-family: var(--f-dato); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-3); }

.avvisi {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - 48px));
}
.avviso {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 13px 16px;
  background: var(--verde-950);
  color: #eef7f5;
  font-size: var(--t-sm);
  border-left: 4px solid var(--verde);
  animation: sale var(--medio) var(--curva);
}
.avviso .ic { width: 19px; height: 19px; color: var(--verde-chiaro); }
.avviso a { color: var(--ambra); font-weight: 600; white-space: nowrap; }
.avviso--errore { border-left-color: #e0584f; }
.avviso--errore .ic { color: #ff8c84; }
.avviso--vivo { border-left-color: var(--ambra); }
.avviso--vivo .ic { color: var(--ambra); }
.avviso--info .ic { color: var(--verde-100); }
.avviso.esce { opacity: 0; transform: translateY(6px); transition: all .28s; }

.velo--palette { display: flex; justify-content: center; align-items: flex-start; padding: 12vh 20px 20px; z-index: 80; }
.palette {
  width: min(660px, 100%);
  background: var(--carta);
  border-top: 4px solid var(--ambra);
  animation: sale var(--medio) var(--curva);
}
.palette__campo { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: var(--filo); }
.palette__campo .ic { width: 20px; height: 20px; color: var(--inchiostro-3); }
.palette__campo input { flex: 1; height: 58px; border: 0; outline: 0; font-size: 17px; background: none; }
.palette__risultati { max-height: 56vh; overflow-y: auto; padding: 6px 0; }
.palette__gruppo { padding: 10px 18px 4px; }
.palette__voce {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  color: var(--inchiostro);
}
.palette__voce .ic { width: 18px; height: 18px; color: var(--inchiostro-3); }
.palette__voce:hover, .palette__voce.sel { background: var(--verde-50); text-decoration: none; }
.palette__voce.sel { box-shadow: inset 3px 0 0 var(--verde); }
.palette__testo { display: grid; min-width: 0; }
.palette__testo b { font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__testo small { font-size: 12px; color: var(--inchiostro-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__destra { font-size: 12px; color: var(--inchiostro-3); }
.palette__vuoto { padding: 22px 18px; color: var(--inchiostro-3); font-size: var(--t-sm); }
.palette__vuoto:empty { display: none; }
.palette__piede { display: flex; gap: 18px; padding: 10px 18px; border-top: var(--filo); font-size: 11.5px; color: var(--inchiostro-3); background: var(--carta-2); }
.palette__piede kbd { margin-right: 2px; }

/* ---- Menu a tendina (azioni della riga, utente, notifiche) ------------- */
.tendina {
  position: fixed;
  z-index: 75;
  min-width: 220px;
  background: var(--carta);
  border: 1px solid var(--linea-forte);
  border-top: 3px solid var(--verde);
  padding: 6px 0;
  animation: sale var(--veloce) ease-out;
}
.tendina a, .tendina button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  background: none;
  text-align: left;
  font-size: var(--t-sm);
  color: var(--inchiostro);
}
.tendina a:hover, .tendina button:hover { background: var(--verde-50); text-decoration: none; }
.tendina .ic { width: 17px; height: 17px; color: var(--inchiostro-3); }
.tendina hr { border: 0; border-top: var(--filo-chiaro); margin: 6px 0; }
.tendina .pericolo, .tendina .pericolo .ic { color: var(--errore); }

/* ---- Responsivo ---------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --margine: 24px; }
  .griglia--lato { grid-template-columns: minmax(0, 1fr) 320px; }
  .griglia--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .griglia--lato, .griglia--lato-sx, .griglia--2 { grid-template-columns: 1fr; }
  .cerca-ovunque { width: 44px; }
  .cerca-ovunque span, .cerca-ovunque kbd { display: none; }
  .utente span:last-child { display: none; }
}
@media (max-width: 860px) {
  :root { --margine: 16px; --menu: 272px; }
  .menu { transform: translateX(-100%); transition: transform var(--medio) var(--curva); }
  body.menu-aperto .menu { transform: none; }
  body.menu-aperto::after { content: ""; position: fixed; inset: 0; background: var(--velo); z-index: 25; }
  .corpo { margin-left: 0; }
  .testa__menu { display: grid; }
  .vivo span { display: none; }
  .griglia--3 { grid-template-columns: 1fr; }
  .campi, .campi--3 { grid-template-columns: 1fr; }
  .pagina__testa h1 { font-size: 24px; }
  .fascia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cella { border-bottom: var(--filo); }
  .cella:nth-child(2n) { border-right: 0; }
}