/* Caratteri serviti dal nostro server.
 *
 * Prima arrivavano da fonts.googleapis.com: ogni caricamento di pagina
 * mandava a Google l'indirizzo IP di chi apriva il sistema — operatori di
 * filiale e montatori — senza che nessuno lo avesse chiesto e senza che si
 * potesse rifiutare. Un tribunale tedesco ha gia' dato torto a un sito per
 * questo nel 2022, e per un sistema che tratta dati di clienti finali era
 * un'esposizione gratuita.
 *
 * Sono i soli sottoinsiemi latino e latino esteso: gli altri alfabeti
 * pesavano senza servire a niente.
 */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   LP Preventivi — Design System v2
   ═══════════════════════════════════════════════════════════════ */

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

/* PWA safe-area (notch / home indicator) */
body { padding-bottom: env(safe-area-inset-bottom); }

:root {
  --primary:      #1a3d5c;
  --primary-deep: #122b42;
  --primary-mid:  #1e4a6e;
  --accent:       #c8a04a;
  --accent-dark:  #a88235;
  --accent-light: #f0dca8;
  --accent-glow:  var(--accent-a25);
  --bg:           #f0ece0;
  --surface:      #faf8f2;
  --surface-2:    #fff;
  --dark:         #1e1e1e;
  --mid:          #4a4a4a;
  --gray:         #8a8a8a;
  --border:       #ddd8cc;
  --border-soft:  #eae6dc;
  --input-bg:     #fffef8;

  --shadow-xs: 0 1px 3px rgba(0,0,0,.07);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.09);
  --shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.16);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --transition: .18s ease;

  --accent-tint: #f0e8d4;
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --font-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ── Scale di stato ────────────────────────────────────────────────────────
     Erano 63 colori scritti a mano in 118 punti del foglio, senza un nome e
     senza un criterio: lo stesso verde ricomparso tredici volte con tredici
     valori vicini, perche' ogni volta era stato scelto di nuovo a memoria.
     Cambiare l'aspetto del sistema — o vestirlo dei colori di un'insegna —
     voleva dire trovarli tutti, e mancarne uno non si vede finche' non lo vede
     un cliente.

     Qui non cambia niente: ogni valore e' quello di prima, e gli accorpamenti
     restano sotto la soglia in cui l'occhio distingue due superfici affiancate
     (ΔE < 3). I gradini sono numerati dal piu' chiaro al piu' scuro.

     Sono ancora troppi. Ridurli e' la fase successiva, ed e' una decisione di
     aspetto, non di struttura: va presa guardando le schermate, non il foglio. */

  /* verde — lo stato "fatto", le conferme — 13 gradini */
  --ok-100: #f5f8f0;
  --ok-200: #e8f5e9;
  --ok-350: #d4edda;
  --ok-300: #d8f0e2;
  --ok-400: #c8e6c9;
  --ok-500: #a5d6a7;
  --ok-600: #6dc490;
  --ok-700: #5fa05f;
  --ok-800: #40916c;
  --ok-900: #3a7a3a;
  --ok-1000: #2a8a45;
  --ok-1100: #2e7d32;
  --ok-1200: #2d6a4f;
  --ok-1300: #0d5c21;
  --ok-1350: #145a25;

  /* rosso — reclamo, eliminazione, errore — 9 gradini */
  --bad-100: #feeaea;
  --bad-200: #f8d5d5;
  --bad-300: #f5c6cb;
  --bad-400: #ef9a9a;
  --bad-500: #e88080;
  --bad-600: #c04040;
  --bad-700: #c62828;
  --bad-800: #c0392b;
  --bad-900: #8c1a1a;

  /* ambra — "da chiamare", avvisi — 12 gradini */
  --warn-100: #fffbf0;
  --warn-200: #f4f2ef;
  --warn-300: #fff4df;
  --warn-400: #fff0d6;
  --warn-500: #f5f0e0;
  --warn-600: #f0c88a;
  --warn-650: #fff3cd;
  --warn-700: #f0c060;
  --warn-800: #f0c860;
  --warn-900: #c89000;
  --warn-1000: #9a5e00;
  --warn-1100: #9a5500;
  --warn-1200: #7a4000;
  --warn-1250: #7a5800;

  /* blu — informativo, superfici fredde — 9 gradini */
  --info-100: #f5f9ff;
  --info-200: #eaf2ff;
  --info-300: #e8edf2;
  --info-400: #c0d8f0;
  --info-500: #90bef5;
  --info-600: #5b7fa6;
  --info-700: #3a5f80;
  --info-800: #1550a0;

  /* rosa — usato dal solo calendario — 3 gradini */
  --pink-100: #fce4ec;
  --pink-200: #f48fb1;
  --pink-300: #ad1457;

  /* neutri — grigi e bianchi che non vengono dal fondo — 7 gradini */
  --n-100: #ffffff;
  --n-200: #eeeceb;
  --n-300: #e0ddd8;
  --n-400: #cccccc;
  --n-500: #aaaaaa;
  --n-600: #999999;
  --n-700: #666666;

  /* ── Trasparenze ──────────────────────────────────────────────────────────
     Erano 65 `rgba()` scritti a mano. Ventitre' di questi erano l'accento e il
     colore portante ricopiati come numeri: sotto il tema di un'insegna
     restavano oro e navy mentre tutto il resto diventava blu. E' meta' del
     motivo per cui il white-label sembrava incompleto.

     Ogni token e' dichiarato due volte di proposito: prima il valore fisso di
     sempre, poi la versione che segue il colore dell'insegna. Un browser che
     non conosce `color-mix` ignora la seconda e mostra quello che mostrava
     prima; gli altri seguono il marchio. */

  --accent-a06: rgba(200,160,74,.06);
  --accent-a06: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-a15: rgba(200,160,74,.15);
  --accent-a15: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-a18: rgba(200,160,74,.18);
  --accent-a18: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-a25: rgba(200,160,74,.25);
  --accent-a25: color-mix(in srgb, var(--accent) 25%, transparent);
  --accent-a35: rgba(200,160,74,.35);
  --accent-a35: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-a40: rgba(200,160,74,.40);
  --accent-a40: color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-a45: rgba(200,160,74,.45);
  --accent-a45: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-a50: rgba(200,160,74,.50);
  --accent-a50: color-mix(in srgb, var(--accent) 50%, transparent);
  --bad-a25: rgba(198,40,40,.25);
  --bad-a25: color-mix(in srgb, var(--bad-700) 25%, transparent);
  --info-a30: rgba(58,95,128,.3);
  --info-a30: color-mix(in srgb, var(--info-700) 30%, transparent);
  --info-a45: rgba(58,95,128,.45);
  --info-a45: color-mix(in srgb, var(--info-700) 45%, transparent);
  --luce-a11: rgba(255,255,255,.11);
  --luce-a12: rgba(255,255,255,.12);
  --luce-a15: rgba(255,255,255,.15);
  --luce-a20: rgba(255,255,255,.2);
  --luce-a22: rgba(255,255,255,.22);
  --luce-a25: rgba(255,255,255,.25);
  --luce-a28: rgba(255,255,255,.28);
  --luce-a30: rgba(255,255,255,.3);
  --luce-a55: rgba(255,255,255,.55);
  --luce-a75: rgba(255,255,255,.75);
  --luce-a78: rgba(255,255,255,.78);
  --luce-a80: rgba(255,255,255,.8);
  --luce-a85: rgba(255,255,255,.85);
  --luce-a90: rgba(255,255,255,.9);
  --luce-a95: rgba(255,255,255,.95);
  --ok-a30: rgba(58,122,58,.3);
  --ok-a30: color-mix(in srgb, var(--ok-900) 30%, transparent);
  --ok-a45: rgba(58,122,58,.45);
  --ok-a45: color-mix(in srgb, var(--ok-900) 45%, transparent);
  --okdeep-a30: rgba(45,106,79,.3);
  --okdeep-a30: color-mix(in srgb, var(--ok-1100) 30%, transparent);
  --okdeep-a45: rgba(45,106,79,.45);
  --okdeep-a45: color-mix(in srgb, var(--ok-1100) 45%, transparent);
  --okmid-a25: rgba(46,125,50,.25);
  --okmid-a25: color-mix(in srgb, var(--ok-1000) 25%, transparent);
  --ombra-a05: rgba(0,0,0,.05);
  --ombra-a07: rgba(0,0,0,.07);
  --ombra-a12: rgba(0,0,0,.12);
  --ombra-a30: rgba(0,0,0,.3);
  --ombra-a45: rgba(0,0,0,.45);
  --ombra-a55: rgba(0,0,0,.55);
  --pink-a25: rgba(173,20,87,.25);
  --pink-a25: color-mix(in srgb, var(--pink-300) 25%, transparent);
  --primary-a12: rgba(26,61,92,.12);
  --primary-a12: color-mix(in srgb, var(--primary) 12%, transparent);
  --primary-a15: rgba(26,61,92,.15);
  --primary-a15: color-mix(in srgb, var(--primary) 15%, transparent);
  --primary-a25: rgba(26,61,92,.25);
  --primary-a25: color-mix(in srgb, var(--primary) 25%, transparent);
  --primary-a30: rgba(26,61,92,.30);
  --primary-a30: color-mix(in srgb, var(--primary) 30%, transparent);
  --primary-a35: rgba(26,61,92,.35);
  --primary-a35: color-mix(in srgb, var(--primary) 35%, transparent);
  --primary-a40: rgba(26,61,92,.4);
  --primary-a40: color-mix(in srgb, var(--primary) 40%, transparent);
  --velo-a55: rgba(10,20,36,.55);

  /* ── Scala delle spaziature ───────────────────────────────────────────────
     Erano 28 misure diverse da 1px a 64px, usate 607 volte. Non era una scala:
     era una collezione, perche' ogni volta la distanza era stata scelta di
     nuovo a occhio. E' il motivo per cui ogni schermata respira in modo suo.

     Qui non si sposta un pixel: sono convertite solo le distanze che cadevano
     gia' esattamente su un gradino. Le altre restano scritte come prima e sono
     contate da un test, che impedisce che aumentino. Portarle sulla scala
     significa muovere il contenuto di uno o due pixel in un centinaio di
     punti: e' una decisione di aspetto, va presa guardando le schermate. */

  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
}

html, body {
  height: 100%;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--dark);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── SVG Icons ──────────────────────────────────────────────────── */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex-shrink: 0; }
.ic-wrap { display: inline-flex; align-items: center; justify-content: center; }

/* ── Views ──────────────────────────────────────────────────────── */
.view { display: none; height: 100vh; flex-direction: column; overflow: hidden; }
.view.active { display: flex; animation: viewIn .22s ease; }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── App Header ─────────────────────────────────────────────────── */
.app-header {
  background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 100%);
  color: white;
  padding: 0 var(--sp-24);
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex-shrink: 0;
  box-shadow: 0 2px 12px var(--primary-a35);
  position: relative;
  z-index: 10;
}
.app-header h1, .app-header h2 {
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: .2px;
  color: white;
  margin-right: auto;
}

.gold-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light), var(--accent));
  flex-shrink: 0;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.92); }

.btn-gold {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  box-shadow: 0 2px 8px var(--accent-a40);
}
.btn-gold:hover { box-shadow: 0 4px 14px var(--accent-a50); }

.btn-navy {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: white;
  box-shadow: 0 2px 8px var(--primary-a30);
}
.btn-navy:hover { box-shadow: 0 4px 14px var(--primary-a40); }

.btn-light {
  background: var(--surface-2);
  color: var(--primary);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-light:hover { border-color: var(--accent); }

.btn-danger {
  background: var(--bad-100);
  color: var(--bad-900);
  border: 1.5px solid var(--bad-300);
}
.btn-danger:hover { background: var(--bad-200); }

.btn-green { background: var(--ok-200); color: var(--ok-1100); border: 1.5px solid var(--ok-500); }
.btn-green:hover { background: var(--ok-400); }

.btn-gray {
  background: var(--surface);
  color: var(--mid);
  border: 1.5px solid var(--border);
}
.btn-gray:hover { border-color: var(--gray); }

.btn-back {
  background: var(--luce-a15);
  color: white;
  border: 1.5px solid var(--luce-a30);
  padding: 7px var(--sp-14);
  font-size: 12px;
  backdrop-filter: blur(4px);
}
.btn-back:hover { background: var(--luce-a25); }

/* ── ════════════════════════════════════════════════════════
   FILIALE SELECTION
   ════════════════════════════════════════════════════════ */
#view-filiale, #view-login, #view-invito {
  background: linear-gradient(150deg, var(--primary-deep) 0%, var(--primary) 60%, var(--primary-mid) 100%);
}

.filiale-hero {
  color: white;
  text-align: center;
  padding: var(--sp-64) var(--sp-24) var(--sp-48);
  flex-shrink: 0;
  position: relative;
}
.filiale-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.filiale-hero h1 {
  font-size: 34px;
  font-weight: 800;
  font-family: var(--font-display);
  color: white;
  letter-spacing: -.4px;
  margin-bottom: var(--sp-8);
  position: relative;
}
.filiale-hero .hero-sub {
  font-size: 15px;
  color: var(--luce-a78);
  position: relative;
}

.filiale-grid {
  display: flex;
  gap: var(--sp-24);
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 0 var(--sp-48) var(--sp-40);
}

.filiale-card {
  background: var(--luce-a11);
  border: 2px solid var(--luce-a22);
  border-radius: var(--radius-lg);
  padding: 52px 44px;
  text-align: center;
  cursor: pointer;
  flex: 1;
  max-width: 260px;
  backdrop-filter: blur(6px);
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.filiale-card:hover {
  background: var(--luce-a20);
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px var(--ombra-a30);
}
.filiale-card:active { transform: translateY(-2px); }

.filiale-icon { font-size: 42px; margin-bottom: var(--sp-16); display: flex; align-items: center; justify-content: center; }
.filiale-nome {
  font-size: 22px;
  font-weight: 800;
  color: white;
  letter-spacing: -.2px;
}

/* ── Login form ─────────────────────────────────────────────────── */
.login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
}
.login-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px var(--sp-40);
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 32px var(--primary-a12);
}
.login-field { margin-bottom: 18px; }
.login-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--sp-6);
}
.login-input {
  width: 100%;
  padding: 11px var(--sp-14);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--dark);
  background: var(--surface);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition);
}
.login-input:focus { border-color: var(--accent); }
.login-error {
  color: var(--bad-900);
  font-size: 13px;
  font-weight: 600;
  min-height: 20px;
  margin-bottom: var(--sp-14);
}
.login-btn { width: 100%; padding: 13px; font-size: 15px; justify-content: center; }

/* Filiale badge in app-header */
.filiale-tag {
  font-size: 11px;
  font-weight: 700;
  background: var(--accent);
  color: white;
  padding: var(--sp-4) 11px;
  border-radius: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-right: auto;
  white-space: nowrap;
}

