/* MS Design gestionale: design system. One file, no build.
   Tokens first; components below use only tokens. Module-specific styles go in
   assets/css/moduli/<modulo>.css, loaded by the view with usaCss('<modulo>').
   Scale: --t-xs 14 / --t-s 15 / --t-m 16 on computers; up to 900 px (phones and tablets) and on every
   touch screen --t-xs 15 / --t-s 16 / --t-m 17. Rule: no text below 14px on computers and 15px on
   phones, tablets and touch screens. Only exceptions: phone tab bar labels (14px, under 24px icons) and
   the notification counter (12px). Badges, table headings and data labels use --t-s. Numbers people
   work with use --t-m or more. Touch screens: 48 px for every target (block at the end of the file). */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-wdth-normal.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-ext-wdth-normal.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #1F2326;            /* logo ink: text, top bar */
  --ink-2: #3A4147;          /* secondary text */
  --ink-3: #4D555B;          /* muted text: 7.6:1 on white, 6.6:1 on --alu */
  --alu: #ECEFF1;            /* page background: anodised aluminium */
  --alu-2: #F6F7F8;          /* subtle fill */
  --bianco: #FFFFFF;
  --bordo-campo: #767F86;    /* text fields, selects, segmented controls: 4.1:1 on white, 3.5:1 on --alu */
  --profilo: #80898F;        /* buttons and other things you tap: 3.6:1 on white, 3.1:1 on --alu */
  --linea: #B4BCC2;          /* panels, tables and lists (white on --alu already marks them) */
  --profilo-2: #E1E5E8;      /* dividers inside a panel only */

  --verde: #007A45;          /* primary action, "ok" */
  --verde-scuro: #00633A;
  --verde-tenue: #E3F2EA;
  --blu: #0A6FA8;            /* links, information, "in arrivo", keyboard focus */
  --blu-tenue: #E2F0F8;
  --ambra: #A85F00;          /* attention */
  --ambra-testo: #7E4700;    /* attention as text: 7.5:1 on white */
  --ambra-tenue: #FBF0DF;
  --rosso: #B3261E;          /* critical, destructive */
  --rosso-tenue: #FBE7E5;

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* 14 / 15 / 17 px on phones (16 px base on computers), titles 20 / 24 / 30 px */
  --t-xs: 0.875rem; --t-s: 0.9375rem; --t-m: 1.0625rem; --t-l: 1.25rem; --t-xl: 1.5rem; --t-xxl: 1.875rem;
  --r-s: 6px; --r-m: 10px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --tocco: 44px;             /* minimum touch target */
  --barra: 56px;             /* top bar height */
  --lato: 248px;             /* sidebar width */
  --focus: 0 0 0 3px rgba(10, 111, 168, 0.35);
}
@media (min-width: 901px) { :root { --t-m: 1rem; } }
/* Phones and tablets: the secondary text decides what to do (states, labels, the customer under a code). */
@media (max-width: 900px) { :root { --t-xs: 0.9375rem; --t-s: 1rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--t-m); line-height: 1.45; color: var(--ink);
  background: var(--alu); font-variant-numeric: tabular-nums; overflow-wrap: break-word;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
p { margin: 0 0 var(--sp-3); }
small { font-size: var(--t-xs); }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.barra :focus-visible, .accesso :focus-visible { outline-color: #fff; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
@media (max-width: 700px) { h1 { font-size: var(--t-xl); } }

/* Skip link: first thing reached with Tab */
.salta { position: fixed; left: 8px; top: -60px; z-index: 100; background: var(--bianco); color: var(--ink); padding: 10px 16px; border-radius: var(--r-s); font-weight: 650; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.salta:focus { top: 8px; }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; display: grid; grid-template-columns: var(--lato) minmax(0, 1fr); grid-template-rows: var(--barra) 1fr; }
.colonna { min-width: 0; display: flex; flex-direction: column; }
.barra {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--sp-4);
  height: var(--barra); padding: 0 var(--sp-4); background: var(--ink); color: #fff; min-width: 0;
}
.barra .marchio { display: flex; align-items: center; gap: 10px; color: #fff; width: calc(var(--lato) - var(--sp-4)); flex: none; min-height: 44px; min-width: 44px; border-radius: var(--r-s); }
.barra .marchio:hover { text-decoration: none; }
.barra .marchio img { width: 32px; height: 32px; border-radius: 7px; }
.barra .marchio b { font-weight: 650; font-size: var(--t-m); }
.barra .marchio span { display: block; font-size: var(--t-xs); color: #B4BDC3; font-weight: 400; }
.chiedi-barra { flex: 1; min-width: 0; max-width: 720px; display: flex; align-items: center; gap: 2px; background: #2C3236; border: 1px solid #4A535A; border-radius: 24px; padding: 0 2px 0 14px; height: 48px; }
.chiedi-barra:focus-within { border-color: #7FB9A0; background: #30373B; }
.chiedi-barra svg.lente { flex: none; color: #AEB7BD; }
.chiedi-barra input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; height: 44px; font-size: var(--t-m); padding: 0 6px; }
.chiedi-barra input::placeholder { color: #AEB7BD; opacity: 1; }
.chiedi-barra .btn-icona { color: #DDE3E7; width: 44px; height: 44px; min-height: 44px; }
/* On the Chiedi page the question box is the page's own: the bar keeps its place, not shown twice. */
.su-chiedi .chiedi-barra { visibility: hidden; }
.barra .azioni-barra { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); }
.barra .btn-icona { color: #DDE3E7; }
.barra .btn-icona:hover { background: #2E353A; }
.campana { position: relative; }
.campana .pallino { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rosso); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; line-height: 1; }
.utente-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 24px; color: #fff; background: transparent; border: 0; cursor: pointer; min-height: 44px; min-width: 44px; }
.utente-chip:hover { background: #2E353A; }
.utente-chip .iniziali { width: 34px; height: 34px; border-radius: 50%; background: #3A4248; display: grid; place-items: center; font-size: var(--t-s); font-weight: 650; flex: none; }
.utente-chip small { display: block; color: #B4BDC3; font-size: var(--t-xs); text-align: left; }

/* No connection: right under the top bar, on every page */
.rete-assente { position: sticky; top: var(--barra); z-index: 29; display: flex; align-items: center; gap: 10px; padding: 10px var(--sp-4); background: var(--ambra-tenue); color: #5E3500; border-bottom: 1px solid #E3BE84; font-size: var(--t-s); font-weight: 600; }
.rete-assente svg { flex: none; }

.lato { background: var(--bianco); border-right: 1px solid var(--linea); padding: var(--sp-3) var(--sp-2) var(--sp-6); position: sticky; top: var(--barra); height: calc(100vh - var(--barra)); overflow-y: auto; }
.lato .gruppo { font-size: var(--t-xs); color: var(--ink-3); font-weight: 650; margin: var(--sp-4) var(--sp-3) var(--sp-1); }
/* The last group (entries alone in their area): a thin line instead of a title. */
.lato .gruppo.senza-titolo, .foglio-nav .gruppo.senza-titolo { height: 0; margin: var(--sp-3) var(--sp-3) var(--sp-2); border-top: 1px solid var(--profilo-2); }
.lato a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-s); color: var(--ink-2); font-weight: 500; min-height: 44px; }
.lato a:hover { background: var(--alu-2); text-decoration: none; color: var(--ink); }
.lato a.attivo { background: var(--verde-tenue); color: var(--verde-scuro); font-weight: 650; box-shadow: inset 4px 0 0 var(--verde); }
.lato a svg { flex: none; }
/* The page never grows wider than the window, even when a module's grid is wrong: clip (not hidden) creates
   no scrolling box, so the sticky and fixed bars of the modules keep working. The e2e check measures the
   elements that pass the edge (fuoriSchermo), because the document no longer scrolls sideways. */
.contenuto { flex: 1; min-width: 0; padding: var(--sp-5) var(--sp-5) 96px; overflow-x: clip; }
.schede-basso { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .lato { display: none; }
  .barra { gap: var(--sp-2); padding: 0 var(--sp-2); }
  .barra .marchio { width: auto; justify-content: center; }
  .barra .marchio div { display: none; }
  .utente-chip { padding: 4px; }
  .utente-chip div { display: none; }
  .chiedi-barra { height: 46px; padding-left: 10px; }
  .btn-icona { min-width: 44px; min-height: 44px; }
  .contenuto { padding: var(--sp-4) var(--sp-4) 104px; }
  .schede-basso {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--bianco); border-top: 1px solid var(--profilo); padding-bottom: env(safe-area-inset-bottom);
  }
  .schede-basso a, .schede-basso button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; color: var(--ink-3); font-size: 14px; font-weight: 650; background: none; border: 0; padding: 6px 1px; cursor: pointer; text-align: center; line-height: 1.15; min-width: 0; letter-spacing: -0.01em; }
  .schede-basso a span, .schede-basso button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Narrow phones (360 px): the labels stay whole by narrowing the letters (the font has a width axis). */
  @media (max-width: 400px) { .schede-basso a span, .schede-basso button span { font-stretch: 82%; letter-spacing: -0.015em; } }
  .schede-basso a.attivo { color: var(--verde-scuro); box-shadow: inset 0 3px 0 var(--verde); background: var(--verde-tenue); }
  .schede-basso a:hover { text-decoration: none; }
}

/* Sheet with the full navigation on phones, user menu */
.foglio-nav a, .foglio-nav button { display: flex; align-items: center; gap: 12px; padding: 12px 8px; color: var(--ink); border: 0; border-bottom: 1px solid var(--profilo-2); min-height: 52px; font-weight: 500; width: 100%; background: none; text-align: left; cursor: pointer; }
.foglio-nav a:hover, .foglio-nav button:hover { background: var(--alu-2); text-decoration: none; }
.foglio-nav h4, .foglio-nav .gruppo { font-size: var(--t-xs); color: var(--ink-3); margin: var(--sp-4) 8px var(--sp-1); font-weight: 650; }
.foglio-nav a.attivo { background: var(--verde-tenue); color: var(--verde-scuro); font-weight: 650; box-shadow: inset 4px 0 0 var(--verde); }
/* Entries for the phone only (Scansiona): not in the sidebar of a computer with a mouse (a touch tablet keeps them). */
@media (min-width: 901px) and (pointer: fine) { .lato .solo-telefono-menu { display: none; } }
.lato.senza-gruppi > a:first-child { margin-bottom: var(--sp-2); }

/* ---------- Page ---------- */
.pagina { max-width: 1240px; margin: 0 auto; }
.pagina.stretta { max-width: 760px; }
.testa { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.testa .titoli { min-width: 0; flex: 1 1 320px; }
.testa .titolo-riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* A long title (a code, an address) wraps instead of passing the edge of a 360 px phone. */
.testa h1 { overflow-wrap: anywhere; min-width: 0; }
.testa .badge { font-size: var(--t-m); padding: 4px 12px; border: 1px solid currentColor; line-height: 1.3; white-space: normal; max-width: 100%; }
.indietro { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 6px; margin: 0 0 8px -6px; font-size: var(--t-m); font-weight: 600; color: var(--blu); background: none; border: 0; border-radius: var(--r-s); cursor: pointer; text-align: left; }
.indietro:hover { background: var(--blu-tenue); text-decoration: none; }
.indietro svg { flex: none; }
.testa p.sotto { color: var(--ink-3); margin: 4px 0 0; }
.testa .azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.sotto-pagine { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 var(--sp-4); }
.sotto-pagine a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--profilo); background: var(--bianco); color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.sotto-pagine a:hover { text-decoration: none; background: var(--alu-2); }
.sotto-pagine a.attivo { background: var(--ink); border-color: var(--ink); color: #fff; }
.collegati-testa { margin: -8px 0 var(--sp-4); }
.solo-telefono, .btn.solo-telefono { display: none; }
@media (max-width: 700px) {
  .testa { align-items: stretch; flex-direction: column; margin-bottom: var(--sp-4); }
  .testa .titoli { flex-basis: auto; }
  .testa .azioni { width: 100%; }
  .testa .azioni > .btn { flex: 1 1 auto; }
  .testa .azioni > .btn.primaria, .testa .azioni > .primaria { flex: 1 1 100%; }
  /* A long button label goes to a second line inside the button, never past the edge. */
  .testa .azioni .btn { white-space: normal; max-width: 100%; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
  /* Compact header on the phone: no subtitle line; the section tabs go after the content (and in «Altro»). */
  .testa p.sotto { display: none; }
  .pagina.con-sezioni { display: flex; flex-direction: column; }
  .pagina.con-sezioni > .testa { order: 0; }
  .pagina.con-sezioni > .collegati-testa { order: 1; }
  .pagina.con-sezioni > .corpo-pagina { order: 2; }
  .pagina.con-sezioni > .sotto-pagine { order: 3; margin: var(--sp-4) 0 0; }
  .solo-telefono { display: revert; }
  .btn.solo-telefono { display: inline-flex; }
  .collegamenti a { flex: 1 1 calc(50% - 8px); min-width: 0; }
  /* «Altro» on the title line, at the right: the green action keeps the whole width under it. */
  .testa { position: relative; }
  .testa .azioni > .btn.altro { position: absolute; top: 0; right: 0; flex: none; width: auto; }
  .testa:has(.azioni > .btn.altro) .titoli { padding-right: 110px; }
  .testa:has(.azioni > .btn.altro) .titolo-riga { min-height: 48px; }
}
/* Phone numbers in lists are tapped to call: a full-height target. */
.tabella a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
.sezione { margin-bottom: var(--sp-5); }
.sezione > h3 { margin-bottom: var(--sp-3); }

.pannello { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-m); padding: var(--sp-4); min-width: 0; }
.pannello + .pannello { margin-top: var(--sp-4); }
.pannello > h3 { margin-bottom: var(--sp-3); }
.pannello.piatto { padding: 0; overflow: hidden; }
.griglia { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.griglia-2 { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.griglia-lato { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 900px) { .griglia-2 { grid-template-columns: minmax(0, 1fr); } }
/* Pages with a side column: one column up to 1180 px (tablet held sideways, 1280 px at 125%); from 1181 to
   1440 px the main column drops its 'solo-pc' table columns, so nothing hides behind a sideways scroll. */
@media (max-width: 1180px) { .griglia-lato { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1181px) and (max-width: 1440px) {
  .griglia-lato > :first-child .tabella th.solo-pc, .griglia-lato > :first-child .tabella td.solo-pc { display: none; }
}
/* The side column is narrow at every width: a row with a button puts the button under the text. */
.griglia-lato > :last-child .elenco > div.voce { flex-wrap: wrap; }
.griglia-lato > :last-child .elenco > div.voce > .corpo { flex: 1 1 240px; min-width: 0; }
.griglia-lato > :last-child .elenco > div.voce > .btn { flex: 1 1 100%; white-space: normal; }
.riga { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.riga.spazio { justify-content: space-between; }
/* A badge alone in a row wraps inside itself only when it is wider than the whole row (never cut). */
.riga > .badge { white-space: normal; max-width: 100%; }
.muto { color: var(--ink-3); }
.piccolo { font-size: var(--t-s); }
.forte { font-weight: 650; }
.destra { text-align: right; }
.num { text-align: right; white-space: nowrap; }
.mt { margin-top: var(--sp-4); }
.mb { margin-bottom: var(--sp-4); }

/* Key/value list */
.dati { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0; }
.dati div { min-width: 0; }
.dati dt { font-size: var(--t-s); color: var(--ink-3); font-weight: 600; }
.dati dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }

/* "Collegati": links to related records */
.collegamenti { display: flex; flex-wrap: wrap; gap: 8px; }
.collegamenti a { display: inline-flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 6px 14px; border: 1px solid var(--profilo); border-radius: var(--r-s); background: var(--bianco); color: var(--ink); font-weight: 600; }
.collegamenti a small { color: var(--ink-3); font-weight: 500; }
.collegamenti a:hover { text-decoration: none; background: var(--alu-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tocco); padding: 0 16px;
  border-radius: var(--r-s); border: 1px solid var(--profilo); background: var(--bianco); color: var(--ink); font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .12s, border-color .12s;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12); text-align: center;
}
.btn:hover { background: var(--alu-2); border-color: var(--ink-3); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.in-corso, .btn.in-corso:disabled { opacity: 1; cursor: progress; }
.btn.primario { background: var(--verde); border-color: var(--verde); color: #fff; box-shadow: none; }
.btn.primario:hover { background: var(--verde-scuro); border-color: var(--verde-scuro); }
.btn.pericolo { color: var(--rosso); border-color: #C9817B; }
.btn.pericolo:hover { background: var(--rosso-tenue); }
.btn.pericolo.pieno { background: var(--rosso); color: #fff; border-color: var(--rosso); box-shadow: none; }
.btn.piccolo { min-height: 40px; padding: 0 12px; font-size: var(--t-s); }
.btn.grande { min-height: 56px; font-size: var(--t-l); padding: 0 22px; }
/* A full-width button with a long sentence wraps on a narrow phone instead of widening its window. */
.btn.largo { width: 100%; white-space: normal; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.btn.testo { border-color: transparent; background: transparent; color: var(--blu); padding: 0 8px; box-shadow: none; }
.btn.testo:hover { background: var(--blu-tenue); }
.btn-icona { display: inline-grid; place-items: center; width: var(--tocco); height: var(--tocco); min-height: var(--tocco); border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; flex: none; }
.btn-icona:hover { background: var(--alu); }
.btn-icona.attivo { background: var(--rosso); color: #fff; }
.btn .gira, .gira { animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* "Altro" menu of a page header */
.menu-altro { position: relative; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.form .pieno, .form .campo.largo { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label, .campo > legend { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); }
.campo .aiuto { font-size: var(--t-xs); color: var(--ink-3); }
.campo .errore { font-size: var(--t-s); color: var(--rosso); font-weight: 600; }
.campo .capito { font-size: var(--t-s); color: var(--blu); font-weight: 650; }
.input, .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 9px 12px; border: 1.5px solid var(--bordo-campo); border-radius: var(--r-s); background: var(--bianco); font-size: var(--t-m);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .input:focus { outline: none; border-color: var(--blu); box-shadow: var(--focus); }
.campo.ha-errore input, .campo.ha-errore select, .campo.ha-errore textarea { border-color: var(--rosso); border-width: 2px; }
.campo .con-azioni { display: flex; gap: 6px; align-items: stretch; }
.campo .con-azioni > input, .campo .con-azioni > textarea, .campo .con-azioni > .auto { flex: 1; min-width: 0; }
.campo .con-azioni .btn-icona { border-radius: var(--r-s); border: 1.5px solid var(--bordo-campo); background: var(--alu-2); height: auto; min-height: 48px; width: 48px; }
.campo .con-azioni .btn-icona.attivo { background: var(--rosso); color: #fff; border-color: var(--rosso); }
.campo .con-azioni .mostra { flex: none; min-width: 84px; }
.spunta { display: flex; align-items: center; gap: 12px; min-height: var(--tocco); cursor: pointer; font-weight: 500; }
.spunta input { width: 24px; height: 24px; accent-color: var(--verde); flex: none; }
.input-euro { position: relative; }
.ricerca-box { position: relative; flex: 1 1 260px; min-width: min(220px, 100%); max-width: 460px; }
.ricerca-box input { padding-left: 40px !important; width: 100%; min-height: 48px; border: 1.5px solid var(--bordo-campo); border-radius: var(--r-s); background: var(--bianco); font-size: var(--t-m); }
.ricerca-box:has(> .btn-icona) input { padding-right: 52px; }
.ricerca-box > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.ricerca-box > .btn-icona { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border-radius: var(--r-s); }
.ricerca-box > .btn-icona svg { position: static; transform: none; }
.filtri { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.filtri select, .filtri input[type=date] { min-height: 48px; border: 1.5px solid var(--bordo-campo); border-radius: var(--r-s); padding: 0 10px; background: var(--bianco); font-size: var(--t-m); max-width: 100%; }
.filtri .altri { display: contents; }
.filtri > .schede { flex: 1 1 100%; margin-bottom: 0; }
.filtri .apri-altri { display: none; }
@media (max-width: 700px) {
  /* The same bar in every list: the search on its own line (the whole placeholder readable), then the state
     tabs with «Altri filtri», always written, at the end of their row; the other filters open under them. */
  .filtri { gap: 6px 4px; }
  .filtri .ricerca-box { flex: 1 1 100%; max-width: none; min-width: 0; order: 0; margin-bottom: 4px; }
  /* The state pills flow in the bar itself, so «Altri filtri» is the last pill of their row. */
  .filtri > .schede.stati-filtro { display: contents; }
  .filtri > .schede.stati-filtro > button { order: 1; }
  .filtri .apri-altri { display: inline-flex; order: 2; flex: none; border-radius: 24px; padding: 0 14px; min-height: var(--tocco); }
  .filtri .altri { display: none; order: 3; }
  .filtri .altri.aperti { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; margin-top: 4px; }
  .filtri .filtri-attivi { order: 4; margin-top: 4px; }
}
/* The password in the hand-over window: large and monospaced, read aloud or written by hand on the sheet. */
.password-consegna { display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--profilo); border-radius: var(--r-m); background: var(--alu-2); }
.password-consegna .riga { align-items: center; gap: 8px 12px; flex-wrap: wrap; font-weight: 600; min-width: 0; }
.password-grande { font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; font-size: var(--t-xxl); font-weight: 700; letter-spacing: .06em; line-height: 1.2; color: var(--ink); background: var(--bianco); padding: 4px 12px; border: 1px solid var(--linea); border-radius: var(--r-s); min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 700px) { .password-grande { font-size: var(--t-xl); letter-spacing: .03em; } }
/* An active filter is always said over the list: «Filtro: Scaffale A-01-1 · Togli il filtro». */
.filtri .filtri-attivi { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 4px 4px 4px 12px; border: 1px solid #8EBFDB; border-radius: var(--r-s); background: var(--blu-tenue); color: #074A6F; font-size: var(--t-s); font-weight: 600; }
.filtri .filtri-attivi > svg { flex: none; }
.filtri .filtri-attivi .testo-filtro { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.filtri .filtri-attivi .togli-filtro { min-height: var(--tocco); font-size: var(--t-s); background: var(--bianco); border-color: var(--profilo); }

/* Autocomplete */
.auto { position: relative; }
.auto .lista { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px); background: var(--bianco); border: 1px solid var(--profilo); border-radius: var(--r-s); max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(31, 35, 38, .14); }
.auto .lista button { display: block; width: 100%; text-align: left; padding: 11px 12px; min-height: 48px; border: 0; background: none; cursor: pointer; border-bottom: 1px solid var(--profilo-2); }
.auto .lista button:hover, .auto .lista button.sel { background: var(--blu-tenue); }
.auto .lista small { display: block; color: var(--ink-3); }
.auto .lista button.crea { color: var(--blu); font-weight: 650; border-bottom: 0; }
/* What a search field chose, in full (the box cuts a long label at 390 px): label, code and the line under it (g6-05). */
.campo .scelto { font-size: var(--t-s); line-height: 1.35; color: var(--ink-2); white-space: normal; overflow-wrap: anywhere; min-width: 0; margin-top: 2px; }
.campo .scelto b { font-weight: 650; color: var(--ink); }

/* Segmented control: wraps instead of scrolling, a label never breaks in the middle */
.segmenti { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1.5px solid var(--bordo-campo); border-radius: var(--r-s); background: var(--bianco); max-width: 100%; }
.segmenti button { border: 0; background: none; padding: 0 14px; min-height: 42px; cursor: pointer; font-weight: 600; color: var(--ink-2); border-radius: 4px; white-space: nowrap; }
.segmenti button:hover { background: var(--alu); }
.segmenti button.sel { background: var(--ink); color: #fff; }

/* Tabs: wrap to a second line, never a hidden horizontal scroll */
.schede { display: flex; flex-wrap: wrap; gap: 2px 4px; border-bottom: 1px solid var(--linea); margin-bottom: var(--sp-4); }
.schede button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; min-height: var(--tocco); display: inline-flex; align-items: center; gap: 6px; }
.schede button:hover { color: var(--ink); }
.schede button.sel { color: var(--ink); border-bottom-color: var(--verde); }
.schede button .conta { font-size: var(--t-xs); background: var(--alu); padding: 1px 8px; border-radius: 10px; color: var(--ink-2); }
/* Filter tabs of a list on the phone: the states with nothing inside go away (not the chosen one, not «Tutti»). */
@media (max-width: 700px) { .stati-filtro button.zero:not(.sel):not(.sempre) { display: none; } }
.schede button.sel .conta { background: var(--verde-tenue); color: var(--verde-scuro); }
/* Phones: the state tabs are pills with a border that wrap compactly, words and number on one line. */
@media (max-width: 700px) {
  .schede.stati-filtro { border-bottom: 0; gap: 4px; }
  .schede.stati-filtro button { min-height: 44px; padding: 0 8px; margin: 0; gap: 4px; border: 1px solid var(--profilo); border-radius: 22px; background: var(--bianco); color: var(--ink-2); font-size: var(--t-xs); letter-spacing: -0.005em; }
  .schede.stati-filtro button .conta { padding: 0 5px; }
  .schede.stati-filtro button.sel { background: var(--verde-tenue); border: 2px solid var(--verde); color: var(--verde-scuro); padding: 0 7px; }
  .schede.stati-filtro button.sel .conta { background: var(--bianco); color: var(--verde-scuro); }
}

/* Period picker */
.periodo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.periodo .frecce { display: inline-flex; align-items: center; gap: 4px; }
.periodo .frecce .btn { padding: 0 10px; min-width: 48px; }
.periodo .etichetta-periodo { font-weight: 650; min-width: 9em; text-align: center; }
.periodo .date { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- Tables ---------- */
.tabella-box { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-m); overflow: hidden; scroll-margin-top: calc(var(--barra) + 12px); }
.tabella-box .scorri { overflow-x: auto; }
table.tabella { width: 100%; border-collapse: collapse; }
.tabella th { text-align: left; font-size: var(--t-s); font-weight: 650; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--linea); background: var(--alu-2); white-space: nowrap; }
.tabella td { padding: 11px 12px; border-bottom: 1px solid var(--profilo-2); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tbody tr.cliccabile { cursor: pointer; }
/* Hover colour only where a mouse exists: after a tap on a phone nothing stays coloured. */
@media (hover: hover) { .tabella tbody tr.cliccabile:hover td { background: #F2F7FA; } }
.tabella tbody tr.cliccabile:active td { background: #E9F2F8; }
/* The main column (the record): wide enough to read, two lines at most, then dots. */
.tabella td.principale { min-width: 14rem; }
.tabella td.principale > .clamp, .tabella td.principale.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Secondary columns hidden on tablets and small laptops (901-1180 px) and in the phone cards: the module marks
   them with classe: 'solo-pc' (heading and cells get the class, so the headings never shift). */
@media (min-width: 901px) and (max-width: 1180px) { .tabella th.solo-pc, .tabella td.solo-pc { display: none; } }
.tabella .num, .tabella th.num { text-align: right; }
.tabella tfoot td { font-weight: 650; border-top: 1px solid var(--linea); background: var(--alu-2); }
.tabella td .sotto, .sotto { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.tabella-box .piede { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--profilo-2); font-size: var(--t-s); color: var(--ink-3); }
@media (max-width: 900px) {
  /* Rows become compact cards (phones and tablets, the same limit as the bottom bar): main column as the
     title, short columns on one line, numbers as label … value, text with the label above and the value
     under it, on the left. */
  table.tabella.impila thead { display: none; }
  table.tabella.impila, .tabella.impila tbody, .tabella.impila tr, .tabella.impila td { display: block; width: 100%; }
  .tabella.impila tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--profilo-2); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
  .tabella.impila tbody tr:last-child { border-bottom: 0; }
  .tabella.impila tbody tr.cliccabile { position: relative; padding-right: 36px; }
  .tabella.impila tbody tr.cliccabile::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--ink-3); line-height: 1; }
  .tabella.impila td { padding: 2px 0; border: 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; overflow-wrap: anywhere; min-width: 0; }
  .tabella.impila td::before { content: attr(data-etichetta); color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; text-align: left; flex: none; max-width: 45%; }
  /* .num keeps the figure on one line; its label goes on more lines instead of covering the figure (g6-10). */
  .tabella.impila td.num::before { white-space: normal; overflow-wrap: anywhere; }
  .tabella.impila td.principale { display: block; text-align: left; font-weight: 650; padding-bottom: 4px; font-size: var(--t-m); flex: 1 1 100%; min-width: 0; }
  .tabella.impila td.principale::before { content: none; }
  .tabella.impila td.breve { display: inline-flex; width: auto; flex: 0 0 auto; text-align: left; }
  .tabella.impila td.breve::before { content: none; }
  .tabella.impila td:not(.principale):not(.breve) { flex: 1 1 100%; }
  .tabella.impila td:not(.num):not(.breve):not(.principale) { flex-direction: column; align-items: flex-start; text-align: left; gap: 0; }
  .tabella.impila td:not(.num):not(.breve):not(.principale)::before { max-width: none; }
  .tabella.impila td.vuota-mobile, .tabella.impila td:empty, .tabella.impila td.solo-pc { display: none; }
  /* The total row: one card, «Totale» in bold without the label of the first column. */
  .tabella.impila tfoot { display: block; width: 100%; }
  .tabella.impila tfoot tr { padding: 10px 14px; background: var(--alu-2); border-top: 1px solid var(--linea); }
  .tabella.impila tfoot td { display: flex; background: none; }
  .tabella.impila tfoot td:first-child { font-weight: 700; }
  .tabella.impila tfoot td:first-child::before { content: none; }
  /* Badges in the cards wrap inside the card (a long state, a reason to order). */
  .tabella.impila td.breve { max-width: 100%; min-width: 0; }
  .tabella.impila td .badge { white-space: normal; max-width: 100%; line-height: 1.3; padding-top: 3px; padding-bottom: 3px; }
  /* In the cards the whole row takes the colour of a tap, never a single cell. */
  .tabella.impila tbody tr.cliccabile:active td, .tabella.impila tbody tr.cliccabile:hover td { background: none; }
  .tabella.impila tbody tr.cliccabile:active { background: #E9F2F8; }
}
@media (hover: hover) and (max-width: 900px) { .tabella.impila tbody tr.cliccabile:hover { background: #F2F7FA; } }
@media (min-width: 701px) and (max-width: 900px) {
  /* Tablets: the cards on two columns. */
  .tabella-box .scorri:has(> table.tabella.impila) { overflow-x: visible; }
  table.tabella.impila tbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tabella.impila tbody tr { border-right: 1px solid var(--profilo-2); }
  .tabella.impila tbody tr:nth-child(2n) { border-right: 0; }
  .tabella.impila tbody tr:last-child { border-bottom: 1px solid var(--profilo-2); }
}

/* ---------- Badges, states ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 12px; font-size: var(--t-s); font-weight: 650; background: var(--alu); color: var(--ink-2); white-space: nowrap; line-height: 1.6; }
.badge.ok { background: var(--verde-tenue); color: var(--verde-scuro); }
.badge.info { background: var(--blu-tenue); color: #075580; }
.badge.attenzione { background: var(--ambra-tenue); color: var(--ambra-testo); }
.badge.critico { background: var(--rosso-tenue); color: #8E1D17; }
.badge.scuro { background: var(--ink); color: #fff; }
.avviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s); border: 1px solid; margin-bottom: var(--sp-4); }
.avviso svg { flex: none; margin-top: 2px; }
.avviso > div { min-width: 0; flex: 1; }
.avviso.info { background: var(--blu-tenue); border-color: #8EBFDB; color: #074A6F; }
.avviso.attenzione { background: var(--ambra-tenue); border-color: #DDB070; color: #5E3500; }
.avviso.critico { background: var(--rosso-tenue); border-color: #DE9890; color: #7A1A14; }
.avviso.ok { background: var(--verde-tenue); border-color: #86C3A3; color: #004D2D; }
.avviso .riga { margin-top: 8px; }

/* Stock bar: the warehouse's signature element.
   physical stock split into free (green) and reserved (amber), goods on order (blue hatch),
   shortage (red hatch), the minimum stock as a tick. */
.giacenza { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.giacenza .barra-g { position: relative; height: 12px; border-radius: 3px; background: var(--alu); overflow: hidden; display: flex; }
.giacenza .barra-g i { display: block; height: 100%; }
.giacenza .libera { background: var(--verde); }
.giacenza .bloccata { background: #D9A441; }
.giacenza .arrivo { background: repeating-linear-gradient(135deg, #7DB7DA 0 4px, #CFE5F2 4px 8px); }
.giacenza .mancante { background: repeating-linear-gradient(135deg, var(--rosso) 0 4px, #F2C2BE 4px 8px); }
.giacenza .scorta { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }
.giacenza .legenda { display: flex; gap: 4px 14px; font-size: var(--t-s); color: var(--ink-3); flex-wrap: wrap; align-items: baseline; }
.giacenza .legenda b { color: var(--ink); font-weight: 650; }
.giacenza .legenda .libera-q { font-size: var(--t-m); color: var(--ink); }
.giacenza .legenda .libera-q b { font-weight: 700; }
.giacenza .legenda .mancano { color: var(--rosso); font-weight: 700; }
.giacenza.grande .barra-g { height: 18px; border-radius: 4px; }

/* Indicators (dashboard tiles): the state reads from an icon and a word, not only the colour */
.indicatori { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.indicatore { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); border-left: 6px solid var(--linea); min-width: 0; }
a.indicatore:hover { text-decoration: none; border-color: var(--profilo); }
.indicatore .t { font-size: var(--t-s); color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.indicatore .t .stato-ind { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.indicatore .v { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.indicatore .d { font-size: var(--t-s); color: var(--ink-3); }
.indicatore.ok { border-left-color: var(--verde); }
.indicatore.attenzione { border-left-color: #D18A1A; border-left-style: dashed; }
.indicatore.attenzione .v, .indicatore.attenzione .stato-ind { color: var(--ambra-testo); }
.indicatore.critico { border-left-color: var(--rosso); border-left-style: double; border-left-width: 8px; }
.indicatore.critico .v, .indicatore.critico .stato-ind { color: var(--rosso); }
.indicatore.neutro { border-left-color: var(--ink-3); }

/* Empty and loading (only the big icon of the empty state: the icons inside its buttons keep their size) */
.vuoto { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--ink-3); }
.vuoto > svg { margin: 0 auto var(--sp-3); color: #8A949B; }
.vuoto p { max-width: 460px; margin: 0 auto var(--sp-4); overflow-wrap: anywhere; color: var(--ink-2); }
.vuoto .riga { justify-content: center; }
/* Long words in an empty state wrap: a badge or a button never passes the edge of the phone. */
.vuoto .badge, .elenco .voce .badge { white-space: normal; max-width: 100%; line-height: 1.3; padding-top: 3px; padding-bottom: 3px; }
.vuoto .btn { white-space: normal; max-width: 100%; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
.caricamento { display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--sp-6); color: var(--ink-3); }
.scheletro { background: linear-gradient(90deg, var(--alu) 0, var(--alu-2) 50%, var(--alu) 100%); background-size: 200% 100%; animation: luce 1.2s infinite; border-radius: var(--r-s); height: 14px; }
@keyframes luce { to { background-position: -200% 0; } }

/* Lists (mobile-first rows) */
.elenco { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-m); overflow: hidden; }
.elenco > a, .elenco > div.voce, .elenco > button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--profilo-2); color: var(--ink); background: none; width: 100%; text-align: left; min-height: 56px; }
.elenco > :last-child { border-bottom: 0; }
.elenco > a:hover, .elenco > button:hover { text-decoration: none; cursor: pointer; }
@media (hover: hover) { .elenco > a:hover, .elenco > button:hover { background: #F2F7FA; } }
.elenco > a:active, .elenco > button:active { background: #E9F2F8; }
.elenco .corpo { flex: 1; min-width: 0; }
.elenco .corpo b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.elenco .corpo small { color: var(--ink-3); display: block; }
.elenco svg { flex: none; }
/* Phones: a row with a button puts the button under the text, full width; the text uses the whole line. */
@media (max-width: 700px) {
  .elenco > div.voce { flex-wrap: wrap; }
  .elenco > div.voce > .corpo { flex: 1 1 0; min-width: 0; }
  .elenco > div.voce:has(> .btn) > .corpo { flex-basis: calc(100% - 44px); }
  .elenco > div.voce > .btn { flex: 1 1 100%; }
}

/* ---------- Modal / sheet ---------- */
.velo { position: fixed; inset: 0; z-index: 60; background: rgba(31, 35, 38, .5); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); animation: appari .12s ease-out; }
@keyframes appari { from { opacity: 0; } }
.finestra { background: var(--bianco); border-radius: var(--r-m); width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.finestra.larga { width: min(920px, 100%); }
.finestra .f-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 8px 8px 16px; border-bottom: 1px solid var(--profilo-2); }
.finestra .f-testa h3 { min-width: 0; }
.finestra .f-corpo { padding: 16px; overflow-y: auto; }
.finestra .f-piede { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 12px 16px; border-top: 1px solid var(--profilo-2); flex-wrap: wrap; }
.finestra .capito-grande { font-size: var(--t-xl); font-weight: 700; line-height: 1.3; margin: 4px 0 0; color: var(--ink); }
.finestra .capito-grande .totale { display: block; font-size: 2rem; color: var(--verde-scuro); }
@media (max-width: 700px) {
  .velo { align-items: flex-end; padding: 0; }
  .finestra, .finestra.larga { width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .finestra .f-piede .btn { flex: 1 1 auto; }
}

/* Sign-in over the page when the session expired (above any window) */
.velo.accesso-velo { z-index: 90; align-items: center; padding: var(--sp-4); }
/* A question opened from «Accedi di nuovo» («Dati non salvati» of «Entra con un altro utente») sits above it (g8-09). */
.velo.accesso-velo ~ .velo { z-index: 91; }
.velo.accesso-velo .finestra { border-radius: var(--r-m); max-height: calc(100vh - 32px); }

/* Toasts: at the bottom centre on computers, at the top while a window is open (never over its buttons);
   under the top bar on phones, one at a time, so they never cover the buttons at the bottom. */
.toasts { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); bottom: 24px; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, calc(100% - 24px)); }
.toasts.in-alto { top: calc(var(--barra) + 8px); bottom: auto; }
.toast { pointer-events: none; background: var(--ink); color: #fff; padding: 8px 6px 8px 16px; min-height: 48px; border-radius: var(--r-s); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); display: flex; gap: 10px; align-items: center; font-weight: 500; animation: sali .18s ease-out; width: 100%; }
.toast > span { flex: 1; min-width: 0; }
.toast.errore { background: #7A1A14; }
.toast.ok svg { color: #7FD3A8; }
.toast .btn-icona, .toast .azione-toast { pointer-events: auto; color: #fff; flex: none; }
.toast .btn-icona:hover { background: rgba(255, 255, 255, .15); }
.toast .azione-toast { background: transparent; border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; border-radius: var(--r-s); min-height: 40px; padding: 0 12px; font-weight: 700; cursor: pointer; }
@keyframes sali { from { transform: translateY(8px); opacity: 0; } }
/* A bar fixed at the bottom of the page (the save bar, a module's bar with data-barra-fondo): the messages go to
   the top, never over its buttons. */
body:has(.barra-salva:not([hidden]), [data-barra-fondo]:not([hidden])) .toasts { top: calc(var(--barra) + 8px); bottom: auto; }
@media (max-width: 900px) {
  .toasts { top: calc(var(--barra) + 8px); bottom: auto; }
  .toast { min-height: 44px; padding: 4px 2px 4px 12px; gap: 8px; font-size: var(--t-s); line-height: 1.3; }
}
/* A message with a button on a phone: the sentence on its own line, the buttons under it on the right; a word is
   never broken next to «Annulla questo arrivo» (g6-10). */
@media (max-width: 480px) {
  .toast:has(.azione-toast) { flex-wrap: wrap; }
  .toast:has(.azione-toast) > span { flex: 1 1 calc(100% - 60px); overflow-wrap: normal; }
  .toast .azione-toast { margin-left: auto; }
}

/* Scanner */
.scanner { position: relative; background: #000; border-radius: var(--r-s); overflow: hidden; aspect-ratio: 3 / 4; max-height: 60vh; margin: 0 auto; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner .mirino { position: absolute; left: 10%; right: 10%; top: 35%; height: 30%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); }
.scanner .mirino::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: #FF4D3F; animation: linea 1.6s ease-in-out infinite alternate; }
@keyframes linea { from { transform: translateY(-30px); } to { transform: translateY(30px); } }

/* Voice */
.voce-stato { display: flex; align-items: center; gap: 8px; color: var(--rosso); font-weight: 600; font-size: var(--t-s); }
.voce-stato i { width: 10px; height: 10px; border-radius: 50%; background: var(--rosso); animation: pulsa 1s infinite; }
/* The big microphone while it listens: red «Termina», so it is clear the phone is listening. */
.btn.primario.in-ascolto { background: var(--rosso); border-color: var(--rosso); }
@keyframes pulsa { 50% { opacity: .3; } }

/* Login / setup */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); background: var(--ink); }
.accesso .scheda { width: min(440px, 100%); background: var(--bianco); border-radius: 14px; padding: 28px; }
.accesso .scheda header, .accesso-velo header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.accesso .scheda header img, .accesso-velo header img { width: 44px; height: 44px; }
.accesso .scheda header b, .accesso-velo header b { display: block; font-size: var(--t-l); }
.accesso .scheda header span, .accesso-velo header span { color: var(--ink-3); font-size: var(--t-s); }
.accesso form, .accesso-velo form { display: grid; gap: 14px; }
.accesso .ricorda { margin: 10px 0 0; color: var(--ink-3); font-size: var(--t-s); }

/* ---------- Home ---------- */
.rapidi { display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--sp-5); }
.rapidi a { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 16px; background: var(--verde); color: #fff; border-radius: var(--r-m); font-size: var(--t-m); font-weight: 650; line-height: 1.2; }
.rapidi a:nth-child(n+2) { background: var(--bianco); color: var(--ink); border: 1px solid var(--profilo); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.rapidi a:nth-child(n+2) svg { color: var(--verde); }
.rapidi a:hover { text-decoration: none; filter: brightness(.96); }
.rapidi a svg { flex: none; }
@media (max-width: 700px) {
  .rapidi { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .rapidi a { min-height: 72px; }
}
/* Up to 900 px the shortcuts are the bottom bar: the home page does not draw them twice. */
@media (max-width: 900px) { .rapidi.dalla-barra { display: none; } }
.home .testa { margin-bottom: var(--sp-4); }
.notifiche-home .elenco small.due-righe { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notifiche-home .tutte-notifiche { margin-top: var(--sp-2); padding: 0 8px; }
.come-si-usa ul { margin: 6px 0 10px; padding-left: 1.1em; }
.come-si-usa li { margin: 4px 0; }
.primi-passi .prossimo-passo { justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }
.passi li.prossimo .segno { border-color: var(--verde); color: var(--verde-scuro); }
.passi li.da-fare { padding: 0; }
.passi .passo-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 0; color: var(--ink); }
.passi .passo-link:hover { text-decoration: none; }
.passi .passo-link > svg { flex: none; color: var(--ink-3); }
.primi-passi > .riga.spazio h3 { flex: 1 1 auto; }
.passi li.prossimo .corpo b { color: var(--verde-scuro); }
.passi-tecnici { margin-top: var(--sp-3); }
.passi-tecnici h4 { color: var(--ink-3); font-size: var(--t-s); margin-bottom: var(--sp-1); }
/* «Primi passi» on phones and tablets: one line («Primi passi 3 di 10 · Prossimo: …»), the panel at a tap. */
.primi-passi-riga { display: none; }
@media (max-width: 900px) {
  .primi-passi-riga { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; margin-bottom: var(--sp-4); text-align: left; cursor: pointer;
    background: var(--bianco); border: 1px solid var(--verde); border-left: 6px solid var(--verde); border-radius: var(--r-m); color: var(--ink); }
  .primi-passi-riga > svg { flex: none; color: var(--verde-scuro); }
  .primi-passi-riga .corpo { flex: 1; min-width: 0; }
  .primi-passi-riga .corpo b { display: block; }
  .primi-passi-riga .corpo small { display: block; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .primi-passi-riga .freccia { transition: transform .12s; color: var(--ink-3); }
  .primi-passi-box.aperto .primi-passi-riga .freccia { transform: rotate(90deg); }
  .primi-passi-box:not(.aperto) > .primi-passi { display: none; }
  /* Open: the line above already says «Primi passi 7 di 10». */
  .primi-passi-box > .primi-passi > .riga.spazio h3 { display: none; }
  .primi-passi-box > .primi-passi > .riga.spazio { justify-content: flex-end; margin-bottom: var(--sp-2); }
}
/* «Oggi» and the lists without signal: the last copy read, with its time. */
.oggi-senza-rete, .copia-senza-rete { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); padding: 8px 12px; border-radius: var(--r-s); background: var(--ambra-tenue); color: #5E3500; font-weight: 600; }
.oggi-senza-rete svg, .copia-senza-rete svg { flex: none; }
/* A list being read again keeps its rows, dimmed after a moment (a fast answer never flickers). */
.in-aggiornamento { opacity: .55; transition: opacity .15s .3s; }
.carte-oggi { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.carta-oggi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--bianco); border: 1px solid var(--linea); border-left: 6px solid var(--ink-3); border-radius: var(--r-m); color: var(--ink); min-width: 0; }
a.carta-oggi:hover, .carta-oggi a.apri:hover { text-decoration: none; }
/* The title of a card with buttons is itself a link: a whole-width target, 44 px high at least. */
.carta-oggi a.apri { display: block; min-height: 44px; padding-block: 10px; margin-block: -10px 0; }
.carta-oggi .titolo-carta { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: var(--t-m); color: var(--ink); }
.carta-oggi .titolo-carta .numero { margin-left: auto; font-size: 1.75rem; font-weight: 700; line-height: 1; }
.carta-oggi .titolo-carta .tono { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 700; white-space: nowrap; flex: none; }
@media (max-width: 700px) {
  /* The word of the tone above the title: it never goes to a new line in the middle. */
  .carta-oggi .titolo-carta { flex-wrap: wrap; row-gap: 2px; }
  .carta-oggi .titolo-carta .tono { flex: 1 0 100%; }
  .carta-oggi .titolo-carta .testo-carta { flex: 1 1 0; min-width: 0; }
}
.carta-oggi ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); }
.carta-oggi li { margin: 2px 0; }
.carta-oggi .riga { margin-top: 4px; }
.carta-oggi.ok { border-left-color: var(--verde); }
.carta-oggi.attenzione { border-left-color: #D18A1A; }
.carta-oggi.attenzione .tono, .carta-oggi.attenzione .numero { color: var(--ambra-testo); }
.carta-oggi.critico { border-left-color: var(--rosso); }
.carta-oggi.critico .tono, .carta-oggi.critico .numero { color: var(--rosso); }
.funzioni { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.funzioni .gruppo { font-size: var(--t-xs); color: var(--ink-3); font-weight: 650; margin: 0 0 6px 2px; }
.funzioni .elenco > a { min-height: 48px; padding: 8px 14px; font-weight: 500; }
.funzioni .elenco > a svg { color: var(--ink-3); }
.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.passi li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--profilo-2); flex-wrap: wrap; }
.passi li:last-child { border-bottom: 0; }
.passi .segno { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid var(--profilo); font-weight: 700; color: var(--ink-3); }
.passi li.fatto .segno { background: var(--verde); border-color: var(--verde); color: #fff; }
.passi .corpo { flex: 1 1 200px; min-width: 0; }
.passi .corpo b { display: block; }
.passi .corpo small { color: var(--ink-3); }
.passi li.fatto .corpo b { color: var(--ink-3); }
.installa { display: flex; gap: 12px; align-items: flex-start; }

/* Settings: save bar that appears as soon as a field changes */
.barra-salva { position: sticky; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: var(--sp-4); padding: 12px 16px; background: var(--ink); color: #fff; border-radius: var(--r-m); box-shadow: 0 -4px 20px rgba(0, 0, 0, .18); }
@media (max-width: 900px) { .barra-salva { bottom: calc(68px + env(safe-area-inset-bottom)); } }
details.requisiti > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 10px; font-weight: 600; list-style: none; padding: 0 4px; }
details.requisiti > summary::-webkit-details-marker { display: none; }
details.requisiti > summary::before { content: "›"; font-size: 1.4rem; transition: transform .12s; }
details.requisiti[open] > summary::before { transform: rotate(90deg); }
details.tecnici > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--blu); font-weight: 600; }
details.tecnici .codice { margin-top: 4px; }
.pannello.evidenziato { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-tenue); scroll-margin-top: calc(var(--barra) + 12px); }
.codice { display: block; word-break: break-all; background: var(--alu); padding: 8px 10px; border-radius: 6px; font-size: var(--t-xs); font-family: ui-monospace, Consolas, monospace; }
.esito-cron { display: block; overflow-wrap: anywhere; }

/* A badge inside a field's help («Valore proposto», «Da compilare»): it wraps in its column, never over the field beside. */
.campo .aiuto .badge, .campo-spunte .aiuto .badge { display: inline-block; max-width: 100%; white-space: normal; vertical-align: baseline; }

/* Tick boxes with names (settings, type 'spunte') */
.campo-spunte { border: 0; padding: 0; margin: 0; min-width: 0; }
.campo-spunte legend { padding: 0; font-size: var(--t-s); font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.campo-spunte .spunte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 2px 16px; }

/* Touch screens (gloves, tablets in the workshop): the phone's type scale on every touch screen (a tablet
   held sideways is 1024 px wide) and 48 px for every target. At the end of the file on purpose: with the
   same specificity the later rule wins, so these must come after .segmenti, .schede and the other components. */
@media (pointer: coarse) {
  /* --tocco is the one measure of a target: modules write min-height: var(--tocco), never 44px by hand. */
  :root { --t-xs: 0.9375rem; --t-s: 1rem; --t-m: 1.0625rem; --tocco: 48px; }
  .btn, .btn-icona { min-height: var(--tocco); }
  .btn-icona { min-width: var(--tocco); }
  .btn.piccolo, .carta-oggi .btn { min-height: var(--tocco); }
  .segmenti button, .schede button { min-height: var(--tocco); }
  .periodo .frecce .btn { min-width: var(--tocco); min-height: var(--tocco); }
  .sotto-pagine a, .collegamenti a { min-height: var(--tocco); }
  .lato a { min-height: var(--tocco); }
  details > summary, .indietro, .btn.testo, .spunta { min-height: var(--tocco); }
  details.tecnici > summary, details.requisiti > summary { min-height: var(--tocco); }
  .chiedi-barra { height: 52px; }
  .chiedi-barra .btn-icona { width: 48px; height: 48px; min-height: 48px; }
  .schede.stati-filtro button { min-height: 48px; }
  /* Links inside data sheets and table cells: a whole-height target. */
  .dati dd a, .tabella td a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Print: pages print as documents */
@media print {
  .barra, .lato, .schede-basso, .testa .azioni, .toasts, .no-stampa, .rete-assente, .salta { display: none !important; }
  .shell { display: block; }
  .contenuto { padding: 0; }
  body { background: #fff; }
  .pannello, .tabella-box { border-color: #999; }
}
.campo > label.obbligatorio::after { content: " *"; color: var(--ink-3); }