/* ============================================================
   VoglioCasa Desk — stile demo
   Palette allineata al logo VoglioCasa (rosso #b90903 + verde #0bec27)
   ============================================================ */

:root {
  /* --- brand: rosso (primario #AA0014 — rgb 170,0,20) --- */
  --brand-900: #66000c;
  --brand-800: #7a000e;
  --brand-700: #910011;
  --brand-600: #aa0014;
  --brand-500: #c8192d;
  --brand-100: #fceced;

  /* --- rosso del logo (fondo del PNG) usato dalle fasce che lo ospitano --- */
  --logo-red: #b90903;

  /* --- verde del sito: logo #0bec27 leggermente scurito per la UI --- */
  --logo-green: #0acc22;
  --logo-green-dark: #088a18;
  --logo-green-soft: #e9fde9;
  --logo-green-tint: #f3fdf4;
  --logo-green-border: #96ee9e;
  /* --- verde pieno del logo: usato dai tag "ESCLUSIVA" sulle foto --- */
  --logo-green-bright: #0bec27;

  /* --- accento: verde (allineato al verde del sito) --- */
  --accent-700: #057514;
  --accent-600: #07941a;
  --accent-500: #0acc22;
  --accent-100: #e9fde9;

  /* --- neutri --- */
  --ink-900: #1f1f1f;
  --ink-800: #2b2b2b;

  --bg: #ededed;
  --surface: #ffffff;
  --border: #e2e2e2;
  --border-strong: #d2d2d2;

  --text: #22262a;
  --text-soft: #5c6266;
  --text-mute: #8b9095;

  --amber: #e0a030;
  --amber-bg: #fdf5e6;
  --red: #d9482f;
  --red-bg: #fdedea;
  --blue: #3b7dd8;
  --blue-bg: #eaf1fc;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 14px rgba(16, 32, 48, .05);
  --shadow-lg: 0 10px 40px rgba(16, 32, 48, .12);
  --navbar-h: 58px;
  --topbar-h: 62px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5dd; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b3c0cb; }

/* ---------------- LAYOUT ---------------- */

.layout { display: flex; flex-direction: row; min-height: 100vh; }

/* --- Barra di navigazione laterale (verticale, raggruppata) --- */
.navbar {
  flex: 0 0 auto;
  width: 236px;
  height: 100vh;
  background: var(--logo-red);
  color: #f0dde1;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 30;
  overflow-y: auto;
  scrollbar-width: thin;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.brand-logo { display: block; height: 32px; width: auto; }

.brand-clock {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 1.35;
  letter-spacing: .2px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 12px;
}

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 16px; }
/* spazio in fondo alla barra, dopo l'ultima voce del menu ("Impostazioni agenda") */
.nav-group:last-child { padding-bottom: 22px; }

.nav-group-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255,255,255,.5);
  padding: 4px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  color: #efdde1;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: background .14s, color .14s;
}

.nav-item:hover { background: rgba(255,255,255,.12); color: #fff; }

/* voce attiva: sfondo chiaro pieno e testo nel rosso del brand, cosi' la
   sezione corrente si distingue a colpo d'occhio nella barra */
.nav-item.active {
  background: #fff;
  color: var(--logo-red);
  font-weight: 700;
}

.nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; }
.nav-item.active svg { opacity: 1; }

.nav-count {
  margin-left: auto;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
}

.nav-count.alert { background: var(--accent-500); color: #fff; }

/* contatori sulla voce attiva: restano leggibili sul fondo chiaro */
.nav-item.active .nav-count { background: rgba(185, 9, 3, .12); color: var(--logo-red); }
.nav-item.active .nav-count.alert { background: var(--accent-500); color: #fff; }

/* schermi stretti: la barra laterale si riduce a sola icona, resta tutto visibile */
@media (max-width: 900px) {
  .navbar { width: 64px; }
  .brand { padding: 14px 8px; }
  .brand-logo { height: 26px; }
  .brand-clock { display: none; }
  .nav { padding: 12px 8px; }
  .nav-group-title { display: none; }
  .nav-group + .nav-group { margin-top: 10px; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .nav-item > span:not(.nav-count) { display: none; }
  .nav-item .nav-count {
    margin-left: 0; position: absolute; top: 3px; right: 6px;
    padding: 0 5px; min-width: 16px; font-size: 9.5px;
  }
}

/* --- Main --- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar h1 {
  font-size: 16px;
  font-weight: 650;
  margin: 0;
  letter-spacing: -.2px;
  white-space: nowrap;
}

.topbar .crumbs { font-size: 12px; color: var(--text-mute); margin-top: 1px; }

/* campanella notifiche con pannello a tendina */
.notif { margin-left: auto; position: relative; }

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: 86vw;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16,24,40,.18);
  overflow: hidden;
  display: none;
  z-index: 40;
}
.notif-panel.open { display: block; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.notif-badge {
  background: rgba(170,0,20,.1); color: var(--brand-600);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.notif-body { max-height: 340px; overflow-y: auto; }
.notif-item { padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notif-item:hover { background: #f8fafb; }
.notif-item-top { display: flex; justify-content: space-between; gap: 8px; }
.notif-item-name { font-weight: 650; font-size: 13px; }
.notif-item-when { font-size: 11px; color: var(--text-mute); white-space: nowrap; }
.notif-item-msg { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; }
.notif-item-meta { font-size: 11px; color: var(--text-mute); margin-top: 4px; }
.notif-empty { padding: 22px 14px; text-align: center; color: var(--text-mute); font-size: 13px; }
.notif-all { width: 100%; border-radius: 0; justify-content: center; }

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  color: var(--text-soft);
}
.icon-btn:hover { background: #f6f8f9; color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .dot {
  position: absolute; top: 6px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 2px solid #fff;
}

.user-chip { display: flex; align-items: center; gap: 9px; padding-left: 6px; }
.user-chip .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-600); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12.5px;
}
.user-chip .who { line-height: 1.2; }
.user-chip .who strong { display: block; font-size: 13px; }
.user-chip .who span { font-size: 11px; color: var(--text-mute); }

.content { padding: 22px; flex: 1; }

/* ---------------- COMPONENTS ---------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.card-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
.card-head svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-soft); }
.card-head .sub { font-size: 12px; color: var(--text-mute); }
.card-head .spacer { margin-left: auto; }
.card-head .mesi-select { min-width: 0; padding: 4px 8px; font-size: 12px; border-radius: 6px; }

.card-body { padding: 18px; }

/* campi della pagina "Impostazioni agenzia", disposti a griglia nelle card */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid input, .form-grid select, .form-grid textarea { min-width: 0; width: 100%; }
.agenzia-msg { font-size: 12.5px; color: var(--red); }
.agenzia-msg.ok { color: var(--accent-600); }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }

@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2-1 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .grid-6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* KPI */
.kpi { padding: 16px 18px; position: relative; overflow: hidden; }
.kpi .kpi-top { display: flex; align-items: center; gap: 10px; color: var(--text-soft); font-size: 12.5px; font-weight: 550; }
.kpi .kpi-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent-100); color: var(--accent-600);
}
.kpi .kpi-icon svg { width: 16px; height: 16px; }
.kpi .kpi-icon.kpi-icon-danger { background: var(--red-bg); color: var(--red); }
.kpi .kpi-icon.kpi-icon-cyan   { background: #e6f7fb; color: #17a2c4; }
.kpi .kpi-icon.kpi-icon-slate  { background: #eef1f5; color: #5b6b7b; }
.kpi .kpi-icon.kpi-icon-green  { background: var(--accent-100); color: var(--accent-600); }
.kpi .kpi-icon.kpi-icon-amber  { background: var(--amber-bg); color: var(--amber); }
.kpi .kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.7px; margin: 10px 0 2px; }
.kpi .kpi-foot { font-size: 12px; color: var(--text-mute); }
.kpi .kpi-foot .up { color: var(--accent-600); font-weight: 600; }
.kpi .kpi-foot .down { color: var(--red); font-weight: 600; }

/* Toolbar / filtri */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: #fbfcfd;
}

/* pagina Annunci: la barra è divisa in due righe — sopra i filtri (Comune,
   Quartiere, Cerca, zoom) con l'interruttore del QR code accanto, sotto i
   pulsanti di azione: così restano tutti allineati fra loro */
.toolbar-azioni { padding: 11px 16px; border-top: 0; }
.qr-web-chk {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: center;
  cursor: pointer; font-size: 12.5px; color: var(--text);
}
.qr-web-chk input { margin: 0; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); font-weight: 700; }
.field .hint { font-size: 10.5px; color: var(--text-mute); line-height: 1.3; }
/* contatore dei caratteri accanto al titolo dei campi di testo lunghi */
.field .field-count { float: right; font-size: 10.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--text-mute); opacity: .85; }

/* tag/segnaposto del campo da usare nel template del contratto */
.field-tag { font-size: 11px; color: var(--brand-600, #aa0014); line-height: 1.3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fdf0f2; border: 1px solid #f3d3d8; border-radius: 4px;
  padding: 1px 6px; align-self: flex-start; word-break: break-all; }
/* etichetta del ruolo (Conduttore/Proprietario/Garante) accanto al tag */
.field-tag .field-tag-ruolo { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-mute); margin-right: 5px; }

/* campo importo: valore con due decimali e, sotto, lo stesso importo in lettere */
.field.importo input[data-importo] { font-variant-numeric: tabular-nums; }
.field .importo-lettere { font-size: 12px; color: var(--text-mute); font-weight: 600;
  font-variant-numeric: tabular-nums; background: #fafafa; border-style: dashed; }
.field-tag.field-tag-lettere { color: #6b7280; background: #f6f7f9; border-color: #e3e6ea; }

/* campo "maggiorazione" del modulo attestazione: spunta + importo calcolato */
.field.magg { gap: 6px; }
.field.magg .magg-chk { font-size: 12px; font-weight: 600; }
.field.magg .magg-val { font-variant-numeric: tabular-nums; background: #fafafa; border-style: dashed; }

/* campo con pulsante affiancato (es. "Cliente" + "Nuovo" nell'appuntamento) */
.field-row { display: flex; align-items: center; gap: 6px; }
.field-row input, .field-row select { flex: 1; min-width: 0; }
.field-row .btn[hidden] { display: none; }
/* tasto "Genera video" con messaggio di stato accanto */
.gen-video-status { font-size: 11px; color: var(--text-mute); line-height: 1.3; }

/* --- selettore orario a blocchi (campo "time") --- */
.field-time { grid-column: 1 / -1; }
.field-time > input { max-width: 110px; font-variant-numeric: tabular-nums; }
.time-picker { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.tp-panel { flex: 1 1 300px; min-width: 0; }
.tp-head {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute); margin-bottom: 4px;
}
.tp-grid { display: grid; gap: 4px; }
.tp-hours { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.tp-minutes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-cell {
  padding: 7px 0; border: 1px solid var(--border-strong); border-radius: 5px;
  background: #e9e9e9; color: var(--text); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer; transition: background .12s, color .12s;
}
.tp-cell:hover:not(:disabled) { background: #dcdcdc; }
.tp-cell.on { background: #1c7ed6; border-color: #1668b8; color: #fff; }
.tp-cell:disabled { opacity: .55; cursor: default; }

/* --- campo con suggerimenti: elenco dei record mentre si scrive --- */
.field.ac { position: relative; }
.ac-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin-top: 4px; max-height: 168px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(16,32,48,.14);
  padding: 4px;
}
.ac-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--text);
}
.ac-item:hover, .ac-item:focus { background: var(--brand-100); }
.ac-name { font-weight: 600; }
.ac-detail { font-size: 11px; color: var(--text-mute); white-space: nowrap; }
/* campo a valori multipli (es. le Zone di una richiesta): etichette rimovibili */
.ac-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ac-chips[hidden] { display: none; }
.ac-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 4px 2px 8px; border-radius: 12px; font-size: 11.5px; font-weight: 600;
  background: var(--brand-100); border: 1px solid var(--brand-500); color: var(--text);
}
.ac-chip button {
  display: inline-flex; align-items: center; border: 0; background: none; cursor: pointer;
  padding: 0 2px; line-height: 1; color: var(--text-mute);
}
.ac-chip button:hover { color: #c0392b; }
.ac-chip svg { width: 11px; height: 11px; }

select, input[type="text"], input[type="search"], input[type="date"], input[type="email"], input[type="password"] {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
  outline: none;
  min-width: 120px;
}
select:focus, input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(170,0,20,.14); }

/* pulsante di sistema "Sfoglia" degli input file: rosso con testo bianco */
input[type="file"]::file-selector-button {
  margin-right: 8px;
  padding: 7px 12px;
  border: 1px solid var(--brand-500);
  border-radius: 7px;
  background: var(--brand-500);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--brand-600); border-color: var(--brand-600); }
/* fallback per i browser basati su WebKit (Safari) */
input[type="file"]::-webkit-file-upload-button {
  margin-right: 8px;
  padding: 7px 12px;
  border: 1px solid var(--brand-500);
  border-radius: 7px;
  background: var(--brand-500);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button:hover { background: var(--brand-600); border-color: var(--brand-600); }

/* tendine personalizzate dei campi select: pannello bianco con le voci in nero,
   voce evidenziata (selezionata o al passaggio del mouse) come striscia rossa
   con testo bianco. Il <select> originale resta nel DOM ma nascosto. */
.cselect { position: relative; display: block; width: 100%; }
.field-row .cselect { flex: 1 1 auto; width: auto; min-width: 0; }
.cselect-native { display: none; }
.cselect-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-width: 120px; min-height: 33px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.cselect-trigger:hover { border-color: var(--brand-500); }
.cselect-trigger:focus-visible,
.cselect.aperto .cselect-trigger { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(170,0,20,.14); outline: none; }
.cselect-trigger:disabled { opacity: .6; cursor: default; }
.cselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-caret {
  flex: 0 0 auto; width: 0; height: 0; opacity: .55;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
}
.cselect-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 60;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.cselect-panel[hidden] { display: none; }
.cselect-opt {
  padding: 7px 10px; border-radius: 4px; cursor: pointer;
  font-size: 13px; color: #111;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cselect-opt:hover,
.cselect-opt.is-active,
.cselect-opt.is-selected { background: var(--brand-500); color: #fff; }

/* caselle di spunta: quadrato rosso con spunta bianca (tutte le aree del gestionale) */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  vertical-align: middle;
  transition: background .12s ease, border-color .12s ease;
}
input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  transition: transform .12s ease-in-out;
  background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked {
  background: var(--brand-600);
  border-color: var(--brand-600);
}
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(170,0,20,.18);
}
input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

.search-inline { position: relative; }
.search-inline svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-mute); }
.search-inline input { padding-left: 32px; min-width: 230px; }

.btn {
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: #fff;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { background: #f6f8f9; }
.btn svg { width: 15px; height: 15px; }
.btn svg.plus-strong { color: #fff; stroke-width: 3.4; }
.btn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn-primary:hover { background: var(--brand-700); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: #eef2f5; color: var(--text); }
/* il tasto "Oggi" dell'agenda resta riconoscibile grazie a un contorno visibile */
#agendaToday { border-color: var(--brand-600); color: var(--brand-700); }
.btn-danger { border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red-bg); }
.btn-success { background: #0a8f2f; border-color: #0a8f2f; color: #fff; }
.btn-success:hover { background: #087a28; }
.btn-warn { border-color: #d9822b; color: #b4661a; }
.btn-warn:hover { background: #fdf1e5; }

/* pannello "Nuovo annuncio scraping": campo del link e pulsante di import in
   evidenza, con angoli arrotondati e contorno rosso */
input[name="scrapingUrl"] {
  border: 2px solid var(--red);
  border-radius: 14px;
  padding: 9px 14px;
}
input[name="scrapingUrl"]:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(217, 72, 47, .15);
}
#modalForm button[data-field-btn="scrapingUrl"] {
  border: 2px solid var(--red);
  color: var(--red);
}
#modalForm button[data-field-btn="scrapingUrl"]:hover { background: var(--red-bg); }

/* Tabella */
.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }

table.data thead th {
  text-align: left;
  padding: 10px 14px;
  background: #f7f9fa;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-soft);
  font-weight: 700;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}

table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable:hover { color: var(--text); background: #eef4f7; }
table.data thead th.sortable .sort-ind { font-size: 9px; color: var(--brand-500, #1f6feb); }

table.data tbody td {
  padding: calc(10px * var(--row-zoom, 1)) 14px;
  border-bottom: 1px solid #eef1f4;
  vertical-align: middle;
}

table.data tbody tr:hover { background: #fafcfd; }
table.data tbody tr.clickable { cursor: pointer; }

.cell-strong { font-weight: 600; }
.cell-mute { color: var(--text-mute); font-size: 12px; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* riga di filtri per colonna sotto l'intestazione (Richieste) */
table.data thead tr.filter-row th {
  position: static; top: auto; padding: 6px 8px;
  background: #fff; border-bottom: 1px solid var(--border);
  text-transform: none; letter-spacing: normal;
}
table.data thead tr.filter-row input,
table.data thead tr.filter-row select {
  width: 100%; min-width: 64px; padding: 5px 8px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: #fff; color: var(--text);
  font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal;
}
table.data thead tr.filter-row input::placeholder { color: var(--text-mute); }
table.data thead tr.filter-row .num input { text-align: right; }

/* casella di selezione multipla nelle tabelle */
.sel-col { width: 34px; padding-right: 0 !important; }
.sel-col input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--brand-500); }

/* barra delle azioni sui record selezionati */
.sel-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--brand-100);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text);
}
.sel-bar svg { width: 15px; height: 15px; color: var(--brand-500); }

/* barra di impaginazione sotto gli elenchi (clienti) */
.pager {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-soft);
}
.pager .btn { padding: 5px 10px; font-size: 12.5px; }
.pager .pager-info { white-space: nowrap; }
.pager .pager-info strong { color: var(--text); }

/* anteprima dell'annuncio: cresce con l'altezza delle righe (zoom) */
.thumb {
  width: calc(54px * var(--row-zoom, 1));
  height: calc(42px * var(--row-zoom, 1));
  border-radius: 6px;
  object-fit: cover;
  background: #e8edf1;
  display: block;
}

/* elenco annunci: il rigo ha un'altezza fissa (che segue lo zoom) così
   l'anteprima a sinistra riempie tutta l'altezza della riga */
.annunci-table tbody tr { height: calc(62px * var(--row-zoom, 1)); }
.annunci-table td.thumb-cell { padding: calc(4px * var(--row-zoom, 1)) 10px; }
.annunci-table .thumb {
  width: calc(70px * var(--row-zoom, 1));
  height: calc(54px * var(--row-zoom, 1));
}

/* etichetta di contratto sulla miniatura dell'elenco annunci
   (VENDESI / AFFITTASI / AFFITTASI STANZE) */
.annunci-table td.thumb-cell .thumb-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.thumb-tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  max-width: 100%;
  padding: calc(1px * var(--row-zoom, 1)) calc(3px * var(--row-zoom, 1));
  font-size: calc(7px * var(--row-zoom, 1));
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
  color: #fff;
  text-align: center;
  border-radius: 6px 0 5px 0;
}
.thumb-tag.vendita { background: #c8192d; }
.thumb-tag.affitto { background: #0a8f1c; }
.thumb-tag.stanze { background: #b26a00; }
/* etichetta "NUDA PROPRIETÀ": striscia rossa sul bordo inferiore dell'anteprima */
.thumb-tag.nuda {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: none;
  border-radius: 0;
  background: #c8192d;
}

/* foto con filigrana diagonale sovrapposta (VENDUTO / AFFITTATO / IN TRATTATIVA) */
.filigrana-wrap { position: relative; display: block; overflow: hidden; line-height: 0; }
td .filigrana-wrap { display: inline-block; }
.detail-head .filigrana-wrap { flex: 0 0 auto; }
/* filigrana: rosso pieno con contorno bianco, effetto ombra e bagliore
   (paint-order tiene il riempimento rosso sopra il contorno;
   i text-shadow sovrapposti creano il bagliore intorno alla scritta) */
.filigrana {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-30deg);
  pointer-events: none; user-select: none;
  /* carattere pieno e tondeggiante: Baloo 2 (Google Font) con ripiego
     sui font arrotondati di sistema */
  font-family: 'Baloo 2', 'Arial Rounded MT Bold', 'Trebuchet MS', 'Arial Black', Arial, sans-serif;
  font-weight: 800;
  font-size: 26px; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  color: #e60012;
  -webkit-text-stroke: 3px #fff;
  paint-order: stroke fill;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),
    0 0 22px rgba(255, 255, 255, .85),
    0 0 40px rgba(255, 255, 255, .6),
    0 0 62px rgba(255, 255, 255, .4),
    0 0 90px rgba(255, 255, 255, .25),
    0 3px 6px rgba(0, 0, 0, .45);
}
.filigrana.f-sm {
  font-size: 11px; letter-spacing: .02em; -webkit-text-stroke-width: 1px;
  text-shadow:
    0 0 4px rgba(255, 255, 255, .95),
    0 0 10px rgba(255, 255, 255, .6),
    0 0 18px rgba(255, 255, 255, .4),
    0 0 28px rgba(255, 255, 255, .25),
    0 1px 3px rgba(0, 0, 0, .4);
}
.filigrana.f-lg {
  font-size: 60px; letter-spacing: .06em; -webkit-text-stroke-width: 5px;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 1),
    0 0 38px rgba(255, 255, 255, .85),
    0 0 64px rgba(255, 255, 255, .6),
    0 0 96px rgba(255, 255, 255, .4),
    0 0 140px rgba(255, 255, 255, .25),
    0 6px 12px rgba(0, 0, 0, .45);
}

/* filigrana con il logo dell'agenzia: overlay semitrasparente sulle foto.
   Si attiva con la classe .wm-on sul contenitore della foto; la stessa
   classe sul contenitore della galleria modificabile la applica a ogni
   anteprima. */
.wm-on { position: relative; }
.wm-on::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: url("logo.png") center / 42% auto no-repeat;
  opacity: .3;
  pointer-events: none;
}
/* nella galleria modificabile l'overlay va ripetuto su ogni singola anteprima */
.gallery-edit.wm-on { position: static; }
.gallery-edit.wm-on::after { content: none; }
.gallery-edit.wm-on .gallery-item::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: url("logo.png") center / 46% auto no-repeat;
  opacity: .3;
  pointer-events: none;
}

.code { font-weight: 700; color: var(--brand-700); font-size: 12.5px; letter-spacing: .2px; }

/* riferimento annuncio (Codice interno) in evidenza nella scheda immobile del gestionale */
.code-rif {
  font-size: 20px; font-weight: 800; letter-spacing: .6px;
  color: var(--brand-700);
  background: var(--brand-100);
  padding: 3px 12px; border-radius: 7px;
  line-height: 1.2;
}

