/* ═══════════════════════════════════════════════════════════════
   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:  rgba(200,160,74,.25);
  --navy:         #1a3d5c;
  --bg:           #f0ece0;
  --surface:      #faf8f2;
  --surface-2:    #fff;
  --dark:         #1e1e1e;
  --mid:          #4a4a4a;
  --gray:         #8a8a8a;
  --border:       #ddd8cc;
  --border-soft:  #eae6dc;
  --input-bg:     #fffef8;
  --good-bg: #d4edda; --good-fg: #145a25;
  --warn-bg: #fff3cd; --warn-fg: #7a5800;
  --bad-bg:  #fde8e8; --bad-fg:  #8b1a1a;

  --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;
  --radius-xl: 24px;

  --transition: .18s ease;
  --transition-slow: .32s cubic-bezier(.25,.8,.25,1);

  --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;
}

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 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(26,61,92,.35);
  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 rgba(200,160,74,.40);
}
.btn-gold:hover { box-shadow: 0 4px 14px rgba(200,160,74,.50); }

.btn-navy {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: white;
  box-shadow: 0 2px 8px rgba(26,61,92,.30);
}
.btn-navy:hover { box-shadow: 0 4px 14px rgba(26,61,92,.40); }

.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-bg);
  color: var(--bad-fg);
  border: 1.5px solid #f5c6cb;
}
.btn-danger:hover { background: #f8d5d5; }

.btn-green { background: #e8f5e9; color: #2e7d32; border: 1.5px solid #a5d6a7; }
.btn-green:hover { background: #c8e6c9; }

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

.btn-back {
  background: rgba(255,255,255,.15);
  color: white;
  border: 1.5px solid rgba(255,255,255,.3);
  padding: 7px 14px;
  font-size: 12px;
  backdrop-filter: blur(4px);
}
.btn-back:hover { background: rgba(255,255,255,.25); }

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

.filiale-hero {
  color: white;
  text-align: center;
  padding: 64px 24px 48px;
  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: 8px;
  position: relative;
}
.filiale-hero .hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,.78);
  position: relative;
}

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

.filiale-card {
  background: rgba(255,255,255,.11);
  border: 2px solid rgba(255,255,255,.22);
  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: rgba(255,255,255,.2);
  border-color: var(--accent);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.filiale-card:active { transform: translateY(-2px); }

.filiale-icon { font-size: 42px; margin-bottom: 16px; 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: 24px;
}
.login-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(26,61,92,.12);
}
.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: 6px;
}
.login-input {
  width: 100%;
  padding: 11px 14px;
  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-fg);
  font-size: 13px;
  font-weight: 600;
  min-height: 20px;
  margin-bottom: 14px;
}
.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: 4px 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: 10px;
  justify-content: center;
  margin-top: 14px;
  position: relative;
}
.menu-filiale-label {
  font-size: 14px;
  color: rgba(255,255,255,.95);
  font-weight: 700;
  letter-spacing: .2px;
}
.btn-cambia-filiale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.btn-cambia-filiale:hover { background: rgba(255,255,255,.22); 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%, #2a5a82 100%);
  color: white;
  text-align: center;
  padding: 48px 24px 40px;
  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: 8px;
  position: relative;
}
.menu-hero .hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  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 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  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 20px 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  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 rgba(200,160,74,.35);
}
.menu-card.primary-card::after { background: rgba(255,255,255,.3); }
.menu-card.primary-card:hover {
  box-shadow: 0 8px 28px rgba(200,160,74,.45);
  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: rgba(255,255,255,.2);
  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: rgba(255,255,255,.85); }

.menu-footer {
  text-align: center;
  padding: 10px;
  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: 14px;
  flex: 1;
  overflow-y: auto;
  align-items: start;
  padding: 14px 16px;
  background: var(--bg);
}

.calc-left  { display: flex; flex-direction: column; gap: 12px; }
.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: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  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: 16px; }

/* Form rows */
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  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: 8px 12px;
  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 rgba(200,160,74,.15);
}

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

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

.extras-wrap {
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.extras-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.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: 4px;
  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: 6px; align-items: center; margin-bottom: 5px; }
.extra-desc {
  flex: 1; padding: 5px 8px; 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 8px; 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-fg); background: var(--bad-bg); }

.storico-tel {
  margin-left: 8px; font-size: 11px; color: #9a5e00; font-weight: 600;
  background: #fff0d6; border: 1px solid #f0c060; border-radius: 10px;
  padding: 1px 8px; white-space: nowrap;
}

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

