/* InventoryControl — interfaccia in stile Shopify (design system Polaris).

   I token sono quelli dell'admin Shopify: fondo grigio chiaro, schede bianche
   con bordo sottile e ombra appena percettibile, bottone primario nero, testo
   in due livelli di grigio. Il font e' lo stack di Polaris: Inter se c'e',
   altrimenti il font di sistema — nessun webfont da scaricare, perche' i PC di
   cassa lavorano anche con la rete lenta.

   I nomi delle classi sono rimasti quelli di prima: qui cambia l'aspetto, non
   la struttura. */

:root {
  /* Superfici. Il fondo e il testo sono quelli di Wholesale Hub
     (tailwind.config.js: fb.bg, fb.dark): stessa famiglia di grigi, cosi'
     passando da un'applicazione all'altra non cambia la temperatura. */
  --bg: #f0f2f5;
  --surface: #ffffff;
  --surface-hover: #f7f8fa;
  --surface-selected: #e7f3ff;   /* la scheda attiva di Hub, azzurro tenue */
  /* La barra e' bianca come in Hub, qui e nella pagina del negozio: una sola
     applicazione non puo' avere due intestazioni diverse. Il blu notte del
     marchio resta sul logo, che e' il posto dove e' sempre stato. */
  --surface-scura: #ffffff;
  --scura-chiara: #f0f2f5;

  /* Bordi. In Hub le schede non hanno bordo: hanno un'ombra. I filetti
     restano solo dentro le tabelle, e sottilissimi. */
  --border: #e5e7eb;
  --border-forte: #9ca3af;
  --border-input: #d1d5db;

  /* Testo, nella scala di Hub */
  --text: #050505;
  --text-debole: #6b7280;
  --text-disabilitato: #9ca3af;
  --text-inverso: #ffffff;

  /* Stati, negli stessi toni Tailwind che usa Hub: fondo -50, testo -700,
     bordo -200. Cambia il tono, non il mestiere: verde torna, rosso manca,
     giallo avanza. */
  --critico-bg: #fef2f2;   --critico-testo: #b91c1c;  --critico-bordo: #fecaca;
  --successo-bg: #ecfdf5;  --successo-testo: #047857; --successo-bordo: #a7f3d0;
  --attenzione-bg: #fffbeb;--attenzione-testo: #b45309;--attenzione-bordo: #fde68a;
  --info-bg: #e7f3ff;      --info-testo: #1877f2;     --info-bordo: #bfdbfe;
  --neutro-bg: #f3f4f6;    --neutro-testo: #6b7280;   --neutro-bordo: #e5e7eb;

  /* Azioni: il blu di Hub. */
  --primario: #1877f2;
  --primario-hover: #1568d8;
  --primario-attivo: #1259bd;

  /* Forma. Hub arrotonda molto -- rounded-xl sulle schede, rounded-full sui
     bottoni -- e separa con l'ombra invece che col bordo. */
  --raggio: 12px;
  --raggio-sm: 8px;
  --raggio-pill: 999px;
  --ombra: 0 1px 2px rgba(0, 0, 0, .05);
  --ombra-card: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
  --ombra-bottone: none;
  --ombra-modale: 0 20px 25px rgba(0, 0, 0, .15), 0 10px 10px rgba(0, 0, 0, .04);
  --focus: #1877f2;

  /* Rampa sequenziale, per le poche barre proporzionali */
  --seq-1: #1877f2; --seq-2: #4b93f6; --seq-3: #7db0f9;
  --seq-4: #aeccfc; --seq-5: #dfe9fe;
}

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

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "San Francisco",
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* 17px come Hub, che scala tutta l'interfaccia da li'. Sono un pelo piu'
     dei 15,5 di prima -- che erano gia' il 20% in piu' dei 13 iniziali. */
  font-size: 17px;
  line-height: 26px;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Barra superiore ────────────────────────────────────────────────────────
   Nera come quella dell'admin Shopify: separa nettamente l'applicazione dal
   contenuto, e fa da ancoraggio quando la pagina scorre. */

header {
  background: var(--surface);
  color: var(--text);
  height: 56px;              /* h-14, come la barra di Hub */
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

header h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
  flex: none;
  /* Il filetto fra il marchio e il nome dell'applicazione: e' quello che
     distingue "MC2 Saint Barth" da "Inventory Control", due cose diverse
     appiccicate. Lo stesso respiro che c'e' dopo il nome, prima delle schede. */
  border-left: 1px solid var(--border);
  padding-left: 18px;
  margin-left: 10px;
}

/* Nella pagina del negozio dopo il nome non ci sono schede: c'e' il nome del
   negozio, che su un telefono gli finisce accanto. Stesso stacco. */
.conta-pubblica .header-right { padding-left: 28px; }