.agent-chip {
  display: inline-grid; place-items: center;
  width: 26px; height: 22px;
  border-radius: 5px;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* pallino con il colore in agenda scelto per l'agente (Gestione profilo) */
.agent-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.attivo      { background: var(--accent-100); color: var(--accent-700); }
.badge.trattativa  { background: var(--amber-bg); color: #a96b12; }
.badge.sospeso     { background: #eef1f4; color: #5d6b7a; }
.badge.venduto     { background: var(--blue-bg); color: #2a5ea8; }
.badge.scaduto     { background: var(--red-bg); color: #a83a37; }
.badge.evasa       { background: #eef1f4; color: #5d6b7a; }
.badge.vendita     { background: var(--accent-100); color: var(--accent-700); }
.badge.affitto     { background: var(--blue-bg); color: #2a5ea8; }
.badge.affittato   { background: #ede9fe; color: #6d28d9; }
/* stato dell'appuntamento "Da confermare" (azzurro, come il bagliore) */
.badge.attesa      { background: var(--blue-bg); color: #2a5ea8; }

/* tipo di contatto nell'elenco clienti: un colore dedicato a garante,
   proprietario, conduttore e locatore */
.badge.tipo-garante      { background: #ffd400; color: #8a6100; }
.badge.tipo-proprietario { background: #fbdad5; color: var(--brand-600); }
.badge.tipo-conduttore   { background: var(--accent-700); color: #fff; }
.badge.tipo-locatore     { background: var(--brand-600); color: #fff; }

.score {
  display: inline-grid; place-items: center;
  min-width: 46px; height: 30px;
  border-radius: 7px;
  font-weight: 800; font-size: 13px;
  color: #fff;
  letter-spacing: -.3px;
}
.score.s100 { background: #2a9a54; }
.score.s90  { background: #5aa832; }
.score.s80  { background: #d3a021; }
.score.s70  { background: #d9822b; }
.score.low  { background: #b8c2cc; }

/* numero + stelle del rating di incrocio */
.score-wrap { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stars {
  font-size: 12px; line-height: 1; letter-spacing: 1px;
  color: #e0a92b;
}

/* scheda incrocio: stelle grandi e pulsanti "Lavora Incrocio" */
.inc-voto { text-align: center; }
.inc-voto .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 4px;
}
.inc-voto .big-stars { font-size: 26px; letter-spacing: 3px; color: #2a9a54; line-height: 1.2; }
.inc-voto .big-stars .off { color: #cfd6dc; }
.inc-voto .big-voto { font-size: 30px; font-weight: 800; color: #2a9a54; }
.inc-voto .inc-val { font-size: 15px; font-weight: 700; color: var(--accent-700); }

/* annuncio: foto a sinistra, dati raggruppati a destra */
.inc-annuncio { display: flex; gap: 20px; align-items: flex-start; }
.inc-annuncio .detail-media { width: 220px; }
.inc-annuncio-info { flex: 1; min-width: 0; }
.inc-ann-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.inc-ann-head .price { font-size: 20px; font-weight: 800; color: var(--brand-700); letter-spacing: -.5px; }
.inc-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 20px; }
.inc-facts .f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inc-facts .f .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); font-weight: 700; }
.inc-facts .f .v { font-size: 14px; font-weight: 600; }
.inc-ann-addr { margin-top: 14px; font-size: 13.5px; color: var(--text-soft); display: flex; align-items: center; gap: 7px; }
.inc-ann-addr svg { width: 15px; height: 15px; color: var(--text-mute); flex: 0 0 auto; }
@media (max-width: 760px) {
  .inc-annuncio { flex-direction: column; }
  .inc-annuncio .detail-media { width: 100%; }
}

.inc-lavora { display: flex; flex-wrap: wrap; gap: 8px; }
.inc-lavora .btn { justify-content: center; }
.inc-badge-nuovo {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: #fff; background: #d9534f;
}

.inc-motiv-form { display: flex; gap: 8px; align-items: flex-start; }
.inc-motiv-form textarea { flex: 1; min-height: 46px; }

/* Portal chips */
.portals { display: flex; gap: 5px; flex-wrap: wrap; }
.pchip {
  display: inline-grid; place-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid transparent;
}
.pchip.ok        { background: var(--accent-100); color: var(--accent-700); border-color: var(--logo-green-border); }
.pchip.pending   { background: var(--amber-bg); color: #a96b12; border-color: #f0dcb8; }
.pchip.scheduled { background: #e7eefc; color: #2f5fa8; border-color: #c9dbf5; }
.pchip.error     { background: var(--red-bg); color: #a83a37; border-color: #f3cfcd; }
.pchip.off       { background: #eef1f4; color: #8a97a5; border-color: #e0e6ea; }

/* sigla dei contenuti inviati sul canale, mostrata dentro il chip stesso */
.pch-sigla {
  margin-left: 4px; padding: 0 3px; border-radius: 3px;
  font-style: normal; font-size: 9px; font-weight: 800; line-height: 1.5;
  background: rgba(255, 255, 255, 0.75); color: inherit;
}
.pch-sigla.warn { background: var(--red-bg); color: #a83a37; }

/* chip dei portali cliccabili direttamente nell'elenco annunci */
button.pchip { font-family: inherit; cursor: pointer; }
button.pchip:hover { filter: brightness(0.95); }

/* chip che avviano la compilazione assistita: più grandi perché sono il comando
   principale del pannello, non un'etichetta di stato */
.compila-portals .pchip { padding: 7px 14px; font-size: 12px; border-radius: 7px; }
.compila-portals .pchip:disabled { opacity: 0.5; cursor: default; }

/* etichetta cliente nell'elenco contatti: sfondo con il colore della legenda */
.etich-chip {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 600; color: #2c3440; white-space: nowrap;
}

/* caselle di scelta dei canali di pubblicazione (scheda "Portali e sito") */
input[data-portale-sel] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-600); }

/* contenuti da inviare, una serie di tre caselle per ogni canale */
.chk-inline { display: flex; gap: 4px; flex-wrap: wrap; }
.chk-min {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--text-mute);
  background: #fff; cursor: pointer; user-select: none;
}
.chk-min input { width: 12px; height: 12px; margin: 0; cursor: pointer; accent-color: var(--accent-600); }
.chk-min.on,
.chk-min:has(input:checked) { background: var(--accent-100); border-color: var(--logo-green-border); color: var(--accent-700); }
.chk-min:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }

/* riga espandibile dei contenuti da inviare nella pagina Portali */
.portali-expand svg { width: 13px; height: 13px; transition: transform 0.15s; }
.portali-expand.open svg { transform: rotate(180deg); }
.portali-detail[hidden] { display: none; }
.portali-detail > td { background: #f7f9fb; }
.portali-contenuti { display: flex; flex-direction: column; gap: 8px; }
.portali-contenuti-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 20px; }
.pc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-canale { font-size: 12.5px; font-weight: 600; color: var(--text); }

/* data/ora di uscita programmata di un canale */
.uscita-input {
  font: inherit; font-size: 13px; color: var(--text);
  padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff;
}
.uscita-input:disabled { background: #f5f7f9; color: var(--text-mute); cursor: not-allowed; }

/* ---------------- DETTAGLIO IMMOBILE ---------------- */

.detail-head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfbfc);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 32, 48, .05), 0 14px 38px rgba(16, 32, 48, .09);
  padding: 22px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
/* sottile accento brand (rosso → verde) in cima alla scheda */
.detail-head::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-500) 55%, var(--logo-green) 100%);
}

.cover {
  width: 300px; height: 200px;
  border-radius: 12px;
  object-fit: cover;
  background: #e8edf1;
  display: block;
}
.detail-head .cover { flex: 0 0 auto; }
.detail-media .cover { width: 100%; }

/* foto principale + anteprima in miniatura della galleria, nello stesso riquadro */
.detail-media { flex: 0 0 auto; width: 300px; display: flex; flex-direction: column; gap: 10px; }
.detail-media .filigrana-wrap {
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(16, 32, 48, .14);
}
.thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.thumbs .thumb {
  width: 100%; height: 44px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
  cursor: pointer; background: #e8edf1;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.thumbs .thumb:hover { border-color: var(--brand-500); transform: translateY(-1px); }
.thumbs .thumb.active { border-color: var(--brand-600); box-shadow: 0 0 0 2px var(--brand-100), 0 0 0 3px var(--brand-600); }

/* foto della scheda immobile: cliccabili per aprirle a schermo intero */
.detail-media .cover { cursor: zoom-in; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.detail-media .cover:hover { transform: scale(1.04); }

/* ---------------- lightbox galleria foto ---------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 6000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .9); padding: 24px;
}
.lightbox.open { display: flex; }
body.lightbox-open { overflow: hidden; }
.lightbox-img {
  max-width: 92vw; max-height: 86vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: 26px; line-height: 1;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .3); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
  font-size: 30px; line-height: 1; display: grid; place-items: center;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, .3); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .05em;
  background: rgba(0, 0, 0, .45); padding: 6px 12px; border-radius: 999px;
}

.detail-head .info { flex: 1; min-width: 0; }
.detail-head .info h2 { margin: 3px 0 7px; font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--ink-900); line-height: 1.15; }
/* nome della struttura accanto al titolo della scheda annuncio */
.detail-head .info h2 .struttura-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 9px; padding: 2px 9px; vertical-align: middle;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0;
  color: var(--brand-700); background: var(--brand-100);
  border-radius: 999px;
}
.detail-head .info h2 .struttura-tag svg { width: 14px; height: 14px; color: var(--brand-600); }
.detail-head .addr { color: var(--text-soft); font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.detail-head .addr svg { width: 15px; height: 15px; color: var(--text-mute); }

/* dati chiave della scheda: tessere compatte e allineate */
.detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin-top: 18px; }
.detail-meta .m {
  background: #f7f8fa; border: 1px solid var(--border);
  border-radius: 11px; padding: 9px 12px;
}
.detail-meta .m .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); font-weight: 700; }
.detail-meta .m .val { font-size: 16px; font-weight: 700; margin-top: 3px; color: var(--ink-900); }
.detail-meta .m .val.price { font-size: 20px; color: var(--brand-700); letter-spacing: -.5px; }
.detail-meta .m-price { background: linear-gradient(180deg, #fff, var(--brand-100)); border-color: #f3d3d6; }

.detail-actions { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; }

/* chip dei canali nella scheda immobile: pubblicazione/rimozione con un clic */
.detail-portali { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.detail-portali .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); font-weight: 700; }

/* navigazione precedente/successivo tra gli annunci, in cima alla scheda */
.detail-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 12px; box-shadow: var(--shadow);
}
.detail-nav-count { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-mute); }

/* QR code che porta alla scheda pubblica dell'annuncio */
.detail-qr {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 132px; padding: 12px;
  background: #f7f8fa; border: 1px solid var(--border); border-radius: 12px;
}
.detail-qr img {
  width: 104px; height: 104px; display: block;
  border-radius: 8px; background: #fff; padding: 6px;
  box-shadow: 0 2px 8px rgba(16, 32, 48, .1);
}
.detail-qr span {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-mute); text-align: center; line-height: 1.25;
}

/* la scheda passa in colonna sugli schermi stretti */
@media (max-width: 720px) {
  .detail-head { flex-direction: column; }
  .detail-media, .detail-media .cover { width: 100%; }
  .cover { height: 220px; }
}

.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-top: 18px;
  overflow-x: auto;
}
.tab {
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand-700); border-bottom-color: var(--brand-600); font-weight: 650; }

.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 26px; }
@media (max-width: 900px) { .spec-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.spec-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed #eaeef2;
  font-size: 13px;
}
.spec-row .k { color: var(--text-soft); }
.spec-row .v { font-weight: 600; text-align: right; }

.section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--brand-700); font-weight: 800;
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* intestazione di una sotto-sezione (es. indirizzo principale / secondario) */
.sub-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin: 0; display: flex; align-items: center; gap: 8px;
}

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 12px; }
.gallery img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

.map-frame { width: 100%; height: 300px; border: 0; border-radius: 9px; }
.map-leaflet { position: relative; background: #e9eeec; overflow: hidden; }

/* legenda della mappa con i punti degli indirizzi */
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 10px; font-size: 13px; color: var(--text-soft); }
.map-legend-item { display: inline-flex; align-items: center; gap: 7px; }

.map-pin {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .38);
}
.map-pin-1 { background: var(--brand-600, #aa0014); }
.map-pin-2 { background: var(--logo-green, #0acc22); }
.map-pin-sm { width: 22px; height: 22px; font-size: 12px; }
/* campione del raggio d'azione (senza indirizzo secondario) nella legenda */
.map-raggio { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: rgba(99, 176, 111, .22); border: 1px solid #63b06f; }
/* segnaposto della scheda immobile in affitto: interno verde con contorno bianco come i pin rossi */
.map-pin-verde { background: var(--logo-green, #0acc22); }
.map-pin-wrap { background: none; border: 0; }
/* nella mappa annunci i segnaposto sono cliccabili e aprono la scheda dell'immobile */
.map-leaflet-annunci .map-pin-wrap { cursor: pointer; }

/* anteprima dell'annuncio mostrata passando il mouse sui segnaposto della mappa */
.vc-map-prev-tip {
  padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.vc-map-prev-tip::before { display: none; }
.vc-map-prev-tip .leaflet-tooltip-content { margin: 0; }
.vc-map-prev { width: 210px; }
.vc-map-prev img { display: block; width: 100%; height: 118px; object-fit: cover; }
.vc-map-prev-txt { padding: 8px 10px 10px; }
.vc-map-prev-rif {
  display: block; font-size: 11px; color: #8a8a8a;
  text-transform: uppercase; letter-spacing: .04em;
}
.vc-map-prev-prezzo { display: block; font-weight: 700; color: var(--brand-600); font-size: 15px; }
.vc-map-prev-titolo { display: block; font-size: 12px; color: #444; margin-top: 2px; }
.vc-map-prev-luogo { display: block; font-size: 12px; color: #666; margin-top: 2px; }

.leaflet-popup-content { font-size: 13px; line-height: 1.45; }

/* ---------------- AGENDA ---------------- */

.week-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.week-head .title { font-size: 14.5px; font-weight: 650; margin: 0 auto; }

/* vista settimanale: griglia a colonne con scala oraria di 30 minuti */
.week-cal-wrap { overflow-x: auto; }
.week-cal {
  display: grid;
  grid-template-columns: 58px repeat(7, minmax(118px, 1fr));
  gap: 8px; padding: 16px; min-width: 840px;
}
.wc-gutter { position: relative; }
.wc-t {
  position: absolute; right: 6px;
  font-size: 10.5px; color: var(--text-mute); white-space: nowrap;
}
.wc-t.ora { font-weight: 700; color: var(--text-soft); }

.day-head {
  padding: 8px 11px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fafcfd;
  font-size: 12px; font-weight: 700; color: var(--text-soft);
  text-align: center;
}
.day-head.today { color: var(--accent-700); background: var(--accent-100); border-color: var(--logo-green-border); }

.wc-body {
  position: relative; overflow: visible;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fafcfd;
}
.wc-body.today { background: var(--logo-green-tint); border-color: var(--logo-green-border); }
.wc-slot { height: calc(34px * var(--row-zoom, 1)); border-top: 1px dashed #e3ecf2; cursor: pointer; transition: background .12s; }
.wc-slot.ora { border-top: 1px solid var(--border); }
.wc-slot:first-child { border-top: none; }
.wc-slot:hover { background: var(--accent-100); }
.wc-evt { position: absolute; z-index: 2; padding: 0 2px; }
/* il contenitore .wc-evt (assoluto + z-index) crea uno stacking context: per
   portare in primo piano l'appuntamento aperto bisogna alzare il contenitore,
   non solo la card interna. Vale tra appuntamenti sovrapposti e verso le
   colonne accanto, su cui la card aperta sborda. */
.wc-evt:hover { z-index: 45; }
/* il testo resta contenuto oltre il 175%, mentre l'altezza arriva dal
   calendario in base alla durata reale dell'appuntamento */
.wc-evt .appt {
  padding: calc(4px * var(--appt-zoom)) calc(6px * var(--appt-zoom));
}
.wc-evt .appt .t { font-size: calc(11px * var(--appt-zoom)); }
/* il titolo si tronca con l'ellisse, il badge stato no */
.wc-evt .appt .t .ttl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-evt .appt .h { font-size: calc(10px * var(--appt-zoom)); margin-top: calc(1px * var(--appt-zoom)); }
.wc-evt .appt .range { display: none; }
/* l'annotazione resta nascosta nel riquadro compatto e compare quando il
   riquadro è espanso (flag ▾) o si passa sopra con il puntatore */
.wc-evt .appt .note { display: none; font-size: calc(10px * var(--appt-zoom)); }
.wc-evt .appt:hover .note, .wc-evt .appt.aperto .note { display: block; }
.wc-evt .appt .agent-chip {
  font-size: calc(9.5px * var(--appt-zoom));
  padding: calc(1px * var(--appt-zoom)) calc(5px * var(--appt-zoom));
}

/* --- agenda: vista mensile --- */
.month { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; padding: 16px; }
.month-head {
  text-align: center; font-size: 11.5px; font-weight: 700;
  color: var(--text-soft); padding: 4px 0;
}
.month-cell {
  min-height: calc(92px * var(--row-zoom, 1)); background: #fafcfd; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 7px;
  display: flex; flex-direction: column; gap: 4px;
}
.month-cell.off { background: transparent; border-color: transparent; }
.month-cell.today { background: var(--logo-green-tint); border-color: var(--logo-green-border); }
.month-day { font-size: 11.5px; font-weight: 700; color: var(--text-soft); }
.month-cell.today .month-day { color: var(--accent-700); }
.month-evt {
  position: relative;
  z-index: 1;
  --appt-zoom: min(var(--row-zoom, 1), 1.75);
  font-size: calc(11px * var(--appt-zoom)); line-height: 1.3;
  background: #fff; border-left: calc(3px * var(--appt-zoom)) solid var(--accent-500);
  border-radius: 5px; padding: calc(3px * var(--appt-zoom)) calc(6px * var(--appt-zoom)); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(16,32,48,.06);
  transition: transform .16s ease, box-shadow .16s ease;
  display: flex; align-items: center; gap: 5px;
}
/* anche in mese lo stato è sempre visibile: si tronca semmai il titolo */
.month-evt .ttl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.month-evt .badge {
  flex: 0 0 auto;
  font-size: calc(9px * var(--appt-zoom));
  padding: 1px calc(5px * var(--appt-zoom));
  gap: calc(3px * var(--appt-zoom));
}
.month-evt .badge::before { width: calc(4px * var(--appt-zoom)); height: calc(4px * var(--appt-zoom)); }
.month-evt:hover {
  background: #f2f7ee;
  transform: scale(1.06);
  box-shadow: 0 8px 18px rgba(16,32,48,.18);
  z-index: 30;
}
.month-evt .h { color: var(--text-mute); font-weight: 650; }
/* l'annotazione dell'appuntamento occupa una riga propria, troncata con l'ellisse */
.month-evt, .promo-item { flex-wrap: wrap; }
.month-evt .appt-note, .promo-item .appt-note {
  flex: 1 0 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-soft); font-weight: 500;
}
.month-evt .appt-note { font-size: calc(10px * var(--appt-zoom)); }
.promo-item .appt-note { font-size: 11px; }
@media (max-width: 900px) {
  .month { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .month-head { display: none; }
}

/* --- agenda: vista annuale (12 mesi in miniatura) --- */
.year {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px; padding: 16px;
}
.year-month {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px 10px; background: #fff;
}
.year-month.current { border-color: var(--logo-green-border); background: var(--logo-green-tint); }
.year-month-name {
  font-size: 12px; font-weight: 700; text-transform: capitalize;
  color: var(--text-soft); margin-bottom: 6px;
}
.year-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 2px; }
.year-dow { text-align: center; font-size: 9px; font-weight: 700; color: var(--text-mute); padding-bottom: 2px; }
.year-cell {
  position: relative; text-align: center; font-size: 10.5px; line-height: 1;
  padding: calc(4px * var(--row-zoom, 1)) 0; border-radius: 5px; cursor: pointer; color: var(--text-soft);
}
.year-cell.off { cursor: default; }
.year-cell.has { font-weight: 700; color: var(--text); background: #eef4ea; }
.year-cell.has::after {
  content: ''; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent-500);
}
.year-cell.today { background: var(--accent-100); color: var(--accent-700); font-weight: 700; }
.year-cell:hover:not(.off) { background: var(--accent-100); }
@media (max-width: 1100px) { .year { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px) { .year { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.appt {
  position: relative;
  z-index: 1;
  /* oltre il 175% l'appuntamento non cresce più: altrimenti sborda
     sulla fascia oraria sottostante */
  --appt-zoom: min(var(--row-zoom, 1), 1.75);
  border-left: calc(3px * var(--appt-zoom)) solid #b8c2cc;
  background: #fff;
  border-radius: 6px;
  padding: calc(7px * var(--appt-zoom)) calc(9px * var(--appt-zoom));
  box-shadow: 0 1px 2px rgba(16,32,48,.06);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
/* passando il mouse l'appuntamento si ingrandisce e si porta in primo piano */
.appt:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 22px rgba(16,32,48,.18);
  z-index: 30;
}
.appt .t {
  font-size: calc(12px * var(--appt-zoom)); font-weight: 650; line-height: 1.25;
  display: flex; align-items: center; gap: 6px;
}
/* il titolo si tronca, il badge stato resta sempre interamente visibile */
.appt .t .ttl { flex: 1 1 auto; min-width: 0; }
.appt .h { font-size: calc(11px * var(--appt-zoom)); color: var(--text-mute); margin-top: calc(3px * var(--appt-zoom)); display: flex; justify-content: space-between; gap: 6px; }
/* anche il badge agente cresce insieme all'appuntamento */
.appt .agent-chip {
  width: calc(26px * var(--appt-zoom)); height: calc(22px * var(--appt-zoom));
  font-size: calc(10.5px * var(--appt-zoom));
}
.appt .h .rif { color: var(--brand-700); font-weight: 650; letter-spacing: .2px; }
/* il riferimento annuncio apre la scheda dell'immobile */
.appt .h .rif a { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.appt .h .rif a:hover { text-decoration-thickness: 2px; }
.appt .h .appt-ric { color: var(--brand-600); font-weight: 650; letter-spacing: .2px; }
.appt .h .appt-rem { color: var(--accent-600); font-weight: 650; letter-spacing: .2px; }
.appt .note { font-size: calc(11px * var(--appt-zoom)); color: var(--text-soft); margin-top: calc(4px * var(--appt-zoom)); line-height: 1.35; white-space: normal; }
.appt .range {
  font-size: calc(10.5px * var(--appt-zoom)); font-weight: 700; color: var(--brand-600);
  margin-top: calc(3px * var(--appt-zoom)); letter-spacing: .2px;
}
.appt.multi { background: linear-gradient(180deg, #fff, var(--brand-100)); }
.appt.telefonare, .appt.call, .appt.telefonata { border-left-color: var(--blue); }
.appt.sopralluogo, .appt.sopralluogosta,
.appt.visitaannunciovendita, .appt.visitaannuncioaffitto { border-left-color: var(--accent-500); }
.appt.contratto, .appt.rogito, .appt.preliminare,
.appt.contrattoperlocazioneimmobile { border-left-color: #7a4fd8; }
.appt.valutazione, .appt.perizia,
.appt.stimaimmobilevendita, .appt.stimaimmobileinlocazione { border-left-color: var(--amber); }
.appt.acquisizione, .appt.acquisizioneasta, .appt.incarico { border-left-color: #2aa4a4; }
.appt.altro { border-left-color: #b8c2cc; }
/* appuntamento in corso adesso: bagliore pulsante che lo mette in evidenza */
.appt.in-corso, .month-evt.in-corso {
  z-index: 20;
  animation: apptCorsoGlow 1.8s ease-in-out infinite alternate;
}
.appt.in-corso:hover, .month-evt.in-corso:hover { z-index: 30; }
@keyframes apptCorsoGlow {
  from { box-shadow: 0 0 0 2px rgba(255, 176, 32, .55), 0 0 12px 4px rgba(255, 176, 32, .35); }
  to   { box-shadow: 0 0 0 3px rgba(255, 176, 32, .9), 0 0 26px 10px rgba(255, 176, 32, .55); }
}

/* --- bagliore di stato dell'appuntamento: si accende dal titolare in
   "Impostazioni agenda" e mette in evidenza il riquadro dietro l'appuntamento
   con il colore dello stato (verde confermato, azzurro da confermare,
   rosso annullato). Vale nelle viste Giorno, Settimana e Mese. --- */
.appt.glow-ok, .month-evt.glow-ok {
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .55), 0 0 14px 4px rgba(34, 197, 94, .35);
}
.appt.glow-attesa, .month-evt.glow-attesa {
  box-shadow: 0 0 0 2px rgba(56, 160, 222, .55), 0 0 14px 4px rgba(56, 160, 222, .35);
}
.appt.glow-annullato, .month-evt.glow-annullato {
  box-shadow: 0 0 0 2px rgba(220, 68, 60, .55), 0 0 14px 4px rgba(220, 68, 60, .35);
}
/* legenda del bagliore nel pannello "Impostazioni agenda" */
.glow-legenda { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--text-soft); }
.glow-voce { display: inline-flex; align-items: center; gap: 7px; }
.glow-campione { width: 15px; height: 15px; border-radius: 50%; display: inline-block; }
.glow-campione.glow-ok { background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .3), 0 0 9px 3px rgba(34, 197, 94, .6); }
.glow-campione.glow-attesa { background: #38a0de; box-shadow: 0 0 0 2px rgba(56, 160, 222, .3), 0 0 9px 3px rgba(56, 160, 222, .6); }
.glow-campione.glow-annullato { background: #dc443c; box-shadow: 0 0 0 2px rgba(220, 68, 60, .3), 0 0 9px 3px rgba(220, 68, 60, .6); }

/* --- card appuntamento: compatta, si apre del tutto con hover o flag ---
   la card occupa solo lo spazio dell'appuntamento e tronca l'eccedenza;
   passandoci sopra (o premendo il flag) mostra tutti i dettagli */
.appt { overflow: hidden; }
.appt .t { padding-right: 18px; }
/* il badge stato è sulla riga del titolo (la prima della card): è la parte
   che resta sempre visibile, anche quando il resto del contenuto è troncato */
.appt .t .badge {
  flex: 0 0 auto;
  font-size: calc(9.5px * var(--appt-zoom));
  padding: 1px calc(6px * var(--appt-zoom));
  gap: calc(3px * var(--appt-zoom));
}
.appt .t .badge::before { width: calc(4px * var(--appt-zoom)); height: calc(4px * var(--appt-zoom)); }
.appt:hover, .appt.aperto { z-index: 40; overflow-y: auto; }
/* vista settimana: l'altezza è quella della durata; aperta la card sborda
   sovrapponendosi alle fasce sottostanti */
.wc-evt .appt { height: 100%; }
.wc-evt .appt:hover, .wc-evt .appt.aperto {
  height: auto; max-height: 340px;
  width: max-content; min-width: 100%; max-width: 320px;
}
.wc-evt .appt:hover .t .ttl, .wc-evt .appt.aperto .t .ttl {
  white-space: normal; overflow: visible; text-overflow: clip;
}
/* vista giorno: altezza compatta; aperta mostra tutto il resto */
.hour-slot .appt { max-height: calc(84px * var(--appt-zoom)); }
.hour-slot .appt:hover, .hour-slot .appt.aperto { max-height: 340px; }
/* flag di espansione in alto a destra (▾ aperto / ▴ chiuso) */
.appt-expand {
  position: absolute; top: 3px; right: 3px;
  width: 16px; height: 16px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 4px;
  background: var(--accent-100); color: var(--accent-700);
  font-size: 10px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.appt-expand::after { content: '\25BE'; }
.appt.aperto .appt-expand::after { content: '\25B4'; }
.appt:hover .appt-expand, .appt.aperto .appt-expand { opacity: 1; }
/* su touch il flag resta sempre visibile (non c'è l'hover) */
@media (hover: none) { .appt-expand { opacity: 1; } }

/* --- agenda: creazione rapida (giorni/ore cliccabili) --- */
.plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; border-radius: 50%;
  background: var(--accent-100); color: var(--accent-700);
  font-size: 12px; font-weight: 700; line-height: 1;
  opacity: 0; transition: opacity .12s;
}
.day-head[data-new-appt-date], .month-cell[data-new-appt-date] { cursor: pointer; }
.day-head[data-new-appt-date]:hover, .month-cell[data-new-appt-date]:hover { border-color: var(--accent-500); }
.day-head[data-new-appt-date]:hover .plus,
.month-cell[data-new-appt-date]:hover .plus { opacity: 1; }
.month-day .plus { margin-left: 5px; }

/* --- agenda: vista giorno (timeline oraria) --- */
.day-view { padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.hour-row { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 10px; }
.hour-lbl {
  font-size: 11.5px; font-weight: 650; color: var(--text-mute);
  text-align: right; padding-top: calc(7px * var(--row-zoom, 1));
}
.hour-slot {
  min-height: calc(42px * var(--row-zoom, 1)); border-top: 1px solid var(--border);
  padding: calc(5px * var(--row-zoom, 1)) 0 calc(6px * var(--row-zoom, 1));
  display: flex; flex-direction: column; gap: 6px;
}
.hour-slot.empty { cursor: pointer; border-radius: 6px; transition: background .12s; }
.hour-slot.empty:hover { background: var(--accent-100); }
.hour-slot.empty::after {
  content: "+ Nuovo appuntamento";
  font-size: 11.5px; color: var(--text-mute); opacity: 0;
  transition: opacity .12s; padding-left: 4px;
}
.hour-slot.empty:hover::after { opacity: 1; }

/* --- agenda: promemoria e scadenze --- */
.promemoria {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;
}
@media (max-width: 1100px) { .promemoria { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .promemoria { grid-template-columns: minmax(0,1fr); } }
.promo-card {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.promo-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.promo-head svg { width: 15px; height: 15px; color: var(--accent-600); flex: none; }
.promo-count {
  margin-left: auto; background: var(--accent-100); color: var(--accent-700);
  border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 700;
}
.promo-body { padding: 7px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.promo-item {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 12px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.promo-item:hover { background: #f4f8f1; }
.promo-item .when { color: var(--text-mute); font-weight: 650; flex: none; }
/* il titolo si tronca, il badge stato resta sempre visibile */
.promo-item .ttl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.promo-item .badge { flex: 0 0 auto; }
.promo-empty { font-size: 12px; color: var(--text-mute); padding: 8px; }

.notifica-riga {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; padding: 6px 8px; border-radius: 6px;
}
.notifica-riga:hover { background: #f4f8f1; }
.notifica-riga .when { color: var(--text-mute); font-weight: 650; flex: none; }
.notifica-riga .chi {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notifica-riga .agent-chip { vertical-align: middle; margin-right: 2px; }
.notifica-riga .btn { font-size: 11.5px; padding: 4px 8px; }

/* ---------------- BAR CHART (CSS) ---------------- */

.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 12px; font-size: 12.5px; }
.bar-track { background: #eef1f4; border-radius: 20px; height: 9px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--brand-600), var(--brand-500)); }
.bar-row .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-soft); }

.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut {
  width: 132px; height: 132px; border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
}
.donut::after {
  content: ""; position: absolute; inset: 26px;
  background: var(--surface); border-radius: 50%;
}
.legend { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.legend .lg { display: flex; align-items: center; gap: 8px; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; }
.legend .lg .n { margin-left: auto; font-weight: 700; color: var(--text-soft); }

/* ---------------- SEGMENTAZIONE CANALI SOCIAL (dashboard) ---------------- */

.social-seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.social-seg .canale {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e9edf1; border-radius: 10px; background: #fff;
}
.social-seg .canale .ico {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; background: #9aa7b4;
}
.social-seg .canale .ico svg { width: 19px; height: 19px; }
.social-seg .canale .ico.facebook { background: #1877f2; }
.social-seg .canale .ico.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-seg .canale .ico.telegram { background: #229ed9; }
.social-seg .canale .ico.tiktok { background: #111; }
.social-seg .canale .ico.youtube { background: #ff0000; }
.social-seg .canale .ico.sito { background: var(--brand-600); }
.social-seg .canale .canale-txt { flex: 1; min-width: 0; }
.social-seg .canale .nome { font-weight: 650; font-size: 13px; }
.social-seg .canale .dett { font-size: 11.5px; color: var(--text-mute); }
.social-seg .canale .canale-num { text-align: right; flex: 0 0 auto; }
.social-seg .canale .canale-num b { font-size: 17px; font-variant-numeric: tabular-nums; }

/* ---------------- WEB APP (Crafting Apps in versione web) ---------------- */

.webapp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.wa-card {
  display: flex; flex-direction: column;
  padding: 14px;
  border: 1px solid #e9edf1; border-radius: 12px; background: #fff;
}
.wa-card.wa-pref { border-color: var(--brand-600); box-shadow: inset 0 0 0 1px var(--brand-600); }
.wa-top { display: flex; align-items: center; gap: 11px; }
.wa-ico {
  position: relative; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
  color: #fff; font-size: 17px; font-weight: 700;
}
.wa-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.wa-tit { min-width: 0; }
.wa-tit b { display: block; font-size: 13.5px; font-weight: 650; }
.wa-tit small { display: block; font-size: 11.5px; color: var(--text-mute); }
.wa-badge {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: 5px; background: var(--brand-600); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px; vertical-align: 1px;
}
.wa-desc { flex: 1; margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-soft); }
.wa-actions { display: flex; gap: 8px; margin-top: 12px; }
.wa-actions .btn { flex: 1; justify-content: center; }
.wa-actions .btn-ghost { flex: 0 0 auto; padding: 7px 10px; }

/* --- WEB APP: ponte locale e travaso guidato --- */

.ponte-stato {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
  background: #eef1f4; color: #5a6772;
}
.ponte-stato::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ponte-stato.ok { background: #e6f6ec; color: #1c7a45; }
.ponte-stato.ko { background: #fdecec; color: #b8352f; }
.ponte-stato.attesa { background: #fdf4e3; color: #9a6b12; }

.ponte-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e9edf1; border-radius: 10px; background: #fafbfc;
  cursor: pointer;
}
.ponte-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--brand-600); flex: 0 0 auto; }
.ponte-check b { display: block; font-size: 13.5px; }
.ponte-check small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--text-mute); }

.ponte-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }
.ponte-app {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border: 1px solid #e9edf1; border-radius: 9px;
  font-size: 12.5px; cursor: pointer;
}
.ponte-app input { width: 15px; height: 15px; accent-color: var(--brand-600); flex: 0 0 auto; }
.ponte-app-nome { flex: 1; font-weight: 600; }
.ponte-app-stato { font-size: 11px; color: var(--text-mute); }
.ponte-app.inst { background: #f3fbf6; border-color: #cfe7da; }
.ponte-app.inst .ponte-app-stato { color: #1c7a45; font-weight: 650; }

.ponte-avanz { margin-top: 12px; }
.ponte-avanz .bar { height: 8px; border-radius: 999px; background: #eef1f4; overflow: hidden; }
.ponte-avanz .bar i { display: block; height: 100%; background: var(--brand-600); transition: width .3s ease; }
.ponte-msg { margin-top: 8px; font-size: 12.5px; color: #9a6b12; }

.ponte-riga { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
.ponte-campo { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 650; color: var(--text-mute); }
.ponte-campo select, .ponte-campo input {
  font: inherit; font-size: 12.5px; font-weight: 400;
  padding: 7px 9px;
  border: 1px solid #dfe4e9; border-radius: 8px; background: #fff; color: var(--text);
}
.ponte-campo select { min-width: 210px; }

.ponte-esito {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 12px; padding: 11px 13px;
  border: 1px solid #cfe7da; border-radius: 10px; background: #f3fbf6;
  font-size: 12.5px; color: #1c7a45;
}
.ponte-passi { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.65; color: var(--text-soft); }
.ponte-passi a { color: var(--brand-600); text-decoration: underline; }

/* ---------------- LEADS ---------------- */

.lead-list { display: flex; flex-direction: column; }
.lead {
  display: flex; gap: 12px;
  padding: calc(12px * var(--row-zoom, 1)) 18px;
  border-bottom: 1px solid #eef1f4;
  cursor: pointer;
}
/* casella di selezione nella lista dei lead */
.lead .sel-lead { display: flex; align-items: center; flex: 0 0 auto; }
.lead .sel-lead input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--brand-500); }

/* casella "seleziona tutti" degli elenchi (testata della lista dei lead) */
.label-sel-tutti {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-soft); cursor: pointer; white-space: nowrap;
}
.label-sel-tutti input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--brand-500); }
.lead:last-child { border-bottom: 0; }
.lead:hover { background: #f7f9fb; }
.lead.unread { background: #fdf7f8; }
.lead .acts { display: flex; align-items: center; flex: 0 0 auto; }
.lead .acts .btn { white-space: nowrap; }
.lead .src {
  width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; color: #fff;
  flex: 0 0 auto; text-align: center; line-height: 1.05;
}
.lead .src.idealista { background: #4ca64c; }
.lead .src.immobiliare { background: #d9432f; }
.lead .src.telegram { background: #229ed9; }
.lead .src.telegram svg { width: 18px; height: 18px; }
.lead .src.facebook { background: #1877f2; }
.lead .src.facebook svg { width: 18px; height: 18px; }
.lead .src.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.lead .src.instagram svg { width: 18px; height: 18px; }
.lead .body { flex: 1; min-width: 0; }
.lead .top { display: flex; align-items: baseline; gap: 8px; }
.lead .name { font-weight: 650; font-size: 13px; }
.lead .when { font-size: 11.5px; color: var(--text-mute); margin-left: auto; white-space: nowrap; }
.lead .msg {
  font-size: 12.5px; color: var(--text-soft);
  margin: 3px 0 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lead .meta { font-size: 11.5px; color: var(--text-mute); display: flex; gap: 12px; flex-wrap: wrap; }
.lead .meta .ref { color: var(--brand-700); font-weight: 650; }
.lead .newdot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-600); flex: 0 0 auto; margin-top: 6px; }

/* ---------------- UTILITY ---------------- */

.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.muted { color: var(--text-mute); }
.muted svg { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -2px; }
.small { font-size: 12px; }
.empty { padding: 46px 20px; text-align: center; color: var(--text-mute); font-size: 13px; }
.section { margin-bottom: 18px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.hint {
  background: var(--accent-100);
  border: 1px solid var(--logo-green-border);
  color: var(--accent-700);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  display: flex; gap: 9px; align-items: flex-start;
}
.hint svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }

/* valore predefinito di un campo: promemoria in grigio sotto il campo */
.field-default {
  margin-top: 4px;
  color: var(--text-mute);
  font-size: 12px;
}

.demo-flag {
  position: fixed; bottom: 14px; right: 16px;
  background: var(--ink-800); color: #dcdcdc;
  font-size: 11px; padding: 6px 12px; border-radius: 20px;
  box-shadow: var(--shadow-lg); z-index: 50; opacity: .92;
}
.demo-flag strong { color: var(--accent-500); }

.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:disabled:hover { background: #fff; }

/* ---------------- LOGIN / REGISTRAZIONE ---------------- */

.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--brand-900), var(--brand-700));
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
}

.auth-brand { text-align: center; margin-bottom: 18px; }
/* il logo ha la scritta "Casa" bianca: su fondo chiaro serve la fascia rossa */
.auth-brand .brand-logo {
  display: inline-block;
  width: 202px;
  height: auto;
  padding: 12px 14px;
  background: linear-gradient(180deg, #bd0903, var(--logo-red));
  border-radius: 4px;
}
.auth-brand .brand-tagline {
  margin-top: 7px;
  font-size: 10.5px;
  font-style: italic;
  color: var(--text-mute);
}

.auth-form { display: flex; flex-direction: column; gap: 13px; }
.auth-form input { min-width: 0; width: 100%; }
.auth-submit { justify-content: center; padding: 9px 14px; margin-top: 3px; }

.auth-msg { font-size: 12.5px; padding: 9px 12px; border-radius: 7px; }
.auth-msg.error { background: var(--red-bg); color: var(--red); }
.auth-msg.ok { background: var(--accent-100); color: var(--accent-700); }

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  margin-top: 16px;
}
.auth-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--brand-600);
  cursor: pointer;
}
.auth-linkbtn:hover { color: var(--brand-500); text-decoration: underline; }
.auth-home {
  font-size: 12.5px;
  color: var(--text-mute);
  text-decoration: none;
}
.auth-home:hover { color: var(--brand-500); text-decoration: underline; }

/* contenitore del captcha di protezione (Turnstile / hCaptcha) */
.auth-captcha { display: flex; justify-content: center; margin: 2px 0; }

/* attivazione del secondo fattore con app di autenticazione */
.totp-attiva { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.totp-qr { width: 190px; height: 190px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.totp-qr:not([src]) { visibility: hidden; }
.totp-secret { font-size: 13px; color: var(--text-soft); text-align: center; word-break: break-all; }
.totp-secret code { background: #f2f6f9; border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
.totp-attiva .field { width: 100%; max-width: 260px; }

/* captcha aritmetico della maschera di accesso */
.captcha-row { display: flex; align-items: center; gap: 12px; }
.captcha-q {
  font-size: 15px; font-weight: 700; color: var(--text-soft);
  background: #f2f6f9; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; white-space: nowrap;
}
.captcha-row input { flex: 1; min-width: 0; }

/* --- secondo fattore: schermata del codice via email --- */
.auth-step-title {
  font-size: 15px; font-weight: 700; color: var(--ink-800);
  margin: 4px 0 6px; text-align: center;
}
.auth-step-text {
  font-size: 12.5px; line-height: 1.5; color: var(--text-mute);
  text-align: center; margin: 0 0 16px;
}
.auth-back { justify-content: center; padding: 8px 14px; }

/* ---------------- GESTIONE PROFILO ---------------- */

.permessi-legenda {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0 0 16px;
}
.permesso-voce {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-500);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--bg);
}
.permesso-voce strong { display: block; font-size: 12.5px; color: var(--ink-800); }
.permesso-voce span { font-size: 11.5px; color: var(--text-mute); line-height: 1.4; }
.permesso-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.permesso-voce .permesso-count {
  flex: none;
  min-width: 22px; text-align: center;
  padding: 1px 7px; border-radius: 999px;
  background: var(--accent-100); color: var(--accent-700);
  font-size: 11.5px; font-weight: 700; line-height: 1.6;
}

/* ---------------- MODALI DI INSERIMENTO / MODIFICA ---------------- */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 26, 32, .5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  /* sopra le mappe Leaflet (le loro "panes" arrivano a z-index 1000) */
  z-index: 4000;
  overflow-y: auto;
}

.modal {
  width: 100%;
  max-width: 760px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 80px);
}

.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 650; }
.modal-head .icon-btn { margin-left: auto; }

/* barra precedente/successivo tra le schede dentro la modale (es. i lead) */
.form-nav { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.form-nav .form-nav-count { margin: 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-mute); }

.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.modal-body input:not([type="checkbox"]):not([type="radio"]), .modal-body select, .modal-body textarea { min-width: 0; width: 100%; }

.modal-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.modal-foot .modal-msg { flex: 1; font-size: 12.5px; color: var(--red); }
.modal-foot .modal-msg.error { background: var(--red-bg); padding: 8px 12px; border-radius: 7px; }
.modal-foot .modal-msg:empty { display: none; }

/* banner di conferma del salvataggio ("Sei sicuro?"): appare sopra il piede
   della scheda al primo clic su "Salva" (annunci, appuntamenti, lead,
   richieste, incroci e clienti) */
.modal-conferma {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 20px 14px;
  padding: 12px 14px;
  border: 1px solid var(--amber);
  border-radius: 9px;
  background: var(--amber-bg);
  font-size: 13.5px; font-weight: 700;
}
.modal-conferma[hidden] { display: none; }
.modal-conferma > span { flex: 1; }
.modal-conferma .modal-conferma-titolo {
  flex: 1;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .4px;
  color: #a96b12;
}

/* ---------------- PANNELLO "STAMPA / SALVA DOCUMENTO" (contratti) ---------------- */
.modal-stampa { max-width: 520px; }
.modal-stampa .modal-head h2 { display: flex; align-items: center; gap: 10px; }
.modal-stampa .modal-head h2 svg { width: 20px; height: 20px; }
.stampa-body {
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px 22px;
}
.stampa-sub { font-size: 15px; color: var(--text-soft); }
.stampa-sub b { color: var(--text); font-weight: 700; }
.stampa-field { display: flex; flex-direction: column; gap: 9px; }
.stampa-field > label { font-size: 15px; font-weight: 600; color: var(--text); }
.stampa-radio { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.stampa-radio label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; color: var(--text); cursor: pointer; user-select: none;
}
.stampa-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-600); cursor: pointer; }
.stampa-hint { font-size: 13px; color: var(--text-mute); }

/* ---------------- PANNELLO "INVIA DOCUMENTI" (contratti) ---------------- */
.modal-invio { max-width: 620px; }
.invio-dest {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 10px;
}
.invio-dest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.invio-ruolo { font-size: 15px; font-weight: 700; color: var(--text); }
.invio-mail { font-size: 13px; color: var(--text-mute); }
.invio-allegati { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invio-allegato {
  font-size: 12.5px;
  padding: 3px 10px; border-radius: 20px;
  background: var(--green-bg, #e8f5ec); color: var(--green, #2c7a48);
}
.invio-allegato.mancante { background: var(--red-bg); color: var(--red); }
.invio-avviso {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--red);
  background: var(--red-bg); padding: 10px 12px; border-radius: 8px;
}
.invio-avviso label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); cursor: pointer; user-select: none;
}
.invio-note { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--bg-soft, #f6f7f9); border-radius: 10px; }
.invio-note textarea { width: 100%; min-height: 130px; }

/* ---------------- GESTIONE "TEMPLATE CONTRATTI" ---------------- */
/* le modali dei template sono più larghe del pannello stampa, così l'elenco
   con le azioni (consulta/modifica/duplica/elimina) è visibile senza scroll */
#tplContrattiOverlay .modal { max-width: 900px; }
.tpl-actions { display: flex; justify-content: flex-end; }
.tpl-list { display: flex; flex-direction: column; gap: 10px; }
.tpl-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.tpl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tpl-name { font-size: 15px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-meta { font-size: 12.5px; color: var(--text-mute); }
.tpl-clausole { display: flex; flex-direction: column; gap: 10px; }
.tpl-margini { display: flex; gap: 22px; flex-wrap: wrap; }
.tpl-margini label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.tpl-margini input { width: 90px; }
.tpl-clausola { display: flex; align-items: flex-start; gap: 8px; }
.tpl-clausola textarea { flex: 1; resize: vertical; }
.tpl-clausola-actions { flex: none; display: flex; flex-direction: column; gap: 4px; }
.tpl-clausola-actions .icon-btn { width: 30px; height: 26px; }
.tpl-clausola-actions .icon-btn svg { width: 15px; height: 15px; }
.tpl-ins-clausola { color: var(--brand-600); }
.tpl-move-clausola { color: var(--text-mute); }
.tpl-move-clausola:hover { color: var(--text); }
.tpl-del-clausola { color: var(--red); }
.tpl-legenda {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 240px; overflow: auto; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface, #fff);
}
.tpl-legenda-grp { font-size: 12.5px; line-height: 2; color: var(--text); }
.tpl-legenda-tit { display: block; font-weight: 650; color: var(--brand-600); margin-bottom: 2px; }
.tpl-legenda code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; background: #f1f2f4; color: var(--text);
  padding: 1px 6px; border-radius: 6px; margin-right: 4px; white-space: nowrap;
}
.tpl-clausole-view { display: flex; flex-direction: column; gap: 10px; }
.tpl-view-p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.tpl-view-p b { color: var(--brand-600); margin-right: 4px; }

/* ---------------- template attestazioni (HTML + legenda dei tag) ---------------- */
#tapOverlay .modal { max-width: 900px; }
.tap-contenuto {
  width: 100%; min-height: 320px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.5;
}
.tap-tag {
  display: inline-block; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; background: #f1f2f4; color: var(--text);
  padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px;
  margin: 0 4px 4px 0; white-space: nowrap;
}
.tap-tag:hover { border-color: var(--brand-600); color: var(--brand-600); }
.tap-tag-preview {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; background: #fff3f4; color: var(--brand-600);
  border: 1px dashed var(--brand-600); border-radius: 5px; padding: 0 4px;
}
.tap-anteprima { margin: 0 auto; }

.field.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
}
.field.check input { min-width: 0; }
.field.check span { font-size: 13px; color: var(--text); font-weight: 550; }

/* separatore di sezione nei form (es. blocco notifiche del profilo) */
.form-sep {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.form-sep span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brand-600); white-space: nowrap;
}
.form-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------------- MODULO A SEZIONI (Scheda Richiesta + Caratteristiche) ---------------- */

.modal-wide { max-width: 1200px; }

.modal-body .form-section {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 10px;
}
.modal-body .form-section[hidden] { display: none; }
.form-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brand-600);
  padding-bottom: 6px; border-bottom: 2px solid var(--border);
}
.form-section-head svg { width: 15px; height: 15px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
/* sezioni con numero di colonne personalizzato (es. elenchi di flag) */
.form-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* nelle griglie di soli flag il campo non ha un'etichetta sopra da allineare:
   eliminiamo lo spazio vuoto sopra ogni voce */
.modal-wide .form-grid.grid-3 .field.check,
.modal-wide .form-grid.grid-4 .field.check { padding-top: 0; }

/* campi che alimentano il "cartello vetrina": evidenziati nella scheda immobile
   (outline e sfondo non spostano i campi, così le colonne restano allineate) */
.field-cartello {
  background: var(--amber-bg);
  border-radius: var(--radius-sm);
  outline: 2px solid var(--amber);
}
.field-cartello > label::after {
  content: 'CARTELLO VETRINA';
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  color: #7a4a00;
  background: #f4d486;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

/* gruppo di checkbox a scelta multipla */
.field.checks { grid-column: 1 / -1; }
.checks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafafa;
}
.chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); }
.chk input { min-width: 0; }
.checks-actions { display: flex; gap: 8px; margin-top: 4px; }
.checks-actions[hidden] { display: none; }

/* intervallo "Da - A" */
.field.range .range-row { display: flex; gap: 6px; }
.field.range .range-row input { flex: 1; min-width: 0; }
.field.range .range-row .data-wrap { flex: 1; min-width: 0; }

/* campo data: la casella di testo mostra sempre gg/mm/aaaa; accanto c'è il
   pulsantino che apre il calendario del browser (input nativo nascosto) */
.data-wrap { position: relative; display: flex; align-items: center; gap: 6px; }
.data-wrap .data-it { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.data-wrap .data-picker {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}
.data-wrap .data-cal { flex: 0 0 auto; }

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid.grid-3, .form-grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.notif-canali { display: block; color: var(--text); font-weight: 550; }

/* matrice eventi × mezzi di invio (Impostazioni → Notifiche) */
.notif-matrix {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
}
.notif-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 84px 84px 110px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.notif-row:first-child { border-top: 0; }
.notif-row.notif-head {
  background: #f2f4f7;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  color: var(--brand-700);
}
.notif-evento { color: var(--text); font-weight: 550; }
.notif-col { text-align: center; }
.notif-cell { display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
.notif-cell input { min-width: 0; cursor: pointer; }
.notif-ora {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  font-size: 13px;
}

@media (max-width: 520px) {
  .notif-row { grid-template-columns: minmax(0, 1fr) 48px 48px 48px 90px; padding: 8px; gap: 6px; }
}

/* nome del canale accanto alla casella e etichetta dell'orario: servono solo
   quando la tabella diventa una scheda per evento (smartphone) */
.notif-cell-lbl { display: none; }
.notif-ora-box { display: flex; align-items: center; }
.notif-ora-lbl { display: none; }

/* Impostazioni agenzia: essendo un modulo lunghissimo, la pagina è divisa in
   schede (Agenzia · Sito pubblico · Comunicazioni) e se ne vede una per volta.
   Il menu delle schede resta agganciato sotto la barra in alto. */
.imp-menu { position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 15; }
.imp-tabs { display: flex; gap: 6px; padding: 8px; }
.imp-tab {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--border); background: #f6f8fa; color: var(--text-soft);
  font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 10px 14px; border-radius: 9px; cursor: pointer;
}
.imp-tab:hover { color: var(--text); }
.imp-tab.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.imp-gruppo[hidden] { display: none; }

@media (max-width: 700px) {
  /* notifiche: una scheda per evento, con le voci leggibili per esteso */
  .notif-matrix { display: flex; flex-direction: column; gap: 10px; border: 0; background: none; overflow: visible; }
  .notif-head { display: none; }
  .notif-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: #fff;
  }
  .notif-row:first-child { border-top: 1px solid var(--border); }
  .notif-evento { grid-column: 1 / -1; font-size: 13.5px; font-weight: 700; }
  .notif-cell { justify-content: flex-start; gap: 7px; }
  .notif-cell-lbl { display: inline; font-size: 12.5px; color: var(--text-soft); }
  .notif-cell input { width: 18px; height: 18px; }
  .notif-ora-box { grid-column: 1 / -1; gap: 8px; }
  .notif-ora-lbl { display: inline; font-size: 12.5px; color: var(--text-soft); }

  /* schede: nomi su due righe piuttosto che tagliati */
  .imp-tab { font-size: 12px; padding: 9px 6px; line-height: 1.25; }
}

/* Impostazioni agenda: una riga per tipo di appuntamento, con il pallino del
   colore scelto e la tendina per cambiarlo */
.colori-tipo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.colori-tipo:first-child { border-top: 0; }
.colori-tipo-nome { flex: 1 1 auto; min-width: 0; }
.colori-tipo select { flex: 0 0 160px; }
.colori-tipo .agent-dot { margin-right: 0; }

/* anteprima della foto caricata nel form immobile */
.foto-preview {
  display: block;
  margin-top: 6px;
  max-width: 240px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
}

/* caricamento del documento d'identità con estrazione automatica dei dati */
.doc-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.doc-upload-row input[type="file"] { flex: 1; min-width: 0; }
.doc-upload-row input[type="text"] { flex: 1; min-width: 0; }
.doc-upload-row .btn { flex: none; white-space: nowrap; }
/* pulsante "Estrai dati auto" mentre è attivo (tentativi ogni 10 secondi) */
[data-estrai-visura-auto].active { background: #c0392b; border-color: #c0392b; color: #fff; }
[data-estrai-msg] { min-height: 1em; }
/* esito dei controlli (IBAN, codice fiscale, partita IVA): verde se valido, rosso se non valido */
[data-check-code-msg] { min-height: 1em; }
[data-check-code-msg].ok { color: #1a7f37; }
[data-check-code-msg].err { color: #c0392b; }

/* elenco degli allegati da digitalizzare (foto, video, PDF): per ogni file il
   nome, il peso e la tendina con il tipo di documento da riconoscere */
.allegati-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.allegato-row {
  display: grid;
  grid-template-columns: 1fr auto minmax(150px, 200px) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-soft, #fafafa);
}
.allegato-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allegato-peso { color: var(--muted, #888); font-size: 12px; white-space: nowrap; }
.allegato-row select { min-width: 0; }
.allegato-rimuovi { color: var(--red); width: 30px; height: 30px; }
@media (max-width: 720px) {
  .allegato-row { grid-template-columns: 1fr 1fr; }
  .allegato-nome { grid-column: 1 / -1; }
}

/* elenco dei proprietari nella scheda immobile: righe aggiungibili/rimovibili */
.prop-rows { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.prop-row { display: grid; grid-template-columns: 1.2fr 1.2fr 1.4fr 1fr 1.4fr auto auto; gap: 8px; align-items: center; }
.prop-row input { min-width: 0; }
.prop-row .prop-create { flex: none; padding: 6px 10px; white-space: nowrap; }
.prop-row .prop-del { flex: none; padding: 6px 10px; }
@media (max-width: 720px) {
  .prop-row { grid-template-columns: 1fr 1fr; }
  .prop-row .prop-del { grid-column: 2; justify-self: end; }
}

/* camere e posti letto nella sezione "Locazione" della scheda immobile */
.camere-field .camere-rows { display: flex; flex-direction: column; gap: 12px; margin: 6px 0; }
.camera-row { border: 1px solid var(--border, #e2e2e2); border-radius: 8px; padding: 10px; }
.camera-title { font-weight: 600; font-size: 13px; color: var(--brand-600, #aa0014); margin-bottom: 8px; }
.camera-head { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 8px; align-items: center; }
.camera-head input, .camera-head select { min-width: 0; }
.camera-head .camera-del { flex: none; padding: 6px 10px; }
.camera-descrizione { display: block; width: 100%; margin-top: 8px; }
.posti-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.posto-row { display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr; gap: 8px; align-items: center; }
.posto-row input { min-width: 0; }
.posto-row .posto-label { font-size: 12px; color: var(--muted, #666); white-space: nowrap; }
@media (max-width: 720px) {
  .camera-head { grid-template-columns: 1fr 1fr; }
  .camera-head .camera-del { grid-column: 2; justify-self: end; }
  .posto-row { grid-template-columns: 1fr 1fr; }
  .posto-row .posto-label { grid-column: 1 / -1; }
}

/* galleria modificabile nel form immobile: trascina per riordinare le foto */
.gallery-edit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.gallery-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gallery-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.gallery-thumb:active { cursor: grabbing; }
/* durante il riordino: cursore coerente su tutta la galleria e foto trascinata evidenziata */
.gallery-edit.gallery-dragging .gallery-thumb { cursor: grabbing; }
.gallery-item.dragging { opacity: .4; }
.gallery-item.dragging .gallery-thumb { box-shadow: 0 0 0 2px var(--brand-500); }
/* area della galleria evidenziata mentre si trascinano foto dal Finder */
.field.gallery-drop {
  border-radius: 10px;
  background: rgba(200, 25, 45, .05);
  box-shadow: inset 0 0 0 2px var(--brand-500);
}
.field.gallery-drop .gallery-empty { color: var(--brand-500); font-weight: 600; }
/* foto trascinate o scelte ma non ancora caricate sul server */
.gallery-item.pending .gallery-thumb { border-style: dashed; }
.gallery-item.pending .gallery-thumb img { opacity: .82; }
.gallery-pending {
  position: absolute; left: 6px; top: 6px;
  z-index: 2;
  padding: 2px 7px; border-radius: 999px;
  background: var(--brand-500); color: #fff;
  font-size: 10.5px; font-weight: 650;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-caption {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.gallery-caption:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(200, 25, 45, .12);
}
.gallery-badge {
  position: absolute; left: 6px; bottom: 6px;
  z-index: 2;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 11px; font-weight: 650;
}
.gallery-del {
  position: absolute; top: 5px; right: 5px;
  z-index: 2;
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff; cursor: pointer;
}
.gallery-del svg { width: 13px; height: 13px; }
.gallery-del:hover { background: var(--red); }
.gallery-empty { margin-top: 6px; font-size: 12.5px; color: var(--text-mute); }
.gallery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.gallery-actions .btn { font-size: 12.5px; padding: 6px 10px; }

/* podcast e video nel form immobile: riproduttore dell'anteprima + rimozione */
.media-current {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}
.media-current[hidden] { display: none; }
.media-preview {
  display: block;
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f5f5f5;
}
audio.media-preview { height: 40px; min-height: 40px; background: #fff; }
.media-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.media-dl, .media-del {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  padding: 5px 10px;
}
.media-dl svg, .media-del svg { width: 13px; height: 13px; }
.media-del:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* documentazione presente in agenzia: casella "presente" + allegato del file */
.docfile { display: flex; flex-direction: column; gap: 6px; }
.docfile-chk { font-weight: 550; }
.docfile-box { display: flex; flex-direction: column; gap: 6px; }
.docfile-box[hidden] { display: none; }
.docfile-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.docfile-nome {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docfile-nome svg { width: 15px; height: 15px; flex: none; vertical-align: -3px; margin-right: 3px; }
.docfile .doc-upload-row input[type="file"] { font-size: 12px; }

/* ---------------- QUOTA PLANIMETRIA CATASTALE ---------------- */
.quota-tag {
  flex: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-700); background: var(--accent-100);
  border: 1px solid var(--logo-green-border); border-radius: 999px;
  padding: 2px 9px;
}
.quota-riepilogo { width: 100%; font-size: 12px; color: var(--text-soft); }
.quota-scheda-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-600); font-weight: 650; text-decoration: none;
}
.quota-scheda-link:hover { text-decoration: underline; }
.quota-scheda-link svg { width: 15px; height: 15px; }

/* editor di quotatura: si apre sopra il form immobile (z 4000) e sotto la
   lightbox (z 6000) */
.quota-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 26, 32, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  z-index: 5000;
}
.quota-editor {
  width: 100%; max-width: 1100px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 48px); overflow: hidden;
}
.quota-editor-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.quota-editor-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.quota-editor-head strong svg { width: 18px; height: 18px; }
.quota-editor-hint { flex: 1; font-size: 12px; color: var(--text-mute); }
.quota-editor-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.quota-editor-pages {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
}
.quota-page {
  font-size: 12px; font-weight: 650; padding: 5px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-soft); cursor: pointer;
}
.quota-page:hover { border-color: var(--accent-500); color: var(--text); }
.quota-page.on { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.quota-editor-stage {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 16px; background: #eceff1;
}
.quota-editor-stage canvas {
  display: block; max-width: 100%; height: auto;
  background: #fff; box-shadow: var(--shadow);
  touch-action: none; cursor: crosshair;
}
.quota-editor-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.quota-editor-msg { font-size: 12.5px; color: var(--red); }
.quota-editor-msg:empty { display: none; }
.quota-editor-spacer { flex: 1; }

/* campo "Superficie" nell'intestazione: base per ricavare la scala quando
   il disegno non ha la barra di riferimento */
.quota-editor-sup {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650; color: var(--text-mute);
}
.quota-editor-sup input {
  width: 66px; padding: 3px 6px; font-size: 11.5px; text-align: right;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
}
.quota-editor-sup input:focus {
  outline: none; border-color: var(--logo-green-border);
}

/* badge della scala impostata nell'intestazione dell'editor */
.quota-editor-scala {
  flex: none; font-size: 11px; font-weight: 650;
  color: var(--text-mute); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px;
}
.quota-editor-scala.on {
  color: var(--accent-700); background: var(--accent-100);
  border-color: var(--logo-green-border);
}

/* dialogo della scala: chiede il riferimento quando non ci sono quote */
.quota-dialog-wrap {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(20, 26, 32, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.quota-dialog {
  width: 100%; max-width: 420px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.quota-dialog strong { font-size: 15px; }
.quota-dialog-testo { font-size: 12.5px; color: var(--text-soft); margin: 0; }
.quota-scelta {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
}
.quota-scelta input { margin-top: 2px; }
.quota-scelta span { display: flex; flex-direction: column; gap: 2px; }
.quota-scelta small { color: var(--text-mute); }
.quota-dialog-errore { font-size: 12px; color: var(--red); }
.quota-dialog-errore:empty { display: none; }
.quota-dialog-azioni { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

@media (max-width: 700px) {
  .quota-overlay { padding: 0; }
  .quota-editor { max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .quota-editor-hint { display: none; }
}

/* elenco dei video dell'annuncio nel form immobile */
.video-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.video-list-empty { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; }
.video-list-empty[hidden] { display: none; }
.gen-video-badge {
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: var(--blue, #2f7de1);
  border-radius: 999px;
  padding: 3px 9px;
}
/* opzioni di generazione video (formato e dimensioni) */
.gen-video-opts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.gen-opt { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-mute); font-weight: 600; }
.gen-opt select, .gen-opt input { min-width: 130px; }
.gen-opt input[type="number"] { width: 130px; }

textarea {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-width: 120px;
}
textarea:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(170,0,20,.14); }

@media (max-width: 640px) {
  .modal-body { grid-template-columns: 1fr; }
}

/* ---------------- TOAST ---------------- */

#toast {
  position: fixed; left: 50%; bottom: 22px;
  transform: translate(-50%, 12px);
  background: var(--ink-800); color: #fff;
  font-size: 12.5px; padding: 10px 16px;
  border-radius: 9px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- VALUTATORE (requot.com in iframe) ---------------- */

.valutatore-frame {
  display: block;
  width: 100%;
  height: 1200px;
  border: 0;
  border-radius: 10px;
  background: #fff;
}

.valutatore-credit {
  margin-top: 8px;
  text-align: right;
  font-size: 11px;
  color: var(--text-mute);
}
.valutatore-credit a { color: var(--brand-600); text-decoration: none; }
.valutatore-credit a:hover { text-decoration: underline; }

/* ---------------- PAGINA PUBBLICA (veste grafica vogliocasa.eu) ---------------- */

.vc-public {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #e8e8e8;
  /* misure della home pubblica, condivise da fascia rossa e card:
     --vc-hero-h = altezza della foto grande in vetrina
     --vc-main-gap = spazio fra la fascia rossa e la foto (padding del main +
     bordo e padding della card)
     --vc-overlap = quanta foto entra nel bordo inferiore della fascia rossa */
  --vc-hero-h: 430px;
  --vc-main-gap: 45px;
  --vc-overlap: 24px;
}

/* barra in alto con il menu del sito (rosso scuro del brand) */
.vc-topbar { background: #7f0a04; border-bottom: 1px solid #5e0703; }
.vc-menu {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 2px;
}
.vc-menu-item {
  padding: 11px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cfcfcf;
}
.vc-menu-item:hover { color: #fff; }
.vc-menu-item.active { color: var(--logo-green); }
.vc-menu-sep { color: rgba(255, 255, 255, .35); font-size: 11px; }

/* fascia rossa con il logo */
.vc-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: linear-gradient(180deg, #bd0903, var(--logo-red));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
/* in home la fascia rossa è più alta e prosegue dietro la foto grande fino a
   metà della sua altezza (la foto resta in primo piano). Il logo resta
   in alto: la card con la foto comincia sotto il logo. */
.vc-header-alta {
  align-items: flex-start;
  /* 140px = logo (30px di padding + 100px) + 10px di respiro sopra la card */
  min-height: calc(var(--vc-overlap) + var(--vc-main-gap) + 140px);
  padding: 30px 16px 0;
  box-shadow: none;
}
.vc-header-alta .vc-header-right { top: 80px; }
.vc-header-alta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* la fascia scende fino al 50% dell'altezza della foto in vetrina */
  height: calc(0.5 * var(--vc-hero-h) - var(--vc-overlap));
  background: var(--logo-red);
}
.vc-header-inner { display: flex; align-items: center; gap: 16px; }
/* pagine interne (tranne la home): la fascia rossa con il logo prosegue DIETRO
   il banner di testata — la prima immagine della card — fino a metà della sua
   altezza, come nella home con la foto in vetrina. L'altezza della parte che
   scende è calcolata in JS e scritta in --vc-banner-half. */
/* stessa altezza/struttura dell'header della home: il logo resta in alto e la
   card con il banner comincia sotto il logo (non lo copre). */
.vc-public.vc-banner-testata .vc-header:not(.vc-header-alta) {
  align-items: flex-start;
  min-height: calc(var(--vc-overlap) + var(--vc-main-gap) + 140px);
  padding: 30px 16px 0;
  box-shadow: none;
}
.vc-public.vc-banner-testata .vc-header-right { top: 80px; }
/* stesso abbassamento del logo della home, per posizione identica */
.vc-public.vc-banner-testata .vc-logo img { transform: translateY(10%); }
.vc-public.vc-banner-testata .vc-header:not(.vc-header-alta)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--vc-banner-half, 0px);
  background: var(--logo-red);
}
/* la card risale dentro la fascia rossa, così il banner di testata entra di
   --vc-overlap nel bordo inferiore della fascia (come la foto della home). */
.vc-public.vc-banner-testata > .vc-main:not(.vc-main-home) {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * (var(--vc-overlap) + var(--vc-main-gap)));
}
.vc-logo img { display: block; height: 72px; width: auto; }
/* in home il logo è abbassato del 10% della sua altezza */
.vc-header-alta .vc-logo img { transform: translateY(10%); }
.vc-lang {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #f0dde1;
}
.vc-lang svg { display: block; border: 1px solid rgba(255, 255, 255, .35); }

/* corpo: card bianca su fondo grigio */
.vc-main {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  /* nessun padding in basso: il footer rosso si appoggia alla card */
  padding: 22px 16px 0;
}
/* home: la card risale sotto la fascia rossa (che prosegue dietro la foto),
   così la foto grande in vetrina resta in primo piano */
.vc-main-home {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * (var(--vc-overlap) + var(--vc-main-gap)));
}
.vc-card {
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  padding: 22px 24px 26px;
}
/* banner promozionale in home (Impostazioni > Banner campagna) */
.vc-campagna {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-bottom: 18px;
  background: var(--logo-green-soft);
  border: 1px solid var(--logo-green);
  border-radius: 12px;
  overflow: hidden;
  animation: vcCampagnaBlink 1.2s ease-in-out infinite;
  container-type: inline-size;
}
@keyframes vcCampagnaBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-campagna { animation: none; }
}
/* l'immagine occupa metà del banner */
.vc-campagna-media {
  flex: 0 0 50%;
  width: 50%;
  object-fit: cover;
  display: block;
}
.vc-campagna-body {
  flex: 1;
  min-width: 0;
  margin: 14px;
  padding: 16px 44px 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* cornice del testo come nelle pagine web */
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.vc-campagna-titolo {
  margin: 0 0 6px;
  font-size: 24px;
  font-size: clamp(20px, 4.2cqi, 34px);
  font-weight: 700;
  color: var(--logo-green-dark);
}
.vc-campagna-testo {
  margin: 0;
  font-size: 15px;
  font-size: clamp(14px, 1.9cqi, 19px);
  line-height: 1.5;
  color: #333;
  text-align: justify;
  hyphens: auto;
}
.vc-campagna-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #555;
  background: rgba(255, 255, 255, .85);
  border: 1px solid #d2d2d2;
  border-radius: 50%;
  cursor: pointer;
}
.vc-campagna-close:hover { color: #fff; background: var(--logo-green); border-color: var(--logo-green); }
@media (max-width: 640px) {
  .vc-campagna { flex-direction: column; }
  .vc-campagna-media { flex: 0 0 auto; width: 100%; height: 180px; }
}
.vc-card-head { text-align: center; margin-bottom: 16px; }
.vc-card-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2b2b2b;
}
.vc-card-head p { margin: 6px 0 0; font-size: 14px; color: #6a6a6a; }
/* variante con titolo allineato a sinistra (pagina "Chi siamo") */
.vc-card-head.vc-head-left { text-align: left; }

/* pagine interne del sito pubblico (contatti, servizi, chi siamo, privacy) */
.vc-page-body { font-size: 14px; line-height: 1.7; color: #3a3a3a; }
.vc-page-body p { margin: 0 0 14px; }
.vc-page-body a { color: var(--logo-green-dark); }
.vc-page-body a:hover { text-decoration: underline; }
.vc-list { margin: 0 0 16px; padding-left: 20px; }
.vc-list li { margin-bottom: 6px; }

/* pagina "Chi siamo" del sito pubblico: foto dell'agenzia con alone sfocato.
   Dietro la foto nitida resta la stessa immagine, ingrandita e sfocata: crea
   un alone morbido colorato che la fa risaltare sul bianco della pagina. */
.vc-chi-foto-wrap { position: relative; margin: 18px 0 20px; }
.vc-chi-foto-alone {
  position: absolute;
  inset: -16px;
  border-radius: 26px;
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.25);
  opacity: .55;
}
.vc-chi-foto {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e3e6e9;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(20, 30, 40, .06);
}

/* footer rosso con social e selettore valuta */
.vc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  /* stessa larghezza della card centrale (main 1000px - 16px per lato) e
     attaccato al suo bordo inferiore */
  width: calc(100% - 32px);
  max-width: 968px;
  margin: 0 auto;
  /* barra alta (~150px), contenuto centrato */
  min-height: 150px;
  padding: 12px 22px;
  background: linear-gradient(180deg, #bd0903, var(--logo-red));
}
.vc-social { display: flex; align-items: center; gap: 8px; }
.vc-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  color: #fff;
  background: rgba(0, 0, 0, .18);
}
.vc-social a:hover { background: rgba(0, 0, 0, .34); }

/* link all'informativa privacy nel footer */
.vc-footer-links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.vc-footer-links a { color: #fff; text-decoration: underline; }
.vc-footer-links a:hover { opacity: .85; }

/* icone dei social attivi sotto il banner della pagina Contatti */
.vc-social-contatti {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 0 18px;
}
.vc-social-contatti a { width: 34px; height: 34px; border-radius: 6px; background: var(--logo-red); }
.vc-social-contatti a:hover { background: #9f0703; }

/* barra crediti */
.vc-credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 16px;
  font-size: 12px;
  color: #555;
}
.vc-credit a { color: var(--logo-green-dark); }
.vc-credit a:hover { text-decoration: underline; }

/* ---- sezione podcast globale (in fondo a tutte le pagine del sito) ---- */
.vc-podcast {
  width: calc(100% - 32px);
  max-width: 968px;
  margin: 40px auto 0;
  padding: 28px 22px 34px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.vc-podcast-head { text-align: center; margin-bottom: 22px; }
.vc-podcast-kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--logo-green-dark);
  background: var(--logo-green-soft);
  border: 1px solid var(--logo-green-border);
  border-radius: 999px;
}
.vc-podcast-head h2 { margin: 0; font-size: 26px; color: #1b1b1b; }
.vc-podcast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.vc-pod-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vc-pod-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .1); }
/* il podcast in riproduzione mostra un alone verde intorno alla card */
.vc-pod-card.playing {
  border-color: var(--logo-green-bright);
  animation: vc-green-pulse 2.6s ease-in-out infinite alternate;
}
.vc-pod-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--logo-green-soft), var(--logo-green-tint));
}
.vc-pod-cover img { width: 100%; height: 100%; object-fit: cover; }
.vc-pod-cover-ph { color: var(--logo-green); }
.vc-pod-cover-ph svg { width: 56px; height: 56px; }
/* il corpo cresce per riempire la card: il lettore audio, spinto in basso da
   margin-top:auto, resta allineato tra le card a prescindere dalle righe del
   titolo o dalla presenza della descrizione */
.vc-pod-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; padding: 14px 15px 16px; }
.vc-pod-body h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 1.3; color: #1b1b1b; }
.vc-pod-body p { margin: 0; font-size: 13px; line-height: 1.45; color: #666; }
/* descrizione chiusa di default: il "+" accanto al titolo la apre all'occorrenza */
.vc-pod-desc { display: none; }
.vc-pod-card.desc-open .vc-pod-desc { display: block; }
.vc-pod-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--logo-green);
  background: transparent;
  border: 1px solid var(--logo-green-bright);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.vc-pod-toggle:hover { background: var(--logo-green); color: #fff; }
.vc-pod-audio { width: 100%; height: 38px; margin-top: auto; }
.vc-pod-missing { font-size: 12.5px; color: #999; }

/* con un solo podcast la card occupa tutta la larghezza e si dispone in orizzontale */
.vc-podcast-grid-single { grid-template-columns: minmax(0, 1fr); }
.vc-podcast-grid-single .vc-pod-card { flex-direction: row; }
.vc-podcast-grid-single .vc-pod-cover {
  flex: 0 0 240px;
  width: 240px;
  aspect-ratio: 1 / 1;
}
.vc-podcast-grid-single .vc-pod-body {
  flex: 1 1 auto;
  justify-content: center;
  padding: 20px 24px;
}
.vc-podcast-grid-single .vc-pod-body h3 { font-size: 20px; }
.vc-podcast-grid-single .vc-pod-body p { font-size: 14px; }

@media (max-width: 640px) {
  .vc-podcast-grid-single .vc-pod-card { flex-direction: column; }
  .vc-podcast-grid-single .vc-pod-cover { flex: 0 0 auto; width: 100%; }
  .vc-podcast-grid-single .vc-pod-body { padding: 14px 15px 16px; }
}

/* ---- pagina pubblica dedicata ai podcast ---- */
.vc-pod-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 22px;
  border-radius: 10px;
}
/* ---- pagina pubblica "Nuove costruzioni" ---- */
.vc-nuove-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 22px;
}
/* ---- pagina pubblica "Aste" ---- */
.vc-aste-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 22px;
}
/* ---- blocco editoriale di testo delle pagine pubbliche ---- */
.vc-articolo {
  margin: 0 0 26px;
  padding: 22px 26px;
  border: 1px solid #e3e6e9;
  border-left: 4px solid var(--logo-green, #0acc22);
  border-radius: 12px;
  background: #fbfcfd;
  box-shadow: 0 6px 20px rgba(20, 30, 40, .06);
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  text-align: justify;
}
.vc-articolo-title {
  margin: 0 0 16px;
  font-size: 23px;
  line-height: 1.3;
  color: #1b1b1b;
}
.vc-articolo-sub {
  margin: 22px 0 12px;
  font-size: 18px;
  color: var(--logo-green-dark);
}
.vc-articolo p { margin: 0 0 12px; }
.vc-articolo p:last-child { margin-bottom: 0; }
.vc-articolo .vc-list { margin: 0 0 12px; }
.vc-articolo-cta { font-weight: 600; color: #1b1b1b; }
.vc-pod-section + .vc-pod-section { margin-top: 34px; }
.vc-pod-section-title {
  margin: 0 0 16px;
  padding-bottom: 8px;
  font-size: 20px;
  color: #1b1b1b;
  border-bottom: 2px solid var(--logo-green-soft);
}
.vc-pod-link {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--logo-green-dark);
}
.vc-pod-link:hover { text-decoration: underline; }
.vc-pod-vuoto { margin: 0; font-size: 14px; color: #777; }

/* ---- pagina "sito in manutenzione" ---- */
.vc-maint {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 30px 18px;
  box-sizing: border-box;
  background: linear-gradient(160deg, var(--logo-green-tint), var(--logo-green-soft));
}
.vc-maint-box {
  width: 100%;
  max-width: 560px;
  padding: 40px 30px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--logo-green-border);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .1);
}
.vc-maint-logo img { max-width: 160px; height: auto; }
.vc-maint-badge {
  display: inline-block;
  margin: 18px 0 14px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--logo-green);
  border-radius: 999px;
}
.vc-maint-box h1 { margin: 0 0 12px; font-size: 26px; color: #1b1b1b; }
.vc-maint-box p { margin: 0; font-size: 15px; line-height: 1.6; color: #555; white-space: pre-line; }
.vc-maint-contatti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.vc-maint-contatti a { font-size: 14px; font-weight: 600; color: var(--logo-green-dark); }

/* ---- pagina "sito oscurato" ---- */
.vc-oscurato {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 30px 18px;
  box-sizing: border-box;
  background: #14171a;
}
.vc-oscurato-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: #d7dbdf;
}
.vc-oscurato-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  color: #8b949e;
  border: 1px solid #2b3137;
  border-radius: 50%;
}
.vc-oscurato-ico svg { width: 34px; height: 34px; }
.vc-oscurato-box p { margin: 0; font-size: 15px; }

/* ---- elenco podcast nella pagina Impostazioni ---- */
.podcast-admin { display: flex; flex-direction: column; gap: 10px; }
.podcast-admin-empty {
  padding: 18px;
  font-size: 13.5px;
  color: #666;
  text-align: center;
  background: var(--logo-green-tint);
  border: 1px dashed var(--logo-green-border);
  border-radius: 10px;
}
.podcast-admin-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.podcast-admin-cover {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  background: var(--logo-green-soft);
  border-radius: 8px;
}
.podcast-admin-cover img { width: 100%; height: 100%; object-fit: cover; }
.podcast-admin-ph { color: var(--logo-green); }
.podcast-admin-ph svg { width: 26px; height: 26px; }
.podcast-admin-info { flex: 1; min-width: 0; }
.podcast-admin-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.podcast-admin-off {
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8a6d00;
  background: #fff4cc;
  border-radius: 999px;
}
.podcast-admin-desc {
  margin-top: 3px;
  overflow: hidden;
  font-size: 12.5px;
  color: #777;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podcast-admin-pages {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  overflow: hidden;
  font-size: 12px;
  color: var(--logo-green-dark);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podcast-admin-pages svg { width: 13px; height: 13px; flex: 0 0 auto; }
.podcast-admin-actions { flex: 0 0 auto; display: flex; gap: 6px; }

/* testata: link area riservata accanto alla lingua */
.vc-header-right {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
}
.vc-header-right .vc-lang { position: static; right: auto; top: auto; transform: none; }
.vc-area {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 3px;
}
.vc-area:hover { background: rgba(0, 0, 0, .25); }

/* ---------------- HOME PUBBLICA ---------------- */

/* slideshow degli annunci in vetrina */
.vc-slideshow {
  position: relative;
  margin-bottom: 22px;
  background: #111;
  overflow: hidden;
  border-radius: 12px;
}
.vc-slide { display: none; position: relative; }
.vc-slide.active { display: block; }
.vc-slide > img {
  display: block;
  width: 100%;
  height: var(--vc-hero-h, 430px);
  object-fit: cover;
}
.vc-slide-box {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  padding: 20px 22px;
  background: rgba(185, 9, 3, .74);
  border-radius: 12px;
  color: #fff;
}
.vc-slide-box h2 {
  margin: 0 0 10px;
  /* stesso corpo e stesso maiuscolo del titolo delle card annuncio
     (.vc-prop-title): gli annunci hanno così la stessa dimensione del titolo
     in home e nella pagina immobili */
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.3;
}
.vc-slide-box h2 a { color: #fff; }
.vc-slide-box h2 a:hover { text-decoration: underline; }
.vc-slide-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  margin-bottom: 10px;
  border-top: 1px dotted rgba(255, 255, 255, .35);
  border-bottom: 1px dotted rgba(255, 255, 255, .35);
}
.vc-slide-box p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #dedede;
}
.vc-slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 46px;
  border: 0;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.vc-slide-nav:hover { background: rgba(0, 0, 0, .6); }
.vc-slide-nav.prev { left: 0; }
.vc-slide-nav.next { right: 0; }
.vc-slide-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.vc-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.vc-dot.active { background: var(--logo-green); border-color: var(--logo-green); }

/* etichette automatiche sulle foto */
.vc-label {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #fff;
  background: #4a4a4a;
  border-radius: 6px;
}
.vc-label.esclusiva { background: var(--logo-green-bright); }
.vc-label.novita { background: #e0211d; }
.vc-label.venduto { background: #3d3d3d; }

/* etichette "NOVITÀ" ed "ESCLUSIVA" sulle card: altezza ridotta */
.vc-label.esclusiva,
.vc-label.novita {
  padding: 4px 12px;
}

/* tipo di contratto (vendita / affitto / affitto stanze) in alto a sinistra
   sulla foto delle card pubbliche */
.vc-contract {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: #c8192d;
  border-radius: 12px 0 10px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.vc-contract.affitto { background: #0a8f1c; }
.vc-contract.stanze { background: #b26a00; }
.vc-contract.asta { background: #3d3d3d; }

/* etichetta "NUDA PROPRIETÀ" sul bordo inferiore della foto delle card del
   sito pubblico (home page ed elenco immobili): striscia rossa, testo bianco */
.vc-nuda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 4px 8px;
  background: #c8192d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}

/* sulle miniature della galleria i tag Esclusiva/Novità stanno sopra la metà immagine */
.vc-prop-photo .vc-label.esclusiva,
.vc-prop-photo .vc-label.novita {
  top: auto;
  bottom: 50%;
  opacity: .85;
}

/* pulsante verde del sito */
.vc-btn-green {
  display: inline-block;
  padding: 9px 16px;
  font-size: 13px;
  color: #fff;
  background: var(--logo-green);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.vc-btn-green:hover { background: var(--logo-green-dark); }

/* blocco filtri */
.vc-filters {
  margin-bottom: 26px;
  padding: 18px 20px 12px;
  background-color: #f6f6f4;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, .015) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .015) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, .015) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .015) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border: 1px solid #e2e2e0;
  border-radius: 12px;
}
.vc-filters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.vc-input {
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: #333;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
}
.vc-input:focus { outline: 0; border-color: var(--logo-green); }
.vc-keyword { flex: 1; min-width: 220px; }
.vc-search { padding: 10px 34px; }
/* righe allineate su 5 colonne (come i select sopra) per usare tutto lo spazio */
.vc-filters-grid, .vc-filters-prezzo, .vc-filters-check {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 12px;
}
.vc-filters-grid .vc-input, .vc-filters-prezzo .vc-input { width: 100%; }
.vc-ordina {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #444;
}
/* il gruppo "Ordina per" occupa due colonne per non spezzare i radio */
.vc-ordina-larga { grid-column: span 2; }
.vc-radio, .vc-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}
.vc-filters-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.vc-filters-count { font-size: 12px; color: #777; }
.vc-advanced { font-size: 12px; color: var(--logo-green-dark); cursor: pointer; }
.vc-advanced:hover { text-decoration: underline; }
/* la scritta "Ricerca avanzata" della home è un pulsante che mostra/nasconde gli altri filtri */
.vc-advanced-btn {
  background: none; border: 0; padding: 0; font: inherit;
  font-size: 12px; color: var(--logo-green-dark);
}
.vc-filters-extra[hidden] { display: none; }

/* titolo di sezione */
.vc-section-title {
  margin: 0 0 18px;
  padding-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #1b1b1b;
  border-bottom: 2px solid var(--logo-green-soft);
}
/* linea di separazione tra la galleria annunci e la sezione successiva (es. "Posizioni degli annunci") */
.vc-gallery + .vc-section-title,
#vcPager + .vc-section-title {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #e3e6e9;
}

/* impaginazione delle pagine elenco (12 annunci per pagina) */
.vc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.vc-pager-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 11px;
  font-size: 14px;
  font-weight: 600;
  color: #1b1b1b;
  background: #fff;
  border: 1px solid #dfe3e7;
  border-radius: 3px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.vc-pager-btn:hover:not(:disabled) {
  border-color: var(--logo-green);
  background: var(--logo-green-soft);
}
.vc-pager-btn.active {
  color: #fff;
  background: var(--logo-green);
  border-color: var(--logo-green);
  cursor: default;
}
.vc-pager-btn:disabled { opacity: .45; cursor: default; }

/* galleria 4 colonne */
.vc-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 22px;
}
.vc-prop { display: flex; flex-direction: column; }
.vc-prop-photo { position: relative; display: block; overflow: hidden; border-radius: 12px; }
.vc-prop-photo > img {
  display: block;
  width: 100%;
  /* stesso taglio della galleria della scheda immobile (.vc-thumb img) */
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: cover;
  transition: transform .25s ease;
}
.vc-prop-photo:hover > img { transform: scale(1.03); }
.vc-prop-title {
  margin: 12px 0 8px;
  /* corpo fisso e uguale per tutte le card, in home e nella pagina immobili,
     sempre in maiuscolo */
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: #1b1b1b;
  /* massimo due righe, con i puntini solo per i titoli eccezionalmente lunghi:
     l'altezza fissa tiene allineato il divisore sotto la scheda */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 34px;
  max-height: 34px;
  overflow: hidden;
}
.vc-prop-title a { color: #1b1b1b; }
.vc-prop-title a:hover { color: var(--logo-green-dark); }

/* ---- annunci "di prestigio": coroncina sul titolo e bagliore dorato ---- */
.vc-crown {
  width: 1em;
  height: 1em;
  margin-right: .35em;
  vertical-align: -0.12em;
  color: #d4af37;
  filter: drop-shadow(0 1px 1px rgba(160, 120, 0, .45));
}
.vc-prop.prestigio .vc-prop-photo,
.vc-detail-hero.prestigio {
  border-radius: 12px;
  animation: vc-gold-pulse 2.6s ease-in-out infinite alternate;
}
@keyframes vc-gold-pulse {
  from { box-shadow: 0 0 0 2px rgba(212, 175, 55, .5), 0 0 12px 3px rgba(212, 175, 55, .35); }
  to   { box-shadow: 0 0 0 2px rgba(212, 175, 55, .85), 0 0 26px 8px rgba(212, 175, 55, .6); }
}

/* ---- annunci all'asta: martelletto del giudice davanti al prezzo ---- */
.vc-hammer {
  width: 1em;
  height: 1em;
  margin-right: .35em;
  vertical-align: -0.12em;
  color: #c0392b;
}

/* ---- annunci "esclusiva" (immobile in vetrina): alone verde ---- */
.vc-prop.esclusiva .vc-prop-photo,
.vc-detail-hero.esclusiva {
  border-radius: 12px;
  animation: vc-green-pulse 2.6s ease-in-out infinite alternate;
}
@keyframes vc-green-pulse {
  from { box-shadow: 0 0 0 2px rgba(10, 204, 34, .5), 0 0 12px 3px rgba(10, 204, 34, .35); }
  to   { box-shadow: 0 0 0 2px rgba(10, 204, 34, .85), 0 0 26px 8px rgba(10, 204, 34, .6); }
}

/* ---- annunci "novità" (inseriti da poco): alone rosso ---- */
.vc-prop.novita .vc-prop-photo,
.vc-detail-hero.novita {
  border-radius: 12px;
  animation: vc-red-pulse 2.6s ease-in-out infinite alternate;
}
@keyframes vc-red-pulse {
  from { box-shadow: 0 0 0 2px rgba(224, 33, 29, .5), 0 0 12px 3px rgba(224, 33, 29, .35); }
  to   { box-shadow: 0 0 0 2px rgba(224, 33, 29, .85), 0 0 26px 8px rgba(224, 33, 29, .6); }
}
.vc-prop-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dotted #c9c9c9;
}
.vc-prop-feat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #555;
}
.vc-ico { width: 17px; height: 17px; }
.vc-prop-price {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.vc-prop-price.venduto { color: #d02020; font-weight: 400; }
/* prezzo ribassato: prezzo verde con freccia verde verso il basso */
.vc-prop-price.ribassato { color: var(--logo-green-dark); }
.vc-price-down { width: 1em; height: 1em; margin-left: .25em; vertical-align: -.12em; }
.vc-slide-meta .vc-prop-feat { color: #d8d8d8; }
.vc-slide-meta .vc-prop-price { color: #fff; }
.vc-slide-meta .vc-prop-price.venduto { color: #ff6b6b; }
.vc-slide-meta .vc-prop-price.ribassato { color: #4ade80; }
.vc-prop-desc {
  margin: 10px 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
}
.vc-prop .vc-btn-green { margin-top: auto; align-self: flex-start; }
.vc-empty {
  grid-column: 1 / -1;
  padding: 26px;
  font-size: 14px;
  color: #666;
  text-align: center;
}
.vc-empty a { color: var(--logo-green-dark); }

/* ---------------- SCHEDA IMMOBILE PUBBLICA ---------------- */

.vc-detail { padding: 22px 26px 26px; }

/* titolo + pulsanti Salva / View PDF */
.vc-detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dotted #c9c9c9;
}
.vc-detail-title {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  color: #1b1b1b;
}
.vc-detail-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.vc-btn-tool {
  padding: 6px 11px;
  font-family: inherit;
  font-size: 12px;
  color: #444;
  background: #fdfdfd;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  cursor: pointer;
}
.vc-btn-tool:hover { border-color: var(--logo-green); color: var(--logo-green-dark); }
.vc-btn-tool.on { color: var(--logo-green-dark); border-color: var(--logo-green); background: var(--logo-green-soft); }

/* foto grande con etichetta e logo sovrapposti */
.vc-detail-hero {
  position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 24px;
  /* riferimento di larghezza per il limite in altezza della foto (vedi sotto) */
  container-type: inline-size;
}
.vc-detail-hero img {
  display: block;
  width: 100%;
  height: auto;
  /* limite in altezza: pari a quello di una foto orizzontale 4:3 a tutta
     larghezza (75% della larghezza). Le foto verticali vengono ridotte e
     centrate senza ritagli; le orizzontali restano a piena larghezza. */
  max-height: 75cqw;
  object-fit: contain;
}
/* foto grande ridimensionata come in home page (pulsante "Ridimensiona"):
   altezza fissa e ritaglio identici alla foto in vetrina dello slideshow.
   Il selettore punta solo alla foto grande (#vcHero) per non toccare il QR
   code e gli altri elementi sovrapposti dentro .vc-detail-hero. */
.vc-detail-hero.fit-home #vcHero {
  height: var(--vc-hero-h, 430px);
  max-height: none;
  object-fit: cover;
}

/* frecce trasparenti per scorrere le foto della foto grande: compaiono al
   passaggio del mouse sui lati dell'immagine */
.vc-hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 64px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .28); color: #fff;
  border: 0; border-radius: 8px; cursor: pointer;
  font-size: 26px; line-height: 1;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.vc-hero-nav.prev { left: 14px; }
.vc-hero-nav.next { right: 14px; }
.vc-detail-hero:hover .vc-hero-nav,
.vc-hero-nav:focus-visible { opacity: 1; }
.vc-hero-nav:hover { background: rgba(0, 0, 0, .55); }
/* sui dispositivi touch non c'è hover: frecce sempre visibili in trasparenza */
@media (hover: none) {
  .vc-hero-nav { opacity: .7; }
}

/* titolo di sezione */
.vc-sec {
  margin: 26px 0 16px;
  padding-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #1b1b1b;
  border-bottom: 2px solid var(--logo-green-soft);
}
.vc-sec:first-child { margin-top: 0; }

/* anteprime della galleria */
.vc-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.vc-thumb {
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
}
.vc-thumb > img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  transition: opacity .2s ease;
}
.vc-thumb:hover > img { opacity: .85; }
.vc-thumb.active { border-color: var(--logo-green); }

/* QR code sovrapposto alle miniature del sito pubblico: anteprime della home,
   slideshow della home e miniature della scheda immobile */
.vc-mini-qr {
  position: absolute; left: 8px; top: 8px; z-index: 3;
  display: block; padding: 2px; background: #fff; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  pointer-events: none;
}
.vc-mini-qr img {
  width: 26px; height: 26px; aspect-ratio: auto; display: block;
  object-fit: contain; transform: none; transition: none;
}
.vc-mini-qr-lg { left: 16px; top: 16px; padding: 3px; border-radius: 8px; }
.vc-mini-qr-lg img { width: 38px; height: 38px; }

/* video e podcast dell'annuncio pubblico */
.vc-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.vc-media-item { display: flex; flex-direction: column; gap: 8px; }
.vc-media-head {
  font-size: 15px;
  font-weight: 700;
  color: #1b1b1b;
}
.vc-media video {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: #000;
}
.vc-media audio { display: block; width: 100%; }
/* il podcast della scheda immobile: bagliore verde intorno al lettore mentre
   è in riproduzione (le card del podcast si illuminano da sé) */
.vc-media audio.playing {
  border-radius: 8px;
  animation: vc-green-pulse 2.6s ease-in-out infinite alternate;
}

/* le foto del sito pubblico non sono trascinabili né selezionabili e non
   mostrano il menu di salvataggio: deterrente contro il download rapido */
.vc-public img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* descrizione, prezzo e località */
.vc-detail-desc {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  text-align: justify;
  white-space: pre-line;
}
.vc-detail-pricerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 12px;
  border-bottom: 1px dotted #c9c9c9;
}
.vc-detail-price { font-size: 22px; font-weight: 400; color: #2b2b2b; }
/* prezzo ribassato nella scheda pubblica: prezzo verde con freccia in discesa */
.vc-detail-price.ribassato { color: var(--logo-green-dark); }
.vc-detail-luogo { font-size: 13px; color: #666; }

/* QR code che riapre la scheda online: in alto a sinistra sulla foto grande */
.vc-detail-qr {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px; background: #fff; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.vc-detail-qr img { width: 104px; height: 104px; display: block; }
.vc-detail-qr span {
  max-width: 104px; text-align: center;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #555;
}

/* specifiche su quattro colonne */
.vc-spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 20px;
  margin-top: 14px;
}
.vc-spec-item { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; }
.vc-spec-k { font-weight: 700; color: #333; white-space: nowrap; }
.vc-spec-v { color: #555; }

/* prestazione energetica */
.vc-nrg { display: flex; flex-direction: column; gap: 6px; padding-right: 16px; }
.vc-nrg-row {
  position: relative;
  box-sizing: border-box;
  width: var(--nrg-w);
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 5px 12px 12px 5px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--nrg-fg, #26343f);
  background-color: var(--nrg-c);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, .07));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
  opacity: .55;
  filter: saturate(.85);
  transition: opacity .18s ease, filter .18s ease, box-shadow .18s ease;
}
.vc-nrg-row.active {
  opacity: 1;
  filter: none;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 3px 9px rgba(0, 0, 0, .18);
}
.vc-nrg-row.active::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 3px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid var(--nrg-c);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  filter: brightness(.92);
}
.vc-nrg-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #f0a020, #d9531e);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.vc-nrg-note.ok { background: linear-gradient(135deg, var(--logo-green), var(--logo-green-dark)); }
.vc-nrg-note-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* consumo IPE mostrato a destra nella stessa riga della classe dichiarata */
.vc-nrg-note-ipe { margin-left: auto; font-weight: 800; white-space: nowrap; }

/* calcola mutuo */
.vc-field { display: block; margin-bottom: 14px; }
.vc-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #444;
}
.vc-field .vc-input { display: block; width: 100%; box-sizing: border-box; }
/* il menu personalizzato sostituisce il select nativo: senza questa regola la
   specificità di ".vc-field .vc-input" lo renderebbe visibile e il menu
   comparirebbe due volte (select nativo + pulsante personalizzato) */
.vc-field .cselect .cselect-native { display: none; }
.vc-hint { margin: -6px 0 14px; font-size: 12px; color: #777; }
.vc-hint b { color: #c8102e; }
.vc-mutuo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.vc-btn-grey, .vc-btn-red {
  padding: 7px 15px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
}
.vc-btn-grey {
  color: #444;
  background: linear-gradient(180deg, #fdfdfd, #ececec);
  border: 1px solid #c6c6c6;
}
.vc-btn-grey:hover { background: #e4e4e4; }
.vc-btn-red {
  color: #fff;
  background: #c8102e;
  border: 1px solid #a80d26;
}
.vc-btn-red:hover { background: #b00e28; }
.vc-mutuo-esito { margin-top: 12px; font-size: 13px; color: #444; }
.vc-mutuo-esito.ok { color: var(--logo-green-dark); }
.vc-mutuo-esito.error { color: #c8102e; }

/* pagina "Calcola mutuo" del sito pubblico: banner in testa, modulo a colonne e risultato */
.vc-mutuo-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 22px;
  border-radius: 10px;
}
.vc-mutuo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
}
.vc-mutuo-grid .vc-field { margin-bottom: 16px; }
.vc-mutuo-grid .vc-field-wide { grid-column: 1 / -1; }
.vc-mutuo-form .vc-mutuo-foot { justify-content: flex-end; }
.vc-mutuo-ris {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid #ececec;
}
.vc-mutuo-ris li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f1f1;
  font-size: 14px;
}
.vc-mutuo-ris .k { color: #555; }
.vc-mutuo-ris .v { font-weight: 700; color: #222; }
.vc-mutuo-scenari {
  margin-top: 14px;
  padding: 12px 16px;
  background: #f6f6f6;
  border-left: 3px solid #c8102e;
  font-size: 13px;
  color: #444;
}
/* riquadro d'avviso "rapporto rata/reddito non congruo" (non è il banner in testa) */
.vc-mutuo-avviso {
  margin-top: 16px;
  padding: 16px 18px;
  background: #fdecec;
  border: 1px solid #f0b7b7;
  border-left: 4px solid #c8102e;
  border-radius: 4px;
  font-size: 13px;
  color: #7a1a1a;
}
.vc-mutuo-avviso strong { display: block; font-size: 14px; margin-bottom: 8px; color: #c8102e; }
.vc-mutuo-avviso p { margin: 0 0 8px; }
.vc-mutuo-avviso p:last-child { margin-bottom: 0; }
/* banner bloccante "non ci sono i presupposti" con casella "Prosegui" */
.vc-mutuo-blocco {
  margin-top: 16px;
  padding: 18px 20px;
  background: #fff5f5;
  border: 1px solid #f0b7b7;
  border-left: 4px solid #c8102e;
  border-radius: 4px;
  font-size: 13px;
  color: #5d1414;
}
.vc-mutuo-blocco > strong {
  display: block;
  font-size: 15px;
  margin-bottom: 8px;
  color: #c8102e;
}
.vc-mutuo-blocco p { margin: 0 0 8px; }
.vc-mutuo-blocco .vc-mutuo-ris { margin-top: 10px; }
.vc-mutuo-blocco .vc-mutuo-ris li { font-size: 13px; border-bottom-color: #f5dada; }
.vc-mutuo-prosegui {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0b7b7;
  font-weight: 700;
  color: #7a1a1a;
  cursor: pointer;
}
.vc-mutuo-prosegui input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: #c8102e;
  cursor: pointer;
}
/* nota sotto un campo del simulatore (es. reddito annuo diviso per 12) */
.vc-field-nota { display: block; margin-top: 4px; font-size: 11.5px; color: #777; line-height: 1.35; }
.vc-mutuo-fonte-ora { display: block; margin-top: 4px; font-size: 12px; color: #6b7178; }
/* pagina "Usufrutto e Nuda proprietà": titolo dei blocchi di risultato */
.vc-unp-titolo { margin-top: 20px; font-size: 15px; font-weight: 700; color: #222; }
.vc-unp-titolo:first-child { margin-top: 0; }

/* pagina pubblica "News": rassegna dal mondo immobiliare */
.vc-news-filtri { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.vc-news-filter {
  font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 8px 16px; border-radius: 12px;
  border: 1px solid #e3e6e9; background: #fbfcfd; color: #444;
  box-shadow: 0 2px 8px rgba(20, 30, 40, .05);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.vc-news-filter:hover {
  background: #f2f5f7;
  box-shadow: 0 4px 12px rgba(20, 30, 40, .09);
  transform: translateY(-1px);
}
.vc-news-filter.active {
  border-left: 4px solid var(--logo-green, #0acc22);
  background: #fbfcfd;
  color: #1b1b1b;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(20, 30, 40, .08);
}
.vc-news-stato { margin: 0 0 18px; font-size: 12.5px; color: #6b7178; }
.vc-news-nota { display: block; margin-top: 4px; color: #8a9096; }
.vc-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.vc-news-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: box-shadow .18s, transform .18s;
}
.vc-news-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.12); transform: translateY(-2px); }
.vc-news-thumb {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, #b90903, #7a0009);
}
.vc-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-news-thumb-ph {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 16px; text-align: center;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
/* immagine di riserva per le notizie FIAIP senza foto: il logo su fondo bianco */
.vc-news-thumb-logo-box { background: #fff; }
.vc-news-thumb-logo { object-fit: contain; padding: 18px; box-sizing: border-box; }
.vc-news-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.vc-news-fonte {
  align-self: flex-start; margin-bottom: 8px;
  padding: 2px 9px; border-radius: 3px;
  background: #f0f0f0; color: var(--brand-600, #aa0014);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.vc-news-titolo { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.vc-news-titolo a { color: #1e1e1e; text-decoration: none; }
.vc-news-titolo a:hover { color: var(--brand-600, #aa0014); text-decoration: underline; }
.vc-news-estratto { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #555; }
.vc-news-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 10px; border-top: 1px solid #f0f0f0;
}
.vc-news-data { font-size: 12px; color: #8a9096; }
.vc-news-leggi {
  font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--brand-600, #aa0014);
}
.vc-news-leggi:hover { text-decoration: underline; }
.vc-news-vuoto { grid-column: 1 / -1; padding: 24px; text-align: center; color: #777; font-size: 14px; }

/* articoli del blog curati dall'agenzia (filtro "Voglio Casa") */
.vc-news-card-blog { border-color: #bfe8c6; }
.vc-news-fonte-blog { background: #e6f7e9; color: #1c7a34; }

/* pagina di lettura di un articolo del blog */
.vc-blog-articolo { max-width: 760px; margin: 0 auto; }
.vc-articolo-titolo { margin: 10px 0; font-size: 30px; line-height: 1.25; color: #1e1e1e; }
.vc-articolo-sotto { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; color: #6b7178; font-size: 13px; }
.vc-articolo-sotto span { display: inline-flex; align-items: center; gap: 6px; }
.vc-articolo-sotto svg { width: 15px; height: 15px; }
.vc-articolo-img { width: 100%; height: auto; border-radius: 8px; margin: 0 0 22px; display: block; }
.vc-articolo-testo { font-size: 15.5px; line-height: 1.7; color: #333; }
.vc-articolo-testo p { margin: 0 0 16px; }
.vc-articolo-back { display: inline-block; margin-top: 12px; }

@media (max-width: 720px) {
  .vc-mutuo-grid { grid-template-columns: 1fr; }
}

/* box agente */
.vc-sec-agent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.vc-agent-box { display: flex; align-items: flex-start; gap: 20px; }
.vc-agent-photo {
  display: block;
  width: 230px;
  max-width: 100%;
  height: auto;
}
.vc-agent-info {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.95;
  color: #444;
}
.vc-agent-info a { color: var(--logo-green-dark); }
.vc-agent-info a:hover { text-decoration: underline; }
.vc-agent-all { margin-top: 16px; }

/* modulo contatti */
.vc-textarea {
  min-height: 150px;
  resize: vertical;
  font-family: inherit;
}
.vc-captcha { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.vc-captcha-q {
  padding: 8px 16px;
  font-family: "Courier New", monospace;
  font-size: 17px;
  letter-spacing: .12em;
  color: #333;
  background: #f2f2f0;
  border: 1px solid #dcdcda;
}
.vc-captcha .vc-input { width: 130px; }
.vc-contact-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.vc-contact-esito { margin-top: 14px; font-size: 13px; color: #666; }
.vc-contact-esito.ok { color: var(--logo-green-dark); }
.vc-contact-esito.error { color: #c8102e; }

/* nota con il link all'informativa privacy accanto ai moduli di contatto */
.vc-form-privacy {
  margin: 12px 0 0;
  font-size: 12px;
  color: #666;
}
.vc-form-privacy a { color: var(--logo-red); text-decoration: underline; }

/* invito a scrivere su Telegram nella pagina Contatti (bot come referral) */
.vc-telegram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 24px 0;
  padding: 16px 18px;
  background: #f2f7f5;
  border: 1px solid #d9e7e1;
  border-radius: 4px;
}
.vc-telegram-testo { font-size: 14px; color: #333; line-height: 1.5; max-width: 62ch; }
.vc-telegram-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
/* testo e icona bianchi e in grassetto (vince sul colore dei link di .vc-page-body) */
.vc-btn-green.vc-telegram-btn { color: #fff; font-weight: 700; }
.vc-btn-green.vc-telegram-btn:hover { color: #fff; text-decoration: none; }

/* tasto di ritorno all'elenco immobili, in cima alla scheda */
.vc-detail-back {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 11px;
  font-size: 12px;
  color: #444;
  background: #fdfdfd;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  text-decoration: none;
}
.vc-detail-back:hover { border-color: var(--logo-green); color: var(--logo-green-dark); text-decoration: none; }

/* navigazione precedente / successivo */
.vc-detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 16px;
  font-size: 13px;
  border-top: 1px dotted #c9c9c9;
}
.vc-detail-nav a { color: var(--logo-green-dark); }
.vc-detail-nav a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .vc-gallery { grid-template-columns: repeat(2, 1fr); }
  .vc-filters-grid, .vc-filters-prezzo, .vc-filters-check { grid-template-columns: repeat(2, 1fr); }
  .vc-public { --vc-hero-h: 320px; }
  .vc-slide-box { width: 250px; padding: 14px 16px; }
  .vc-spec { grid-template-columns: repeat(2, 1fr); }
  .vc-thumbs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .vc-lang { display: none; }
  .vc-logo img { height: 43px; }
  .vc-card { padding: 16px 14px 18px; }
  .vc-card-body .valutatore-frame { height: 900px; }
  .vc-gallery { grid-template-columns: 1fr; }
  .vc-filters-grid, .vc-filters-prezzo, .vc-filters-check { grid-template-columns: 1fr; }
  .vc-ordina-larga { grid-column: auto; }
  .vc-slide-box { position: static; width: auto; transform: none; }
  .vc-public { --vc-hero-h: 240px; --vc-main-gap: 39px; --vc-overlap: 16px; }
  .vc-slide-nav { display: none; }
  .vc-detail-top { flex-direction: column; }
  .vc-spec { grid-template-columns: 1fr; }
  .vc-agent-box { flex-direction: column; }
}

/* ---------------- CARTELLI VETRINA ---------------- */

.cartelli-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.cartello-tile {
  display: flex; flex-direction: column; text-align: left;
  padding: 0; background: var(--surface); color: inherit; font: inherit;
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; cursor: pointer;
}
.cartello-tile:hover { border-color: var(--brand-500); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.cartello-tile img { width: 100%; height: 120px; object-fit: cover; display: block; background: #ececec; }
.cartello-tile-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cartello-tile-info strong { font-size: 13px; line-height: 1.3; }

.cartello-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 24px; overflow: auto; background: rgba(20,22,26,.82);
}
.cartello-overlay[hidden] { display: none; }
.cartello-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cartello-filigrana {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-size: 12.5px; font-weight: 700;
}
.cartello-filigrana select {
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* pannello di gestione dei modelli di cartello (duplica / rimuovi / riattiva) */
.cartello-modelli-panel {
  width: 520px; max-width: 100%;
  background: rgba(198, 40, 40, .85); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
}
.cartello-modelli-panel[hidden] { display: none; }
.cartello-modelli-titolo {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: rgba(255,255,255,.85); margin-bottom: 9px;
}
.cartello-modelli-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cartello-modelli-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
.cartello-modelli-lista li.off .cartello-modello-nome { color: rgba(255,255,255,.7); text-decoration: line-through; }
.cartello-modello-nome { font-size: 13.5px; font-weight: 700; color: #fff; }
.cartello-modello-default { font-weight: 600; font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.8); }
.cartello-modello-azioni { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.btn-small { padding: 5px 10px; font-size: 12px; border-radius: 7px; gap: 5px; }
.btn-small svg { width: 13px; height: 13px; }

/* gruppi di pulsanti nelle celle delle tabelle (es. azioni di riga) */
.row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cartello-vuoto {
  width: 190mm; box-sizing: border-box; padding: 40mm 20mm; text-align: center;
  background: #fff; border-radius: 8px; color: var(--text-soft);
  font-size: 15px; font-weight: 600; line-height: 1.5;
}

/* ---------------- foglio visita (modulo FIAIP da stampare) ---------------- */
.foglio-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 24px; overflow: auto; background: rgba(20,22,26,.82);
}
.foglio-overlay[hidden] { display: none; }
.foglio-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* comandi di zoom dell'anteprima (contratti e altri fogli): il fattore
   è scritto da JS nella variabile --foglio-zoom e usato dal foglio */
.foglio-zoom { display: flex; gap: 6px; align-items: center; }
.foglio-zoom .btn { min-width: 38px; padding: 0 10px; font-size: 15px; line-height: 1; }
.foglio-zoom .btn svg { width: 15px; height: 15px; }
.foglio-zoom-val { min-width: 58px; font-size: 13px; font-variant-numeric: tabular-nums; color: #fff; font-weight: 700; }
#foglioSheet .foglio { zoom: var(--foglio-zoom, 1); }

/* stesso formato del cartello: 190x276mm, cioè l'area utile di un A4 con 10mm di margine.
   Scritti e cornici nel rosso dell'agenzia */
.foglio {
  position: relative; z-index: 0;
  width: 190mm; height: 276mm; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #fff; color: var(--brand-600);
  font-family: Arial, Helvetica, sans-serif; font-size: 9.5pt; line-height: 1.3;
  padding: 8mm 10mm; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* filigrana in diagonale (BOZZA / FAC-SIMILE) dietro il contenuto del foglio */
.foglio-filigrana {
  position: absolute; inset: 0; z-index: -1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none;
}
.foglio-filigrana span {
  font-size: 62pt; font-weight: 800; letter-spacing: 8px;
  color: var(--brand-600); opacity: .12; white-space: nowrap;
  transform: rotate(-30deg);
}

/* fascia superiore alta: ospita il logo dell'agenzia e il titolo del modulo */
.fv-head {
  flex: 0 0 auto; height: 24mm; background: #e2001a; color: #fff;
  border: 1.5px solid var(--brand-600); border-bottom: 3px solid var(--brand-600);
  display: flex; align-items: center; gap: 8mm; padding: 0 8mm;
}
.fv-logo { height: 14mm; display: block; }
.fv-title {
  flex: 1 1 auto; text-align: center; margin: 0; color: #fff;
  font-size: 20pt; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
/* titolo del resoconto del simulatore affitti: più piccolo ed elegante */
.fv-title-resoconto {
  font-family: Georgia, 'Times New Roman', Cambria, serif;
  font-size: 13pt; font-weight: 600; letter-spacing: 1px; text-transform: none;
}

/* dati dell'agenzia, incorniciati */
.fv-agenzia {
  flex: 0 0 auto; border: 1.5px solid var(--brand-600); margin-top: 5mm;
  padding: 3mm 4mm; display: flex; flex-direction: column; gap: 2.6mm;
}
.fv-ag-row { display: flex; align-items: baseline; gap: 5px; }
.fv-ag-row b { font-weight: 700; white-space: nowrap; }
.fv-ag-dep { margin-top: 1mm; font-size: 8.4pt; }
.fv-ag-dep > span:not(.fv-fill) { white-space: nowrap; }

/* linea da compilare: si allunga per riempire lo spazio */
.fv-fill {
  flex: 1 1 20mm; min-width: 12mm; min-height: 4.6mm;
  border-bottom: 1px solid var(--brand-600); padding: 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fv-fill.on { font-weight: 600; }

/* corpo della dichiarazione, dentro un'unica cornice */
.fv-doc {
  flex: 1 1 auto; border: 1.5px solid var(--brand-600); margin-top: 4mm;
  padding: 4mm; display: flex; flex-direction: column;
}
.fv-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2.4mm; }

/* clausole del contratto di locazione nel documento stampabile */
.contratto-clausole { display: flex; flex-direction: column; gap: 2mm; font-size: 9pt; line-height: 1.4; }
.contratto-clausole p { margin: 0; text-align: justify; }
.contratto-clausole p.clausola-art { text-align: center; font-weight: 700; }

/* contratto stampabile: testo continuo, senza fascia logo né box agenzia.
   Il foglio cresce in altezza e il contenuto va a capo su più pagine. */
.foglio.foglio-contratto { display: block; height: auto; min-height: 276mm; color: #000; }
.foglio-contratto .contratto-clausole { display: block; font-size: 9.5pt; line-height: 1.45; }
.foglio-contratto .contratto-clausole p { margin: 0 0 2.6mm; }
/* clausola vuota: esattamente una riga vuota, senza margine extra */
.foglio-contratto .contratto-clausole p.clausola-vuota { margin: 0; }

/* ---------------- attestazione di porzione di immobile ---------------- */
.foglio-attestazione .att-doc { display: block; font-size: 9.5pt; line-height: 1.4; }
.att-doc h1 { margin: 0 0 4mm; font-size: 14pt; text-align: center; text-transform: uppercase; }
.att-doc h2 { margin: 4mm 0 2mm; font-size: 11.5pt; }
.att-doc h3 { margin: 3mm 0 1.5mm; font-size: 10.5pt; }
.att-doc p { margin: 0 0 2.2mm; }
.att-doc p.att-punto { font-size: 9pt; margin: 0 0 1.4mm; }
/* testo centrato (tag att-centra) e riga vuota (tag att-vuota) */
.att-doc p.att-centra { text-align: center; }
.att-doc p.att-vuota { margin: 0 0 2.2mm; min-height: 1.4em; }
.att-doc p.att-centra.att-vuota { min-height: 1.4em; }
/* lettere distanziate nella stessa riga (tag att-spazia) */
.att-doc .att-spazia { letter-spacing: 0.12em; }
.att-tab { width: 100%; border-collapse: collapse; margin: 0 0 3mm; }
.att-tab td, .att-tab th {
  border: 1px solid #969696; padding: 1.4mm 2mm; vertical-align: top;
  font-size: 9pt; line-height: 1.35;
}
.att-tab td.att-num { text-align: right; width: 28%; font-variant-numeric: tabular-nums; }
.att-tab tr.att-tot td { font-weight: 700; background: #eee; }

.fv-tipi { display: flex; flex-direction: column; gap: 2mm; font-weight: 700; font-size: 10.5pt; }
.fv-box { font-size: 12pt; line-height: 1; }

.fv-riga { display: flex; align-items: baseline; gap: 5px; margin: 0; }
.fv-riga > span { white-space: nowrap; }
.fv-plain { margin: 0; }
.fv-choice { display: flex; align-items: baseline; gap: 6px; }
.fv-desc { display: flex; margin: 0; }
.fv-desc .fv-fill { flex: 1 1 auto; }

.fv-note {
  flex: 0 0 auto; margin-top: 4mm; font-size: 8pt; line-height: 1.35;
  display: flex; flex-direction: column; gap: 2mm;
}
.fv-note p { margin: 0; }
.fv-consenso { display: flex; align-items: baseline; gap: 6px; }

.fv-firma { flex: 0 0 auto; margin-top: 5mm; display: flex; flex-direction: column; gap: 4mm; }
.fv-firma .fv-riga { gap: 6px; }

.fv-foot {
  flex: 0 0 auto; margin-top: 3mm; font-size: 7.5pt; color: var(--brand-600);
  border-top: 1px solid var(--brand-600); padding-top: 2px;
}

/* il foglio ha le stesse misure dell'area stampabile A4 (190x276mm con
   margine 10mm): anteprima e stampa così coincidono esattamente.
   Layout a modello dell'agenzia: fascia logo, banner VENDESI, titolo,
   due colonne (foto+testo / caratteristiche), prezzo, classe energetica e contatti */
.cartello {
  --cart-green: #00bd39;
  --cart-red: #d71914;
  --cart-dark: #073f2d;
  width: 190mm; height: 276mm; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: #1c1c1c;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* il modello Classico è disegnato a filo dell'area utile della A4 (190x276mm):
   con il margine di pagina di 8mm (area utile 194x281mm) entra esattamente in
   una sola A4, quindi NON va ridotto con "zoom" — altrimenti anteprima e stampa
   risultano più piccole di una A4 con ampi margini bianchi. */
.cartello:not(.cartello-vetrina) { zoom: 1; }

/* fascia alta rossa: angolo tricolore a sinistra, logo al centro, casa a destra */
.cart-head {
  position: relative; flex: 0 0 auto; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 82% 45%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(135deg, #df2119, #b8070b);
  border-bottom: 4px solid #fff; overflow: hidden;
  box-shadow: inset 0 -7px 0 var(--cart-green);
}
.cart-stripes {
  position: absolute; left: -2px; top: 0; width: 145px; height: 100%;
  clip-path: polygon(0 0, 78% 0, 0 100%);
  background: linear-gradient(138deg,
    var(--cart-green) 0 25%, #fff 25% 38%, #cf1118 38% 51%, transparent 51%);
}
.cart-logo { width: 100mm; max-height: 59px; object-fit: contain; position: relative; }

/* banner VENDESI / AFFITTASI: rosso con doppio bordo bianco + verde */
.cart-tag {
  position: relative; z-index: 2; flex: 0 0 auto; margin: 10px 17px 0;
  background: linear-gradient(180deg, #f12c20, #cf100e);
  border: 5px solid #fff; border-radius: 6px;
  box-shadow: 0 0 0 3px var(--cart-green), 0 7px 13px rgba(126,0,0,.22);
  color: #fff; text-align: center; text-transform: uppercase;
  font-family: 'Arial Black', Arial, sans-serif; font-weight: 900;
  font-size: 71px; line-height: .98; letter-spacing: 1px;
  padding: 5px 0 9px; transform: rotate(-1deg);
  text-shadow: 0 4px 0 rgba(94,0,0,.2);
}

/* secondo banner sotto a VENDESI/AFFITTASI (modello "Affittasi stanze"):
   banda verde con la dicitura STANZE, stesso linguaggio grafico del banner
   grande ma più compatta */
.cart-tag2 {
  position: relative; z-index: 2; flex: 0 0 auto; align-self: center;
  margin: 5px 17px 0;
  background: linear-gradient(180deg, #1fae3d, #0d7a24);
  border: 4px solid #fff; border-radius: 5px;
  box-shadow: 0 0 0 3px var(--cart-green), 0 6px 11px rgba(0,80,20,.22);
  color: #fff; text-align: center; text-transform: uppercase;
  font-family: 'Arial Black', Arial, sans-serif; font-weight: 900;
  font-size: 38px; line-height: 1; letter-spacing: 6px;
  padding: 3px 24px 6px 30px;
  text-shadow: 0 3px 0 rgba(0,60,15,.22);
}

.cart-heading { flex: 0 0 auto; margin: 13px 21px 0; text-align: center; }
.cart-localita {
  display: inline-block; padding: 3px 14px; border-radius: 3px;
  background: var(--cart-red); color: #fff;
  font-size: 17px; font-weight: 900;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.cart-titolo {
  margin: 2px 0 4px;
  /* titolo in rosso con lo stesso carattere della filigrana (Baloo 2) */
  font-family: 'Baloo 2', 'Arial Rounded MT Bold', 'Trebuchet MS', 'Arial Black', Arial, sans-serif;
  color: var(--cart-red);
  font-size: 32px; font-weight: 900; line-height: 1.06; text-transform: uppercase;
}
.cart-title-rule {
  display: block; width: 43%; height: 5px; margin: 7px auto 0;
  border-radius: 999px; background: var(--cart-red);
}

/* corpo: foto a sinistra, caratteristiche in colonna a destra allineate in alto */
.cart-main {
  flex: 0 0 auto; display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) 61mm;
  gap: 15px; padding: 12px 18px 0;
}
.cart-foto {
  width: 100%; height: 75mm; object-fit: cover; display: block;
  border: 4px solid var(--cart-red); border-radius: 7px;
  box-shadow: 0 4px 12px rgba(0,0,0,.17);
}
/* descrizione a piena larghezza, come il banner in alto */
.cart-testo {
  flex: 1; min-height: 0; overflow: hidden;
  margin: 9px 18px 0; padding: 7px 10px 5px;
  background: var(--cart-red); color: #fff;
  border: 3px solid #9e0d0b; border-radius: 7px;
  font-size: 18px; font-weight: 700; line-height: 1.36; white-space: pre-line; hyphens: auto;
  text-align: justify;
}
.cart-right {
  display: flex; align-items: flex-start; min-height: 75mm;
  background: linear-gradient(180deg, #f8fbfa, #eef7f3);
  border-radius: 7px; padding: 2px 10px;
}
.cart-feats {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.cart-feat {
  display: flex; align-items: center; gap: 10px;
  min-height: 45px; padding: 5px 0; border-bottom: 1.5px solid var(--cart-red);
}
.cart-feat:last-child { border-bottom: 0; }
.cart-feat-ico {
  flex: 0 0 auto; width: 37px; height: 37px; border-radius: 50%;
  background: radial-gradient(circle at 45% 28%, #ff3a29, #c9100e 72%);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 3px 6px rgba(146,0,0,.22);
}
.cart-feat-ico svg { width: 21px; height: 21px; }
.cart-feat-txt { display: flex; flex-direction: column; line-height: 1.16; }
.cart-feat-txt strong { font-size: 16px; font-weight: 900; color: var(--cart-dark); }
.cart-feat-txt em { font-style: normal; font-size: 12px; color: #4b635b; }

/* riquadro prezzo + riferimento + classe energetica, dentro la fascia finale */
.cart-bottom {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6mm;
}
/* blocco prezzo: fondo rosso, scritta bianca, con dentro anche il riferimento */
.cart-prezzo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 3.5mm 6mm; border-radius: 12px;
  background: linear-gradient(#f12f22, #c30f0d);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(70,0,0,.3);
}
.cart-prezzo-val {
  background: none; color: #fff; padding: 0;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 34px; line-height: 1;
  box-shadow: none;
}
.cart-rif { color: #fff; font-weight: 900; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }

/* scala energetica in stile "etichetta energetica": badge verde con la casa
   e la classe dell'annuncio, accanto le frecce colorate A-G */
.cart-nrg {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 10px; padding: 7px 11px;
  box-shadow: 0 2px 7px rgba(0,0,0,.14);
}
.cart-nrg-badge {
  position: relative; flex: 0 0 auto; width: 56px; height: 56px;
  display: grid; place-items: center; border-radius: 10px;
  background: radial-gradient(circle at 32% 24%, #4ecb57, #159630 52%, #075f17);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -9px 15px rgba(0,0,0,.3),
    0 3px 6px rgba(0,0,0,.22);
}
/* colonna con il badge della classe e, sotto, il consumo IPE */
.cart-nrg-badgecol { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cart-nrg-ipe {
  font-size: 9px; font-weight: 800; line-height: 1.05; text-align: center;
  color: #075f17; white-space: nowrap;
}
.cart-nrg-ipe span { display: block; font-size: 7.5px; font-weight: 700; color: #4b5563; }
/* la casa resta solo una filigrana: la lettera della classe va letta subito */
.cart-nrg-house { position: absolute; width: 43px; height: 43px; opacity: .5; }
.cart-nrg-house path { stroke-width: 3; }
.cart-nrg-badge-letter {
  position: relative; z-index: 1; color: #fff;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 27px; line-height: 1;
  /* contorno scuro attorno alla lettera, per staccarla dalle linee bianche della casa */
  paint-order: stroke fill;
  -webkit-text-stroke: 1px #0a5c19;
  text-shadow: 0 0 4px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.65);
}
.cart-nrg-scale { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5px; }
/* contenitore di ogni riga: la riga interna ha il ritaglio a freccia (clip-path),
   quindi l'ombra/contorno va disegnato qui, altrimenti il ritaglio la taglierebbe via */
.cart-nrg-rowwrap { position: relative; display: flex; }
.cart-nrg-row {
  position: relative; display: flex; align-items: center;
  width: var(--w, 92px); height: 11px; padding-left: 6px;
  background: var(--c); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 1;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.12);
}
.cart-nrg-row.active { font-size: 11px; }
/* contorno scuro netto attorno alla freccia della classe selezionata.
   Il filtro sta sul contenitore (non ritagliato) e non sulla riga: con il
   clip-path a freccia l'ombra applicata alla riga stessa verrebbe tagliata */
.cart-nrg-rowwrap.active {
  z-index: 2;
  filter:
    drop-shadow(1.5px 0 0 #141414) drop-shadow(-1.5px 0 0 #141414)
    drop-shadow(0 1.5px 0 #141414) drop-shadow(0 -1.5px 0 #141414)
    drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

/* fascia finale: blocco prezzo+rif e scala energetica a sinistra, QR a destra */
.cart-footer {
  position: relative; flex: 0 0 auto; margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 6mm;
  min-height: 30mm; padding: 4mm 5mm;
  background: linear-gradient(180deg, #df2119, #bd080c); color: #fff;
  border-top: 6px solid var(--cart-green);
  box-shadow: inset 0 4px 0 #fff;
}
/* la scala energetica occupa la fascia insieme al blocco prezzo */
.cart-footer .cart-nrg { width: auto; }
/* QR che porta alla scheda online dell'immobile */
.cart-qr {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border-radius: 8px; padding: 6px 6px 4px;
}
.cart-qr img { width: 26mm; height: 26mm; display: block; }
.cart-qr span {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cart-red);
}

/* ---------------- cartello modello "Affitti" (verde) ----------------
   Stesso layout del Classico, ma con tutte le campiture rosse diventate
   verdi. Fa eccezione la fascia alta col logo, che resta rossa.
   Cambiando --cart-red si colorano da sole località, riga del titolo,
   bordo foto, righe delle caratteristiche e scritta del QR. */
.cartello-affitti { --cart-red: #0b8f2e; }
/* banner AFFITTASI: campitura verde al posto del rosso */
.cartello-affitti .cart-tag {
  background: linear-gradient(180deg, #1fae3d, #0d7a24);
  box-shadow: 0 0 0 3px var(--cart-green), 0 7px 13px rgba(0,80,20,.22);
  text-shadow: 0 4px 0 rgba(0,60,15,.2);
}
/* descrizione: fondo verde con bordo verde scuro */
.cartello-affitti .cart-testo {
  background: var(--cart-red);
  border-color: #0a6b23;
}
/* icone delle caratteristiche: cerchio verde */
.cartello-affitti .cart-feat-ico {
  background: radial-gradient(circle at 45% 28%, #34b856, #0b8f2e 72%);
  box-shadow: 0 3px 6px rgba(0,80,20,.22);
}
/* blocco prezzo: fondo verde */
.cartello-affitti .cart-prezzo {
  background: linear-gradient(#1fae3d, #0d7a24);
  box-shadow: 0 4px 10px rgba(0,60,15,.3);
}
/* fascia finale: fondo verde */
.cartello-affitti .cart-footer {
  background: linear-gradient(180deg, #1fae3d, #0c7222);
}
/* titolo: verde e con lo stesso carattere della filigrana (Baloo 2) */
.cartello-affitti .cart-titolo {
  font-family: 'Baloo 2', 'Arial Rounded MT Bold', 'Trebuchet MS', 'Arial Black', Arial, sans-serif;
  color: #0b8f2e;
}

/* prestazione energetica nei modelli Classico (rosso) e Affitti (verde):
   lettera piu' grande e classe attiva ben evidente anche nelle righe del grafico.
   Il modello Vetrina ha gia' le sue regole dedicate (piu' sotto). */
.cartello:not(.cartello-vetrina) .cart-nrg-badge {
  width: 76px; height: 76px; border-radius: 13px;
}
.cartello:not(.cartello-vetrina) .cart-nrg-house { width: 58px; height: 58px; }
.cartello:not(.cartello-vetrina) .cart-nrg-badge-letter { font-size: 38px; }
.cartello:not(.cartello-vetrina) .cart-nrg-row {
  height: 12px; font-size: 10.5px;
}
.cartello:not(.cartello-vetrina) .cart-nrg-row.active {
  height: 19px; font-size: 14.5px; font-weight: 900; padding-left: 8px;
}

/* ---------------- cartello modello "Vetrina" (verde) ----------------
   Secondo modello selezionabile, ispirato ai volantini dell'agenzia:
   fascia col logo e slogan, banner verde, foto grande con colonna dati,
   descrizione, riquadro "punti di forza", striscia foto e fascia contatti. */
.cartello-vetrina {
  --vc-green: #17aa2e;
  --vc-green-dark: #0f8a22;
  --vc-ink: #12303f;
  background: #fff; color: #2a2a2a;
  padding-bottom: 0;
  /* il contenuto sforava l'area utile della A4: si riduce tutto al 78% */
  zoom: .78;
}

.cartv-top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  /* un po' di aria in alto: la fascia logo non tocca il bordo del foglio */
  gap: 6mm; padding: 8mm 6mm 1mm;
}
.cartv-logo { width: 62mm; max-height: 18mm; object-fit: contain; }
.cartv-slogan {
  color: var(--vc-green); text-align: right; font-weight: 700;
  font-family: 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive;
  font-size: 15px; line-height: 1.05; transform: rotate(-4deg);
  text-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.cartv-tagline {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 3mm;
  padding: 0 6mm 2.5mm; color: #2f2f2f;
  font-size: 9.5px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase;
}
.cartv-tagline span { flex: 0 0 22mm; height: 1px; background: #333; }

.cartv-banner {
  flex: 0 0 auto; margin: 0 4mm; padding: 3.5mm 0;
  background: var(--vc-green); color: #fff; text-align: center;
  font-family: 'Arial Black', Arial, sans-serif; font-weight: 900;
  font-size: 46px; line-height: 1; letter-spacing: 3px; text-transform: uppercase;
  border-radius: 2px; transform: rotate(-1.5deg);
  box-shadow: 0 5px 12px rgba(0,0,0,.16);
}

.cartv-hero {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 4mm; padding: 3.5mm 5mm 0;
}
.cartv-left { display: flex; flex-direction: column; min-height: 0; }
.cartv-photo { position: relative; flex: 0 0 auto; }
.cartv-photo img {
  width: 100%; height: 80mm; object-fit: cover; display: block;
  border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.16);
}
.cartv-desc { flex: 1; min-height: 0; overflow: hidden; padding-top: 2.5mm; }
.cartv-desc h2 {
  margin: 0 0 1.5mm; color: var(--vc-ink);
  font-size: 21px; font-weight: 900; line-height: 1.05;
}
.cartv-desc p {
  margin: 0; color: #333; font-size: 13px; line-height: 1.36;
  white-space: pre-line; hyphens: auto; overflow: hidden;
  text-align: justify;
}

.cartv-right { display: flex; flex-direction: column; gap: 1mm; min-height: 0; }
.cartv-loc {
  display: flex; gap: 2mm; align-items: flex-start;
  padding: 2mm 2.5mm; border-radius: 3px;
  background: var(--cart-red); color: #fff;
}
.cartv-pin { flex: 0 0 auto; width: 7mm; height: 7mm; color: #fff; margin-top: .5mm; }
.cartv-pin svg { width: 100%; height: 100%; }
.cartv-loc-txt { display: flex; flex-direction: column; line-height: 1.16; }
.cartv-loc-txt strong {
  font-size: 15px; font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: .5px;
}
.cartv-loc-txt em { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.85); }

.cartv-specs { list-style: none; margin: 0; padding: 0; }
.cartv-spec { display: flex; align-items: center; gap: 2mm; padding: 1.4mm 0; }
.cartv-ico {
  flex: 0 0 auto; width: 9mm; height: 9mm; border-radius: 50%;
  background: var(--vc-green); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 4px rgba(0,120,30,.28);
}
.cartv-ico svg { width: 5mm; height: 5mm; }
.cartv-spec-txt { display: flex; flex-direction: column; line-height: 1.12; }
.cartv-spec-txt strong { font-size: 13px; font-weight: 800; color: #222; }
.cartv-spec-txt em { font-style: normal; font-size: 11px; color: #6a6a6a; }

/* la scala energetica riadattata alla colonna del modello */
.cartello-vetrina .cart-nrg {
  width: 100%; height: auto; margin-top: 2.5mm;
  gap: 3mm; padding: 3mm 3.5mm; border-radius: 12px;
}
/* contenitore della lettera della classe energetica: piu' grande e ben visibile */
.cartello-vetrina .cart-nrg-badge {
  width: 80px; height: 80px; border-radius: 14px;
}
.cartello-vetrina .cart-nrg-house { width: 62px; height: 62px; }
.cartello-vetrina .cart-nrg-badge-letter { font-size: 42px; }
.cartello-vetrina .cart-nrg-ipe { font-size: 16px; font-weight: 900; }
.cartello-vetrina .cart-nrg-ipe span { font-size: 12px; font-weight: 800; }
/* righe del grafico A-G piu' leggibili; la classe attiva risalta rispetto alle altre */
.cartello-vetrina .cart-nrg-scale { flex: 1; gap: 2px; }
.cartello-vetrina .cart-nrg-row {
  height: 15px; font-size: 11.5px; padding-left: 8px;
}
.cartello-vetrina .cart-nrg-row.active {
  height: 22px; font-size: 16px; font-weight: 900; padding-left: 9px;
}
/* contorno evidente attorno alla freccia attiva: il filtro sta sul contenitore
   esterno, perche' il ritaglio a freccia della riga taglierebbe via l'ombra */
.cartello-vetrina .cart-nrg-rowwrap.active {
  filter:
    drop-shadow(2px 0 0 #141414) drop-shadow(-2px 0 0 #141414)
    drop-shadow(0 2px 0 #141414) drop-shadow(0 -2px 0 #141414)
    drop-shadow(0 2px 4px rgba(0,0,0,.45));
}

.cartv-strength {
  margin-top: 2.5mm; padding: 3mm 3.5mm; border-radius: 3px;
  background: var(--vc-green); color: #fff;
}
.cartv-strength-head {
  display: flex; align-items: center; gap: 2mm; margin-bottom: 2mm;
  font-weight: 900; font-size: 15px; letter-spacing: .5px;
}
.cartv-strength-head svg { width: 6mm; height: 6mm; }
.cartv-strength ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6mm; }
.cartv-strength li { display: flex; align-items: center; gap: 2mm; font-size: 12px; line-height: 1.2; font-weight: 600; }
.cartv-check {
  flex: 0 0 auto; width: 4.6mm; height: 4.6mm; border-radius: 50%;
  background: #fff; color: var(--vc-green); display: grid; place-items: center;
}
.cartv-check svg { width: 3mm; height: 3mm; }

.cartv-strip {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm;
  padding: 3.5mm 5mm 0;
}
.cartv-strip img {
  width: 100%; height: 32mm; object-fit: cover; display: block;
  border-radius: 3px; background: #ececec;
}

.cartv-footer {
  flex: 0 0 auto; margin-top: 3.5mm;
  display: flex; align-items: center; gap: 5mm;
  padding: 4mm 6mm; background: var(--vc-green); color: #fff;
}
.cartv-phone { display: flex; align-items: center; gap: 3mm; }
.cartv-phone-ico {
  flex: 0 0 auto; width: 11mm; height: 11mm; border-radius: 50%;
  background: #fff; color: var(--vc-green); display: grid; place-items: center;
}
.cartv-phone-ico svg { width: 6mm; height: 6mm; }
.cartv-phone-txt { display: flex; flex-direction: column; }
.cartv-phone-txt span { font-size: 10.5px; line-height: 1.2; }
.cartv-phone-txt b { font-size: 25px; font-weight: 900; line-height: 1.05; }
.cartv-agency {
  display: flex; flex-direction: column; gap: 1.6mm;
  padding-left: 5mm; border-left: 2px solid rgba(255,255,255,.55);
}
.cartv-cont { display: flex; align-items: center; gap: 2mm; font-size: 11px; line-height: 1.2; }
.cartv-cont svg { flex: 0 0 auto; width: 4.6mm; height: 4.6mm; }
.cartv-claim {
  margin-left: auto; text-align: center;
  font-family: 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive;
  font-size: 16px; font-weight: 700; line-height: 1.05; transform: rotate(-5deg);
}

/* ---------------- cartello modello "TOP" ----------------
   Modello premium rosso/bianco: foto protagonista, colonna dati, prezzo,
   punti di forza, tre immagini e fascia contatti con QR. */
.cartello-top {
  --top-red: #d90812;
  --top-red-dark: #a9040d;
  --top-ink: #182533;
  --top-gold: #f2c94c;
  background: linear-gradient(180deg, #f01820, #b9040b);
  padding: 3mm;
}
.carttop-frame {
  height: 100%; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border: 1.8mm solid var(--top-red);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}
.carttop-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 7mm; padding: 6mm 7mm 1mm;
}
.carttop-logo { width: 70mm; max-height: 20mm; object-fit: contain; }
.carttop-claim {
  color: var(--top-red); text-align: right;
  font-family: 'Segoe Script', 'Bradley Hand', 'Comic Sans MS', cursive;
  font-size: 18px; font-weight: 800; line-height: 1.06; transform: rotate(-6deg);
}
.carttop-sub {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 3mm;
  padding: 0 7mm 2mm; color: #2e3640;
  font-size: 10px; font-weight: 800; letter-spacing: 2.6px; text-transform: uppercase;
}
.carttop-sub span { flex: 0 0 24mm; height: 1.2px; background: var(--top-red); }
.carttop-banner {
  position: relative; z-index: 1; flex: 0 0 auto;
  margin: 0 -1.8mm 2mm; padding: 3mm 0 4mm;
  background: linear-gradient(180deg, #f50b17, #c9040d);
  color: #fff; text-align: center; text-transform: uppercase;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 52px; line-height: .96;
  font-weight: 900; letter-spacing: 3px;
  box-shadow: 0 5px 12px rgba(90,0,0,.24);
  transform: rotate(-1.4deg);
}
.carttop-hero {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.5fr) 56mm;
  gap: 4mm; padding: 0 5mm;
}
.carttop-main { display: flex; flex-direction: column; min-height: 0; }
.carttop-photo { position: relative; flex: 0 0 auto; }
.carttop-photo img {
  width: 100%; height: 76mm; object-fit: cover; display: block;
  border: 1.3mm solid #fff; box-shadow: 0 0 0 1.2mm var(--top-red), 0 4px 12px rgba(0,0,0,.18);
}
.carttop-desc {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  padding: 4mm 1mm 0;
}
.carttop-desc h2 {
  margin: 0 0 2mm; color: var(--top-ink);
  font-size: 20px; font-weight: 900; line-height: 1.08;
}
.carttop-desc p {
  margin: 0; color: #27313c;
  font-size: 12px; line-height: 1.35; hyphens: auto; overflow: hidden;
  text-align: justify;
}
.carttop-side {
  display: flex; flex-direction: column; gap: 2.2mm; min-height: 0;
  padding: 2mm 3mm 3mm;
  background: linear-gradient(180deg, #fff, #f7f8fa);
  border-left: 1px solid #d9dde3;
  box-shadow: -3px 0 12px rgba(0,0,0,.05);
}
.carttop-loc {
  display: flex; align-items: flex-start; gap: 2mm;
  padding-bottom: 2mm; border-bottom: 1px solid #d5d9df;
  color: var(--top-ink);
}
.carttop-loc > span { flex: 0 0 auto; width: 8mm; height: 8mm; color: var(--top-red); }
.carttop-loc svg { width: 100%; height: 100%; }
.carttop-loc div { display: flex; flex-direction: column; gap: .8mm; }
.carttop-loc strong { font-size: 14px; font-weight: 900; line-height: 1.05; }
.carttop-loc em { font-style: normal; font-size: 11px; line-height: 1.15; color: #4d5661; }
.carttop-specs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2mm;
}
.carttop-spec { display: flex; align-items: center; gap: 2mm; }
.carttop-ico {
  flex: 0 0 auto; width: 10mm; height: 10mm; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 25%, #ff4048, var(--top-red) 70%);
  box-shadow: 0 2px 5px rgba(140,0,0,.28);
}
.carttop-ico svg { width: 5.8mm; height: 5.8mm; }
.carttop-spec span:last-child { display: flex; flex-direction: column; line-height: 1.08; }
.carttop-spec em { font-style: normal; font-size: 9.5px; color: #6b7280; }
.carttop-spec strong { font-size: 13px; font-weight: 900; color: var(--top-ink); }
.cartello-top .cart-nrg {
  width: 100%; padding: 2.2mm; gap: 2.5mm; box-shadow: none;
  border: 1px solid #e2e5ea;
}
.cartello-top .cart-nrg-badge { width: 52px; height: 52px; border-radius: 10px; }
.cartello-top .cart-nrg-house { width: 40px; height: 40px; }
.cartello-top .cart-nrg-badge-letter { font-size: 29px; }
.cartello-top .cart-nrg-ipe { font-size: 10px; }
.cartello-top .cart-nrg-ipe span { font-size: 8px; }
.cartello-top .cart-nrg-row { height: 10px; font-size: 9px; }
.cartello-top .cart-nrg-row.active { height: 15px; font-size: 12px; }
.carttop-mid {
  flex: 0 0 auto; display: grid; grid-template-columns: 56mm 1fr; gap: 4mm;
  padding: 3mm 5mm 0; align-items: stretch;
}
.carttop-price {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 24mm; padding: 2mm; color: #fff; text-align: center;
  background: linear-gradient(180deg, #f60b18, var(--top-red-dark));
  border-radius: 3mm; box-shadow: 0 4px 10px rgba(90,0,0,.22);
}
.carttop-price span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.carttop-price strong { font-family: 'Arial Black', Arial, sans-serif; font-size: 27px; line-height: 1.05; }
.carttop-price em { font-style: normal; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.carttop-strength {
  padding: 3mm 4mm; color: #fff;
  background: linear-gradient(135deg, #f60b18, var(--top-red-dark));
  border-radius: 3mm; box-shadow: 0 4px 10px rgba(90,0,0,.18);
}
.carttop-strength h3 {
  margin: 0 0 1.8mm; display: flex; align-items: center; gap: 2mm;
  font-size: 16px; line-height: 1; font-weight: 900;
}
.carttop-strength h3 svg { width: 6mm; height: 6mm; }
.carttop-strength ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 7mm; }
.carttop-strength li {
  break-inside: avoid; display: flex; align-items: center; gap: 1.6mm;
  margin-bottom: 1.5mm; font-size: 12px; line-height: 1.2; font-weight: 800;
}
.carttop-strength li span { flex: 0 0 auto; width: 4mm; height: 4mm; }
.carttop-strength li svg { width: 100%; height: 100%; }
.carttop-strip {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm;
  padding: 3mm 5mm 0;
}
.carttop-strip img {
  width: 100%; height: 29mm; object-fit: cover; display: block;
  border: 1mm solid #fff; box-shadow: 0 0 0 1px #d9dde3;
}
.carttop-footer {
  flex: 0 0 auto; margin-top: auto;
  display: grid; grid-template-columns: 1.15fr 1fr auto; gap: 4mm; align-items: center;
  min-height: 29mm; padding: 4mm 5mm;
  background: linear-gradient(180deg, #e90813, #b9040b); color: #fff;
}
.carttop-contact { display: flex; align-items: center; gap: 3mm; }
.carttop-phone {
  flex: 0 0 auto; width: 12mm; height: 12mm; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--top-red);
}
.carttop-phone svg { width: 7mm; height: 7mm; }
.carttop-contact div { display: flex; flex-direction: column; gap: 1mm; }
.carttop-contact em { font-style: normal; font-size: 10px; line-height: 1.18; font-weight: 700; }
.carttop-contact strong { font-size: 24px; line-height: 1; font-weight: 900; }
.carttop-agency {
  display: flex; flex-direction: column; gap: 1.4mm;
  padding-left: 4mm; border-left: 1.5px solid rgba(255,255,255,.55);
}
.carttop-agency span { display: flex; align-items: center; gap: 1.8mm; }
.carttop-agency svg { flex: 0 0 auto; width: 4.5mm; height: 4.5mm; }
.carttop-agency em { font-style: normal; font-size: 9.8px; line-height: 1.15; }
.carttop-qr {
  display: flex; flex-direction: column; align-items: center; gap: 1mm;
  background: #fff; color: var(--top-red);
  padding: 1.5mm; border-radius: 2mm;
}
.carttop-qr img { width: 20mm; height: 20mm; display: block; }
.carttop-qr span { font-size: 8px; font-weight: 900; text-transform: uppercase; }


/* ---------------- STAMPA ---------------- */

/* fogli A4 del gestionale: cartello e foglio visita occupano l'area utile
   di una A4 (190x276mm); margine di pagina 8mm per guadagnare spazio */
@page { size: A4 portrait; margin: 8mm; }

@media print {
  .navbar, .topbar, .demo-flag, .toolbar, .tabs, .detail-actions,
  .icon-btn, .modal-overlay, #toast { display: none !important; }
  body { background: #fff; }
  .layout { display: block; min-height: 0; }
  .main, .content { padding: 0 !important; margin: 0 !important; }
  .card, .detail-head, .kpi { box-shadow: none !important; border: 1px solid #d8dde5 !important; }
  .table-wrap { overflow: visible !important; }
  table.data { font-size: 11px; }
  a { color: inherit; text-decoration: none; }
  /* "View PDF" della scheda pubblica: si stampa solo la scheda dell'immobile */
  .vc-topbar, .vc-header, .vc-footer, .vc-credit, .vc-detail-tools,
  .vc-thumbs, .vc-mutuo, .vc-contact, .vc-detail-nav, .vc-detail-back, .vc-agent-box,
  .vc-agent-all { display: none !important; }
  .vc-public { background: #fff !important; min-height: 0 !important; }
  .vc-main { padding: 0 !important; }
  .vc-card, .vc-detail { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .vc-detail-hero img, .vc-detail-hero.fit-home #vcHero { height: 260px; }
  .vc-nrg-row { opacity: 1; filter: none; }

  /* cartello vetrina aperto: si stampa solo il foglio A4.
     L'overlay vive dentro .layout, quindi si nascondono i suoi fratelli
     (la griglia di scelta), non il contenitore. */
  body.cartello-open .content > .stack > *:not(.cartello-overlay) { display: none !important; }
  body.cartello-open .cartello-overlay {
    position: static; inset: auto; display: flex; justify-content: center; align-items: flex-start;
    height: 277mm; padding: 0; margin: 0; overflow: hidden; background: none;
  }
  body.cartello-open .cartello-actions { display: none !important; }
  body.cartello-open .cartello {
    width: 190mm; height: 276mm; min-height: 0; overflow: hidden; box-shadow: none;
    zoom: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.cartello-open .cart-nrg-row { opacity: 1; }
  /* Il motore di stampa di Firefox rende come un blocco nero i gradienti che
     contengono valori con alpha ("rgba(...)" e "transparent"). La testata è
     l'unico elemento del cartello che li usa: in stampa la si ridisegna con
     soli colori pieni, così Chrome e Firefox producono lo stesso risultato. */
  body.cartello-open .cart-head {
    background: linear-gradient(135deg, #df2119, #b8070b);
  }
  body.cartello-open .cart-stripes {
    background: linear-gradient(138deg,
      var(--cart-green) 0 25%, #fff 25% 38%, #cf1118 38% 51%, #cf1117 51%);
  }
  /* Anche la striscia che evidenzia la classe energetica attiva spariva in
     stampa su Firefox: il contorno è disegnato con un "filter" (drop-shadow),
     che il motore di stampa di Firefox non renderizza. In stampa il filtro si
     disattiva e lo stesso contorno si ridisegna con uno pseudo-elemento a
     colore pieno, che entrambi i browser stampano correttamente. */
  body.cartello-open .cart-nrg-rowwrap.active { filter: none; }
  body.cartello-open .cart-nrg-rowwrap.active::before {
    content: ""; position: absolute; z-index: 0;
    top: -1.5px; left: -1.5px; right: -1.5px; bottom: -1.5px;
    background: #141414;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
  }
  body.cartello-open .cart-nrg-rowwrap.active .cart-nrg-row { position: relative; z-index: 1; }
  /* il modello Vetrina è ridotto al 78% */
  body.cartello-open .cartello.cartello-vetrina { zoom: .78; }

  /* foglio visita aperto: si stampa solo il modulo A4 (l'overlay è fuori da .layout) */
  body.foglio-open .layout { display: none !important; }
  body.foglio-open .foglio-overlay {
    position: static; inset: auto; display: block;
    padding: 0; margin: 0; overflow: visible; background: none;
  }
  body.foglio-open .foglio-actions { display: none !important; }
  /* la stampa ignora lo zoom dell'anteprima: il foglio esce sempre alle misure reali */
  body.foglio-open #foglioSheet .foglio { zoom: 1 !important; }
  body.foglio-open .foglio {
    width: 100%; height: 276mm; min-height: 0; overflow: hidden; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* il contratto è testo continuo: cresce e va a capo su più pagine */
  body.foglio-open .foglio.foglio-contratto { height: auto; min-height: 0; overflow: visible; }

}

/* ============================================================
   CHATBOT "VoglioCasa" — assistente a regole predefinite
   (widget flottante, comune a sito pubblico e gestionale)
   ============================================================ */
.vc-chat { position: fixed; right: 22px; bottom: 22px; z-index: 2500; pointer-events: none; }
.vc-chat > * { pointer-events: auto; }

/* pulsante flottante */
.vc-chat-fab {
  width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-600), var(--logo-red));
  color: #fff; box-shadow: 0 8px 22px rgba(170,0,20,.42);
  transition: transform .16s ease, box-shadow .16s ease;
}
.vc-chat-fab:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(170,0,20,.5); }
.vc-chat-fab svg { width: 27px; height: 27px; }
.vc-chat-fab .vc-chat-fab-close { display: none; }
.vc-chat.open .vc-chat-fab .vc-chat-fab-open { display: none; }
.vc-chat.open .vc-chat-fab .vc-chat-fab-close { display: block; }
.vc-chat-badge {
  position: absolute; top: -2px; right: -2px; width: 16px; height: 16px;
  background: var(--logo-green-bright); border: 3px solid #fff; border-radius: 50%;
}
.vc-chat.open .vc-chat-badge { display: none; }

/* pannello */
.vc-chat-panel {
  position: absolute; right: 0; bottom: 72px;
  width: 360px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 110px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  border: 1px solid var(--logo-green-border);
}
.vc-chat-panel[hidden] { display: none; }
.vc-chat-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(135deg, var(--brand-600), var(--logo-red)); color: #fff;
}
.vc-chat-head .vc-chat-ava {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  background: #fff; color: var(--brand-600); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.vc-chat-head .vc-chat-id { flex: 1; min-width: 0; line-height: 1.2; }
.vc-chat-head strong { display: block; font-size: 14.5px; }
.vc-chat-head small { font-size: 11.5px; opacity: .85; }
.vc-chat-close {
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff; font-size: 14px; line-height: 1;
}
.vc-chat-close:hover { background: rgba(255,255,255,.3); }

.vc-chat-body {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  background: var(--logo-green-tint, #f6fdf7);
  display: flex; flex-direction: column; gap: 9px;
}
.vc-chat-msg {
  max-width: 84%; padding: 9px 12px; border-radius: 13px;
  font-size: 13px; line-height: 1.42; white-space: pre-line; word-wrap: break-word;
}
.vc-chat-msg.bot { align-self: flex-start; background: #fff; color: #1c1c1c;
  border: 1px solid #e2eee4; border-bottom-left-radius: 4px; }
.vc-chat-msg.user { align-self: flex-end; background: var(--brand-600); color: #fff;
  border-bottom-right-radius: 4px; }
.vc-chat-msg a { color: var(--brand-600); font-weight: 700; text-decoration: underline; }
.vc-chat-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; }
.vc-chat-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: #b7cdbb;
  animation: vcChatDot 1s infinite ease-in-out;
}
.vc-chat-typing i:nth-child(2) { animation-delay: .15s; }
.vc-chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes vcChatDot { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* risultati immobili */
.vc-chat-prop {
  align-self: stretch; display: flex; gap: 9px; align-items: center;
  background: #fff; border: 1px solid #e2eee4; border-radius: 12px;
  padding: 7px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vc-chat-prop:hover { border-color: var(--logo-green); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.vc-chat-prop img { width: 62px; height: 50px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.vc-chat-prop .vc-chat-prop-txt { min-width: 0; line-height: 1.3; }
.vc-chat-prop strong { display: block; font-size: 12.5px; color: #123; }
.vc-chat-prop .vc-chat-prop-sub { font-size: 11px; color: #5a6b62; }
.vc-chat-prop .vc-chat-prop-prezzo { font-size: 13px; font-weight: 800; color: var(--brand-600); }

/* biglietto da visita */
.vc-chat-card {
  align-self: stretch; display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid #e2eee4; border-radius: 12px; padding: 8px;
}
.vc-chat-card-img { display: block; border-radius: 9px; overflow: hidden; }
.vc-chat-card-img img { display: block; width: 100%; height: auto; }
.vc-chat-card-dl {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px; border-radius: 9px; background: var(--brand-600); color: #fff;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.vc-chat-card-dl:hover { background: var(--logo-red); }
.vc-chat-card-dl svg { width: 15px; height: 15px; }

/* risposte rapide */
.vc-chat-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.vc-chat-opt {
  border: 1px solid var(--brand-600); background: #fff; color: var(--brand-600);
  font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.vc-chat-opt:hover { background: var(--brand-600); color: #fff; }

.vc-chat-foot {
  display: flex; gap: 8px; align-items: center; padding: 10px 12px;
  border-top: 1px solid #e6efe8; background: #fff;
}
.vc-chat-foot input {
  flex: 1; min-width: 0; height: 40px; border: 1px solid #d7e3d9; border-radius: 999px;
  padding: 0 15px; font-size: 13px; outline: none; color: #1c1c1c;
}
.vc-chat-foot input:focus { border-color: var(--logo-green); }
.vc-chat-foot button {
  width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--brand-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.vc-chat-foot button:hover { background: var(--logo-red); }
.vc-chat-foot button:disabled { opacity: .5; cursor: default; }
.vc-chat-foot button svg { width: 19px; height: 19px; }

/* l'altezza segue l'area davvero visibile sul telefono (dvh), non quella che
   comprende le barre del browser */
@supports (height: 100dvh) {
  .vc-chat-panel { max-height: calc(100dvh - 110px); }
}
@media (max-width: 560px) {
  .vc-chat { right: 12px; bottom: 12px; }
  /* Sul telefono il pannello è una finestra di chat ancorata in basso, sopra il
     pulsante: l'altezza resta contenuta (non tutto lo schermo) così si capisce
     che è il chatbot, l'intestazione è visibile e la bolla di apertura/chiusura
     non viene coperta. */
  .vc-chat-panel {
    position: fixed; left: 12px; right: 12px; bottom: 84px; top: auto;
    width: auto; height: 60vh; max-height: calc(100vh - 120px);
    border-radius: 16px;
  }
  .vc-chat-body { padding: 12px 11px; }
  .vc-chat-foot { padding: 9px 10px; }
  /* 16px: sotto questa misura iOS ingrandisce da solo la pagina quando si
     tocca il campo di scrittura */
  .vc-chat-foot input { font-size: 16px; }
}
@supports (height: 100dvh) {
  /* sul telefono l'altezza segue l'area davvero visibile (barre del browser
     escluse) */
  @media (max-width: 560px) {
    .vc-chat-panel { height: min(62dvh, 460px); max-height: calc(100dvh - 120px); }
  }
}
@media print { .vc-chat { display: none !important; } }

/* ---------------- GESTIONALE STUDENTI (integrazione via iframe) ----------------
   solo iframe a tutta altezza: i sottomenu sono quelli dell'app Flask,
   mostrati nella sua barra a tendina interna */
.student-wrap { display: flex; flex-direction: column; }

.student-frame-wrap {
  height: calc(100vh - var(--topbar-h) - 66px);
  min-height: 480px;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff; box-shadow: var(--shadow);
}
.student-frame { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .student-frame-wrap { height: calc(100vh - var(--topbar-h) - 52px); }
}

/* --- Anteprima Web: il sito pubblico mostrato dentro il gestionale --- */

.prev-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.segmented {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; background: #fff;
}
.segmented .seg {
  width: 34px; height: 31px; padding: 0; border: 0; background: transparent;
  color: var(--text-mute); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.segmented .seg + .seg { border-left: 1px solid var(--border); }
.segmented .seg svg,
.prev-tools .btn svg { width: 16px; height: 16px; color: inherit; }
.segmented .seg:hover { background: #f6f8f9; color: var(--text); }
.segmented .seg.active { background: var(--logo-green); color: #fff; }

.web-preview {
  height: calc(100vh - var(--topbar-h) - 215px);
  min-height: 420px;
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff; box-shadow: var(--shadow);
  transition: max-width .2s ease;
}
.web-preview iframe { width: 100%; height: 100%; border: 0; display: block; }
.web-preview.prev-tablet { max-width: 820px; }
.web-preview.prev-mobile { max-width: 420px; }

@media (max-width: 900px) {
  .web-preview { height: calc(100vh - var(--topbar-h) - 250px); }
  .web-preview.prev-tablet, .web-preview.prev-mobile { max-width: 100%; }
}

/* --- Anteprima social: i messaggi di Facebook e Telegram dentro il gestionale --- */

.social-preview-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;
}
.social-preview-panel {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff;
}
.social-preview-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #f8fafb;
  border-bottom: 1px solid var(--border);
}
.social-preview-head .spacer { flex: 1; }
.social-preview-testa { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.social-preview-testa b { font-size: 13px; color: var(--text); }
.social-preview-testa span {
  font-size: 11.5px; color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.social-preview-ico {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.social-preview-ico.facebook { background: #1877f2; }
.social-preview-ico.instagram { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.social-preview-ico.telegram { background: #229ed9; }
.social-vuoto {
  padding: 26px 18px; text-align: center;
  font-size: 12.5px; color: var(--text-mute); line-height: 1.6;
}
.social-vuoto a { color: var(--brand-500, #1f6feb); font-weight: 600; }
.social-post-lista {
  height: 640px; overflow-y: auto; padding: 12px; display: flex;
  flex-direction: column; gap: 12px; background: #f0f2f5;
}
.social-post {
  background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.12);
  overflow: hidden;
}
.social-post-testa { display: flex; align-items: center; gap: 9px; padding: 10px 12px 0; }
.social-post-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1877f2; color: #fff; font-weight: 700; font-size: 15px;
}
.social-post-autore { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.social-post-autore b { font-size: 13px; color: #050505; }
.social-post-autore span { font-size: 11px; color: #65676b; }
.social-post-testo {
  margin: 8px 0 0; padding: 0 12px; font-size: 13px; line-height: 1.45;
  color: #050505; white-space: pre-line;
}
.social-post-media { margin-top: 8px; background: #f0f2f5; }
.social-post-media img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.social-post-segnaposto {
  padding: 34px 14px; text-align: center; font-size: 14px; font-weight: 600;
  color: #65676b; line-height: 1.6;
}
.social-post-link {
  display: block; padding: 9px 12px; border-top: 1px solid #e4e6eb;
  font-size: 12.5px; font-weight: 600; color: #1877f2; text-decoration: none;
}
.social-post-link:hover { background: #f0f2f5; }
/* variante Instagram: bordo sottile, avatar con gradiente e link scuro */
.social-post-ig { border: 1px solid #dbdbdb; border-radius: 12px; box-shadow: none; }
.social-post-avatar.ig { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.social-post-ig .social-post-media { background: #fafafa; }
.social-post-ig .social-post-media img { max-height: 340px; }
.social-post-ig .social-post-link { color: #262626; border-top-color: #efefef; }
.social-post-ig .social-post-link:hover { background: #fafafa; }
/* variante Telegram: bordo azzurro e link nel colore del canale */
.social-post-tg { border-radius: 12px; }
.social-post-avatar.tg { background: #229ed9; }
.social-post-tg .social-post-link { color: #229ed9; }
.social-nota {
  padding: 9px 12px; border-top: 1px solid var(--border); background: #f8fafb;
  font-size: 11.5px; line-height: 1.45; color: var(--text-mute);
}
.social-msg-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.social-msg-carta {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: #fff;
}
.social-msg-immagine { background: #f1f5f9; }
.social-msg-immagine img {
  width: 100%; height: 180px; object-fit: cover; display: block;
}
.social-msg-corpo {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px;
}
.social-msg-titolo { font-size: 13.5px; color: var(--text); }
.social-msg-sotto { font-size: 11.5px; color: var(--text-mute); }
.social-msg-testo {
  margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-soft);
  white-space: pre-line;
}
.social-msg-piede {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.social-msg-piede .spacer { flex: 1; }
.social-msg-data { font-size: 11px; color: var(--text-mute); }
.social-msg-scheda {
  font-size: 12px; font-weight: 600; color: var(--brand-500, #1f6feb); text-decoration: none;
}
.social-msg-scheda:hover { text-decoration: underline; }
.social-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; margin-right: 2px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  color: #fff; text-decoration: none;
}
.social-chip.facebook { background: #1877f2; }
.social-chip.instagram { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.social-chip.telegram { background: #229ed9; }
.social-chip svg { width: 12px; height: 12px; }

@media (max-width: 900px) {
  .social-preview-grid { grid-template-columns: 1fr; }
  .social-post-lista { height: 520px; }
  .social-msg-grid { grid-template-columns: 1fr; }
}

/* i campi nascosti (es. suono e durata quando il promemoria è spento) devono
   sparire anche se la classe .field imposta display:flex */
.field[hidden] { display: none; }

/* libreria dei suoni predefiniti del promemoria audio */
.snd-list { display: flex; flex-direction: column; gap: 6px; }
.snd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; background: #fff;
}
.snd-row.on { border-color: var(--accent-600); background: rgba(7, 148, 26, .06); }
.snd-row input[type="radio"] { margin: 0; }
.snd-row .snd-name { flex: 1; font-size: 13px; font-weight: 550; }
.snd-play {
  border: 1px solid var(--border); background: #fff; color: var(--accent-600);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.snd-play:hover { background: var(--accent-600); color: #fff; border-color: var(--accent-600); }

.snd-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--accent-600); background: rgba(7, 148, 26, .1);
}
.snd-del {
  border: 1px solid var(--border); background: #fff; color: var(--red);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.snd-del:hover { background: var(--red-bg); border-color: var(--red); }
.snd-del svg { width: 14px; height: 14px; }
.snd-up { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.snd-up-msg { font-size: 12px; color: var(--text-soft); }

/* avviso a schermo del promemoria: conto alla rovescia con pulsante Ferma */
#promemoriaAllarme {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 90px; pointer-events: none;
}
#promemoriaAllarme .pa-box {
  pointer-events: auto;
  display: flex; align-items: center; gap: 14px;
  min-width: 340px; max-width: 90vw;
  padding: 16px 18px; border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-lg);
  border: 2px solid var(--accent-600);
  animation: paIn .18s ease-out;
}
@keyframes paIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
#promemoriaAllarme .pa-icon { font-size: 26px; line-height: 1; }
#promemoriaAllarme .pa-body { flex: 1; min-width: 0; }
#promemoriaAllarme .pa-title { font-size: 14px; font-weight: 700; color: var(--text); }
#promemoriaAllarme .pa-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
#promemoriaAllarme .pa-time {
  font-size: 22px; font-weight: 800; color: var(--accent-600);
  font-variant-numeric: tabular-nums; min-width: 46px; text-align: right;
}
#promemoriaAllarme .pa-stop { flex: none; }

/* ============================================================
   Dashboard locazioni — ricerca, KPI, occupazione, azioni rapide
   ============================================================ */
.loc-searchbar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.loc-search-inline { flex: 1; min-width: 240px; }
.loc-search-inline input { width: 100%; min-width: 0; }
.loc-cerca { flex: none; background: var(--red); color: #fff; border-color: var(--red); padding: 9px 20px; }
.loc-cerca svg { width: 15px; height: 15px; }
.loc-cerca:hover { background: #c33c25; border-color: #c33c25; }

.loc-occ .card-body { padding: 16px 18px; }
.occ-bar { position: relative; background: #eef1f4; border-radius: 8px; overflow: hidden; }
.loc-occ .occ-bar { height: 34px; }
.loc-occ .occ-bar-fill { background: #22c55e; }
.occ-bar-fill {
  height: 100%; background: var(--accent-600); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.occ-bar-sm { height: 8px; border-radius: 20px; }
.occ-bar-sm .occ-bar-fill { border-radius: 20px; }
.occ-mini { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.occ-mini-pct { flex: none; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.occ-mini .occ-bar { flex: 1; }

.loc-list { display: flex; flex-direction: column; }
.loc-free-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.loc-free-row:last-child { border-bottom: none; }
.loc-free-info { min-width: 0; }
.loc-free-title { font-size: 13.5px; font-weight: 650; color: var(--text); }
.loc-free-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }

.loc-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
}
.loc-chip-blue  { background: #e8f0fc; color: #2d6fd0; }
.loc-chip-slate { background: #eef1f5; color: #5b6b7b; }
.loc-chip-green { background: var(--accent-100); color: var(--accent-700); }
.loc-chip-red   { background: var(--red-bg); color: #a83a37; }
.loc-str-name { color: var(--red); }
/* matita accanto al nome della struttura nella "Panoramica Strutture" */
.loc-str-edit {
  width: 26px; height: 26px; border-radius: 6px;
  margin-left: 8px; vertical-align: middle;
}
.loc-str-edit svg { width: 14px; height: 14px; }

.loc-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.loc-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 12px; background: #fff;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  cursor: pointer; font-size: 13.5px; font-weight: 650; text-align: center;
  transition: background .12s, border-color .12s, transform .12s;
}
.loc-action svg { width: 26px; height: 26px; }
.loc-action:hover { transform: translateY(-1px); }
.loc-action-red   { color: var(--red); border-color: var(--red); }
.loc-action-red:hover { background: var(--red-bg); }
.loc-action-cyan  { color: #17a2c4; border-color: #35b8d6; }
.loc-action-cyan:hover { background: #e6f7fb; }
.loc-action-green { color: var(--accent-600); border-color: var(--accent-500); }
.loc-action-green:hover { background: var(--accent-100); }
.loc-action-amber { color: var(--amber); border-color: var(--amber); }
.loc-action-amber:hover { background: var(--amber-bg); }
@media (max-width: 760px) {
  .loc-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------------- BIORITMI ---------------- */

.bio-toolbar { justify-content: space-between; gap: 18px; }
.bio-campo { display: flex; flex-direction: column; gap: 4px; }
.bio-campo > span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute); font-weight: 700;
}
.bio-campo select { min-width: 220px; max-width: 320px; }
.bio-soggetto-fisso {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  padding: 7px 0; min-width: 180px;
}
.bio-date { display: flex; align-items: center; gap: 6px; }
.bio-nav { padding: 6px 8px; }
.bio-nav svg { width: 16px; height: 16px; }
.bio-nav-prev svg { transform: rotate(90deg); }
.bio-nav-next svg { transform: rotate(-90deg); }
.bio-data-label { font-size: 13px; font-weight: 600; color: var(--text); min-width: 190px; }

/* riga di sintesi: chi è il soggetto */
.bio-sintesi {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 18px; border-left: 4px solid var(--border-strong);
}
.bio-sintesi.bio-alta { border-left-color: var(--accent-500); }
.bio-sintesi.bio-media { border-left-color: var(--amber); }
.bio-sintesi.bio-bassa { border-left-color: var(--red); }
.bio-nome { font-size: 18px; font-weight: 700; color: var(--text); }
.bio-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-soft); margin-top: 3px;
}
.bio-meta svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--text-mute); }
.bio-energia { text-align: center; flex: 0 0 auto; }
.bio-energia-num { display: block; font-size: 30px; font-weight: 800; line-height: 1; color: var(--brand-600); }
.bio-energia-lab { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 4px; }

/* bioritmo: le tre sinusoidi */
.bio-cicli { display: flex; flex-direction: column; gap: 16px; }
.bio-riga-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bio-riga-head svg { width: 15px; height: 15px; color: var(--text-soft); }
.bio-critico {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--amber-bg); color: #a8700f; border-radius: 4px; padding: 1px 6px;
}
.bio-percento { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; }
.bio-percento.pos { color: var(--accent-700); }
.bio-percento.neg { color: var(--red); }
.bio-track {
  position: relative; height: 10px; margin: 7px 0 4px; border-radius: 6px;
  background: linear-gradient(to right, #fdedea 0%, #f4f6f8 50%, #e9fde9 100%);
  overflow: hidden;
}
.bio-track::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--border-strong);
}
.bio-fill { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.bio-fill.pos { background: var(--accent-500); }
.bio-fill.neg { background: var(--red); }
.bio-riga-foot { font-size: 11.5px; color: var(--text-mute); }

/* "Il tuo cielo": le voci astrologiche/numerologiche */
.bio-cielo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 20px; }
.bio-voce {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.bio-voce span { color: var(--text-mute); }
.bio-voce strong { color: var(--text); font-weight: 650; text-align: right; }

.bio-oroscopo { font-size: 13.5px; line-height: 1.65; color: var(--text); }

/* attività proficue / da rimandare */
.bio-att-list { display: flex; flex-direction: column; gap: 12px; }
.bio-att {
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: 8px; padding: 12px 14px; background: #fcfdfe;
}
.bio-att.bio-si { border-left-color: var(--accent-500); }
.bio-att.bio-no { border-left-color: var(--amber); }
.bio-att-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.bio-att-head svg { width: 16px; height: 16px; color: var(--text-soft); }
.bio-att-score {
  margin-left: auto; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--accent-100); color: var(--accent-700); border-radius: 20px; padding: 2px 9px;
}
.bio-att.bio-no .bio-att-score { background: var(--amber-bg); color: #a8700f; }
.bio-att-fasce { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bio-fascia {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  background: #eef2f5; color: var(--text-soft); border-radius: 20px; padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
.bio-fascia svg { width: 13px; height: 13px; }
.bio-att-consiglio { margin-top: 8px; font-size: 12px; color: var(--text-soft); line-height: 1.5; }

/* ore planetarie della giornata */
.bio-ore { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 8px; }
.bio-ora {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; border: 1px solid var(--border); border-radius: 8px;
  background: #fbfcfd; text-align: center;
}
.bio-ora.buona { border-color: var(--logo-green-border); background: var(--accent-100); }
.bio-ora-h { font-size: 11px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.bio-ora-s { font-size: 15px; line-height: 1; }
.bio-ora-n { font-size: 10px; color: var(--text-mute); }
.bio-ora.buona .bio-ora-n { color: var(--accent-700); font-weight: 600; }

/* numerologia avanzata: anima, personalità, espressione, gematria caldea */
.bio-tri { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.bio-tri-box {
  display: flex; flex-direction: column; gap: 4px; text-align: center;
  padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcfd;
}
.bio-tri-box span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute); font-weight: 700;
}
.bio-tri-box strong { font-size: 24px; font-weight: 800; line-height: 1; color: var(--brand-600); }
.bio-tri-box em { font-size: 11.5px; font-style: normal; color: var(--text-soft); line-height: 1.4; }

.bio-sub { margin: 20px 0 10px; font-size: 13px; font-weight: 700; color: var(--text); }

/* pinnacoli e sfide: quattro cicli di vita, quello attuale evidenziato */
.bio-pins { display: flex; flex-direction: column; gap: 8px; }
.bio-pin {
  display: grid; grid-template-columns: 92px 34px 1fr 1fr; gap: 10px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: #fbfcfd; font-size: 12.5px;
}
.bio-pin.ora { border-color: var(--accent-500); background: var(--accent-100); }
.bio-pin-eta { font-size: 11.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.bio-pin-num { font-size: 15px; font-weight: 800; text-align: center; color: var(--brand-600); }
.bio-pin-txt { color: var(--text); }
.bio-pin-sfida { font-size: 11.5px; color: var(--text-mute); text-align: right; }
.bio-nota { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }

/* I Ching: le sei linee dell'esagramma lette dall'alto verso il basso */
.bio-iching { display: flex; align-items: center; gap: 18px; }
.bio-linee { display: flex; flex-direction: column; gap: 5px; width: 96px; flex: 0 0 auto; }
.bio-linea { height: 7px; border-radius: 2px; background: var(--ink-800); }
.bio-linea.yin {
  background: linear-gradient(90deg,
    var(--ink-800) 0 42%, transparent 42% 58%, var(--ink-800) 58% 100%);
}
.bio-iching-txt { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.bio-iching-txt em { font-style: normal; color: var(--text-soft); line-height: 1.5; }
.bio-iching-txt span { font-size: 12px; }

/* valutazione assunzione: confronto del candidato con il personale profilato */
.compat-list { display: flex; flex-direction: column; gap: 12px; }
.compat {
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: 8px; padding: 12px 14px; background: #fcfdfe;
}
.compat.alta { border-left-color: var(--accent-500); }
.compat.buona { border-left-color: var(--logo-green-border); }
.compat.media { border-left-color: var(--amber); }
.compat.bassa { border-left-color: var(--red); }
.compat-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.compat-head .muted { font-size: 11.5px; }
.compat-num {
  margin-left: auto; font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--brand-600);
}
.compat-fascia {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--accent-100); color: var(--accent-700); border-radius: 20px; padding: 2px 9px;
}
.compat.media .compat-fascia, .compat.bassa .compat-fascia { background: var(--amber-bg); color: #a8700f; }
.compat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.compat-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  background: #eef2f5; color: var(--text-soft); border-radius: 20px; padding: 3px 9px;
}
.compat-chip b { font-variant-numeric: tabular-nums; }
.compat-chip.ok { background: var(--accent-100); color: var(--accent-700); }
.compat-chip.low { background: var(--amber-bg); color: #a8700f; }
.compat-nota { margin-top: 8px; font-size: 12px; color: var(--text-soft); line-height: 1.5; }

.compat-media { display: flex; align-items: baseline; gap: 10px; }
.compat-media-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--brand-600); }
.compat-media-lab { font-size: 12px; color: var(--text-mute); }
.compat-giorni { display: flex; flex-wrap: wrap; gap: 8px; }
.compat-giorno {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 8px; background: #fbfcfd;
}
.compat-giorno.buono { border-color: var(--accent-500); background: var(--accent-100); }
.compat-giorno-p { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-600); }

/* valutazione assunzione: le nove voci di attitudine, candidato e gruppo */
.compat-att { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.compat-att-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-mute); font-weight: 700; }
.compat-att .compat-chips { margin-top: 0; }
.att-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.att-group { grid-column: 1 / -1; margin-top: 8px; padding-bottom: 3px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-mute); font-weight: 700;
  border-bottom: 1px solid #e8edf1; }
.att-group:first-child { margin-top: 0; }
.att { display: flex; flex-direction: column; gap: 4px; }
.att-top { display: flex; align-items: baseline; gap: 8px; }
.att-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.att-intesa { margin-left: auto; font-size: 10.5px; font-weight: 700; border-radius: 20px;
  padding: 2px 8px; background: var(--accent-100); color: var(--accent-700);
  white-space: nowrap; }
.att-intesa.mid { background: var(--amber-bg); color: #a8700f; }
.att-intesa.low { background: #fdecec; color: var(--red); }
.att-bar { height: 6px; border-radius: 4px; background: #e8edf1; overflow: hidden; }
.att-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--brand-600); }
.att-foot { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-soft); }
.att-foot b { color: var(--text); font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .bio-ore { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .bio-toolbar { flex-direction: column; align-items: stretch; }
  .bio-campo select { max-width: none; }
  .bio-sintesi { flex-direction: column; align-items: flex-start; }
  .bio-cielo { grid-template-columns: minmax(0,1fr); }
  .bio-data-label { min-width: 0; }
  .bio-ore { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .bio-tri { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bio-pin { grid-template-columns: 1fr; gap: 3px; }
  .bio-pin-num, .bio-pin-sfida { text-align: left; }
  .bio-iching { flex-direction: column; align-items: flex-start; }
  .compat-head .compat-num { margin-left: 0; }
  .att-list { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ASSISTENTE CONTRATTI AI — pagina della sezione Contratti
   ============================================================ */

.ac-off { display: flex; align-items: flex-start; gap: 10px; border-left: 4px solid var(--brand-600); }
.ac-off svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--brand-600); }

.ac-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  height: calc(100vh - 190px);
  min-height: 460px;
}
.ac-shell.ac-disabled { opacity: .6; pointer-events: none; }

/* --- colonna storico --- */
.ac-side {
  border-right: 1px solid var(--border);
  background: var(--surface-2, #fafafa);
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  min-height: 0;
}
.ac-nuova { width: 100%; justify-content: center; }
.ac-storico { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.ac-storico-vuoto { color: var(--ink-500, #8a8a8a); font-size: 13px; padding: 6px 2px; }
.ac-storico-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
}
.ac-storico-item:hover { background: #fff; border-color: var(--border); }
.ac-storico-item.active { background: #fff; border-color: var(--brand-600); }
.ac-storico-tit {
  flex: 1; font-size: 13px; color: var(--ink-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-storico-del {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-500, #8a8a8a); padding: 2px; border-radius: 6px; line-height: 0;
}
.ac-storico-del svg { width: 14px; height: 14px; }
.ac-storico-del:hover { color: var(--brand-600); background: var(--brand-100); }

/* --- colonna chat --- */
.ac-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ac-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.ac-ava {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-600), var(--logo-green));
  color: #fff;
}
.ac-ava svg { width: 20px; height: 20px; }
.ac-head-id { display: flex; flex-direction: column; line-height: 1.25; }
.ac-head-id strong { font-size: 15px; color: var(--ink-900); }
.ac-head-id small { font-size: 12px; color: var(--ink-500, #8a8a8a); }
.ac-head select {
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; background: #fff; cursor: pointer;
}

.ac-body {
  flex: 1; overflow-y: auto; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
  background: var(--surface-2, #fafafa);
}

/* --- stato vuoto + suggerimenti --- */
.ac-vuoto { margin: auto; text-align: center; max-width: 520px; padding: 18px; }
.ac-vuoto-ava {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-600), var(--logo-green));
  color: #fff;
}
.ac-vuoto-ava svg { width: 30px; height: 30px; }
.ac-vuoto h3 { margin: 0 0 8px; color: var(--ink-900); }
.ac-vuoto p { color: var(--ink-600, #6a6a6a); font-size: 14px; margin: 0 0 16px; }
.ac-sugg { display: flex; flex-direction: column; gap: 8px; }
.ac-sugg-btn {
  border: 1px solid var(--border-strong); background: #fff; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; color: var(--ink-700, #3a3a3a);
  cursor: pointer; text-align: left;
}
.ac-sugg-btn:hover { border-color: var(--brand-600); color: var(--brand-600); }

/* --- bolle dei messaggi --- */
.ac-msg { max-width: 78%; border-radius: 14px; padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.ac-msg-txt p { margin: 0 0 8px; }
.ac-msg-txt p:last-child { margin-bottom: 0; }
.ac-msg.user {
  align-self: flex-end; background: var(--brand-600); color: #fff;
  border-bottom-right-radius: 4px;
}
.ac-msg.ai {
  align-self: flex-start; background: #fff; color: var(--ink-800);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.ac-msg-azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ac-msg-azioni button {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); background: var(--surface-2, #fafafa);
  border-radius: 6px; padding: 3px 8px; font-size: 11.5px;
  color: var(--ink-600, #6a6a6a); cursor: pointer;
}
.ac-msg-azioni button:hover { border-color: var(--brand-600); color: var(--brand-600); }
.ac-msg-azioni svg { width: 13px; height: 13px; }

/* menu "Apri con…": apre il documento prodotto nell'editor ArtCraft associato
   (Word -> WordCraft, PDF -> PdfCraft, Excel -> GridCraft) */
.ac-apri { position: relative; }
.ac-msg-azioni .ac-apri > summary {
  display: inline-flex; align-items: center; gap: 4px; list-style: none;
  border: 1px solid var(--border); background: var(--surface-2, #fafafa);
  border-radius: 6px; padding: 3px 8px; font-size: 11.5px;
  color: var(--ink-600, #6a6a6a); cursor: pointer;
}
.ac-msg-azioni .ac-apri > summary::-webkit-details-marker { display: none; }
.ac-msg-azioni .ac-apri[open] > summary { border-color: var(--brand-600); color: var(--brand-600); }
.ac-apri-menu {
  position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 6;
  display: flex; flex-direction: column; min-width: 220px; padding: 4px;
  background: #fff; border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}
.ac-apri-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  font: inherit; cursor: pointer;
  padding: 7px 9px; border-radius: 6px; font-size: 12px;
  color: var(--ink-700, #3a3a3a); white-space: nowrap;
}
.ac-apri-menu button + button { margin-top: 2px; }
.ac-apri-menu button:hover { background: var(--brand-100); color: var(--brand-700, #910011); }
.ac-apri-nota {
  max-width: 250px; margin-top: 4px; padding: 6px 9px 2px;
  border-top: 1px solid var(--border); font-size: 10.5px; line-height: 1.35;
  color: var(--ink-500, #7a7a7a); white-space: normal;
}

.ac-typing { display: inline-flex; gap: 4px; align-items: center; padding: 14px 16px; }
.ac-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400, #b5b5b5);
  animation: acBlink 1.2s infinite ease-in-out both;
}
.ac-typing i:nth-child(2) { animation-delay: .18s; }
.ac-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes acBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* --- allegato + casella di scrittura --- */
.ac-allegato {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px; padding: 8px 12px; border-radius: 8px;
  background: var(--brand-100); color: var(--brand-700, #910011); font-size: 13px;
}
.ac-allegato svg { flex: 0 0 auto; width: 15px; height: 15px; }
.ac-allegato .ac-allegato-x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: inherit; line-height: 0; padding: 2px;
}
.ac-foot {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.ac-foot textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 140px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 11px 12px; font-family: inherit; font-size: 14px; line-height: 1.4;
}
.ac-foot textarea:focus { outline: none; border-color: var(--brand-600); }
.ac-ico {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px;
  border: 1px solid var(--border-strong); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink-600, #6a6a6a);
}
.ac-ico:hover { border-color: var(--brand-600); color: var(--brand-600); }
.ac-ico svg { width: 18px; height: 18px; }
.ac-ico.ac-rec {
  border-color: var(--brand-600); background: var(--brand-600); color: #fff;
  animation: acRec 1.4s ease-in-out infinite;
}
@keyframes acRec { 50% { opacity: .55; } }
.ac-send {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px;
  border: 0; background: var(--brand-600); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ac-send:hover { background: var(--brand-700, #910011); }
.ac-send svg { width: 18px; height: 18px; }
/* tasto Stop: mentre l'assistente risponde il tasto invio si trasforma così */
.ac-send.ac-stop { background: var(--ink-700, #444); }
.ac-send.ac-stop:hover { background: var(--ink-800, #222); }

/* titoli, tabelle, elenchi e grafici nelle risposte dell'assistente */
.ac-msg.ai .ac-h { margin: 14px 0 6px; line-height: 1.3; font-weight: 700; }
.ac-msg.ai h3.ac-h { font-size: 16px; }
.ac-msg.ai h4.ac-h { font-size: 15px; }
.ac-msg.ai h5.ac-h { font-size: 14px; }
.ac-msg.ai h6.ac-h { font-size: 13px; color: var(--ink-600, #555); }
.ac-msg.ai .ac-tabella {
  width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px;
}
.ac-msg.ai .ac-tabella th,
.ac-msg.ai .ac-tabella td {
  border: 1px solid var(--border-strong); padding: 7px 9px; text-align: left; vertical-align: top;
}
.ac-msg.ai .ac-tabella th { background: #f4f5f7; font-weight: 700; }
.ac-msg.ai .ac-tabella tbody tr:nth-child(even) { background: #fafbfc; }
.ac-msg.ai .ac-ul { margin: 8px 0; padding-left: 20px; }
.ac-msg.ai .ac-ul li { margin: 3px 0; }
.ac-grafico {
  margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: #fff;
}
.ac-grafico-tit { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.ac-grafico-tela { position: relative; height: 260px; }

@media (max-width: 900px) {
  .ac-shell { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ac-side { border-right: 0; border-bottom: 1px solid var(--border); }
  .ac-storico { max-height: 160px; }
  .ac-body { height: 60vh; }
}

/* ---- Diario di bordo ---- */
.diario-stats {
  margin: 14px 16px 4px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: #fafbfc;
}
.diario-stats-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--text-soft); margin-bottom: 10px;
}
.diario-stats-head svg { width: 16px; height: 16px; }
.diario-stats-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.diario-stat {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; font-size: 12.5px;
}
.diario-stat-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.diario-stat-label { color: var(--text-soft); }
.diario-stat-value { font-weight: 700; }

/* il foglio d'agenda: righe orizzontali su cui si scrive direttamente.
   Lo zoom delle righe vale anche qui: riga di scrittura, testi e contrassegni
   crescono insieme (con un tetto, per non stravolgere il foglio). */
.diario-foglio {
  --df-zoom: min(var(--row-zoom, 1), 2);
  margin: 14px 16px;
  border: 1px solid #e6e0d2;
  border-radius: 12px;
  background: #fffdf7;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .07);
  overflow: hidden;
}
.diario-foglio-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding: 11px 16px 10px calc(88px * var(--df-zoom));
  background: linear-gradient(#fffef9, #f7f1e3);
  border-bottom: 2px solid #e6ddc8;
}
.diario-foglio-head .spacer { flex: 1; }
.diario-foglio-head .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.diario-foglio-head .btn svg { width: 14px; height: 14px; }
.diario-giorno-nome {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-600);
}
.diario-data { font-size: 15px; font-weight: 800; color: var(--text); }
.diario-foglio-count { font-size: 12px; color: var(--text-mute); }

.diario-righe { position: relative; padding-bottom: calc(6px * var(--df-zoom)); }
.diario-righe::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(74px * var(--df-zoom)); width: 1px;
  background: rgba(224, 96, 96, .32);
}
.diario-riga { display: flex; align-items: flex-start; }
.diario-gutter {
  width: calc(74px * var(--df-zoom)); flex: none; padding: 0 10px 0 4px; text-align: right;
  font-size: calc(12px * var(--df-zoom)); line-height: calc(32px * var(--df-zoom));
  color: var(--text-soft);
}
.diario-riga.tel .diario-ora { color: var(--blue); }
.diario-riga-body {
  flex: 1; min-width: 0; padding: 0 14px;
  font-size: calc(13.5px * var(--df-zoom)); line-height: calc(32px * var(--df-zoom));
  color: var(--text);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 calc(31px * var(--df-zoom)),
    rgba(120, 110, 90, .18) calc(31px * var(--df-zoom)) calc(32px * var(--df-zoom)));
}
.diario-riga-body::after { content: ''; display: block; clear: both; }
.diario-tags {
  float: right; display: inline-flex; align-items: center; gap: 6px;
  height: calc(32px * var(--df-zoom)); padding-left: 10px;
}
.diario-tags .icon-btn { width: calc(24px * var(--df-zoom)); height: calc(24px * var(--df-zoom)); }
.diario-tags .icon-btn svg { width: calc(14px * var(--df-zoom)); height: calc(14px * var(--df-zoom)); }
.diario-ora { font-size: calc(12px * var(--df-zoom)); font-weight: 700; color: var(--text-soft); }
.diario-tipo {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: calc(11.5px * var(--df-zoom)); font-weight: 600; color: var(--blue);
  background: #e8f1fd; padding: 2px calc(8px * var(--df-zoom)); border-radius: 999px;
  height: calc(20px * var(--df-zoom));
}
.diario-tipo svg { width: calc(12px * var(--df-zoom)); height: calc(12px * var(--df-zoom)); }
.diario-canale {
  font-size: calc(11px * var(--df-zoom)); font-weight: 700; color: #fff;
  padding: 2px calc(9px * var(--df-zoom)); border-radius: 999px;
  height: calc(20px * var(--df-zoom));
  display: inline-flex; align-items: center;
}
.diario-telefono {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: calc(12px * var(--df-zoom)); color: var(--text-soft); text-decoration: none;
}
.diario-telefono:hover { color: var(--accent-600); }
.diario-telefono svg { width: calc(12px * var(--df-zoom)); height: calc(12px * var(--df-zoom)); }
.diario-agente { font-size: calc(12px * var(--df-zoom)); color: var(--text-mute); }
.diario-testo { white-space: normal; }
.diario-foto {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0;
  clear: both;
}
.diario-foto a { display: inline-flex; }
.diario-foto img {
  width: calc(64px * var(--df-zoom)); height: calc(24px * var(--df-zoom));
  object-fit: cover;
  border: 1px solid #e2dccd; border-radius: 4px;
}

/* righe bianche per scrivere subito sul foglio */
.diario-scrivi { display: flex; align-items: flex-start; }
.diario-scrivi .diario-gutter {
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding-top: calc(4px * var(--df-zoom)); color: var(--accent-500);
}
.diario-scrivi .diario-gutter svg { width: 15px; height: 15px; }
.diario-scrivi-body {
  flex: 1; min-width: 0; padding: 0 14px;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 calc(31px * var(--df-zoom)),
    rgba(120, 110, 90, .18) calc(31px * var(--df-zoom)) calc(32px * var(--df-zoom)));
}
.diario-scrivi-testo {
  display: block; width: 100%; height: calc(64px * var(--df-zoom)); margin: 0; padding: 0;
  border: 0; background: transparent; resize: none; outline: none;
  font: inherit; font-size: calc(13.5px * var(--df-zoom));
  line-height: calc(32px * var(--df-zoom)); color: var(--text);
}
.diario-scrivi-testo::placeholder { color: #b3ab99; font-style: italic; }
.diario-scrivi-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: calc(6px * var(--df-zoom)) 0 calc(10px * var(--df-zoom)); background: #fffdf7;
  border-top: 1px dashed #e8e1d0;
}
.diario-scrivi-bar .spacer { flex: 1; }
.diario-scrivi-bar .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.diario-scrivi-bar .btn svg { width: 14px; height: 14px; }
.diario-chk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-soft);
}
.diario-chk input { margin: 0; }
.diario-quick-canale, .diario-quick-telefono {
  height: 28px; padding: 0 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 7px; background: #fff;
}
.diario-quick-telefono { width: 150px; }
.diario-attach {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 7px;
  background: #fff; cursor: pointer;
}
.diario-attach:hover { border-color: var(--accent-500); color: var(--accent-600); }
.diario-attach svg { width: 14px; height: 14px; }
.diario-quick-file { font-size: 11.5px; color: var(--text-mute); }

@media (max-width: 700px) {
  .diario-foglio-head { padding-left: calc(64px * var(--df-zoom)); }
  .diario-righe::before { left: calc(54px * var(--df-zoom)); }
  .diario-gutter { width: calc(54px * var(--df-zoom)); padding-right: 8px; }
  .diario-tags { float: none; height: auto; padding-left: 0; }
}

/* ---------------- TOUR FUNZIONALITÀ (guida in linea) ---------------- */

/* pulsante nella barra in alto: pulsa finché la guida non è stata aperta */
.guida-btn { color: var(--brand-600); }
.guida-btn.guida-pulse { animation: guidaPulse 1.8s ease-in-out infinite; }
@keyframes guidaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(170, 0, 20, .45); }
  50% { box-shadow: 0 0 0 7px rgba(170, 0, 20, 0); }
}

/* pannello a comparsa sotto il pulsante */
.guida-panel {
  position: fixed;
  top: calc(var(--topbar-h) + 10px);
  right: 18px;
  width: 392px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--topbar-h) - 26px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 22px 54px rgba(16, 24, 40, .22);
  overflow: hidden;
  z-index: 70;
}
.guida-panel[hidden] { display: none; }

.guida-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fff, #fbf7f8);
}
.guida-head-txt { display: flex; align-items: center; gap: 9px; }
.guida-head-txt svg { width: 20px; height: 20px; color: var(--brand-600); flex: 0 0 auto; }
.guida-head-txt strong { display: block; font-size: 14px; letter-spacing: -.2px; }
.guida-head-txt span { font-size: 11.5px; color: var(--text-mute); }
.guida-head .icon-btn { width: 30px; height: 30px; }
.guida-head .icon-btn svg { width: 15px; height: 15px; }

.guida-body { padding: 14px; overflow-y: auto; }

/* riquadro della sezione corrente */
.guida-ctx { border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; background: #fafcfd; }
.guida-ctx-top { display: flex; align-items: center; gap: 10px; }
.guida-ctx-ico {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: var(--accent-100); color: var(--accent-700);
  display: grid; place-items: center;
}
.guida-ctx-ico svg { width: 18px; height: 18px; }
.guida-ctx-top h3 { margin: 0; font-size: 14px; font-weight: 700; }
.guida-ctx-top span { font-size: 11.5px; color: var(--text-mute); }
.guida-ctx p { margin: 10px 0 8px; font-size: 12.8px; color: var(--text-soft); line-height: 1.5; }
.guida-punti { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.guida-punti li { font-size: 12.5px; color: var(--text); line-height: 1.45; }
.guida-punti li::marker { color: var(--accent-600); }

.guida-tour-start { width: 100%; justify-content: center; margin: 12px 0 10px; }

.guida-cerca { margin-bottom: 10px; }
.guida-cerca input {
  width: 100%; height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 9px;
  font: inherit; font-size: 13px; background: #fff;
}
.guida-cerca input:focus { outline: none; border-color: var(--accent-500); }

.guida-elenco { display: flex; flex-direction: column; gap: 12px; }
.guida-gruppo-t {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-mute); margin-bottom: 4px;
}
.guida-voce {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 9px; row-gap: 1px;
  align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  padding: 7px 9px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; font: inherit;
}
.guida-voce:hover { background: #f4f7f9; border-color: var(--border); }
.guida-voce.active { background: var(--accent-100); border-color: var(--logo-green-border); }
.guida-voce svg { grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--text-soft); }
.guida-voce.active svg { color: var(--accent-700); }
.guida-voce-t { font-size: 13px; font-weight: 600; color: var(--text); }
.guida-voce-p {
  font-size: 11.3px; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guida-vuoto { font-size: 12.5px; color: var(--text-mute); text-align: center; padding: 14px 0; }
.guida-nota {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 12px 0 0; font-size: 11.5px; color: var(--text-mute); line-height: 1.45;
}
.guida-nota svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }

/* riquadro del tour guidato */
.tour-card {
  position: fixed;
  left: 50%; bottom: 26px; transform: translateX(-50%);
  width: min(500px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .3);
  padding: 16px 18px 14px;
  z-index: 120;
  animation: tourUp .22s ease-out;
}
.tour-card[hidden] { display: none; }
@keyframes tourUp { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-600); background: rgba(170, 0, 20, .09);
  padding: 3px 9px; border-radius: 999px;
}
.tour-x {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--text-soft);
  display: grid; place-items: center; cursor: pointer;
}
.tour-x:hover { background: #f6f8f9; color: var(--text); }
.tour-x svg { width: 15px; height: 15px; }
.tour-sez {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--accent-700);
}
.tour-sez svg { width: 15px; height: 15px; }
.tour-card h3 { margin: 6px 0 6px; font-size: 16px; letter-spacing: -.2px; }
.tour-card p { margin: 0; font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.tour-punti { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.tour-punti li { font-size: 12.5px; color: var(--text); line-height: 1.45; }
.tour-punti li::marker { color: var(--accent-600); }
.tour-azioni { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-azioni .spacer { flex: 1; }

/* voce di menu evidenziata dal tour */
.tour-hl {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: 9px;
  animation: tourPulse 1.4s ease-in-out infinite;
}
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 204, 34, .5); }
  50% { box-shadow: 0 0 0 6px rgba(10, 204, 34, 0); }
}

@media (max-width: 760px) {
  .guida-panel { right: 10px; left: 10px; width: auto; }
}

/* ---------------- pagina Backup ---------------- */

/* riepilogo del ponte locale: stato, ricorrenza e ultimo backup */
.backup-riepilogo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-size: 12.5px;
}
.backup-riepilogo .badge { flex: 0 0 auto; }

/* barra di avanzamento del backup */
.backup-barra {
  height: 10px; border-radius: 6px; background: #eef1f4; overflow: hidden;
}
.backup-barra span {
  display: block; height: 100%; background: var(--accent-500);
  border-radius: 6px; transition: width .3s ease;
}
.backup-fase { margin-top: 8px; font-size: 12.5px; color: var(--text-soft); }

/* registro dei passaggi del backup */
.backup-log {
  margin: 10px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto;
  background: #0f1729; color: #cfe3d6; border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap;
}

/* elenco dei backup salvati nella cartella */
.backup-elenco { display: flex; flex-direction: column; gap: 6px; }
.backup-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff;
}
.backup-nome {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text); min-width: 0;
}
.backup-nome svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-soft); }
.backup-riga .muted { font-size: 12px; white-space: nowrap; }

/* aree riservate dei portali (Impostazioni AI): una scheda per portale */
.portale-credenziali {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px; background: #fff;
}
.portale-credenziali:last-child { margin-bottom: 0; }
.portale-credenziali .badge { margin-left: 8px; }

/* pannello "Compilazione assistita sul portale" nella scheda immobile */
.compila-sel {
  min-width: 220px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; background: #fff; color: var(--text);
}
.compila-log {
  margin: 12px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto;
  background: #0f1729; color: #cfe3d6; border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap;
}
.compila-esito {
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 12.5px; color: var(--text); white-space: pre-wrap;
}

/* ------------------------------------------------------------
   Simulatore di redditività affitti (sezione Attività)
   ------------------------------------------------------------ */

/* camere e posti letto: una riga per camera, con i campi affiancati */
.sim-camere { display: flex; flex-direction: column; gap: 10px; }
.sim-camera {
  display: grid;
  grid-template-columns: 1.2fr .7fr .6fr 1.1fr 1fr 1fr 34px;
  gap: 10px; align-items: end;
  padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
}
.sim-camera .field { margin: 0; }
.sim-camera .field label { font-size: 11.5px; }
.sim-camera-del {
  height: 34px; padding: 0; justify-content: center;
  color: var(--red); border-color: var(--border-strong); background: #fff;
}
.sim-camera-del:hover { background: var(--red-bg); }

/* nota di congruenza sotto il canone della camera: verde se entro il massimo
   calcolato con le formule dell'attestazione di rispondenza, rossa se lo supera */
.sim-congruita {
  margin-top: 5px; padding: 3px 7px; border-radius: 6px;
  font-size: 11px; font-weight: 600; line-height: 1.3;
  background: #f4f5f4; color: var(--text-mute);
}
.sim-congruita.ok {
  background: var(--logo-green-tint); color: var(--accent-700);
  border: 1px solid var(--logo-green-border);
}
.sim-congruita.no {
  background: var(--red-bg); color: var(--red); border: 1px solid #f0c0b8;
}

/* campi del simulatore in sola lettura (valori calcolati) */
.sim-ro {
  background: #f4f5f4; color: var(--text-soft); cursor: default;
}

/* casella di spunta del simulatore (es. "Immobile arredato") */
.sim-chk {
  display: inline-flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer;
}
.sim-chk input { width: auto; margin: 0; }

/* riepilogo del calcolo: una riga per voce, in positivo o in negativo */
.sim-rows {
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.sim-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 12px; font-size: 13px; border-top: 1px solid var(--border);
}
.sim-row:first-child { border-top: 0; }
.sim-row .k { color: var(--text-soft); }
.sim-row .v { font-weight: 700; white-space: nowrap; color: var(--text); }
.sim-row.pos .v { color: var(--accent-700); }
.sim-row.neg .v { color: var(--red); }
.sim-row.info { background: #fafafa; }
.sim-row.info .k { color: var(--text-mute); font-size: 12.5px; }
.sim-row.info .v { font-weight: 600; color: var(--text-soft); font-size: 12.5px; }

/* il numero grande del rendimento netto annuo */
.sim-esito-card { border-color: var(--border-strong); }
.sim-risultato {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-radius: var(--radius-sm); background: var(--logo-green-tint);
  border: 1px solid var(--logo-green-border);
}
.sim-risultato-lab {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-soft); font-weight: 700;
}
.sim-esito { font-size: 30px; font-weight: 800; line-height: 1.15; }
.sim-esito.positivo { color: var(--accent-700); }
.sim-esito.negativo { color: var(--red); }
.sim-risultato-mes { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }

/* note metodologiche sotto il riepilogo */
.sim-note {
  margin: 0; padding-left: 18px; color: var(--text-mute);
  font-size: 11.5px; line-height: 1.55;
}
.sim-note li { margin-bottom: 4px; }

/* barra di stampa del resoconto del simulatore */
.sim-print-bar { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin: 4px 0 18px; flex-wrap: wrap; }
.sim-print-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.sim-in-uso { margin-right: auto; color: var(--text-mute); font-size: 13px; }

/* archivio delle simulazioni salvate del simulatore affitti */
.sim-archivio { display: flex; flex-direction: column; gap: 8px; }
.sim-riga {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.sim-riga-attiva { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.sim-riga-info { flex: 1; min-width: 0; }
.sim-riga-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-riga-sub { color: var(--text-mute); font-size: 12px; }
.sim-riga .btn { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.sim-chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--primary);
}
.sim-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--text-mute); background: var(--surface-2, rgba(0,0,0,.06));
}

/* tabelle editabili "Accordi territoriali e IMU" (Impostazioni agenzia):
   intestazione e righe allineate sulla stessa griglia */
.sim-tab-field > label { display: block; margin-bottom: 6px; }
.sim-tab-head,
.sim-tab-row {
  display: grid; gap: 8px; align-items: center;
}
.sim-tab-head-accordi, .sim-tab-row-accordi { grid-template-columns: 1fr 1.1fr .7fr 1.5fr .7fr .9fr .7fr .7fr auto; }
.sim-tab-head-aliquote, .sim-tab-row-aliquote { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; }
.sim-tab-head {
  padding: 0 4px 4px; color: var(--text-mute);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.sim-tab-rows { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.sim-tab-row input, .sim-tab-row select { min-width: 0; width: 100%; }
.sim-tab-del { flex: none; padding: 6px 10px; }
/* strumenti sotto la tabella accordi: aggiungi riga + import da PDF */
.sim-tab-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.sim-tab-tools .btn { display: inline-flex; align-items: center; gap: 6px; }
.sim-tab-import-msg { flex: 1 1 220px; }
@media (max-width: 720px) {
  .sim-tab-head { display: none; }
  .sim-tab-head-accordi, .sim-tab-row-accordi,
  .sim-tab-head-aliquote, .sim-tab-row-aliquote { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .sim-camera { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sim-camera { grid-template-columns: 1fr; }
}

/* --- Posta elettronica: webmail (cartelle, elenco, lettura, scrittura) --- */
.posta-griglia {
  display: grid;
  /* prima colonna un po' più larga: i nomi lunghi delle cartelle
     (es. "INBOX.INBOX.recupero") non devono uscire dal pannello */
  grid-template-columns: 232px minmax(320px, 460px) minmax(0, 1fr);
  gap: 14px;
  /* i tre pannelli (cartelle, elenco, anteprima) hanno la stessa altezza:
     l'elenco impostato su 10 messaggi per pagina fa da riferimento */
  align-items: stretch;
}
.posta-cartelle {
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  overflow: auto;
}
.posta-cartella {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-width: 0; padding: 8px 10px;
  border: 0; border-radius: 8px;
  background: transparent; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
/* il nome della cartella va a capo invece di debordare dal pannello */
.posta-cartella span { min-width: 0; overflow-wrap: anywhere; }
.posta-cartella svg { width: 16px; height: 16px; flex: none; color: var(--text-mute); }
.posta-cartella:hover { background: rgba(0, 0, 0, .04); }
.posta-cartella.attiva {
  background: var(--brand-100);
  color: var(--brand-600);
  font-weight: 600;
}
.posta-cartella.attiva svg { color: inherit; }

.posta-lista .card-head .posta-contatore { margin-left: auto; font-size: 12px; }
/* elenco e anteprima riempiono l'altezza del pannello e scorrono all'interno,
   restando allineati al pannello delle cartelle */
.posta-lista, .posta-lettura { display: flex; flex-direction: column; }
.posta-lista .card-body, .posta-lettura .card-body { flex: 1; min-height: 0; overflow: auto; }
.posta-ricerca {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.posta-ricerca svg { width: 16px; height: 16px; flex: none; color: var(--text-mute); }
.posta-ricerca input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; padding: 9px 0;
  background: transparent; font: inherit;
}

.posta-elenco { display: flex; flex-direction: column; }
.posta-riga {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--border);
}
.posta-riga:last-child { border-bottom: 0; }
.posta-riga:hover { background: rgba(0, 0, 0, .035); }
.posta-apri {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) minmax(110px, 140px);
  gap: 12px; align-items: center;
  flex: 1; min-width: 0;
  padding: 10px 8px;
  border: 0; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.posta-mitt, .posta-ogg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posta-riga.nuova .posta-ogg { font-weight: 600; }
.posta-riga.nuova .posta-mitt::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--brand-600);
  vertical-align: middle;
}
.posta-data { text-align: right; color: var(--text-mute); font-size: 12px; white-space: nowrap; }
/* casella "da leggere": spuntata finché il messaggio non è stato letto */
.posta-da-leggere {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 10px;
  font-size: 11.5px; color: var(--text-mute);
  cursor: pointer; user-select: none;
}
.posta-da-leggere input {
  flex: none;
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--brand-600); cursor: pointer;
}
.posta-da-leggere:hover { color: var(--text); }

/* barra di selezione multipla sopra l'elenco dei messaggi */
.posta-selezione {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.posta-sel-tutti {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-mute);
  cursor: pointer; user-select: none;
}
.posta-sel-tutti input {
  flex: none; width: 16px; height: 16px; margin: 0;
  accent-color: var(--brand-600); cursor: pointer;
}
.posta-sel-tutti:hover { color: var(--text); }
.posta-sel-conteggio { flex: 1; font-size: 12px; color: var(--text-mute); }

/* casella di selezione del singolo messaggio (azioni multiple) */
.posta-scelta-riga {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 0 2px 0 10px;
  cursor: pointer;
}
.posta-scelta-riga input {
  flex: none; width: 16px; height: 16px; margin: 0;
  accent-color: var(--brand-600); cursor: pointer;
}
.posta-riga.scelta { background: var(--brand-100); }
.posta-riga.scelta:hover { background: var(--brand-100); }

.posta-comandi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.posta-oggetto-lettura { margin-top: 4px; font-size: 14.5px; font-weight: 650; }

.posta-avviso {
  margin-top: 10px; padding: 9px 12px;
  border: 1px solid var(--amber); border-radius: 8px;
  background: var(--amber-bg);
  font-size: 12.5px;
}
.posta-avviso[hidden] { display: none; }

.posta-stato { font-size: 12.5px; color: var(--text-mute); }
.posta-stato.errore { color: var(--red); }
.posta-stato.ok { color: var(--accent-600); }

/* selettore della casella da cui leggere e scrivere */
.posta-scelta {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.posta-scelta > span {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-mute); text-transform: uppercase;
}
.posta-scelta select {
  max-width: 240px;
  border: 0; outline: 0; padding: 6px 0;
  background: transparent; font: inherit; font-size: 13.5px; color: inherit;
  cursor: pointer;
}
/* ordine dell'elenco: si sceglie accanto alla ricerca */
.posta-ordine {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.posta-ordine > span {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-mute); text-transform: uppercase;
}
.posta-ordine select {
  max-width: 170px;
  border: 0; outline: 0; padding: 8px 0;
  background: transparent; font: inherit; font-size: 12.5px; color: inherit;
  cursor: pointer;
}

/* barra di paginazione sotto l'elenco: intervallo, numeri di pagina, per-pagina */
.posta-paginazione {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.posta-pag-info { flex: 1; font-size: 12px; color: var(--text-mute); }
.posta-pag-nav { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.posta-pag-num, .posta-pag-freccia {
  min-width: 30px; height: 30px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; font-size: 12.5px; color: inherit;
  cursor: pointer;
}
.posta-pag-freccia:hover {
  border-color: var(--brand-600); color: var(--brand-600);
}
/* i numeri di pagina sono rossi con la cifra bianca */
.posta-pag-num {
  border-color: var(--brand-500); background: var(--brand-500); color: #fff;
  font-weight: 600;
}
.posta-pag-num:hover { border-color: var(--brand-600); background: var(--brand-600); color: #fff; }
.posta-pag-num.attiva {
  border-color: var(--brand-800); background: var(--brand-800);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45);
  font-weight: 700; cursor: default;
}
.posta-pag-num.attiva:hover { border-color: var(--brand-800); background: var(--brand-800); color: #fff; }
.posta-pag-freccia:disabled { opacity: .45; cursor: default; }
.posta-pag-freccia:disabled:hover { border-color: var(--border); color: inherit; }
.posta-pag-punti { padding: 0 2px; color: var(--text-mute); user-select: none; }
/* il selettore "Per pagina" si stacca dal gruppo dei numeri e si allinea in altezza */
.posta-perpagina {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 26px;
  font-size: 12px; color: var(--text-mute);
}
.posta-perpagina select {
  height: 30px; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 8px; background: var(--surface); font: inherit; font-size: 12.5px;
  color: inherit; cursor: pointer;
}
/* finestra di lettura vuota: mostra la scritta richiesta invece di un vuoto */
.posta-vuota { text-align: center; padding: 26px 0; letter-spacing: .04em; }

.posta-intestazioni {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.posta-corpo {
  max-height: 520px;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  word-break: break-word;
}
.posta-messaggio-corpo { white-space: pre-wrap; }
.posta-allegati { display: flex; flex-wrap: wrap; gap: 8px; }
.posta-allegato { display: inline-flex; align-items: center; gap: 6px; }
.posta-allegato-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
}
.posta-allegato-chip svg { width: 14px; height: 14px; }
.posta-allegato-chip .icon-btn { width: 22px; height: 22px; }

/* tablet: la lettura passa sotto cartelle + elenco */
@media (max-width: 1100px) {
  .posta-griglia { grid-template-columns: 210px minmax(0, 1fr); }
  .posta-lettura { grid-column: 1 / -1; }
}
/* smartphone: una colonna sola, cartelle in orizzontale */
@media (max-width: 700px) {
  .posta-griglia { grid-template-columns: minmax(0, 1fr); }
  .posta-cartelle {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 6px;
  }
  .posta-cartella { width: auto; white-space: nowrap; padding: 7px 11px; }
  /* il selettore della casella occupa la riga intera */
  .posta-scelta { width: 100%; }
  .posta-scelta select { flex: 1; max-width: none; font-size: 16px; }
  /* ricerca e ordine vanno a capo; "da leggere" resta la sola casella,
     per non rubare spazio alle righe */
  .posta-ricerca { flex-wrap: wrap; padding-bottom: 6px; }
  .posta-ordine {
    width: 100%; padding: 4px 0 0; border-left: 0;
    border-top: 1px solid var(--border);
  }
  .posta-ordine select { flex: 1; max-width: none; font-size: 16px; }
  .posta-da-leggere { margin-right: 6px; }
  .posta-da-leggere span { display: none; }
  /* la barra di selezione va a capo: "seleziona tutti" + azione non ci stanno */
  .posta-selezione { flex-wrap: wrap; }
  .posta-sel-conteggio { flex: 1 0 100%; order: 3; }
  /* paginazione: intervallo su riga intera, resto a capo */
  .posta-pag-info { flex: 1 0 100%; }
  .posta-perpagina select { font-size: 16px; }
  .posta-apri { grid-template-columns: 1fr auto; }
  .posta-ogg { grid-column: 1 / -1; order: 3; }
  .posta-corpo { max-height: none; }
}

/* ============================================================
   SMARTPHONE — resa delle pagine del gestionale
   menu laterale a scomparsa, intestazioni e filtri che vanno a
   capo, form a una colonna, campi alti per il tocco (16px, sotto
   questa misura iOS ingrandisce da solo la pagina) e tabelle
   scorrevoli con la prima colonna ferma.
   ============================================================ */

/* il pulsante "☰" e il velo del menu servono solo su schermi stretti */
.nav-toggle { display: none; }
.nav-overlay { display: none; }

@media (max-width: 700px) {
  /* --- menu laterale a scomparsa --- */
  .nav-toggle { display: grid; }
  .navbar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    width: 268px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 60;
    box-shadow: 0 0 38px rgba(0, 0, 0, .35);
  }
  .layout.nav-aperto .navbar { transform: none; }
  .nav-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(16, 24, 40, .5);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease; z-index: 55;
  }
  .layout.nav-aperto .nav-overlay { opacity: 1; pointer-events: auto; }
  /* le voci tornano con l'etichetta (la barra di sole icone resta ai tablet) */
  .navbar .brand { padding: 14px 16px; }
  .navbar .brand-logo { height: 30px; }
  .navbar .nav { padding: 12px; }
  .navbar .nav-group-title { display: block; }
  .navbar .nav-item { justify-content: flex-start; padding: 11px 12px; font-size: 14.5px; }
  .navbar .nav-item > span:not(.nav-count) { display: inline; }
  .navbar .nav-item .nav-count {
    position: static; margin-left: auto;
    padding: 1px 7px; min-width: 20px; font-size: 10.5px;
  }

  /* --- barra in alto e intestazioni di pagina --- */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-title { flex: 1 1 auto; min-width: 0; }
  .topbar h1 { font-size: 15px; white-space: normal; }
  .topbar .crumbs { display: none; }
  .topbar .user-chip .who { display: none; }
  .guida-panel { top: calc(var(--topbar-h) + 8px); right: 8px; left: 8px; width: auto; }
  .card-head { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }

  /* --- contenuti e barre dei filtri --- */
  .content { padding: 12px; }
  .card-body { padding: 12px; }
  .toolbar { padding: 10px 12px; gap: 8px; }
  .toolbar .field { flex: 1 1 150px; }
  .week-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .week-head .title { flex: 1 1 auto; min-width: 0; margin: 0; }

  /* --- form e modali --- */
  .form-grid, .form-grid.grid-3, .form-grid.grid-4,
  .modal-body, .grid-2, .grid-3, .grid-4, .grid-6, .grid-2-1 { grid-template-columns: 1fr; }
  .modal-overlay { padding: 0; }
  .modal { max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .modal-head { padding: 12px 14px; }
  .modal-body { padding: 14px; gap: 12px; }
  .modal-foot { padding: 12px 14px; flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }

  /* campi e pulsanti più comodi da toccare */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea { font-size: 16px; min-height: 42px; }
  .btn { min-height: 40px; }
  .icon-btn { width: 40px; height: 40px; }

  /* --- tabelle: scorrimento orizzontale fluido e prima colonna ferma --- */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  table.data { font-size: 12.5px; }
  table.data thead th, table.data tbody td { padding: 9px 10px; }
  table.data thead th:first-child, table.data tbody td:first-child {
    position: sticky; left: 0; background: #fff; z-index: 2;
  }
  table.data thead th:first-child { background: #f7f9fa; z-index: 3; }
}



/* ============================================================
   TOUR VIRTUALE — campo nel form immobile (gestionale)
   ============================================================ */

/* planimetria caricata: anteprima + azioni */
.tour-piano {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg);
}
.tour-piano-thumb {
  flex: none; width: 132px; height: 96px; border-radius: var(--radius-sm);
  overflow: hidden; background: #eceff1; border: 1px solid var(--border);
}
.tour-piano-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tour-piano-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tour-piano-info .docfile-nome { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
.tour-piano-info .docfile-nome svg { width: 15px; height: 15px; }

/* interruttore delle didascalie */
.tour-didascalie { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-soft); cursor: pointer; }

/* elenco delle stanze del tour */
.tour-stanze { display: flex; flex-direction: column; gap: 8px; }
.tour-stanze-vuoto { font-size: 12.5px; color: var(--text-mute); padding: 8px 2px; }
.tour-stanza {
  display: grid; grid-template-columns: 26px 1fr auto 1fr auto;
  align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.tour-stanza-num {
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--accent-600);
}
.tour-stanza-nome, .tour-stanza-pano {
  min-width: 0; padding: 6px 9px; font-size: 12.5px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tour-stanza-pano { font-size: 12px; }
.tour-stanza-nome:focus, .tour-stanza-pano:focus { outline: none; border-color: var(--logo-green-border); }
.tour-stanza-pos { display: inline-flex; color: var(--text-mute); }
.tour-stanza-pos svg { width: 15px; height: 15px; }
.tour-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* editor delle posizioni: segnaposto trascinabili sulla planimetria */
.tour-editor-main { flex-direction: row; }
.tour-editor-stage { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px; background: #eceff1; }
.tour-editor-canvas { position: relative; display: inline-block; line-height: 0; box-shadow: var(--shadow); background: #fff; }
.tour-editor-canvas img { display: block; max-width: 100%; height: auto; user-select: none; }
.tour-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-600); background: #fff;
  border: 2px solid var(--accent-600); box-shadow: var(--shadow);
  cursor: grab; padding: 0; touch-action: none;
}
.tour-pin svg { display: block; width: 16px; height: 16px; }
.tour-pin:active { cursor: grabbing; }
.tour-editor-lista { flex: none; width: 300px; overflow: auto; border-left: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tour-editor-riga { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; }
.tour-editor-riga input {
  min-width: 0; padding: 6px 9px; font-size: 12.5px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tour-editor-riga input:focus { outline: none; border-color: var(--logo-green-border); }

/* ============================================================
   TOUR VIRTUALE — scheda immobile pubblica
   ============================================================ */

.vc-tour { display: flex; flex-direction: column; gap: 14px; }
/* la planimetria non è visibile subito: si apre su richiesta col pulsante */
.vc-tour-box { display: flex; flex-direction: column; gap: 14px; }
.vc-tour-box[hidden] { display: none; }
/* pulsante verde che apre/nasconde la planimetria */
.vc-tour-apri {
  align-self: flex-start;
  color: #fff; background: var(--logo-green); border-color: var(--logo-green);
  font-weight: 600;
}
.vc-tour-apri:hover { background: var(--logo-green-dark); border-color: var(--logo-green-dark); color: #fff; }
/* sfondo verdastro intorno alla planimetria */
.vc-tour-stage {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  background: var(--logo-green-tint);
  border: 1px solid var(--logo-green-border);
  border-radius: var(--radius);
}
.vc-tour-plan {
  position: relative; display: inline-block; align-self: center;
  max-width: 100%; line-height: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow);
}
.vc-tour-plan > img { display: block; max-width: 100%; height: auto; border-radius: calc(var(--radius) - 1px); }
/* punto (senza dimensioni) che ancora il segnaposto della stanza e la sua
   anteprima foto, così i due restano allineati al centro del punto stesso */
.vc-tour-punto { position: absolute; width: 0; height: 0; }
.vc-tour-pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-600); background: #fff;
  border: 2px solid var(--accent-600);
  box-shadow: var(--shadow); cursor: pointer; padding: 0;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.vc-tour-pin svg { display: block; width: 18px; height: 18px; }
.vc-tour-pin:hover { transform: translate(-50%, -50%) scale(1.12); }
.vc-tour-pin.active { color: var(--accent-700); border-color: var(--accent-700); background: var(--logo-green-soft); transform: translate(-50%, -50%) scale(1.15); }
/* anteprima con le foto della stanza: compare al passaggio del mouse sul
   segnaposto, senza cliccare. Il clic sul segnaposto continua ad aprire il
   pannello con la galleria completa. */
.vc-tour-pop {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, calc(-100% - 14px));
  display: none; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px; padding: 7px; max-width: 92vw;
  border-radius: 10px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22); z-index: 30; line-height: 0;
  pointer-events: none;
}
.vc-tour-pop::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: #fff; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.vc-tour-punto:hover .vc-tour-pop,
.vc-tour-pin:focus-visible + .vc-tour-pop { display: inline-flex; pointer-events: auto; }
.vc-tour-popshot {
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  width: 152px; height: 114px; border-radius: 8px; overflow: hidden; display: block;
}
.vc-tour-popshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-tour-popshot:hover img { opacity: .85; }
.vc-tour-pop-piu {
  position: absolute; right: 10px; bottom: 11px;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; line-height: 1.6;
}
/* sui dispositivi touch non c'è hover: l'anteprima resta al clic (pannello) */
@media (hover: none) {
  .vc-tour-pop { display: none !important; }
}
.vc-tour-suggerimento { font-size: 12.5px; color: var(--text-mute); text-align: center; }

.vc-tour-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.vc-tour-panel[hidden] { display: none; }
.vc-tour-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vc-tour-panel-head strong { font-size: 15px; }
.vc-tour-chiudi {
  border: none; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text-mute); padding: 0 4px;
}
.vc-tour-chiudi:hover { color: var(--text); }
.vc-tour-pano-btn { align-self: flex-start; }
.vc-tour-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vc-tour-shot {
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
  padding: 0; cursor: pointer; background: #eceff1; aspect-ratio: 4 / 3;
}
.vc-tour-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-tour-vuoto { font-size: 12.5px; color: var(--text-mute); }

/* vizualizzatore del panorama a 360° */
.tour360 {
  position: fixed; inset: 0; z-index: 6000;
  background: rgba(10, 14, 18, .92);
  display: none; align-items: center; justify-content: center;
}
.tour360.open { display: flex; }
.tour360-stage { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; cursor: grab; touch-action: none; }
.tour360-stage:active { cursor: grabbing; }
.tour360-img { height: 80vh; max-height: 80vh; width: auto; user-select: none; will-change: transform; }
.tour360-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 12.5px; opacity: .85; pointer-events: none;
}
body.tour360-open { overflow: hidden; }

@media (max-width: 700px) {
  .tour-stanza { grid-template-columns: 22px 1fr auto; grid-auto-flow: row; }
  .tour-stanza-pano { grid-column: 2 / -1; }
  .tour-piano { flex-direction: column; align-items: stretch; }
  .tour-piano-thumb { width: 100%; height: 140px; }
  .tour-editor-lista { display: none; }
  .tour360-img { height: 60vh; max-height: 60vh; }
}