.addr-group { display: flex; gap: 8px; 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: 8px; flex: 1; }
.km-row input { flex: 1; }

.btn-calc-km {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  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 rgba(26,61,92,.25);
}
.btn-calc-km:hover { box-shadow: 0 4px 14px rgba(26,61,92,.4); transform: translateY(-1px); }
.btn-calc-km:disabled { opacity: 0.55; cursor: default; transform: none; }

.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-group label {
  width: auto; display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 13px; color: var(--dark); font-weight: 500;
  padding: 7px 14px;
  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: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  flex-shrink: 0;
}
.articles-search-wrap input[type=search] {
  width: 100%;
  padding: 7px 12px 7px 32px;
  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 rgba(200,160,74,.15);
}

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

.article-row {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  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: #f5f0e0; }

.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: 12px;
}

.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 rgba(200,160,74,.35); }

.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: 12px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
}

.riepilogo-body { padding: 16px; }

.riep-section-title {
  font-size: 10px; font-weight: 800; color: var(--accent-dark);
  text-transform: uppercase; letter-spacing: .8px;
  margin: 16px 0 6px;
  display: flex; align-items: center; gap: 6px;
}
.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: 14px 0 10px; border-radius: 1px;
}

.riep-totale-box {
  background: linear-gradient(135deg, var(--primary-deep), var(--primary));
  border-radius: var(--radius-sm);
  padding: 14px 16px; margin: 4px 0 10px;
  text-align: center; box-shadow: var(--shadow-sm);
}
.riep-totale-label {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 4px;
}
.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: 8px 12px; border-radius: var(--radius-sm); margin: 8px 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-fg); margin: 4px 0; min-height: 16px;
  background: var(--bad-bg); border-radius: 4px; padding: 2px 8px; display: none;
}
.riep-km-warning.visible { display: block; }

.margine-toggle {
  width: 100%; margin-top: 12px; 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: rgba(200,160,74,.06);
}

.riep-actions {
  padding: 14px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 8px; 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: 12px 20px;
  display: flex; align-items: center; gap: 12px;
  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 12px 7px 32px;
  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 rgba(200,160,74,.15);
}

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

.table-wrap { flex: 1; overflow-y: auto; padding: 16px; }

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 14px;
  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: rgba(255,255,255,.12); }

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: #f5f0df; }
tbody tr.selected { background: rgba(200,160,74,.18) !important; }

tbody td { padding: 9px 14px; 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 8px !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 #ccc;
  background: #fff;
  transition: all .15s ease;
  flex-shrink: 0; position: relative;
}
.dot-visual::after {
  content: '';
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  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 rgba(26,61,92,.15);
}
.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: 8px;
  padding: 8px 20px;
  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 14px;
  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: #fff;
  box-shadow: 0 2px 8px rgba(26,61,92,.25);
}