/* Filiale in menu-hero */
.menu-filiale-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  justify-content: center;
  margin-top: var(--sp-14);
  position: relative;
}
.menu-filiale-label {
  font-size: 14px;
  color: var(--luce-a95);
  font-weight: 700;
  letter-spacing: .2px;
}
.btn-cambia-filiale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--luce-a80);
  background: var(--luce-a12);
  border: 1.5px solid var(--luce-a28);
  border-radius: 4px;
  padding: 3px var(--sp-10);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.btn-cambia-filiale:hover { background: var(--luce-a22); color: white; }

/* ── ════════════════════════════════════════════════════════
   MENU
   ════════════════════════════════════════════════════════ */
#view-menu { background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }

.menu-hero {
  background: linear-gradient(150deg, var(--primary-deep) 0%, var(--primary) 60%, var(--primary-mid) 100%);
  color: white;
  text-align: center;
  padding: var(--sp-48) var(--sp-24) var(--sp-40);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.menu-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.menu-hero h1 {
  font-size: 30px;
  font-weight: 800;
  font-family: var(--font-display);
  color: white;
  letter-spacing: -.3px;
  margin-bottom: var(--sp-8);
  position: relative;
}
.menu-hero .hero-sub {
  font-size: 14px;
  color: var(--luce-a75);
  position: relative;
}
.menu-hero .hero-badge,
.filiale-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px var(--sp-10);
  border-radius: 20px;
  margin-bottom: var(--sp-12);
  letter-spacing: .5px;
  text-transform: uppercase;
  position: relative;
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 28px 36px;
  flex: 1;
  align-content: center;
}

.menu-card {
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px var(--sp-20) var(--sp-20);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.menu-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border-soft);
  transition: background var(--transition);
}
.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-light);
}
.menu-card:hover::after { background: var(--accent); }
.menu-card:active { transform: translateY(-1px); }

.menu-card.primary-card {
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-color: var(--accent-dark);
  box-shadow: 0 4px 20px var(--accent-a35);
}
.menu-card.primary-card::after { background: var(--luce-a30); }
.menu-card.primary-card:hover {
  box-shadow: 0 8px 28px var(--accent-a45);
  border-color: var(--accent-dark);
}

.card-icon-wrap {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: transform var(--transition);
}
.menu-card:hover .card-icon-wrap { transform: scale(1.08); }
.primary-card .card-icon-wrap {
  background: var(--luce-a20);
  box-shadow: none;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--primary);
  letter-spacing: -.1px;
}
.primary-card .card-title { color: white; }

.card-desc {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.4;
}
.primary-card .card-desc { color: var(--luce-a85); }

.menu-footer {
  text-align: center;
  padding: var(--sp-10);
  font-size: 11px;
  color: var(--gray);
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}

/* ── ════════════════════════════════════════════════════════
   CALCOLATORE
   ════════════════════════════════════════════════════════ */
#view-calc .calc-body {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: var(--sp-14);
  flex: 1;
  overflow-y: auto;
  align-items: start;
  padding: var(--sp-14) var(--sp-16);
  background: var(--bg);
}

.calc-left  { display: flex; flex-direction: column; gap: var(--sp-12); }
.calc-right {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* Section boxes */
.section-box {
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}
.section-box.grow { display: flex; flex-direction: column; }

.section-title {
  background: var(--surface);
  color: var(--primary-deep);
  padding: var(--sp-10) var(--sp-16);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  border-bottom: 1.5px solid var(--border-soft);
}
.section-title::before {
  content: '';
  width: 4px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.section-body { padding: var(--sp-16); }

/* Form rows */
.form-row {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: 11px;
}
.form-row:last-child { margin-bottom: 0; }

.form-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mid);
  width: 175px;
  flex-shrink: 0;
}

.form-row input[type=text],
.form-row input[type=number],
.form-row input[type=tel] {
  flex: 1;
  padding: var(--sp-8) var(--sp-12);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  font-size: 13px;
  font-family: inherit;
  color: var(--dark);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-a15);
}

.field-hint {
  font-size: 10px;
  color: var(--gray);
  font-weight: normal;
  margin-left: var(--sp-4);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: 12.5px;
  color: var(--mid);
  cursor: pointer;
  padding: var(--sp-4) 0;
}
.checkbox-label input[type=checkbox] {
  width: 15px; height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.extras-wrap {
  margin-top: var(--sp-10);
  border-top: 1px dashed var(--border);
  padding-top: var(--sp-8);
}
.extras-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-6);
}
.extras-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.btn-add-extra {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: transparent;
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  padding: 3px 9px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.btn-add-extra:hover { background: var(--primary); color: white; }

.extra-row { display: flex; gap: var(--sp-6); align-items: center; margin-bottom: 5px; }
.extra-desc {
  flex: 1; padding: 5px var(--sp-8); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--input-bg);
  font-size: 12px; font-family: inherit; color: var(--dark); outline: none;
  transition: border-color var(--transition);
}
.extra-desc:focus { border-color: var(--accent); }
.extra-imp {
  width: 80px; padding: 5px var(--sp-8); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--input-bg);
  font-size: 12px; font-family: inherit; color: var(--dark); text-align: right; outline: none;
  transition: border-color var(--transition);
}
.extra-imp:focus { border-color: var(--accent); }
.extra-del {
  width: 28px; height: 28px; background: transparent; border: none;
  color: var(--gray); font-size: 14px; cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}
.extra-del:hover { color: var(--bad-900); background: var(--bad-100); }

.storico-tel {
  margin-left: var(--sp-8); font-size: 11px; color: var(--warn-1000); font-weight: 600;
  background: var(--warn-400); border: 1px solid var(--warn-700); border-radius: 10px;
  padding: 1px var(--sp-8); white-space: nowrap;
}

.cliente-row { display: flex; gap: var(--sp-8); flex: 1; }
.cliente-row input:first-child { flex: 2; }
.cliente-row input:last-child  { flex: 1; min-width: 130px; }

.addr-group { display: flex; gap: var(--sp-8); flex: 1; }
.addr-group .via-ac-wrap   { flex: 1; }
.via-ac-wrap input          { width: 100%; }
.addr-group .citta-ac-wrap  { flex: 1; }
.citta-ac-wrap input        { width: 100%; }

.km-row { display: flex; gap: var(--sp-8); flex: 1; }
.km-row input { flex: 1; }

.btn-calc-km {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--sp-8) var(--sp-14);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: white; border: none; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: box-shadow var(--transition), transform var(--transition);
  box-shadow: 0 2px 8px var(--primary-a25);
}
.btn-calc-km:hover { box-shadow: 0 4px 14px var(--primary-a40); transform: translateY(-1px); }
.btn-calc-km:disabled { opacity: 0.55; cursor: default; transform: none; }

.radio-group { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.radio-group label {
  width: auto; display: flex; align-items: center; gap: var(--sp-6);
  cursor: pointer; font-size: 13px; color: var(--dark); font-weight: 500;
  padding: 7px var(--sp-14);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  user-select: none;
}
.radio-group label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-weight: 600;
}
.radio-group label:hover:not(:has(input:checked)) { border-color: var(--accent-light); }
.radio-group input { display: none; }

/* Articoli list */
.articles-search-wrap {
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  flex-shrink: 0;
}
.articles-search-wrap input[type=search] {
  width: 100%;
  padding: 7px var(--sp-12) 7px var(--sp-32);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--input-bg);
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.articles-search-wrap input[type=search]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-a15);
}

.cat-header {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  color: white;
  padding: var(--sp-8) var(--sp-14);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.article-row {
  display: flex;
  align-items: center;
  padding: 7px var(--sp-14);
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--transition);
  background: var(--surface-2);
}
.article-row:nth-child(even) { background: var(--surface); }
.article-row:hover { background: var(--warn-500); }

.art-name { flex: 1; font-size: 12.5px; color: var(--dark); }
.art-price {
  font-size: 12px; font-weight: 700; color: var(--primary);
  width: 68px; text-align: right; margin-right: var(--sp-12);
}

.qty-control { display: flex; align-items: center; gap: 5px; }

.qty-btn {
  width: 28px; height: 28px;
  border: none; border-radius: 6px; cursor: pointer;
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), filter var(--transition);
  line-height: 1;
}
.qty-btn:hover  { transform: scale(1.1); }
.qty-btn:active { transform: scale(.95); }
.qty-btn.minus  { background: var(--border); color: var(--mid); }
.qty-btn.plus   { background: var(--accent); color: white; box-shadow: 0 2px 6px var(--accent-a35); }

.qty-input {
  width: 40px; height: 28px;
  text-align: center;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  background: var(--input-bg); color: var(--dark);
  outline: none;
  transition: border-color var(--transition);
}
.qty-input:focus { border-color: var(--accent); }

/* ── Riepilogo panel ────────────────────────────────────────────── */
.riepilogo {
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  overflow: hidden; flex-shrink: 0;
}

.riepilogo-header {
  background: linear-gradient(135deg, var(--primary-deep), var(--primary));
  color: white;
  text-align: center;
  padding: var(--sp-12);
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
}

.riepilogo-body { padding: var(--sp-16); }

.riep-section-title {
  font-size: 10px; font-weight: 800; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: .8px;
  margin: var(--sp-16) 0 var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-6);
}
.riep-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.riep-section-title:first-child { margin-top: 0; }

.riep-row {
  display: flex; justify-content: space-between; align-items: center; padding: 3px 0;
}
.riep-row .riep-label { font-size: 12px; color: var(--gray); }
.riep-row .riep-value { font-size: 12px; color: var(--mid); font-weight: 600; }
.riep-row.bold .riep-label { font-size: 12.5px; font-weight: 700; color: var(--dark); }
.riep-row.bold .riep-value { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.riep-row.note .riep-label,
.riep-row.note .riep-value { font-size: 11px; color: var(--gray); }

.riep-sep {
  height: 1.5px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  margin: var(--sp-14) 0 var(--sp-10); border-radius: 1px;
}

.riep-totale-box {
  background: linear-gradient(135deg, var(--primary-deep), var(--primary));
  border-radius: var(--radius-sm);
  padding: var(--sp-14) var(--sp-16); margin: var(--sp-4) 0 var(--sp-10);
  text-align: center; box-shadow: var(--shadow-sm);
}
.riep-totale-label {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--luce-a75); margin-bottom: var(--sp-4);
}
.riep-totale-value {
  font-size: 26px; font-weight: 800; color: white; letter-spacing: -.5px;
}

.riep-margine {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-8) var(--sp-12); border-radius: var(--radius-sm); margin: var(--sp-8) 0;
}
.riep-margine .riep-label { font-size: 12px; font-weight: 700; }
.riep-margine .riep-value { font-size: 18px; font-weight: 800; }

.riep-km-warning {
  font-size: 11px; color: var(--bad-900); margin: var(--sp-4) 0; min-height: 16px;
  background: var(--bad-100); border-radius: 4px; padding: var(--sp-2) var(--sp-8); display: none;
}
.riep-km-warning.visible { display: block; }

.margine-toggle {
  width: 100%; margin-top: var(--sp-12); padding: 7px;
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--gray);
  font-size: 11px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  letter-spacing: .3px;
}
.margine-toggle:hover {
  border-color: var(--accent); color: var(--accent-dark);
  background: var(--accent-a06);
}

.riep-actions {
  padding: var(--sp-14); border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: var(--sp-8); background: var(--surface);
}
.riep-actions .btn { width: 100%; padding: 11px; font-size: 13px; }

/* ── ════════════════════════════════════════════════════════
   STORICO
   ════════════════════════════════════════════════════════ */
.toolbar {
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--border-soft);
  padding: var(--sp-12) var(--sp-20);
  display: flex; align-items: center; gap: var(--sp-12);
  flex-shrink: 0; box-shadow: var(--shadow-xs);
}
.toolbar label { font-size: 12px; font-weight: 600; color: var(--mid); }

.toolbar input[type=search] {
  padding: 7px var(--sp-12) 7px var(--sp-32);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--input-bg);
  width: 300px; font-size: 13px; font-family: inherit; outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center;
}
.toolbar input[type=search]:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a15);
}

.count-label { font-size: 11px; color: var(--gray); margin-left: auto; }

.table-wrap { flex: 1; overflow-y: auto; padding: var(--sp-16); }

table { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; }

thead tr {
  background: linear-gradient(90deg, var(--primary-deep), var(--primary));
  position: sticky; top: 0; z-index: 1;
}
thead th {
  padding: 11px var(--sp-14);
  text-align: left;
  font-size: 11px; font-weight: 700; color: white;
  letter-spacing: .3px; text-transform: uppercase; white-space: nowrap;
}
thead th.right  { text-align: right; }
thead th.center { text-align: center; }
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { background: var(--luce-a12); }

tbody tr {
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background var(--transition);
  background: var(--surface-2);
}
tbody tr:nth-child(even) { background: var(--surface); }
tbody tr:hover    { background: var(--warn-500); }
tbody tr.selected { background: var(--accent-a18) !important; }

tbody td { padding: 9px var(--sp-14); font-size: 12.5px; color: var(--dark); }
tbody td.right  { text-align: right; }
tbody td.center { text-align: center; }
tbody td.bold   { font-weight: 700; color: var(--primary); }

/* ── Checkbox pallino ──────────────────────────────────────────── */
.td-check { width: 36px; padding: 0 var(--sp-8) !important; }

.check-dot { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.check-dot input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.dot-visual {
  display: inline-block;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid var(--n-400);
  background: var(--n-100);
  transition: all .15s ease;
  flex-shrink: 0; position: relative;
}
.dot-visual::after {
  content: '';
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--n-100);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1);
}
.row-check:checked + .dot-visual,
#check-all:checked + .dot-visual {
  background: var(--primary); border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a15);
}
.row-check:checked + .dot-visual::after,
#check-all:checked + .dot-visual::after { transform: translate(-50%, -50%) scale(1); }

#check-all:indeterminate + .dot-visual { background: var(--accent); border-color: var(--accent); }
#check-all:indeterminate + .dot-visual::after { transform: translate(-50%, -50%) scale(1); }
.check-dot:hover .dot-visual { border-color: var(--primary); }

/* ── Stato filters ─────────────────────────────────────────────── */
.stato-filters {
  display: flex; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-20);
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.stato-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px var(--sp-14);
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--mid);
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.stato-filter-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.stato-filter-btn.active {
  background: var(--primary); border-color: var(--primary); color: var(--n-100);
  box-shadow: 0 2px 8px var(--primary-a25);
}

/* ── Stato badge ───────────────────────────────────────────────── */
.badge-stato {
  display: inline-block;
  padding: 3px var(--sp-10);
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  white-space: nowrap; cursor: default;
}
.badge-nessuno     { background: var(--n-200); color: var(--n-600); border: 1px solid var(--n-300); }
.badge-da-chiamare { background: var(--warn-300); color: var(--warn-1000); border: 1px solid var(--warn-800); }
.badge-servizio    { background: var(--info-200); color: var(--info-800); border: 1px solid var(--info-500); }
.badge-fatto       { background: var(--ok-300); color: var(--ok-1300); border: 1px solid var(--ok-600); }
.badge-reclamo     { background: var(--bad-100); color: var(--bad-900); border: 1px solid var(--bad-500); cursor: help; }

