/* Macro-Fase 6, blocco A — visual approvato: interfaccia chiara con
   sfondo bianco, rosso Würth, testo nero e grigio (nessuna modalita'
   scura per le schermate pubbliche: il colore e' fisso, non segue le
   preferenze del sistema operativo). Palette derivata dal prototipo
   approvato (molletta-finder-visual-prototype.html). */
:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#f4f4f4;
  --ink:#171717;
  --ink-soft:#666666;
  --line:#e7e7e7;
  --line-strong:#cccccc;
  --blueprint:#171717;       /* accenti secondari: nero, non piu' blu */
  --blueprint-ink:#171717;
  --signal:#cc071e;          /* rosso Würth */
  --signal-ink:#ffffff;
  --signal-dark:#8f0515;      /* il rosso scuro: rilievo sotto l'azione principale e testo di allarme */
  --rilievo:0 3px 0 var(--signal-dark);
  --radius-ctl:14px;          /* il raggio dei comandi (22/10: lo stesso della casa)*/
  /* 15/10: era #16834a, che su --ok-bg da' 4.17:1 (sotto 4.5:1) proprio
     sull'etichetta "Alta corrispondenza" e su "Verificata". #0f6b3a da'
     5.73:1 ed e' lo stesso verde della pillola "Online". */
  --ok:#0f6b3a;
  --ok-bg:#e2f3ea;
  /* AUDIT INTEGRAZIONE: era #9a6a00, che su --warn-bg da' 4.18:1 —
     sotto la soglia 4.5:1 per il testo normale. Misurato, non stimato. */
  --warn:#8a5e00;
  --warn-bg:#faf0d9;
  --danger:#9c3a2e;
  --danger-bg:#f8e6e2;
  --st-blue:#171717;         /* stato "confermato": nero/grigio, non blu */
  --st-blue-bg:#f4f4f4;
  --shadow: 0 1px 2px rgba(20,26,34,.05), 0 6px 18px -12px rgba(20,26,34,.16);
  color-scheme: light;

  /* Blocco 1 (CLIP FINDER) — sistema di spaziature e raggi condiviso.
     Valori scelti per corrispondere esattamente ai pixel già in uso nelle
     regole più ripetute (bottoni, pannelli, griglie), cosi' l'aspetto
     visibile non cambia: e' un'etichettatura dei valori esistenti, non un
     nuovo aspetto grafico. Applicato per ora alle regole strutturali più
     condivise (bottoni, pannelli, righe info, card candidato); il resto
     del foglio usa ancora valori letterali puntuali non ancora migrati. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 100px;
  --tap-min: 44px;   /* altezza minima toccabile, accessibilità mobile */
  /* Passo 6 (21/09/2026) — UNA scala di testo, la stessa di /trova:
     12 (etichette, didascalie) · 14 (testo secondario) · 16 (testo,
     pulsanti) · 18 · 20 (titoli di sezione) · 24 · 28 (titolo di casa).
     Prima erano una trentina di valori (.62rem, .68rem, .72rem, .78rem...),
     nati uno alla volta. Le dimensioni in questo foglio usano solo quei
     sette gradini (.75 .875 1 1.125 1.25 1.5 1.75 rem): la prova e'
     backend/test_estetica_coerente.py. */
  /* Altezza UTILE della barra in basso (senza la safe area del telefono).
     Era 56 px con un'aria sola sopra e sotto: la barra sembrava
     schiacciata. Chi la tocca lo fa camminando, con i guanti, guardando
     una clip: 62 px sono il minimo per non doverla cercare. */
  --altezza-nav: 62px;
  --rientro-pagina: 16px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

/* COME UN'APP, NON COME UNA PAGINA.
   Il rimbalzo elastico a fine pagina e il "tira per aggiornare" sono i
   due gesti che fanno sentire un sito un sito: la pagina si stacca dai
   bordi, e l'intestazione e la barra -- che sono ferme -- sembrano
   muoversi rispetto al contenuto. Qui non servono: per aggiornare c'e'
   gia' l'avviso "Aggiorna" quando esce una versione nuova.
   Lo zoom con le dita resta possibile: quello lo decide chi guarda. */
html, body{ overscroll-behavior:none; }
[hidden]{ display:none !important; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.45;
  padding-inline:var(--rientro-pagina);
  /* Lo spazio riservato alla barra fissa era un 96 px scritto a mano:
     non seguiva l'altezza vera della barra e ignorava la safe area, cosi'
     sui telefoni con la tacca l'ultimo pulsante finiva sotto. Ora e' la
     barra stessa a dire quanto spazio serve. */
  padding-block:0 calc(var(--altezza-nav) + env(safe-area-inset-bottom, 0px) + 28px);
  margin:0;
}
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric: tabular-nums; }
h1,h2,h3{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; text-wrap:balance; margin:0; }
.connection-state{font-size:.75rem;color:var(--ok);font-weight:700;white-space:nowrap}
.connection-state.is-offline{color:var(--warn)}
.verified-data{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:20px;background:var(--ok-bg);color:var(--ok);font-size:.75rem;font-weight:700}
.data-pending{color:var(--ink-soft);font-style:italic}
.wrap, .app-shell{ max-width:640px; margin:0 auto; }
.link-btn{
  background:none; border:none; padding:0; color:var(--blueprint-ink); font-weight:600;
  font-size:.875rem; cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}

/* ---------- navigazione a schermate + bottom nav ---------- */
.screen[hidden]{ display:none !important; }
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  /* GRIGLIA, non flex: con flex le celle non scendono mai sotto la
     larghezza del loro testo (min-width:auto), quindi "Scansiona" si
     prendeva piu' spazio di "Cerca" appena lo schermo si stringeva.
     Con grid-auto-columns:1fr le colonne sono identiche per costruzione,
     comunque siano lunghe le parole e quante siano le voci. */
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--panel); border-top:1px solid var(--line);
  box-shadow:0 -4px 16px -8px rgba(20,26,34,.18);
  /* la tacca del gesto sugli iPhone: con viewport-fit=cover vale ~34 px,
     su Android e sui browser senza inset vale 0 e non cambia nulla */
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.nav-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-width:0;
  border:none; background:none; padding:9px 4px; font-size:.75rem; font-weight:600;
  color:var(--ink-soft); border-radius:0;
  /* un'etichetta non deve mai andare a capo e allargare la sua cella */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* L'icona vive in un riquadro di dimensione FISSA: cosi' ogni voce
   occupa lo stesso spazio anche se il glifo disegna piu' piccolo.
   Il glifo della lente (U+2315) e' disegnato molto piu' piccolo degli
   altri due a parita' di font-size: era questo, non la larghezza della
   cella, a far sembrare "Cerca" un pulsante minore. Si corregge sul
   glifo, non sulla cella. */
.nav-btn .nav-ic{
  width:26px; height:26px; display:grid; place-items:center;
  font-size:1.25rem; line-height:1;
}
.nav-btn[data-nav="cerca"] .nav-ic{ font-size:1.75rem; }
.nav-btn.active{ color:var(--signal); }

/* ---------- schermata iniziale (stile Yuka) ---------- */
.home-hero{ text-align:center; padding:36px 8px 12px; }
.home-title{ font-size:1.75rem; font-weight:700; margin-bottom:8px; }
button.primary.big{
  font-size:1rem; padding:16px 28px; border-radius:12px; width:100%; max-width:320px;
  justify-content:center;
}
.privacy-line{ font-size:.75rem; color:var(--ink-soft); margin-top:22px; display:flex; flex-direction:column; gap:4px; align-items:center; }

/* schermata iniziale "minimale": nessun contatore/statistica del database
   e nessuna spiegazione lunga in vista (restano nel resto dell'app) */
body.minimal-home .topbar .stats{ display:none; }
body.minimal-home footer{ display:none; }

/* ---------- cattura guidata ---------- */
.scan-capture-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.scan-capture-head h3{ font-size:1.125rem; font-weight:600; }
.cam-area{ position:relative; }
.cam-ring{
  position:absolute; inset:8px; border-radius:10px; pointer-events:none;
  border:3px solid var(--warn); transition:border-color .15s ease;
}
.cam-ring.good{ border-color:var(--ok); box-shadow:0 0 0 3px var(--ok-bg) inset; }
.cam-ring[hidden]{ display:none; }
.scan-live-hint{
  text-align:center; font-weight:600; font-size:.875rem; margin:10px 0 0; min-height:1.3em;
  color:var(--ink-soft);
}
.scan-live-hint.good{ color:var(--ok); }