.brand-logo {
  flex: none;
  /* 48px in una barra di 56: quattro di respiro sopra e sotto, come in Hub.
     Su fondo bianco non serve piu' la placca -- il logo e' gia' stampato su
     bianco, e la cornice ora sarebbe un rettangolo attorno al niente. */
  height: 48px;
  width: auto;
  display: block;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.header-info {
  font-size: 0.8rem;
  color: var(--text-debole);
  white-space: nowrap;
}

/* Su uno schermo stretto la data in barra lascia il posto alle schede: la
   stessa informazione, piu' completa, e' scritta nell'intestazione della
   Giacenza («ultimo movimento nel modello… caricato il… alle…»), mentre
   Negozi e Utenti li' non ci sono. */
@media (max-width: 1400px) {
  header > .header-right #aggiornamento { display: none; }
}

/* Chi sei: nome sopra, ruolo sotto e piu' piccolo, come in Hub. */
.header-utente {
  text-align: right;
  line-height: 1.2;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.header-utente .nome {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  display: block;
}
.header-utente .ruolo { font-size: 0.75rem; color: var(--text-disabilitato); }
.header-utente .ruolo-admin { color: #ef4444; }

/* L'uscita e' un tondo, non un bottone con la scritta: sta in un angolo che si
   usa una volta al giorno, e la scritta rubava spazio al nome. */
.header-esci {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--neutro-bg);
  color: var(--text-disabilitato);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.header-esci:hover { background: #fee2e2; color: #ef4444; }

/* ── Navigazione a pillole ──────────────────────────────────────────────── */
/* Su una riga sua sotto la barra, non dentro: in Hub le voci sono cinque e ci
   stanno accanto alla ricerca, qui sono nove. */

/* Dentro la barra, a destra del nome dell'applicazione: e' la sola riga della
   testata, come in Hub. Si prende lo spazio che avanza e scorre di lato se lo
   schermo e' stretto, invece di spingere fuori chi sei. */
nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* Un respiro vero fra il nome dell'applicazione e la prima scheda: sono due
     cose diverse -- dove sei e dove puoi andare -- e a otto pixel si leggevano
     come una fila sola. */
  padding: 0 8px 0 28px;
}
nav::-webkit-scrollbar { display: none; }

nav button {
  appearance: none;
  border: none;
  border-radius: var(--raggio-pill);
  background: var(--neutro-bg);
  /* Un filo piu' strette di quelle di Hub: nove voci nella stessa riga del
     logo e del nome hanno bisogno di ogni pixel, e a 1280 devono starci
     ancora tutte. */
  padding: 7px 13px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

/* La configurazione si stacca dal flusso di lavoro: va in fondo a destra. Sono
   le schede che si toccano una volta e poi quasi mai, e in mezzo alle altre
   facevano rumore. */
nav .nav-config:first-of-type,
nav button:not(.nav-config) + .nav-config { margin-left: auto; }
nav .nav-config i { font-size: 0.8rem; margin-right: 4px; opacity: .8; }

nav button:hover:not(:disabled) { background: #e5e7eb; }
nav button.attiva { background: var(--primario); color: #fff; }
nav button.attiva:hover { background: var(--primario-hover); }
nav button:disabled {
  color: var(--text-disabilitato);
  cursor: not-allowed;
  background: var(--neutro-bg);
}

/* ── Impaginazione ──────────────────────────────────────────────────────── */

main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 16px 64px;
}

.sezione { display: none; }
.sezione.attiva { display: block; }

/* ── Schede ─────────────────────────────────────────────────────────────── */

.riquadro {
  background: var(--surface);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
  margin-bottom: 16px;
  overflow: hidden;
}

.riquadro-testata {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.riquadro-testata h2 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.riquadro-testata .header-right { margin-left: auto; }
.riquadro-testata .header-info { color: var(--text-debole); }

.riquadro-corpo { padding: 16px; }

.riquadro-nota {
  font-size: 14.5px;
  color: var(--text-debole);
  margin-top: 8px;
}
.riquadro-nota em { font-style: normal; color: var(--text); font-weight: 550; }

/* ── Bottoni ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 18px;
  border: none;
  /* Tondi, come tutti i bottoni di Hub. */
  border-radius: var(--raggio-pill);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .1s, box-shadow .1s;
}

.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: var(--primario);
  color: var(--text-inverso);
}
.btn-primary:hover:not(:disabled) { background: var(--primario-hover); }
.btn-primary:active:not(:disabled) { background: var(--primario-attivo); }

/* In Hub il secondario e' una pillola grigia, non un bottone bianco con
   bordo: il bordo lo si vedeva solo perche' il fondo era grigio, e su una
   scheda bianca spariva. */
.btn-secondary {
  background: var(--neutro-bg);
  color: #374151;
}
.btn-secondary:hover:not(:disabled) { background: #e5e7eb; }
.btn-secondary.attiva {
  background: var(--surface-selected);
  color: var(--primario);
}

.btn-sm { min-height: 32px; padding: 0 14px; font-size: 0.85rem; }

.btn:focus-visible,
nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.link-azione {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-debole);
  cursor: pointer;
  font: inherit;
  padding: 2px 6px;
  border-radius: var(--raggio-sm);
}
.link-azione:hover { background: var(--critico-bg); color: var(--critico-testo); }

/* ── Campi ──────────────────────────────────────────────────────────────── */

/* Si stilano tutti gli input tranne quelli che hanno una forma propria
   (spunte, radio, file, bottoni): legare la regola a type="text" la rende
   fragile, perche' un campo senza attributo type resta con lo stile di
   default del browser e sfigura accanto agli altri. E' successo. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--raggio-sm);
  min-height: 36px;
  padding: 4px 10px;
  transition: box-shadow .1s, border-color .1s;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(0, 91, 211, .25);
}

select {
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath fill='%23616161' d='M5.5 8.5 10 13l4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.campo-label {
  display: block;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--text-debole);
  margin-bottom: 4px;
}

.campo-data { min-width: 140px; }

/* ── Filtri ─────────────────────────────────────────────────────────────── */

.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* Dove un campo e' molto piu' alto degli altri -- l'elenco dei negozi, quattro
   righe -- i piedi non si possono allineare: la sua etichetta scapperebbe in
   cima. Si allineano le teste. */
.filtri-in-alto { align-items: flex-start; }

.filtro-gruppo { display: flex; flex-direction: column; }
.filtro-gruppo > select,
.filtro-gruppo > input { min-width: 180px; }
.filtro-spazio { flex: 1 1 260px; }
.filtro-spazio > input { min-width: 100%; }
/* Il campo di una taglia: due o tre caratteri. Largo come gli altri sembrerebbe
   volere una frase, e chi legge un modulo capisce dalla misura della casella
   quanto ci si aspetta che scriva. */
.filtro-gruppo > input.campo-corto { min-width: 90px; width: 90px; }
/* Cerca e Pulisci sono un gruppo solo: come due gruppi distinti, andando a capo
   la riga si spezzava fra i due e Pulisci restava da solo sotto. */
.filtro-bottoni { display: flex; gap: 8px; }

.filtro-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 15.5px;
  color: var(--text);
  cursor: pointer;
}
.filtro-check input { accent-color: var(--primario); }

.filtro-periodo { display: flex; align-items: center; gap: 6px; }

/* La riga sotto un campo che dice da dove arriva il valore che sta usando.
   Senza, cambiare un campo che viene dal .env sembrerebbe non avere effetto. */
.campo-origine {
  display: block;
  font-size: 13px;
  color: var(--text-disabilitato);
  margin-top: 3px;
  min-height: 14px;
}
.origine-env { color: var(--attenzione-testo); }

/* La vetrina del negozio. Una scheda con la faccia del posto si riconosce a
   colpo d'occhio, e in una tabella di settantotto righe uguali e' la differenza
   fra cercare e trovare. */
.cella-vetrina { width: 116px; padding: 6px 8px 6px 12px; }
/* La vetrina e' anche il bottone per cambiarla: si preme la foto e si sceglie
   un file. Un bottone separato accanto avrebbe voluto dire una colonna in piu'
   per una cosa che si fa una volta sola per negozio. */
.vetrina { position: relative; display: block; width: 104px; cursor: pointer; }
.vetrina-sopra {
  position: absolute;
  inset: 0;
  /* Il velo copre tutta la foto, e senza questo si prendeva lui il puntatore:
     l'ingrandimento al passaggio del mouse non partiva mai, perche' il mouse
     sull'immagine non ci arrivava. E' una decorazione, non un bersaglio -- il
     clic per caricare lo raccoglie la label che avvolge tutto. */
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raggio-sm);
  background: rgba(16, 36, 82, .72);
  color: #fff;
  opacity: 0;
  transition: opacity .12s;
}
.vetrina:hover .vetrina-sopra { opacity: 1; }
.vetrina input[disabled] ~ .vetrina-sopra { display: none; }

.vetrina-togli {
  display: block;
  margin-top: 4px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text-debole);
  text-decoration: underline;
  cursor: pointer;
}
.vetrina-togli:hover { color: var(--critico-testo); }

.cella-vetrina img {
  display: block;
  width: 104px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--raggio-sm);
  background: var(--surface-hover);
}
.vetrina-vuota {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 70px;
  border: 1px dashed var(--border);
  border-radius: var(--raggio-sm);
  color: var(--text-disabilitato);
}

