/* ============================================================
   RinoHub v2 ? Foglio di stile UNICO
   Palette: navy ? verde ? arancio ? rosso ? sfondi chiari
   ============================================================ */
@import url('marchio.css');
/* ⚠️ LA TAVOLOZZA DI CASA VIVE IN marchio.css. I valori qui sotto sono gli
   stessi, ed e' da qui che sono stati presi il 5/09 per scriverla. Chi
   cambia un colore qui deve cambiarlo anche la', finche' questo :root non
   viene fatto bere direttamente da marchio.css. */
:root {
  --navy: #1c2740;
  --navy-hover: #243352;
  --navy-muted: #5f6f8f;
  --verde: #2e9e5b;
  --verde-scuro: #248a4d;
  --arancio: #c8651e;
  --arancio-scuro: #a85418;
  --rosso: #d23b3b;
  --rosso-brand: #c8102e;
  --rosso-scuro: #a30d25;
  --blu: #2f6fb0;
  --bg: #f4f6f9;
  --bg-elevated: #ffffff;
  --text: #1f2937;
  --text-muted: #6b7280;
  --border: #e2e6ec;
  --border-strong: #d6dae0;
  --row-hover: #fdeef0;
  --row-sel: #fbe0e4;
  --sidebar-w: 240px;
  --sidebar-w-narrow: 68px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(28, 39, 64, .05);
  --shadow-sm: 0 2px 8px rgba(28, 39, 64, .06);
  --shadow-md: 0 8px 24px rgba(28, 39, 64, .08);
  --font: var(--rh-carattere);
}

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

body {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--rh-carattere-titoli); }