.badge-reclamo-link {
  font-size: 10px; font-weight: 600; color: var(--bad-900);
  background: var(--bad-100); border: 1px solid var(--bad-500);
  border-radius: 4px; padding: 1px 5px; margin-top: 3px;
  white-space: nowrap;
}

/* ── Btn stato & data ──────────────────────────────────────────── */
.btn-stato {
  background: linear-gradient(135deg, var(--info-600), var(--info-700));
  color: var(--n-100); border: none;
  padding: var(--sp-8) var(--sp-16); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
  box-shadow: 0 2px 8px var(--info-a30);
}
.btn-stato:hover { box-shadow: 0 4px 16px var(--info-a45); transform: translateY(-1px); }

.btn-data {
  background: linear-gradient(135deg, var(--ok-700), var(--ok-900));
  color: var(--n-100); border: none;
  padding: var(--sp-8) var(--sp-16); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
  box-shadow: 0 2px 8px var(--ok-a30);
}
.btn-data:hover { box-shadow: 0 4px 16px var(--ok-a45); transform: translateY(-1px); }

.btn-csv {
  background: linear-gradient(135deg, var(--ok-1200), var(--ok-800));
  color: var(--n-100); border: none;
  padding: 9px var(--sp-16); border-radius: var(--radius); font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: var(--sp-6);
  transition: box-shadow var(--transition), transform var(--transition);
  box-shadow: 0 2px 8px var(--okdeep-a30);
}
.btn-csv:hover { box-shadow: 0 4px 16px var(--okdeep-a45); transform: translateY(-1px); }

.storico-actions {
  border-top: 1.5px solid var(--border-soft);
  padding: var(--sp-12) var(--sp-20);
  display: flex; align-items: center; gap: var(--sp-10);
  background: var(--surface-2); flex-shrink: 0;
  box-shadow: 0 -2px 8px var(--ombra-a05);
}
.storico-actions .hint { margin-left: auto; font-size: 11px; color: var(--gray); font-style: italic; }

/* ── ════════════════════════════════════════════════════════
   LISTINO EDITOR
   ════════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  background: var(--surface-2);
  border-bottom: 2px solid var(--border-soft);
  padding: 0 var(--sp-20); gap: var(--sp-4);
  flex-shrink: 0; box-shadow: var(--shadow-xs);
}
.tab-btn {
  padding: var(--sp-12) 18px; border: none;
  background: transparent; font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--gray); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -var(--sp-2);
  transition: color var(--transition), border-color var(--transition);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab-btn:hover { color: var(--primary); background: var(--bg); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--accent); font-weight: 700; }

.tab-content { display: none; flex: 1; overflow-y: auto; padding: var(--sp-20) var(--sp-24); }
.tab-content.active { display: block; animation: viewIn .18s ease; }

.param-section-title {
  font-size: 13px; font-weight: 700; color: var(--primary);
  margin: 22px 0 var(--sp-8); padding-bottom: var(--sp-6);
  border-bottom: 2px solid var(--accent-light);
  display: flex; align-items: center; gap: var(--sp-8);
}
.param-section-title:first-child { margin-top: 0; }

.param-row {
  display: flex; align-items: center;
  padding: var(--sp-8) var(--sp-4); border-bottom: 1px solid var(--border-soft);
  transition: background var(--transition); border-radius: 4px;
}
.param-row:hover { background: var(--surface); }
.param-row label { flex: 1; font-size: 12.5px; color: var(--dark); }
.param-row input {
  width: 110px; padding: var(--sp-6) var(--sp-10); text-align: right;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--input-bg); font-size: 13px; font-weight: 700;
  font-family: inherit; color: var(--dark); outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.param-row input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a15);
}

.listino-actions {
  border-top: 1.5px solid var(--border-soft); padding: var(--sp-14) var(--sp-24);
  display: flex; gap: var(--sp-10); align-items: center;
  background: var(--surface-2); flex-shrink: 0;
  box-shadow: 0 -2px 8px var(--ombra-a05);
}
.listino-actions .hint { font-size: 11px; color: var(--gray); margin-left: auto; font-style: italic; }

.listino-art-row {
  display: flex; align-items: center;
  padding: 7px var(--sp-12); border-bottom: 1px solid var(--border-soft);
  transition: background var(--transition); border-radius: 4px;
}
.listino-art-row:hover { background: var(--surface); }
.listino-art-row:nth-child(even) { background: var(--bg); }
.listino-art-row:nth-child(even):hover { background: var(--warn-500); }

.listino-art-name { flex: 1; font-size: 12.5px; color: var(--dark); }
.listino-art-eur  { font-size: 12px; font-weight: 700; color: var(--accent-dark); margin-right: var(--sp-6); }
.listino-art-input {
  width: 90px; padding: 5px 9px; text-align: right;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--input-bg); font-size: 13px; font-weight: 700;
  font-family: inherit; color: var(--dark); outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.listino-art-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a15);
}

/* ── ════════════════════════════════════════════════════════
   INFO
   ════════════════════════════════════════════════════════ */
.info-body {
  flex: 1; min-height: 0;
  max-height: calc(100vh - 63px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-20);
}

.info-section {
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-xs);
  margin-bottom: var(--sp-16);
}
.info-section:last-child { margin-bottom: 0; }

.info-section-title {
  background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--primary);
  padding: var(--sp-12) 18px;
  border-bottom: 1.5px solid var(--border-soft);
  display: flex; align-items: center; gap: var(--sp-8);
}
.info-section-title::before {
  content: ''; width: 3px; height: 16px;
  background: var(--accent);
  border-radius: 2px;
}

.info-section-body { padding: var(--sp-16) 18px; }

.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-8) var(--sp-12); margin: 3px 0;
  border-radius: var(--radius-sm); background: var(--surface);
  transition: background var(--transition);
}
.stat-row:hover { background: var(--bg); }
.stat-row .stat-label { font-size: 13px; color: var(--mid); }
.stat-row .stat-value { font-size: 13px; font-weight: 700; color: var(--primary); }

.stats-mensili-title {
  margin: 18px 0 var(--sp-8); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--primary); opacity: .75;
}
.stats-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.stats-table th {
  padding: var(--sp-6) var(--sp-10); background: var(--primary); color: var(--n-100);
  font-weight: 600; font-size: 11.5px;
}
.stats-table td { padding: 5px var(--sp-10); border-bottom: 1px solid var(--border-soft); }
.stats-table tbody tr:hover { background: var(--bg); }
.stats-table tfoot td { border-top: 2px solid var(--primary); border-bottom: none; background: var(--surface-2); }
.stats-table .center { text-align: center; }
.stats-table .right  { text-align: right; }
.stats-mese-vuoto td { color: var(--gray); font-style: italic; }

.info-path {
  font-size: 12px; font-weight: 600; color: var(--primary);
  margin: var(--sp-8) 0 var(--sp-12); word-break: break-all;
  background: var(--bg); padding: var(--sp-8) var(--sp-12);
  border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
  font-family: 'SF Mono', 'Menlo', monospace;
}

.info-note {
  font-size: 11.5px; color: var(--gray); margin-top: var(--sp-10);
  font-style: italic; line-height: 1.5;
}
.info-btn-row { display: flex; gap: var(--sp-10); flex-wrap: wrap; margin-top: var(--sp-12); }

/* ── Articles locked notice ────────────────────────────── */
.art-locked-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-14);
  margin: var(--sp-16) 0;
  padding: var(--sp-16) 18px;
  background: var(--warn-100);
  border: 1.5px solid var(--warn-600);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.art-locked-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.art-locked-body { display: flex; flex-direction: column; gap: 5px; }
.art-locked-title { font-weight: 700; font-size: 14px; color: var(--warn-1200); }
.art-locked-desc  { font-size: 12.5px; color: var(--warn-1100); line-height: 1.5; }
.art-locked-desc strong { color: var(--warn-1200); }

/* ── ════════════════════════════════════════════════════════
   PASSWORD MODAL
   ════════════════════════════════════════════════════════ */
.pw-overlay {
  position: fixed; inset: 0;
  background: var(--ombra-a55);
  backdrop-filter: blur(5px);
  z-index: 2000; display: none;
  align-items: center; justify-content: center;

  /* Una finestra piu' alta dello schermo dev'essere raggiungibile: senza
     scorrimento qui, su un telefono i pulsanti in fondo restavano fuori e non
     c'era modo di arrivarci. Il padding tiene conto del notch. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(var(--sp-16), env(safe-area-inset-top)) var(--sp-16) max(var(--sp-16), env(safe-area-inset-bottom));
}
.pw-overlay.active { display: flex; }

.pw-modal {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 36px var(--sp-32) 28px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--border-soft);
  animation: pw-in .2s ease;

  /* `width` fissa batteva il `max-width` di .modal-wide, che quindi non
     allargava niente. Con la forma relativa la finestra si adatta allo
     schermo e le varianti tornano a funzionare. */
  width: 340px;
  max-width: 100%;

  /* Non si comprime sotto al proprio contenuto quando l'overlay scorre. */
  margin: auto;
  flex-shrink: 0;
}
@keyframes pw-in {
  from { transform: scale(.92) translateY(12px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.pw-modal-icon {
  font-size: 40px;
  margin-bottom: var(--sp-12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.pw-modal-title { font-size: 17px; font-weight: 800; color: var(--primary); margin-bottom: var(--sp-6); }
.pw-modal-sub { font-size: 12.5px; color: var(--gray); margin-bottom: var(--sp-20); line-height: 1.5; }

.pw-input {
  width: 100%; padding: var(--sp-10) var(--sp-14);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--input-bg); font-size: 15px; font-family: inherit;
  color: var(--dark); text-align: center; letter-spacing: 2px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.pw-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a15);
}

.pw-error {
  font-size: 12px; color: var(--bad-900); background: var(--bad-100);
  border-radius: 4px; padding: 5px var(--sp-10); margin-top: var(--sp-8);
  min-height: 0; display: none;
}
.pw-error:not(:empty) { display: block; }

.pw-modal-actions { display: flex; gap: var(--sp-10); margin-top: 18px; }
.pw-modal-actions .btn { flex: 1; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-7px); }
  40%, 80%  { transform: translateX(7px); }
}
.shake { animation: shake .42s ease; }

/* ── ════════════════════════════════════════════════════════
   STATO MODAL
   ════════════════════════════════════════════════════════ */
.stato-overlay {
  position: fixed; inset: 0;
  background: var(--ombra-a55);
  backdrop-filter: blur(5px);
  z-index: 2000; display: none;
  align-items: center; justify-content: center;
  padding: var(--sp-16);
}
.stato-overlay.active { display: flex; }

.stato-modal {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 28px var(--sp-24) var(--sp-24);
  width: 360px; max-width: 100%;
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--border-soft);
  animation: pw-in .2s ease;
}
.stato-modal-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--primary);
  margin-bottom: var(--sp-4);
}
.stato-modal-sub {
  font-size: 12px; color: var(--gray); margin-bottom: 18px;
}
.stato-opts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 9px; margin-bottom: var(--sp-16);
}
.stato-opt-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: var(--sp-14) var(--sp-10);
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  color: var(--mid); transition: border-color .15s, background .15s, color .15s;
  text-align: center;
}
.stato-opt-btn .ic { width: 22px; height: 22px; }
.stato-opt-btn:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dark); }
.stato-opt-btn.selected { border-color: var(--primary); background: var(--info-100); color: var(--primary); }
.stato-opt-btn.opt-reclamo.selected  { border-color: var(--bad-600); background: var(--bad-100); color: var(--bad-900); }
.stato-opt-btn.opt-da-chiamare.selected { border-color: var(--warn-900); background: var(--warn-300); color: var(--warn-1000); }
.stato-opt-btn.opt-fatto.selected   { border-color: var(--ok-1000); background: var(--ok-300); color: var(--ok-1300); }
.stato-opt-btn.opt-nessuno.selected { border-color: var(--n-500); background: var(--warn-200); color: var(--n-700); }

.stato-extra-wrap {
  overflow: hidden; max-height: 0;
  transition: max-height .25s ease, opacity .2s ease;
  opacity: 0;
}
.stato-extra-wrap.visible {
  max-height: 220px; opacity: 1;
}
.stato-extra-label {
  font-size: 12px; font-weight: 600; color: var(--mid); margin-bottom: var(--sp-6);
  display: block;
}
.stato-extra-textarea {
  width: 100%; padding: 9px var(--sp-12);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--input-bg); font-size: 13px; font-family: inherit;
  color: var(--dark); resize: none; height: 72px; outline: none;
  transition: border-color var(--transition);
  margin-bottom: var(--sp-14);
}
.stato-extra-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a15); }
.stato-extra-date {
  width: 100%; padding: 9px var(--sp-12);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--input-bg); font-size: 14px; font-family: inherit;
  color: var(--dark); outline: none;
  transition: border-color var(--transition);
  margin-bottom: var(--sp-14);
}
.stato-extra-date:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-a15); }
.stato-modal-actions { display: flex; gap: var(--sp-10); margin-top: var(--sp-6); }
.stato-modal-actions .btn { flex: 1; }

/* reclamo note in storico row */
.storico-reclamo-note {
  font-size: 11px; color: var(--bad-900); margin-top: 3px;
  font-style: italic; line-height: 1.3;
}

tr.month-sep { background: transparent !important; cursor: pointer; user-select: none; }
tr.month-sep td { padding: var(--sp-10) 0 var(--sp-4); border-bottom: none; }
tr.month-sep:hover .month-sep-inner { background: var(--accent-tint); }
.month-sep-inner {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-14) var(--sp-4) var(--sp-12);
  border-left: 3px solid var(--accent);
  background: var(--bg);
  transition: background var(--transition);
}
.month-sep-label {
  font-size: 11.5px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .06em;
}
.month-sep-count {
  font-size: 10.5px; color: var(--gray);
}

/* ── ════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════ */
#toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--dark);
  backdrop-filter: blur(10px);
  color: white; padding: var(--sp-10) var(--sp-24);
  border-radius: 24px; font-size: 13px; font-weight: 500;
  pointer-events: none; opacity: 0;
  transition: opacity .25s, transform .25s cubic-bezier(.34,1.3,.64,1);
  z-index: 9999; box-shadow: var(--shadow-lg);
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background: var(--bad-800); }

/* ── ════════════════════════════════════════════════════════
   SCROLLBAR
   ════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray); }

/* ── ════════════════════════════════════════════════════════
   ORGANIZZAZIONE / CALENDARIO
   ════════════════════════════════════════════════════════ */
.org-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-24) 28px var(--sp-40);
  background: var(--bg);
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  margin-bottom: var(--sp-20);
  padding: var(--sp-14) 18px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1.5px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
}

.cal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--primary-deep);
  min-width: 190px;
  text-align: center;
  letter-spacing: -.01em;
}

.btn-cal-nav {
  width: 34px; height: 34px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.btn-cal-nav:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); }