/* Il negozio chiuso resta in questa scheda -- e' l'unica da cui si riapre --
   ma si spegne, cosi' si vede a colpo d'occhio che e' fuori da tutto il resto. */
.riga-chiusa { opacity: .55; }
.riga-chiusa:hover { opacity: 1; }

/* La colonna del negozio si tiene la sua larghezza: con un corpo piu' grande
   l'indirizzo andava a capo sei volte e la riga diventava alta il triplo. */
.cella-negozio { min-width: 250px; }
.neg-indirizzo { font-size: 13px; line-height: 1.35; }
/* La scelta dei negozi di un utente: un elenco vero, alto quattro righe.
   Chiusa a una riga il browser ci scrive dentro "Elementi selezionati: 0",
   che accanto a "nessuno selezionato vuol dire tutti" e' una contraddizione. */
.scelta-negozi {
  min-width: 180px;
  max-width: 260px;
  min-height: auto;
  padding: 2px;
  background-image: none;
  font-size: 14.5px;
}
.scelta-negozi option { padding: 2px 6px; border-radius: 3px; }

/* La riga della prova, staccata dai campi: si compila dopo aver salvato. */
.filtri-prova {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}

/* ── Riquadri di riepilogo ──────────────────────────────────────────────── */

.kpi-griglia, .griglia-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.kpi {
  background: var(--surface);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
  padding: 12px 16px;
}