/* ── Stato badge ───────────────────────────────────────────────── */
.badge-stato {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  white-space: nowrap; cursor: default;
}
.badge-nessuno     { background: #eeeceb; color: #999; border: 1px solid #e0ddd8; }
.badge-da-chiamare { background: #fff4df; color: #955a00; border: 1px solid #f0c860; }
.badge-servizio    { background: #eaf2ff; color: #1550a0; border: 1px solid #90bef5; }
.badge-fatto       { background: #d8f0e2; color: #0d5c21; border: 1px solid #6dc490; }
.badge-reclamo     { background: #feeaea; color: #8c1a1a; border: 1px solid #e88080; cursor: help; }

.badge-reclamo-link {
  font-size: 10px; font-weight: 600; color: #8c1a1a;
  background: #feeaea; border: 1px solid #e88080;
  border-radius: 4px; padding: 1px 5px; margin-top: 3px;
  white-space: nowrap;
}

/* ── Btn stato & data ──────────────────────────────────────────── */
.btn-stato {
  background: linear-gradient(135deg, #5b7fa6, #3a5f80);
  color: #fff; border: none;
  padding: 8px 16px; 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 rgba(58,95,128,.3);
}
.btn-stato:hover { box-shadow: 0 4px 16px rgba(58,95,128,.45); transform: translateY(-1px); }

.btn-data {
  background: linear-gradient(135deg, #5fa05f, #3a7a3a);
  color: #fff; border: none;
  padding: 8px 16px; 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 rgba(58,122,58,.3);
}
.btn-data:hover { box-shadow: 0 4px 16px rgba(58,122,58,.45); transform: translateY(-1px); }

.btn-csv {
  background: linear-gradient(135deg, #2d6a4f, #40916c);
  color: #fff; border: none;
  padding: 9px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: box-shadow var(--transition), transform var(--transition);
  box-shadow: 0 2px 8px rgba(45,106,79,.3);
}
.btn-csv:hover { box-shadow: 0 4px 16px rgba(45,106,79,.45); transform: translateY(-1px); }

.storico-actions {
  border-top: 1.5px solid var(--border-soft);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); flex-shrink: 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,.05);
}
.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 20px; gap: 4px;
  flex-shrink: 0; box-shadow: var(--shadow-xs);
}
.tab-btn {
  padding: 12px 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: -2px;
  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: 20px 24px; }
.tab-content.active { display: block; animation: viewIn .18s ease; }

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

.param-row {
  display: flex; align-items: center;
  padding: 8px 4px; 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: 6px 10px; 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 rgba(200,160,74,.15);
}

.listino-actions {
  border-top: 1.5px solid var(--border-soft); padding: 14px 24px;
  display: flex; gap: 10px; align-items: center;
  background: var(--surface-2); flex-shrink: 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,.05);
}
.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 12px; 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: #ece8d8; }

.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: 6px; }
.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 rgba(200,160,74,.15);
}

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

.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: 16px;
}
.info-section:last-child { margin-bottom: 0; }

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

.info-section-body { padding: 16px 18px; }

.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; 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 8px; 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: 6px 10px; background: var(--primary); color: #fff;
  font-weight: 600; font-size: 11.5px;
}
.stats-table td { padding: 5px 10px; 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: 8px 0 12px; word-break: break-all;
  background: var(--bg); padding: 8px 12px;
  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: 10px;
  font-style: italic; line-height: 1.5;
}
.info-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ── Articles locked notice ────────────────────────────── */
.art-locked-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 0;
  padding: 16px 18px;
  background: #fff8f0;
  border: 1.5px solid #f0c88a;
  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: #7a4000; }