.btn-cal-today {
  margin-left: auto;
  padding: var(--sp-6) var(--sp-14);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--primary);
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background var(--transition), border-color var(--transition);
}
.btn-cal-today:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-6);
}

.cal-hdr-cell {
  text-align: center;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray);
  padding: var(--sp-6) 0 var(--sp-8);
}

.cal-cell {
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  min-height: 90px;
  padding: var(--sp-8) 7px var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cal-cell.cal-empty { background: transparent; border-color: transparent; pointer-events: none; }
.cal-cell.cal-has-event { border-color: var(--info-400); box-shadow: var(--shadow-xs); }
.cal-cell.cal-today {
  border-color: var(--accent);
  background: var(--warn-100);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.cal-day-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4); min-height: 18px;
}

.cal-day-num { font-size: 13px; font-weight: 700; color: var(--mid); line-height: 1; }
.cal-today .cal-day-num { color: var(--accent-dark); }

.cal-day-giro-btn {
  font-size: 11px; padding: var(--sp-2) var(--sp-6);
  border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; color: var(--primary);
  opacity: 0; transition: opacity var(--transition), background var(--transition), color var(--transition);
  line-height: 1; display: inline-flex; align-items: center; gap: 3px;
}
.cal-day-giro-btn .ic { width: 11px; height: 11px; }
.cal-cell:hover .cal-day-giro-btn { opacity: 1; }
.cal-day-giro-btn:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); }

.cal-events { display: flex; flex-direction: column; gap: 3px; flex: 1; }

.cal-ev {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 7px 3px 5px;
  border-radius: 6px;
  font-size: 11px; font-weight: 500; cursor: pointer;
  line-height: 1.3;
  transition: filter var(--transition), transform .1s ease;
  overflow: hidden; user-select: none;
}
.cal-ev:hover { filter: brightness(.93); transform: translateX(1px); }
.cal-ev:active { transform: scale(.97); }

.cal-ev-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex-shrink: 0; opacity: .4;
  transition: opacity var(--transition), background var(--transition);
}
.cal-ev-selected .cal-ev-dot { opacity: 1; background: currentColor; }
.cal-ev-selected {
  box-shadow: 0 0 0 2px currentColor, inset 0 0 0 100px var(--ombra-a07);
  z-index: 1;
}

.cal-ev-fidenza { background: var(--ok-200); color: var(--ok-1100); border: 1px solid var(--ok-500); }
.cal-ev-parma   { background: var(--bad-100); color: var(--bad-700); border: 1px solid var(--bad-400); }
.cal-ev-reggio  { background: var(--pink-100); color: var(--pink-300); border: 1px solid var(--pink-200); }

.cal-ev-fidenza.cal-ev-selected { box-shadow: 0 0 0 2px var(--ok-1100), inset 0 0 0 100px var(--ombra-a07); }
.cal-ev-parma.cal-ev-selected   { box-shadow: 0 0 0 2px var(--bad-700), inset 0 0 0 100px var(--ombra-a07); }
.cal-ev-reggio.cal-ev-selected  { box-shadow: 0 0 0 2px var(--pink-300), inset 0 0 0 100px var(--ombra-a07); }

.cal-ev-stato-icon { font-size: 10px; flex-shrink: 0; display: inline-flex; align-items: center; }
.cal-ev-stato-icon .ic { width: 10px; height: 10px; }
.cal-ev-num { font-size: 10px; opacity: .6; flex-shrink: 0; }
.cal-ev-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cal-ev-time {
  font-size: 10px; font-weight: 700; opacity: .85; flex-shrink: 0;
  background: var(--luce-a55); border-radius: 4px; padding: 0 var(--sp-4); letter-spacing: .03em;
}

/* ── Giro bar ──────────────────────────────────────────────── */
.giro-bar {
  display: none; align-items: center; gap: var(--sp-10);
  padding: 11px var(--sp-16);
  background: linear-gradient(135deg, var(--primary-deep), var(--primary));
  border-radius: var(--radius); margin-bottom: var(--sp-16);
  box-shadow: var(--shadow-sm); animation: viewIn .18s ease;
}
.giro-bar.active { display: flex; }
.giro-bar-icon { color: var(--luce-a85); display: flex; align-items: center; }
.giro-bar-icon .ic { width: 18px; height: 18px; }
#giro-bar-count { color: var(--luce-a90); font-size: 13px; font-weight: 600; flex: 1; }
.giro-bar .btn { padding: 7px var(--sp-14); font-size: 12px; }

/* Non pianificati */
.cal-nonpian { margin-top: 28px; }
.cal-nonpian-title {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; color: var(--primary-deep);
  margin-bottom: var(--sp-12); padding: var(--sp-10) var(--sp-16);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: var(--sp-8);
  box-shadow: var(--shadow-xs);
}
.cal-nonpian-title::before { content: ''; width: 4px; height: 14px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }
.cal-nonpian-count {
  margin-left: auto; font-family: var(--font-ui);
  font-size: 11px; font-weight: 700; color: var(--accent-dark);
  background: var(--accent-tint); border: 1px solid var(--accent-light);
  border-radius: 10px; padding: var(--sp-2) 9px;
}
.cal-nonpian-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.cal-np-item {
  display: flex; align-items: center; gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  cursor: pointer; font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
  user-select: none;
}
.cal-np-item:hover { border-color: var(--accent); box-shadow: var(--shadow-xs); }
.cal-np-item .cal-ev-dot { border-color: var(--warn-1000); color: var(--warn-1000); }
.cal-np-item.cal-ev-selected { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 2px var(--accent-glow); }
.cal-np-item.cal-ev-selected .cal-ev-dot { background: var(--warn-1000); opacity: 1; }
.cal-np-num     { font-size: 11px; color: var(--gray); font-weight: 700; flex-shrink: 0; }
.cal-np-cliente { font-weight: 600; color: var(--primary-deep); flex: 1; }
.cal-np-tel     { font-size: 11px; background: var(--warn-400); color: var(--warn-1000); border: 1px solid var(--warn-700); border-radius: 10px; padding: var(--sp-2) 9px; flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--sp-4); }
.cal-np-data    { font-size: 11px; color: var(--gray); flex-shrink: 0; }
.cal-np-date-btn {
  flex-shrink: 0; padding: var(--sp-4) var(--sp-8);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--primary);
  font-size: 11px; font-weight: 600; font-family: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-4);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.cal-np-date-btn .ic { width: 13px; height: 13px; }
.cal-np-date-btn:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark); }

.np-fidenza .cal-ev-dot { border-color: var(--ok-1100); color: var(--ok-1100); }
.np-fidenza.cal-ev-selected { border-color: var(--ok-1100); box-shadow: 0 0 0 2px var(--okmid-a25); }
.np-parma   .cal-ev-dot { border-color: var(--bad-700); color: var(--bad-700); }
.np-parma.cal-ev-selected   { border-color: var(--bad-700); box-shadow: 0 0 0 2px var(--bad-a25); }
.np-reggio  .cal-ev-dot { border-color: var(--pink-300); color: var(--pink-300); }
.np-reggio.cal-ev-selected  { border-color: var(--pink-300); box-shadow: 0 0 0 2px var(--pink-a25); }

.giro-leg-nome { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.giro-leg-branch {
  font-size: 10px; font-weight: 700; text-transform: capitalize;
  padding: 1px 7px; border-radius: 8px; flex-shrink: 0;
}
.giro-branch-fidenza       { background: var(--ok-200); color: var(--ok-1100); border: 1px solid var(--ok-500); }
.giro-branch-parma         { background: var(--bad-100); color: var(--bad-700); border: 1px solid var(--bad-400); }
.giro-branch-reggio_emilia { background: var(--pink-100); color: var(--pink-300); border: 1px solid var(--pink-200); }

/* ── Giro result modal ─────────────────────────────────── */
.giro-overlay {
  position: fixed; inset: 0;
  background: var(--velo-a55);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s ease;
}
.giro-overlay.active { opacity: 1; }

.giro-modal {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: min(540px, 94vw);
  max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(12px) scale(.97);
  transition: transform .24s cubic-bezier(.34,1.3,.64,1);
}
.giro-overlay.active .giro-modal { transform: translateY(0) scale(1); }

.giro-modal-header {
  background: linear-gradient(135deg, var(--primary-deep), var(--primary));
  color: white;
  padding: var(--sp-20) var(--sp-24) 18px; flex-shrink: 0;
}
.giro-modal-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-8); }
.giro-modal-title .ic { width: 20px; height: 20px; }
.giro-modal-sub   { font-size: 12px; opacity: .75; font-weight: 500; }

.giro-map-placeholder { height: 220px; flex-shrink: 0; }
.giro-map-float {
  position: fixed; z-index: 1001;
  width: min(540px, 94vw); height: 220px;
  background: var(--info-300); pointer-events: auto;
}
.giro-map-marker {
  width: 28px; height: 28px;
  background: var(--primary-deep); color: var(--n-100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  border: 2.5px solid var(--n-100);
  box-shadow: 0 2px 6px var(--ombra-a45); cursor: pointer;
}
.giro-map-depot { background: var(--accent); color: var(--primary-deep); font-size: 15px; }

.giro-modal-body { flex: 1; overflow-y: auto; padding: var(--sp-12) 0; }

.giro-leg {
  display: flex; align-items: flex-start; gap: var(--sp-14);
  padding: var(--sp-12) var(--sp-24);
  border-bottom: 1px solid var(--border-soft);
  cursor: default; transition: background var(--transition);
}
.giro-leg:last-child { border-bottom: none; }
.giro-leg:not(.giro-leg-start):not(.giro-leg-ritorno):hover { background: var(--info-100); cursor: pointer; }

.giro-leg-start   { background: var(--info-100); }
.giro-leg-ritorno { background: var(--ok-100); opacity: .85; }
.giro-leg-anchored { background: var(--warn-100); border-left: 3px solid var(--accent); padding-left: 21px; }

@keyframes giroFlash {
  0%   { background: var(--info-200); }
  100% { background: transparent; }
}
.giro-flash { animation: giroFlash .35s ease; }

.giro-leg-badge {
  width: 28px; height: 28px;
  border-radius: 50%; background: var(--primary); color: white;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.giro-leg-start   .giro-leg-badge,
.giro-leg-ritorno .giro-leg-badge { background: var(--accent-tint); color: var(--accent-dark); border: 1.5px solid var(--accent-light); font-size: 18px; }
.giro-leg-start   .giro-leg-badge .ic,
.giro-leg-ritorno .giro-leg-badge .ic { width: 16px; height: 16px; }

.giro-leg-info  { flex: 1; min-width: 0; }
.giro-leg-addr  { font-size: 11px; color: var(--gray); margin-top: var(--sp-2); }
.giro-leg-tel   { font-size: 11px; color: var(--warn-1000); margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-4); }
.giro-leg-tel .ic { width: 11px; height: 11px; }

.giro-time-input {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--input-bg); color: var(--primary-deep);
  font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 5px var(--sp-8); width: 82px; text-align: center;
  flex-shrink: 0; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  letter-spacing: .04em;
}
.giro-time-input:hover  { border-color: var(--accent); }
.giro-time-input:focus  { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.giro-time-input::-webkit-calendar-picker-indicator { opacity: .4; cursor: pointer; }
.giro-time-anchored {
  border-color: var(--accent); background: var(--warn-100);
  font-weight: 900; color: var(--accent-dark);
}

.giro-leg-dists  { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); flex-shrink: 0; }
.giro-dist-delta { font-size: 12px; font-weight: 700; color: var(--primary); }
.giro-dist-tot   { font-size: 10px; color: var(--gray); }