.kpi-etichetta {
  font-size: 14.5px;
  font-weight: 550;
  color: var(--text-debole);
}

.kpi-valore {
  font-size: 29px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.kpi-nota { font-size: 14.5px; color: var(--text-debole); margin-top: 2px; }

/* ── Tabelle ────────────────────────────────────────────────────────────── */

.tabella-scorrevole {
  overflow: auto;
  max-height: 62vh;
  border: 1px solid var(--border);
  border-radius: var(--raggio-sm);
}

table { width: 100%; border-collapse: collapse; font-size: 15.5px; }

/* L'intestazione di Hub: maiuscoletto piccolo e grigio su fondo bianco, con
   un filetto sottile sotto. Niente fascia grigia -- in una scheda bianca la
   fascia sembra un'altra tabella dentro la tabella. */
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-debole);
  padding: 10px;
  white-space: nowrap;
}

tbody td {
  border-bottom: 1px solid #f3f4f6;
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 0.85rem;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-hover); }

/* Le colonne di numeri non vanno mai a capo: un importo spezzato fra il
   simbolo e le cifre e' illeggibile, e in una tabella di soldi si scorre in
   verticale confrontando le cifre -- se le righe hanno altezze diverse non si
   confronta piu' niente. */
th.num, td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La miniatura del capo. Il riquadro ha una misura fissa anche quando la foto
   manca o deve ancora arrivare: senza, le righe si allargherebbero una per
   volta mentre le immagini scendono, e la tabella ballerebbe sotto il dito. */

thead th.th-statica { width: 60px; padding: 4px 8px; }
/* Niente foto per nessun capo: la colonna esce di scena invece di restare
   vuota. Si spegne la colonna, non le singole celle, se no l'intestazione
   resterebbe la' da sola. */
table.senza-foto th.th-statica, table.senza-foto .cella-foto { display: none; }

.cella-foto {
  width: 60px;
  padding: 4px 8px;
}
.cella-foto img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--surface-hover);
  border-radius: var(--raggio-sm);
  cursor: zoom-in;
}
.cella-foto img:hover { box-shadow: 0 0 0 2px var(--border-forte); }

/* La foto grande al passaggio del mouse. Sta sotto al menu di filtro (che e'
   a 30) perche' col menu aperto e' il menu quello che si sta usando. */

.zoom-foto {
  position: fixed;
  z-index: 25;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-modale);
  padding: 8px;
  /* La misura la decide la foto, non il riquadro: le due misure qui sono solo
     il tetto, e stanno anche in app.js (ZOOM_MAX_W/H) perche' e' li' che si
     conoscono le proporzioni dell'immagine appena arrivata. */
  max-width: 476px;
}
.zoom-foto img {
  display: block;
  width: 280px;
  height: 280px;
  object-fit: contain;
  background: var(--surface-hover);
  border-radius: var(--raggio-sm);
}
.zoom-didascalia {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--text-debole);
  text-align: center;
  line-height: 1.4;
}

.cella-codice {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14.5px;
}
.cella-debole { color: var(--text-debole); }
.cella-forte { font-weight: 600; }

/* ── Intestazioni ordinabili e filtro per valore ─────────────────────────────
   L'intestazione e' un bottone, non una cella cliccabile: si raggiunge col
   tabulatore e dice da sola che si puo' premere. L'imbuto sta accanto al
   titolo e si accende quando la colonna filtra, cosi' la si trova anche
   scorrendo una tabella larga. */

/* I bottoni portano la loro area cliccabile: senza togliere un po' del padding
   della cella, l'intestazione crescerebbe. Gli 8px qui piu' i 4 del bottone
   fanno i 10 delle celle sotto, cosi' il titolo cade sull'asse esatto del suo
   contenuto -- a sinistra nelle colonne di testo, a destra in quelle di
   numeri. */
thead th.th-btn { padding: 4px 6px; }

thead th .th-cont {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: inherit;
}
thead th.num .th-cont { justify-content: flex-end; }

.th-ordina, .th-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  border-radius: var(--raggio-sm);
  padding: 2px 4px;
  font: inherit;
  /* Il browser azzera `text-transform` sui bottoni, e `font: inherit` non lo
     rimette: senza queste due righe l'intestazione della giacenza restava in
     minuscolo mentre tutte le altre erano maiuscole. */
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}
.th-ordina:hover, .th-filtro:hover { background: var(--surface-selected); color: var(--text); }
.th-ordina:focus-visible, .th-filtro:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.th-icona { font-size: 12px; }
/* La freccia neutra si vede solo passandoci sopra: tredici frecce sempre
   accese sono rumore, e la colonna che ordina davvero non si distinguerebbe. */
.th-icona-spenta { opacity: 0; transition: opacity .1s; }
thead th:hover .th-icona-spenta { opacity: .45; }
thead th.th-attiva { color: var(--text); }

.th-filtro { color: var(--text-disabilitato); font-size: 13px; }
.th-filtro.attivo { color: var(--focus); background: var(--info-bg); }