/* ---------- schermata risultato (photo-forward) ---------- */
.result-hero{ text-align:center; }
.result-photo-wrap{
  width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.result-photo-wrap{ position:relative; }
.result-photo-wrap img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.result-photo-wrap .no-photo{ color:var(--ink-soft); font-size:.875rem; padding:20px; }
.rc-photo-wrap{ position:relative; }
.result-code-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; }
.copy-btn{
  border:1px solid var(--line-strong); background:var(--panel); border-radius:6px; padding:4px 10px;
  font-size:.75rem; font-weight:600; cursor:pointer; color:var(--ink-soft);
}
.copy-btn.copied{ color:var(--st-blue); border-color:var(--st-blue); }
.result-desc{ color:var(--ink-soft); font-size:.875rem; margin-top:4px; }

/* ---------- Fase 9: nome grande + riga Cod. art. Würth | Cod. E.CO |
   Disponibilità + "Confezione: X pezzi" (solo se verificata) ---------- */
.result-name{ font-size:1.25rem; font-weight:800; line-height:1.25; margin-top:14px; }
.result-info-row{
  display:flex; margin-top:14px; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; text-align:center; background:var(--panel);
}
.result-info-cell{ flex:1 1 0; min-width:0; padding:8px 4px; border-right:1px solid var(--line); }
.result-info-cell:last-child{ border-right:none; }
.result-info-label{
  display:block; font-size:.875rem; font-weight:700;
  color:var(--ink-soft); margin-bottom:3px;
}
.result-info-value{ display:block; font-size:.875rem; font-weight:700; overflow-wrap:anywhere; }
.result-info-value.unavailable{ color:var(--ink-soft); font-weight:600; font-style:italic; font-size:.75rem; line-height:1.25; }
.result-confezione-row{
  margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:.875rem;
  background:var(--ok-bg); color:var(--ok); border-radius:100px; padding:5px 12px; font-weight:700;
}
/* Fase 9: messaggio "Articoli Speciali" per i codici 'not_found' — colori
   volutamente NEUTRI (mai var(--ok)/var(--ok-bg), che sul resto della UI
   significano "verificato/disponibile"): questa frase indica solo un
   canale di richiesta alternativo, mai una disponibilità. */
.result-confezione-row.special-request-hint{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--panel-2); color:var(--ink-soft); border-radius:12px;
  padding:8px 14px; font-weight:600; text-align:center;
}
.special-request-form{
  margin-top:10px; text-align:left; border:1px solid var(--line);
  border-radius:12px; padding:12px; background:var(--panel);
}
.result-hero .confirm-status{ text-align:left; margin-top:16px; }
.result-hero .btn-row{ justify-content:center; margin-top:14px; }
.result-hero .btn-row button{ min-width:160px; justify-content:center; }
.result-details{ margin-top:18px; border-top:1px dashed var(--line); padding-top:16px; }

/* ---------- esito "probabile"/"ambiguo": etichetta + candidati compatti ---------- */
.esito-tag{
  display:inline-block; font-size:.875rem; font-weight:700;
  padding:4px 10px; border-radius:100px; margin-bottom:10px;
}
.esito-tag.affidabile{ background:var(--panel-2); color:var(--ink); }
/* 16/10: sotto l'esito, la misura da controllare col calibro */
.result-oem{ margin-top:10px; font-size:1rem; color:var(--ink); overflow-wrap:anywhere; }
.esito-verifica{ font-size:1rem; line-height:1.45; color:var(--ink); margin:0 0 12px; }
.esito-tag.probabile{ background:var(--warn-bg); color:var(--warn); }
.esito-tag.ambiguo{ background:var(--panel-2); color:var(--ink-soft); }
.candidates-grid{ display:flex; flex-direction:column; gap:10px; margin:12px 0; text-align:left; }
.candidate-card{
  display:flex; gap:10px; align-items:center; padding:10px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel);
}
.candidate-card .cc-photo{ width:64px; height:64px; border-radius:8px; overflow:hidden; flex:0 0 auto; background:var(--panel-2); display:flex; align-items:center; justify-content:center; }
.candidate-card .cc-photo img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.candidate-card .cc-body{ flex:1 1 auto; min-width:0; }
.candidate-card .cc-code{ font-weight:700; font-size:1rem; }
.candidate-card .cc-fam{ font-size:.875rem; color:var(--ink-soft); }
.candidate-card button{ flex:0 0 auto; padding:8px 14px; font-size:.875rem; }
.measure-ask{ margin:14px 0; padding:12px; border-radius:10px; background:var(--panel-2); text-align:left; }
.not-found-form .field{ margin-bottom:10px; }
.not-found-form .field label{ font-size:.875rem; color:var(--ink-soft); }
.diagram-wrap .dim.highlight{ stroke:var(--signal); stroke-width:2.4; }
.diagram-wrap text.highlight{ fill:var(--signal); font-weight:700; }

/* ---------- area catalogo ---------- */
.cat-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.cat-tab{ font-size:.875rem; padding:7px 12px; border-radius:100px; }
.cat-tab.active{ background:var(--signal); border-color:var(--signal); color:var(--signal-ink); }
.fb-alt-btn.active{ background:var(--signal); border-color:var(--signal); color:var(--signal-ink); }
.cat-pane[hidden]{ display:none; }
.cat-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.cat-item{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:.875rem; }
.cat-item .cat-item-top{ display:flex; justify-content:space-between; gap:8px; }
/* font-size:1rem e non .82rem per lo stesso motivo dei campi di testo
   piu' sotto: sedici pixel, altrimenti iPhone ingrandisce da solo e la
   barra in basso si sgancia dal fondo. Qui serviva scriverlo di nuovo
   perche' questa regola e' piu' specifica e vincerebbe su quella. */
textarea.input{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1rem; padding:10px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel); color:var(--ink); }
.diff-group{ margin-top:14px; }
.diff-group h4{ font-size:.875rem; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.diff-row{ font-size:.875rem; padding:6px 8px; border-radius:6px; background:var(--panel-2); margin-bottom:4px; }
.diff-row .field-change{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.75rem; color:var(--ink-soft); }

.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  padding-block:14px 10px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
  /* lo sfondo arriva fino ai bordi dello schermo, non solo fino al
     rientro di 16px del body: cosi' niente passa di lato mentre scorre,
     e la riga di separazione e' una riga vera da bordo a bordo.
     Il contenuto resta dov'era, rimesso dentro con lo stesso rientro. */
  margin-inline:calc(var(--rientro-pagina) * -1);
  padding-inline:var(--rientro-pagina);
  /* sotto la tacca degli iPhone in orizzontale */
  padding-left:max(var(--rientro-pagina), env(safe-area-inset-left, 0px));
  padding-right:max(var(--rientro-pagina), env(safe-area-inset-right, 0px));
}
.topbar-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.brand{ display:flex; align-items:baseline; gap:8px; }
.brand h1{ font-size:1.5rem; font-weight:700; letter-spacing:.2px; }
.brand .tag{ font-size:.875rem; color:var(--ink-soft); }
.stats{ display:flex; gap:6px; flex-wrap:wrap; }

.step{ margin-bottom:30px; }
.step-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.step-head h2{ font-size:1.25rem; font-weight:600; }
.step-sub{ font-size:.875rem; color:var(--ink-soft); margin:2px 0 14px; }

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-4);
}
.panel + .panel{ margin-top:var(--space-2); }

.cam-area{
  position:relative; border:1px dashed var(--line-strong); border-radius:10px;
  background:var(--panel-2); overflow:hidden; aspect-ratio:4/3; max-width:100%;
  display:flex; align-items:center; justify-content:center;
}
.cam-area video, .cam-area img{ width:100%; height:100%; object-fit:cover; display:block; }
.cam-area video[hidden], .cam-area img[hidden], .cam-hint[hidden]{ display:none !important; }
.cam-hint{ color:var(--ink-soft); font-size:.875rem; text-align:center; padding:20px; }
.btn-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }

button, .btn{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; font-size:.875rem; font-weight:600;
  border-radius:var(--radius-md); border:1px solid var(--line-strong); background:var(--panel);
  color:var(--ink); padding:13px var(--space-4); min-height:var(--tap-min); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; gap:6px;
}
/* schede dell'area Catalogo: pensate per operatori con mouse/tastiera,
   non per l'uso mobile sul campo, restano compatte intenzionalmente */
.cat-tab{ min-height:0; padding:8px 14px; }
button:focus-visible, input:focus-visible, select:focus-visible, .file-btn:focus-within{
  outline:2px solid var(--blueprint); outline-offset:2px;
}
button.primary{ background:var(--signal); border-color:var(--signal); color:var(--signal-ink); }
button.ghost{ background:transparent; border-color:var(--line); }
/* un collegamento che apre un'altra pagina deve avere l'aspetto degli
   altri tasti della stessa riga: se sembra un link e gli altri sembrano
   tasti, si legge come una cosa diversa, e non lo e'. */
a.btn.ghost{ background:transparent; border-color:var(--line); text-decoration:none; }
button:disabled{ opacity:.45; cursor:not-allowed; }
.file-btn{ position:relative; overflow:hidden; }
.file-btn input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.hint-banner{
  /* 15/10: niente bordo rosso laterale (cliche' segnalato da Impeccable);
     il fondo grigio basta a staccarlo dai risultati */
  background:var(--panel-2); color:var(--ink);
  border-radius:8px; padding:10px 12px; font-size:.875rem; margin-bottom:12px;
}
.ref-page summary{
  cursor:pointer; font-size:.875rem; font-weight:600; color:var(--blueprint-ink);
  /* 15/10: almeno 44px da toccare; display resta list-item, cosi' il ▸ rimane */
  padding:12px 0; min-height:var(--tap-min); box-sizing:border-box;
}
.ref-page img{ border:1px solid var(--line); border-radius:8px; margin-top:6px; width:100%; }
.ref-page-note{ font-size:.75rem; color:var(--ink-soft); margin-top:4px; }

.diagram-wrap{
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:10px; display:flex; justify-content:center;
}
.diagram-wrap svg{ width:100%; max-width:280px; height:auto; color:var(--blueprint); }
.diagram-wrap text{ fill:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.diagram-wrap .dim{ stroke:var(--blueprint); }
.diagram-wrap .body-line{ stroke:var(--ink-soft); fill:var(--panel); }

.field-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:14px; }
.field{ display:flex; flex-direction:column; gap:4px; }
/* 15/10 (revisione Taste): etichette in testo normale a 14px, non piu'
   maiuscolette spaziate a 12px, piu' faticose da leggere al volo */
.field label{ font-size:.875rem; font-weight:600; color:var(--ink-soft); }
.field label .letter{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--blueprint-ink); font-weight:600; }
.field input, select.input, input.input{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1rem; padding:8px 10px;
  border:1px solid var(--line-strong); border-radius:6px; background:var(--panel); color:var(--ink); width:100%;
}

/* SEDICI PIXEL, non quindici. Non e' una scelta di stile.
   Su iPhone, toccare un campo con testo sotto i 16px fa ingrandire la
   pagina DA SOLO. Da quel momento la finestra visibile e' piu' piccola
   della pagina, e position:fixed resta agganciato alla pagina, non a
   cio' che si vede: la barra in basso smette di stare in fondo e sembra
   piantata in mezzo al contenuto. E' il difetto segnalato dal telefono
   il 14/09/2026, e i campi stavano a .95rem, cioe' 15,2px.
   La via d'uscita NON e' vietare l'ingrandimento (maximum-scale,
   user-scalable=no): chi ha bisogno di ingrandire deve poterlo fare.
   La via d'uscita e' non dare a iPhone un motivo per farlo da solo.
   Vale per ogni campo in cui si scrive o si sceglie. */
input[type="text"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="email"],
input[type="url"], input[type="date"], select, textarea, .input{
  font-size:max(1rem, 16px);
}
select.input{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }

details.adv{ margin-top:14px; }
details.adv summary{ cursor:pointer; font-size:.875rem; color:var(--blueprint-ink); font-weight:600;
                     padding:12px 0; min-height:var(--tap-min); box-sizing:border-box; }
details.adv .adv-note{ font-size:.875rem; color:var(--ink-soft); margin:8px 0 4px; }

.filter-grid{ display:grid; gap:12px; }
.field.wide label{ margin-bottom:2px; }

.actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.actions button{ flex:1 1 160px; justify-content:center; padding:13px 16px; font-size:1rem; }

#results-list{ display:flex; flex-direction:column; gap:12px; }
.empty-hint{
  border:1px dashed var(--line-strong); border-radius:10px; padding:20px; text-align:center;
  color:var(--ink-soft); font-size:.875rem;
}
/* 15/10 (revisione Taste): pannelli e schede ferme senza ombra; il bordo basta */
.result-card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; }
/* 15/10: l'etichetta di corrispondenza ("Corrispondenza per famiglia/marca"
   arriva a ~240px) non stava accanto a foto e famiglia: a 390px usciva dallo
   schermo, tagliata, e la pagina scorreva di lato. Ora, se non c'e' posto,
   va a capo sotto la testata invece di uscire. */
.rc-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:8px 10px; margin-bottom:8px; }
.rc-id{ font-size:.75rem; color:var(--ink-soft); margin-top:10px; }
/* 15/10: il codice e' il titolo della scheda (prima era l'id interno P0001) */
.rc-codice{ display:flex; flex-direction:column; gap:1px; margin-bottom:2px; }
.rc-codice-tipo{ font-size:.875rem; font-weight:600; color:var(--ink-soft); }
.rc-codice-valore{ font-size:1.25rem; font-weight:800; color:var(--ink); line-height:1.2; letter-spacing:.01em; }
.rc-photo-wrap{
  width:64px; height:64px; flex:0 0 auto; border-radius:8px; overflow:hidden;
  background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.rc-photo-wrap img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.rc-photo-wrap .no-photo{ font-size:1.25rem; color:var(--line-strong); }

/* confronto affiancato nella coda di revisione ritagli (area Catalogo) */
.crop-compare-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px){ .crop-compare-row{ grid-template-columns:1fr; } }
.crop-page-wrap{
  position:relative; width:100%; aspect-ratio:0.707; border-radius:8px; overflow:hidden;
  background:var(--panel-2); border:1px solid var(--line);
}
.crop-page-wrap img{ width:100%; height:100%; object-fit:contain; background:#fff; }
.crop-page-box{
  position:absolute; border:3px solid var(--danger); background:rgba(217,48,37,.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.6); pointer-events:none;
}
.crop-mismatch{ color:var(--danger); font-weight:700; }
.rc-head-row{ display:flex; gap:10px; align-items:flex-start; flex:1 1 220px; min-width:0; }
.rc-head-row > div{ min-width:0; overflow-wrap:anywhere; }
.rc-fam{ font-size:1rem; font-weight:600; }
.rc-fam.unknown{ color:var(--ink-soft); font-weight:500; font-style:italic; }
.badge{
  font-size:.75rem; font-weight:600; padding:4px 9px; border-radius:100px; white-space:nowrap; flex:none;
  max-width:100%;
}
/* solo su schermi strettissimi (sotto ~300px) l'etichetta va a capo dentro
   se stessa: meglio due righe che una parola tagliata */
.rc-top .badge{ white-space:normal; }
.badge.high{ background:var(--ok-bg); color:var(--ok); }
.badge.mid{ background:var(--warn-bg); color:var(--warn); }
.badge.low{ background:var(--panel-2); color:var(--ink-soft); }
.badge.code{ background:var(--blueprint); color:#fff; }
.badge.ai{ background:var(--signal); color:var(--signal-ink); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:.875rem; margin-top:8px; }
.kv dt{ color:var(--ink-soft); }
.kv dd{ margin:0; }
.rc-cars{ margin-top:10px; font-size:.875rem; }
.rc-cars summary{ cursor:pointer; color:var(--blueprint-ink); font-weight:600; font-size:.875rem;
                  padding:12px 0; min-height:var(--tap-min); box-sizing:border-box; }
.rc-cars .car-list{ margin-top:6px; color:var(--ink-soft); }
.rc-meas-table{ margin-top:10px; border-top:1px solid var(--line); padding-top:8px; }
.rc-meas-table .row{ display:flex; gap:10px; flex-wrap:wrap; font-size:.875rem; }
.rc-meas-table .cell{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--panel-2); padding:2px 7px; border-radius:5px; }
.rc-note{ margin-top:8px; font-size:.75rem; color:var(--ink-soft); }
.crop-risk-badge{
  font-size:.75rem; font-weight:700; padding:2px 8px; border-radius:100px; white-space:nowrap;
}
.crop-risk-alto{ background:var(--danger-bg); color:var(--danger); }
.crop-risk-medio{ background:var(--warn-bg); color:var(--warn); }
.crop-risk-basso{ background:var(--panel-2); color:var(--ink-soft); }
.crop-suspect-note{ color:var(--danger); font-weight:600; }
.crop-history-box{ margin-top:6px; max-height:220px; overflow-y:auto; }

footer{ margin-top:36px; padding-top:16px; border-top:1px solid var(--line); font-size:.75rem; color:var(--ink-soft); }

/* ---------- popup identificazione IA ---------- */
/* AUDIT OPUS5: con una finestra aperta la pagina sotto non deve scorrere
   (su telefono lo scorrimento "di sotto" fa perdere il punto in cui si era). */
body.modal-open{ overflow:hidden; }
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,14,20,.55); z-index:100;
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px 16px; overflow-y:auto;
}
.modal-panel{
  background:var(--panel); border-radius:12px; max-width:560px; width:100%;
  padding:20px; box-shadow:0 20px 60px -20px rgba(0,0,0,.5); position:relative;
}
.modal-close{
  position:absolute; top:12px; right:12px; border:none; background:var(--panel-2);
  width:32px; height:32px; border-radius:100px; padding:0; justify-content:center; font-size:1rem;
}
.modal-title{ font-size:1.125rem; font-weight:700; margin-bottom:4px; padding-right:36px; }
.modal-sub{ font-size:.875rem; color:var(--ink-soft); margin-bottom:14px; }