.giro-modal-footer {
  padding: var(--sp-14) var(--sp-20);
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: var(--sp-10);
  flex-shrink: 0; background: var(--surface);
}
.giro-footer-btns { display: flex; gap: var(--sp-8); margin-left: auto; }
.giro-footer-btns .btn { font-size: 12px; padding: 7px var(--sp-14); white-space: nowrap; }
.giro-total-box   { display: flex; flex-direction: column; gap: 1px; }
.giro-total-label { font-size: 10px; color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.giro-total-row   { display: flex; align-items: baseline; gap: var(--sp-8); }
.giro-total-val   { font-size: 20px; font-weight: 900; color: var(--primary-deep); }
.giro-total-time  { font-size: 12px; color: var(--gray); }

/* ── ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #view-calc .calc-body { grid-template-columns: 1fr; overflow-y: auto; }
  .calc-right { position: static; max-height: none; overflow-y: visible; }
  .menu-grid { grid-template-columns: 1fr; padding: var(--sp-20); }
  .filiale-grid { flex-direction: column; padding: 0 var(--sp-24) var(--sp-32); }
  .filiale-card { max-width: 100%; }
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 60px; padding: 5px var(--sp-4); }
  .cal-ev { padding: var(--sp-2) 5px; font-size: 10px; }
  .cal-title { min-width: 140px; font-size: 15px; }
  .org-body { padding: var(--sp-14) var(--sp-10) var(--sp-32); }
  .giro-map-placeholder, .giro-map-float { height: 170px; }

  #view-storico, #view-info, #view-organizzazione, #view-listino {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE  (≤ 600px) — solo telefono, desktop invariato
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── App header ── */
  .app-header { height: 50px; padding: 0 var(--sp-12); gap: var(--sp-8); }
  .app-header h1, .app-header h2 { font-size: 14px; }
  .btn-back { font-size: 11px; padding: 5px 9px; }
  .filiale-tag { font-size: 10px; padding: var(--sp-2) 7px; }
  .gold-bar { height: 2px; }

  /* ── Filiale ── */
  #view-filiale { justify-content: center; }
  .filiale-hero { padding: var(--sp-32) var(--sp-20) var(--sp-20); }
  .filiale-hero h1 { font-size: 28px; margin-bottom: var(--sp-6); }
  .filiale-hero .hero-sub { font-size: 12px; }
  .filiale-grid {
    flex-direction: column;
    padding: var(--sp-16) var(--sp-20) var(--sp-32);
    gap: var(--sp-12); flex: 0; align-items: stretch;
  }
  .filiale-card {
    max-width: 100%;
    display: flex; flex-direction: row; align-items: center;
    gap: var(--sp-14); padding: var(--sp-16) var(--sp-20); text-align: left;
  }
  .filiale-icon { font-size: 28px; margin-bottom: 0; flex-shrink: 0; }
  .filiale-nome { font-size: 16px; }

  /* ── Menu ── */
  .menu-hero { padding: 28px 18px var(--sp-20); }
  .menu-hero h1 { font-size: 26px; }
  .menu-hero .hero-sub { font-size: 12px; }
  .menu-filiale-wrap { margin-top: var(--sp-10); gap: var(--sp-8); flex-wrap: wrap; justify-content: center; }
  .menu-filiale-label { font-size: 13px; }
  .btn-cambia-filiale { font-size: 11px; padding: var(--sp-4) var(--sp-10); }
  .menu-grid { grid-template-columns: 1fr; padding: var(--sp-12); gap: var(--sp-8); }
  .menu-card { padding: var(--sp-14) var(--sp-16); }
  .card-icon-wrap { font-size: 22px; }
  .card-title { font-size: 13px; }
  .card-desc { font-size: 11px; }
  .menu-footer { font-size: 10px; padding: var(--sp-8) var(--sp-12); }

  /* ── Calcolatore ── */
  #view-calc { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #view-calc .calc-body { grid-template-columns: 1fr; overflow-y: visible; padding: var(--sp-8); gap: var(--sp-8); }
  .calc-right { position: static; max-height: none; overflow-y: visible; }
  .section-body { padding: var(--sp-10) var(--sp-12); }
  .section-title { font-size: 10px; padding: var(--sp-8) var(--sp-12); }

  .form-row { flex-direction: column; align-items: stretch; gap: var(--sp-4); margin-bottom: 9px; }
  .form-row label { width: auto; font-size: 11px; }
  .form-row input[type=text],
  .form-row input[type=number],
  .form-row input[type=tel] { width: 100%; font-size: 16px; padding: var(--sp-10) var(--sp-12); }
  .cliente-row { flex-direction: column; gap: var(--sp-6); }
  .addr-group { flex-direction: column; gap: var(--sp-6); }
  .km-row { display: flex; gap: var(--sp-8); }
  .km-row input { flex: 1; }
  .btn-calc-km { white-space: nowrap; font-size: 12px; }
  .radio-group { flex-direction: column; gap: var(--sp-8); }
  .radio-group label { font-size: 13px; display: flex; align-items: center; gap: var(--sp-6); }

  .article-row { padding: var(--sp-10) var(--sp-12); }
  .qty-btn { width: 34px; height: 34px; font-size: 18px; border-radius: 9px; }
  .qty-input { width: 44px; height: 34px; font-size: 16px; }
  .art-name { font-size: 12px; }
  .art-price { font-size: 11px; width: 52px; }
  .articles-search-wrap { padding: var(--sp-8) var(--sp-10); }

  .extra-row { flex-wrap: wrap; }
  .extra-desc { flex: 1 0 100%; }
  .extras-wrap { margin-top: var(--sp-8); }

  .riepilogo-body { padding: var(--sp-10) var(--sp-12); }
  .riep-totale-box { padding: var(--sp-12); }
  .riep-totale-value { font-size: 22px; }
  .riep-actions { padding: var(--sp-10) var(--sp-12); gap: var(--sp-6); }
  .riep-actions .btn { font-size: 12px; padding: var(--sp-10); }

  /* ── Storico ── */
  .toolbar { flex-wrap: wrap; padding: var(--sp-8) var(--sp-12); gap: var(--sp-6); }
  .toolbar input[type=search] { width: 100%; min-width: 0; }
  .toolbar label { display: none; }
  .count-label { font-size: 10px; }
  .stato-filters { padding: var(--sp-6) var(--sp-12); gap: 5px; flex-wrap: wrap; }
  .stato-filter-btn { font-size: 11px; padding: 5px 9px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 11px; min-width: 480px; }
  th, td { padding: 7px var(--sp-8); }
  th:nth-child(5), td:nth-child(5),
  th:nth-child(6), td:nth-child(6) { display: none; }
  .storico-actions { flex-wrap: wrap; padding: var(--sp-8) var(--sp-12); gap: var(--sp-6); }
  .storico-actions .btn { font-size: 11px; padding: 7px var(--sp-10); }
  .storico-actions .hint { display: none; }

  /* ── Info ── */
  .info-body { padding: var(--sp-12); gap: var(--sp-10); }
  .info-section-body { padding: var(--sp-10) var(--sp-12); }
  .info-btn-row { flex-direction: column; gap: var(--sp-8); }
  .info-btn-row .btn { width: 100%; }
  .info-path { font-size: 10px; }

  /* ── Calendario mobile ── */
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 50px; padding: var(--sp-4) 3px; }
  .cal-ev { padding: var(--sp-2) var(--sp-4); font-size: 9.5px; }
  .cal-title { min-width: 120px; font-size: 14px; }
  .org-body { padding: var(--sp-10) var(--sp-8) var(--sp-32); }
}

/* ── KPI Menu ──────────────────────────────────────────────────────────────── */
.menu-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-10); padding: var(--sp-16) var(--sp-24); margin-bottom: var(--sp-16);
}
.kpi-card {
  background: var(--surface-2); border: 1.5px solid var(--border-soft);
  border-radius: var(--radius); padding: var(--sp-12); text-align: center;
  box-shadow: var(--shadow-xs);
}
.kpi-val { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--primary); margin-bottom: 3px; }
.kpi-label { font-size: 11px; color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* ── Agenda Menu ───────────────────────────────────────────────────────────── */
.menu-agenda-wrap {
  padding: 0 var(--sp-24); margin-bottom: var(--sp-16);
}
.menu-agenda-section {
  background: var(--surface-2); border: 1.5px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--sp-12);
}
.agenda-header {
  background: var(--info-100); border-bottom: 1.5px solid var(--border-soft);
  padding: var(--sp-10) var(--sp-14); font-size: 12px; font-weight: 700;
  color: var(--primary); display: flex; align-items: center; gap: var(--sp-6);
}
.agenda-header .ic { width: 14px; height: 14px; }
.agenda-items { display: flex; flex-direction: column; }
.agenda-item {
  display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-10) var(--sp-14);
  border-bottom: 1px solid var(--border-soft); cursor: pointer;
  transition: background var(--transition);
}
.agenda-item:last-child { border-bottom: none; }
.agenda-item:hover { background: var(--accent-tint); }
.agenda-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.agenda-nome { flex: 1; font-weight: 500; font-size: 13px; color: var(--primary-deep); }
.agenda-hora { font-size: 11px; color: var(--gray); min-width: 45px; text-align: right; }

/* ── Anagrafica ────────────────────────────────────────────────────────────── */
.anagrafica-body { flex: 1; overflow-y: auto; padding: var(--sp-16) var(--sp-24) var(--sp-40); background: var(--bg); }
.anagrafica-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.anagrafica-item {
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-12) var(--sp-14);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-12);
}
.anagrafica-item:hover { border-color: var(--accent); box-shadow: var(--shadow-xs); }
.anagrafica-info { flex: 1; min-width: 0; }
.anagrafica-nome { font-weight: 600; font-size: 14px; color: var(--primary-deep); margin-bottom: 3px; }
.anagrafica-tel { font-size: 11px; color: var(--gray); margin-bottom: var(--sp-2); }
.anagrafica-addr { font-size: 11px; color: var(--mid); }
.anagrafica-actions { display: flex; gap: var(--sp-6); flex-shrink: 0; }
.anagrafica-actions .btn { padding: 5px var(--sp-10); font-size: 11px; }

/* ── Autocomplete ──────────────────────────────────────────────────────────── */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 180px; overflow-y: auto; z-index: 1000;
  box-shadow: 0 4px 12px var(--ombra-a12);
  display: none;
}
.autocomplete-list.visible { display: block; }
.autocomplete-item {
  padding: 9px var(--sp-12); font-size: 13px; color: var(--dark);
  cursor: pointer; border-bottom: 1px solid var(--border-soft);
  transition: background var(--transition);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.kb-sel { background: var(--accent-tint); }
.autocomplete-item.selected { background: var(--info-100); color: var(--primary); font-weight: 600; }
.ac-loading { color: var(--gray); font-size: 12px; display: flex; align-items: center; gap: var(--sp-6); }
.ac-via-nome { margin-left: var(--sp-6); font-weight: 500; }

@media (max-width: 700px) {
  .menu-kpi { grid-template-columns: 1fr 1fr; gap: var(--sp-8); padding: var(--sp-10) var(--sp-12); margin-bottom: var(--sp-10); }
  .kpi-val { font-size: 18px; }
  .kpi-label { font-size: 10px; }
}

/* ─── UTILITY ─────────────────────────────────────────────────────────────────
 *
 * Sostituiscono gli attributi `style="..."` che stavano nel markup: erano
 * l'unico motivo per cui la Content-Security-Policy doveva concedere
 * `'unsafe-inline'` su style-src. Assegnare `element.style` da JavaScript non è
 * bloccato dalla CSP — lo è solo l'attributo scritto nell'HTML.
 */

.u-hidden        { display: none !important; }
.u-block         { display: block; }
.u-center        { text-align: center; }
.u-left          { text-align: left; }
.u-muted         { color: var(--gray); }
.u-danger        { color: var(--bad-900); }
.u-grow          { flex: 1; }
.u-mt-8          { margin-top: var(--sp-8); }
.u-mt-10         { margin-top: var(--sp-10); }
.u-mt-12         { margin-top: var(--sp-12); }
.u-mt-14         { margin-top: var(--sp-14); }
.u-mt-16         { margin-top: var(--sp-16); }
.u-mt-24         { margin-top: var(--sp-24); }
.u-mb-0          { margin-bottom: 0; }
.u-mb-6          { margin-bottom: var(--sp-6); }

/* Varianti di dimensione dei pulsanti */
.btn-sm          { font-size: 12px; padding: 7px var(--sp-14); }
.btn-sm-tight    { font-size: 12px; padding: 7px 13px; }
.btn-xs          { font-size: 11px; padding: 5px 9px; }
.btn-xxs         { font-size: 11px; padding: var(--sp-4) var(--sp-10); }

/* Righe di azioni */
.action-row      { text-align: center; padding: var(--sp-20) 0 var(--sp-10); }
.action-row-wrap {
  text-align: center; padding: var(--sp-8) 0 var(--sp-16);
  display: flex; gap: var(--sp-10); justify-content: center; flex-wrap: wrap;
}
.modal-actions-spread {
  margin-top: var(--sp-14); flex-wrap: wrap; gap: var(--sp-8); justify-content: space-between;
}

/* Messaggi di stato dentro i contenitori che si popolano via JS */
.state-msg          { color: var(--gray); padding: var(--sp-20); text-align: center; }
.state-msg.is-error { color: var(--bad-900); }

/* Campi del calcolatore */
.field-col   { flex: 1; display: flex; flex-direction: column; gap: var(--sp-6); }
.field-w70   { width: 70px; flex: none; }
.field-w55   { width: 55px; flex: none; }

/* Righe di elenco per utenti e filiali */
.admin-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.admin-row-meta { font-size: 11px; color: var(--gray); margin-left: var(--sp-6); }

/* Riepilogo e informazioni */
.hint-text     { font-size: 13px; margin-bottom: var(--sp-6); }
.legend-text   { margin-top: var(--sp-12); font-size: 11px; color: var(--gray); line-height: 1.6; }
.badge-ar      { font-size: 10px; color: var(--accent); }
.cat-header.is-static { position: static; }

/* Larghezze delle modali */
.modal-narrow  { width: 420px; max-width: 100%; }
.modal-wide    { width: 560px; max-width: 100%; }
.modal-body-left { margin: var(--sp-12) 0; text-align: left; }

/* Netto stimato: la fascia di colore dipende dall'importo */
.riep-margine--bad  { background: var(--bad-100);  color: var(--bad-900); }
.riep-margine--warn { background: var(--warn-650); color: var(--warn-1250); }
.riep-margine--good { background: var(--ok-350); color: var(--ok-1350); }
.btn-sm-sq { font-size: 12px; padding: 7px; }
.u-ml-4    { margin-left: var(--sp-4); }
.u-ml-6    { margin-left: var(--sp-6); }

/* Trascinamento degli appuntamenti nel calendario */
.cal-ev { cursor: grab; }
.cal-ev-dragging { opacity: .45; cursor: grabbing; }
.cal-drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-tint); }

/* Campo percentuale della tariffa: stretto, sta in linea col resto. */
.field-pct { width: 5.5rem; }

/* Anteprima dei colori di un'insegna nell'elenco. Il colore arriva da
   JavaScript: un attributo style nel markup rimetterebbe in gioco
   'unsafe-inline' nella CSP. */
.insegna-swatch {
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  vertical-align: middle;
  margin-left: .25rem;
}

/* ── Editor del listino: voci e categorie modificabili ─────────────────────── */

.cat-header.listino-cat { display: flex; align-items: center; gap: .4rem; }
.listino-cat-nome {
  flex: 1;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .15rem .35rem;
}
.listino-cat-nome:hover, .listino-cat-nome:focus {
  background: var(--input-bg);
  border-color: var(--border);
}
.listino-art-nome {
  flex: 1;
  min-width: 0;
  font: inherit;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .25rem .4rem;
}
/* Una voce ritirata resta leggibile ma si distingue a colpo d'occhio da quelle
   in uso: non e' eliminata, e chi guarda deve capirlo senza spiegazioni. */
.listino-art-row.is-ritirata { opacity: .55; }
.listino-art-row.is-ritirata .listino-art-nome { text-decoration: line-through; }

/* ══════════════════════════════════════════════════════════════════════════════
   ADATTAMENTO AI DISPOSITIVI

   I punti vendita lavorano da computer, i montatori quasi sempre da telefono o
   tablet. Le regole qui sotto valgono per tutte le dimensioni; quelle
   specifiche stanno nei blocchi @media in fondo al file.
   ══════════════════════════════════════════════════════════════════════════════ */

/* L'altezza dinamica tiene conto delle barre del browser mobile, che compaiono
   e scompaiono scorrendo: con 100vh il fondo della schermata resta sotto la
   barra degli indirizzi e i pulsanti in basso diventano irraggiungibili.
   La riga con vh resta come ripiego per i browser che non conoscono dvh. */
.view { height: 100vh; height: 100dvh; }

/* Corpo scorrevole dell'area montatore. La vista e' `overflow: hidden`, quindi
   senza un contenitore che scorre tutto cio' che eccede l'altezza dello
   schermo — la lista dei lavori, sul telefono — era semplicemente irraggiungibile. */
.montatore-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(var(--sp-16), env(safe-area-inset-bottom));
}

/* Le righe di elenco stanno su una sola linea finche' ci stanno, poi vanno a
   capo invece di traboccare fuori dallo schermo. Valgono per i lavori del
   montatore, le insegne, le filiali e gli utenti. */
.admin-row { flex-wrap: wrap; gap: var(--sp-6); }
.admin-row > div { min-width: 0; }

/* Le barre di comandi vanno a capo a ogni dimensione: su un tablet in verticale
   ce n'e' gia' bisogno, non solo sul telefono. */
.toolbar { flex-wrap: wrap; }

/* Tabelle dentro alle finestre (fatturazione, registro, statistiche): scorrono
   per conto loro invece di allargare la finestra oltre lo schermo. */
.modal-body-left { max-width: 100%; overflow-x: auto; }
.modal-body-left table { min-width: 320px; }

/* I campi non escono mai dal proprio contenitore. */
input, select, textarea { max-width: 100%; }