/* ── Le colonne per taglia della verifica ───────────────────────────────── */
/* Teorico e contato dentro la stessa cella, non in due colonne: la domanda e'
   se i due numeri coincidono, e per rispondere devono stare vicini. Il colore
   dice la risposta prima che si leggano le cifre. */
th.th-taglia {
  text-align: center;
  min-width: 78px;
  font-variant-numeric: tabular-nums;
}
td.cella-taglia { text-align: center; padding: 4px 6px; }

.coppia {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--raggio-sm);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.coppia .t { opacity: .75; }
.coppia .freccia { font-size: 12px; opacity: .6; }
.coppia .c { font-weight: 600; }
.coppia.uguale { background: var(--successo-bg); border-color: var(--successo-bordo); color: var(--successo-testo); }
.coppia.meno { background: var(--critico-bg); border-color: var(--critico-bordo); color: var(--critico-testo); }
.coppia.piu { background: var(--attenzione-bg); border-color: var(--attenzione-bordo); color: var(--attenzione-testo); }
/* Il capo non ha quella taglia: un punto, non uno zero. Uno zero vorrebbe dire
   "ne dovrebbero esserci zero", che e' un'altra cosa. */
.taglia-assente { color: var(--text-disabilitato); }

/* La riga mentre la sua foto sta salendo: si spegne, cosi' si vede che sta
   succedendo qualcosa e non si riclicca. */
tr.in-corso { opacity: .55; }

.filtri-attivi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--info-bg);
  color: var(--info-testo);
  border: 1px solid var(--info-bordo);
  border-radius: var(--raggio-pill);
  padding: 2px 10px;
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.chip-filtro:hover { background: #c2e6fb; }
.chip-filtro i { font-size: 12px; }
.chip-azzera {
  background: none;
  border-color: var(--border);
  color: var(--text-debole);
}
.chip-azzera:hover { background: var(--surface-hover); }

.menu-filtro {
  position: fixed;
  z-index: 30;
  width: 290px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-modale);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-filtro-testata {
  display: flex;
  align-items: center;
  font-size: 14.5px;
  color: var(--text-debole);
}
.menu-filtro-testata b { color: var(--text); font-weight: 650; margin-left: 4px; }

.menu-chiudi {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--text-debole);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--raggio-sm);
}
.menu-chiudi:hover { background: var(--surface-hover); color: var(--text); }

.menu-nota { font-size: 13px; color: var(--text-debole); }

.menu-filtro-lista { max-height: 240px; overflow: auto; }

.menu-voce {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: var(--raggio-sm);
  cursor: pointer;
}
.menu-voce:hover { background: var(--surface-hover); }
.menu-voce input { accent-color: var(--primario); flex: none; }
.menu-voce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-tutti {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  font-weight: 550;
}

.menu-vuoto { font-size: 14.5px; color: var(--text-debole); padding: 8px 4px; }

.menu-filtro-piede {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* Le celle con due bottoni accanto: senza, vanno a capo appena la tabella si
   stringe e la riga diventa alta il doppio. */
.riga-azioni { white-space: nowrap; }
.riga-azioni .btn + .btn { margin-left: 4px; }

.tabella-piede {
  padding: 8px 12px;
  font-size: 14.5px;
  color: var(--text-debole);
  border-top: 1px solid var(--border);
  margin-top: -1px;
}

/* ── Pastiglie di stato ─────────────────────────────────────────────────────
   Il colore non porta mai il significato da solo: accanto c'e' sempre la
   parola scritta, perche' chi non distingue rosso e verde legge lo stesso
   foglio. */

.stato-pill, .pastiglia, .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--raggio-pill);
  font-size: 14.5px;
  font-weight: 550;
  white-space: nowrap;
  background: var(--neutro-bg);
  color: var(--neutro-testo);
}

.stato-ok          { background: var(--successo-bg);   color: var(--successo-testo); }
.stato-mancante    { background: var(--critico-bg);    color: var(--critico-testo); }
.stato-eccedenza   { background: var(--attenzione-bg); color: var(--attenzione-testo); }
.stato-fantasma    { background: var(--info-bg);       color: var(--info-testo); }
.stato-negativo    { background: #f6ddff;              color: #5f2c74; }
.stato-non_contato { background: var(--neutro-bg);     color: var(--neutro-testo); }

.pastiglia-ok         { background: var(--successo-bg);   color: var(--successo-testo); }
.pastiglia-attenzione { background: var(--attenzione-bg); color: var(--attenzione-testo); }
.pastiglia-critico    { background: var(--critico-bg);    color: var(--critico-testo); }
.pastiglia-nuovo      { background: var(--info-bg);       color: var(--info-testo); }

/* Il segno della differenza si legge prima del numero. */
.diff-neg  { color: var(--critico-testo); font-weight: 600; }
.diff-pos  { color: var(--attenzione-testo); font-weight: 600; }
.diff-zero { color: var(--text-disabilitato); }

/* ── Informativa «come funziona» ─────────────────────────────────────────────
   Una i accanto al titolo di ogni scheda, che apre sotto la spiegazione. Sta
   dentro la pagina e non in una finestra a parte perche' la si legge mentre si
   guarda la cosa che spiega, e si richiude quando non serve piu'. */

.btn-info {
  background: none;
  border: 0;
  padding: 0 2px;
  margin-left: 6px;
  color: var(--info-testo);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  vertical-align: baseline;
}
.btn-info:hover { color: var(--focus); }
.btn-info:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Sulla pagina del negozio la i sta da sola, senza un titolo accanto a cui
   appoggiarsi: si porta dietro le parole, se no nessuno capisce che si preme. */
.btn-info-largo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--raggio-sm);
  font: inherit;
  font-weight: 600;
  font-size: 15.5px;
}
.btn-info-largo:hover { background: var(--info-bg); }