/* ---- Login — visuale sx · area riservata chiara dx ---- */
.login-body { min-height: 100dvh; overflow-x: hidden; background: #e8ecf1; }
.login-wrap--gesti {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.35fr minmax(320px, 420px);
  box-sizing: border-box;
}
.login-wrap--gesti .login-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  margin: 0;
  border: none;
  border-radius: 0;
  padding: clamp(24px, 4vw, 48px);
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 70% 55% at 40% 40%, rgba(200, 16, 46, .14) 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 80% 75%, rgba(47, 111, 176, .1) 0%, transparent 55%),
    linear-gradient(155deg, #0a0f18 0%, #121826 45%, #1c2740 100%);
  overflow: hidden;
}
.login-stage-inner {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.login-wrap--gesti .login-schematic {
  width: 100%;
  max-width: 780px;
  height: auto;
  max-height: none;
  padding: 0;
}
.login-stage-anchor {
  margin: 0;
  max-width: 36ch;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .01em;
}
.login-pulse { animation: loginPulseMove 4.5s ease-in-out infinite; }
.login-pulse--2 { animation-delay: 1.2s; }
.login-pulse--3 { animation-delay: 2.4s; }
@keyframes loginPulseMove {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
.login-panel--light {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: clamp(28px, 5vw, 48px) clamp(24px, 4vw, 40px);
  background: #f3f5f8;
  box-shadow: -8px 0 32px rgba(28, 39, 64, .08);
}
.login-brand--light .logo {
  text-align: left;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.1;
}
.login-brand--light .logo .rino { color: var(--rosso-brand); }
.login-brand--light .logo .hub { color: #1f2937; }
.login-brand--light .login-tagline {
  margin: 4px 0 0;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: #6b7280;
}
.login-area-tit {
  margin: 22px 0 14px;
  font-size: 20px;
  font-weight: 700;
  color: #374151;
  letter-spacing: -.2px;
}
.login-form-light label {
  margin-top: 12px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}
.login-form-light label:first-of-type { margin-top: 0; }
.login-gesti-field,
input.login-gesti-field {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #c5d0dc;
  background: #e8f0f8;
  box-shadow: inset 0 1px 3px rgba(28, 39, 64, .08);
  font-size: 14.5px;
  color: #1f2937;
  transition: border-color .15s, box-shadow .15s;
}
.login-gesti-field:focus,
input.login-gesti-field:focus {
  outline: none;
  border-color: #7a9ab8;
  box-shadow: inset 0 1px 3px rgba(28, 39, 64, .1), 0 0 0 2px rgba(47, 111, 176, .15);
}
.login-gesti-btn {
  margin-top: 18px;
  min-height: 38px;
  padding: 8px 22px;
  width: auto;
  align-self: flex-start;
  border-radius: 4px;
  border: 1px solid #b8c9d9;
  background: #d6e4f0;
  color: #1f2937;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
}
.login-gesti-btn:hover {
  background: #c5d8ea;
  color: #111;
}
.login-gesti-btn:disabled { opacity: .6; cursor: wait; }
.login-form-light .error { margin-top: 12px; }
@media (max-width: 900px) {
  .login-wrap--gesti { grid-template-columns: 1fr; }
  .login-wrap--gesti .login-stage {
    min-height: 260px;
    max-height: none;
    padding: 20px 16px 16px;
  }
  .login-stage-anchor { font-size: 13px; max-width: 32ch; }
  .login-panel--light { min-height: auto; padding: 28px 20px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-pulse { animation: none; }
}

/* Card generica (modali / form legacy) */
.card { background: var(--bg-elevated); width: 100%; max-width: 400px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border); padding: 40px 36px; }
.logo { text-align: center; font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.logo .rino { color: var(--rosso-brand); }
.logo .hub { color: var(--text); }
.subtitle { text-align: center; color: var(--text-muted); font-size: 14px; margin-bottom: 28px; }

/* ---- Layout app ---- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 20;
  overflow: hidden;
  background: transparent;
}
.sidebar-inner {
  width: var(--sidebar-w);
  height: 100%;
  background: var(--navy);
  box-shadow: 2px 0 12px rgba(0, 0, 0, .12);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 12px 0 40px;
  transform: translateX(0);
}
.layout.sidebar-collapsed .sidebar { width: var(--sidebar-w-narrow); }
.layout.sidebar-collapsed:not(.sidebar-hover) .sidebar-inner {
  transform: translateX(0); /* FIX: nessuno shift ? il rail mostra le icone e il toggle resta cliccabile */
}
.layout.sidebar-collapsed.sidebar-hover .sidebar {
  overflow: visible;
  z-index: 35;
}
.layout.sidebar-collapsed.sidebar-hover .sidebar-inner {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0, 0, 0, .22);
}
/* Animazione SOLO al passaggio mouse (mai al click) */
.layout.sidebar-collapsed.sidebar-hover-anim .sidebar-inner {
  transition: transform 0.07s ease-out, box-shadow 0.07s ease-out;
}
/* Click toggle: cambio istantaneo, zero attesa */
.layout.sidebar-instant .sidebar-inner,
.layout.sidebar-instant .main {
  transition: none !important;
}
.sb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: 6px;
}
.sb-logo {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.5px;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.sb-logo::after {
  content: 'Gestionale noleggio';
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .35px;
  color: #8fa3c4;
  text-transform: uppercase;
}
.sb-logo .rino { color: #e94560; }
.sb-logo .hub { color: #fff; }
.sb-logo-mini { display: none; }
.sb-controls { display: flex; gap: 4px; flex-shrink: 0; }
.sb-ctrl {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: #aeb9d1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background .12s, color .12s;
}
.sb-ctrl:hover { background: var(--navy-hover); color: #fff; }
.sb-ctrl.is-active { background: rgba(233, 69, 96, .18); color: #e94560; }
.sb-section {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .65px;
  color: var(--navy-muted);
  padding: 14px 22px 6px;
  font-weight: 700;
  white-space: nowrap;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  color: #aeb9d1;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.sb-item:hover { background: var(--navy-hover); color: #fff; }
.sb-item.active { background: var(--navy-hover); color: #fff; border-left-color: var(--rosso-brand); font-weight: 600; }
.sb-ico {
  width: 22px;
  flex-shrink: 0;
  text-align: center;
  opacity: .92;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sb-label {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sb-item.soon { opacity: .45; cursor: default; }
.sb-item.soon:hover { background: transparent; color: #aeb9d1; }
.soon-tag { font-size: 9px; background: #2a3a5c; color: #6b7a99; padding: 2px 7px; border-radius: 8px; margin-left: auto; font-weight: 600; flex-shrink: 0; }

/* Rail collassata: testi nascosti senza reflow (niente display:none) */
.layout.sidebar-collapsed:not(.sidebar-hover) .sb-label,
.layout.sidebar-collapsed:not(.sidebar-hover) .soon-tag,
.layout.sidebar-collapsed:not(.sidebar-hover) .sb-logo-full {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.layout.sidebar-collapsed:not(.sidebar-hover) .sb-section {
  padding: 0;
  margin: 8px 12px;
  height: 1px;
  line-height: 0;
  background: #2a3a5c;
  color: transparent;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  letter-spacing: 0;
}
.layout.sidebar-collapsed:not(.sidebar-hover) .sb-item.active {
  border-left-color: transparent;
  background: rgba(233, 69, 96, .14);
}
.layout.sidebar-collapsed:not(.sidebar-hover) .sb-item.active .sb-ico { color: #e94560; opacity: 1; }

.main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin-left: var(--sidebar-w);
  min-width: 0;
  width: calc(100vw - var(--sidebar-w));
  max-width: calc(100vw - var(--sidebar-w));
  box-sizing: border-box;
  transition: margin-left 0.07s ease-out, width 0.07s ease-out, max-width 0.07s ease-out;
}
.layout.sidebar-collapsed .main {
  margin-left: var(--sidebar-w-narrow);
  width: calc(100vw - var(--sidebar-w-narrow));
  max-width: calc(100vw - var(--sidebar-w-narrow));
}

@media (prefers-reduced-motion: reduce) {
  .layout.sidebar-collapsed.sidebar-hover-anim .sidebar-inner { transition: none; }
  .main { transition: none; }
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.topbar-quick {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tb-quick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.tb-quick i { font-size: 14px; opacity: .9; }
.tb-quick:hover {
  background: #fff;
  color: var(--navy);
  border-color: #cfd6e0;
  box-shadow: var(--shadow-xs);
}
.tb-quick.active {
  background: #e8f7ef;
  color: var(--verde-scuro);
  border-color: rgba(46, 158, 91, .35);
}
.topbar {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 {
  font-family: var(--rh-carattere-titoli);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text);
  /* Ultimo a cedere: dice dove sei. Gli altri elementi si stringono prima. */
  flex: 1 1 auto;
  min-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ordine di cessione (solo quando lo spazio manca — schermo grande invariato) */
/* Prima era 1320, ma a 1440 al gruppo di sinistra mancavano gia' 50 pixel e
   qualcuno doveva pur cedere. Le scritte dei tasti rapidi sono la cosa piu'
   facile da perdere: l'icona si riconosce lo stesso, e il nome resta nel
   suggerimento al passaggio del mouse. */
@media (max-width: 1560px) {
  .tb-quick span { display: none; }
  .tb-quick { padding: 8px 10px; gap: 0; }
}
@media (max-width: 1180px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .manettino {
    order: 5;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }
  .man-scatto { flex: 1 1 0; text-align: center; padding: 8px 10px; }
  .user-chip { margin-left: auto; flex-shrink: 0; }
}
.user-chip { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--rosso-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 6px rgba(200, 16, 46, .25);
}
.logout { color: #9ca3af; text-decoration: none; font-size: 13px; cursor: pointer; transition: color .15s; }
.logout:hover { color: var(--rosso-brand); }
.content { padding: 22px 28px 32px; max-width: none; width: 100%; box-sizing: border-box; }
/* Calendario: usa tutta la .main ? solo la griglia mezzi scrolla in verticale.
   La riga DATE ? fissata sopra (cal-dates-bar), non finisce sotto la topbar. */
html:has(.content.cal-page),
body:has(.content.cal-page) {
  overflow: hidden;
  height: 100%;
}
.layout:has(.content.cal-page) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.main:has(.content.cal-page) {
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.main:has(.content.cal-page) .app-footer {
  display: none;
}
.content.cal-page {
  max-width: none;
  width: 100%;
  padding: 8px 16px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
/* Listini V6: full-screen su PC grande (Giuseppe: piace e si vede bene) */
.content.ln-v6-page {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.page-intro { font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.5; }

/* ---- Footer globale ? propriet? Rinoleggio (baseline; rifinitura + logo in T-17) ---- */
.app-footer {
  margin-top: auto;
  padding: 18px 28px 22px;
  background: var(--navy);
  color: #c7d0e0;
  display: flex; flex-direction: column; gap: 5px;
  align-items: center; text-align: center;
}
.app-footer .af-brand { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; }
.app-footer .af-logo { font-weight: 800; font-size: 16px; letter-spacing: -.3px; }
.app-footer .af-logo .af-rino { color: #fff; }
.app-footer .af-logo .af-rent { color: var(--rosso); }
.app-footer .af-by { color: #9fb0c9; font-weight: 600; font-size: 12.5px; }
.app-footer .af-sep { color: #45557a; }
.app-footer .af-hub { color: #9fb0c9; font-size: 12.5px; }
.app-footer .af-hub b { color: #fff; font-weight: 700; }
.app-footer .af-legal { color: #8394af; font-size: 11px; max-width: 720px; line-height: 1.45; margin-top: 2px; }

/* ---- KPI a nastrino semaforo ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi {
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kpi[onclick], .kpi[role="button"] { cursor: pointer; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: #d0d7e2; }
.kpi-nastro {
  display: inline-block; color: #fff; font-weight: 800; font-size: 17px;
  padding: 6px 16px; border-radius: 0 0 var(--radius-sm) 0;
  letter-spacing: -.2px;
}
.kpi-nastro.verde { background: var(--verde); }
.kpi-nastro.arancio { background: var(--arancio); }
.kpi-nastro.rosso { background: var(--rosso); }
.kpi-nastro.blu { background: var(--blu); }
.kpi-body { padding: 14px 18px 18px; text-align: center; }
.kpi-titolo { font-size: 13px; color: #374151; font-weight: 600; margin-top: 4px; }
.kpi-sub { font-size: 11.5px; color: #9ca3af; margin-top: 6px; }

/* ---- Panel / card ---- */
.panel {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.panel h2 { font-size: 16px; margin-bottom: 8px; font-weight: 700; letter-spacing: -.15px; }
.panel p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }

/* ---- Dashboard / Scrivania ---- */
.dash-page .dash-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.dash-page .dash-head-tit {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  color: var(--navy);
  letter-spacing: -.2px;
}
.dash-page .dash-head-sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: #6b778c;
  line-height: 1.35;
}
.dash-page .dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--navy) 0%, #243a5e 100%);
  border-radius: var(--radius-md);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.dash-page .dash-hero-text { font-size: 15px; font-weight: 500; line-height: 1.5; opacity: .95; }
.dash-page .dash-hero-badge {
  flex-shrink: 0;
  background: rgba(46, 158, 91, .2);
  border: 1px solid rgba(46, 158, 91, .45);
  color: #b8f0d0;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
}
.dash-page .dash-numeri {
  margin: 0 0 12px;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.dash-page .dash-numeri .kpi { margin: 0; box-shadow: var(--shadow-xs); border-radius: var(--radius-sm); }
.dash-page .dash-numeri .kpi-nastro { font-size: 15px; padding: 5px 12px; }
.dash-page .dash-numeri .kpi-body { padding: 8px 10px 10px; }
.dash-page .dash-numeri .kpi-titolo { font-size: 11.5px; margin-top: 2px; }
.dash-page .dash-numeri .kpi-sub { font-size: 10.5px; margin-top: 2px; }
.dash-page .dash-kpi-strip { margin-bottom: 22px; }
.dash-page .dash-kpi-strip .kpi { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.dash-page .dash-tabelle { margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.dash-page .dash-tbl {
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.dash-page .dash-tbl-tit {
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  background: #f4f7fb;
  border-bottom: 1px solid #e8ecf2;
}
.dash-page .dash-tbl-tit--rit { color: #c8102e; background: #fff5f6; }
.dash-page .dash-tbl table { margin: 0; box-shadow: none; border: 0; border-radius: 0; }
.dash-page .dash-tbl table thead th {
  background: #eef1f6;
  color: #516079;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 5px 8px;
}
.dash-page .dash-tbl table td { padding: 5px 8px; font-size: 12.5px; }
.dash-page .dash-tbl table tbody tr { transition: background .12s; }
.dash-page .dash-tbl table tbody tr:hover { background: var(--row-hover); }
.dash-page .dash-rit { color: #c8102e; font-weight: 700; font-size: 12px; }
.dash-page .dash-clicca { color: #9ca3af; font-size: 11.5px; font-style: italic; }
.dash-page .dash-tbl table tbody tr:hover .dash-clicca { color: var(--navy); font-weight: 700; }
.dash-page .dash-tbl-vuoto { margin: 4px 0 8px; font-size: 13px; }
.dash-page .dash-tbl-more {
  display: block;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  border-top: 1px solid #e8ecf2;
  background: #f8fafc;
}
.dash-page .dash-tbl-more:hover { background: #eef2f7; color: #c8651e; }
.dash-page #avvisiBox .panel {
  border-radius: var(--radius-md);
  padding: 22px 24px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #e8ecf2;
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
}
.dash-page #avvisiBox .panel > h2 {
  font-size: 17px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #eef2f7;
  color: var(--navy);
}
.dash-page #avvisiBox h3 {
  margin: 20px 0 10px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  background: #f4f7fb;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--arancio);
}
.dash-page #avvisiBox table {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
}
.dash-page #avvisiBox table thead th {
  background: var(--navy);
  color: #fff;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.dash-page #avvisiBox table tbody tr { transition: background .12s; }
.dash-page #avvisiBox table tbody tr:hover { background: var(--row-hover); }
.dash-page .dash-master {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
}
.dash-page .dash-master-fold {
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  background: #fafbfd;
  font-size: 13px;
  color: #516079;
}
.dash-page .dash-master-fold > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  list-style: none;
}
.dash-page .dash-master-fold > summary::-webkit-details-marker { display: none; }
.dash-page .dash-master-fold p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; }

/* ---- Calendario moderno ---- */
.cal-page { --cal-mezzo-w: 228px; --cal-cat-w: 46px; --cal-km-w: 50px; }
.cal-page .cal-top-fold,
.cal-page .cal-legenda { width: 100%; max-width: 100%; box-sizing: border-box; flex-shrink: 0; }
.cal-page #invitoMattino { flex-shrink: 0; }

/* Blocco superiore collassabile: avviso mattino + hero + filtri */
.cal-top-fold { margin-bottom: 6px; }
.cal-top-fold > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 4px;
  cursor: pointer;
  user-select: none;
}
.cal-top-fold > summary::-webkit-details-marker { display: none; }
.cal-top-fold[open] > summary .cal-top-ico { transform: rotate(0deg); }
.cal-top-fold:not([open]) > summary .cal-top-ico { transform: rotate(-90deg); }
.cal-top-ico {
  font-size: 11px;
  color: #9ca3af;
  transition: transform .15s;
  flex-shrink: 0;
}
.cal-top-lbl { font-size: 11.5px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; }
.cal-hero-stat {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  white-space: nowrap;
}
.cal-top-body { display: flex; flex-direction: column; gap: 6px; }

/* Hero navy: una riga + ? per il testo lungo */
.cal-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #2a3f63 100%);
  border-radius: var(--radius-sm);
  color: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cal-hero > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
}
.cal-hero > summary::-webkit-details-marker { display: none; }
.cal-hero-brief { font-size: 12.5px; font-weight: 600; line-height: 1.25; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-hero-brief strong { color: #ffd4a8; }
.cal-hero-q {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.cal-hero[open] .cal-hero-q { background: rgba(255,212,168,.35); color: #ffd4a8; }
.cal-hero-more {
  margin: 0;
  padding: 0 12px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  opacity: .9;
}
.cal-hero-more strong { color: #ffd4a8; }

.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.cal-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #f0f3f8;
  border-radius: var(--radius-sm);
  padding: 2px;
  border: 1px solid var(--border);
}
.cal-nav-label { min-width: 118px; text-align: center; font-weight: 700; font-size: 13px; color: var(--navy); }
.cal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.cal-flotta-stat {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  padding: 4px 10px;
  background: #eef6f0;
  border: 1px solid #c8e6d4;
  border-radius: 8px;
  flex-shrink: 0;
}
.cal-sb-btn {
  flex-shrink: 0;
  min-width: 32px;
  padding: 4px 9px !important;
  font-size: 14px !important;
  line-height: 1;
}
/* Calendario: menu laterale sganciato — la griglia usa tutta la larghezza */
.layout.cal-sidebar-hidden .sidebar {
  transform: translateX(-100%);
  pointer-events: none;
}
.layout.cal-sidebar-hidden .main {
  margin-left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
}
.cal-page .cal-toolbar input,
.cal-page .cal-toolbar select { padding: 5px 8px; font-size: 12.5px; min-height: 0; }
.cal-page .cal-toolbar label { font-size: 12px !important; margin: 0 !important; }
.cal-page .cal-toolbar .btn-sm { padding: 4px 8px; font-size: 12px; min-height: 0; }
.cal-page .cal-scroll {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: #fff;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
/* Riga DATE: fissa, non scrolla in verticale con i mezzi */
.cal-page .cal-dates-bar {
  flex-shrink: 0;
  border-bottom: 2px solid #d0d7e2;
  background: #eef1f6;
  z-index: 5;
}
.cal-page .cal-dates-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cal-page .cal-dates-scroll::-webkit-scrollbar { display: none; height: 0; }
/* Corpo mezzi: unico scroll verticale (+ orizzontale se serve) */
.cal-page .cal-body-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.cal-page .cal-wrap {
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: #fff;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none;
  position: relative;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.cal-page table.cal { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; table-layout: fixed; overflow: visible; }
.cal-page .cal-dates-table { margin-bottom: 0; }
.cal-page .cal-body-table thead { display: none; }
/* Colonne mezzo sticky a sinistra (solo tbody, sotto la barra date fissa) */
.cal-page tbody .col-mezzo,
.cal-page tbody .col-cat,
.cal-page tbody .col-km { position: sticky; z-index: 4; }
.cal-page table.cal th, .cal-page table.cal td { border-right: 1px solid #e8ecf2; border-bottom: 1px solid #e8ecf2; padding: 0; }
/* Header DATE (barra fissa sopra) */
.cal-page table.cal thead th {
  background: linear-gradient(180deg, #f0f3f8 0%, #e8edf4 100%);
  font-size: 10.5px;
  font-weight: 700;
  padding: 6px 4px;
  color: #4b5563;
  box-shadow: 0 1px 0 rgba(28, 39, 64, .06);
}
.cal-page thead .col-mezzo,
.cal-page thead .col-cat,
.cal-page thead .col-km {
  background: #eef1f6;
}
.cal-page .col-mezzo {
  left: 0;
  background: #fff;
  min-width: var(--cal-mezzo-w); width: var(--cal-mezzo-w); max-width: var(--cal-mezzo-w);
  text-align: left; padding: 2px 4px !important;
  box-shadow: 2px 0 6px rgba(28,39,64,.06);
  vertical-align: middle;
}
.cal-page .col-cat {
  left: var(--cal-mezzo-w);
  background: #fff;
  min-width: var(--cal-cat-w); width: var(--cal-cat-w);
  text-align: center; padding: 1px 1px !important;
  box-shadow: 2px 0 4px rgba(28,39,64,.04);
  vertical-align: middle;
}
.cal-page .col-km {
  left: calc(var(--cal-mezzo-w) + var(--cal-cat-w));
  background: #fff;
  min-width: var(--cal-km-w); width: var(--cal-km-w);
  text-align: right; padding: 2px 4px !important;
  font-size: 9.5px; font-weight: 700; color: #516079;
  box-shadow: 2px 0 4px rgba(28,39,64,.04);
  vertical-align: middle;
}
.cal-page thead .col-mezzo, .cal-page thead .col-cat, .cal-page thead .col-km { background: #eef1f6; }
/* Marca/modello possono andare a capo; la targa sotto, sempre leggibile (distingue due Fiesta). */
.cal-page .mz-marca { font-weight: 700; font-size: 10px; color: var(--navy); line-height: 1.2; white-space: normal; overflow: visible; word-break: normal; overflow-wrap: break-word; }
.cal-page .mz-targa { display: block; font-weight: 700; font-size: 10.5px; color: var(--navy); margin-left: 0; margin-top: 1px; letter-spacing: .02em; }
.cal-page .mz-sub { font-size: 9px; color: #6b7280; }
.cal-page .mz-point { color: #39507a; font-weight: 600; font-size: 8.5px; margin-top: 1px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-page .mz-km-val { font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.cal-page .cal-cat-ico { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.cal-page .cal-cat-ico .cat-icon { width: 20px; height: 20px; font-size: 9px; }
.cal-page .cal-fuel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 8px;
}
.cal-page .cal-fuel.fuel-benz { background: #e8f7ef; color: var(--verde); }
.cal-page .cal-fuel.fuel-diesel { background: #eceff3; color: #444; }
.cal-page .cal-fuel.fuel-gpl { background: #e8f0fa; color: var(--blu); }
.cal-page .cal-fuel.fuel-elettrico { background: #e0f5f8; color: #17a2b8; }
.cal-page .cal-fuel.fuel-ibrido { background: #fff4e6; color: #e39a2f; }
.cal-page .cal-fuel.fuel-altro { background: #f3f4f6; color: #6b7280; }
.cal-page .gday { width: 32px; min-width: 32px; height: 48px; text-align: center; cursor: pointer; font-size: 10.5px; transition: filter .12s; position: relative; overflow: visible; }
/* Barra continua: bordi verticali quasi invisibili sotto la scritta del noleggio */
.cal-page td.gday:not(.g-libero) { border-right-color: rgba(255, 255, 255, .14); }
/* La cella con etichetta dipinge SOPRA i giorni successivi → niente lettere tagliate */
.cal-page td.gday:has(.cell-label),
.cal-page td.gday:has(.cell-car) { z-index: 3; }
/* La domenica si colora SOLO in intestazione (si lavora anche la domenica: i colori di
   stato sotto — libero/occupato/concluso — devono restare quelli veri, mai coperti da
   un colore del giorno. Prima ".gday.dom" aveva piu' peso di ".g-libero" e la domenica
   sembrava "vuota" anche quando c'era un noleggio vero — Giuseppe 24/07, persa fiducia
   di GO-RENT anche per questo). Stessi colori del vecchio gestionale: rosso la domenica,
   scuro pieno il giorno di oggi — non inventati, copiati 1:1. */
.cal-page thead .gday.dom { background: #d64545; color: #fff; }
.cal-page thead .gday.dom.cal-oggi { background: #7a1010; }
.cal-page .gday.cal-oggi { box-shadow: inset 0 -3px 0 var(--arancio); }
.cal-page thead .gday.cal-oggi { background: #1a2233 !important; color: #fff; font-weight: 800; }
/* La velina sul passato: i giorni gia' andati si smorzano, come nel vecchio
   gestionale (che li segnava con opacita' .6) — leggibili ma "spenti". Il
   bordo segna il confine ieri/oggi, cosi' l'occhio trova subito "adesso". */
/* Il passato conta meno del futuro: chi lavora deve vedere PRIMA cosa deve ancora
   fare, non rincorrere quello che e' gia' finito (Giuseppe 24/07). Piu' spento e
   un po' desaturato, cosi' il colore vero (quello che serve un'azione) risalta. */
.cal-page .gday.giorno-passato { opacity: .38; filter: saturate(.6); }
.cal-page .gday.giorno-passato:hover { opacity: .75; filter: saturate(1); }
.cal-page .gday.giorno-passato .cell-label { font-size: 9.5px; }
.cal-page .gday.giorno-ieri-bordo { border-right: 2px solid var(--arancio); }
/* L'ingranaggetto: azioni rapide sul contratto senza uscire dal calendario
   (stampa · modifica · annulla). Distintivo d'angolo: bersaglio comodo, icona
   discreta — non ruba spazio al nome cliente in basso. */
.cal-page .cell-gear {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1px 2px 0 0;
  font-size: 10px;
  line-height: 1;
  opacity: .82;
  cursor: pointer;
  color: inherit;
  transition: opacity .15s, transform .15s;
}
/* Area sensibile più larga del disegno, ancorata all'angolo */
.cal-page .cell-gear::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
}
/* Piccolo fondo piatto: si capisce che c'è anche senza passarci sopra */
.cal-page .cell-gear::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
  z-index: -1;
  pointer-events: none;
}
.cal-page .cell-gear i {
  position: relative;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
.cal-page .cell-gear:hover {
  opacity: 1;
  transform: rotate(38deg) scale(1.22);
}
.cal-page .cell-gear:hover::after {
  background: rgba(255, 255, 255, .38);
}
/* Icona chiara su barre scure, scura su giallo/arancio */
.cal-page .g-noleggio .cell-gear,
.cal-page .g-prenotazione .cell-gear,
.cal-page .g-fatturato .cell-gear,
.cal-page .g-sovrapposizione .cell-gear,
.cal-page .g-scaduto .cell-gear,
.cal-page .g-manutenzione .cell-gear,
.cal-page .g-trasferimento .cell-gear { color: #fff; }
.cal-page .g-concluso .cell-gear,
.cal-page .g-gratis .cell-gear { color: #3a2e00; }
.cal-page .g-concluso .cell-gear::after,
.cal-page .g-gratis .cell-gear::after {
  background: rgba(0, 0, 0, .1);
}
.cal-page .g-concluso .cell-gear:hover::after,
.cal-page .g-gratis .cell-gear:hover::after {
  background: rgba(0, 0, 0, .16);
}
.cal-page .g-concluso .cell-gear i,
.cal-page .g-gratis .cell-gear i {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .45));
}
@media (prefers-reduced-motion: reduce) {
  .cal-page .cell-gear,
  .cal-page .cell-gear:hover { transition: none; transform: none; }
}
/* Giorno di rientro vero (COMPITO 24/07): cella DIVISA — mattina concluso (giallo),
   pomeriggio gia' libero (verde #dcf1e4). Si capisce a vista che si puo' prenotare.
   Rotellina a SINISTRA (contratto vecchio); + a DESTRA (nuovo noleggio). */
.cal-page .gday:has(.cell-meta-libera) {
  background: linear-gradient(to right, #ffff66 0 50%, #dcf1e4 50% 100%) !important;
  color: #3a3000;
}
.cal-page .gday:has(.cell-meta-libera) .cell-gear {
  left: 0;
  right: auto;
  top: 0;
  width: 15px;
  height: 18px;
  padding: 1px 0 0 1px;
  justify-content: flex-start;
  z-index: 5;
  color: #3a2e00;
}
.cal-page .gday:has(.cell-meta-libera) .cell-gear::before {
  top: -1px;
  left: -1px;
  right: auto;
  width: 15px;
  height: 18px;
}
.cal-page .gday:has(.cell-meta-libera) .cell-gear::after {
  top: 1px;
  left: 1px;
  right: auto;
  background: rgba(0, 0, 0, .1);
}
.cal-page .gday:has(.cell-meta-libera) .cell-gear i {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .45));
}
.cal-page .cell-meta-libera {
  position: absolute; right: 0; top: 0; bottom: 0; width: 50%;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  border-left: 1px solid rgba(58, 48, 0, .28);
}
.cal-page .cell-meta-libera:hover { background: rgba(200, 237, 214, .65); }
.cal-page .cell-meta-libera .cell-plus {
  color: var(--verde); font-size: 13px; font-weight: 800; line-height: 1;
}
.cal-legenda .lg-box-meta-libera {
  background: linear-gradient(to right, #ffff66 50%, #dcf1e4 50%);
  border-color: #c5c55a;
}
.cal-page .cell-plus { color: #b8cce4; font-weight: 700; font-size: 14px; transition: color .12s, transform .12s; }
.cal-page .cell-car {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  margin-right: 1px;
}
.cal-page .cell-car i { filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)); }
.cal-page .g-noleggio .cell-car,
.cal-page .g-prenotazione .cell-car,
.cal-page .g-fatturato .cell-car,
.cal-page .g-sovrapposizione .cell-car { color: #fff; }
.cal-page .g-concluso .cell-car,
.cal-page .g-gratis .cell-car { color: #3a2e00; }
.cal-page .gday:not(.g-libero):hover .cell-car { transform: scale(1.12); }
.cal-page .cell-icon { font-size: 12px; line-height: 1; }
.cal-page .cell-label--solo { font-size: 9px; padding: 0 2px; }
.cal-page .cal-legenda .cal-leg-car {
  font-size: 11px;
  font-weight: 600;
  color: #516079;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cal-page .cal-legenda .cal-leg-car i { color: var(--navy); }
.cal-page .gday.g-libero:hover { background: #c8edd6 !important; }
.cal-page .gday.g-libero:hover .cell-plus { color: var(--verde); transform: scale(1.15); }
.cal-page .g-libero { background: #dcf1e4; }
.cal-page .gday.g-ft-sel { outline: 2px solid var(--arancio); outline-offset: -2px; background: #ffe8d4 !important; }
.cal-page .mz-cell { display: block; min-width: 0; }
.cal-page .mz-cell-top { display: flex; align-items: center; gap: 3px; min-width: 0; }
.cal-page .mz-logo { height: 13px; width: auto; flex: 0 0 auto; }
.cal-page .mz-info { flex: 1; min-width: 0; overflow: hidden; }
.cal-page .cal-ft-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  padding: 2px 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: 4px;
}
.cal-cella-azioni {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 4px;
}
.cal-cella-azioni .btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  font-size: 15px;
}
.cal-page .g-prenotazione { background: #007cbf; color: #fff; }
.cal-page .g-noleggio { background: #c20a0a; color: #fff; }
.cal-page .g-gratis { background: #ffc864; color: #3a2e00; }
.cal-page .g-concluso { background: #ffff66; color: #3a3000; }
.cal-page .g-fatturato { background: #2f9e78; color: #fff; }
.cal-page .g-sovrapposizione { background: #800080; color: #fff; }
.cal-page .g-manutenzione { background: repeating-linear-gradient(45deg,#6b7280,#6b7280 6px,#565e6b 6px,#565e6b 12px); color: #fff; }
.cal-page .g-trasferimento { background: repeating-linear-gradient(45deg,#0d9488,#0d9488 6px,#0b7f76 6px,#0b7f76 12px); color: #fff; }
.cal-page .g-scaduto { background: #c20a0a; color: #fff; animation: calOverduePulse 1.6s ease-in-out infinite; }
@keyframes calOverduePulse { 0%,100%{ box-shadow: inset 0 0 0 0 rgba(255,80,80,0);} 50%{ box-shadow: inset 0 0 14px 2px rgba(255,120,120,.9);} }
.cal-page .gday.blk-start { border-left: 2px solid rgba(17,24,39,.5); }
.cal-page .gday.blk-end { border-right: 2px solid rgba(17,24,39,.5); }
.cal-page .gday:not(.g-libero):hover { filter: brightness(1.06); }
.cal-page .cell-label {
  /* In basso, non piu' a meta' altezza: a meta' cella ci sono ora le icone
     (auto/rotellina/+ libero) e il nome ci si accavallava sopra (Giuseppe 24/07). */
  position: absolute; left: 5px; bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px; font-weight: 600; pointer-events: none; z-index: 2;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  /* Copre i bordi di cella che altrimenti tagliavano le lettere a fette */
  padding: 1px 3px 1px 0;
  box-decoration-break: clone;
}
.cal-page .g-concluso .cell-label, .cal-page .g-gratis .cell-label { color: #2a2400; text-shadow: none; }
.cal-legenda {
  display: flex; gap: 5px 8px; flex-wrap: wrap; margin-top: 6px;
  padding: 5px 8px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 10px;
}
.cal-legenda span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; background: #f8fafc; border-radius: 12px;
  border: 1px solid #e8ecf2; font-weight: 500;
}
.cal-legenda .lg-box { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,.08); flex-shrink: 0; }

/* ---- Form ---- */
label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; margin-top: 16px; }
input, select, textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14.5px;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  background: var(--bg-elevated);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rosso-brand);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .1);
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .sb-item:focus-visible, .back-link:focus-visible {
  outline: 2px solid var(--rosso-brand);
  outline-offset: 2px;
}

/* ---- Bottoni ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  text-decoration: none; line-height: 1.2;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--rosso-brand); color: #fff; box-shadow: 0 2px 6px rgba(200, 16, 46, .2); }
.btn-primary:hover { background: var(--rosso-scuro); }
.btn-light { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.btn-light:hover { background: #e9ecef; }
.btn-success { background: var(--verde); color: #fff; box-shadow: 0 2px 6px rgba(46, 158, 91, .22); }
.btn-success:hover { background: var(--verde-scuro); }
.btn-warn { background: var(--arancio); color: #fff; }
.btn-warn:hover { background: var(--arancio-scuro); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-sm { padding: 7px 12px; font-size: 13px; }

/* ---- Schede tra pagine dello stesso gruppo (Contratti/Proroghe/Preventivi/...) ----
   Per non far tornare tutti al menu laterale ogni volta che devono passare da un
   documento all'altro dello stesso cliente/veicolo (Giuseppe 25/07). */
.doc-schede { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 2px solid var(--border); }
.doc-scheda { padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--navy-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; }
.doc-scheda:hover { color: var(--navy); background: var(--bg); }
.doc-scheda.is-attiva { color: var(--navy); border-bottom-color: var(--rosso-brand); }

/* ---- Azioni sempre visibili in riga (non nascoste dietro
   un solo clic sulla riga) ---- */
.az-riga { display: flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; cursor: default; }

/* ---- Tabella (dense, stile Excel) ---- */
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar input, .toolbar select { width: auto; min-width: 220px; }
/* checkbox e radio NON devono ereditare larghezza/padding dei campi di testo:
   era la causa dell'etichetta staccata dal quadratino (es. "Solo disponibili") */
input[type="checkbox"], input[type="radio"],
.toolbar input[type="checkbox"], .toolbar input[type="radio"] {
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  box-shadow: none;
}
.toolbar .spacer { flex: 1; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
thead th {
  background: #eef1f5;
  text-align: left;
  padding: 9px 13px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .35px;
  color: #374151;
  font-weight: 700;
  border-bottom: 1px solid #d0d5dc;
  border-right: 1px solid #dfe3e8;
  white-space: nowrap;
}
tbody td {
  padding: 8px 13px;
  font-size: 13px;
  border-bottom: 1px solid #eceef1;
  border-right: 1px solid #f1f2f4;
  color: #374151;
  vertical-align: middle;
}
tbody tr:nth-child(even) { background: #fafbfc; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--row-hover); }
tbody tr.sel { background: var(--row-sel); }
tbody tr.occupato { opacity: .5; background: #f3f4f6; cursor: not-allowed; }
tbody tr.occupato:hover { background: #f3f4f6; }
th:last-child, td:last-child { border-right: none; }
.muted { color: #9ca3af; }

/* ---- Badge stato ---- */
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1px;
  white-space: nowrap;
}
.badge-active { background: #e8f7ef; color: var(--verde); border: 1px solid rgba(46, 158, 91, .2); }
.badge-pending { background: #fff4e8; color: var(--arancio); border: 1px solid rgba(200, 101, 30, .2); }
.badge-suspended { background: #fef2f2; color: var(--rosso); border: 1px solid rgba(210, 59, 59, .18); }

/* ---- Messaggi ---- */
.error { background: #fef2f2; color: #b91c1c; padding: 11px 14px; border-radius: 9px; font-size: 14px; margin-top: 16px; display: none; border: 1px solid #fecaca; }
.error.show { display: block; }
.ok-msg { background: #ecfdf5; color: var(--verde-scuro); padding: 11px 14px; border-radius: 9px; font-size: 14px; margin-top: 16px; display: none; border: 1px solid #bbf7d0; }
.ok-msg.show { display: block; }

/* ---- Modale ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(28, 39, 64, .45);
  backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
}
.modal-overlay.show { display: flex; }
/* La correzione al volo (cliente/conducente) può aprirsi SOPRA un altro modale già
   aperto (es. durante il rientro) — deve sempre vincere lei, altrimenti i suoi
   bottoni restano coperti e non cliccabili (trovato il 29/07 col promemoria dati
   mancanti alla riconsegna). */
#fixCliModal.show, #fixCondModal.show { z-index: 200; }
.modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%; max-width: 480px; max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
.modal h2 { font-size: 18px; margin-bottom: 4px; font-weight: 700; }
/* I BOTTONI IN FONDO A UNA MODALE VANNO A CAPO.
   Senza flex-wrap, quattro bottoni dentro una modale da 420px escono dal
   riquadro: quelli a sinistra finiscono SOTTO il bordo e non si vedono piu'.
   Il 5/09 e' successo con la modale della firma, col cliente davanti al
   monitor: «Chiudi» era coperto dal margine sinistro. Vale per tutte. */
.modal-foot {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: flex-end; align-items: stretch;
  margin-top: 24px;
}
.modal-foot .btn { min-height: 42px; }
.modal-foot .btn-primary,
.modal-foot .btn-success { min-height: 44px; }
@media (max-width: 520px) {
  .modal-foot { flex-direction: column; }
  .modal-foot .btn { width: 100%; justify-content: center; }
  .modal-foot .btn-light { order: 2; }
  .modal-foot .btn-primary,
  .modal-foot .btn-success { order: 1; }
}

/* Modale "quasi full-screen" (Giuseppe 27/07): per i moduli con tanti campi —
   nuovo cliente al volo — dove serve vedere tutto senza scrollare al buio. */
.modal--pieno { max-width: 1180px; width: 94vw; max-height: 94vh; }
@media (max-width: 900px) { .modal--pieno { width: 96vw; } }

/* ---- Paginazione ---- */
.pagination { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.pagination .info { font-size: 13px; color: #9ca3af; }
.pagination .btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Barra navigazione pagina ---- */
.navbar-page { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); text-decoration: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: color .15s;
}
.back-link:hover { color: var(--rosso-brand); }

/* ---- Risultati ricerca ---- */
.result-item {
  padding: 9px 12px;
  border: 1px solid #eef0f3;
  border-top: none;
  cursor: pointer;
  font-size: 13.5px;
  background: var(--bg-elevated);
  transition: background .12s;
}
.result-item:first-child { border-top: 1px solid #eef0f3; border-radius: 6px 6px 0 0; }
.result-item:last-child { border-radius: 0 0 6px 6px; }
.result-item:hover { background: var(--row-hover); }

/* ---- Scheda Cliente — piena larghezza come lista Clienti / listini / calendario ---- */
.content.cust-edit-page,
.content.cust-edit-full,
.content.cust-edit-full.cust-edit-page {
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
}
.cust-edit-page { width: 100%; box-sizing: border-box; }
@media (min-width: 1200px) {
  .content.cust-edit-page .grid3,
  .content.cust-edit-full .grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .content.cust-edit-page .grid2,
  .content.cust-edit-full .grid2 {
    grid-template-columns: 1fr 1fr;
  }
  .content.cust-edit-page .cust-doc-rail,
  .content.cust-edit-full .cust-doc-rail {
    grid-template-columns: 1fr minmax(240px, 320px);
  }
}
.cust-edit-page .cust-hero {
  background: linear-gradient(135deg, #1c2740 0%, #2a3a58 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.cust-edit-page .cust-hero-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.2px;
  margin-bottom: 4px;
}
.cust-edit-page .cust-hero-sub {
  font-size: 13px;
  line-height: 1.45;
  opacity: .92;
}
.cust-edit-page .cust-hero-sub strong { color: #ffd4a8; font-weight: 700; }

.cust-edit-page .sez { margin-bottom: 14px; }
.cust-edit-page .sez-body { padding: 16px 18px 18px; }
.cust-edit-page .sez-head { font-size: 13.5px; letter-spacing: .02em; }
.cust-edit-page .sez--tipo .sez-head {
  background: linear-gradient(135deg, #1c2740 0%, #2f4468 100%);
}

.cust-edit-page .grid2,
.cust-edit-page .grid3 { gap: 12px 18px; align-items: start; }
@media (max-width: 900px) {
  .cust-edit-page .grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cust-edit-page .grid2,
  .cust-edit-page .grid3 { grid-template-columns: 1fr; }
}

.cust-edit-page .fld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 0;
  min-width: 0;
}
/* L'indirizzo prende tutta la riga: è il campo più lungo del modulo e stava
   stretto in una colonna su tre. La classe «fld--wide» era già scritta nella
   pagina dal giorno in cui è nata — mancava solo la regola, quindi non faceva
   niente e nessuno se ne accorgeva (trovato il 12/09 col controllo delle classi
   fantasma nella guardia). Città e CAP scendono sotto, affiancati. */
.cust-edit-page .fld--wide { grid-column: 1 / -1; }
.cust-edit-page .fld label {
  font-size: 12px;
  font-weight: 600;
  color: #516079;
  margin: 0;
  line-height: 1.3;
}
.cust-edit-page .fld input,
.cust-edit-page .fld select,
.cust-edit-page .fld textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1.5px solid #e2e6ec;
  border-radius: 9px;
  font-size: 13.5px;
  font-family: inherit;
  color: #1f2937;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.cust-edit-page .fld select { cursor: pointer; appearance: auto; }
.cust-edit-page .fld textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.45;
}
.cust-edit-page .fld input:focus,
.cust-edit-page .fld select:focus,
.cust-edit-page .fld textarea:focus {
  outline: none;
  border-color: var(--arancio);
  box-shadow: 0 0 0 3px rgba(200, 101, 30, .12);
}
.cust-edit-page .fld-hint {
  font-size: 11px;
  color: #8b95a5;
  line-height: 1.3;
}
.cust-edit-page .cust-subhead {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .35px;
  color: #516079;
  margin: 0 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e8ecf1;
}
.cust-edit-page .cust-subhead--spaced { margin-top: 18px; }
.cust-edit-page .cust-hint {
  font-size: 12.5px;
  color: #5b677a;
  background: #f4f7fb;
  border: 1px solid #e4eaf2;
  border-left: 3px solid var(--arancio);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
  line-height: 1.45;
}

/* Morph Privato/Azienda: comparsa morbida (display gestito da applicaTipo) */
.cust-edit-page .solo-privato,
.cust-edit-page .solo-azienda,
.cust-edit-page .cust-morph {
  animation: custMorphIn .22s ease;
}
@keyframes custMorphIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.cust-edit-page .cust-morph-row { margin-top: 10px; }

.cust-edit-page .cust-cf-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.cust-edit-page .cust-cf-row input { flex: 1; min-width: 0; }
.cust-edit-page .cust-cf-row .btn { flex-shrink: 0; white-space: nowrap; }

.cust-edit-page .cust-comune-drop {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border: 1px solid #d6dae0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 39, 64, .12);
  max-height: 220px;
  overflow: auto;
}

/* Documento / Patente: campi + rail Acquisisci a destra */
.cust-edit-page .cust-doc-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 14px;
  align-items: start;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .cust-edit-page .cust-doc-rail { grid-template-columns: 1fr; }
}
.cust-edit-page .cust-doc-side { position: sticky; top: 12px; }
.cust-edit-page .cust-acquire {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 10px;
  background: #f8fafc;
  border: 1.5px dashed #c5d0de;
  border-radius: 12px;
  min-height: 140px;
  justify-content: center;
}
.cust-edit-page .cust-acquire-ico { font-size: 22px; line-height: 1; }
.cust-edit-page .cust-acquire-tit {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #1c2740;
}
.cust-edit-page .cust-acquire-sub {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.35;
  margin-bottom: 4px;
}
.cust-edit-page .cust-acquire .btn { width: 100%; }

/* ---- Scheda veicolo — piena larghezza + hero (come cliente/contratto) ---- */
.content.car-edit-page {
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
}
.car-edit-page { width: 100%; box-sizing: border-box; }
@media (min-width: 1200px) {
  .content.car-edit-page .grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .content.car-edit-page .grid2 {
    grid-template-columns: 1fr 1fr;
  }
}
.car-edit-page .car-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #2a3a58 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.car-edit-page .car-hero-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.2px;
  margin-bottom: 3px;
}
.car-edit-page .car-hero-sub {
  font-size: 12.5px;
  line-height: 1.45;
  opacity: .92;
  color: rgba(255, 255, 255, .88);
}
.car-edit-page .car-fr-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f0f6ff;
  border: 1px solid #c8daf0;
  border-radius: var(--radius-sm);
}
.car-edit-page .car-fr-esito { font-size: 12.5px; flex: 1; min-width: 180px; }
.car-edit-page .car-hint--flush { margin-top: 0; margin-bottom: 12px; }
.car-edit-page #sezFranchigieInterne .sez-head {
  background: linear-gradient(90deg, #eef4fb 0%, #fff 100%);
  border-left: 3px solid var(--blu);
  color: #1c2740;
}

.cust-edit-page .cust-save-bar {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e2e6ec;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- T-22 Pannello operativo piazzale (touch) ---- */
.op-body {
  margin: 0;
  background: #e8ecf2;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.op-app { max-width: 720px; margin: 0 auto; min-height: 100vh; background: #f4f6f9; }
.op-view { padding-bottom: 88px; }
.op-top, .op-wiz-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: #1c2740; color: #fff; flex-wrap: wrap;
}
.op-brand { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.op-brand-rino { font-weight: 800; font-size: 18px; }
.op-brand-rent { font-weight: 800; font-size: 18px; color: #c8102e; }
.op-brand-mode { font-size: 11px; color: #9fb0c9; width: 100%; margin-top: 2px; }
.op-top-links { display: flex; gap: 8px; flex-wrap: wrap; }
.op-link {
  color: #fff; text-decoration: none; font-size: 12px; font-weight: 600;
  padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.1);
  min-height: 40px; display: inline-flex; align-items: center;
}
.op-link--desk { background: #c8651e; }
.op-daybar {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  background: #fff; border-bottom: 1px solid #e2e6ec;
}
.op-day-btn, .op-day-oggi, .op-back {
  min-width: 44px; min-height: 44px; border: 1px solid #d1d5db; border-radius: 10px;
  background: #fff; font-size: 18px; font-weight: 700; cursor: pointer; color: #1c2740;
}
.op-day-oggi { font-size: 13px; padding: 0 12px; min-width: auto; }
.op-day-label { flex: 1; text-align: center; }
.op-day-tit { display: block; font-weight: 800; color: #1c2740; font-size: 15px; }
.op-day-input { border: none; background: transparent; font-size: 13px; color: #6b7280; width: 100%; text-align: center; }
.op-cols { display: flex; flex-direction: column; gap: 16px; padding: 14px; }
@media (min-width: 700px) {
  .op-app { max-width: 960px; }
  .op-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}
.op-col-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .3px;
  padding: 10px 12px; border-radius: 10px 10px 0 0; color: #fff;
}
.op-col-head--out { background: #2e9e5b; }
.op-col-head--in { background: #c8102e; }
.op-cnt { background: rgba(0,0,0,.2); padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.op-list { background: #fff; border: 1px solid #e2e6ec; border-top: none; border-radius: 0 0 10px 10px; padding: 8px; min-height: 80px; }
.op-empty { padding: 20px; text-align: center; color: #9ca3af; font-size: 14px; }
.op-card {
  border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: #fff;
}
.op-card--late { border-color: #c8102e; box-shadow: inset 4px 0 0 #c8102e; }
.op-card-main {
  display: block; width: 100%; text-align: left; border: none; background: #fff;
  padding: 14px; cursor: pointer; min-height: 72px;
}
.op-card-main:active { background: #f3f4f6; }
.op-card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.op-card-targa { font-size: 18px; color: #1c2740; letter-spacing: .5px; }
.op-card-ora { font-size: 14px; font-weight: 700; color: #c8651e; }
.op-card-mezzo { font-size: 14px; font-weight: 600; color: #374151; margin-top: 2px; }
.op-card-cli { font-size: 13px; color: #6b7280; margin-top: 2px; }
.op-card-meta { font-size: 12px; color: #9ca3af; margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.op-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; }
.op-badge--done { background: #e8f7ef; color: #2e9e5b; }
.op-card-desk {
  display: block; text-align: center; padding: 10px; font-size: 12px; font-weight: 700;
  color: #1c2740; text-decoration: none; background: #f8fafc; border-top: 1px solid #eef0f3;
}
.op-foot-hint { padding: 8px 16px 24px; font-size: 12px; color: #6b7280; line-height: 1.45; }

.op-wiz-top .op-back { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; font-size: 14px; padding: 0 12px; min-width: auto; }
.op-wiz-meta { flex: 1; text-align: center; min-width: 0; }
.op-wiz-mode { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.op-wiz-mode.is-out { color: #7ddea3; }
.op-wiz-mode.is-in { color: #ffb4b4; }
.op-wiz-ct { font-size: 12px; color: #9fb0c9; }
.op-vehicle {
  margin: 12px 14px; padding: 14px; background: #fff; border-radius: 12px;
  border: 1px solid #e2e6ec; text-align: center;
}
.op-vehicle-targa { font-size: 28px; font-weight: 800; color: #1c2740; letter-spacing: 1px; }
.op-vehicle-name { font-size: 15px; font-weight: 600; color: #374151; }
.op-vehicle-cli { font-size: 13px; color: #6b7280; margin-top: 4px; }
.op-steps {
  display: flex; gap: 6px; padding: 0 14px 10px; overflow-x: auto;
}
.op-step-dot {
  flex: 1; min-width: 56px; border: 1px solid #d1d5db; background: #fff; border-radius: 10px;
  padding: 8px 4px; font-size: 14px; font-weight: 800; color: #9ca3af; cursor: pointer;
}
.op-step-dot span { display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; margin-top: 2px; }
.op-step-dot.is-on { background: #1c2740; color: #fff; border-color: #1c2740; }
.op-step-dot.is-done { background: #e8f7ef; color: #2e9e5b; border-color: #b7e4c7; }
.op-step-panel { padding: 8px 14px 20px; }
.op-step-tit { font-size: 18px; color: #1c2740; margin: 0 0 8px; }
.op-step-sub { font-size: 13px; color: #6b7280; margin: 0 0 12px; line-height: 1.4; }
.op-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.op-field > span:first-child { font-size: 12px; font-weight: 700; color: #516079; text-transform: uppercase; letter-spacing: .3px; }
.op-field-hint { font-size: 12px; color: #8b95a5; line-height: 1.35; }
.op-input-lg, .op-field select, .op-field textarea {
  width: 100%; min-height: 52px; font-size: 18px; padding: 12px 14px;
  border: 2px solid #d1d5db; border-radius: 12px; font-family: inherit; box-sizing: border-box;
}
.op-field textarea { min-height: 80px; font-size: 15px; }
.op-input-lg:focus, .op-field select:focus, .op-field textarea:focus {
  outline: none; border-color: #c8651e; box-shadow: 0 0 0 3px rgba(200,101,30,.15);
}
.op-fuel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 16px; }
.op-fuel-btn {
  min-height: 48px; border: 2px solid #e2e6ec; border-radius: 10px; background: #fff;
  font-weight: 700; font-size: 13px; cursor: pointer; color: #374151;
}
.op-fuel-btn.is-on { background: #1c2740; color: #fff; border-color: #1c2740; }

/* Sagoma piazzale = STESSA del contratto (.sagoma-stage), solo adattata al touch */
.op-sagoma-box {
  margin: 0 0 12px;
  padding: 12px;
}
.op-body .sagoma-stage {
  /* proporzioni identiche al contratto: cos? contain riempie il box e i % calzano */
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 779 / 642;
  overflow: hidden; /* niente punti fuori dal riquadro */
}
.op-body .sagoma-stage .sagoma-hotspot {
  width: 26px;
  height: 26px;
  font-size: 12px;
  /* tocco pi? comodo, stesso centro del contratto */
}
.op-sagoma-legend { margin: 8px 0 12px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .op-body .sagoma-stage { max-width: 100%; }
  .op-body .sagoma-stage .sagoma-hotspot { width: 28px; height: 28px; }
}

/* Wizard: spazio sotto la barra fissa (non coprire zone basse sagoma) */
#opViewWizard.op-view {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
#opViewWizard .op-step-panel[data-step="2"] {
  padding-bottom: 28px;
}
.op-dotaz { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.op-check {
  display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff;
  border: 1px solid #e2e6ec; border-radius: 10px; font-size: 15px; font-weight: 600; min-height: 48px;
}
.op-check input { width: 22px; height: 22px; }
.op-photo-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 480px) { .op-photo-grid { grid-template-columns: 1fr 1fr 1fr; } }
.op-photo-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 120px; border: 2px dashed #c5d0de; border-radius: 12px; background: #f8fafc;
  cursor: pointer; overflow: hidden;
}
.op-photo-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.op-photo-ico { font-size: 28px; }
.op-photo-lab { font-size: 12px; font-weight: 700; color: #516079; }
.op-photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.op-summary {
  background: #fff; border: 1px solid #e2e6ec; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.op-sum-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #f1f5f9; font-size: 14px;
}
.op-sum-row:last-child { border-bottom: none; }
.op-sum-row a { color: #c8651e; font-weight: 700; text-decoration: none; }
.op-firma {
  width: 100%; max-width: 100%; height: 160px; border: 2px solid #d1d5db; border-radius: 12px;
  background: #fff; touch-action: none; display: block; margin-bottom: 8px;
}
.op-protect {
  margin-top: 12px; padding: 12px; background: #fff8e6; border-left: 3px solid #c8651e;
  border-radius: 0 8px 8px 0; font-size: 13px; color: #6b5420; line-height: 1.4;
}
.op-wiz-foot {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 960px; margin: 0 auto;
  display: flex; gap: 8px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid #e2e6ec; box-shadow: 0 -4px 20px rgba(28,39,64,.08); z-index: 40;
}
.op-btn-nav, .op-btn-save { flex: 1; min-height: 52px; font-size: 16px; font-weight: 700; justify-content: center; }
.op-inline-link { color: #c8651e; font-weight: 700; }
.op-body .error { margin: 10px 14px; }

/* ---- Uscite/Rientri desktop: colonne proporzionate, Luogo senza spezzare le parole ---- */
@media (min-width: 901px) {
  .ur-page .ur-col table { table-layout: fixed; width: 100%; }
  .ur-page .ur-col thead th,
  .ur-page .ur-col tbody td { padding: 7px 8px; font-size: 12.5px; }
  /* CON «table-layout: fixed» LA LARGHEZZA È UN ORDINE, NON UN SUGGERIMENTO.
     Il numero di contratto stava al 7% — su mezzo schermo fanno ~56 pixel — ma
     «RH-2026-0380» ne vuole 95, e con nowrap non va a capo: ESCE dalla cella e
     si stampa sopra la colonna accanto. Nella pagina si leggeva
     «RH-2026-0380/09/2026 09:25», e anche le intestazioni si accavallavano
     («CONTRDATA E ORAMEZZO»). Trovato da Giuseppe il 6/09 guardando la pagina.
     Le due colonne strette adesso hanno la misura del loro contenuto vero. */
  .ur-page .ur-col th:nth-child(1),
  .ur-page .ur-col td:nth-child(1) { width: 17%; white-space: nowrap; }  /* Contr. */
  .ur-page .ur-col th:nth-child(2),
  .ur-page .ur-col td:nth-child(2) { width: 18%; white-space: nowrap; }  /* Data e ora */
  .ur-page .ur-col th:nth-child(3),
  .ur-page .ur-col td:nth-child(3) { width: 17%; }                       /* Mezzo */
  .ur-page .ur-col th:nth-child(4),
  .ur-page .ur-col td:nth-child(4) { width: 15%; }                       /* Cliente */
  .ur-page .ur-col th:nth-child(5),
  .ur-page .ur-col td:nth-child(5) {
    width: 19%;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
    line-height: 1.35;
  }                                                                      /* Luogo */
  .ur-page .ur-col th:nth-child(6),
  .ur-page .ur-col td:nth-child(6) { width: 14%; }                       /* Azioni */
  /* LA RETE SOTTO: con la larghezza fissa, se un giorno un contenuto è più
     lungo del previsto deve TAGLIARSI, non uscire. Un testo tagliato si vede
     ed è brutto; un testo che esce si stampa sopra un altro e non si legge
     nessuno dei due. */
  .ur-page .ur-col td, .ur-page .ur-col th { overflow: hidden; text-overflow: ellipsis; }
}

/* ---- T-26 Uscite/Rientri ? schede touch telefono + iPad ---- */
@media (max-width: 900px) {
  .ur-page .ur-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .ur-page .ur-bar {
    align-items: stretch;
    gap: 10px;
  }
  .ur-page .ur-bar .fld { flex: 1 1 140px; min-width: 0; }
  .ur-page .ur-bar .fld input,
  .ur-page .ur-bar .fld select {
    min-height: 44px;
    font-size: 16px; /* evita zoom iOS */
  }
  .ur-page .ur-bar .btn {
    min-height: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }
  .ur-page .ur-bar .spacer { display: none; }

  .ur-page .ur-col h3 {
    font-size: 15px;
    padding: 10px 12px;
    background: #1c2740;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .ur-page .ur-col h3 .cnt {
    background: rgba(255,255,255,.2);
    color: #fff;
  }

  .ur-page .ur-col table thead { display: none; }
  .ur-page .ur-col table,
  .ur-page .ur-col tbody { display: block; width: 100%; border: none; }
  .ur-page .ur-col tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "mezzo ora"
      "cli   cli"
      "ct    ct"
      "luogo luogo"
      "act   act";
    gap: 6px 12px;
    background: #fff;
    border: 1.5px solid #e2e6ec;
    border-radius: 14px;
    padding: 14px 14px 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(28, 39, 64, .06);
  }
  .ur-page .ur-col tr td {
    display: block;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 14px;
  }
  /* 1 Contr. ? 2 Data/Ora ? 3 Mezzo+targa ? 4 Cliente ? 5 Luogo ? 6 Azioni */
  .ur-page .ur-col td:nth-child(1) { grid-area: ct; font-size: 12px; color: #6b7280; }
  .ur-page .ur-col td:nth-child(1)::before { content: "CT "; font-weight: 600; color: #9ca3af; }
  .ur-page .ur-col td:nth-child(2) {
    grid-area: ora;
    font-size: 15px;
    font-weight: 800;
    color: #c8651e;
    text-align: right;
    white-space: nowrap;
  }
  .ur-page .ur-col td:nth-child(3) { grid-area: mezzo; }
  .ur-page .ur-col td:nth-child(3) > strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #516079;
    margin-bottom: 2px;
  }
  /* targa in evidenza (piazzale / telefono) */
  .ur-page .ur-col td:nth-child(3) .mz-2 {
    font-size: 22px;
    font-weight: 800;
    color: #1c2740;
    letter-spacing: .6px;
    line-height: 1.2;
  }
  .ur-page .ur-col td:nth-child(4) {
    grid-area: cli;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
  }
  .ur-page .ur-col td:nth-child(5) {
    grid-area: luogo;
    font-size: 12px;
    color: #9ca3af;
  }
  .ur-page .ur-col td:nth-child(5)::before { content: "📍 "; }
  .ur-page .ur-col td:nth-child(6) {
    grid-area: act;
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    padding-top: 10px !important;
    border-top: 1px solid #eef0f3 !important;
  }
  .ur-page .ur-col td:nth-child(6) .btn {
    min-height: 48px;
    flex: 1 1 140px;
    justify-content: center;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 10px;
  }

  /* Ritardo: bordo rosso leggibile (non cella rossa illeggibile) */
  .ur-page .ur-col tr:has(td.rit) {
    border-color: #c8102e;
    box-shadow: inset 4px 0 0 #8A0000, 0 2px 8px rgba(138, 0, 0, .12);
    background: #fff8f8;
  }
  .ur-page .ur-col tr:has(td.rit) td:nth-child(2) {
    color: #8A0000;
  }
  .ur-page .ur-col tr:has(td.rit) td:nth-child(2)::after {
    content: " · ritardo";
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }
}

/* ---- Gruppi di schede (Cliente/Veicolo/Finanziario): raggruppano piu' "sez"
   sotto un unico titolo, cosi' si trova a colpo d'occhio "dove sta" un dato
   invece di scorrere 11 fisarmoniche uguali (Giuseppe 25/07). Distinta apposta
   dall'arancio delle sez-head: e' una categoria, non un'altra fisarmonica. ---- */
.ct-gruppo-tit {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--navy-muted);
  margin: 22px 0 8px 2px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border-strong);
}
.ct-gruppo-tit:first-child { margin-top: 4px; }

/* ---- Form contratto a sezioni ---- */
.sez {
  background: var(--bg-elevated);
  border: 1px solid #e8ecf2;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sez-head {
  background: linear-gradient(135deg, #d46f28 0%, var(--arancio) 55%, #b85a1a 100%);
  color: #fff;
  padding: 11px 16px;
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  letter-spacing: .1px;
}
.sez-head .chev { transition: transform .2s; opacity: .9; }
.sez.closed .chev { transform: rotate(-90deg); }
.sez.closed .sez-body { display: none; }
.sez-body { padding: 16px 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 18px; }
.fld label { margin-top: 0; }
.fld { margin-bottom: 4px; }

/* Blocco prezzo unificato (contratto-edit) */
.ct-stato-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.ct-prezzo { display: flex; flex-direction: column; gap: 18px; }
.ct-prezzo-block {
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: var(--radius-sm);
}
.ct-prezzo-block + .ct-prezzo-block { margin-top: 0; }
.ct-prezzo-sub {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #516079;
  margin-bottom: 10px;
}
.ct-prezzo-listino { margin-top: 8px; }
.ct-prezzo-listino table { border: none; border-radius: 6px; overflow: hidden; }
.ct-prezzo-campi .fld { margin-bottom: 0; }
.ct-prezzo-campi input { font-weight: 600; }
.ct-prezzo-table {
  width: 100%;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  margin: 0;
  box-shadow: none;
}
.ct-prezzo-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid #e8edf3;
}
.ct-prezzo-table tr:last-child td { border-bottom: none; }
.ct-prezzo-val { text-align: right; font-weight: 600; white-space: nowrap; }
.ct-prezzo-sconto { color: var(--rosso); }
.ct-prezzo-incl { color: var(--verde); }
.ct-prezzo-totali { background: #eef5fc; }
.ct-prezzo-totali td { padding-top: 12px; padding-bottom: 12px; }

/* ---- Scheda contratto (ct-page): ordine + danno / «me la ricordo?» ---- */
.content.ct-page {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 88px;
}
.ct-page .sez { margin-bottom: 12px; }
.ct-page .sez-head { font-size: 13.5px; letter-spacing: .01em; }
.ct-page .sez-body { padding: 14px 16px 16px; }
.ct-page .ct-azioni {
  background: #f0f4fa !important;
  border-color: #d0d7e2 !important;
  border-radius: 10px !important;
}

/* ---- Tre riquadri operativi del contratto (banco / distanza / delegato) ----
   Alias delle classi riusabili `.rh-griglia` / `.rh-riquadro` (vedi DESIGN.md).
   Si distinguono anche in bianco e nero: bordo, titolo, posizione. */
.ct-tre-zone,
.rh-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 14px;
}
.ct-zona,
.rh-riquadro {
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* Banco: bordo verde grosso a sinistra — sfondo BIANCO (niente verde su verde) */
.ct-zona-banco,
.rh-riquadro--banco {
  grid-column: 1 / -1;
  border: 3px solid #16a34a;
  border-left-width: 10px;
  background: #fff;
}
.ct-zona-distanza,
.rh-riquadro--distanza {
  border: 3px solid var(--blu);
  border-top-width: 10px;
  background: #f7fafc;
}
.ct-zona-delegato,
.rh-riquadro--delegato {
  border: 3px dashed var(--arancio);
  border-left-width: 10px;
  border-left-style: solid;
  background: #fffaf5;
}
.rh-riquadro--servizio {
  border: 3px solid var(--border-strong);
  border-left-width: 10px;
  background: #f8fafc;
  grid-column: 1 / -1;
}
.ct-zona-testata,
.rh-riquadro-testata { margin: 0; }
.ct-zona-tit,
.rh-riquadro-tit {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.2px;
  color: var(--navy);
}
.ct-zona-banco .ct-zona-tit,
.rh-riquadro--banco .rh-riquadro-tit { color: #166534; }
.ct-zona-distanza .ct-zona-tit,
.rh-riquadro--distanza .rh-riquadro-tit { color: #1e4f8a; }
.ct-zona-delegato .ct-zona-tit,
.rh-riquadro--delegato .rh-riquadro-tit { color: #9a4b12; }
.rh-riquadro--servizio .rh-riquadro-tit { color: #334155; }
.ct-zona-spiega,
.rh-riquadro-spiega {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
}
.ct-zona-tasti,
.rh-riquadro-tasti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Consegna dentro il banco: resta aperta, ma più compatta e piatta */
.ct-zona-banco #sezConsegna {
  margin-bottom: 0;
  border-width: 1px !important;
  border-color: #86efac !important;
  box-shadow: none;
}
.ct-zona-banco #sezConsegna .sez-head {
  background: #16a34a !important;
  padding: 8px 12px;
  font-size: 13px;
}
.ct-zona-banco #sezConsegna .sez-body {
  padding: 10px 12px 12px;
  background: #fff;
}
/* Nel riquadro azzurro il rosso = pericolo: i tasti «primari» diventano blu */
.ct-zona-distanza .btn-primary,
.rh-riquadro--distanza .btn-primary {
  background: var(--blu);
  color: #fff;
  box-shadow: none;
  border: 1px solid #245a96;
}
.ct-zona-distanza .btn-primary:hover,
.rh-riquadro--distanza .btn-primary:hover {
  background: #245a96;
}
@media (max-width: 900px) {
  .ct-tre-zone,
  .rh-griglia { grid-template-columns: 1fr; }
  .ct-zona-tit,
  .rh-riquadro-tit { font-size: 15.5px; }
  .ct-zona-spiega,
  .rh-riquadro-spiega { font-size: 13px; }
}
.ct-mezzi-wrap {
  max-height: 280px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.ct-garanzie-tit {
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
}
.ct-garanzie-grid { margin-top: 4px; }
.ct-fr-due-riquadri {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .ct-fr-due-riquadri { grid-template-columns: 1fr; }
}
.ct-fr-box {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px 6px;
}
.ct-fr-box .grid3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px 10px; }
.ct-fr-box-tit {
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 8px;
  letter-spacing: .2px;
}
.ct-fr-box-pct { background: #eff6ff; border-color: #bfdbfe; }
.ct-fr-box-pct .ct-fr-box-tit { color: #1d4ed8; }
.ct-fr-box-eur { background: #f0fdf4; border-color: #bbf7d0; }
.ct-fr-box-eur .ct-fr-box-tit { color: #15803d; }

/* Due quadri generici (Giuseppe 26/07): stesso principio del contratto — due
   concetti distinti affiancati, non confusi in una riga sola. Riusati per
   Entrata/Uscita flotta e per Vendita/Dismissione. */
.car-due-riquadri { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
@media (max-width: 720px) { .car-due-riquadri { grid-template-columns: 1fr; } }
.car-box { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px 6px; }
.car-box .grid2, .car-box .grid3 { gap: 8px 10px; }
.car-box-tit { font-weight: 700; font-size: 12.5px; margin-bottom: 8px; letter-spacing: .2px; }
.car-box-verde { background: #f0fdf4; border-color: #bbf7d0; }
.car-box-verde .car-box-tit { color: #15803d; }
.car-box-rosso { background: #fef2f2; border-color: #fecaca; }
.car-box-rosso .car-box-tit { color: #b91c1c; }
.car-box-neutro { background: #f8fafc; border-color: #e2e8f0; }
.car-box-neutro .car-box-tit { color: #334155; }
.ct-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 16px 0 8px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #dce3ee;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  /* Non galleggia sopra i riquadri: resta in fondo al contenuto */
  position: static;
  z-index: auto;
}
.ct-page .ct-foot {
  position: static;
}

/* Calcolo danno (rientro) — id fr_* / ci_add_* intatti */
.ct-addebiti-tit {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--navy);
}
.ct-addebiti-tit .muted { font-weight: 400; font-size: 12px; }
.ct-conto-danno {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #f7fbf8 0%, #f0f7f3 100%);
  border: 1px solid #c5e0d0;
  border-left: 4px solid var(--verde, #16794c);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 4px;
}
.ct-conto-danno-lab {
  font-size: 12.5px;
  font-weight: 600;
  color: #1c2740;
  margin-bottom: 8px;
  line-height: 1.35;
}
.ct-conto-danno-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ct-conto-danno-row input {
  max-width: 140px;
  min-height: 38px;
  font-weight: 600;
}
.ct-conto-danno-row select {
  max-width: 180px;
  min-height: 38px;
}
.ct-conto-danno-esito {
  font-size: 13px;
  margin-top: 10px;
  line-height: 1.45;
  color: #1c2740;
}
.ct-conto-danno-esito:empty { margin-top: 0; }
.ct-conto-danno-esito b { color: var(--verde, #16794c); font-size: 14.5px; }
.ct-conto-danno-esito .btn { margin-top: 6px; }

/* Consegna / rientro raggruppati per momento (contratto-edit) */
.ct-momenti { display: flex; flex-direction: column; gap: 16px; }
.ct-momenti-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.ct-momento {
  padding: 14px 16px;
  border: 1px solid #e8edf3;
  border-radius: var(--radius-sm);
  background: #fafbfc;
}
.ct-momento-uscita { border-top: 3px solid var(--arancio); }
.ct-momento-rientro { border-top: 3px solid var(--verde); }
.ct-momento-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}
.ct-momento-title.uscita { color: var(--arancio); }
.ct-momento-title.rientro { color: var(--verde); }
/* Il km è un pilastro (Giuseppe 27/07): ci si basa il canone, la formula km
   illimitati, l'offerta di noleggio. Non un campo come gli altri. */
.ct-momento-km {
  max-width: 260px;
  background: #f8fafc;
  border: 1px solid #d6dae0;
  border-left: 4px solid var(--navy);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.ct-momento-km label { font-size: 13px; font-weight: 700; color: var(--navy); }
.ct-momento-km input { font-size: 19px; font-weight: 700; }
.ct-momento-sub {
  margin: 14px 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .35px;
  color: #516079;
}
.ct-momento .sagoma-box { margin-top: 4px; }
.ct-momento .sagoma-box h4 { display: none; }

/* Accessori/servizi a card */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.opt-card {
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid #e5e7eb; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13px; cursor: pointer;
  background: var(--bg-elevated);
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.opt-card:hover { background: #fafbfc; border-color: #d8dee8; box-shadow: var(--shadow-xs); }
.opt-card input { width: auto; margin-top: 2px; }
.opt-card .nome { font-weight: 600; color: #374151; }
.opt-card .prezzo { color: var(--text-muted); font-size: 12px; }

/* Dotazioni checklist */
.dotaz { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; font-size: 12.5px; }
.dotaz label { display: flex; align-items: center; gap: 7px; margin: 0; font-weight: 500; cursor: pointer; }
.dotaz input { width: auto; }

/* ---- Icone categoria a cerchio (Task 3 ? pronte per l'uso) ---- */
.cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -.2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.cat-icon--city { background: #3b82f6; }
.cat-icon--util { background: #2e9e5b; }
.cat-icon--media { background: #8b5cf6; }
.cat-icon--grande { background: #c8651e; }
.cat-icon--premium { background: #1c2740; }
.cat-icon--comm { background: #64748b; }
.cat-icon--wagon { background: #0d9488; }
.cat-cell { display: inline-flex; align-items: center; gap: 8px; }
.mz-sub.cat-cell { gap: 6px; }

/* ---- Sagoma danni interattiva ---- */
.sagoma-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sagoma-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 12px;
}
.sagoma-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid #e5e7eb;
}
.sagoma-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.sagoma-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sagoma-box {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: var(--shadow-xs);
}
.sagoma-box h4 {
  font-size: 13px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.sagoma-box h4.uscita { color: var(--verde); }
.sagoma-box h4.rientro { color: var(--rosso); }
.sagoma-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 779 / 642;
  border-radius: var(--radius-md);
  overflow: visible;
  background: #eef2f7;
  border: 1px solid #d8dee8;
}
.sagoma-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sagoma-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sagoma-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(28, 39, 64, .22);
  transition: transform .15s ease, box-shadow .15s ease;
  z-index: 2;
}
.sagoma-hotspot:hover,
.sagoma-hotspot.is-open {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 5px 14px rgba(28, 39, 64, .28);
}
.sagoma-hotspot[data-level="0"] { background: #94a3b8; }
.sagoma-hotspot[data-level="1"] { background: #f59e0b; }
.sagoma-hotspot[data-level="2"] { background: #ea580c; }
.sagoma-hotspot[data-level="3"] { background: #ef4444; }
.sagoma-hotspot[data-level="4"] { background: #c026d3; }
.sagoma-hotspot[data-level="5"] { background: #7c3aed; }
.sagoma-hotspot:hover + .sagoma-hotspot-label,
.sagoma-hotspot.is-open + .sagoma-hotspot-label { display: block !important; z-index: 30; }
.sagoma-hotspot-label {
  display: none;                         /* nascosta: appare solo al passaggio/click sul pallino (niente pi? etichette accavallate) */
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1;
  color: #4b5563;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(209, 213, 219, .9);
  border-radius: 999px;
  padding: 3px 7px;
  z-index: 1;
  pointer-events: none;
}
.sagoma-popover {
  position: absolute;
  width: min(240px, calc(100vw - 72px));
  background: var(--bg-elevated);
  border: 1px solid #d9e0ea;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 12px;
  z-index: 20;
}
.sagoma-popover[hidden] { display: none; }
.sagoma-popover-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.sagoma-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.sagoma-segmented button,
.sagoma-levels button {
  border: 1px solid #d6dce5;
  background: var(--bg-elevated);
  color: #374151;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}
.sagoma-segmented button {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
}
.sagoma-segmented button.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.sagoma-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sagoma-levels button {
  text-align: left;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.25;
}
.sagoma-levels button.active {
  border-color: var(--rosso-brand);
  background: #fff1f3;
  color: #991b1b;
}
.sagoma-tipo-select {
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #d6dae0;
  background: #fff;
  color: #1c2740;
}
.sagoma-level-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #eef2f7;
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  margin-right: 6px;
}
.sagoma-hint {
  font-size: 11.5px;
  color: #9ca3af;
  margin-top: 8px;
  text-align: center;
}
.sagoma-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  color: var(--text-muted);
  font-size: 13px;
  z-index: 1;
}

.foot { text-align: center; margin-top: 24px; font-size: 12px; color: #9ca3af; }

/* ---- Hamburger (menu su portatili/telefoni) ---- */
.hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { width: 22px; height: 2px; background: #374151; border-radius: 2px; transition: .2s; }
.sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 150; display: none; }
.sidebar-overlay.show { display: block; }

/* ---- Cataloghi master (accessori, penalit?, dotazioni?) ---- */
.catalog-page { max-width: 100%; }
.catalog-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.catalog-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy) 0%, #2a3a5c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.catalog-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.catalog-page .page-intro { margin-bottom: 0; }
.catalog-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: 18px;
  overflow: hidden;
}
.catalog-panel-head {
  background: linear-gradient(90deg, var(--arancio) 0%, #d4732a 100%);
  color: #fff;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.catalog-panel-head i { margin-right: 6px; opacity: .92; }
.catalog-form .catalog-toolbar {
  padding: 14px 16px 16px;
  margin-bottom: 0;
}
.catalog-form .error { margin: 0 16px 14px; }
.catalog-inp-sm { max-width: 120px !important; min-width: 0 !important; }
.catalog-inp-md { max-width: 200px !important; min-width: 0 !important; }
.catalog-table-wrap {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-strong);
}
.catalog-table { border: none; border-radius: 0; box-shadow: none; }
.catalog-table thead th {
  background: var(--navy);
  color: #fff;
  border-bottom: none;
  border-right: 1px solid rgba(255, 255, 255, .08);
  padding: 8px 12px;
  font-size: 11px;
}
.catalog-table tbody td {
  padding: 6px 12px;
  font-size: 12.5px;
  line-height: 1.35;
}
.catalog-table tbody tr:nth-child(even) { background: #f8f9fb; }
.catalog-table tbody tr:hover { background: var(--row-hover); }
.catalog-table .catalog-empty,
.catalog-table td.catalog-empty {
  text-align: center;
  padding: 28px 16px !important;
  color: var(--text-muted);
}
.catalog-code {
  display: inline-block;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  background: #eef1f5;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: .2px;
}
.catalog-desc { color: var(--text); font-weight: 600; }
.catalog-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.catalog-price .curr {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  margin-right: 2px;
}
.catalog-actions { white-space: nowrap; }
.catalog-actions .btn-sm { padding: 5px 10px; font-size: 12px; }
.badge-cat-tipo,
.badge-cat-tariffa {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: .1px;
}
.badge-cat-accessorio { background: #e8eef8; color: var(--navy); border: 1px solid rgba(28, 39, 64, .15); }
.badge-cat-servizio { background: #e8f7ef; color: var(--verde); border: 1px solid rgba(46, 158, 91, .2); }
.badge-cat-alt { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.badge-cat-giorn { background: #fff4e8; color: var(--arancio); border: 1px solid rgba(200, 101, 30, .2); }
.badge-cat-tantum { background: #eef1f5; color: #39507a; border: 1px solid rgba(28, 39, 64, .12); }
.badge-cat-kasko { background: #e8f7ef; color: var(--verde); border: 1px solid rgba(46, 158, 91, .2); }
.badge-cat-rca { background: #fff4e8; color: var(--arancio); border: 1px solid rgba(200, 101, 30, .2); }
.badge-cat-furto { background: #fdeef0; color: var(--rosso); border: 1px solid rgba(210, 59, 59, .18); }
.badge-cat-copertura { background: #e8eef8; color: var(--navy); border: 1px solid rgba(28, 39, 64, .15); }
.badge-cat-penalita { background: #fdeef0; color: var(--rosso); border: 1px solid rgba(210, 59, 59, .18); }
.catalog-pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); }
.catalog-durata { font-size: 12px; font-weight: 600; color: #39507a; }
.catalog-toolbar-search { max-width: 320px !important; min-width: 180px !important; }
.catalog-iban {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: .3px;
  color: var(--navy);
}
.catalog-ordine {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12.5px;
}
.catalog-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }

/* ---- Point scheda (4 tab) ---- */
.ps-page { max-width: 1200px; }
.ps-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ps-back { flex-shrink: 0; }
.ps-back i { margin-right: 4px; }
.ps-header-main { flex: 1; min-width: 0; }
.ps-header-main h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.3px;
}
.ps-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ps-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.ps-kpis .kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  padding: 0;
  min-width: 0;
  overflow: hidden;
}
.ps-kpis .kpi:nth-child(1) { border-top: 3px solid var(--arancio); }
.ps-kpis .kpi:nth-child(2) { border-top: 3px solid var(--blu); }
.ps-kpis .kpi:nth-child(3) { border-top: 3px solid var(--verde); }
.ps-kpis .kpi:nth-child(4) { border-top: 3px solid var(--navy); }
.ps-kpis .kpi b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  padding: 12px 16px 2px;
  line-height: 1.1;
}
.ps-kpis .kpi span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  font-weight: 700;
  padding: 0 16px 12px;
}
.ps-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.ps-tabs .tab-btn {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .12s, border-color .12s;
  border-radius: 8px 8px 0 0;
}
.ps-tabs .tab-btn:hover { color: var(--navy); background: rgba(28, 39, 64, .04); }
.ps-tabs .tab-btn.on {
  color: var(--navy);
  border-bottom-color: var(--arancio);
  background: rgba(200, 101, 30, .06);
}
.ps-page .tab-pane { display: none; }
.ps-page .tab-pane.on { display: block; }
.ps-tabs .tab-btn i { margin-right: 6px; opacity: .85; font-size: 12px; }
.ps-pane { animation: ps-fade .15s ease; }
@keyframes ps-fade { from { opacity: .6; } to { opacity: 1; } }
.ps-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  margin-bottom: 18px;
}
.ps-panel-head {
  background: linear-gradient(90deg, var(--arancio) 0%, #d4732a 100%);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ps-panel-head i { margin-right: 7px; opacity: .92; }
.ps-panel-head--toolbar .btn { flex-shrink: 0; }
.ps-panel-body { padding: 18px 20px 20px; }
.ps-panel-body--flush { padding: 0; }
.ps-panel-body--flush .ps-intro { padding: 14px 18px 0; margin: 0; }
.ps-panel-body--flush .catalog-table-wrap { border: none; border-radius: 0; box-shadow: none; margin-top: 12px; }
.ps-form label {
  font-size: 12px;
  color: #516079;
  font-weight: 600;
  display: block;
  margin: 6px 0 4px;
}
.ps-form input,
.ps-form select { width: 100%; }
.ps-riconsegna {
  margin-top: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff8f0 0%, #fff4e8 100%);
  border: 1px solid rgba(200, 101, 30, .22);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--arancio);
}
.ps-riconsegna-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  color: #7a4410;
  margin: 0;
  cursor: pointer;
}
.ps-riconsegna-title input { width: auto; flex-shrink: 0; margin-top: 2px; }
.ps-riconsegna-title i { color: var(--arancio); margin-top: 2px; }
.ps-riconsegna-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 8px 0 12px 28px;
  line-height: 1.55;
}
.ps-riconsegna-field { max-width: 280px; margin-left: 28px; }
.ps-riconsegna-field label {
  font-size: 12px;
  color: #516079;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.ps-save-bar {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.ps-intro { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.ps-section-title {
  margin: 20px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .35px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-section-title i { color: var(--arancio); font-size: 14px; }
.ps-page .core-pill {
  background: #e8f7ef;
  color: var(--verde);
  border: 1px solid rgba(46, 158, 91, .22);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-left: 6px;
}
.ps-page .sede-block {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  background: var(--bg-elevated);
}
.ps-page .sede-block > .sh {
  background: var(--navy);
  color: #fff;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 13.5px;
}
.ps-page .sede-block > .sh .muted { color: rgba(255, 255, 255, .65) !important; }
.ps-page .sede-block table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.ps-page .sede-block table tbody td {
  padding: 7px 14px;
  font-size: 13px;
  border-bottom: 1px solid #eceef1;
}
.ps-page .sede-block table tbody tr:nth-child(even) { background: #fafbfc; }
.ps-page .sede-block table tbody tr:hover { background: var(--row-hover); }
.ps-page .sede-block table tbody tr:last-child td { border-bottom: none; }
.ps-page #tab-sedi .catalog-actions,
.ps-page #tab-accessi .catalog-actions,
.ps-page #trafRows .catalog-actions { white-space: nowrap; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .sidebar {
    width: var(--sidebar-w) !important;
    overflow: visible;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 200;
  }
  .sidebar-inner {
    transform: none !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, .12);
  }
  .sidebar.open { transform: translateX(0); }
  .layout.sidebar-collapsed .main,
  .main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transition: none;
  }
  .sb-controls { display: none; }
  .layout.sidebar-collapsed:not(.sidebar-hover) .sb-label,
  .layout.sidebar-collapsed:not(.sidebar-hover) .sb-section,
  .layout.sidebar-collapsed:not(.sidebar-hover) .soon-tag,
  .layout.sidebar-collapsed:not(.sidebar-hover) .sb-logo-full {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .hamburger { display: flex; }
  .topbar { padding: 12px 16px; gap: 10px; }
  .topbar-quick { gap: 4px; }
  .tb-quick { padding: 8px 10px; }
  .tb-quick span { display: none; }
  .topbar { padding: 14px 18px; position: static; }
  .content { padding: 18px; }
  .main:has(.content.cal-page) {
    height: 100dvh;
    max-height: 100dvh;
  }
  .content.cal-page { padding: 10px 12px; }
  .cal-flotta-stat { font-size: 11px; padding: 3px 8px; }
  .cal-toolbar { gap: 4px; }
  .cal-filters { width: 100%; }
  .topbar h1 { font-size: 17px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar input, .toolbar select { min-width: 0; width: 100%; }
  .toolbar .spacer { display: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi-value { font-size: 26px; }
  .content table:not(.cal) { display: block; overflow-x: auto; white-space: nowrap; }
  .catalog-table-wrap { overflow-x: auto; }
  .modal { margin: 16px; }
  .grid3,
  .grid2,
  .sagoma-wrap,
  .ct-momenti-grid { grid-template-columns: 1fr; }
  .ps-header { flex-direction: column; align-items: stretch; }
  .ps-tabs .tab-btn { padding: 8px 12px; font-size: 12.5px; }
  .ps-tabs .tab-btn i { display: none; }
  .ps-panel-head--toolbar { flex-direction: column; align-items: stretch; }
  .ps-riconsegna-field { margin-left: 0; max-width: none; }
  .ps-riconsegna-desc { margin-left: 0; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .sagoma-hotspot { width: 20px; height: 20px; font-size: 10px; }
  .sagoma-hotspot-label { display: none; }
}

/* ?? LA CAMPANELLA ? allarme rientri in scadenza ?????????????????????????????
   Compare SOLO se oggi scade qualcosa: un allarme sempre acceso non ? un allarme.
   Arancio = rientri attesi oggi. Rosso col battito = c'? gi? qualcuno in ritardo. */
.tb-campanella {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-left: 6px;
  border-radius: 10px;
  color: #c8651e;
  background: rgba(200, 101, 30, .10);
  border: 1px solid rgba(200, 101, 30, .28);
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.tb-campanella:hover { background: rgba(200, 101, 30, .18); }
.tb-campanella i { font-size: 15px; }
.tb-campanella-n {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #c8651e;
  color: #fff;
  font-size: 11px; font-weight: 700; line-height: 19px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.tb-campanella.urgente {
  color: #c8102e;
  background: rgba(200, 16, 46, .10);
  border-color: rgba(200, 16, 46, .30);
}
.tb-campanella.urgente .tb-campanella-n { background: #c8102e; }
.tb-campanella.urgente i { animation: campanella-battito 2.4s ease-in-out infinite; }
@keyframes campanella-battito {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-12deg); }
  93% { transform: rotate(10deg); }
  96% { transform: rotate(-6deg); }
}
/* Chi ha chiesto meno animazioni non deve vedere la campanella muoversi */
@media (prefers-reduced-motion: reduce) {
  .tb-campanella.urgente i { animation: none; }
}

/* ============================================================
   TASTO PRIVACY (occhio) ? nasconde .riservato su tutto il prog
   Meccanismo JS in app.js (RISERVATEZZA + body.numeri-nascosti)
   ============================================================ */
.tb-privacy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #d6dae0;
  background: #f4f6f9;
  color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.tb-privacy i { font-size: 15px; }
.tb-privacy:hover {
  background: #fff;
  border-color: #b8c4d8;
}
.tb-privacy[aria-pressed="true"] {
  background: rgba(28, 39, 64, .92);
  border-color: var(--navy);
  color: #fff;
}
.tb-privacy[aria-pressed="true"]:hover {
  background: #243352;
}

/* Oscurato: pallini fissi (leggibili da telefono) + blur di emergenza */
body.numeri-nascosti .riservato {
  position: relative;
  display: inline-block;
  min-width: 3.2em;
  color: transparent !important;
  text-shadow: none !important;
  user-select: none;
  caret-color: transparent;
  filter: none;
}
body.numeri-nascosti .riservato::after {
  content: '••••';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #5f6f8f;
  font-size: 13px;
  letter-spacing: .18em;
  font-weight: 700;
  pointer-events: none;
  background: #eef1f6;
  border-radius: 6px;
  padding: 0 8px;
}
body.numeri-nascosti input.riservato,
body.numeri-nascosti textarea.riservato,
body.numeri-nascosti .riservato input,
body.numeri-nascosti .riservato textarea {
  color: transparent !important;
  -webkit-text-security: disc;
  background: #eef1f6 !important;
}
body.numeri-nascosti .riservato input::after { display: none; }

@media (max-width: 720px) {
  .tb-privacy { width: 38px; height: 38px; }
  body.numeri-nascosti .riservato::after {
    justify-content: center;
    font-size: 12px;
  }
}

/* ============================================================
   T-28 ? Suggeritore mattino + T-24 ? Landing (dashboard)
   ============================================================ */
.sg {
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #dce3ee;
  border-radius: 10px;
  padding: 0;
  box-shadow: var(--shadow-xs);
}
.sg > summary.sg-sum {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.sg > summary.sg-sum::-webkit-details-marker { display: none; }
.sg > summary.sg-sum::before {
  content: '▸';
  color: #9ca3af;
  font-size: 11px;
  margin-right: 2px;
}
.sg[open] > summary.sg-sum::before { content: '▾'; }
.sg-sum-hint { font-size: 11.5px; color: #9ca3af; font-weight: 500; }
.sg[open] .sg-sum-hint { display: none; }
.sg[open] > .sg-loading,
.sg[open] > .sg-body,
.sg[open] > .sg-err,
.sg[open] > #sgSelettore { padding-left: 14px; padding-right: 14px; }
.sg[open] > .sg-body,
.sg[open] > .sg-err { padding-bottom: 12px; }
.sg-day-line { margin: 0 0 8px; font-size: 12px; color: #6b778c; }
.sg-point-line { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.sg-loading {
  color: #516079;
  font-size: 14px;
  padding: 8px 2px;
}
.sg-err-soft {
  margin: 0;
  font-size: 13.5px;
  color: #516079;
  line-height: 1.5;
}
.sg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.sg-kicker {
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}
.sg-day { font-size: 12.5px; color: #6b778c; }
.sg-frasi { display: flex; flex-direction: column; gap: 8px; }
.sg-frase {
  margin: 0;
  padding: 10px 12px 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--navy);
  background: #f7f9fc;
  border-left: 3px solid #c5d0e0;
}
.sg-frase--lead {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  padding: 10px 12px 10px 14px;
  background: #f0f4fa;
}
.sg-frase--att {
  border-left-color: #c8102e;
  background: #fff5f6;
  color: #6b1020;
}
.sg-frase--att.sg-frase--lead { background: #ffecee; }
.sg-frase--oggi {
  border-left-color: #c8651e;
  background: #fff8f1;
}
.sg-frase--neutro { border-left-color: #8fa0b8; }

.sg-and {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.sg-and-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f4f6f9;
  border: 1px solid #e2e6ec;
  min-width: 140px;
}
.sg-and-lab { font-size: 11.5px; color: #6b778c; font-weight: 600; }
.sg-and-pill strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.sg-and-pill strong.up { color: #2e9e5b; }
.sg-and-pill strong.down { color: #c8102e; }

.sg-promesse {
  margin-top: 12px;
  padding: 0;
  border: 1px solid #e8ecf2;
  border-radius: 10px;
  background: #fafbfd;
}
.sg-promesse > summary.sg-promesse-tit {
  list-style: none;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-promesse > summary.sg-promesse-tit::-webkit-details-marker { display: none; }
.sg-promesse > summary.sg-promesse-tit::before { content: '▸'; color: #9ca3af; font-size: 10px; }
.sg-promesse[open] > summary.sg-promesse-tit::before { content: '▾'; }
.sg-promesse-n {
  font-size: 11px; font-weight: 700; color: #6b778c;
  background: #eef1f6; padding: 1px 7px; border-radius: 999px;
}
.sg-promesse[open] .sg-promesse-intro,
.sg-promesse[open] ul { padding: 0 12px 10px; }
.sg-promesse-intro {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #6b778c;
  line-height: 1.4;
}
.sg-promesse ul { list-style: none; margin: 0; padding: 0; }
.sg-pr {
  padding: 8px 0;
  border-top: 1px solid #e8edf5;
}
.sg-pr:first-of-type { border-top: 0; padding-top: 0; }
.sg-pr-manca { font-size: 13px; color: var(--navy); margin-bottom: 3px; }
.sg-pr-n { font-weight: 600; color: #6b778c; font-size: 12px; }
.sg-pr-non { font-size: 12.5px; color: #3d4a63; line-height: 1.4; margin-bottom: 3px; }
.sg-pr-come { font-size: 11.5px; color: #7a8699; line-height: 1.35; }

.sg-fermi { margin-top: 16px; }
.sg-fermi-tit {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 750;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sg-fermi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sg-mezzo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #dce3ee;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.sg-mezzo:hover {
  border-color: #c8651e;
  box-shadow: 0 2px 8px rgba(200, 101, 30, .12);
}
.sg-mezzo-targa {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.sg-mezzo-nome { font-size: 12px; color: #6b778c; }

.sg-ric {
  margin: 14px 0 0;
  font-size: 13px;
  color: #516079;
}
.sg-nota {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed #dce3ee;
  font-size: 11.5px;
  color: #8a95a8;
  line-height: 1.45;
}

/* T-24 landing sulla dashboard */
.bv { margin-bottom: 22px; }
.bv-hero {
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1c2740 0%, #2a3d5c 100%);
  color: #fff;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}
.bv-hero-title { font-size: 20px; font-weight: 750; margin-bottom: 4px; }
.bv-hero-sub { font-size: 13.5px; opacity: .88; line-height: 1.45; max-width: 40em; }
.bv-sez {
  background: #fff;
  border: 1px solid #dce3ee;
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin-bottom: 12px;
}
.bv-sez--soft { background: #f7f9fc; }
.bv-sez--pulse {
  border-color: rgba(200, 101, 30, .35);
  background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
}
.bv-sez-tit {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--navy);
}
.bv-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bv-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px solid #e2e6ec;
  background: #fafbfd;
  text-decoration: none;
  color: inherit;
  min-height: 96px;
  transition: border-color .15s, transform .12s;
}
.bv-step:hover {
  border-color: #c8651e;
  background: #fff;
  transform: translateY(-1px);
}
.bv-n {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.bv-step-tit { font-size: 14.5px; font-weight: 750; color: var(--navy); }
.bv-step-sub { font-size: 12.5px; color: #6b778c; line-height: 1.35; }
.bv-novita {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: #3d4a63;
  line-height: 1.55;
}
.bv-novita li { margin-bottom: 6px; }
.bv-novita strong { color: var(--navy); }
.bv-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.bv-p { margin: 0 0 12px; font-size: 13.5px; color: #516079; line-height: 1.5; }
.bv-cta { min-height: 44px; }
.bv-contatti {
  text-align: center;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed #c5d0e0;
  background: #fafbfd;
}
.bv-contatti-nome {
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 4px;
}
.bv-contatti a {
  color: #c8651e;
  font-weight: 650;
  text-decoration: none;
  font-size: 14px;
}
.bv-contatti a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .bv-steps { grid-template-columns: 1fr 1fr; }
  .bv-grid2 { grid-template-columns: 1fr; }
  .sg-frase--lead { font-size: 16.5px; }
}
@media (max-width: 520px) {
  .bv-steps { grid-template-columns: 1fr; }
  .sg { padding: 14px 12px; }
  .sg-mezzo { flex: 1 1 calc(50% - 8px); min-width: 0; }
}

/* ?? TASTO PRIVACY ? come le app della banca ?????????????????????????????????
   Un occhio nella barra in alto: nasconde gli importi quando c'? qualcuno davanti.
   Cursor: questo ? il funzionamento di base, la veste rifinita ? tua (T-28). */
.tb-privacy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 6px;
  border-radius: 10px; cursor: pointer; flex-shrink: 0;
  color: #516079; background: #eef1f5; border: 1px solid #dde1e8;
  transition: background .15s, color .15s;
}
.tb-privacy:hover { background: #e2e7ee; }
.tb-privacy i { font-size: 15px; }
.tb-privacy[aria-pressed="true"] {
  color: #1c2740; background: rgba(28, 39, 64, .12); border-color: rgba(28, 39, 64, .3);
}

/* Il numero nascosto resta al suo posto ? la pagina non si muove sotto le mani.
   Si legge che c'? qualcosa, non si legge quanto. */
body.numeri-nascosti .riservato {
  color: transparent !important;
  background: currentColor;
  position: relative;
  border-radius: 4px;
  user-select: none;
}
body.numeri-nascosti .riservato::after {
  content: "•••••";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: inherit;
  color: #97a0b0; letter-spacing: 2px; font-weight: 700;
}
body.numeri-nascosti .riservato { background: #e6e9ef; }

/* ============================================================
   T-27 ? Listini V6 ? periodi, nastro mesi, griglia (tablet/telefono)
   ============================================================ */
.ln-v6 { max-width: none; width: 100%; }
.ln-v6 .cust-hero { margin-bottom: 16px; }
.ln-v6 .cust-hero-title { font-size: 22px; }
.ln-v6 .cust-hero-sub { font-size: 13.5px; max-width: 52em; }
.ln-admin {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 10px 12px; background: #f7f9fc;
  border: 1px solid #e2e6ec; border-radius: 10px;
}
.ln-admin label { font-size: 12.5px; font-weight: 700; color: #516079; }
.ln-admin select { min-height: 40px; min-width: 200px; max-width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #cfd8e6; }

.ln-ribbon-wrap { margin-bottom: 4px; }
.ln-ribbon-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.ln-ribbon-head h3 {
  margin: 0; font-size: 13.5px; font-weight: 700; color: var(--navy);
  letter-spacing: .02em; text-transform: uppercase;
}
.ln-ribbon-legend { display: flex; gap: 14px; font-size: 12px; color: #516079; flex-wrap: wrap; }
.ln-ribbon-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ln-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ln-dot--ok { background: var(--verde); }
.ln-dot--gap { background: #c8102e; }
.ln-dot--partial { background: var(--arancio); }
.ln-ribbon {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px;
  background: #eef1f6; border-radius: 10px; padding: 8px;
}
.ln-m {
  min-height: 48px; border-radius: 6px; padding: 6px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11px; font-weight: 700; color: #fff; text-align: center;
  user-select: none;
}
.ln-m small { font-weight: 500; font-size: 9px; opacity: .9; }
.ln-m--ok { background: var(--verde); }
.ln-m--gap { background: #c8102e; }
.ln-m--partial { background: var(--arancio); }
.ln-ribbon-note { margin: 8px 0 0; font-size: 12.5px; color: #516079; line-height: 1.4; }
.ln-ribbon-note .warn { color: #c8102e; font-weight: 700; }

.ln-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.ln-toolbar .muted { font-size: 13px; }
.ln-periods { display: flex; flex-direction: column; gap: 10px; }
.ln-card {
  background: #fff; border: 1px solid #dce3ee; border-radius: 12px;
  padding: 14px 16px; display: grid;
  grid-template-columns: 1fr auto; gap: 12px 16px; align-items: center;
}
.ln-card:hover { border-color: #b8c4d8; box-shadow: 0 2px 10px rgba(28,39,64,.06); }
.ln-card--off { opacity: .62; }
.ln-card-title { margin: 0 0 4px; font-size: 16px; font-weight: 750; color: var(--navy); }
.ln-card-meta {
  margin: 0; font-size: 13px; color: #516079; display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.ln-card-meta strong { color: var(--navy); font-weight: 650; }
.ln-card-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ln-card-actions .btn { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }
.ln-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; letter-spacing: .02em; text-transform: uppercase; vertical-align: middle;
}
.ln-badge--on { background: #e6f6ec; color: var(--verde); }
.ln-badge--off { background: #f0f2f6; color: #6b778c; }
.ln-empty {
  text-align: center; padding: 32px 16px; border: 1px dashed #c5d0e0;
  border-radius: 12px; background: #fafbfd; color: #516079;
}
.ln-empty h3 { margin: 0 0 8px; color: var(--navy); font-size: 16px; }
.ln-empty p { margin: 0 0 16px; font-size: 13.5px; max-width: 36em; margin-inline: auto; line-height: 1.45; }

.ln-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; color: #516079; text-decoration: none; margin-bottom: 10px;
}
.ln-back:hover { color: var(--navy); }
.ln-period-hero {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ln-period-hero h2 { margin: 0 0 4px; font-size: 19px; color: var(--navy); }
.ln-period-hero p { margin: 0; font-size: 13.5px; color: #516079; }
.ln-proposta-note {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  background: #fff8f1; border: 1px solid #f0d4b8; color: #6b4520;
  font-size: 12.5px; line-height: 1.45;
}
.ln-grid-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid #dce3ee; border-radius: 12px; background: #fff;
  margin: 0 -2px; /* un filo di aria su telefono */
}
.ln-grid {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ln-grid th, .ln-grid td {
  border-bottom: 1px solid #e8edf5; padding: 8px 6px; text-align: center; vertical-align: middle;
}
.ln-grid thead th {
  background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 650;
  letter-spacing: .02em; position: sticky; top: 0; z-index: 1;
}
.ln-grid thead th:first-child { text-align: left; padding-left: 12px; border-radius: 11px 0 0 0; }
.ln-grid thead th:last-child { border-radius: 0 11px 0 0; }
.ln-grid tbody th {
  text-align: left; padding-left: 12px; font-size: 13px; color: var(--navy);
  background: #f7f9fc; font-weight: 700; white-space: nowrap; max-width: 120px;
}
.ln-grid .ln-cell input {
  width: 100%; max-width: 84px; margin: 0 auto; display: block;
  text-align: right; font-size: 15px; font-weight: 650; padding: 10px 6px;
  border: 1px solid #cfd8e6; border-radius: 8px; background: #fff; color: var(--navy);
  min-height: 44px;
}
.ln-grid .ln-cell input:focus {
  outline: none; border-color: var(--arancio); box-shadow: 0 0 0 3px rgba(200,101,30,.18);
}
.ln-grid .ln-cell input::placeholder { color: #b0bac8; font-weight: 500; }
.ln-km-row td {
  background: #fafbfd; font-size: 12.5px; color: #516079; padding: 8px 10px 12px;
  border-bottom: 2px solid #e8edf5;
}
.ln-km-row .ln-km-fields {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding-left: 2px;
}
.ln-km-row label { font-weight: 650; color: var(--navy); margin-right: 4px; }
.ln-km-row input:not([type="checkbox"]) {
  width: 80px; padding: 8px; border: 1px solid #cfd8e6; border-radius: 8px;
  min-height: 40px; text-align: right; font-size: 14px;
}
.ln-km-illimitati {
  font-weight: 500 !important;
  color: #374151 !important;
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px;
}
.ln-km-illimitati input[type="checkbox"] { width: auto; min-height: auto; }
.ln-foot-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #e8edf5;
}
.ln-foot-actions .btn { min-height: 44px; padding: 10px 18px; font-size: 14px; }

.ln-v6 .modal .fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ln-v6 .modal .fld label { font-size: 12.5px; font-weight: 600; color: #516079; }
.ln-v6 .modal .row2 { display: flex; gap: 12px; flex-wrap: wrap; }
.ln-v6 .modal .row2 .fld { flex: 1; min-width: 140px; }
.ln-v6 .fld-hint { font-size: 11.5px; color: #7a8699; }

/* Modal periodo (fuori da .content) */
#modalPeriodo .fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
#modalPeriodo .fld label { font-size: 12.5px; font-weight: 600; color: #516079; }
#modalPeriodo .row2 { display: flex; gap: 12px; flex-wrap: wrap; }
#modalPeriodo .row2 .fld { flex: 1; min-width: 140px; }
#modalPeriodo .fld-hint { font-size: 11.5px; color: #7a8699; }
#modalPeriodo input { min-height: 40px; padding: 8px 10px; border: 1px solid #cfd8e6; border-radius: 8px; font-size: 15px; }

@media (max-width: 900px) {
  .ln-card { grid-template-columns: 1fr; }
  .ln-card-actions { justify-content: stretch; }
  .ln-card-actions .btn { flex: 1; min-width: 0; }
  .ln-period-hero .ln-card-actions { width: 100%; }
  .ln-period-hero .ln-card-actions .btn { flex: 1 1 40%; }
  .ln-ribbon { gap: 3px; padding: 6px; }
  .ln-m { min-height: 40px; font-size: 10px; }
  .ln-m small { display: none; }
}
@media (max-width: 520px) {
  .ln-ribbon { grid-template-columns: repeat(6, 1fr); }
  .ln-v6 .cust-hero-title { font-size: 18px; }
  .ln-grid { min-width: 480px; }
  .ln-grid tbody th { font-size: 12px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
  .ln-grid .ln-cell input { max-width: 68px; font-size: 14px; padding: 8px 4px; }
  .ln-foot-actions { flex-direction: column-reverse; }
  .ln-foot-actions .btn { width: 100%; }
}

/* L'etichetta dice anche DI QUALE PERIODO parla: senza, il ?-1,1%? non vuol dire niente */
.sg-and-lab small { display: block; font-size: 10.5px; opacity: .75; font-weight: 400; margin-top: 1px; line-height: 1.3; }

/* ============================================================
   T-29 ? Lavagna dashboard ? dove sono i mezzi (full PC)
   ============================================================ */
.content.dash-lavagna-page {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-top: 12px;
}
.dash-hero--slim { padding: 12px 16px; margin-bottom: 12px; }
.dash-contatori .panel > h2 { font-size: 15px; }
.lv {
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid #dce3ee;
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
}
.lv--hero {
  border: 2px solid #b8c5d8;
  box-shadow: var(--shadow-md);
  background: linear-gradient(165deg, #ffffff 0%, #f3f6fb 55%, #eef2f8 100%);
  padding: 20px 20px 18px;
  margin-bottom: 16px;
}
.lv-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  min-height: 280px;
}
.lv-board > .lv-sez {
  margin-bottom: 0;
  min-height: 260px;
  padding: 14px 14px 12px;
  background: #fff;
  border: 1px solid #d5dde9;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(28,39,64,.04);
}
.lv-board > .lv-sez .lv-lista,
.lv-board > .lv-sez .lv-arrivi {
  flex: 1 1 auto;
}
.lv-board > .lv-sez .lv-info {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
  font-size: 14px;
  padding: 16px;
}
.lv-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.lv-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; }
.lv-sub { margin: 0; font-size: 13.5px; color: #516079; max-width: 48em; line-height: 1.4; }
.lv-sel { display: flex; align-items: center; gap: 8px; }
.lv-sel-lab { font-size: 12px; font-weight: 650; color: #6b778c; }
.lv-sel select {
  min-height: 34px; min-width: 180px; max-width: 100%;
  padding: 6px 8px; border-radius: 8px; border: 1px solid #cfd8e6; font-size: 13px;
}
.lv-loading { color: #516079; font-size: 13px; padding: 6px 0; }
.lv-sez { margin-bottom: 12px; }
.lv-sez:last-child { margin-bottom: 0; }
.lv-sez-tit {
  margin: 0; font-size: 13px; font-weight: 750;
  letter-spacing: .03em; text-transform: uppercase; color: var(--navy);
  display: inline-flex; align-items: center; gap: 7px;
}
.lv-sez-n {
  font-size: 12px; font-weight: 800; color: #fff;
  background: var(--navy); padding: 2px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.lv-hint { margin: 6px 0 0; font-size: 11.5px; color: #6b778c; line-height: 1.35; }
.lv-info {
  margin: 0; padding: 8px 10px; border-radius: 8px;
  background: #f4f6f9; border: 1px dashed #c5d0e0;
  font-size: 12.5px; color: #516079; line-height: 1.4;
}
.lv-colonne, .lv-arrivi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lv-col {
  border: 1px solid #e2e6ec;
  border-radius: 12px;
  overflow: hidden;
  background: #fafbfd;
  border-top: 3px solid var(--lv-c, #516079);
}
.lv-col-head {
  padding: 10px 12px; font-size: 13.5px; font-weight: 750;
  color: var(--navy); background: #fff; border-bottom: 1px solid #eef1f6;
}
.lv-ico { margin-right: 4px; }
.lv-col-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.lv-mezzo, .lv-arrivo {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px; border-radius: 8px;
  background: #fff; border: 1px solid #e2e6ec;
  text-decoration: none; color: inherit;
  min-height: 0; transition: border-color .15s, box-shadow .15s;
}
.lv-mezzo:hover, .lv-arrivo:hover {
  border-color: #c8651e;
  box-shadow: 0 2px 8px rgba(200,101,30,.1);
}
.lv-mezzo--rit {
  border-color: #c8102e;
  background: #fff5f6;
}
.lv-targa {
  font-weight: 800; font-size: 14.5px; letter-spacing: .03em;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.lv-mod { font-size: 12.5px; color: #516079; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-meta { font-size: 12px; color: #6b778c; line-height: 1.35; }
.lv-rit {
  margin-top: 4px; align-self: flex-start;
  font-size: 11px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .04em; color: #c8102e;
  background: #ffe8eb; padding: 2px 8px; border-radius: 999px;
}
.lv-empty { margin: 0; color: #516079; font-size: 14px; }

@media (max-width: 720px) {
  .lv { padding: 12px 10px; }
  .lv-title { font-size: 16px; }
  .lv-board { grid-template-columns: 1fr; gap: 8px; }
  .lv-colonne, .lv-arrivi { grid-template-columns: 1fr; gap: 6px; }
  .lv-sel { width: 100%; }
  .lv-sel select { flex: 1; min-width: 0; }
}
@media (max-width: 1100px) {
  .lv-board { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .lv-colonne, .lv-arrivi { grid-template-columns: 1fr; }
}

/* T-29 gesti lavagna ? da fare / fuori / fermo tecnico */
.lv-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lv-sez-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.lv-sez-top .lv-sez-tit { margin: 0; }
.lv-sez-pill {
  font-size: 10px; font-weight: 650; color: #516079;
  background: #eef1f6; padding: 2px 8px; border-radius: 999px;
}
.lv-sez-pill--out { background: #fff0f0; color: #c8102e; }
.lv-lista { display: flex; flex-direction: column; gap: 5px; }
.lv-riga {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 10px;
  align-items: center; padding: 8px 10px;
  background: #fff; border: 1px solid #e2e6ec; border-radius: 8px;
}
.lv-riga--rit {
  border-color: #c8102e;
  background: #fff5f6;
  box-shadow: inset 3px 0 0 #c8102e;
}
.lv-riga-main { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lv-riga-act { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.lv-riga-act .btn {
  min-height: 0; padding: 4px 8px; font-size: 11px; white-space: nowrap;
}
.lv-modal-sub { margin: 0 0 12px; font-size: 13px; color: #516079; line-height: 1.4; }
#modalPortato .fld, #modalNuovoFermo .fld {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px;
}
#modalPortato .fld label, #modalNuovoFermo .fld label {
  font-size: 12.5px; font-weight: 600; color: #516079;
}
#modalPortato .fld-hint, #modalNuovoFermo .fld-hint { font-size: 11.5px; color: #7a8699; }
#modalPortato input, #modalNuovoFermo input, #modalNuovoFermo select {
  min-height: 42px; padding: 8px 10px; border: 1px solid #cfd8e6; border-radius: 8px; font-size: 15px;
}
#modalNuovoFermo .row2 { display: flex; gap: 12px; flex-wrap: wrap; }
#modalNuovoFermo .row2 .fld { flex: 1; min-width: 140px; }

@media (max-width: 720px) {
  .lv-riga { grid-template-columns: 1fr; }
  .lv-riga-act .btn { flex: 1; }
  .lv-head-actions { width: 100%; }
  .lv-head-actions .btn { width: 100%; }
}

/* T-23 Archivio cliente (scheda) */
.arch-box {
  background: #f7f9fc; border: 1px solid #e2e6ec; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px;
}
.arch-row {
  display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0;
  border-bottom: 1px solid #eef1f6; font-size: 13.5px;
}
.arch-row:last-child { border-bottom: 0; }
.arch-lab { min-width: 110px; color: #6b778c; font-weight: 600; }
.arch-stato { font-weight: 750; }
.arch-stato--ok { color: #2e9e5b; }
.arch-stato--wait { color: #c8651e; }
.arch-stato--bad {
  color: #c8102e; background: #ffe8eb; padding: 2px 10px; border-radius: 999px;
}
.arch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.arch-actions .btn { min-height: 42px; }

/* Percorso completo: riga da copiare (niente «scegli cartella») */
.arch-percorso {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #d0d7e2;
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}
.arch-percorso-lab {
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b778c;
  margin-bottom: 8px;
}
.arch-percorso-riga {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.arch-path {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  font-family: ui-monospace, Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: var(--navy);
  background: #f4f6f9;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  word-break: break-all;
  white-space: pre-wrap;
}
.arch-path--vuoto { color: #9ca3af; font-style: italic; }
.arch-percorso-riga .btn {
  flex: 0 0 auto;
  min-height: 42px;
  white-space: nowrap;
  align-self: center;
}
.arch-avviso {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #5b4a1e;
  background: #fff8e6;
  border: 1px solid #f0d78c;
  border-left: 4px solid #c8651e;
  border-radius: 8px;
}
.arch-scegli {
  margin: 0 0 12px;
  padding: 14px 16px;
  background: #f7fbf8;
  border: 1px solid #c5e0d0;
  border-radius: 12px;
}
.arch-scegli .btn { min-height: 44px; }
.arch-scegli .fld-hint { margin-top: 8px; margin-bottom: 0; }
.arch-pronto { margin-bottom: 8px; }
@media (max-width: 640px) {
  .arch-percorso-riga .btn { width: 100%; justify-content: center; }
}

/* T-23 Foto su zona sagoma (operativo) */
.op-zona-sheet {
  margin: 12px 0; padding: 14px; border-radius: 12px;
  background: #fff; border: 1px solid #dce3ee; box-shadow: var(--shadow-sm);
}
.op-zona-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.op-zona-lab { display: block; font-size: 12px; font-weight: 700; color: #516079; margin-bottom: 6px; }
.op-zona-levels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.op-zona-lv {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid #cfd8e6;
  background: #f4f6f9; font-weight: 750; cursor: pointer; font-size: 15px;
}
.op-zona-lv.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.op-zona-foto-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 16px; border-radius: 10px;
  background: #fff8f1; border: 1px dashed #c8651e; color: #c8651e;
  font-weight: 700; cursor: pointer; margin-bottom: 8px;
}
.op-zona-foto img { max-width: 100%; max-height: 160px; border-radius: 8px; display: block; margin: 8px 0; }
.op-zona-riep { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.op-zona-riep-tit { width: 100%; font-size: 12px; font-weight: 700; color: #516079; margin: 0 0 4px; }
.op-zona-chip {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: #eef1f6; color: var(--navy); font-weight: 650;
}
.sagoma-hotspot.has-foto { box-shadow: 0 0 0 2px #c8651e; }

/* ============================================================
   IL NASTRO CHE CAMMINA — "lo sapevi?"
   Giuseppe: niente avviso schiacciato davanti che blocca il lavoro. Passa di
   sotto, come le scritte in fondo ai telegiornali, e si puo' sempre chiudere.
   Questa e' la versione che FUNZIONA: la rifinitura estetica e' di Cursor (T-30).
   ============================================================ */
.nastro-sugg {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px;
  background: linear-gradient(90deg, #1c2740 0%, #24314e 100%);
  color: #e8eef8; font-size: 13px;
  border-top: 2px solid var(--arancio, #e07b39);
  box-shadow: 0 -2px 10px rgba(28, 39, 64, .18);
}
.nastro-eti {
  flex-shrink: 0; font-weight: 800; font-size: 11px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--arancio, #e07b39);
  border-right: 1px solid rgba(255, 255, 255, .18); padding-right: 12px;
}
.nastro-pista { flex: 1; overflow: hidden; }
.nastro-testo {
  display: inline-block; white-space: nowrap; color: inherit; text-decoration: none;
  padding-left: 100%; animation: nastro-cammina 34s linear infinite;
}
.nastro-testo:hover { text-decoration: underline; animation-play-state: paused; }
@keyframes nastro-cammina { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* Chi ha chiesto di non far muovere le cose non se le vede muovere: resta ferma e leggibile. */
@media (prefers-reduced-motion: reduce) {
  .nastro-testo { animation: none; padding-left: 0; white-space: normal; }
}
.nastro-chiudi {
  flex-shrink: 0; background: none; border: 0; color: #9fb0c9;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.nastro-chiudi:hover { color: #fff; }
/* Il nastro non deve coprire l'ultima riga di quello che si sta leggendo */
body:has(.nastro-sugg) .content { padding-bottom: 56px; }
@media (max-width: 640px) { .nastro-eti { display: none; } }

/* I due scoperti che costano soldi al rientro. Non e' piu' l'elenco delle cose
   non compilate — quello e' passato al nastro, una per volta. Qui restano solo
   i contratti aperti su cui, senza il dato, al rientro non si puo' chiedere nulla. */
.sg-scoperti {
  margin-top: 14px; padding: 12px 14px;
  background: #fff7ed; border: 1px solid #fdba74; border-left: 4px solid var(--arancio, #e07b39);
  border-radius: 8px;
}
.sg-scoperti-tit { font-weight: 700; font-size: 13px; color: #9a3412; margin-bottom: 8px; }
.sg-scoperti ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sg-scoperti .sg-pr { font-size: 13px; color: #1c2740; }
.sg-scoperti .sg-pr strong { font-size: 17px; color: #9a3412; }
.sg-scoperti .sg-pr-non { font-size: 12px; color: #6b7280; margin-top: 2px; }
.sg-scoperti .sg-pr-come { font-size: 12px; color: #16794c; margin-top: 1px; }

/* AUTOCOMPILAZIONE ASSISTITA — «me la ricordo?»
   Il programma ha imparato qualcosa mentre il point lavorava e chiede il permesso
   di tenerselo. Come il nastro: passa di sotto, non blocca, si puo' ignorare.
   Rifinitura estetica: Cursor. */
.chiedi-default {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 400; display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  max-width: min(720px, calc(100vw - 32px));
  padding: 14px 16px; background: #fff;
  border: 1px solid var(--border-strong, #d0d7e2); border-left: 4px solid var(--verde, #16794c);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(28, 39, 64, .22);
  animation: cd-sale .22s ease-out;
}
@keyframes cd-sale { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .chiedi-default { animation: none; } }
.chiedi-default .cd-testo {
  flex: 1 1 280px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #1c2740;
  min-width: 0;
}
.chiedi-default .cd-testo b {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--verde, #16794c);
  margin-bottom: 3px;
}
.chiedi-default .btn {
  flex: 0 0 auto;
  min-height: 36px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .chiedi-default {
    left: 8px; right: 8px; bottom: 12px;
    transform: none; max-width: none;
  }
  .chiedi-default .btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
}

/* LO SQUILLO — campanello d'allarme errori nella barra admin.
   Rosso e pulsante: si accende SOLO se un point ha un problema adesso, così non
   è un allarme sempre acceso. Rifinitura estetica: Cursor. */
.tb-allarme {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: 4px; border-radius: 10px;
  background: #fef2f2; color: #dc2626; text-decoration: none;
  border: 1px solid #fecaca; animation: allarme-pulsa 1.4s ease-in-out infinite;
}
.tb-allarme:hover { background: #fee2e2; }
.tb-allarme-n {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  background: #dc2626; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
@keyframes allarme-pulsa { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }
@media (prefers-reduced-motion: reduce) { .tb-allarme { animation: none; } }

/* ASSISTENZA REMOTA (AnyDesk) — in cima alle Segnalazioni: è lì che il point va
   quando ha un problema. Non tracciamo niente: si collega lui e chiude quando vuole. */
.seg-anydesk {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin: 0 0 20px; padding: 14px 16px;
  background: #f0f7ff; border: 1px solid #bfdbfe; border-left: 4px solid #2f6fb0;
  border-radius: 10px;
}
.seg-anydesk-txt { flex: 1 1 340px; }
.seg-anydesk-tit { font-weight: 700; font-size: 14px; color: #1c2740; margin-bottom: 4px; }
.seg-anydesk p { margin: 0; font-size: 13px; line-height: 1.55; color: #44506a; }
.seg-anydesk-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .seg-anydesk-act { width: 100%; } .seg-anydesk-act .btn { flex: 1; justify-content: center; } }

/* Schede-suggerimento: importi consigliati cliccabili con icona e motivo breve */
.fr-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; align-items: stretch; }
.fr-suggerimento {
  display: inline-flex; align-items: flex-start; gap: 6px; flex: 0 1 auto;
  min-width: 92px; max-width: 118px; padding: 8px 9px; text-align: left;
  background: #f8fafc; border: 1.5px solid #d0d7e2; border-radius: 10px;
  cursor: pointer; line-height: 1.25; transition: background .12s, border-color .12s, box-shadow .12s;
  font-family: inherit;
}
.fr-suggerimento:hover { background: #eef2f7; border-color: #94a3b8; box-shadow: 0 2px 6px rgba(28,39,64,.08); }
.fr-suggerimento:active { background: #e2e8f0; }
.fr-suggerimento-ico { font-size: 13px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.fr-suggerimento-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-suggerimento-val { font-size: 13px; font-weight: 700; color: var(--navy); }
.fr-suggerimento-perche { font-size: 10.5px; font-weight: 500; color: #516079; line-height: 1.2; }
.fr-suggerimento--storico { background: #ecfdf5; border-color: #6ee7b7; }
.fr-suggerimento--storico:hover { background: #d1fae5; border-color: #34d399; }
.fr-suggerimento--storico .fr-suggerimento-val { color: #065f46; }
.fr-suggerimento--storico .fr-suggerimento-perche { color: #047857; }
/* Legacy chip (altre pagine): compatibilità */
.fr-chip {
  background: #f1f5f9; border: 1px solid #d0d7e2; color: #44506a;
  border-radius: 14px; padding: 3px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; line-height: 1.4; transition: background .12s, border-color .12s;
}
.fr-chip:hover { background: #e2e8f0; border-color: #94a3b8; color: #1c2740; }
.fr-chip:active { background: #cbd5e1; }
.fr-chip--storico { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.fr-chip--storico:hover { background: #d1fae5; border-color: #34d399; }

/* LA RETE ADESSO — due bollini che non crescono mai (solo barra admin), e una
   tendina sotto. Al posto della fila di pallini, che con 22 point si
   sovrapponeva al resto della barra. */
.tb-presenza { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.tb-bollino {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #334155;
  padding: 5px 11px; border-radius: 999px; border: 1px solid #d8dee8; background: #fff; cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(28,39,64,.06);
}
.tb-bollino:hover { border-color: #94a3b8; }
.tb-bollino:focus-visible { outline: 2px solid #1c2740; outline-offset: 2px; }
.tb-bollino.chiama { color: #991b1b; border-color: #fca5a5; background: #fef2f2; }
.tbr-pt { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; flex: none; }
.tbr-pt.on { background: #16794c; box-shadow: 0 0 0 3px rgba(52,211,153,.25); }
.tbr-pt.squilla { background: #dc2626; animation: rhBattito 1.1s ease-in-out infinite; }
.tbr-tendina {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 500; width: 340px; max-height: 70vh; overflow: auto;
  background: #fff; border: 1px solid #d8dee8; border-radius: 10px; padding: 8px 0;
  box-shadow: 0 12px 32px rgba(28,39,64,.16); animation: rhAppareTendina .16s ease-out;
}
@keyframes rhAppareTendina { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tbr-titolo { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #64748b; padding: 8px 14px 4px; }
.tbr-riga { display: flex; align-items: center; gap: 8px; padding: 5px 14px; font-size: 13.5px; }
.tbr-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1c2740; font-weight: 600; }
.tbr-quando { font-size: 12px; color: #64748b; white-space: nowrap; }
.tbr-vuoto { padding: 4px 14px; font-size: 13px; color: #94a3b8; }
.tbr-prova { border-top: 1px solid #eef2f6; margin-top: 6px; padding-top: 4px; }
.tbr-prova summary { cursor: pointer; padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: #475569; }
.tbr-chiamata { padding: 10px 14px; border-bottom: 1px solid #eef2f6; font-size: 13.5px; line-height: 1.5; color: #334155; }
.tbr-chiamata:last-child { border-bottom: 0; }
.tbr-ch-testa { color: #1c2740; margin-bottom: 2px; }
.tbr-tasti { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.tbr-entra { font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: #1c2740; border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.tbr-tasti a { font-size: 13px; font-weight: 700; color: #1c2740; }
@media (prefers-reduced-motion: reduce) { .tbr-pt.squilla, .tbr-tendina { animation: none; } }
@media (max-width: 900px) { .tb-presenza { display: none; } }

/* I CAPITOLI DEL MENU SI CHIUDONO — nove sezioni tutte aperte fanno un menu
   lungo un chilometro. Si clicca il titolo del capitolo e si richiude; il
   programma se lo ricorda. Quello della pagina in cui sei resta aperto. */
.sb-section {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; gap: 8px;
}
.sb-section:hover { color: #fff; }
.sb-chev { font-size: 11px; opacity: .7; transition: transform .15s ease, opacity .15s ease, color .15s ease; flex-shrink: 0; }
.sb-section:hover .sb-chev { opacity: 1; color: #ffd4a8; transform: scale(1.2); }
.sb-section.chiusa .sb-chev { transform: rotate(-90deg); }
.sb-section.chiusa:hover .sb-chev { transform: rotate(-90deg) scale(1.2); }
.sb-section.chiusa { opacity: .78; }
/* col menu compresso i capitoli non si vedono: niente frecce a mezz'aria */
.sidebar.collapsed .sb-chev { display: none; }

/* «SEI DENTRO …» — il nastro dell'amministrazione: ricorda in che parrocchia
   stai guardando. Spento = tutti i point. Acceso = quel point soltanto, in
   ogni pannello. Deve essere impossibile non accorgersene.
   È un'etichetta a UNA riga: se il nome è lungo, puntini — mai a capo. */
.tb-dentro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  /* ⚠️ Con min-width:0 si stringeva fino a ZERO: a 1440 misurava 0 pixel di
     larghezza e il comando spariva del tutto. Non è un'etichetta, è il comando
     con cui il capo si sposta fra i point — e quando è acceso dice pure che
     stai guardando UN point solo. Deve restare visibile e cliccabile sempre:
     cede il titolo, che è solo informativo e ha già i puntini.
     (Giuseppe, 21/08: «il menù a tendina è sparito, non posso più spostarmi».) */
  min-width: 148px;
  max-width: 240px;
  flex: 0 1 auto;
}
.tb-dentro-sel {
  font-size: 12.5px; padding: 5px 9px; border-radius: 7px;
  border: 1px solid #d5dae2; background: #fff; color: #1c2740;
  max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-dentro.acceso {
  background: #c8651e; color: #fff; border-radius: 8px; padding: 5px 8px 5px 11px;
  box-shadow: 0 0 0 2px rgba(200,101,30,.22);
  white-space: nowrap;
  overflow: hidden;
  max-width: min(240px, 28vw);
}
.tb-dentro.acceso b {
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-dentro-et {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; opacity: .85;
  flex-shrink: 0;
}
.tb-dentro-x {
  background: rgba(255,255,255,.18); color: #fff; border: none; border-radius: 5px;
  padding: 3px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  flex-shrink: 0;
}
.tb-dentro-x:hover { background: rgba(255,255,255,.32); }
@media (max-width: 700px) {
  .tb-dentro,
  .tb-dentro.acceso { max-width: 160px; }
}

/* ── IL MANETTINO ──────────────────────────────────────────────────────────
   Quanto programma si vede. Un pezzo solo a tre scatti: deve venire voglia
   di provarlo (primo gesto di chi apre il programma). */
.manettino {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  background: #e8ecf2;
  border: 2px solid var(--navy);
  border-radius: 10px;
  padding: 3px;
  margin-right: 12px;
  flex: none;
  vertical-align: middle;
  box-shadow: 0 1px 0 rgba(28, 39, 64, .06);
  animation: man-richiamo 2.8s ease-in-out 0.8s 2;
}
@keyframes man-richiamo {
  0%, 100% { box-shadow: 0 1px 0 rgba(28, 39, 64, .06); border-color: var(--navy); }
  45% { box-shadow: 0 0 0 3px rgba(200, 101, 30, .28); border-color: var(--arancio); }
}
.man-scatto {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--navy-muted);
  padding: 8px 14px;
  border-radius: 7px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.man-scatto:hover {
  color: var(--navy);
  background: rgba(28, 39, 64, .08);
  transform: translateY(-1px);
}
.man-scatto.is-on {
  background: var(--navy);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(28, 39, 64, .25);
}
.man-scatto:active { transform: translateY(0); box-shadow: none; }
/* Il quarto tasto: il replacement. Staccato dagli altri tre da un filo, perché
   non è una vista ma un servizio: acceso solo per chi è convenzionato. */
.man-rep {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-left: 1px solid rgba(28, 39, 64, .18);
  margin-left: 4px;
  padding: 8px 12px 8px 14px;
  border-radius: 0 7px 7px 0;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--navy-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .16s ease, background-color .16s ease;
}
.man-rep:hover { color: var(--navy); background: rgba(28, 39, 64, .08); }
.man-rep.is-on { color: var(--verde-scuro); }
.man-rep.is-on i { color: var(--verde); }
.man-rep.is-spento { color: #9aa3b2; cursor: help; }
.man-rep.is-spento:hover { color: var(--navy-muted); background: rgba(28, 39, 64, .05); }
.man-rep:focus-visible { outline: 2px solid var(--arancio); outline-offset: 2px; }
.man-scatto:focus-visible {
  outline: 2px solid var(--arancio);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .manettino { animation: none; }
  .man-scatto { transition: none; }
  .man-scatto.is-on,
  .man-scatto:hover,
  .man-scatto:active { transform: none; box-shadow: none; }
}
@media (max-width: 900px) {
  .man-scatto { font-size: 12.5px; padding: 9px 8px; }
}

/* ── MESSAGGINI (toast) ────────────────────────────────────────────────────
   JS li mette in alto a destra con stile in linea: da lì coprono manettino e
   titolo. Li spostiamo in basso a destra — niente di cliccabile sotto. */
#rh-toasts {
  position: fixed !important;
  top: auto !important;
  bottom: 16px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-width: min(380px, calc(100vw - 24px));
  pointer-events: none;
}
#rh-toasts > * { pointer-events: auto; }
.rh-toast { font-family: var(--font) !important; }
@media (max-width: 900px) {
  #rh-toasts {
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: none;
  }
}

/* ── LA FINESTRA DEI CONTROLLI ─────────────────────────────────────────────
   Rosso = manca, verde = fatta, spunta sobria. Non toccare gli id. */
#preVoloLista { margin-top: 4px; }
#preVoloLista::before {
  content: '';
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #fecaca;
  margin: 0 0 12px;
  transition: background-color .25s ease;
}
#preVoloLista:has(.pv-fatta):not(:has(.pv-riga:not(.pv-fatta)))::before {
  background: #86efac;
}
.pv-riga {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 10px;
  margin: 0 0 6px;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--rosso-brand);
  border-radius: 10px;
  background: #fff7f7;
  animation: pv-entra .22s ease-out;
}
.pv-riga:last-child { margin-bottom: 0; }
.pv-pallino {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  margin-top: 5px; background: var(--rosso-brand);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}
.pv-corpo { flex: 1; min-width: 0; }
.pv-testo { font-size: 13.5px; line-height: 1.45; color: var(--text); }
.pv-campi { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 9px; }
.pv-campo { display: flex; flex-direction: column; gap: 3px; }
.pv-campo span { font-size: 11px; font-weight: 600; color: #5a6379; }
.pv-campo input {
  width: 104px; padding: 7px 9px; font-size: 14px;
  border: 1px solid #cbd5e1; border-radius: 8px;
}
.pv-fatta {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-left: 4px solid var(--verde);
  border-radius: 10px;
  padding: 14px 16px;
  align-items: center;
  animation: pv-fatta-in .35s ease-out;
}
.pv-fatta .pv-testo { color: #166534; font-size: 14px; }
.pv-spunta {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--verde); color: #fff; font-weight: 800; font-size: 15px;
  display: grid; place-items: center;
  animation: pv-spunta-pop .4s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes pv-entra {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes pv-fatta-in {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes pv-spunta-pop {
  0% { transform: scale(.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pv-riga, .pv-fatta, .pv-spunta { animation: none; }
  #preVoloLista::before { transition: none; }
}

/* ── LA FASCIA DELLE ANOMALIE ──────────────────────────────────────────────
   Una sola, e CHIUSA. Prima erano due o tre fasce rosse sempre aperte che si
   prendevano il primo terzo dello schermo prima di far vedere il lavoro.
   Giuseppe, 21/08: «fanne una normalmente chiusa, con una scritta sopra».
   Il numero resta a vista: non si nasconde niente, si smette solo di gridare.
   Stile di servizio di Claude — la grazia la fa Cursor. */
.rh-avvisi { background: #fff8f0; border-bottom: 1px solid #f0c99a; }
.rh-avvisi-testa {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 20px; cursor: pointer; list-style: none;
  font-size: 13.5px; color: #8a4b00;
}
.rh-avvisi-testa::-webkit-details-marker { display: none; }
.rh-avvisi-n {
  min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: #c8651e; color: #fff; font-weight: 700; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.rh-avvisi-tit { font-weight: 600; }
.rh-avvisi-apri {
  margin-left: auto; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; opacity: .75;
}
.rh-avvisi[open] .rh-avvisi-apri::after { content: ' \2013'; }
.rh-avvisi:not([open]) .rh-avvisi-apri::after { content: ' +'; }
.rh-avvisi-corpo { padding: 2px 20px 14px; }
.rh-avvisi-riga {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; border-top: 1px solid #f5dcc0; font-size: 13.5px; color: #8a4b00;
}
.rh-avvisi-riga b { color: #7c2d12; font-size: 15px; }
.rh-avvisi-riga button { margin-left: auto; }
.rh-avvisi-nota { font-size: 12px; color: #a06d12; padding-top: 9px; }

/* ═══ LA CHIAMATA — richiesta di sostituzione con il cronometro ═══
   Una FINESTRA AL CENTRO dello schermo, sopra a tutto, e non si chiude finché
   non rispondi. Fino al 06/10 era una barra sotto quella in alto: la compagnia
   l'ha chiesta al centro, e ha ragione — dall'altra parte c'è uno fermo sulla
   strada, e una barra in cima si confonde con il resto della pagina. */
.rh-chiamata-velo {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 23, 42, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rh-chiamata {
  background: #7f1d1d;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
  width: min(580px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 3px solid #991b1b;
}
.rh-chiamata.scaduta {
  background: #4b5563;
  border-color: #374151;
  box-shadow: none;
}
.rh-ch-testa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(0, 0, 0, .22);
  flex-wrap: wrap;
}
.rh-ch-punto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fca5a5;
  flex: none;
  animation: rhBattito 1.1s ease-in-out infinite;
}
@keyframes rhBattito {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
  .rh-ch-punto,
  .rh-ch-timer.rosso { animation: none; }
}
.rh-ch-tit {
  font-weight: 800;
  font-size: 16px;
  flex: 1;
  min-width: 140px;
}
.rh-ch-timer {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .18);
}
.rh-ch-timer.rosso {
  color: #fff;
  background: #c8102e;
  animation: rhTimerAllarme 1s ease-in-out infinite;
}
@keyframes rhTimerAllarme {
  0%, 100% { background: #c8102e; box-shadow: 0 0 0 0 rgba(200, 16, 46, .5); }
  50% { background: #991b1b; box-shadow: 0 0 0 6px rgba(200, 16, 46, .25); }
}
.rh-ch-corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 18px;
}
.rh-ch-dati {
  font-size: 15px;
  line-height: 1.55;
}
.rh-ch-nota {
  opacity: .78;
  font-size: 13px;
  font-weight: 500;
}
.rh-ch-tasti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rh-ch-tasti button {
  border: 0;
  border-radius: 12px;
  padding: 18px 16px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  min-height: 58px;
  letter-spacing: .01em;
  transition: transform .12s ease, background .12s ease;
}
.rh-ch-si {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 3px 0 #15803d;
}
.rh-ch-no {
  background: #fff;
  color: #7f1d1d;
  border: 3px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
/* Il tasto quando chiede conferma. Prima qui c'era un pop-up del browser:
   bloccava lo schermo e su un tablet al banco copriva proprio la chiamata che
   si stava guardando. Adesso la conferma si chiede dentro il riquadro, e il
   tasto cambia faccia — così non lo si tocca due volte per sbaglio credendo
   che il primo tocco non sia passato. */
.rh-ch-no.conferma {
  background: #a11b1b;
  color: #fff;
  border-color: #a11b1b !important;
}
.rh-ch-si:hover {
  background: #15803d;
  transform: translateY(-1px);
}
.rh-ch-no:hover {
  background: #fef2f2;
  transform: translateY(-1px);
}
.rh-ch-si:active,
.rh-ch-no:active { transform: translateY(0); }
@media (max-width: 520px) {
  .rh-ch-tasti { grid-template-columns: 1fr; }
  .rh-ch-timer { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-ch-tasti button { transition: none; }
  .rh-ch-si:hover,
  .rh-ch-no:hover { transform: none; }
}

/* ═══ REPLACEMENT — quadri condivisi (sala + bacino) ═══ */
.sala-page .quadri,
.bacino-page .quadri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.sala-page .quadro,
.bacino-page .quadro {
  background: #fff;
  border: 2px solid #dce3ee;
  border-radius: 12px;
  padding: 18px 18px 16px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sala-page .quadro .n,
.bacino-page .quadro .n {
  font-size: clamp(40px, 6vw, 52px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.sala-page .quadro .et,
.bacino-page .quadro .et {
  font-size: 13px;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: .35px;
  font-weight: 700;
  margin-top: 8px;
  line-height: 1.3;
}
.bacino-page .quadro .sotto {
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
  line-height: 1.35;
}
.sala-page .q-rosso .n { color: #c8102e; }
.sala-page .q-verde .n { color: #16a34a; }
.sala-page .q-arancio .n { color: #c8651e; }
.sala-page .q-grigio .n { color: #374151; }
.bacino-page .q-vetrina .n { color: #1d4ed8; }
.bacino-page .q-centrali .n { color: #c8651e; }
.bacino-page .q-network .n { color: #5b3a9e; }
.bacino-page .q-flotta .n { color: #1f2937; }

/* ═══ SALA — il nostro quadro replacement ═══ */
.sala-page .sezione {
  background: #fff;
  border: 2px solid #dce3ee;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.sala-page .sezione h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}
.sala-page .point-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.sala-page .point-cella {
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fafbfc;
}
.sala-page .point-cella:has(.pallino.sveglio) {
  border-color: #86efac;
  background: #f0fdf4;
  box-shadow: inset 4px 0 0 #16a34a;
}
.sala-page .pallino {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  background: #cbd5e1;
}
.sala-page .pallino.sveglio {
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .22);
}
.sala-page .point-cella .nome {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  color: var(--navy);
}
.sala-page .point-cella .sotto {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}
.sala-page .chiamata {
  border: 2px solid #e5e7eb;
  border-left-width: 8px;
  border-radius: 0 12px 12px 0;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #fff;
}
.sala-page .chiamata.aperta {
  border-left-color: #c8102e;
  background: #fff7f7;
}
.sala-page .chiamata.presa {
  border-left-color: #16a34a;
  background: #f6fdf8;
}
.sala-page .chiamata.esaurita {
  border-left-color: #9ca3af;
  background: #f8fafc;
}
.sala-page .ch-riga1 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sala-page .ch-num {
  font-family: ui-monospace, monospace;
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
}
.sala-page .ch-timer {
  font-family: ui-monospace, monospace;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 38px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 8px;
  background: #1f2937;
  color: #fff;
  letter-spacing: .04em;
}
.sala-page .ch-timer.poco {
  color: #fff;
  background: #c8102e;
  animation: chTimerAllarme 1s ease-in-out infinite;
}
@keyframes chTimerAllarme {
  0%, 100% { background: #c8102e; }
  50% { background: #991b1b; box-shadow: 0 0 0 4px rgba(200, 16, 46, .3); }
}
@media (prefers-reduced-motion: reduce) {
  .sala-page .ch-timer.poco { animation: none; }
}
.sala-page .ch-dove {
  font-size: 14.5px;
  color: #374151;
  margin-top: 8px;
  line-height: 1.45;
}
.sala-page .ch-giro {
  margin-top: 12px;
  font-size: 13px;
  color: #6b7280;
}
.sala-page .ch-giro table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  margin-top: 8px;
}
.sala-page .ch-giro tr {
  background: #f8fafc;
  border-radius: 8px;
}
.sala-page .ch-giro td {
  padding: 8px 10px;
  vertical-align: middle;
  font-size: 13px;
}
.sala-page .ch-giro td:first-child {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  border-left: 4px solid #c8651e;
  border-radius: 8px 0 0 8px;
}
.sala-page .ch-giro td:last-child {
  border-radius: 0 8px 8px 0;
}
.sala-page .ch-tasti {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sala-page .sala-sezione-testata {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sala-page .sala-sezione-testata h3 {
  margin: 0;
  flex: 1;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}
.sala-page .vuoto {
  padding: 28px;
  text-align: center;
  color: #6b7280;
  font-size: 14.5px;
}

/* ═══ ADESIONE — accordo replacement ═══ */
.adesione-page .parole {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 18px 0 10px;
}
.adesione-page .parola {
  background: #fff;
  border: 2px solid #fed7aa;
  border-left: 8px solid #c8651e;
  border-radius: 0 12px 12px 0;
  padding: 16px 18px;
  transition: border-color .2s ease, background .2s ease;
}
.adesione-page .parola:hover {
  border-color: #fdba74;
  background: #fffaf5;
}
.adesione-page .parola h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: #9a3412;
  line-height: 1.25;
}
.adesione-page .parola p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #374151;
}
.adesione-page .sez-legale {
  border: 2px solid #dce3ee;
  border-radius: 12px;
  background: #fff;
  margin: 20px 0;
}
.adesione-page .sez-legale > summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  list-style: none;
}
.adesione-page .sez-legale > summary::-webkit-details-marker { display: none; }
.adesione-page .sez-legale > summary::before { content: '▸ '; color: #c8651e; }
.adesione-page .sez-legale[open] > summary::before { content: '▾ '; }
.adesione-page .art {
  padding: 0 18px 16px;
  border-top: 1px solid #f1f5f9;
}
.adesione-page .art h5 {
  margin: 14px 0 4px;
  font-size: 14.5px;
  font-weight: 700;
}
.adesione-page .art p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
}
.adesione-page .clausole {
  background: #fffbeb;
  border: 2px solid #fde68a;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0;
  position: relative;
}
.adesione-page .clausole:not(:has(.cls:not(:checked))) {
  background: #f0fdf4;
  border-color: #86efac;
  animation: clausoleOk .4s ease-out;
}
@keyframes clausoleOk {
  from { transform: scale(.99); }
  to { transform: none; }
}
.adesione-page .clausole:not(:has(.cls:not(:checked)))::before {
  content: '✓ Tutte spuntate — puoi firmare';
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #166534;
  margin-bottom: 10px;
}
.adesione-page .clausole:has(.cls:not(:checked))::before {
  content: 'Spunta tutte le clausole per firmare';
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 10px;
}
.adesione-page .clausole h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #78350f;
}
.adesione-page .clausole .nota {
  font-size: 13.5px;
  color: #92400e;
  margin-bottom: 10px;
  line-height: 1.45;
}
.adesione-page .clausole label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  margin: 0 0 6px;
  font-size: 14.5px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.adesione-page .clausole label:has(.cls:not(:checked)) {
  background: #fff;
  border-color: #fde68a;
}
.adesione-page .clausole label:has(.cls:checked) {
  background: #ecfdf5;
  border-color: #86efac;
}
.adesione-page .clausole label:has(.cls:checked)::after {
  content: '✓';
  margin-left: auto;
  color: #16a34a;
  font-weight: 800;
  font-size: 16px;
  animation: pv-spunta-pop .35s ease-out;
}
.adesione-page .clausole input.cls {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  flex: none;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .adesione-page .clausole:not(:has(.cls:not(:checked))),
  .adesione-page .clausole label:has(.cls:checked)::after { animation: none; }
}
/* Firma: su PC grande, molto più spazio. Layout pronto per QR a fianco (id adesioneQr). */
.adesione-page canvas#cvFirma {
  width: 100%;
  min-height: 260px;
  height: clamp(260px, 32vh, 340px);
  border: 3px dashed #64748b;
  border-radius: 12px;
  background: #fff;
  touch-action: none;
  display: block;
}
.adesione-page #adesioneQr,
.adesione-page .adesione-qr {
  min-height: 200px;
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  gap: 8px;
}
.adesione-page #adesioneQr:empty::before,
.adesione-page .adesione-qr:empty::before {
  content: 'Preferisci firmare col telefono? Inquadra il codice';
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  max-width: 220px;
  line-height: 1.4;
}
.adesione-page .adesione-firma-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 900px) {
  .adesione-page .adesione-firma-griglia {
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
  }
}
.adesione-page .stato {
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-width: 2px;
  border-style: solid;
}
.adesione-page .st-attesa { background: #fffbeb; border-color: #fde68a; }
.adesione-page .st-ok { background: #f0fdf4; border-color: #86efac; }
.adesione-page .st-no { background: #fef2f2; border-color: #fecaca; }
.adesione-page .stato h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}
.adesione-page .stato p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.5;
}
.adesione-page .stato p:last-child { margin-bottom: 0; }
.adesione-page .segnaposto {
  background: #eef2ff;
  border: 2px solid #c7d2fe;
  border-left: 8px solid #4f46e5;
  border-radius: 0 12px 12px 0;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.adesione-page .segnaposto h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: #3730a3;
}
.adesione-page .segnaposto p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4338ca;
}
.adesione-page table.coda td,
.adesione-page table.coda th {
  vertical-align: middle;
  font-size: 14px;
}
.adesione-page .pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
.adesione-page .p-attesa { background: #fef3c7; color: #92400e; }
.adesione-page .p-ok { background: #eaf7ef; color: #1d7a44; }
.adesione-page .p-no { background: #fdeef0; color: #c0392b; }
.adesione-page .p-sosp { background: #eef1f5; color: #39507a; }

/* ═══ BACINO — il mio bacino ═══ */
.bacino-page .avvisi {
  background: #fff8f0;
  border: 2px solid #f0c99a;
  border-left: 8px solid #c8651e;
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.bacino-page .avvisi h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #7c2d12;
}
.bacino-page .avvisi ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: #8a4b00;
  line-height: 1.45;
}
.bacino-page .avvisi li { margin-bottom: 4px; }
.bacino-page .barra-sel {
  display: none;
  position: sticky;
  top: 0;
  z-index: 25;
  background: #1c2740;
  color: #fff;
  border-radius: 0 0 12px 12px;
  padding: 14px 18px;
  margin: -4px 0 14px;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 6px 20px rgba(28, 39, 64, .25);
  border: 2px solid #243352;
  border-top: none;
}
.bacino-page .barra-sel.mostra { display: flex; }
.bacino-page .barra-sel .quanti {
  font-weight: 800;
  font-size: 16px;
}
.bacino-page .barra-sel .sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, .25);
}
.bacino-page .barra-sel button {
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 42px;
}
.bacino-page .b-metti {
  background: #16a34a;
  color: #fff;
}
.bacino-page .b-togli {
  background: #4b5563;
  color: #fff;
}
.bacino-page .barra-sel select {
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  min-height: 42px;
}
.bacino-page table.bacino td,
.bacino-page table.bacino th {
  vertical-align: middle;
}
.bacino-page table.bacino td.spunta,
.bacino-page table.bacino th.spunta {
  width: 40px;
  text-align: center;
}
.bacino-page table.bacino input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.bacino-page .bacino-col-canale {
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  max-width: 88px;
}
.bacino-page .pill-cat {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eef1f5;
  color: #39507a;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.bacino-page .pill-manca {
  background: #fdeef0;
  color: #c0392b;
}
.bacino-page .deflottato td { opacity: .45; }
/* Tre interruttori canale — ultime tre colonne, funziona anche con colonna Point admin */
.bacino-page table.bacino tbody td:nth-last-child(1) > span,
.bacino-page table.bacino tbody td:nth-last-child(2) > span,
.bacino-page table.bacino tbody td:nth-last-child(3) > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0;
  font-weight: 800;
  border: 2px solid #cbd5e1;
  background: #f3f4f6;
  color: #6b7280;
}
.bacino-page table.bacino tbody td:nth-last-child(1) > span:not(:has(.muted)),
.bacino-page table.bacino tbody td:nth-last-child(2) > span:not(:has(.muted)),
.bacino-page table.bacino tbody td:nth-last-child(3) > span:not(:has(.muted)) {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}
.bacino-page table.bacino tbody td:nth-last-child(1) > span:not(:has(.muted))::after,
.bacino-page table.bacino tbody td:nth-last-child(2) > span:not(:has(.muted))::after,
.bacino-page table.bacino tbody td:nth-last-child(3) > span:not(:has(.muted))::after {
  content: 'Dentro';
  font-size: 12px;
}
.bacino-page table.bacino tbody td:nth-last-child(1) > span:has(.muted)::after,
.bacino-page table.bacino tbody td:nth-last-child(2) > span:has(.muted)::after,
.bacino-page table.bacino tbody td:nth-last-child(3) > span:has(.muted)::after {
  content: 'Fuori';
  font-size: 12px;
  color: #6b7280;
}
.bacino-page table.bacino tbody td:nth-last-child(1) > span[style*="font-size"],
.bacino-page table.bacino tbody td:nth-last-child(2) > span[style*="font-size"],
.bacino-page table.bacino tbody td:nth-last-child(3) > span[style*="font-size"] {
  font-size: 0 !important;
}

/* La patente scaduta sul piazzale: deve fermare l’occhio, non il lavoro.
   Sta qui e non in pagina perche’ tutte le op-* stanno qui. */
.op-patente { margin: 0 0 14px; padding: 15px 16px; border-radius: 12px;
  background: #fff4e5; border-left: 5px solid #b45309; }
.op-patente-tit { font-weight: 700; font-size: 16px; color: #7c3d09; line-height: 1.35; }
.op-patente-txt { margin-top: 7px; font-size: 14px; color: #7a4410; line-height: 1.5; }
.op-patente .btn { margin-top: 13px; width: 100%; min-height: 46px; font-size: 15px; }

/* Il segno che una voce del menu porta FUORI dal gestionale: piccolo, dopo
   l'etichetta. Serve a non far pensare che il programma si sia perso quando
   si apre una finestra nuova. */
.sb-fuori { font-size: 9px; margin-left: 6px; opacity: .55; vertical-align: super; }

/* La veste della barra della sala radio NON sta qui: quelle tre pagine non
   caricano styles.css. Stava qui, e il risultato era che i collegamenti
   restavano senza istruzioni e il browser li dipingeva a modo suo — blu, e
   viola dopo il primo clic. Adesso e' in marchio.css, che loro caricano. */

    /* I SOLDI. Semafori uguali a quelli di tutto il programma: verde va,
       arancio guarda, rosso muoviti, nero e' gia' perso. */
    .sd-righe{display:flex; flex-direction:column; gap:8px}
    .sd-riga{display:flex; align-items:center; gap:13px; flex-wrap:wrap;
      padding:11px 13px; background:#fff; border:1px solid var(--border);
      border-left:5px solid var(--border-strong); border-radius:var(--radius-sm)}
    .sd-riga.verde{border-left-color:var(--verde)}
    .sd-riga.arancio{border-left-color:var(--arancio); background:#fdf6ef}
    .sd-riga.rosso{border-left-color:var(--rosso); background:#fdf1f1}
    .sd-riga.nero{border-left-color:#1f2937; background:#f2f3f5}
    .sd-chi{font-weight:700; min-width:150px}
    .sd-dove{color:var(--text-muted); font-size:13px}
    .sd-quando{font-size:13px; font-variant-numeric:tabular-nums}
    .sd-euro{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
    .sd-avviso{flex-basis:100%; font-size:13px; line-height:1.45; color:#7a4410}
    .sd-riga.nero .sd-avviso{color:#374151}
    .sd-vuoto{padding:16px; text-align:center; color:var(--text-muted); font-size:14px;
      background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm)}
    .sd-cap{font-size:12px; text-transform:uppercase; letter-spacing:.8px;
      color:var(--text-muted); font-weight:700; margin:16px 0 8px}
    .sd-cap:first-child{margin-top:0}
    .sd-perso{padding:13px 15px; border-radius:var(--radius-sm); margin-bottom:14px;
      background:#f2f3f5; border-left:5px solid #1f2937; font-size:14px; line-height:1.5}
    .sd-perso.ok{background:#eef7f1; border-left-color:var(--verde); color:#14532d}
    .sd-perso b{font-variant-numeric:tabular-nums}
    .sd-esito{font-size:13px; line-height:1.5; margin-top:9px; padding:9px 11px;
      border-radius:var(--radius-sm); background:#f4f6f9}

/* ── CHE CONTRATTO È (19/10) ─────────────────────────────────────────────── */
.ct-tipo {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px;
  margin-bottom: 12px; padding: 10px 12px;
  background: #f6f8fb; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.ct-tipo-spiega { flex: 1 1 260px; font-size: 13px; line-height: 1.45; color: #475569; }