/* ── Comandi su schermo tattile ──────────────────────────────────────────────
 *
 * `pointer: coarse` individua il dito, non la larghezza: prende il telefono e
 * il tablet, anche grande, e lascia stare un portatile con schermo piccolo.
 * Sotto i 44px un pulsante si sbaglia, ed e' la misura consigliata da Apple e
 * da Google. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-xs, .btn-xxs { min-height: 36px; padding: var(--sp-8) var(--sp-12); }
  .btn-sm, .btn-sm-tight { min-height: 40px; }

  .qty-btn { width: 44px; height: 44px; font-size: 20px; }
  .qty-input { height: 44px; width: 48px; font-size: 16px; }

  .stato-filter-btn { min-height: 38px; }
  .listino-art-nome, .listino-cat-nome, .listino-art-input { min-height: 40px; }

  /* L'area sensibile della casella di spunta e' piu' grande del disegno. */
  .check-dot { padding: var(--sp-6); margin: -var(--sp-6); }

  /* Il calendario: un evento va toccato, non centrato col mouse. */
  .cal-ev { min-height: 26px; display: flex; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABLET  (601 – 1024px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Il calcolatore resta su due colonne solo se ci stanno davvero. */
  #view-calc .calc-body { grid-template-columns: 1fr; overflow-y: auto; }
  .calc-right { position: static; max-height: none; overflow-y: visible; }

  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-kpi { grid-template-columns: repeat(2, 1fr); }

  /* Il calendario ci sta intero: e' il modo in cui si usa su un tablet. */
  .cal-cell { min-height: 72px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TELEFONO  (≤ 600px) — le schermate aggiunte dopo il primo adattamento
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Su iOS un campo con testo sotto i 16px fa ingrandire la pagina appena lo si
     tocca, e la pagina resta ingrandita: e' il difetto piu' fastidioso di un
     modulo su telefono.

     L'elenco ripete i selettori esatti delle regole che altrove rimpiccioliscono
     il testo dei campi. Non e' una ripetizione oziosa: una regola con classe
     batte `input` per specificita', quindi un override generico non avrebbe
     effetto su quasi nessuno di questi. A parita' di selettore vince chi viene
     dopo, ed e' questo. Il test `responsive` rifa' l'elenco e segnala chi manca.
     ── INIZIO CAMPI 16PX ── */
  input, select, textarea,
  .login-input,
  .form-row input[type=text],
  .form-row input[type=number],
  .form-row input[type=tel],
  .extra-desc,
  .extra-imp,
  .articles-search-wrap input[type=search],
  .qty-input,
  .toolbar input[type=search],
  .param-row input,
  .listino-art-input,
  .pw-input,
  .stato-extra-textarea,
  .stato-extra-date,
  .giro-time-input { font-size: 16px; }
  /* ── FINE CAMPI 16PX ── */

  /* ── Area montatore ── */
  .montatore-body .menu-agenda-wrap { padding-left: var(--sp-12); padding-right: var(--sp-12); }
  .montatore-body .menu-kpi { grid-template-columns: 1fr 1fr; padding: var(--sp-10) var(--sp-12); }
  #montatore-lavori { padding: 0 var(--sp-12); }

  /* La scelta della tariffa: etichetta, controllo e pulsante uno sotto l'altro,
     perche' affiancati non ci stanno. */
  .montatore-body .toolbar > label { width: 100%; }
  #mont-tariffa-modo { width: 100%; }
  #mont-tariffa-pct-wrap { display: flex; align-items: center; gap: var(--sp-6); }

  /* ── Editor del listino ── */
  .listino-art-row { flex-wrap: wrap; gap: var(--sp-6); }
  .listino-art-nome { flex: 1 0 100%; }
  .cat-header.listino-cat { flex-wrap: wrap; }
  .listino-cat-nome { flex: 1 0 60%; }

  /* ── Finestre ── */
  .pw-modal { padding: var(--sp-24) 18px var(--sp-20); }
  .pw-modal-title { font-size: 17px; }
  .pw-modal-sub { font-size: 12px; }
  .pw-modal-actions { flex-wrap: wrap; gap: var(--sp-8); }
  .pw-modal-actions .btn { flex: 1 1 auto; }
  .modal-actions-spread { flex-direction: column-reverse; }
  .modal-actions-spread .btn { width: 100%; }

  /* Il campo con l'indirizzo del calendario: va letto per intero, non tagliato. */
  #sync-cal-url { flex: 1 0 100%; font-size: 12px; }

  /* ── Insegne ── */
  .insegna-swatch { width: 1.4rem; height: 1.4rem; }
  #insegne-colori .admin-row { justify-content: space-between; }
  #insegne-filiali select { flex: 1 0 100%; }
}

/* Schermi molto stretti (iPhone SE e simili): l'ultimo margine da recuperare. */
@media (max-width: 380px) {
  .app-header { padding: 0 var(--sp-8); gap: var(--sp-6); }
  .menu-kpi { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .kpi-val { font-size: 16px; }
  .cal-cell { min-height: 44px; }
  .pw-modal { padding: var(--sp-20) var(--sp-14) var(--sp-16); }
}

/* Chi preferisce meno animazioni: la scelta e' di sistema, va rispettata. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Spostamento di un appuntamento col dito ─────────────────────────────────
 *
 * Il trascinamento HTML5 non funziona sugli schermi tattili: qui l'appuntamento
 * si "prende" con una pressione prolungata e si posa toccando un giorno. */

.cal-ev-in-mano {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: var(--shadow-md);
  transform: scale(1.04);
}

/* Mentre un appuntamento e' in mano, i giorni si distinguono come bersagli. */
.cal-in-spostamento .cal-cell[data-giorno] {
  outline: 1px dashed var(--accent);
  outline-offset: -3px;
}

.cal-avviso {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2500;
  display: flex; align-items: center; gap: var(--sp-12);
  background: var(--primary-deep);
  color: var(--n-100);
  padding: var(--sp-10) var(--sp-12) var(--sp-10) var(--sp-16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  max-width: calc(100vw - 24px);
}

/* Login e scelta filiale non hanno un contenitore interno che scorre: con la
   vista a `overflow: hidden`, su un telefono tenuto in orizzontale la scheda di
   accesso restava tagliata e non c'era modo di raggiungerla. */
/* Anche l'invito: e' una schermata d'ingresso come le altre, e con la tastiera
   aperta su un telefono il pulsante di conferma finisce sotto il bordo. */
#view-login, #view-filiale, #view-invito {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Logo dell'insegna accanto al nome. L'altezza e' fissa e la larghezza segue:
   i loghi hanno proporzioni molto diverse fra loro, e vincolare la larghezza
   li deformerebbe. */
.brand-logo { display: block; margin-bottom: .6rem; }
.brand-logo img {
  height: 42px;
  width: auto;
  max-width: min(220px, 60vw);
  object-fit: contain;
}
@media (max-width: 600px) {
  .brand-logo img { height: 32px; }
}

/* ── Area montatore ───────────────────────────────────────────────────────────
 *
 * La schermata è pensata per chi la apre in cantiere, col telefono in una mano:
 * prima il prossimo lavoro, poi la giornata, e le impostazioni fuori dai piedi.
 */

/* Il prossimo lavoro. Sta in alto e si distingue dal resto perché è l'unica
   cosa che serve nove volte su dieci. */
.mont-prossimo {
  margin: var(--sp-12) var(--sp-16);
  padding: var(--sp-16) 18px;
  background: var(--primary);
  color: var(--n-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.prossimo-etichetta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .85;
  margin-bottom: var(--sp-4);
}
.prossimo-cliente {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
}
.prossimo-dove { font-size: 13px; opacity: .9; margin-top: var(--sp-2); }
.prossimo-azioni { display: flex; gap: var(--sp-8); margin-top: var(--sp-12); flex-wrap: wrap; }

/* I comandi sulla selezione: compaiono solo quando servono, e restano in vista
   mentre si scorre, perché la selezione avviene scorrendo. */
.mont-azioni {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-16);
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.mont-avviso { margin: var(--sp-12) var(--sp-16); padding: var(--sp-12) var(--sp-14); background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius); }

/* ── Le giornate ── */

.lavoro-gruppo { margin: var(--sp-4) 0 18px; }
.lavoro-gruppo-titolo {
  display: flex; align-items: center; gap: var(--sp-8);
  margin: 0 var(--sp-16) var(--sp-8);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray);
}
.lavoro-gruppo-conta {
  background: var(--border-soft); color: var(--mid);
  border-radius: 999px; padding: 1px var(--sp-8); font-size: 11px;
}

/* ── La scheda di un lavoro ──
 *
 * Prima erano righe di amministrazione: cliente, numero, data, ora, città,
 * stato e compenso tutti sulla stessa riga, indistinguibili su un telefono.
 * Ora la gerarchia è esplicita — chi, dove, quando — e lo stato è un colore
 * sul bordo, che si legge senza leggere. */
.lavoro-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
  margin: 0 var(--sp-16) var(--sp-8);
  padding: var(--sp-12) var(--sp-14);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-left: 4px solid var(--gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.lavoro-da_chiamare { border-left-color: var(--accent); }
.lavoro-fatto       { border-left-color: var(--ok-1350); }
.lavoro-reclamo     { border-left-color: var(--bad-900); }

.lavoro-scelta { flex-shrink: 0; margin-top: var(--sp-2); }
.lavoro-corpo { flex: 1; min-width: 0; }
.lavoro-cliente { font-weight: 700; font-size: 15px; color: var(--primary-deep); }
.lavoro-dove { font-size: 13px; color: var(--mid); margin-top: 1px; }
.lavoro-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-10);
  margin-top: var(--sp-6); font-size: 11px; color: var(--gray);
}
.lavoro-meta a { color: var(--accent-dark); }

.lavoro-lato { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-4); flex-shrink: 0; }
.lavoro-stato { font-size: 11px; color: var(--gray); }
.lavoro-compenso { font-weight: 700; color: var(--primary); font-size: 14px; }

@media (max-width: 600px) {
  .mont-prossimo { margin: var(--sp-10) var(--sp-12); padding: var(--sp-14); }
  .prossimo-cliente { font-size: 18px; }
  .lavoro-card { margin: 0 var(--sp-12) var(--sp-8); padding: 11px var(--sp-12); }
  .lavoro-gruppo-titolo { margin-left: var(--sp-12); }
}

/* ── I prezzi del montatore ──────────────────────────────────────────────────
   Elenco lungo, compilato quasi sempre dal telefono: campi da 16px perche'
   sotto quella misura iOS ingrandisce la pagina a ogni tocco, e barra di
   salvataggio fissa in fondo perche' con decine di righe un pulsante in coda
   alla pagina non si trova. */

.prezzi-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-12);
}

.prezzi-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10);
  margin: 0 var(--sp-16) var(--sp-12);
}
.field-search {
  flex: 1 1 200px; min-width: 0;
  padding: var(--sp-10) var(--sp-12); font-size: 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--input-bg); color: var(--dark);
}
.field-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.prezzi-solo-mancanti {
  display: flex; align-items: center; gap: var(--sp-8);
  min-height: 44px;                     /* si preme col dito */
  font-size: 13px; color: var(--mid); cursor: pointer;
}
.prezzi-solo-mancanti input { width: 20px; height: 20px; accent-color: var(--accent); }

.prezzi-gruppo { margin: 0 0 18px; }
.prezzi-gruppo-titolo {
  margin: 0 var(--sp-16) var(--sp-8);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray);
}

.prezzo-riga {
  display: flex; align-items: center; gap: var(--sp-12);
  margin: 0 var(--sp-16) var(--sp-8); padding: var(--sp-10) var(--sp-12);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
}
/* Una voce senza prezzo proprio si vede a colpo d'occhio: e' il motivo per cui
   il montatore e' arrivato qui. */
.prezzo-riga-mancante { border-color: var(--warn-1250); background: var(--warn-650); }

.prezzo-voce { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.prezzo-nome { font-size: 14px; font-weight: 600; color: var(--dark); }
.prezzo-listino { font-size: 12px; color: var(--gray); }

.prezzo-campo { display: flex; align-items: center; gap: var(--sp-6); flex-shrink: 0; }
.field-prezzo {
  width: 88px; padding: var(--sp-10) var(--sp-8);
  font-size: 16px; font-weight: 600; text-align: right;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--input-bg); color: var(--dark);
}
.field-prezzo:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.prezzo-valuta { font-size: 14px; color: var(--gray); }

.prezzi-salva {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16) max(var(--sp-12), env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1.5px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* L'avviso che porta a compilarli ha un'azione dentro, quindi si dispone in
   colonna: il pulsante sotto al testo che lo spiega. */
.mont-avviso-azione { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }

/* La barra dei comandi dello storico segue la selezione, come nell'area
   montatore: senza selezione resta il suggerimento che spiega come iniziare. */
.storico-suggerimento {
  padding: var(--sp-10) var(--sp-16) max(var(--sp-10), env(safe-area-inset-bottom));
  border-top: 1.5px solid var(--border-soft);
  background: var(--surface);
}

/* ── Gli strumenti della filiale ─────────────────────────────────────────────
   Vivono nella finestra delle impostazioni, sullo schema dell'area montatore.
   Erano otto pulsanti in fondo alla pagina, sotto le schede: cose che si usano
   una volta al mese occupavano lo spazio e l'attenzione di quelle che si usano
   ogni giorno. */

.strumenti-gruppo { margin: 0 0 var(--sp-14); }

/* ── L'invito all'abbonamento ────────────────────────────────────────────────
   Era un paragrafo grigio con tre nomi di funzioni. Un elenco di nomi non fa
   decidere nessuno: ogni voce porta con se' il proprio perche'. */

.premium-invito {
  margin: var(--sp-12) var(--sp-16);
  padding: var(--sp-16);
  background: var(--surface-2);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.premium-invito-testa { display: flex; flex-direction: column; gap: var(--sp-6); }
.premium-bollo {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  align-self: flex-start;
  padding: var(--sp-4) var(--sp-10);
  background: var(--accent); color: var(--surface-2);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.premium-titolo {
  margin: 0; font-family: var(--font-display);
  font-size: 17px; font-weight: 700; color: var(--dark);
}

.premium-elenco { list-style: none; margin: var(--sp-12) 0; padding: 0; }
.premium-voce { display: flex; gap: var(--sp-10); padding: var(--sp-8) 0; align-items: flex-start; }
.premium-voce + .premium-voce { border-top: 1px solid var(--border-soft); }
.premium-voce-icona { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.premium-voce-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.premium-voce-testo strong { font-size: 14px; color: var(--dark); }
.premium-voce-perche { font-size: 12px; color: var(--mid); line-height: 1.45; }

.premium-invito-piede {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-10);
  padding-top: var(--sp-12);
  border-top: 1.5px solid var(--border-soft);
}
.premium-prezzo { font-size: 13px; color: var(--mid); }
.premium-prezzo strong { font-size: 18px; color: var(--dark); }

/* ── Profilo del montatore ───────────────────────────────────────────────── */

.profilo-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: max(var(--sp-16), env(safe-area-inset-bottom));
}

.profilo-intestazione { padding: var(--sp-16) var(--sp-16) var(--sp-8); }
.profilo-nome { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--dark); }
.profilo-filiali { font-size: 13px; color: var(--mid); margin-top: var(--sp-4); }

.profilo-sezione { margin: var(--sp-16) 0; }
.profilo-titolo {
  margin: 0 var(--sp-16) var(--sp-8);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray);
}
.profilo-riquadro {
  margin: 0 var(--sp-16); padding: var(--sp-12) var(--sp-14);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
}
.profilo-attenzione { color: var(--warn-1250); }