.informativa {
  margin: 12px 16px 0;
  background: var(--info-bg);
  border: 1px solid var(--info-bordo);
  border-radius: var(--raggio);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--info-testo);
}
.informativa-testata {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.informativa-testata b { font-size: 15.5px; }
.informativa-chiudi {
  margin-left: auto;
  background: none;
  border: 0;
  color: inherit;
  font-size: 17px;
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--raggio-sm);
}
.informativa-chiudi:hover { background: rgba(0, 82, 124, .1); }
.informativa p { margin: 0 0 8px; }
.informativa ul { margin: 0 0 8px; padding-left: 18px; }
.informativa li { margin-bottom: 4px; }
.informativa b { font-weight: 650; }
/* L'ultima riga: le avvertenze che si leggono dopo, non prima. */
.informativa-nota {
  margin: 0;
  font-size: 14px;
  opacity: .85;
}

/* ── Avvisi ─────────────────────────────────────────────────────────────── */

.avviso {
  display: flex;
  gap: 8px;
  background: var(--info-bg);
  border: 1px solid var(--info-bordo);
  color: var(--info-testo);
  padding: 10px 14px;
  border-radius: var(--raggio);
  margin-bottom: 12px;
  font-size: 15.5px;
}

.avviso-grave, .avviso-errore {
  background: var(--critico-bg);
  border-color: var(--critico-bordo);
  color: var(--critico-testo);
}

/* ── Stati vuoti e caricamento ──────────────────────────────────────────── */

.vuoto {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-debole);
  font-size: 15.5px;
}

.caricamento {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-debole);
}

.caricamento .rotella {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--primario);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: gira .7s linear infinite;
}

@keyframes gira { to { transform: rotate(360deg); } }

.nascosto { display: none !important; }

/* ── Conta: canali, scansione, anteprima ────────────────────────────────── */

.canali { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.canale-pannello { display: none; }
.canale-pannello.attivo { display: block; }

#scan-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  min-height: 48px;
  padding: 10px 14px;
  width: 100%;
  border: 1px solid var(--border-input);
}
#scan-input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px rgba(0, 91, 211, .25);
}

.scan-esito {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--raggio);
  font-size: 15.5px;
  border: 1px solid transparent;
}
.scan-ok { background: var(--successo-bg); border-color: var(--successo-bordo); color: var(--successo-testo); }
.scan-ko { background: var(--critico-bg);  border-color: var(--critico-bordo);  color: var(--critico-testo); }
.scan-attesa { background: var(--info-bg); border-color: var(--info-bordo); color: var(--info-testo); }

/* ── Il dettaglio di una rettifica ──────────────────────────────────────── */
.rett-riga { cursor: pointer; }
.rett-riga.aperta > td { background: var(--surface-selected); }
tr.rett-dettaglio > td { background: var(--surface-hover); padding: 4px 10px 12px 44px; }
.rett-dettaglio .caricamento { padding: 12px 0; }
.rett-dettaglio .sotto-tabella { width: auto; min-width: 520px; }
.rett-dettaglio .sotto-tabella td { padding: 4px 10px; }
.rett-piede { margin: 8px 0 0; font-size: 14.5px; color: var(--text-debole); }

/* Le stesse foto viste dalla sede, nella riga del capo che le ha generate. */
.cella-foto-negozio {
  padding: 4px 6px;
  white-space: nowrap;
  font-size: 0;                 /* niente spazi fra le miniature affiancate */
}
.cella-foto-negozio img + img { margin-left: 3px; }
.cella-foto-negozio img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: var(--raggio-sm);
  border: 1px solid var(--border);
  background: var(--surface-hover);
}

/* ── Le foto che il negozio manda col conteggio ─────────────────────────── */
/* Stanno sotto il campo dove si spara, non in una pagina a parte: si scattano
   mentre si conta, con il capo in mano. */
.conta-foto-invio {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.conta-scatta { cursor: pointer; }
/* Arrivate al massimo il bottone si spegne: meglio non poterlo premere che
   premerlo e prendersi un errore. */
.conta-scatta.spento { opacity: .45; pointer-events: none; }
.conta-nota-foto { font-size: 14.5px; color: var(--text-debole); }

.conta-foto-elenco { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* `conta-scatto` e non `conta-foto`: quel nome e' gia' la miniatura del capo,
   alta 56px, e riusarlo dava al contenitore la misura sbagliata -- la foto
   veniva tagliata dal bordo della scheda. */
.conta-scatto { position: relative; }
.conta-scatto img {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--raggio-sm);
  background: var(--surface-hover);
  border: 1px solid var(--border);
}
.conta-scatto-togli {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-debole);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ombra);
}
.conta-scatto-togli:hover { color: var(--critico-testo); border-color: var(--critico-bordo); }