/* stato di conferma: una foto da sola non conferma mai un pezzo — questo
   riquadro segnala sempre se serve ancora una misura reale col calibro */
.confirm-status{
  font-size:.875rem; font-weight:600; border-radius:6px; padding:9px 12px; margin-bottom:12px;
  border:1px solid transparent;
}
/* i colori di stato NON sono un giudizio buono/cattivo: grigio = dati
   insufficienti, arancione = da controllare, rosso Würth = azione o
   attenzione, blu = misura verificata col calibro */
.confirm-status.pending{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn); }
.confirm-status.confirmed{ background:var(--st-blue-bg); color:var(--st-blue); border-color:var(--st-blue); }
.confirm-status.mismatch{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.confirm-status.info{ background:var(--panel-2); color:var(--ink-soft); border-color:var(--line); font-weight:500; }
.confirm-status.likely,
.confirm-status.match{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok); }
.spinner{ display:inline-block; width:1em; height:1em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* 15/10: con "riduci movimento" la rotellina non gira; resta visibile come segno di attesa */
@media (prefers-reduced-motion: reduce){
  .spinner{ animation:none; border-right-color:currentColor; opacity:.6; }
  /* 22/10: chi chiede meno movimento non vede transizioni ne' animazioni in nessuna schermata */
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

@media (max-width:420px){
  .brand h1{ font-size:1.25rem; }
  .field-grid{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
}

/* Blocco 2 (CLIP FINDER) -- schermata misure: griglia leggibile e coerente
   su mobile e desktop, con lo stesso sistema di spaziature del Blocco 1.
   Scelta per ID (non per la classe .field-grid condivisa): tocca SOLO i
   due contenitori della schermata misure pubblica (misure principali /
   "Altre misure"), non i moduli amministrativi che riusano .field-grid
   altrove, che restano invariati. */
#primary-fields-grid, #secondary-fields-grid{
  gap:var(--space-3);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
@media (max-width:480px){
  /* 320-390px: una sola colonna, sempre leggibile (mai 2-3 colonne strette
     e disallineate come con l'auto-fill generico usato altrove). */
  #primary-fields-grid, #secondary-fields-grid{
    grid-template-columns:1fr;
    gap:var(--space-2);
  }
}
@media (min-width:481px) and (max-width:700px){
  /* tablet/telefono grande: due colonne, ancora leggibili. */
  #primary-fields-grid, #secondary-fields-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (min-width:701px){
  /* desktop: le misure principali sono sempre 2-3 (mai di piu', per
     costruzione lato JS/backend) -- al massimo 3 per riga, mai una griglia
     che si allarga a piacere. "Altre misure" (fino a ~27 campi) resta
     invece auto-fit: piu' colonne qui sono dense ma leggibili, ed e' gia'
     chiusa per default. */
  #primary-fields-grid{ grid-template-columns:repeat(3,minmax(150px,1fr)); }
}

/* ============================================================
   VISUAL APPROVATO — rifinitura di identità e accessibilità
   ============================================================
   Un solo carattere per tutta l'app (quello di sistema, che sul
   telefono è già installato e resta leggibile a ogni dimensione:
   nessun font scaricato, nessuna dipendenza esterna), palette
   rosso/bianco/grigio/nero già in uso, spazi e bordi coerenti.
   Qui si sistemano solo le cose che mancavano davvero: aree
   toccabili troppo piccole, focus poco visibile, e i pochi punti
   dove il contrasto era sotto la soglia leggibile. */

/* --- aree toccabili: mai sotto 44px, anche per i comandi "piccoli" --- */
.link-btn{
  /* AUDIT INTEGRAZIONE: c'era solo l'altezza. "Esci" misurava 34x44 px —
     abbastanza alto e troppo stretto, cioe' il bersaglio piu' facile da
     sbagliare proprio mentre si tiene una clip nell'altra mano. */
  min-height:var(--tap-min);
  min-width:var(--tap-min);
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 var(--space-1);
}
/* dentro un paragrafo di testo il collegamento resta in linea, ma
   conserva un'area toccabile alta abbastanza */
.privacy-line .link-btn, .step-sub .link-btn{ min-height:var(--tap-min); }

.nav-btn{ min-height:var(--altezza-nav); }
.copy-btn{ min-height:var(--tap-min); padding:var(--space-2) var(--space-3); font-size:.875rem; }
.cat-tab{ min-height:var(--tap-min); padding:var(--space-2) var(--space-4); font-size:.875rem; }
.modal-close{ width:var(--tap-min); height:var(--tap-min); }
/* MODAL X SEMPRE TOCCABILE (21/10): la X e' posizionata sopra il pannello ma il
   contenuto veniva dopo nel codice e la copriva (la riga "Possibili
   corrispondenze..." arrivava fin sotto la X, e il tocco finiva sul testo). Ora
   la X sta sopra a tutto e la prima riga le lascia lo spazio. */
.modal-close{ z-index:5; }
#modal-body > :first-child{ margin-right:calc(var(--tap-min) + 8px); }

/* --- focus sempre visibile, anche sopra il rosso --- */
:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; border-radius:4px; }
.primary:focus-visible, .nav-btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

/* --- contrasto: il grigio secondario era troppo chiaro su bianco --- */
:root{ --ink-soft:#5c5c5c; }   /* 7:1 su bianco, prima 4,4:1 */

/* --- schermata di accesso: unica porta, pulsante rosso --- */
#screen-login .home-title{ margin-bottom:var(--space-2); }
#screen-login .panel{ border:1px solid var(--line); border-radius:12px; padding:var(--space-5); }
#screen-login #btn-login{ width:100%; justify-content:center; }

/* --- home: una sola azione principale, il resto in ordine di peso --- */
.home-hero{ padding-top:var(--space-5); }
.home-title{ font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }

/* --- mirino della fotocamera: riquadro centrale con quattro angoli --- */
.mirino{ position:absolute; inset:0; pointer-events:none; }
.mirino-foro{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(72%, 300px); aspect-ratio:1/1;
  box-shadow:0 0 0 9999px rgba(0,0,0,.34);
  border-radius:14px;
}
.mirino-angolo{
  position:absolute; width:30px; height:30px;
  border:4px solid #ffffff; border-radius:4px;
}
.mirino-angolo.tl{ top:-2px; left:-2px; border-right:none; border-bottom:none; }
.mirino-angolo.tr{ top:-2px; right:-2px; border-left:none; border-bottom:none; }
.mirino-angolo.bl{ bottom:-2px; left:-2px; border-right:none; border-top:none; }
.mirino-angolo.br{ bottom:-2px; right:-2px; border-left:none; border-top:none; }
.mirino-foro.pronto .mirino-angolo{ border-color:var(--signal); }
.mirino-istruzione{
  position:absolute; left:0; right:0; bottom:var(--space-4); text-align:center;
  color:#ffffff; font-size:.875rem; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.7);
  padding:0 var(--space-4);
}

/* --- pulsante di scatto: grande, con la lente --- */
.scatto-riga{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
              margin-top:var(--space-4); }
.btn-scatto{
  width:76px; height:76px; border-radius:100px; border:3px solid var(--signal);
  background:var(--signal); color:#ffffff; display:inline-flex; align-items:center;
  justify-content:center; padding:0; cursor:pointer; box-shadow:var(--shadow);
}
.btn-scatto:active{ transform:scale(.96); }
.btn-scatto svg{ width:38px; height:38px; }
.btn-scatto[disabled]{ opacity:.45; cursor:default; }
.scatto-etichetta{ font-size:.875rem; font-weight:700; color:var(--ink); letter-spacing:.02em; }

/* --- risultato: foto grande su bianco, nome e codice leggibili --- */
.result-photo-wrap{ background:#ffffff; border:1px solid var(--line); border-radius:12px; }
.result-name{ font-size:1.25rem; font-weight:700; line-height:1.25; }
.result-code-grande{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.25rem; font-weight:700; letter-spacing:.02em; color:var(--ink);
  display:block; margin:var(--space-2) 0 var(--space-1);
}
.result-code-tipo{ font-size:.875rem; font-weight:700; color:var(--ink-soft); }

/* --- ricerca: il codice viene prima, il resto si apre --- */
.cerca-codice-primo{ margin-bottom:var(--space-4); }
.cerca-avanzata > summary{
  cursor:pointer; font-weight:600; font-size:.875rem; padding:var(--space-3) 0;
  min-height:var(--tap-min); display:flex; align-items:center;
}

/* --- zoom al 200%: niente taglio orizzontale --- */
@media (max-width:520px){
  .home-title{ font-size:1.25rem; }
  .result-name{ font-size:1.125rem; }
  .result-code-grande{ font-size:1.125rem; }
}

/* I campi di testo erano piu' bassi dell'area toccabile minima: su
   telefono si sbaglia a centrarli. Ora rispettano la stessa soglia dei
   pulsanti. */
.input, select.input, input[type="text"], input[type="password"]{
  min-height:var(--tap-min);
}
textarea.input{ min-height:calc(var(--tap-min) * 2); }

/* la riga con "chi sei / informazioni / esci" stava su tre righe e
   pesava quanto il contenuto: sta su una riga sola, discreta. */
#utente-stato{ font-size:.875rem; }
footer{ display:none; }

/* la famiglia nella card e' contorno, non titolo: una riga, non in
   corsivo, e se e' lunga si accorcia invece di occupare mezza card */
.rc-fam{
  font-size:.875rem; color:var(--ink-soft); font-style:normal; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:22ch;
}
.rc-fam.unknown{ font-weight:500; }

/* ---------------------------------------------------------------
   BLOCCO C — confezione e disponibilità: due informazioni, due righe.
   La nota sotto la disponibilità dice sempre l'ambito e, se la verifica
   non è recente, invita a ricontrollare. Nessuna spia verde che dica
   "disponibile" senza data accanto.
   --------------------------------------------------------------- */
.disponibilita-nota{
  display:block;
  font-size:.75rem;
  line-height:1.35;
  color:var(--ink-soft);
  margin-top:2px;
}
.confezioni-alternative{
  margin:4px 0 0 0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:.875rem;
  line-height:1.5;
}
.confezioni-alternative .rc-note{ display:inline; }

/* ---------------------------------------------------------------
   Schermata misure — messa in ordine.

   Cosa non andava, guardando la schermata vera e non il codice:

   1. «(MM)» ripetuto ventisette volte. È rumore: l'unità è la stessa
      per tutti i campi, e ripeterla allunga ogni etichetta finché non
      va a capo.
   2. Le etichette che andavano a capo spostavano in basso solo il
      proprio campo, e la riga si sfilacciava: caselle a quote diverse,
      impossibile leggerla come una tabella. Ora ogni casella è
      appoggiata al fondo della sua riga, quindi le caselle restano
      allineate anche quando un'etichetta occupa due righe.
   3. Le etichette erano tutte MAIUSCOLE e spaziate: a 0,72rem è la
      combinazione meno leggibile possibile, e la più lunga.
   4. Le lettere del disegno (T, G, H…) erano in mezzo al testo. Ora
      sono una colonna di pastiglie allineate a sinistra: si scorre
      l'elenco cercando la lettera che si vede sul disegno.

   Tutto qui è limitato ai due contenitori della schermata misure: i
   moduli amministrativi che riusano .field-grid non vengono toccati.
   --------------------------------------------------------------- */
#primary-fields-grid .field,
#secondary-fields-grid .field{
  height:100%;
  gap:6px;
}
#primary-fields-grid .field label,
#secondary-fields-grid .field label{
  text-transform:none;
  letter-spacing:normal;
  font-size:.875rem;
  line-height:1.3;
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:7px;
}
/* la casella si appoggia al fondo: le righe restano allineate anche con
   un'etichetta su due righe */
#primary-fields-grid .input-unit,
#secondary-fields-grid .input-unit{ margin-top:auto; }

#primary-fields-grid .field label .letter,
#secondary-fields-grid .field label .letter{
  flex:0 0 auto;
  min-width:2.1em;
  text-align:center;
  padding:1px 5px;
  border-radius:5px;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--ink);
  font-weight:700;
  font-size:.875rem;
}