/* Le funzioni che non ha restano visibili: nasconderle sarebbe piu' pulito e
   servirebbe a nulla, perche' prima si scoprivano ricevendo un rifiuto. */
.funzione-riga {
  display: flex; align-items: flex-start; gap: var(--sp-10);
  margin: 0 var(--sp-16) var(--sp-6); padding: var(--sp-10) var(--sp-12);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
}
.funzione-bloccata { background: var(--surface); border-style: dashed; }
.funzione-bloccata .funzione-testo strong { color: var(--mid); }
.funzione-segno { flex-shrink: 0; margin-top: 2px; color: var(--ok-1000); }
.funzione-bloccata .funzione-segno { color: var(--gray); }
.funzione-testo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.funzione-testo strong { font-size: 14px; color: var(--dark); }
.funzione-desc { font-size: 12px; color: var(--mid); line-height: 1.45; }
.funzione-bollo {
  flex-shrink: 0; align-self: center;
  padding: 2px var(--sp-8);
  background: var(--accent-tint); color: var(--accent-dark);
  border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ── Misure e confronto di zona ──────────────────────────────────────────── */

.misure-griglia {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--sp-8); margin: 0 var(--sp-16) var(--sp-10);
}
.misura {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: var(--sp-10) var(--sp-8);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
}
.misura-valore { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--dark); }
.misura-nome { font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: .04em; }

.zona-riga {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8);
  margin: 0 var(--sp-16) var(--sp-4); padding: var(--sp-8) var(--sp-12);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
  font-size: 13px;
}
.zona-voce { font-weight: 600; color: var(--dark); min-width: 48px; }
.zona-media, .zona-mio { color: var(--mid); font-size: 12px; }
.zona-scarto { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--gray); }
.zona-sotto .zona-scarto { color: var(--warn-1250); }
.zona-sopra .zona-scarto { color: var(--ok-1000); }

/* ── Menu utente ─────────────────────────────────────────────────────────────
   Fisso sopra ogni schermata e definito una volta sola. Prima ogni vista aveva
   i propri comandi nell'intestazione, e ognuna ne aveva un insieme diverso. */

.barra-utente {
  position: fixed;
  top: max(var(--sp-10), env(safe-area-inset-top));
  right: var(--sp-16);
  z-index: 60;
}

.utente-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: var(--luce-a15);
  border: 1.5px solid var(--luce-a30);
  border-radius: 50%;
  color: var(--surface-2);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--transition), border-color var(--transition);
}
.utente-btn:hover { background: var(--luce-a25); }
.utente-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.utente-iniziali { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.utente-iniziali-grande {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--primary); color: var(--surface-2);
  border-radius: 50%; font-size: 15px;
}

/* Le tre righe dell'hamburger: solo sul telefono, dove il pannello e' a
   schermo intero e il gesto atteso e' quello. */
.utente-righe { display: none; flex-direction: column; gap: var(--sp-2); }
.utente-righe span { display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px; }

.menu-utente-velo {
  position: fixed; inset: 0; z-index: 70;
  display: none;
  background: var(--ombra-a45);
}
.menu-utente-velo.active { display: block; }

.menu-utente {
  position: absolute;
  top: max(var(--sp-10), env(safe-area-inset-top));
  right: var(--sp-16);
  width: min(320px, calc(100vw - var(--sp-32)));
  max-height: calc(100vh - var(--sp-32));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-8) 0 var(--sp-8);
}

.menu-utente-testa {
  display: flex; align-items: center; gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-14) var(--sp-12);
  border-bottom: 1.5px solid var(--border-soft);
}
.menu-utente-chi { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.menu-utente-chi strong { font-size: 14px; color: var(--dark); overflow-wrap: anywhere; }
/* Su computer non c'e': si chiude cliccando fuori, e un pulsante che ripete
   un gesto gia' disponibile e' solo un elemento in piu' da guardare. Sul
   telefono resta, perche' il pannello copre quasi tutto lo schermo e lo spazio
   in cui cliccare fuori si riduce a una striscia. */
.menu-utente-chiudi { display: none; flex-shrink: 0; }

.menu-utente-gruppo { padding: var(--sp-8) 0; }
.menu-utente-gruppo + .menu-utente-gruppo { border-top: 1.5px solid var(--border-soft); }
.menu-utente-titolo {
  margin: 0 var(--sp-14) var(--sp-4);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray);
}

.menu-utente-voce {
  display: flex; align-items: center; gap: var(--sp-10);
  width: 100%;
  min-height: 44px;                       /* si preme col dito */
  padding: var(--sp-8) var(--sp-14);
  background: none; border: none;
  font-size: 14px; color: var(--dark); text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}
.menu-utente-voce:hover { background: var(--accent-tint); }
.menu-utente-voce:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu-utente-icona { flex-shrink: 0; color: var(--gray); }
.menu-utente-pericolo { color: var(--bad-900); }
.menu-utente-pericolo .menu-utente-icona { color: var(--bad-900); }

@media (max-width: 600px) {
  /* Sul telefono il comando diventa un hamburger e il pannello prende tutto lo
     schermo: le voci sono molte e con il dito servono bersagli veri, non un
     elenco denso appeso a un angolo. */
  .utente-iniziali { display: none; }
  .utente-righe { display: flex; }

  .menu-utente {
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(300px, 88vw);
    max-height: none;
    border-radius: 0;
    border-width: 0 0 0 1.5px;
    padding-top: max(var(--sp-10), env(safe-area-inset-top));
    padding-bottom: max(var(--sp-16), env(safe-area-inset-bottom));
  }
  .menu-utente-voce { min-height: 48px; font-size: 15px; }
  .menu-utente-chiudi { display: inline-flex; }
}

/* Il collegamento alle mappe sulla scheda del lavoro. La "Navigazione" era
   elencata fra le funzioni comprese e non esisteva: nessun collegamento, da
   nessuna parte. */
.lavoro-mappa {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  min-height: 44px;                       /* si preme col dito, in cantiere */
  padding: var(--sp-4) var(--sp-8);
  color: var(--primary); text-decoration: none;
  font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm);
}
.lavoro-mappa:hover { background: var(--accent-tint); }

/* L'indicatore di ordinamento: era una freccia dentro al testo dell'intestazione,
   che cambia forma da un carattere tipografico all'altro e non si allinea con
   il resto della riga. */
.th-ordine { display: inline-flex; vertical-align: middle; margin-left: var(--sp-2); }
.th-ordine svg { width: 14px; height: 14px; }

/* ── Righe di modulo dentro le finestre ──────────────────────────────────────
   `.toolbar` e' una barra di pagina — sfondo proprio, bordo inferiore, ombra —
   e `.admin-row` e' una riga di elenco con `space-between`. Usate dentro una
   finestra producevano strisce grigie con l'ombra e campi che non si
   allargavano, distanziati a caso. Un modulo ha bisogno di altro. */

.campo-testo {
  flex: 1;
  min-width: 0;
  padding: var(--sp-10) var(--sp-12);
  font-size: 16px;                     /* sotto i 16 iOS ingrandisce la pagina */
  font-family: inherit;
  color: var(--dark);
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.campo-testo:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.campo-testo[readonly] { background: var(--surface); color: var(--mid); }

/* Un indirizzo lungo va letto, non ammirato: caratteri a larghezza fissa e
   corpo ridotto perche' ci stia senza troncarsi a meta'. */
.campo-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Invito montatore ────────────────────────────────────────────────────── */

.invito-corpo { display: flex; flex-direction: column; gap: var(--sp-20); }

.invito-blocco {
  padding: var(--sp-14);
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
}

.invito-titolo {
  margin: 0 0 var(--sp-10);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray);
}

.invito-riga { display: flex; align-items: center; gap: var(--sp-8); }
.invito-riga .btn { flex-shrink: 0; min-height: 44px; }

.invito-etichetta {
  display: block;
  margin-bottom: var(--sp-6);
  font-size: 13px; font-weight: 600; color: var(--mid);
}
.invito-etichetta-staccata { margin-top: var(--sp-16); }

/* Le note stanno sotto al campo che spiegano, vicine a quello e lontane dal
   successivo: prima avevano tutte lo stesso margine sopra e sotto, quindi
   sembravano appartenere a entrambi. */
.invito-nota {
  margin: var(--sp-6) 0 0;
  font-size: 12px; color: var(--gray); line-height: 1.5;
}

.invito-avviso {
  display: flex; align-items: flex-start; gap: var(--sp-10);
  margin: 0;
  padding: var(--sp-12) var(--sp-14);
  background: var(--warn-650);
  border: 1.5px solid var(--warn-700);
  border-radius: var(--radius);
  font-size: 13px; color: var(--warn-1250); line-height: 1.5;
}
.invito-avviso-icona { flex-shrink: 0; }

@media (max-width: 600px) {
  /* Con il campo e il pulsante affiancati, su uno schermo stretto il campo si
     riduce a pochi caratteri: vanno incolonnati. */
  .invito-riga { flex-direction: column; align-items: stretch; }
  .invito-riga .btn { width: 100%; }
}

/* ── Calendario del montatore ────────────────────────────────────────────────
   Non riusa quello dell'Organizzazione: quello e' intrecciato con trascinamento,
   giri e colori per filiale, che al montatore non servono. Qui serve vedere in
   che giorni si lavora e aprire un giorno. */

.mont-viste {
  display: flex; gap: var(--sp-8);
  margin: var(--sp-12) var(--sp-16) var(--sp-8);
}
.mont-vista-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-6);
  min-height: 44px;                      /* si preme col dito, in cantiere */
  padding: var(--sp-8) var(--sp-12);
  font-size: 13px; font-weight: 600; color: var(--mid);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.mont-vista-btn:hover { border-color: var(--accent); }
.mont-vista-btn.attiva {
  background: var(--primary); border-color: var(--primary); color: var(--surface-2);
}

.mont-calendario { margin: 0 var(--sp-16) var(--sp-16); }

.montcal-nav {
  display: flex; align-items: center; gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}
.montcal-titolo {
  flex: 1;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--dark);
}

.montcal-griglia {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-4);
}
.montcal-intestazione {
  padding: var(--sp-4) 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray); text-align: center;
}

.montcal-cella {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--sp-4);
  min-height: 48px;                      /* bersaglio pieno anche col dito */
  padding: var(--sp-6) var(--sp-2);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.montcal-cella:hover { border-color: var(--accent); }
.montcal-cella:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.montcal-vuota { background: none; border-color: transparent; cursor: default; }
.montcal-vuota:hover { border-color: transparent; }

.montcal-numero { font-size: 13px; font-weight: 600; color: var(--dark); line-height: 1; }
.montcal-oggi { border-color: var(--accent); }
.montcal-oggi .montcal-numero { color: var(--accent-dark); font-weight: 800; }

.montcal-con-lavori { background: var(--accent-tint); }
/* Un giorno tutto concluso non chiede piu' niente: si distingue da uno ancora
   da fare, che e' la differenza che conta guardando un mese. */
.montcal-conclusi { background: var(--ok-200); border-color: var(--ok-300); }

.montcal-scelto {
  background: var(--primary); border-color: var(--primary);
}
.montcal-scelto .montcal-numero { color: var(--surface-2); }

.montcal-segni { display: flex; align-items: center; gap: 2px; min-height: 6px; }
.montcal-punto {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
}
.montcal-punto-fatto { background: var(--ok-1000); }
.montcal-scelto .montcal-punto, .montcal-scelto .montcal-punto-fatto { background: var(--accent-light); }

.montcal-conta {
  font-size: 10px; font-weight: 700; color: var(--primary);
  line-height: 1;
}
.montcal-scelto .montcal-conta { color: var(--accent-light); }

.montcal-nota {
  margin: var(--sp-10) 0 0;
  font-size: 12px; color: var(--gray); line-height: 1.5;
}

/* ── Anagrafica del montatore ────────────────────────────────────────────────
   Un modulo lungo: la griglia lo tiene su due colonne dove c'e' spazio e su una
   sul telefono, senza che i campi corti — civico, CAP, provincia — occupino
   una riga intera per tre caratteri. */

.profilo-spiega {
  margin: 0 var(--sp-16) var(--sp-10);
  font-size: 13px; color: var(--mid); line-height: 1.5;
}

.anagrafica { margin: 0 var(--sp-16); }

.anagrafica-gruppo {
  margin: 0 0 var(--sp-14);
  padding: var(--sp-12) var(--sp-14) var(--sp-14);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
}
.anagrafica-legenda {
  padding: 0 var(--sp-6);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray);
}

.anagrafica-griglia {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-10);
}

.campo-etichettato {
  grid-column: span 3;
  display: flex; flex-direction: column; gap: var(--sp-4);
  font-size: 13px; font-weight: 600; color: var(--mid);
}
.campo-intero  { grid-column: span 6; }

.campo-nota { font-size: 11px; font-weight: 400; color: var(--gray); line-height: 1.5; }

.anagrafica-piede {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-10);
}
.anagrafica-piede .legend-text { margin-top: 0; flex: 1; min-width: 0; }

@media (max-width: 600px) {
  /* Una colonna sola: affiancare due campi su uno schermo stretto li riduce
     entrambi a poco piu' di un'etichetta. */
  .campo-etichettato { grid-column: span 6; }
}

/* ── Il piano nel menu utente ────────────────────────────────────────────── */

.menu-piano {
  display: flex; flex-direction: column; gap: var(--sp-8);
  margin: var(--sp-8) var(--sp-8) 0;
  padding: var(--sp-12);
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
}
.menu-piano-testa { display: flex; align-items: center; gap: var(--sp-8); }
.menu-piano-nome { font-size: 13px; font-weight: 700; color: var(--dark); }
.menu-piano-bollo {
  padding: 2px var(--sp-8);
  background: var(--ok-200); color: var(--ok-1000);
  border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.menu-piano-btn { width: 100%; min-height: 40px; }

/* ── Confronto fra i piani ───────────────────────────────────────────────────
   Due colonne affiancate invece di un elenco di cio' che manca: quello che fa
   decidere e' vedere il confine fra le due cose. La colonna del piano che si ha
   gia' resta visibile e segnata, cosi' si capisce anche cosa non si perde. */

.piani-modal { max-width: 720px; }

.piani {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12);
  margin: var(--sp-12) 0;
  text-align: left;
}

.piano {
  display: flex; flex-direction: column;
  padding: var(--sp-14);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
}
.piano-premium { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.piano-attuale { background: var(--surface); }

.piano-testa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-6);
  padding-bottom: var(--sp-10);
  margin-bottom: var(--sp-10);
  border-bottom: 1.5px solid var(--border-soft);
}
.piano-nome {
  font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--dark);
}
.piano-tuo {
  padding: 2px var(--sp-6);
  background: var(--border-soft); color: var(--mid);
  border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.piano-prezzo {
  margin-left: auto;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--dark);
}
.piano-periodo { font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: var(--gray); }