.scan-storico { max-height: 320px; overflow: auto; margin-top: 12px; }
.scan-storico li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  list-style: none;
}
.scan-storico li:first-child { background: var(--successo-bg); }

.dropzone {
  border: 1px dashed var(--border-forte);
  border-radius: var(--raggio);
  padding: 32px;
  text-align: center;
  color: var(--text-debole);
  background: var(--surface-hover);
  cursor: pointer;
  transition: border-color .1s, background .1s;
}
.dropzone:hover, .dropzone.sopra {
  border-color: var(--focus);
  background: var(--info-bg);
  color: var(--info-testo);
}

.anteprima {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--raggio);
  padding: 16px;
  margin-top: 14px;
}
.anteprima h3 { font-size: 15.5px; font-weight: 650; margin-bottom: 4px; }

.anteprima-colonne { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.chip-colonna {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  border-radius: var(--raggio-pill);
  padding: 3px 10px;
  font-size: 14.5px;
  color: var(--text-debole);
}
.chip-colonna b { color: var(--text); font-weight: 600; }
.chip-mancante {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--border-forte);
  color: var(--text-debole);
}

/* ── Controllo a rotazione: la pagina del negozio ────────────────────────────
   Si apre da un link, senza login, spesso su un telefono e in piedi davanti a
   uno scaffale. Tutto grosso, una colonna, niente che chieda di essere letto
   con attenzione. */

/* Questa pagina si legge in piedi davanti a uno scaffale, col telefono in una
   mano e un capo nell'altra, e spesso non da vicino: qui il testo va piu'
   grande che nell'applicazione di sede, dove si sta seduti a un metro dallo
   schermo. Un altro 15% sopra il corpo comune, sulle cose che si devono
   leggere davvero -- il nome del capo, il codice, quello che si e' sparato. */
body.conta-pubblica { font-size: 17.5px; line-height: 26px; }
.conta-pagina { max-width: 760px; margin: 0 auto; padding: 16px; }
.conta-pubblica .conta-istruzioni { font-size: 17px; }
.conta-pubblica .conta-nome { font-size: 19px; }
.conta-pubblica .conta-dett { font-size: 16px; }
.conta-pubblica .conta-sparo input { font-size: 21px; min-height: 52px; }
.conta-pubblica .conta-badge { font-size: 16px; }
.conta-pubblica .conta-badge b { font-size: 22px; }
.conta-pubblica .lettura-taglia { font-size: 19px; min-width: 110px; }
.conta-pubblica .lettura-barcode { font-size: 15px; }
.conta-pubblica .riquadro-testata h2 { font-size: 19px; }
/* Le aree da colpire col dito crescono con il testo, se no si ingrandisce la
   scritta e si continua a sbagliare bottone. */
.conta-pubblica .conta-capo { padding: 12px 8px; }
.conta-pubblica .conta-piede .btn { min-height: 56px; font-size: 19px; }
.conta-pubblica .lettura-togli { font-size: 20px; padding: 6px 10px; }
.conta-pagina .riquadro { margin-bottom: 12px; }

.conta-istruzioni { font-size: 15.5px; color: var(--text-debole); margin-bottom: 12px; }
.conta-istruzioni b { color: var(--text); font-weight: 600; }

.conta-sparo { display: flex; gap: 8px; }
.conta-sparo input {
  flex: 1;
  min-height: 44px;
  font-size: 19px;   /* sotto i 16px iOS zooma da solo sul campo a fuoco */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.conta-avanzamento {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.conta-barra {
  flex: 1;
  height: 6px;
  background: var(--neutro-bg);
  border-radius: var(--raggio-pill);
  overflow: hidden;
}
.conta-barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--primario);
  transition: width .2s;
}

.conta-capi { display: flex; flex-direction: column; gap: 2px; padding: 8px; }

/* La riga del capo e' un bottone: si preme e si apre la sua schermata. Con le
   dita, l'area da colpire e' tutta la riga -- non un'icona in fondo. */
.conta-capo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  width: 100%;
  border: 0;
  background: none;
  border-radius: var(--raggio-sm);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.conta-capo:hover { background: var(--surface-hover); }
.conta-capo:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.conta-capo + .conta-capo { border-top: 1px solid var(--border); }
/* Il capo gia' sparato si spegne: quello che resta acceso e' quello da fare. */
.conta-fatto { background: var(--successo-bg); }
.conta-fatto .conta-nome { color: var(--successo-testo); }

.conta-foto {
  display: block;
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: contain;
  background: var(--surface-hover);
  border-radius: var(--raggio-sm);
}
.conta-foto-vuota { border: 1px dashed var(--border); }

/* Due righe, due colonne: a sinistra i codici, a destra le descrizioni. La
   prima colonna e' `auto` (si prende quello che serve al codice piu' lungo),
   la seconda `minmax(0, 1fr)` -- senza lo zero minimo una descrizione lunga
   allargherebbe la riga invece di farsi tagliare con i puntini. */