/* l'unità di misura una volta sola, dentro la casella */
.input-unit{ position:relative; display:block; }
.input-unit .input{ padding-right:38px; }
.input-unit .unit{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:.875rem; color:var(--ink-soft); pointer-events:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* quando per la famiglia scelta non c'è un disegno, il riquadro grigio
   vuoto non deve restare lì a occupare spazio senza dire niente */
.diagram-wrap:empty{ display:none; }

/* il disegno non ha bisogno di tutta la larghezza di uno schermo grande:
   centrato e contenuto, con un po' d'aria attorno */
.diagram-wrap{ padding:14px 10px; }
.diagram-wrap svg{ max-width:240px; }

/* ---------------------------------------------------------------
   BLOCCO D — avviso "c'è una versione più recente".

   Sta in basso, sopra la barra di navigazione, e non ricarica da solo:
   se stai misurando una clip, una pagina che si ricarica da sola ti fa
   perdere quello che stavi facendo. Decide chi la usa.
   --------------------------------------------------------------- */
#avviso-aggiornamento{
  position:fixed; z-index:40;
  left:12px; right:12px;
  bottom:calc(var(--altezza-nav) + env(safe-area-inset-bottom, 0px) + 12px);
  max-width:616px; margin:0 auto;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--ink); color:#fff;
  border-radius:10px; padding:12px 14px;
  font-size:.875rem; line-height:1.35;
  box-shadow:0 6px 24px -8px rgba(0,0,0,.5);
}
#avviso-aggiornamento span{ flex:1 1 auto; }
#avviso-aggiornamento .btn{
  min-height:var(--tap-min); padding:0 16px;
  background:var(--signal); border-color:var(--signal); color:var(--signal-ink);
  font-weight:700;
}
#avviso-aggiornamento .link-btn{
  color:#fff; min-height:var(--tap-min); padding:0 6px;
}

/* ------------------------------------------------------------------
   AUDIT INTEGRAZIONE — schermo corto (zoom 200%, o telefono piccolo in
   orizzontale).

   A zoom 200% su un telefono da 390 px restano 195x422 px di pagina, e
   l'intestazione se ne prendeva 132: misurato, il pulsante "Inquadra la
   clip" finiva a 455 px, cioe' sotto il bordo. Chi ingrandisce il testo
   perche' ci vede poco e' proprio la persona che non deve mettersi a
   cercare l'unico pulsante che conta.

   Sotto i 520 px di altezza il marchio resta (l'identita' non si tocca)
   e sparisce solo la riga di spiegazione, che a quel punto ha gia'
   detto quel che doveva.
   ------------------------------------------------------------------ */