.piano-elenco { list-style: none; margin: 0; padding: 0; flex: 1; }
.piano-voce { display: flex; gap: var(--sp-8); padding: var(--sp-6) 0; align-items: flex-start; }
.piano-segno { flex-shrink: 0; color: var(--ok-1000); }
.piano-voce-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.piano-voce-testo strong { font-size: 13px; font-weight: 600; color: var(--dark); }
.piano-voce-perche { font-size: 11px; color: var(--mid); line-height: 1.45; }

/* Quello che manca si vede, ma non si legge per primo: e' un confine, non un
   rimprovero. */
.piano-voce-esclusa .piano-segno { color: var(--border); }
.piano-voce-esclusa .piano-voce-testo strong { color: var(--gray); font-weight: 400; }

.piano-voce-tutto { border-bottom: 1px solid var(--border-soft); padding-bottom: var(--sp-8); }

.piano-azione { margin-top: var(--sp-12); }
.piano-azione .btn { width: 100%; min-height: 44px; }

@media (max-width: 600px) {
  /* Affiancate su uno schermo stretto le due colonne diventano illeggibili:
     incolonnate, e il premium per primo, che e' quello che si sta valutando. */
  .piani { grid-template-columns: 1fr; }
  .piano-premium { order: -1; }
}

/* ── Elenchi a discesa ───────────────────────────────────────────────────────
   Non ne esisteva nessuno stile: ogni `select` del sistema rendeva con
   l'aspetto di sistema — bordo grigio squadrato, altezza diversa, nessuna
   messa a fuoco riconoscibile — accanto a campi di testo che invece hanno
   bordo tondo, fondo crema e alone dorato. Erano l'unico elemento che non
   apparteneva al resto.

   `appearance: none` toglie anche la freccia del sistema, che va rimessa: e'
   l'unica cosa che distingue un elenco a discesa da un campo di testo, e senza
   nessuno capisce che si puo' aprire. */

select {
  appearance: none;
  -webkit-appearance: none;
  /* Larghezza e corpo li decide il contesto, non questa regola.
     Uniformare l'aspetto — bordo, angoli, freccia, messa a fuoco — e' giusto;
     uniformare anche la dimensione no: dentro una riga di modulo, accanto a
     campi da 13px, una select da 16px con dieci pixel di riempimento sembra
     un elemento di un'altra schermata. */
  width: auto;
  max-width: 100%;
  padding: var(--sp-8) var(--sp-24) var(--sp-8) var(--sp-10);
  font-family: inherit;
  font-size: 13px;
  color: var(--dark);
  background-color: var(--input-bg);
  /* La freccia e' disegnata qui invece che con un elemento accanto: un `select`
     non puo' avere figli suoi, e aggiungere un contenitore attorno a ognuno
     avrebbe voluto dire toccare tutti i punti in cui compare. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 10 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-8) center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

select:hover { border-color: var(--accent-dark); }

select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

select:disabled {
  background-color: var(--surface);
  color: var(--gray);
  cursor: not-allowed;
}

/* I contesti che vogliono una select larga quanto la riga lo chiedono, invece
   di ereditarlo da una regola generica che poi va disfatta altrove. */
.admin-row select        { flex: 1; min-width: 0; }
.form-row select         { flex: 1; min-width: 0; border-radius: var(--radius-sm); }
.anagrafica select,
#mont-impostazioni-overlay select,
.invito-riga select      { width: 100%; }

/* In un modulo la select segue il riempimento dei campi accanto: e' la riga a
   dettare la misura, non l'elemento. */
.form-row select { padding: var(--sp-8) var(--sp-24) var(--sp-8) var(--sp-12); }

/* ── Le impostazioni del montatore ───────────────────────────────────────────
   Riusavano `.admin-row`, che e' una riga di elenco con `space-between`:
   etichetta e campo finivano ai due lati opposti, con il vuoto in mezzo. */

#mont-impostazioni-overlay .admin-row {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--sp-6);
  padding: 0 0 var(--sp-12);
  border-bottom: none;
}
#mont-impostazioni-overlay .admin-row label {
  font-size: 13px; font-weight: 600; color: var(--mid);
}
/* La percentuale e' un numero di due cifre: un campo largo quanto la riga
   suggerirebbe che ci vada altro. */
#mont-impostazioni-overlay .field-pct { max-width: 120px; flex: 0 0 auto; }

/* Il recapito del cliente sulla scheda del lavoro: chi va sul posto deve poter
   chiamare senza passare dalla filiale, che altrimenti fa da centralino. */
.lavoro-tel {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  min-height: 44px;                       /* si preme col dito, in cantiere */
  margin-top: var(--sp-2);
  color: var(--primary); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.lavoro-tel:hover { text-decoration: underline; }

/* ── Informativa privacy ─────────────────────────────────────────────────────
   Un documento da leggere, non una schermata da usare: misura del testo piu'
   generosa, righe piu' distanziate e larghezza limitata. Oltre una certa
   lunghezza di riga l'occhio perde il capo della successiva, ed e' il motivo
   per cui i libri sono stretti. */

.privacy-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-24) var(--sp-16) max(var(--sp-40), env(safe-area-inset-bottom));
  background: var(--bg);
}

.privacy-foglio {
  max-width: 68ch;
  margin: 0 auto;
  padding: var(--sp-24);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.privacy-titolo {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--dark);
  line-height: 1.25;
}
.privacy-data { margin: 0 0 var(--sp-24); font-size: 12px; color: var(--gray); }

.privacy-sezione { margin-bottom: var(--sp-24); }
.privacy-sezione-titolo {
  margin: 0 0 var(--sp-8);
  font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--primary);
}
.privacy-sezione p {
  margin: 0 0 var(--sp-10);
  font-size: 14px; line-height: 1.65; color: var(--mid);
}
.privacy-sezione p:last-child { margin-bottom: 0; }

/* I punti da completare devono saltare all'occhio: e' cosi' che un documento
   non finisce pubblicato con dentro "[RAGIONE SOCIALE]". */
.privacy-buco {
  background: var(--warn-300); color: var(--warn-1200);
  padding: 0 var(--sp-4); border-radius: var(--radius-sm);
  font-weight: 600;
}

.privacy-incompleta {
  margin-bottom: var(--sp-20); padding: var(--sp-12) var(--sp-14);
  background: var(--warn-650);
  border: 1.5px solid var(--warn-700);
  border-radius: var(--radius);
  font-size: 13px; color: var(--warn-1250); line-height: 1.55;
}

.privacy-errore { color: var(--bad-900); font-size: 14px; }

/* Il collegamento sotto al modulo di accesso: e' il momento in cui uno decide
   se usare il sistema, ed e' li' che deve poter leggere cosa ne facciamo. */
.login-privacy { margin: var(--sp-16) 0 0; text-align: center; }

.collegamento {
  padding: var(--sp-8);
  background: none; border: none;
  font-family: inherit; font-size: 12px; color: var(--mid);
  text-decoration: underline; cursor: pointer;
}
.collegamento:hover { color: var(--primary); }

/* ── Modifica dell'informativa ───────────────────────────────────────────── */

.privacy-mod-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-16);
}
.privacy-mod-guida {
  max-width: 80ch;
  margin-bottom: var(--sp-16);
  color: var(--mid); line-height: 1.6;
}
.privacy-mod-guida code {
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent-tint); border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}

.privacy-mod-sezione {
  max-width: 80ch;
  margin-bottom: var(--sp-16); padding: var(--sp-14);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
}
.privacy-mod-testa { display: flex; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.privacy-mod-titolo { font-weight: 600; }
.privacy-mod-testa .btn { flex-shrink: 0; min-height: 44px; }

/* Nessun ritocco al corpo del testo: .campo-testo lo tiene a 16px, e sotto
   quella misura iOS ingrandisce la pagina appena si tocca il campo. In un
   editor di documento 16px si legge bene comunque. */
.privacy-mod-corpo { width: 100%; resize: vertical; line-height: 1.6; }

/* La barra di salvataggio resta in fondo: su un documento lungo un pulsante in
   coda alla pagina non si trova, e le modifiche restano non salvate. */
.privacy-mod-salva {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16) max(var(--sp-12), env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1.5px solid var(--border);
  box-shadow: var(--shadow-md);
}
.privacy-mod-salva .legend-text { margin-top: 0; flex: 1; min-width: 0; }
.privacy-mod-incompleta { color: var(--warn-1250); font-weight: 600; }

/* ── Area amministrativa ─────────────────────────────────────────────────────
   Due livelli distinti. Quello che riguarda il sistema non e' confrontabile con
   un punto vendita, e tenerli sullo stesso piano obbligava a cercare in un
   elenco unico dove le voci non parlavano della stessa cosa. */

.admin-area-body,
.admin-filiale-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-16) 0 max(var(--sp-24), env(safe-area-inset-bottom));
}

.admin-sezione { margin-bottom: var(--sp-24); }
.admin-sezione-titolo {
  margin: 0 var(--sp-16) var(--sp-10);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray);
}

.admin-schede {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-10);
  padding: 0 var(--sp-16);
}

.admin-scheda {
  display: flex; align-items: flex-start; gap: var(--sp-10);
  padding: var(--sp-14);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
  text-align: left; font-family: inherit; cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.admin-scheda:hover { border-color: var(--accent); box-shadow: var(--shadow-xs); }
.admin-scheda:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.admin-scheda-icona { flex-shrink: 0; color: var(--accent-dark); }
.admin-scheda-testo { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.admin-scheda-testo strong { font-size: 14px; color: var(--dark); }
.admin-scheda-desc { font-size: 12px; color: var(--mid); line-height: 1.45; }
.admin-scheda-dato { font-size: 11px; color: var(--gray); }

/* Le filiali sono un elenco: di un punto vendita interessa quanti preventivi ha
   fatto e quando, e su una mattonella quei numeri non ci stanno. */
.admin-filiali { padding: 0 var(--sp-16); }

.admin-filiale-riga {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8) var(--sp-16);
  width: 100%;
  min-height: 44px;
  margin-bottom: var(--sp-6); padding: var(--sp-12) var(--sp-14);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
  text-align: left; font-family: inherit; cursor: pointer;
  transition: border-color var(--transition);
}
.admin-filiale-riga:hover { border-color: var(--accent); }
.admin-filiale-riga:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.admin-filiale-capo { display: flex; align-items: baseline; gap: var(--sp-8); min-width: 140px; }
.admin-filiale-capo strong { font-size: 15px; color: var(--dark); }
.admin-filiale-insegna {
  padding: var(--sp-2) var(--sp-6);
  background: var(--accent-tint); color: var(--accent-dark);
  border-radius: 999px; font-size: 10px; font-weight: 700;
}

.admin-filiale-numeri { display: flex; flex-wrap: wrap; gap: var(--sp-12); font-size: 12px; color: var(--mid); }
.admin-filiale-ultimo { margin-left: auto; font-size: 12px; color: var(--gray); }

.admin-elenco-riga {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8);
  margin: 0 var(--sp-16) var(--sp-4); padding: var(--sp-8) var(--sp-12);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
  font-size: 13px;
}
.admin-elenco-riga strong { color: var(--dark); }
.admin-elenco-nota { margin-left: auto; font-size: 12px; color: var(--gray); }

@media (max-width: 600px) {
  /* Su uno schermo stretto i numeri vanno sotto al nome invece di comprimerlo. */
  .admin-filiale-riga { flex-direction: column; align-items: stretch; }
  .admin-filiale-ultimo { margin-left: 0; }
}

/* ── Pagine di amministrazione ───────────────────────────────────────────────
   Erano finestre. Un elenco che cresce con i clienti, dentro a una finestra, si
   scorre due volte: il riquadro dentro alla pagina, e la pagina che non scorre.
   E i colori di un'insegna si giudicano con lo spazio attorno, non in un
   riquadro stretto sovrapposto al resto. */

.admin-pagina-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-16) var(--sp-16) max(var(--sp-24), env(safe-area-inset-bottom));
}

/* Una colonna limitata: elenchi e moduli si leggono male quando arrivano a
   toccare i due bordi di uno schermo largo. */
.admin-pagina-colonna { max-width: 860px; margin: 0 auto; }

.admin-modulo {
  margin: var(--sp-16) 0;
  padding: var(--sp-14);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
}
.admin-modulo-titolo {
  margin: 0 0 var(--sp-10);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray);
}

/* Dentro alle pagine le righe di elenco non hanno piu' il bordo inferiore delle
   finestre: qui sono schede staccate, e due bordi uno sull'altro fanno una
   riga doppia. */
.admin-pagina-colonna .admin-row {
  margin-bottom: var(--sp-6); padding: var(--sp-10) var(--sp-12);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
}

/* ── Abbonamento ─────────────────────────────────────────────────────────────
   Prima l'unica cosa che un montatore poteva fare del proprio abbonamento era
   attivarlo: per disdire, per capire perche' le funzioni si erano spente, o per
   sapere quanto aveva pagato, doveva scrivere a qualcuno. */

.abb-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-16) var(--sp-16) max(var(--sp-24), env(safe-area-inset-bottom));
}
.abb-colonna { max-width: 720px; margin: 0 auto; }

.abb-situazione {
  display: flex; align-items: flex-start; gap: var(--sp-10);
  margin-bottom: var(--sp-12); padding: var(--sp-12) var(--sp-14);
  background: var(--ok-100);
  border: 1.5px solid var(--ok-300); border-radius: var(--radius);
  font-size: 14px; color: var(--ok-1300); line-height: 1.5;
}
/* Quando c'e' da fare qualcosa il riquadro cambia colore: un pagamento fallito
   letto come una conferma e' un pagamento fallito che nessuno risolve. */
.abb-situazione-attenzione {
  background: var(--warn-650); border-color: var(--warn-700); color: var(--warn-1250);
}
.abb-situazione-icona { flex-shrink: 0; }

.fattura-riga {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8) var(--sp-12);
  margin-bottom: var(--sp-6); padding: var(--sp-10) var(--sp-12);
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft); border-radius: var(--radius);
  font-size: 13px;
}
.fattura-non-pagata { border-color: var(--warn-700); background: var(--warn-100); }

.fattura-data    { font-weight: 600; color: var(--dark); min-width: 90px; }
.fattura-numero  { font-size: 12px; color: var(--gray); }
.fattura-periodo { font-size: 12px; color: var(--mid); }
.fattura-importo { margin-left: auto; font-weight: 700; color: var(--dark); }
.fattura-stato   { font-size: 12px; color: var(--mid); }

.fattura-pdf {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  min-height: 44px;                       /* si preme col dito */
  padding: 0 var(--sp-8);
  color: var(--primary); text-decoration: none; font-weight: 600; font-size: 12px;
}
.fattura-pdf:hover { text-decoration: underline; }

@media (max-width: 600px) {
  /* L'importo va a capo con il resto invece di restare appeso a destra. */
  .fattura-importo { margin-left: 0; }
}