.conta-testo {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
}
.conta-nome {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conta-dett {
  font-size: 14.5px;
  color: var(--text-debole);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Il monospace sta sui codici, non sulle descrizioni: serve a far tornare le
   cifre in colonna, e su una descrizione fa solo perdere leggibilita'. */
.conta-cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.conta-badge {
  flex: none;
  min-width: 56px;
  text-align: right;
  font-size: 14.5px;
  color: var(--text-debole);
}
.conta-badge b { font-size: 19px; color: var(--text); }
.conta-fatto .conta-badge b { color: var(--successo-testo); }

/* La schermata del capo: testata con la foto grande, poi il campo dove si
   spara, poi i colpi uno sotto l'altro. */
.conta-indietro { margin-bottom: 12px; }

.conta-capo-testata {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.conta-foto-grande { width: 84px; height: 84px; }
/* La zona sta sotto tutte e due le colonne: non e' un dato del capo, e' dove
   andarlo a cercare in negozio. */
.conta-zona {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-debole);
  margin-top: 2px;
}

.lettura {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}
.lettura:last-child { border-bottom: none; }
.lettura-taglia { font-weight: 650; min-width: 84px; }
.lettura-barcode {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14.5px;
  color: var(--text-debole);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lettura-ora { font-size: 14.5px; color: var(--text-debole); }
/* Il colpo che il sistema non riconosce si vede lo stesso -- e' un pezzo vero
   che qualcuno ha in mano -- ma si distingue: non conta come pezzo. */
.lettura-ignota { background: var(--attenzione-bg); border-radius: var(--raggio-sm); }
.lettura-ignota .lettura-taglia { color: var(--attenzione-testo); font-weight: 550; }
.lettura-togli {
  background: none;
  border: 0;
  color: var(--text-disabilitato);
  font-size: 17px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--raggio-sm);
}
.lettura-togli:hover { background: var(--critico-bg); color: var(--critico-testo); }

.conta-nota-sparo {
  font-size: 13px;
  color: var(--text-debole);
  margin-top: 6px;
}

.conta-nota-salva {
  font-size: 13px;
  color: var(--text-debole);
  text-align: center;
  margin-top: 8px;
}

.conta-piede {
  position: sticky;
  bottom: 0;
  padding: 12px 0 20px;
  background: linear-gradient(to bottom, transparent, var(--bg) 40%);
}
.conta-piede .btn { width: 100%; min-height: 48px; font-size: 18px; }

/* ── Accesso ────────────────────────────────────────────────────────────── */

.login-schermo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* La sfumatura di Hub: blu appena accennato in alto a sinistra, grigio in
     basso a destra. E' l'unico posto dove Hub si concede un fondo non piatto,
     ed e' anche l'unica pagina dell'applicazione che si guarda da sola. */
  background: linear-gradient(to bottom right, #eff6ff, #f3f4f6);
  padding: 20px;
}

.login-riquadro {
  background: var(--surface);
  border-radius: 16px;       /* rounded-2xl, come la scheda di accesso di Hub */
  box-shadow: 0 20px 25px rgba(0, 0, 0, .1), 0 8px 10px rgba(0, 0, 0, .04);
  padding: 28px;
  width: min(400px, 100%);
}
/* Il marchio, non un'icona: la scheda e' larga 400 px e questo e' il primo
   schermo che si vede aprendo l'app. Qui il fondo blu notte del logo non ha
   bisogno di nessuna placca -- la scheda e' bianca -- e gli angoli arrotondati
   lo legano alla scheda che lo contiene. */
.login-riquadro img {
  display: block;
  height: 96px;              /* grande come in Hub: e' il primo schermo che si vede */
  width: auto;
  border-radius: 8px;
  box-shadow: var(--ombra-card);
  margin: 0 auto 16px;
}
.login-riquadro h1 {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.login-riquadro label { display: block; font-size: 14.5px; font-weight: 550;
                        color: var(--text-debole); margin-bottom: 4px; }
.login-riquadro label + input {
  width: 100%;
  min-height: 40px;          /* piu' alto del solito: e' un campo che si compila
                                una volta e va colpito senza mirare */
  margin-bottom: 16px;
}
.login-riquadro .btn { width: 100%; min-height: 40px; margin-top: 4px; }
.invito-benvenuto {
  font-size: 15.5px;
  color: var(--text-debole);
  text-align: center;
  margin-bottom: 20px;
}
.invito-benvenuto b { color: var(--text); font-weight: 650; }
.invito-nota {
  font-size: 14.5px;
  color: var(--text-debole);
  text-align: center;
  margin-top: 16px;
}

.login-errore {
  background: var(--critico-bg);
  border: 1px solid var(--critico-bordo);
  color: var(--critico-testo);
  padding: 8px 12px;
  border-radius: var(--raggio);
  font-size: 15.5px;
  margin-bottom: 14px;
}

/* ── Schermi stretti ────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  header { padding: 0 12px; }
  header h1 { font-size: 15.5px; }
  .header-info { display: none; }
  main { padding: 12px 8px 48px; }
  .riquadro-corpo, .riquadro-testata { padding: 12px; }
  .filtro-gruppo > select, .filtro-gruppo > input { min-width: 100%; }
  .filtro-gruppo { flex: 1 1 100%; }
  .tabella-scorrevole { max-height: none; }
}