@media (max-height: 520px){
  /* schermo corto (orizzontale, o zoom molto alto): la barra si stringe
     ma resta sopra i 44 px di area toccabile */
  :root{ --altezza-nav: 50px; }
  .nav-btn{ padding:5px 4px; gap:2px; }
  .nav-btn .nav-ic{ width:22px; height:22px; font-size:1.125rem; }
  .nav-btn[data-nav="cerca"] .nav-ic{ font-size:1.5rem; }
  .topbar{ padding-block:8px 6px; margin-bottom:10px; }
  .brand .tag{ display:none; }
  .home-hero{ padding-top:var(--space-3); }
  /* stessa storia sulla schermata di accesso: "Entra" finiva a 452 px
     su 422 disponibili. Qui non si toglie testo, si stringono i vuoti. */
  .home-title{ font-size:1.25rem; margin-bottom:var(--space-1); }
  #screen-login .step-sub{ margin-bottom:var(--space-2) !important; }
  #screen-login .panel{ padding:var(--space-3); }
  button.primary.big{ padding:12px 22px; }
}

/* ---------- CASA come /trova (21/09 sera) ----------
   Matteo: "lo stile dell'apprendimento ma molto elementare". Le misure
   vengono da trova.html: .principale.enorme (132 px, 24 px, ombra rossa
   scura sotto), .secondaria (bianco, bordo nero di 2 px), .recenti.
   Nessuna spiegazione in vista: il titolo resta solo per i lettori di
   schermo. */
.sr-solo{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#scan-landing.casa-semplice{ text-align:left; padding:var(--space-3) 0 var(--space-2); }
#scan-landing .casa-principale{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2);
  width:100%; max-width:none; min-height:clamp(132px, 20svh, 168px); padding:14px 18px; border-radius:18px;   /* 22/10: piu' alta sugli schermi alti, cosi' il bordo entra nell'arco del pollice */
  font-size:24px; font-weight:800; line-height:1.2;
  background:var(--signal); color:#fff; border:2px solid transparent;
  box-shadow:0 4px 0 var(--signal-dark);
}
#scan-landing .casa-principale .ico{ width:44px; height:44px; stroke-width:1.8; }
.ico{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }

/* il campo del codice, sotto il pulsante rosso: bordo chiaro, diventa nero quando si scrive */
.casa-codice{
  display:flex; align-items:center; gap:var(--space-2); margin-top:12px; height:56px; padding:0 6px 0 14px;
  border:2px solid var(--line-strong); border-radius:14px; background:#fff; color:var(--ink-soft);
}
.casa-codice:focus-within{ border-color:var(--ink); }
.casa-codice input{
  flex:1 1 auto; min-width:0; height:100%; border:0; outline:0; background:transparent;
  font:inherit; font-size:18px; color:var(--ink); padding:0;
}
.casa-codice input::placeholder{ color:#6b6b6b; }
.casa-codice .secondary{
  flex:0 0 auto; min-height:44px; padding:0 18px; border-radius:10px; border:0;
  background:var(--panel-2); color:var(--ink); font-size:16px; font-weight:700;   /* 22/10: chiaro: il peso e' di «Incolla foto», non di «Cerca» */
}

/* tre scorciatoie per le foto: "Incolla foto" e' la piu' usata, e' la piu' larga */
.casa-azioni{ display:flex; gap:10px; margin-top:10px; }
.casa-pillola{
  flex:1 1 0; min-width:0; min-height:60px; padding:0 8px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  background:#fff; color:var(--ink); border:2px solid var(--line); font:inherit; font-size:16px; font-weight:700;
  text-align:center; line-height:1.15; position:relative;
}
.casa-pillola-prima{ flex:1.5 1 0; border-color:var(--ink); }
.casa-pillola .ico{ width:22px; height:22px; }
.casa-pillola[hidden]{ display:none; }
.casa-pillola .conta-ricevute{ margin-left:0; min-width:24px; font-size:14px; padding:0 7px; }
.file-btn.casa-pillola{ overflow:hidden; }

/* invito a collegare WhatsApp */
.casa-invito{
  display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 8px 10px 14px;
  border-radius:16px; background:var(--panel-2);
}
.casa-invito[hidden]{ display:none; }
.casa-invito-testo{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.casa-invito-testo b{ font-size:16px; line-height:1.25; }
.casa-invito-testo span{ font-size:14px; color:var(--ink-soft); }
.casa-invito-vai{
  flex:0 0 auto; min-height:44px; padding:0 16px; border-radius:99px; font-size:16px; font-weight:800;
  background:#fff; color:var(--ink); border:2px solid var(--ink);
}
.casa-invito-chiudi{
  flex:0 0 auto; width:44px; min-height:44px; padding:0; border:0; background:transparent;
  color:var(--ink-soft); font-size:24px; line-height:1;
}
.casa-recenti{ margin-top:18px; }
.casa-recenti h3{ font-size:14px; font-weight:700; margin:0 0 8px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.casa-recenti-griglia{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.casa-recenti button{
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; min-width:0;
  padding:0; overflow:hidden; text-align:left;
  background:#fff; color:var(--ink); border:2px solid var(--line); border-radius:14px; font:inherit;
}
.casa-recenti img{ display:block; width:100%; height:88px; object-fit:contain; background:#fff; padding:6px; box-sizing:border-box; }
.casa-recenti .senza-foto-mini{ width:100%; height:88px; background:var(--panel-2); color:#767676; display:flex; align-items:center; justify-content:center; }
.casa-recenti .senza-foto-mini svg{ width:36px; height:36px; }
.casa-recenti .testo-scheda{ display:block; padding:8px 10px 10px; min-width:0; }
.casa-recenti .codice{ display:block; font-weight:800; font-size:16px; letter-spacing:.02em; }
.casa-recenti .nome{ display:block; font-size:14px; color:#5f5f5f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* (21/10) «Foto ricevute» e «Condividi da WhatsApp» */
.conta-ricevute{ display:inline-block; min-width:26px; margin-left:8px; padding:1px 8px; border-radius:999px;
  background:var(--signal); color:#fff; font-size:14px; font-weight:800; text-align:center; }
.ricevute-elenco{ display:flex; flex-direction:column; gap:10px; margin:12px 0; }
.ricevuta{ display:flex; gap:8px; align-items:stretch; }
.ricevuta-apri{ flex:1 1 auto; min-width:0; display:flex; gap:12px; align-items:center; text-align:left;
  min-height:76px; padding:8px 12px; background:#fff; color:var(--ink); border:2px solid #e8e8e8; border-radius:14px; font:inherit; }
.ricevuta-apri img{ width:60px; height:60px; object-fit:cover; border-radius:8px; background:#fafafa; flex:0 0 auto; }
.ricevuta-apri .codice{ display:block; font-weight:800; font-size:16px; letter-spacing:.02em; overflow-wrap:anywhere; }
.ricevuta-apri .nome{ display:block; font-size:14px; color:#5f5f5f; }
.ricevuta-apri .quando{ display:block; font-size:12px; color:var(--ink-soft); margin-top:2px; }
.ricevuta-elimina{ flex:0 0 auto; min-width:74px; padding:0 12px; background:#fff; color:var(--signal-dark); border:2px solid #e8e8e8;
  border-radius:14px; font:inherit; font-weight:600; }
.sotto-titolo{ margin:14px 0 2px; font-size:16px; }
.modal-sub.piccolo{ font-size:14px; color:#6b6b6b; }
.codici-elenco{ display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.codice-riga{ display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px 12px; border:2px solid #e8e8e8; border-radius:12px; }
.codice-riga small{ color:#6b6b6b; }
.codice-nuovo{ margin:10px 0; padding:12px; border:2px solid var(--signal); border-radius:12px; }
code.copiabile{ display:block; margin:6px 0; padding:8px 10px; background:#f4f4f2; border-radius:8px;
  font-size:14px; overflow-wrap:anywhere; word-break:break-all; user-select:all; -webkit-user-select:all; }
.passi-comando{ margin:12px 0 4px 20px; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.4; }
.passi-comando code{ background:#f4f4f2; padding:1px 5px; border-radius:5px; overflow-wrap:anywhere; }
.passi-comando code.copiabile{ display:block; margin:4px 0; }
.casa-piede{ margin-top:16px; display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); }
.casa-piede .link-btn{
  font-size:14px; font-weight:700; min-height:var(--tap-min); padding:0 var(--space-4); color:var(--ink);
  text-decoration:none; border:2px solid var(--line); border-radius:99px; background:#fff;   /* 22/10: sembrano comandi, non testo */
}

/* «Altro»: foglio che sale dal basso */
.altro-velo{
  position:fixed; inset:0; z-index:900; background:rgba(23,23,23,.5);
  display:flex; align-items:flex-end; justify-content:center;
}
.altro-velo[hidden]{ display:none; }
.altro-pannello{
  width:100%; max-width:640px; background:#fff; border-radius:20px 20px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:var(--space-2);
}
.altro-testa{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-1); }
.altro-titolo{ font-size:20px; font-weight:800; }
.altro-utente{ font-size:14px; color:var(--ink-soft); }
.altro-chiudi{ width:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:var(--panel-2); color:var(--ink); font-size:24px; line-height:1; }
.altro-voce{
  width:100%; min-height:56px; padding:0 16px; border-radius:14px; text-align:left;
  background:#fff; color:var(--ink); border:2px solid var(--line); font:inherit; font-size:18px; font-weight:700;
}
.altro-esci{ color:var(--signal-dark); }
/* in casa il marchio basta: la riga sotto il nome e' una spiegazione in piu' */
body.minimal-home .brand .tag{ display:none; }

/* 22/09: l'immagine dice che cos'e' (immagini.py) */
.foto-articolo{ margin:0 0 8px; }
.foto-articolo img{ display:block; max-width:100%; }
.foto-articolo figcaption{ font-size:.75rem; color:var(--ink-soft); margin-top:4px; }
.foto-articolo.foto-disegno_tecnico img{ background:#fff; }
.foto-articolo.foto-campo img{ max-width:140px; border-radius:8px; }

/* 22/09 (Matteo): la PWA non deve cambiare dimensione ne' zoomare. Niente
   ingrandimento col doppio tocco, testo che non si ridimensiona da solo
   quando il telefono ruota, campi mai sotto i 16px (sotto, iPhone ingrandisce
   la pagina da solo quando li tocchi). */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:max(16px,1em)}

/* 22/09 (Matteo): tenendo premuto un pulsante, il telefono selezionava il
   testo e apriva il menu "Copia / Cerca". I comandi non si selezionano; i
   codici e i risultati si', perche' si copiano. */
button,label,.fascia,.barra,.contatore{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}


/* ---------- 30/09: una cornice sola con /trova (revisione UI) ----------
   Stesso marchio (CLIP in nero, FINDER in rosso Wurth), stato della rete in
   una pillola verde, icone disegnate nella barra in basso (prima caratteri
   di testo di grandezza diversa), la sezione in uso in rosso. */
.brand .marchio{ font-size:1.125rem; font-weight:800; letter-spacing:.06em; }
.brand .marchio .f{ color:var(--signal); }
.connection-state{ font-size:.75rem; color:var(--ok); background:var(--ok-bg); border-radius:999px; padding:4px 10px; font-weight:700; }
.connection-state.is-offline{ color:var(--signal); background:#fdecee; }
.topbar-row{ align-items:center; }
.nav-btn svg.nav-ic{ width:24px; height:24px; display:block; }
.nav-btn{ font-size:.75rem; font-weight:700; }
.nav-btn.active{ color:var(--signal); box-shadow:inset 0 3px 0 var(--signal); }
/* la coda da sincronizzare e' un avviso, non uno stato "tutto bene" */
#avviso-coda.connection-state{ color:#8a5300; background:#fff4e5; }

/* 10/10 (verifiche finali, D10): "Mostra password", un bersaglio comodo */
/* 10/10 (UX N7): un'icona a destra DENTRO il campo, 48x48, non un secondo
   pulsante largo fra la password ed "Entra" */
.campo-password{position:relative}
.campo-password .input{padding-right:56px}
.mostra-password{position:absolute; right:2px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; min-height:48px; padding:0; margin:0;
  background:transparent; border:0; border-radius:10px; cursor:pointer; color:#444}
.mostra-password[aria-pressed="false"] .barra-occhio{display:none}
.mostra-password:focus-visible{outline:3px solid #1d4ed8; outline-offset:-3px}

/* 12/10 (grafica 10, B4): le sezioni di Gestione su UNA riga che scorre di
   lato sul telefono (prima 7 pillole su 4 righe: mezzo schermo). "Esci" e'
   un collegamento a destra, non un'ottava pillola di forma diversa. */
.riga-sezioni{ flex-wrap:nowrap; align-items:center; gap:8px; }
.riga-sezioni .cat-tabs{ flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto;
  scroll-snap-type:x proximity; scrollbar-width:none; padding:2px 2px 4px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
.riga-sezioni .cat-tabs::-webkit-scrollbar{ display:none; }
.riga-sezioni .cat-tab{ flex:0 0 auto; scroll-snap-align:start; white-space:nowrap; }
.riga-sezioni .esci-gestione{ flex:0 0 auto; }
@media (min-width:900px){
  .riga-sezioni .cat-tabs{ flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none; }
}

/* 12/10 (grafica 10, C3): i nomi tecnici lunghi vanno a capo invece di
   allargare la pagina al 200% di zoom */
.audit-entry .audit-target, .mono{ overflow-wrap:anywhere; }
.audit-entry .audit-target{ display:block; font-size:.875rem; color:var(--ink-soft); }

/* 12/10 (grafica 10): moduli di Gestione con campi abbastanza larghi
   (B7: a 390 erano 3 colonne da 100 px), caselle e collegamenti comodi da
   toccare (C5), il segno "verificato" leggibile (C6, prima 4,2:1) */
#catalogo-app .field-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); align-items:end; }
#catalogo-app input[type=checkbox]{ width:22px; height:22px; flex:0 0 auto; margin:0; accent-color:#cc071e; }
#catalogo-app label.casella, #catalogo-app label:has(> input[type=checkbox]){ display:flex; align-items:center; gap:10px; min-height:var(--tap-min); cursor:pointer; }
.link-fonte{ display:inline-flex; align-items:center; min-height:var(--tap-min); min-width:var(--tap-min); padding:0 6px; }
.verified-data{ color:#0b5a31; }
.titolo-pannello{ margin:0 0 4px; }

/* 12/10 (grafica 10, D4): a larghezza fissa solo i campi per i codici
   (.mono); nomi, note e menu nel carattere normale dell'app */
.field input:not(.mono), select.input, input.input:not(.mono), textarea.input:not(.mono){
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }

/* 12/10 (grafica 10, sesto giro) */
/* E1: la sezione scelta non finisce sotto la sfumatura */
.riga-sezioni .cat-tabs{ scroll-padding-inline:48px; }
/* E4: "Esci" in alto, allineato alla prima riga di sezioni */
.riga-sezioni{ align-items:flex-start; }
.riga-sezioni .esci-gestione{ margin-top:2px; }
/* F4: bersagli comodi anche per i comandi piccoli */
.pagina-btn{ min-width:var(--tap-min); min-height:var(--tap-min); }
.dettaglio-copertura > summary{ display:flex; align-items:center; min-height:var(--tap-min); }
/* G2: una testata sola su ogni schermata: marchio a sinistra, stato della
   rete a destra, sulla stessa riga; il sottotitolo solo su schermi larghi */
.topbar-row{ flex-wrap:nowrap; align-items:center; }
.topbar-row .brand{ min-width:0; }
@media (max-width:480px){ .brand .tag{ display:none; } }
/* F3: al 200% di zoom (sotto i 260 px) la barra in basso mostra solo le
   icone; il nome resta per la lettura vocale */
@media (max-width:260px){
  .nav-btn .nav-lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* 12/10 (grafica 10, settimo giro) */
/* F1: titoli lunghi ("dell'amministratore") a capo al 200% di zoom */
h1,h2,h3,h4{ overflow-wrap:anywhere; hyphens:auto; }
/* A1: al 200% (sotto i 260 px) le sezioni vanno a capo, senza sfumatura,
   ed "Esci" sta sotto */
@media (max-width:260px){
  .riga-sezioni{ flex-wrap:wrap; }
  .riga-sezioni .cat-tabs{ flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none; }
}

/* (21/10) "Chiudi finestra": pulsante rosso, largo, sotto le proposte */
.modal-chiudi-rosso{
  display:flex; align-items:center; justify-content:center; width:100%; max-width:none;
  min-height:56px; margin-top:14px; border-radius:12px; font-size:1.125rem; font-weight:700;
  background:var(--signal); border:2px solid var(--signal); color:var(--signal-ink);
  position:sticky; bottom:12px; z-index:4; box-shadow:0 6px 18px rgba(0,0,0,.28);
}


/* ---------- 22/10/2026: un solo dialetto per le schermate di chi vende ----------
   La casa e /trova avevano bordi da 2 px, raggi da 14 e testo 16 a peso 700; Accesso, Cerca,
   Catalogo e le finestre avevano bordi da 1 px, raggi da 8 e testo 14 a peso 600. Qui i
   comandi di quelle schermate prendono il dialetto della casa. Gestione (#screen-admin)
   resta com'e': ha la sua riprogettazione. Il rilievo rosso sta SOLO sul comando principale
   di ogni schermata (button.primary), cosi' il rilievo significa «e' questo». */
:is(#screen-login, #screen-cerca, #screen-catalogo, #modal-overlay, #privacy-overlay)
  :is(button.primary, button.secondary, button.ghost, .btn){
  border-width:2px; border-radius:var(--radius-ctl); font-size:1rem; font-weight:700; min-height:52px; padding:12px var(--space-4);
}
:is(#screen-login, #screen-cerca, #screen-catalogo, #modal-overlay, #privacy-overlay) button.primary{
  border-color:var(--signal); box-shadow:var(--rilievo);
}
:is(#screen-login, #screen-cerca, #screen-catalogo, #modal-overlay, #privacy-overlay) button.primary:disabled{ box-shadow:none; }
:is(#screen-login, #screen-cerca, #screen-catalogo, #modal-overlay, #privacy-overlay) :is(input, select, textarea){
  border-width:2px; border-radius:var(--radius-ctl);
}
/* le finestre: il pulsante di chiusura non e' il comando piu' forte (non e' rosso e non ha il rilievo) */
.modal-chiudi-rosso{ background:var(--panel-2); color:var(--ink); border:2px solid var(--line-strong); box-shadow:none; }

/* ---------- 22/10/2026, pacchetto B: risultato e ricerca ---------- */
/* la foto della clip e' il dato piu' importante da confrontare: 96 px, non 64 */
.rc-photo-wrap{ width:96px; height:96px; border-radius:10px; }
/* «Corrispondenza codice» e' un'informazione, non un pulsante: niente pillola nera */
.badge.code{ background:transparent; color:var(--ink); padding:0; font-weight:700; font-size:.875rem; }
.badge.code::before{ content:"\2713\00a0"; }
/* «Non conosci il codice?» e' una via vera, non un testo: ha l'aspetto di un comando e un segno che dice se e' aperto */
.cerca-avanzata > summary{
  list-style:none; justify-content:space-between; gap:var(--space-3); padding:0 var(--space-4);
  min-height:52px; font-size:1rem; font-weight:700; background:#fff; border:2px solid var(--line-strong); border-radius:var(--radius-ctl);
}
.cerca-avanzata > summary::-webkit-details-marker{ display:none; }
.cerca-avanzata > summary::after{ content:""; width:10px; height:10px; flex:0 0 auto; margin-right:2px;
  border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink); transform:rotate(45deg) translateY(-2px); transition:transform .15s; }
.cerca-avanzata[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
.cerca-avanzata[open] > summary{ margin-bottom:var(--space-3); }

/* ---------- 22/10/2026, pacchetto C: «Foto da WhatsApp» a passi ---------- */
.wa-scheda{ margin-bottom:var(--space-3); }
.passi-conta{ font-size:14px; font-weight:700; color:var(--ink-soft); margin-bottom:var(--space-1); }
.passo-corpo{ display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-3) 0; }
.passo-corpo .modal-sub{ margin:0; }
.passi-azioni{ display:flex; gap:10px; margin-top:var(--space-3); }
.passi-azioni .primary{ flex:1 1 auto; }
.voce-copia{ display:flex; flex-direction:column; gap:6px; }
.voce-copia-et{ font-size:14px; font-weight:700; color:var(--ink-soft); }
.voce-copia .copia-voce{ align-self:flex-start; min-height:44px; }

/* ---------- 22/10/2026, pacchetto C: Gestione piu' leggibile ---------- */
/* le sezioni vanno a capo invece di scorrere di lato (prima «Apprendimento» restava tagliata), «Esci» sta per conto suo */
.riga-sezioni{ flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--space-2); }
.riga-sezioni .cat-tabs{ flex:1 1 100%; flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none; gap:var(--space-2); }
.riga-sezioni .cat-tab{ flex:0 0 auto; }
.riga-sezioni .esci-gestione{ margin-left:auto; min-height:var(--tap-min); padding:0 var(--space-4); border:2px solid var(--line); border-radius:99px; text-decoration:none; font-weight:700; color:var(--ink-soft); }
/* i numeri di copertura sono riquadri in griglia, non una colonna di cifre */
#crop-coverage-numbers, #pack-coverage-numbers{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-2) !important; }
#crop-coverage-numbers > div, #pack-coverage-numbers > div{
  border:2px solid var(--line); border-radius:var(--radius-ctl); padding:var(--space-2) var(--space-3); text-align:center; background:#fff;
}
#crop-coverage-numbers > div > div:first-child, #pack-coverage-numbers > div > div:first-child{ font-size:1.5rem !important; }
/* i sei filtri della coda: dietro un solo comando, tutti larghi uguale */
.admin-filtri{ margin:var(--space-3) 0; }
.admin-filtri > summary{
  cursor:pointer; list-style:none; min-height:var(--tap-min); display:flex; align-items:center; font-weight:700;
  padding:0 var(--space-4); border:2px solid var(--line-strong); border-radius:var(--radius-ctl); background:#fff;
}
.admin-filtri > summary::-webkit-details-marker{ display:none; }
.admin-filtri[open] > summary{ margin-bottom:var(--space-3); }
.admin-filtri-griglia{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-bottom:var(--space-3); }
.admin-filtri-griglia .input, .admin-filtri-griglia select{ width:100%; max-width:none; min-width:0; }
@media (max-width:360px){ .admin-filtri-griglia{ grid-template-columns:1fr; } }


/* ===== 24/10/2026: Gestione a tessere =====
   Sei tessere da toccare, due per riga, ognuna con icona, numero e nome; il punto rosso e il bordo rosso
   dicono dove c'e' lavoro. Dentro una sezione: "← Gestione" e il titolo. Solo i colori e la scala del resto
   dell'app (bianco, nero, rosso Würth; testo 12-14-16-18-20-24-28; tocchi da almeno 44 px). */
.gest-testa{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.gest-testa .titolo-pannello{ font-size:1.75rem; }
.gest-tessere{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:var(--space-3); }
.gest-tessere .tessera{ position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  gap:var(--space-2); min-height:132px; padding:14px; border:1.5px solid var(--line-strong); border-radius:16px;
  background:var(--panel); color:var(--ink); text-align:left; font-size:1rem; }
.gest-tessere .tessera.tessera-calda{ border-color:var(--signal); }
.tessera-ico svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tessera-calda .tessera-ico{ color:var(--signal); }
.tessera-dot{ position:absolute; top:12px; right:12px; width:12px; height:12px; border-radius:50%; background:var(--signal); }
.tessera-num{ display:flex; flex-direction:column; gap:2px; font-size:.875rem; color:var(--ink-soft); min-height:1.25rem; }
.tessera-num b{ font-size:1.5rem; line-height:1.1; color:var(--ink); margin-right:2px; }
.tessera-nome{ font-size:1.125rem; font-weight:700; color:var(--ink); }
.gest-altro{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:16px; min-height:56px;
  padding:0 16px; border:1.5px solid var(--line-strong); border-radius:16px; background:var(--panel); color:var(--ink);
  font-size:1rem; font-weight:600; border-radius:16px; }
.gest-altro-sub{ font-size:.875rem; font-weight:400; color:var(--ink-soft); }
.gest-dentro{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-1); margin-bottom:var(--space-3); }
.gest-indietro{ min-height:var(--tap-min); padding:0 var(--space-4); border:1.5px solid var(--line-strong); border-radius:99px;
  background:var(--panel); color:var(--ink); font-weight:700; font-size:1rem; }
.gest-dentro .titolo-pannello{ font-size:1.75rem; }