.art-locked-desc  { font-size: 12.5px; color: #9a5500; line-height: 1.5; }
.art-locked-desc strong { color: #7a4000; }

/* ── ════════════════════════════════════════════════════════
   PASSWORD MODAL
   ════════════════════════════════════════════════════════ */
.pw-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  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(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.pw-overlay.active { display: flex; }

.pw-modal {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 36px 32px 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: 12px;
  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: 6px; }
.pw-modal-sub { font-size: 12.5px; color: var(--gray); margin-bottom: 20px; line-height: 1.5; }

.pw-input {
  width: 100%; padding: 10px 14px;
  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 rgba(200,160,74,.15);
}

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

.pw-modal-actions { display: flex; gap: 10px; 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: rgba(0,0,0,.55);
  backdrop-filter: blur(5px);
  z-index: 2000; display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
.stato-overlay.active { display: flex; }

.stato-modal {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  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: 4px;
}
.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: 16px;
}
.stato-opt-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 14px 10px;
  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: #edf3f9; color: var(--primary); }
.stato-opt-btn.opt-reclamo.selected  { border-color: #c04040; background: #feeaea; color: #8c1a1a; }
.stato-opt-btn.opt-da-chiamare.selected { border-color: #c89000; background: #fff4df; color: #955a00; }
.stato-opt-btn.opt-fatto.selected   { border-color: #2a8a45; background: #d8f0e2; color: #0d5c21; }
.stato-opt-btn.opt-nessuno.selected { border-color: #aaa; background: #f4f2ef; color: #666; }

.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: 6px;
  display: block;
}
.stato-extra-textarea {
  width: 100%; padding: 9px 12px;
  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: 14px;
}
.stato-extra-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,160,74,.15); }
.stato-extra-date {
  width: 100%; padding: 9px 12px;
  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: 14px;
}
.stato-extra-date:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,160,74,.15); }
.stato-modal-actions { display: flex; gap: 10px; margin-top: 6px; }
.stato-modal-actions .btn { flex: 1; }

/* reclamo note in storico row */
.storico-reclamo-note {
  font-size: 11px; color: #8c1a1a; 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: 10px 0 4px; border-bottom: none; }
tr.month-sep:hover .month-sep-inner { background: var(--accent-tint); }
.month-sep-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px 4px 12px;
  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: 10px 24px;
  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: #c0392b; }

/* ── ════════════════════════════════════════════════════════
   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: 24px 28px 40px;
  background: var(--bg);
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 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: 6px 14px;
  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: 6px;
}

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

.cal-cell {
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  min-height: 90px;
  padding: 8px 7px 6px;
  display: flex; flex-direction: column; gap: 4px;
  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: #c0d8f0; box-shadow: var(--shadow-xs); }
.cal-cell.cal-today {
  border-color: var(--accent);
  background: #fffbf2;
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.cal-day-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px; 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: 2px 6px;
  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 rgba(0,0,0,.07);
  z-index: 1;
}

.cal-ev-fidenza { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.cal-ev-parma   { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.cal-ev-reggio  { background: #fce4ec; color: #ad1457; border: 1px solid #f48fb1; }

.cal-ev-fidenza.cal-ev-selected { box-shadow: 0 0 0 2px #2e7d32, inset 0 0 0 100px rgba(0,0,0,.07); }
.cal-ev-parma.cal-ev-selected   { box-shadow: 0 0 0 2px #c62828, inset 0 0 0 100px rgba(0,0,0,.07); }
.cal-ev-reggio.cal-ev-selected  { box-shadow: 0 0 0 2px #ad1457, inset 0 0 0 100px rgba(0,0,0,.07); }

.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: rgba(255,255,255,.55); border-radius: 4px; padding: 0 4px; letter-spacing: .03em;
}

/* ── Giro bar ──────────────────────────────────────────────── */
.giro-bar {
  display: none; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--primary-deep), var(--primary));
  border-radius: var(--radius); margin-bottom: 16px;
  box-shadow: var(--shadow-sm); animation: viewIn .18s ease;
}
.giro-bar.active { display: flex; }
.giro-bar-icon { color: rgba(255,255,255,.85); display: flex; align-items: center; }
.giro-bar-icon .ic { width: 18px; height: 18px; }
#giro-bar-count { color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; flex: 1; }
.giro-bar .btn { padding: 7px 14px; 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: 12px; padding: 10px 16px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 8px;
  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: 2px 9px;
}
.cal-nonpian-list { display: flex; flex-direction: column; gap: 6px; }
.cal-np-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  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: #9a5e00; color: #9a5e00; }
.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: #9a5e00; 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: #fff0d6; color: #9a5e00; border: 1px solid #f0c060; border-radius: 10px; padding: 2px 9px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.cal-np-data    { font-size: 11px; color: var(--gray); flex-shrink: 0; }
.cal-np-date-btn {
  flex-shrink: 0; padding: 4px 8px;
  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: 4px;
  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: #2e7d32; color: #2e7d32; }
.np-fidenza.cal-ev-selected { border-color: #2e7d32; box-shadow: 0 0 0 2px rgba(46,125,50,.25); }
.np-parma   .cal-ev-dot { border-color: #c62828; color: #c62828; }
.np-parma.cal-ev-selected   { border-color: #c62828; box-shadow: 0 0 0 2px rgba(198,40,40,.25); }
.np-reggio  .cal-ev-dot { border-color: #ad1457; color: #ad1457; }
.np-reggio.cal-ev-selected  { border-color: #ad1457; box-shadow: 0 0 0 2px rgba(173,20,87,.25); }

.giro-leg-nome { display: flex; align-items: center; gap: 8px; 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: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.giro-branch-parma         { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.giro-branch-reggio_emilia { background: #fce4ec; color: #ad1457; border: 1px solid #f48fb1; }

/* ── Giro result modal ─────────────────────────────────── */
.giro-overlay {
  position: fixed; inset: 0;
  background: rgba(10,20,36,.55);
  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: 20px 24px 18px; flex-shrink: 0;
}
.giro-modal-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.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: #e8edf2; pointer-events: auto;
}
.giro-map-marker {
  width: 28px; height: 28px;
  background: var(--primary-deep); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.45); cursor: pointer;
}
.giro-map-depot { background: var(--accent); color: var(--primary-deep); font-size: 15px; }

.giro-modal-body { flex: 1; overflow-y: auto; padding: 12px 0; }

.giro-leg {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 24px;
  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: #f0f4f8; cursor: pointer; }

.giro-leg-start   { background: #f8fbff; }
.giro-leg-ritorno { background: #f5f8f0; opacity: .85; }
.giro-leg-anchored { background: #fffbf0; border-left: 3px solid var(--accent); padding-left: 21px; }

@keyframes giroFlash {
  0%   { background: #e8f4ff; }
  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: 2px; }
.giro-leg-tel   { font-size: 11px; color: #9a5e00; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.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 8px; 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: #fffbf0;
  font-weight: 900; color: var(--accent-dark);
}

.giro-leg-dists  { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; 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: 14px 20px;
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; background: var(--surface);
}
.giro-footer-btns { display: flex; gap: 8px; margin-left: auto; }
.giro-footer-btns .btn { font-size: 12px; padding: 7px 14px; 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: 8px; }
.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: 20px; }
  .filiale-grid { flex-direction: column; padding: 0 24px 32px; }
  .filiale-card { max-width: 100%; }
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 60px; padding: 5px 4px; }
  .cal-ev { padding: 2px 5px; font-size: 10px; }
  .cal-title { min-width: 140px; font-size: 15px; }
  .org-body { padding: 14px 10px 32px; }
  .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 12px; gap: 8px; }
  .app-header h1, .app-header h2 { font-size: 14px; }
  .btn-back { font-size: 11px; padding: 5px 9px; }
  .filiale-tag { font-size: 10px; padding: 2px 7px; }
  .gold-bar { height: 2px; }

  /* ── Filiale ── */
  #view-filiale { justify-content: center; }
  .filiale-hero { padding: 32px 20px 20px; }
  .filiale-hero h1 { font-size: 28px; margin-bottom: 6px; }
  .filiale-hero .hero-sub { font-size: 12px; }
  .filiale-grid {
    flex-direction: column;
    padding: 16px 20px 32px;
    gap: 12px; flex: 0; align-items: stretch;
  }
  .filiale-card {
    max-width: 100%;
    display: flex; flex-direction: row; align-items: center;
    gap: 14px; padding: 16px 20px; 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 20px; }
  .menu-hero h1 { font-size: 26px; }
  .menu-hero .hero-sub { font-size: 12px; }
  .menu-filiale-wrap { margin-top: 10px; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .menu-filiale-label { font-size: 13px; }
  .btn-cambia-filiale { font-size: 11px; padding: 4px 10px; }
  .menu-grid { grid-template-columns: 1fr; padding: 12px; gap: 8px; }
  .menu-card { padding: 14px 16px; }
  .card-icon-wrap { font-size: 22px; }
  .card-title { font-size: 13px; }
  .card-desc { font-size: 11px; }
  .menu-footer { font-size: 10px; padding: 8px 12px; }

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

  .form-row { flex-direction: column; align-items: stretch; gap: 4px; 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: 10px 12px; }
  .cliente-row { flex-direction: column; gap: 6px; }
  .addr-group { flex-direction: column; gap: 6px; }
  .km-row { display: flex; gap: 8px; }
  .km-row input { flex: 1; }
  .btn-calc-km { white-space: nowrap; font-size: 12px; }
  .radio-group { flex-direction: column; gap: 8px; }
  .radio-group label { font-size: 13px; display: flex; align-items: center; gap: 6px; }

  .article-row { padding: 10px 12px; }
  .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: 8px 10px; }

  .extra-row { flex-wrap: wrap; }
  .extra-desc { flex: 1 0 100%; }
  .extras-wrap { margin-top: 8px; }

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

  /* ── Storico ── */
  .toolbar { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .toolbar input[type=search] { width: 100%; min-width: 0; }
  .toolbar label { display: none; }
  .count-label { font-size: 10px; }
  .stato-filters { padding: 6px 12px; 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 8px; }
  th:nth-child(5), td:nth-child(5),
  th:nth-child(6), td:nth-child(6) { display: none; }
  .storico-actions { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .storico-actions .btn { font-size: 11px; padding: 7px 10px; }
  .storico-actions .hint { display: none; }

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

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

/* ── KPI Menu ──────────────────────────────────────────────────────────────── */
.menu-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 16px 24px; margin-bottom: 16px;
}
.kpi-card {
  background: var(--surface-2); border: 1.5px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px; 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 24px; margin-bottom: 16px;
}
.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: 12px;
}
.agenda-header {
  background: #f5f9ff; border-bottom: 1.5px solid var(--border-soft);
  padding: 10px 14px; font-size: 12px; font-weight: 700;
  color: var(--primary); display: flex; align-items: center; gap: 6px;
}
.agenda-header .ic { width: 14px; height: 14px; }
.agenda-items { display: flex; flex-direction: column; }
.agenda-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  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; }
.agenda-empty { padding: 10px 14px; font-size: 12px; color: var(--gray); text-align: center; }

/* ── Anagrafica ────────────────────────────────────────────────────────────── */
.anagrafica-body { flex: 1; overflow-y: auto; padding: 16px 24px 40px; background: var(--bg); }
.anagrafica-list { display: flex; flex-direction: column; gap: 8px; }
.anagrafica-item {
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.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: 2px; }
.anagrafica-addr { font-size: 11px; color: var(--mid); }
.anagrafica-actions { display: flex; gap: 6px; flex-shrink: 0; }
.anagrafica-actions .btn { padding: 5px 10px; 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 rgba(0,0,0,.12);
  display: none;
}
.autocomplete-list.visible { display: block; }
.autocomplete-item {
  padding: 9px 12px; 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: #f5f9ff; color: var(--primary); font-weight: 600; }
.ac-loading { color: var(--gray); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.ac-via-nome { margin-left: 6px; font-weight: 500; }

@media (max-width: 700px) {
  .menu-kpi { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; margin-bottom: 10px; }
  .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(--red, var(--bad-fg)); }
.u-grow          { flex: 1; }
.u-mt-8          { margin-top: 8px; }
.u-mt-10         { margin-top: 10px; }
.u-mt-12         { margin-top: 12px; }
.u-mt-14         { margin-top: 14px; }
.u-mt-16         { margin-top: 16px; }
.u-mt-24         { margin-top: 24px; }
.u-mb-0          { margin-bottom: 0; }
.u-mb-6          { margin-bottom: 6px; }

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

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

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

/* Campi del calcolatore */
.field-col   { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.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: 6px; }

/* Riepilogo e informazioni */
.hint-text     { font-size: 13px; margin-bottom: 6px; }
.legend-text   { margin-top: 12px; font-size: 11px; color: var(--gray); line-height: 1.6; }
.agenda-empty  { text-align: center; color: var(--gray); font-size: 13px; }
.agenda-pad    { padding: 16px 24px; }
.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: 12px 0; text-align: left; }

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

/* 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(16px, 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: 6px; }
.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: 8px 12px; }
  .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: 6px; margin: -6px; }

  /* 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: 12px; padding-right: 12px; }
  .montatore-body .agenda-pad { padding-top: 12px; padding-bottom: 12px; }
  .montatore-body .menu-kpi { grid-template-columns: 1fr 1fr; padding: 10px 12px; }
  #montatore-lavori { padding: 0 12px; }

  /* 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: 6px; }

  /* ── Editor del listino ── */
  .listino-art-row { flex-wrap: wrap; gap: 6px; }
  .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: 24px 18px 20px; }
  .pw-modal-title { font-size: 17px; }
  .pw-modal-sub { font-size: 12px; }
  .pw-modal-actions { flex-wrap: wrap; gap: 8px; }
  .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 8px; gap: 6px; }
  .menu-kpi { grid-template-columns: 1fr 1fr; gap: 6px; }
  .kpi-val { font-size: 16px; }
  .cal-cell { min-height: 44px; }
  .pw-modal { padding: 20px 14px 16px; }
}

/* 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: 12px;
  background: var(--primary-deep);
  color: #fff;
  padding: 10px 12px 10px 16px;
  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. */
#view-login, #view-filiale {
  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: 12px 16px;
  padding: 16px 18px;
  background: var(--primary);
  color: #fff;
  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: 4px;
}
.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: 2px; }
.prossimo-azioni { display: flex; gap: 8px; margin-top: 12px; 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: 10px;
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}

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

/* ── Le giornate ── */

.lavoro-gruppo { margin: 4px 0 18px; }
.lavoro-gruppo-titolo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 8px;
  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 8px; 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: 10px;
  margin: 0 16px 8px;
  padding: 12px 14px;
  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(--good-fg); }
.lavoro-reclamo     { border-left-color: var(--bad-fg); }

.lavoro-scelta { flex-shrink: 0; margin-top: 2px; }
.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: 4px 10px;
  margin-top: 6px; 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: 4px; 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: 10px 12px; padding: 14px; }
  .prossimo-cliente { font-size: 18px; }
  .lavoro-card { margin: 0 12px 8px; padding: 11px 12px; }
  .lavoro-gruppo-titolo { margin-left: 12px; }
}