/* Housia.ar — estilos compartidos (tema + componentes + responsive).
 *
 * ▌ÚNICA fuente de verdad del CSS de la app. ▐
 * El navegador pide /assets/theme.css; el server lo COMPONE en runtime
 * concatenando estos 21 partials (ver src/lib/render_theme_css.js). NO existe
 * un theme.css monolítico en disco — si lo encontrás, está mal y hay que
 * borrarlo. Editá SIEMPRE el partial correspondiente:
 *   - base / tokens dark-light   → 00-base.css
 *   - modals / forms / chips     → 01-modal-forms.css
 *   - ficha/wizard de propiedad  → 02-property-form.css
 *   - asistente AI / templates   → 03-templates-ai.css
 *   - cropper / amenities / tasks→ 04-cropper-amenities.css
 *   - shell / sidebar / topbar   → 05-shell.css
 *   - content / cards / KPIs     → 06-content-cards.css
 *   - breakpoints / responsive   → 07-responsive.css
 *   - vista mapa                 → 08-mapa.css
 *   - identidad inmoba + tour    → 09-identity-tour.css
 *   - amigas / red v1            → 10-amigas-red.css
 *   - orquestador / FAB asist.   → 11-orquestador.css
 *   - vista propiedades          → 12-propiedades.css
 *   - notif drawer + red v2      → 13-notif-red-v2.css
 *   - Mi Web + Mercado/Tasar     → 14-mi-web-mercado.css
 *   - EasyMDE override           → 15-md-editor.css
 *   - reservas (calendario, fees)→ 16-reservas.css
 *   - búsqueda global            → 17-busqueda.css
 *   - wise-picker reusable       → 18-wise-picker.css
 *   - marketing (chips, sched.)  → 19-marketing.css
 *   - phone-input (data-phone-intl)→ 20-phone-input.css
 *
 * El orden importa para la cascada — agregar un partial nuevo significa
 * actualizar la lista PARTS en src/lib/render_theme_css.js.
 */

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

/* Dark theme (default) — paleta "Housia IA": negro azulado profundo con
   acentos de turquesa eléctrico. Las superficies son sólidas y escalonadas
   por luminosidad, bordes finos pero visibles (#223246) y los acentos
   teal/teal-l funcionan como "IA / conexión / datos". */
:root {
  /* Superficies — negro azulado profundo → navy → navy elevado */
  --midnight: #06111B;   /* fondo base de la app */
  --navy:     #0D1724;   /* superficie nivel 1 — cards, kpi, inputs */
  --navy-l:   #10263B;   /* superficie nivel 2 — modals, popovers, hover elevado */

  /* Acentos — turquesa eléctrico (IA) + aqua brillante para hover/glow */
  --teal:     #17C6B5;
  --teal-l:   #35E6D4;
  --teal-dim: rgba(23,198,181,0.13);
  --sand:     #17C6B5;
  --sand-dim: rgba(23,198,181,0.13);
  --cream:    #F5F0E8;
  --green:    #3FB950;
  --green-dim:rgba(63,185,80,0.13);
  --red:      #F0655A;
  --red-dim:  rgba(240,101,90,0.13);
  --purple:   #A878F5;
  --purple-dim:rgba(168,120,245,0.13);

  /* Texto — blanco humo / gris frío / dim azulado */
  --text:     #F5F7FA;
  --muted:    #9AA7B5;
  --dim:      #6A7686;

  --border:   #223246;
  --card:     #0D1724;
  --card-h:   #10263B;
  --input-bg: #0B1D2E;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.45);
  --hover-tint: rgba(53,230,212,0.06);
  --pill-grey-bg: rgba(154,167,181,0.10);

  /* "Glass" — conservamos los nombres de variable porque los usan ~30 componentes,
     pero ahora son superficies SÓLIDAS (blur 0). Linear no usa glassmorphism. */
  --glass-bg:         #0D1724;
  --glass-bg-strong:  #10263B;
  --glass-bg-elev:    #10263B;
  --glass-border:     #223246;
  --glass-highlight:  rgba(255,255,255,0.03);
  --glass-blur:       0px;
  --glass-sat:        100%;
  --glass-shadow:     0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.25);
  --glass-shadow-lg:  0 16px 50px rgba(0,0,0,0.55);
  /* Sidebar — navy profundo, apenas distinto del fondo */
  --sidebar-bg:       #0D1724;
  /* Orbes apagados — fondo plano */
  --orb-1:            transparent;
  --orb-2:            transparent;
  --orb-3:            transparent;

  --sidebar-w: 210px;
  --topbar-h: 64px;
  --topbar-h-mobile: 56px;
}

/* Light theme — mismo sistema: superficies sólidas, sin glass ni orbes.
   Fondo gris muy claro neutro, cards blancas, bordes finos. */
:root[data-theme="light"] {
  --midnight: #F6F7F8;   /* fondo base */
  --navy:     #FFFFFF;   /* superficie nivel 1 — cards */
  --navy-l:   #FFFFFF;   /* superficie nivel 2 — modals */
  --teal:     #1F8079;
  --teal-l:   #16857B;
  --teal-dim: rgba(31,128,121,0.10);
  --sand:     #1F8079;
  --sand-dim: rgba(31,128,121,0.13);
  --cream:    #F5F0E8;
  --green:    #1A7F3C;
  --green-dim:rgba(26,127,60,0.11);
  --red:      #D14438;
  --red-dim:  rgba(209,68,56,0.10);
  --purple:   #6D44D9;
  --purple-dim:rgba(109,68,217,0.10);
  --text:     #1A1D24;
  --muted:    #5E646E;
  --dim:      #8A909A;
  --border:   rgba(20,23,28,0.10);
  --card:     #FFFFFF;
  --card-h:   #F2F3F5;
  --input-bg: #FFFFFF;
  --shadow-card: 0 1px 2px rgba(20,23,28,0.06);
  --hover-tint: rgba(20,23,28,0.045);
  --pill-grey-bg: rgba(20,23,28,0.06);

  --glass-bg:         #FFFFFF;
  --glass-bg-strong:  #F2F3F5;
  --glass-bg-elev:    #FFFFFF;
  --glass-border:     rgba(20,23,28,0.10);
  --glass-highlight:  rgba(255,255,255,0);
  --glass-blur:       0px;
  --glass-sat:        100%;
  --glass-shadow:     0 1px 2px rgba(20,23,28,0.06), 0 4px 14px rgba(20,23,28,0.05);
  --glass-shadow-lg:  0 16px 50px rgba(20,23,28,0.14);
  --sidebar-bg:       #FFFFFF;
  --orb-1:            transparent;
  --orb-2:            transparent;
  --orb-3:            transparent;
}

/* Logo Housia — el archivo physical logo.png trae la marca en BLANCO (pensado
   para el tema oscuro por default: topbar, login con bg --midnight). En light
   theme el bg se aclara y la H blanca desaparecería, así que swapeamos vía
   `content: url()` al mark negro (mark-light.png). Misma técnica para los
   lockups anchos del landing (.brand-lockup). */
:root[data-theme="light"] img[src*="/assets/img/logo.png"] {
  content: url('/assets/img/brand/mark-light.png');
}
.brand-lockup { content: url('/assets/img/brand/lockup-dark.png'); }
:root[data-theme="light"] .brand-lockup { content: url('/assets/img/brand/lockup-light.png'); }

/* Transición suave al alternar tema. Excluimos transforms para no romper animaciones existentes. */
html {
  color-scheme: dark;
  /* Bloqueamos el text-size-adjust que redimensiona texto al rotar el device
     y rompe layouts. NO usamos `touch-action: manipulation` global porque en
     iOS Safari 18.x desactiva el navigate nativo de algunos <a href> en
     contextos específicos (reportado por usuarios en login/signup). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
:root[data-theme="light"] { color-scheme: light; }
body, .card, .modal, .feat-card, .step, input, select, textarea, button {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ── Switch reutilizable (toggle on/off al estilo iOS) ────────────────────── */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 22px; margin: 0;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 999px; position: relative; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.switch input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.18s ease, background 0.18s ease;
}
.switch input[type="checkbox"]:checked { background: var(--teal); border-color: var(--teal); }
.switch input[type="checkbox"]:checked::after { transform: translateX(18px); background: #fff; }
.switch input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
.switch-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.switch input[type="checkbox"]:checked ~ .switch-label { color: var(--teal-l, var(--teal)); }

/* ── Orbes de color difuminados detrás de todo (estilo macOS Sonoma) ─────────
   Fixed al viewport, sin pointer events, en z-index negativo respecto al body.
   El backdrop-filter de las cards/topbar/modales recoge estos colores y los
   blurrea, dando el efecto de vidrio teñido. */
body::before {
  content: '';
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%,   var(--orb-1) 0%, transparent 65%),
    radial-gradient(55% 45% at 100% 18%, var(--orb-2) 0%, transparent 65%),
    radial-gradient(70% 55% at 50% 105%, var(--orb-3) 0%, transparent 65%),
    radial-gradient(45% 40% at 90% 72%, var(--orb-1) 0%, transparent 70%);
  filter: saturate(125%);
}

/* ── AGENCY SWITCHER ── */
.agency-switcher { position: relative; margin: 0 0 14px; }
.as-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 10px; cursor: pointer; color: var(--text); font: inherit;
  transition: background 0.15s;
}
.as-trigger:hover { background: var(--card-h); }
.as-mark { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, var(--teal), var(--sand)); color: var(--midnight); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; font-family: 'Roboto', sans-serif; }
.as-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-caret { font-size: 10px; color: var(--muted); flex-shrink: 0; }
.as-popup {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--glass-bg-elev);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 4px; max-height: 240px; overflow-y: auto; z-index: 50;
  box-shadow: var(--glass-shadow-lg);
  display: none;
}
.agency-switcher.open .as-popup { display: block; }
.as-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--text); }
.as-item:hover { background: var(--hover-tint); }
.as-item.current { background: var(--teal); color: #fff; }
.as-item-role { font-size: 9.5px; color: var(--muted); margin-left: auto; text-transform: uppercase; letter-spacing: 0.06em; }
.as-item.current .as-item-role { color: rgba(255,255,255,0.7); }
.as-empty { padding: 10px; font-size: 11px; color: var(--muted); text-align: center; }
.platform-pill { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--sand-dim); color: var(--sand); padding: 1px 6px; border-radius: 8px; margin-left: 4px; font-weight: 600; }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.42); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
:root[data-theme="light"] .modal-overlay { background: rgba(26,39,64,0.22); }
.modal-overlay.open { display: flex; }
.modal {
  display: block;
  background: var(--glass-bg-elev);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow-lg);
  width: 100%; max-width: 560px; max-height: 90vh;
  overflow-y: auto; overflow-x: hidden;
  padding: 22px 24px;
  /* En flex containers (como .modal-overlay), un item con contenido grande puede
     querer crecer más allá del max-width. flex-shrink:1 + min-width:0 garantiza
     que respete max-width y no se desborde horizontalmente. */
  flex: 0 1 auto;
  min-width: 0;
}
.modal-hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.modal-title { font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 600; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--text); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field label,
.field .field-host-label { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
/* Excluimos checkbox/radio del width:100% — son inputs especiales que tienen
   su tamaño visual nativo. Bug #52: el checkbox de "Auto-asignar" tomaba
   width:100% por esta regla y empujaba al <span> del label fuera del card. */
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 13px; transition: border-color 0.15s, box-shadow 0.15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-l); box-shadow: 0 0 0 3px var(--teal-dim); }
.modal-ft { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); justify-content: flex-end; }
/* position:relative + z-index:1 + touch-action:manipulation: en iOS Safari
   los ancestors con backdrop-filter o position:sticky crean stacking contexts
   que atrapan el touch event de hijos sin position propio. Sacar al .btn de
   ese context con z-index:1 y forzar touch-action:manipulation soluciona el
   tap que "no hace nada" (reportado en Bug #49 con "+ Agendar visita" en
   ficha de propiedad). -webkit-tap-highlight-color da feedback visual. */
.btn { position: relative; z-index: 1; touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,255,255,0.08); background: var(--glass-bg-strong); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--glass-border); color: var(--text); padding: 8px 16px; border-radius: 10px; font-family: inherit; font-size: 12.5px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.12s; box-shadow: inset 0 1px 0 var(--glass-highlight); }
.btn:hover { background: var(--card-h); border-color: var(--glass-highlight); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--teal); border-color: var(--teal); color: var(--midnight); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.20); }
.btn-primary:hover { background: var(--teal-l); border-color: var(--teal-l); box-shadow: 0 4px 12px rgba(23,198,181,0.22); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.form-err { color: var(--red); font-size: 11px; min-height: 14px; }
/* Versión "visible": banner sticky con icono, activado vía .visible desde JS. */
.form-err.visible {
  background: rgba(229,105,93,0.10);
  border: 1px solid rgba(229,105,93,0.45);
  color: var(--red);
  font-size: 12.5px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 9px;
  margin-top: 12px;
  line-height: 1.45;
  position: sticky;
  bottom: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  z-index: 5;
}
/* Resalta el wrapper .field cuando JS marca un campo con error. */
.field.has-error > input,
.field.has-error > textarea,
.field.has-error > select { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(229,105,93,0.18) !important; }
.field.has-error > label { color: var(--red); }
.field.has-error .chip-group { outline: 1px dashed var(--red); outline-offset: 4px; border-radius: 10px; }

/* Chips de selección (checkbox para múltiple, radio para única). El input nativo
   se oculta y el <span> de al lado actúa como la "pill" clickeable. */
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-opt { position: relative; cursor: pointer; user-select: none; }
.chip-opt input[type="checkbox"],
.chip-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.chip-opt > span { display: inline-block; padding: 6px 12px; border: 1px solid var(--glass-border); background: var(--input-bg); border-radius: 999px; font-size: 12px; color: var(--text); transition: background 0.12s, border-color 0.12s, color 0.12s; }
.chip-opt:hover > span { border-color: var(--glass-highlight); }
.chip-opt input[type="checkbox"]:checked + span,
.chip-opt input[type="radio"]:checked + span { background: var(--teal); border-color: var(--teal); color: var(--midnight); font-weight: 600; box-shadow: 0 2px 6px rgba(23,198,181,0.18); }
.chip-opt input[type="checkbox"]:focus-visible + span,
.chip-opt input[type="radio"]:focus-visible + span { box-shadow: 0 0 0 3px var(--teal-dim); }

/* Stepper numérico: ícono + [−] [valor] [+] en una pill. Reemplaza el
   <input type="number"> nudo en campos como Ambientes/Dormitorios/Baños/
   Cocheras. El input sigue ahí (acepta typing + form submit), pero
   visualmente está integrado a la pill. Los botones +/− se manejan por
   delegation en 05-view-propiedades.js leyendo data-stepper-action. */
.num-stepper {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 4px 4px 4px 12px;
  width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.num-stepper:focus-within { border-color: var(--teal-l); box-shadow: 0 0 0 3px var(--teal-dim); }
.num-stepper .ns-icon { font-size: 16px; opacity: 0.85; line-height: 1; }
.num-stepper .ns-btn {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--glass-border);
  border-radius: 50%;
  font-size: 18px; font-weight: 600; line-height: 1;
  color: var(--text); cursor: pointer; padding: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
}
.num-stepper .ns-btn:hover { border-color: var(--teal); color: var(--teal); }
.num-stepper .ns-btn:active { transform: scale(0.92); }
.num-stepper .ns-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.num-stepper .ns-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: none; outline: none;
  text-align: center;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--text); padding: 0;
  -moz-appearance: textfield;
}
.num-stepper .ns-input::-webkit-outer-spin-button,
.num-stepper .ns-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-stepper .ns-input::placeholder { color: var(--muted); opacity: 0.6; font-weight: 400; }
/* Cuando el .field tiene error, el wrapper hereda el borde rojo via .has-error */
.field.has-error .num-stepper { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(229,105,93,0.18) !important; }

/* Stats de visitas en la cabecera del modal de propiedad */
.prop-stat { display: inline-flex; align-items: baseline; gap: 5px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; font-size: 12px; color: var(--text); }
.prop-stat strong { font-size: 14px; font-weight: 600; font-family: 'Roboto', sans-serif; color: var(--teal-l); }
.prop-stat .ps-icon { color: var(--muted); }
.prop-stat .ps-lb   { color: var(--muted); font-size: 11px; }

/* Visibilidad del sitio público (configuración) — 3 radios estilo card */
.vis-opt { cursor: pointer; position: relative; }
.vis-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.vis-opt .vis-card {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; transition: all 0.15s; height: 100%;
}
.vis-opt:hover .vis-card { background: var(--card-h); border-color: var(--muted); }
.vis-opt input:checked + .vis-card { border-color: var(--teal-l); background: var(--teal-dim); box-shadow: inset 0 0 0 1px var(--teal-l); }
.vis-opt .vis-icon  { font-size: 20px; margin-bottom: 6px; }
.vis-opt .vis-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.vis-opt .vis-desc  { font-size: 11px; color: var(--muted); line-height: 1.4; }
@media (max-width: 640px) {
  .vis-grid { grid-template-columns: 1fr !important; }
}

/* Panel "✨ IA" del modal de propiedad (narrativas) */
.ai-panel { padding: 4px 0; }
.ai-empty { text-align: center; padding: 30px 18px; background: var(--card); border: 1px dashed var(--border); border-radius: 12px; }
.ai-tabs { display: flex; gap: 4px; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: 14px; padding-bottom: 8px; flex-wrap: wrap; }
.ai-tab { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 6px 12px; font: inherit; font-size: 12px; border-radius: 7px; cursor: pointer; transition: all 0.15s; }
.ai-tab:hover { color: var(--text); background: var(--card); }
.ai-tab.active { background: var(--teal-dim); color: var(--teal-l); border-color: rgba(58,173,173,0.3); }
.ai-text { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; max-height: 320px; overflow-y: auto; }
.ai-meta { font-size: 10.5px; color: var(--muted); margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.ai-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* Autocomplete de dirección (Nominatim/OSM) */
.addr-ac { position: relative; }
.addr-ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--glass-bg-elev);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  max-height: 240px; overflow-y: auto; z-index: 60;
  box-shadow: var(--glass-shadow-lg);
}
.addr-ac-item { padding: 8px 10px; cursor: pointer; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.addr-ac-item:last-child { border-bottom: none; }
.addr-ac-item:hover, .addr-ac-item.active { background: var(--teal-dim); }
.addr-ac-item .ac-main { font-weight: 500; }
.addr-ac-item .ac-sub  { font-size: 10.5px; color: var(--muted); }
.addr-ac-status { padding: 10px 12px; font-size: 11.5px; color: var(--muted); text-align: center; }

/* Calendario de visitas */
/* minmax(0, 1fr) — NO repeat(7, 1fr): 1fr es minmax(auto,1fr) y el `auto`
   mide min-content, así que una celda con un .cal-event `white-space:nowrap`
   largo expande toda la columna y rompe la grilla. minmax(0,1fr) reparte
   parejo e ignora el min-content. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 4px; text-align: center; }
.cal-cell { background: var(--card); border: 1px solid var(--border); border-radius: 8px; min-height: 92px; padding: 6px 8px; cursor: pointer; transition: background 0.12s; display: flex; flex-direction: column; gap: 3px; }
.cal-cell:hover { background: var(--card-h); }
.cal-cell.other-month { opacity: 0.35; }
.cal-cell.today { border-color: var(--teal-l); }
.cal-cell.today .cal-day-num { color: var(--teal-l); font-weight: 700; }
.cal-day-num { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }

/* ── Banner de estado del Google Calendar (conectado/error/CTA) ──
   Usa vars de tema en lugar de hex fijos para adaptar a dark/light. */
.cal-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 12px; margin-bottom: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.cal-card.cal-card-ok  { background: var(--green-dim); border-color: var(--green); }
.cal-card.cal-card-err { background: var(--red-dim);   border-color: var(--red);   }
.cal-card-ico  { font-size: 22px; line-height: 1; flex-shrink: 0; }
.cal-card-body { flex: 1; min-width: 0; }
.cal-card-title { font-weight: 600; font-size: 14px; }
.cal-card-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.cal-card-warn  { font-size: 12px; color: var(--sand); margin-top: 4px; }
.cal-card-err .cal-card-sub { color: var(--red); }
.cal-card-btn  { font-size: 12px; padding: 6px 12px; flex-shrink: 0; }
.cal-event { font-size: 10.5px; padding: 3px 6px; border-radius: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.cal-event:hover { filter: brightness(1.2); }
.cal-event.scheduled { background: var(--teal-dim); color: var(--teal-l); }
.cal-event.done { background: var(--green-dim); color: var(--green); }
.cal-event.no_show { background: var(--red-dim); color: var(--red); }
.cal-event.cancelled { background: var(--hover-tint); color: var(--muted); text-decoration: line-through; }
.cal-event-time { font-weight: 600; margin-right: 4px; }
.cal-more { font-size: 10px; color: var(--muted); padding: 2px 4px; cursor: pointer; }
.cal-more:hover { color: var(--text); }

@media (max-width: 700px) {
  /* Mobile: el calendario mensual deja de mostrar el texto de cada visita
     (no entra sin trunc feo "11:0...") y pasa a modo heatmap estilo GitHub
     contributions. JS setea data-heat="0..4" según cantidad de visitas; el
     bg va de transparente a teal progresivo. Bug #137. */
  .cal-cell {
    min-height: 0; aspect-ratio: 1; padding: 4px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .cal-cell .cal-event,
  .cal-cell .cal-more { display: none; }
  .cal-day-num {
    font-size: 12px; margin: 0;
    color: var(--text); font-weight: 500;
  }
  .cal-cell[data-heat="1"] { background: rgba(58,173,173,0.20); }
  .cal-cell[data-heat="2"] { background: rgba(58,173,173,0.40); }
  .cal-cell[data-heat="3"] { background: rgba(58,173,173,0.60); }
  .cal-cell[data-heat="4"] { background: rgba(58,173,173,0.85); }
  .cal-cell[data-heat="3"] .cal-day-num,
  .cal-cell[data-heat="4"] .cal-day-num { color: #fff; }
  .cal-cell.today { box-shadow: inset 0 0 0 2px var(--teal-l); }
}

/* Timeline reutilizable */
.timeline-panel { position: relative; padding: 6px 0 6px 26px; max-height: 460px; overflow-y: auto; }
.timeline-panel::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.tl-event { position: relative; padding: 8px 0 14px; }
.tl-event::before {
  content: ''; position: absolute; left: -19px; top: 12px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bullet, var(--teal)); box-shadow: 0 0 0 3px var(--midnight);
}
.tl-event .tl-when { font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
.tl-event .tl-title { font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.tl-event .tl-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.tl-event .tl-actor { font-size: 10.5px; color: var(--muted); margin-top: 2px; font-style: italic; }
.tl-event[data-kind="note"]                 { --bullet: var(--sand); }
.tl-event[data-kind="lead_received"]        { --bullet: var(--teal-l); }
.tl-event[data-kind="lead_first_response"]  { --bullet: var(--teal); }
.tl-event[data-kind="visit_scheduled"]      { --bullet: var(--purple); }
.tl-event[data-kind="visit_done"]           { --bullet: var(--green); }
.tl-event[data-kind="visit_noshow"]         { --bullet: var(--red); }
.tl-event[data-kind="visit_cancelled"]      { --bullet: var(--muted); }
.tl-event[data-kind="op_opened"]            { --bullet: var(--sand); }
.tl-event[data-kind="op_closed"]            { --bullet: var(--green); }
.tl-event[data-kind="rent_paid"]            { --bullet: var(--green); }
.tl-event[data-kind="photo_uploaded"]       { --bullet: var(--teal-l); }
.tl-event[data-kind="property_created"],
.tl-event[data-kind="client_created"]       { --bullet: var(--sand); }
.tl-event[data-kind="demand_created"]       { --bullet: var(--purple); }
.tl-empty { padding: 24px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* Tabs de detalle (cliente, etc.) */
.cdet-panel { animation: fadeUp 0.18s ease; min-height: 200px; }



/* ── Modal QR de contacto · checkboxes "datos a incluir" ── */
/* Sin estos, los labels son inline (HTML default) y todos los campos quedan
   pegados en una sola fila (Bug #32). */
.qr-fields-list { display:flex; flex-direction:column; gap:6px; }
.qr-field-row {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:6px; cursor:pointer;
  transition: background 0.12s;
}
.qr-field-row:hover { background: var(--card-h); }
.qr-field-row input[type=checkbox] { flex-shrink:0; cursor:pointer; }
.qr-field-label { font-size:12.5px; color: var(--text); flex-shrink:0; }
.qr-field-preview {
  font-size:11.5px; color: var(--muted);
  margin-left:auto; max-width:60%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


/* ── Quick replies · chips clickeables que prellenan un textarea ── */
/* Usado en modales como admin-reject (Bug #34) para evitar tener que
   tipear motivos comunes desde cero. Click → setea el textarea hermano. */
.quick-replies { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.quick-reply-chip {
  font: inherit; font-size:11.5px; line-height:1.3;
  padding:5px 10px; border-radius:999px;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--border); cursor:pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-align:left; max-width:100%;
}
.quick-reply-chip:hover {
  background: var(--card-h); color: var(--text); border-color: var(--glass-highlight);
}
/* Galería de fotos en propiedades */
.photo-tile { position: relative; aspect-ratio: 4/3; background: var(--midnight); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile.is-main { outline: 2px solid var(--sand); }
.photo-tile .photo-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.photo-tile:hover .photo-actions { opacity: 1; }
.photo-tile .photo-actions button { background: rgba(0,0,0,0.65); border: none; color: #fff; font-size: 10px; padding: 4px 6px; border-radius: 4px; cursor: pointer; backdrop-filter: blur(4px); }
.photo-tile .photo-actions button:hover { background: rgba(0,0,0,0.85); }
.photo-tile .main-pill { position: absolute; bottom: 4px; left: 4px; font-size: 9px; background: var(--sand); color: var(--midnight); padding: 2px 6px; border-radius: 3px; font-weight: 600; }
.photo-tile.is-pending { outline: 2px dashed var(--teal-l); outline-offset: -1px; }
.photo-tile .pending-pill { position: absolute; bottom: 4px; left: 4px; font-size: 9px; background: var(--teal); color: #fff; padding: 2px 6px; border-radius: 3px; font-weight: 600; letter-spacing: 0.04em; }

/* Confirmación in-place de borrado de foto (reemplaza al confirm() nativo).
   El overlay cubre el tile con un velo rojo translúcido + texto chico + dos
   botones. Mientras está armado escondemos .photo-actions para no confundir. */
.photo-tile.is-confirming-delete .photo-actions { opacity: 0; pointer-events: none; }
.photo-tile .photo-confirm-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 8px;
  background: rgba(180, 35, 35, 0.72);
  backdrop-filter: blur(2px);
  color: #fff; text-align: center;
  animation: pco-in 0.12s ease;
}
.photo-tile .photo-confirm-overlay .pco-text {
  font-size: 11.5px; font-weight: 500; line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.photo-tile .photo-confirm-overlay .pco-actions { display: flex; gap: 6px; }
.photo-tile .photo-confirm-overlay button {
  border: none; border-radius: 5px; padding: 5px 10px; font-size: 11px;
  font-family: inherit; cursor: pointer; font-weight: 500;
  background: rgba(255,255,255,0.92); color: #1c1d20;
}
.photo-tile .photo-confirm-overlay button:hover { background: #fff; }
.photo-tile .photo-confirm-overlay button.is-danger {
  background: #fff; color: var(--red, #c0392b); font-weight: 600;
}
.photo-tile .photo-confirm-overlay button.is-danger:hover { background: #ffeaea; }
@keyframes pco-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Dropzone para fotos de propiedad ──
   Wrapper que contiene la grilla (#prop-photos-list), el hint inicial vacío y
   el overlay que aparece al arrastrar archivos. Drag&drop + paste con Ctrl+V. */
.photos-dropzone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 18px;
  min-height: 160px;
  transition: border-color 0.15s, background 0.15s;
}
.photos-dropzone:hover { border-color: var(--glass-highlight); }
.photos-dropzone.drag-over { border-color: var(--teal-l); background: rgba(58,173,173,0.06); }
.photos-dropzone.has-photos { padding: 12px; }
.photos-dropzone #prop-photos-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.photos-dropzone #prop-photos-list:empty { display: none; }

.photos-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 24px 16px; text-align: center;
}
.photos-empty-icon { font-size: 44px; line-height: 1; opacity: 0.7; }
.photos-empty-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.photos-empty-hint { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 380px; }
.photos-empty kbd {
  display: inline-block; padding: 1px 6px; font-size: 10.5px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px;
  font-family: 'Roboto', system-ui, sans-serif; color: var(--text); font-weight: 500;
}

/* Overlay que se muestra encima del dropzone mientras se arrastra un archivo */
.photos-drop-overlay {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(42,127,127,0.18);
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
}
.photos-dropzone.drag-over .photos-drop-overlay { display: flex; }
.photos-drop-overlay-text {
  font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 600;
  color: #fff;
  background: var(--teal); padding: 12px 24px; border-radius: 999px;
  border: 1px solid var(--teal-l);
  box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}

.photos-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}

/* Tabs internos del modal de propiedad */
.prop-tab-panel { animation: fadeUp 0.2s ease; }

/* ── AI Prompt fill: pegá texto y la IA llena el form ── */
.prop-ai-prompt {
  background: linear-gradient(135deg, var(--teal-dim), transparent);
  border: 1px solid var(--teal-dim);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.prop-ai-prompt-hd {
  display: flex; align-items: flex-start; gap: 10px;
}
.prop-ai-prompt-icon {
  font-size: 18px; line-height: 1.1; flex-shrink: 0;
}
.prop-ai-prompt-title {
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.prop-ai-prompt-sub {
  font-size: 12px; color: var(--muted); margin-top: 2px;
}
.prop-ai-prompt-collapse {
  margin-left: auto;
  width: 22px; height: 22px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.prop-ai-prompt-collapse:hover { color: var(--text); }
.prop-ai-prompt-body {
  margin-top: 10px;
}
.prop-ai-prompt-body textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  font-family: inherit; font-size: 13px; line-height: 1.45;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 90px;
}
.prop-ai-prompt-body textarea:focus { outline: none; border-color: var(--teal); }
/* Ejemplo como hint debajo del textarea — fuera del placeholder porque en
   mobile el texto largo dentro del placeholder se cortaba feo (Bug #109). */
.prop-ai-prompt-example {
  margin-top: 6px;
  font-size: 11.5px; line-height: 1.5;
  color: var(--muted);
  font-style: italic;
}
.prop-ai-prompt-actions {
  display: flex; justify-content: flex-end;
  margin-top: 10px;
}

/* ── Modo guiado (wizard) del alta de propiedad ── */
#prop-wizard-toggle.active { background: var(--teal); border-color: var(--teal-l); color: #fff; }
.prop-wizard-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  padding: 12px 14px;
  margin-bottom: 16px;
  animation: fadeUp 0.18s ease;
}
.prop-wizard-steps { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pw-step {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 6px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--muted);
  position: relative;
}
.pw-step .pw-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--midnight);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}
.pw-step.active { border-color: var(--teal-l); color: var(--text); box-shadow: 0 0 0 2px rgba(58,173,173,0.18); }
.pw-step.active .pw-num { background: var(--teal); color: #fff; }
.pw-step.done { border-color: rgba(93,214,138,0.45); color: var(--text); }
.pw-step.done .pw-num { background: #5DD68A; color: var(--midnight); font-size: 0; }
.pw-step.done .pw-num::before { content: '✓'; font-size: 11px; font-weight: 700; }
.prop-wizard-hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.prop-wizard-nav { display: flex; gap: 8px; justify-content: flex-end; }
.prop-wizard-nav .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Campo destacado (ej: etapa de obra cuando operation=development) */
.field.emphasized {
  background: rgba(167,139,250,0.10);
  border: 1px solid rgba(167,139,250,0.35);
  border-radius: 9px;
  padding: 10px 12px;
  margin: 4px 0;
}
.field.emphasized > label { color: var(--purple); }

/* ── Asistente AI de construcción de template ── */
.tpl-builder summary::-webkit-details-marker { display: none; }
.tpl-builder[open] .tpl-caret { transform: rotate(180deg); }
.tpl-builder-result {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 14px;
}
.tpl-builder-result .meta-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 11.5px;
  margin-bottom: 10px;
}
.tpl-builder-result .meta-row .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  color: var(--muted);
}
.tpl-builder-result .meta-row .chip strong { color: var(--text); font-weight: 500; }
.tpl-builder-result .meta-row .swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--glass-border); }
.tpl-builder-result .code-box {
  position: relative;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  margin-top: 8px;
  max-height: 360px; overflow: auto;
}
:root[data-theme="light"] .tpl-builder-result .code-box { background: rgba(26,39,64,0.06); }
.tpl-builder-result .code-box pre {
  margin: 0; padding: 12px 14px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.55;
  color: var(--text);
  white-space: pre;
}
.tpl-builder-result .code-actions {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center;
}
.tpl-builder-result .notes {
  margin-top: 10px;
  font-size: 11.5px; line-height: 1.55;
  color: var(--muted);
  background: var(--sand-dim);
  border-left: 2px solid var(--sand);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
}

/* ── Preview en vivo del template generado ── */
.tpl-preview-box {
  margin-top: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.tpl-preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: var(--glass-bg-strong);
  border-bottom: 1px solid var(--glass-border);
  gap: 10px; flex-wrap: wrap;
}
.tpl-preview-tabs { display: flex; gap: 4px; }
.tpl-preview-tab {
  background: transparent; border: 1px solid transparent;
  color: var(--muted); font-size: 11.5px; font-weight: 500;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
  transition: all 0.12s;
}
.tpl-preview-tab:hover { color: var(--text); background: var(--glass-bg); }
.tpl-preview-tab.active {
  background: var(--teal-dim); color: var(--teal-l);
  border-color: var(--teal-dim);
}
.tpl-preview-bar-right { display: flex; align-items: center; gap: 8px; }
.tpl-preview-status { font-size: 11px; color: var(--muted); }
.tpl-preview-iframe {
  width: 100%;
  height: 540px;
  border: 0;
  background: #fff;
  display: block;
}
:root[data-theme="dark"] .tpl-preview-iframe { background: #0A1520; }

/* ── Iterar con tweaks (asistente conversacional simple) ── */
.tpl-iterate {
  margin-top: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.tpl-iterate summary {
  cursor: pointer; padding: 10px 12px;
  font-size: 12.5px; font-weight: 500; color: var(--teal-l);
  background: var(--glass-bg-strong);
  list-style: none;
  border-bottom: 1px solid transparent;
}
.tpl-iterate summary::-webkit-details-marker { display: none; }
.tpl-iterate[open] summary { border-bottom-color: var(--glass-border); }
.tpl-iterate-body { padding: 10px 12px 12px; }
.tpl-iterate-quickreplies {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.tpl-qr {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 11px; font-weight: 500;
  padding: 5px 10px; border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}
.tpl-qr:hover { background: var(--teal-dim); border-color: var(--teal-dim); color: var(--teal-l); }

/* ── Selector de template público (Configuración → Inmobiliaria) ── */
.tpl-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 9px 12px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px;
}
.tpl-toolbar-active { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tpl-toolbar-label {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.tpl-toolbar-name { font-size: 13px; color: var(--text); font-weight: 500; }
.tpl-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.tpl-dirty-note { font-size: 11px; color: var(--sand); }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.tpl-active-badge {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--teal); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.tpl-card {
  position: relative; cursor: pointer;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.tpl-card:hover { transform: translateY(-2px); border-color: var(--glass-highlight); }
.tpl-card.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px var(--teal-dim), inset 0 1px 0 var(--glass-highlight);
}
.tpl-card .tpl-preview {
  height: 88px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.tpl-card .tpl-preview::before {
  content: ''; position: absolute; inset: 0;
  background: var(--tpl-bg, var(--card-h));
}
.tpl-card .tpl-preview::after {
  content: ''; position: absolute; left: 18%; right: 18%; top: 22%; bottom: 22%;
  background: var(--tpl-accent, var(--teal));
  border-radius: 4px;
  opacity: 0.55;
}
.tpl-card.selected .tpl-preview::after { opacity: 0.85; }
.tpl-card .tpl-body { padding: 10px 12px 12px; }
.tpl-card .tpl-name { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.tpl-card .tpl-name .tpl-check {
  width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: transparent;
}
.tpl-card.selected .tpl-name .tpl-check {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.tpl-card.selected .tpl-name .tpl-check::before { content: '✓'; }
.tpl-card .tpl-desc { font-size: 10.5px; color: var(--muted); line-height: 1.4; }

/* ── Cropper de imágenes (encuadrar foto/logo/portada) ── */
.cropper-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cropper-card {
  background: var(--navy-l);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow-lg);
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: calc(100vw - 40px);
}
.cropper-title {
  font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 600;
  color: var(--text); align-self: flex-start;
}
.cropper-stage {
  position: relative; overflow: hidden;
  background: var(--input-bg);
  border-radius: 10px;
  cursor: grab; touch-action: none;
  user-select: none;
}
.cropper-stage:active { cursor: grabbing; }
.cropper-stage.round { border-radius: 50%; }
.cropper-img {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  max-width: none; pointer-events: none; -webkit-user-drag: none;
}
.cropper-mask {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: inherit;
}
.cropper-zoom {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.cropper-zoom-ic { color: var(--muted); font-size: 16px; width: 12px; text-align: center; }
.cropper-slider {
  flex: 1; appearance: none; -webkit-appearance: none;
  height: 4px; border-radius: 2px; background: var(--border);
  cursor: pointer;
}
.cropper-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal-l); cursor: grab; border: 2px solid var(--navy-l);
}
.cropper-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--navy-l);
  background: var(--teal-l); cursor: grab;
}
.cropper-hint { font-size: 10.5px; color: var(--dim); }
.cropper-ft { display: flex; gap: 8px; justify-content: flex-end; width: 100%; }
@media (max-width: 480px) {
  .cropper-card { padding: 16px; }
}

/* ── Cropper inline (no modal): se monta dentro de un card existente,
   sin overlay backdrop. La card del cropper se adapta al ancho del host
   y se ve como una sección más del card padre. ── */
.cropper-inline {
  display: block;
  width: 100%;
  margin-top: 14px;
  animation: cropper-inline-in 0.18s ease-out;
}
@keyframes cropper-inline-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cropper-card-inline {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.cropper-card-inline .cropper-title { font-size: 14px; }
.cropper-card-inline .cropper-stage { margin: 0 auto; }

/* ── Grilla de amenities (chips agrupados por categoría) ── */
.amenities-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.amenity-group { display: flex; flex-direction: column; gap: 7px; }
.amenity-group-title { font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-left: 2px; }
.amenity-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.amenity-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px; font-weight: 500;
  cursor: pointer; user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.amenity-chip:hover { background: var(--glass-bg-strong); color: var(--text); border-color: var(--glass-highlight); }
.amenity-chip:active { transform: scale(0.97); }
.amenity-chip svg { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 1.8; }
.amenity-chip.selected {
  background: var(--teal-dim);
  border-color: rgba(58,173,173,0.45);
  color: var(--teal-l);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 1px rgba(58,173,173,0.15);
}
.amenity-chip.selected:hover { background: rgba(42,127,127,0.22); }
:root[data-theme="light"] .amenity-chip.selected { color: var(--teal); background: rgba(31,111,111,0.14); border-color: rgba(31,111,111,0.35); }

/* Lista de tareas */
.task-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: none; }
.task-row.completed .task-title { text-decoration: line-through; color: var(--muted); }
.task-checkbox { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; }
.task-checkbox.checked { background: var(--teal); border-color: var(--teal); }
.task-checkbox.checked::after { content: '✓'; color: #fff; font-size: 11px; }
.task-title { font-size: 12.5px; font-weight: 500; }
.task-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.priority-pill { font-size: 9.5px; padding: 1px 5px; border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.priority-pill.high   { background: var(--red-dim); color: var(--red); }
.priority-pill.medium { background: var(--sand-dim); color: var(--sand); }
.priority-pill.low    { background: var(--card-h); color: var(--muted); }

/* Notes panel reutilizable */
.notes-panel { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--glass-shadow); }
.notes-panel .notes-list { max-height: 240px; overflow-y: auto; margin-bottom: 10px; }
.notes-panel .note { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 10px; padding: 8px 10px; font-size: 12px; margin-bottom: 8px; line-height: 1.5; }
.notes-panel .note-meta { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; display: flex; justify-content: space-between; align-items: center; }
.notes-panel .note-del { background: none; border: none; color: var(--red); cursor: pointer; font-size: 11px; }
.notes-panel textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text); border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 12.5px; resize: vertical; }
.notes-panel .add-row { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; }
.notes-panel .add-row textarea { flex: 1; }

/* Leaflet popup oscuro */
.leaflet-popup-content-wrapper { background: var(--navy); color: var(--text); border: 1px solid var(--border); }
.leaflet-popup-tip { background: var(--navy); }
.leaflet-container { background: var(--midnight); }

/* Filtros inline (selects/inputs en row de filtros) */
.field-inline { background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text); border-radius: 9px; padding: 7px 10px; font-family: inherit; font-size: 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.field-inline:focus { outline: none; border-color: var(--teal-l); box-shadow: 0 0 0 3px var(--teal-dim); }

/* Botón "+ Nuevo" en cards */
.btn-add { background: var(--teal); color: #fff; border: none; padding: 6px 12px; border-radius: 7px; font-size: 12px; font-family: inherit; cursor: pointer; }
.btn-add:hover { background: var(--teal-l); }

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}


/* Reset html/body para el shell del CRM (sidebar + main con scroll interno).
   Scopeado con :has() para no afectar páginas estáticas (privacy, terms,
   data-deletion, login, signup, etc.) que cargan theme.css pero necesitan
   scroll del body — antes el overflow:hidden global les truncaba la página
   "a la mitad" sin permitir scrollear. */
html:has(body > .shell) { height: 100%; background: var(--midnight); color: var(--text); }
body:has(> .shell)      { height: 100%; font-family: 'Roboto', sans-serif; background: transparent; color: var(--text); font-size: 13px; overflow: hidden; }

/* ── SHELL ── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; }

/* ── SIDEBAR ── */
.sidebar {
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  padding: 22px 12px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; padding: 0 6px; }
.brand-mark { width: 30px; height: 30px; background: var(--sand); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-mark span { font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); }
.brand-name { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); }
.brand-name em { color: var(--teal-l); font-style: normal; }

.nav-section-label { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); padding: 0 10px; margin-bottom: 4px; margin-top: 16px; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--muted); cursor: pointer; transition: all 0.15s; margin-bottom: 1px; font-size: 12.5px; font-weight: 400; position: relative; text-decoration: none; }
.nav-item:hover { background: var(--card-h); color: var(--text); }
.nav-item.active { background: var(--teal); color: #fff; font-weight: 500; }
.nav-icon { font-size: 13px; opacity: 0.7; width: 16px; text-align: center; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.nav-badge.gold { background: var(--sand); color: var(--midnight); }

.avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,var(--teal),var(--sand)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; }

/* Backdrop para drawer mobile (oculto en desktop) */
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 80; opacity: 0; transition: opacity 0.2s; }
.sidebar-backdrop.open { display: block; opacity: 1; }

/* ── MAIN ── */
.main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  flex-shrink: 0; gap: 12px;
}
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.tb-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.tb-title { font-family: 'Roboto', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.3px; }
.tb-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.tb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tb-nav { display: flex; align-items: center; gap: 3px; justify-content: center; flex-shrink: 0; }
.tb-nav-btn { display: flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--muted); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; text-decoration: none; }
.tb-nav-btn:hover { background: var(--card); color: var(--text); border-color: var(--border); }
.tb-nav-btn.active { background: var(--card); color: var(--text); border-color: var(--border); font-weight: 600; }

/* ── Buscador global en el topbar ── */
.tb-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 140px; max-width: 360px; margin: 0 8px; }
.tb-search-ico { position: absolute; left: 10px; color: var(--muted); font-size: 14px; pointer-events: none; line-height: 1; }
.tb-search-input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 12.5px;
  transition: border-color 0.15s, background 0.15s;
}
.tb-search-input::placeholder { color: var(--muted); }
.tb-search-input:focus { outline: none; border-color: var(--brand, var(--text)); background: var(--card-h, var(--card)); }
.tb-search-input::-webkit-search-cancel-button { cursor: pointer; }

.menu-btn { display: none; width: 36px; height: 36px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); color: var(--text); align-items: center; justify-content: center; cursor: pointer; font-size: 16px; flex-shrink: 0; }

.nav-mobile-only { display: none; }
.icon-btn { width: 32px; height: 32px; border-radius: 7px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; }

/* Pop-out de Mensajes en el topbar: detacha el mensajero a su propia ventana
   desde cualquier parte del CRM, sin entrar primero a la sección. Discreto
   (sin fondo, atenuado hasta hover) y pegado al botón de Mensajes para que se
   lean como un par. Solo desktop: en mobile no hay ventanas flotantes. */
.tb-mensajes-popout {
  background: transparent; border-color: transparent;
  color: var(--muted); opacity: 0.55; margin-left: -6px;
  transition: opacity .15s, color .15s, background .15s, border-color .15s;
}
.tb-mensajes-popout:hover { opacity: 1; color: var(--teal-l); background: var(--card-h); border-color: var(--border); }
@media (max-width: 699px) { .tb-mensajes-popout { display: none; } }

/* ── Botón de usuario en el topbar (reemplaza al user-row del sidebar) ── */
.tb-user-wrap { position: relative; }
.tb-user-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 9px 4px 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  color: var(--text);
}
.tb-user-btn:hover { background: var(--card-h); border-color: var(--border-strong, var(--border)); }
.tb-user-btn .avatar-sm { width: 26px; height: 26px; font-size: 10.5px; }
.tb-user-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; max-width: 140px; }
.tb-user-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.tb-user-role { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.tb-user-chev { font-size: 9px; color: var(--muted); margin-left: 2px; transition: transform 0.15s; }
.tb-user-btn[aria-expanded="true"] .tb-user-chev { transform: rotate(180deg); }

/* El .topbar tiene backdrop-filter, que crea un containing block para descendientes
   position:fixed y los atrapa en su stacking context (el z-index del menú queda
   confinado al topbar y aparece por DEBAJO de .content). Por eso el menú vive
   FUERA del .topbar en el partial (es hermano del topbar dentro de .main, que
   no tiene filter/transform/backdrop-filter). Con eso el position:fixed escapa
   al viewport de verdad y el z-index 1100 sí aplica.
   El JS calcula top/right con getBoundingClientRect() del botón al abrirlo.
   z-index alto para quedar arriba del FAB del asistente (1000) y el panel de
   notificaciones (1001), pero abajo de modales globales (100 es modal-overlay
   con su backdrop oscuro — los modales bloquean toda la UI, está OK que tape al menú). */
.tb-user-menu {
  position: fixed; top: 60px; right: 18px;
  min-width: 240px;
  background: var(--card); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
  padding: 6px;
  opacity: 0; transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 1100;
}
:root[data-theme="light"] .tb-user-menu { box-shadow: 0 12px 32px rgba(26,39,64,0.16), 0 2px 8px rgba(26,39,64,0.1); }
.tb-user-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.tb-user-menu-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; }
.tb-user-menu-head .avatar-md { width: 36px; height: 36px; font-size: 12.5px; }
.tb-user-menu-head-text { min-width: 0; flex: 1; }
.tb-user-menu-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-user-menu-meta { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-user-menu-sep { height: 1px; background: var(--border); margin: 2px 4px; }
.tb-user-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px; border-radius: 7px;
  background: transparent; border: 0; color: var(--text);
  font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tb-user-menu-item:hover { background: var(--card-h); }
.tb-user-menu-ico { width: 18px; text-align: center; opacity: 0.75; font-size: 13px; }
.tb-user-menu-danger { color: var(--red); }
.tb-user-menu-danger:hover { background: rgba(228, 77, 77, 0.1); }
.notif-wrap { position: relative; }

/* ── CONTENT ── */
.content { flex: 1; overflow-y: auto; padding: 22px 26px 40px; display: flex; flex-direction: column; gap: 18px; }
.content::-webkit-scrollbar { width: 3px; }
.content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.view { display: none; flex-direction: column; gap: 18px; }
.view.active { display: flex; }

/* view-editar-propiedad ahora vive dentro de .content (movido en commit posterior
   a la migración modal→ficha). Sin reglas extra de posicionamiento — hereda el
   layout normal de las demás views. */

/* ─── Bloque "Te necesitan" del home: cards horizontales chicas, una por
   bucket accionable (mensajes, notif, consultas, visitas, tareas). Cada
   card tiene su --prio-color para distinguirse de un vistazo. Hover sube
   levemente con un glow del color. */
/* ── Suggestions del dashboard ──
   Cards colapsables con dismiss persistente. Aparecen arriba del prio-block.
   Cada card tiene icon + title + body + CTAs + botón × para descartar. */
.dash-suggestions {
  background: var(--glass-bg, var(--card));
  border: 1px solid var(--glass-border, var(--border));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 4px;
}
.dash-suggestions[hidden] { display: none; }
.dash-suggestions-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dash-suggestions-title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600; flex: 1;
}
.dash-suggestions-toggle {
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 16px; font-weight: 600;
  width: 22px; height: 22px; border-radius: 5px;
}
.dash-suggestions-toggle:hover { background: var(--card-h); color: var(--text); }
.dash-suggestions-list { display: flex; flex-direction: column; gap: 10px; }

.dash-sug-card {
  display: flex; gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  position: relative;
}
.dash-sug-icon { font-size: 22px; line-height: 1.1; flex-shrink: 0; }
.dash-sug-body { flex: 1; min-width: 0; }
.dash-sug-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.dash-sug-text { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.dash-sug-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dash-sug-dismiss {
  position: absolute; top: 6px; right: 6px;
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--muted);
  padding: 4px 8px; border-radius: 5px;
}
.dash-sug-dismiss:hover { background: var(--card-h); color: var(--text); }

.prio-block { margin-bottom: 4px; }
.prio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.prio-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--prio-color, var(--teal));
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  min-width: 0;
}
.prio-card:hover {
  background: var(--card-h);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(23,198,181,0.18), 0 2px 4px rgba(0,0,0,0.10);
}
.prio-ico {
  font-size: 22px;
  line-height: 1;
  color: var(--prio-color, var(--teal));
  flex-shrink: 0;
}
.prio-text { display: flex; flex-direction: column; min-width: 0; }
.prio-count {
  font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--text);
  font-family: 'Roboto', sans-serif;
  letter-spacing: -0.5px;
}
.prio-lbl {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Dashboard nuevo: header + tabs + paneles ─── */
.dash-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.dash-title {
  font-family: 'Roboto', sans-serif;
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--text);
}
.dash-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.dash-actions { display: flex; gap: 8px; align-items: center; }
.dash-ai-btn {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-l) 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 12px rgba(23,198,181,0.32);
}
.dash-ai-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(23,198,181,0.42); }

.dash-tabs { margin-bottom: 12px; gap: 6px; flex-wrap: wrap; }
.dash-tabs .ops-tab { font-size: 13px; }

.dash-panel { display: flex; flex-direction: column; gap: 14px; }
.dash-panel[hidden] { display: none; }

/* Filas de preferencias del usuario (Config → Mi cuenta). Cada fila tiene
   label+hint a la izquierda y el control (segmented toggle) a la derecha,
   con divisor sutil entre filas. */
.pref-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.pref-row:last-of-type { border-bottom: none; }
.pref-row-info { flex: 1 1 auto; min-width: 0; }
.pref-row-label { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.pref-row-hint  { font-size: 12px; color: var(--muted); line-height: 1.45; }
@media (max-width: 560px) {
  .pref-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .pref-row .seg-toggle { width: 100%; }
  .pref-row .seg-toggle .seg-btn { flex: 1; text-align: center; }
}

/* Tab "Hoy": agenda corta */
.dash-agenda-section-title {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  margin-bottom: 6px;
}
.dash-agenda-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.dash-agenda-row:last-child { border-bottom: none; }
.dash-agenda-time {
  font-family: 'Roboto', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--teal-l);
  flex-shrink: 0; min-width: 56px;
}
.dash-agenda-ico { font-size: 14px; color: var(--muted); flex-shrink: 0; }
.dash-agenda-text { flex: 1; min-width: 0; }
.dash-agenda-sub { color: var(--muted); }

/* Tab "Propiedades": grid de cards */
.dash-props-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.dash-prop-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.dash-prop-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.16); }
.dash-prop-photo {
  aspect-ratio: 4/3;
  background-color: var(--card-h);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--muted);
}
.dash-prop-meta { padding: 10px 12px; }
.dash-prop-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-prop-sub {
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-prop-price {
  font-size: 13px; color: var(--teal-l); font-weight: 600;
  margin-top: 6px;
}

/* Tab "Por liberarse": rows tipo timeline corto */
.dash-expiring-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.dash-expiring-row:last-child { border-bottom: none; }
.dash-expiring-tag {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  font-weight: 600;
  flex-shrink: 0;
}
.dash-expiring-date {
  font-family: 'Roboto', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  flex-shrink: 0; min-width: 70px;
}
.dash-expiring-text { flex: 1; min-width: 0; }
.dash-expiring-sub { color: var(--muted); font-size: 11.5px; }

/* Cápsulas de navegación del asistente (chips con navigate_to). Visual
   más prominente para que se vean como "ir a" en lugar de respuesta. */
.assist-chip.is-nav {
  background: var(--teal-dim);
  color: var(--teal-l);
  border-color: rgba(70,199,186,0.35);
}
.assist-chip.is-nav:hover {
  background: rgba(70,199,186,0.20);
}

/* Pill numérico junto a "Prospectos" en la ficha de propiedad */
.prospects-pill {
  display: inline-block; margin-left: 4px;
  font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: var(--teal); color: #fff;
}

/* ── Stats collapsibles ──
   Bloque de KPIs que arranca colapsado y se despliega al click. Reduce ruido
   visual en la parte superior de listados grandes (propiedades, contratos…). */
.stats-collapsible { margin-bottom: 14px; }
.stats-collapse-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.stats-collapse-btn:hover { background: var(--card-h); border-color: var(--glass-highlight); }
.stats-collapse-btn .stats-collapse-arrow { font-size: 10px; opacity: 0.7; transition: transform 0.2s; }
.stats-collapsible[data-collapsed="true"] .stats-collapse-arrow { transform: rotate(-90deg); }
.stats-collapsible[data-collapsed="true"] .stats-collapse-body { display: none; }
.stats-collapse-body { margin-top: 12px; animation: fadeUp 0.2s ease; }

/* ── GRIDS ── */
.g4  { display: grid; grid-template-columns: repeat(4,1fr);    gap: 14px; }
.g3  { display: grid; grid-template-columns: repeat(3,1fr);    gap: 14px; }
.g2  { display: grid; grid-template-columns: 1fr 1fr;           gap: 14px; }
.g21 { display: grid; grid-template-columns: 1.7fr 1fr;         gap: 14px; }
.g12 { display: grid; grid-template-columns: 1fr 1.7fr;         gap: 14px; }
.g32 { display: grid; grid-template-columns: 1.5fr 1fr;         gap: 14px; }

/* ── Vista Clientes: avatar, pills clickeables, fila expandida con matches ── */
.client-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--midnight) center/cover no-repeat;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff;
  cursor: pointer;
}
.client-av-init { background: linear-gradient(135deg, var(--teal), var(--sand)); }
.pill-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; border: 0;
  font-size: 10.5px; font-weight: 600; line-height: 1.6;
  cursor: pointer; transition: transform 0.1s, filter 0.15s;
}
.pill-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.pill-btn.p-teal { background: var(--teal-dim, rgba(70,199,186,0.18)); color: var(--teal-l, var(--teal)); }
.pill-btn.p-sand { background: rgba(220,180,110,0.18); color: var(--sand); }

.client-matches-row { background: var(--card); }
:root[data-theme="light"] .client-matches-row { background: rgba(70,199,186,0.04); }
.client-matches-cell { padding: 0 !important; border-top: 0 !important; }
.client-matches-host { padding: 12px 18px 16px; border-bottom: 1px solid var(--border); }
.match-group { margin-bottom: 14px; padding: 10px 12px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 9px; }
.match-group:last-child { margin-bottom: 0; }
.match-group-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
.match-group-hd strong { color: var(--text); font-weight: 600; }
.match-table tbody tr td { padding: 6px 8px; }
.match-table tr:hover td { background: var(--card-h); }
.match-thumb { width: 56px; height: 42px; border-radius: 6px; border: 1px solid var(--border); }

/* ── Ficha de cliente: avatar grande con upload, thread de chat ── */
.cdet-head { display: flex; gap: 16px; align-items: center; }
.cdet-avatar-wrap { position: relative; flex-shrink: 0; }
.cdet-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--midnight) center/cover no-repeat;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 600; color: #fff;
}
.cdet-avatar-init { background: linear-gradient(135deg, var(--teal), var(--sand)); }
.cdet-avatar-edit {
  position: absolute; bottom: -2px; right: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: background 0.15s;
}
.cdet-avatar-edit:hover { background: var(--card-h); }

.cdet-chat-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.cdet-msg { padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; max-width: 88%; }
.cdet-msg-out { background: var(--teal-dim, rgba(70,199,186,0.18)); align-self: flex-end; border-top-right-radius: 3px; }
.cdet-msg-in  { background: var(--card); border: 1px solid var(--border); align-self: flex-start; border-top-left-radius: 3px; }
.cdet-msg-meta { font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.cdet-msg-meta em { font-style: italic; color: var(--text); }
.cdet-msg-body { white-space: pre-wrap; word-wrap: break-word; }

.cdet-chat-composer { padding-top: 12px; border-top: 1px solid var(--border); }
.cdet-chat-composer-meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.cdet-chat-composer textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 8px 10px; font-family: inherit; font-size: 13px; resize: vertical; }
.cdet-chat-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* ── KPI ── */
.kpi {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 17px 19px;
  position: relative; overflow: hidden;
  box-shadow: var(--glass-shadow);
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: var(--kpi-color, var(--teal)); }
.kpi:hover { background: var(--glass-bg-strong); transform: translateY(-2px); box-shadow: var(--glass-shadow-lg); }
.kpi-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.kpi-label { font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.kpi-icon { font-size: 15px; opacity: 0.55; }
.kpi-val { font-size: 25px; font-weight: 600; letter-spacing: -0.5px; line-height: 1; margin-bottom: 7px; }
.kpi-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge { font-size: 10px; padding: 2px 6px; border-radius: 20px; font-weight: 500; }
.up   { background: var(--green-dim); color: var(--green); }
.dn   { background: var(--red-dim);   color: var(--red); }
.neu  { background: var(--sand-dim);  color: var(--sand); }
.kpi-note { font-size: 10.5px; color: var(--muted); }

/* ── CARD ── */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 19px 21px;
  box-shadow: var(--glass-shadow);
}
.card-hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; gap: 12px; flex-wrap: wrap; }
.card-title { font-size: 13.5px; font-weight: 500; margin-bottom: 2px; }
.card-sub { font-size: 11px; color: var(--muted); }
/* card-link se usa en <button>: hay que resetear el chrome nativo del browser
   (background/border buttonface) que sino se ve como un recuadro gris sucio. */
.card-link {
  font-size: 11px; color: var(--teal-l);
  background: none; border: none; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  padding: 4px 8px; border-radius: 7px;
  transition: background 0.14s ease, color 0.14s ease;
}
.card-link:hover { background: var(--hover-tint); }
.card-link:active { transform: translateY(0.5px); }
.placeholder { padding: 30px; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.placeholder strong { color: var(--text); }

/* ── TABLE ── */
.t-wrap { overflow-x: auto; }
.t { width: 100%; border-collapse: collapse; }
.t th { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 0 9px; border-bottom: 1px solid var(--border); font-weight: 400; white-space: nowrap; }
.t td { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12px; vertical-align: middle; }
.t td + td, .t th + th { padding-left: 10px; }
.t tr:last-child td { border-bottom: none; }
.t tr:hover td { color: var(--text); }
.t-name { font-weight: 500; margin-bottom: 1px; }
.t-sub  { font-size: 10.5px; color: var(--muted); }
.t-val  { font-weight: 600; color: var(--sand); white-space: nowrap; }

/* PILLS */
.pill { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 500; white-space: nowrap; display: inline-block; }
.p-teal   { background: var(--teal-dim);   color: var(--teal-l); }
.p-sand   { background: var(--sand-dim);   color: var(--sand); }
.p-green  { background: var(--green-dim);  color: var(--green); }
.p-red    { background: var(--red-dim);    color: var(--red); }
.p-purple { background: var(--purple-dim); color: #A78BFA; }
.p-grey   { background: var(--pill-grey-bg); color: var(--muted); }

/* ── BAR CHART ── */
.bar-chart { display: flex; align-items: flex-end; gap: 7px; height: 110px; }
.bc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bc-bars { width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 90px; }
.bc-bar { border-radius: 4px 4px 0 0; width: 45%; min-height: 4px; transition: opacity 0.2s; }
.bc-bar:hover { opacity: 0.8; }
.bc-lbl { font-size: 9.5px; color: var(--muted); }

/* ── FUNNEL ── */
.funnel-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.fn-lbl { font-size: 11px; color: var(--muted); width: 110px; flex-shrink: 0; line-height: 1.3; }
.fn-track { flex: 1; background: var(--border); border-radius: 4px; height: 22px; overflow: hidden; }
.fn-bar { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 8px; font-size: 10.5px; font-weight: 500; color: #fff; }
.fn-count { font-size: 11px; font-weight: 500; width: 28px; text-align: right; flex-shrink: 0; }

/* ── DONUT ── */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-rel { position: relative; width: 110px; height: 110px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
svg.donut { transform: rotate(-90deg); position: absolute; }
.donut-center { text-align: center; }
.donut-val { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; }
.donut-lbl { font-size: 10px; color: var(--muted); }
.dl { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 140px; }
.dl-row { display: flex; align-items: center; gap: 7px; }
.dl-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.dl-name { flex: 1; font-size: 11.5px; color: var(--muted); }
.dl-pct { font-size: 11.5px; font-weight: 500; }

/* ── MINI STAT ── */
.mini {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 13px 15px; display: flex; align-items: center; gap: 11px;
  box-shadow: var(--glass-shadow);
}
.mini-ico { font-size: 18px; opacity: 0.7; }
.mini-val { font-size: 17px; font-weight: 600; letter-spacing: -0.4px; }
.mini-lbl { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* ── AGENT ROW ── */
.ag-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ag-row:last-child { border-bottom: none; }
.ag-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; color: #fff; }
.ag-name { font-size: 12px; font-weight: 500; }
.ag-meta { font-size: 10.5px; color: var(--muted); }
.ag-val { font-size: 12px; font-weight: 600; color: var(--sand); white-space: nowrap; margin-left: auto; }

/* ── ACTIVITY ── */
.act { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.act:last-child { border-bottom: none; }
.act-line-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 3px; }
.act-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.act-line { width: 1px; flex: 1; background: var(--border); margin-top: 3px; }
.act-title { font-size: 12px; font-weight: 500; margin-bottom: 2px; line-height: 1.4; }
.act-meta  { font-size: 10.5px; color: var(--muted); }

/* ── TIMELINE BAR ── */
.timeline-bar { display: flex; height: 40px; border-radius: 8px; overflow: hidden; gap: 2px; margin-bottom: 10px; }
.tl-seg { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; border-radius: 6px; transition: flex 0.3s; padding: 0 4px; text-align: center; }

/* ── OPS TABS ── */
.ops-tabs { display:flex; gap:6px; margin-bottom:13px; flex-wrap: wrap; }
.ops-tab { display:flex; align-items:center; gap:6px; padding:6px 13px; border-radius:7px; border:1px solid var(--border); background:var(--card); color:var(--muted); cursor:pointer; font-size:12px; font-family:'Roboto',sans-serif; transition:all 0.15s; }
.ops-tab.active { background: var(--glass-bg-strong); color:var(--text); border-color: var(--glass-highlight); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.ops-tab:hover:not(.active) { background:var(--card-h); color:var(--text); }
.ops-tab-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ops-tab-count { font-size:10px; background:var(--pill-grey-bg); padding:1px 5px; border-radius:10px; margin-left:2px; }

/* ── PORTAL BADGE ── */
.portal-b { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; display: inline-block; }
.pz { background: rgba(0,122,255,0.18); color: #4DA3FF; }
.pa { background: rgba(255,149,0,0.18);  color: #FFB347; }
.pm { background: rgba(255,214,0,0.18);  color: #D4B800; }
.pr { background: rgba(192,57,43,0.18);  color: var(--red); }
.pi { background: var(--purple-dim); color: #A78BFA; }

.ppc-bar-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 22px; }
.ppc-bar { position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; border-radius: 4px; opacity: 0.55; }
.ppc-bar-wrap span { position: relative; font-size: 11px; font-weight: 600; color: #fff; }

/* ── CONTRACT WIZARD STEPPER ── */
.contract-wizard-steps { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
/* Footer del wizard sticky al pie de la ficha. Si no, en steps con mucho
   contenido (ej. grilla de propiedades del step 1) el botón "Siguiente" queda
   abajo de todo y no se ve sin scrollear (Bug #30). */
.contract-wizard-nav {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.cws-step { display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:7px; border:1px solid var(--border); background:var(--card); color:var(--muted); font-size:12px; transition:all 0.15s; }
.cws-step.active { background: var(--glass-bg-strong); color:var(--text); border-color: var(--glass-highlight); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.cws-step.done { color:var(--text); border-color: var(--teal); }
.cws-step.clickable { cursor:pointer; }
.cws-step.clickable:hover { background:var(--card-h); }
.cws-num { display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--input-bg); font-size:11px; font-weight:600; }
.cws-step.active .cws-num { background: var(--teal); color:#fff; }
.cws-step.done .cws-num   { background: var(--teal); color:#fff; }
.cws-step.done .cws-num::after { content: '✓'; }
.cws-step.done .cws-num span { display:none; }
.cws-lbl { font-weight:500; }
.cws-sep { flex:1; height:1px; background:var(--border); min-width:20px; }

/* ── CONTRACT: grilla de propiedades en el paso 1 ── */
.contract-prop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.contract-prop-card { display:flex; flex-direction:column; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--card); cursor:pointer; transition:all 0.15s; text-align:left; font-family:inherit; }
.contract-prop-card:hover { background:var(--card-h); border-color: var(--glass-highlight); }
.contract-prop-card.selected { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(48,179,167,0.18); }
.contract-prop-card .cpc-img { width:100%; aspect-ratio:16/10; border-radius:6px; background:var(--midnight) center/cover no-repeat; margin-bottom:8px; }
.contract-prop-card .cpc-title { font-size:12.5px; font-weight:500; color:var(--text); margin-bottom:2px; line-height:1.3; }
.contract-prop-card .cpc-addr  { font-size:11px; color:var(--muted); margin-bottom:4px; }
.contract-prop-card .cpc-meta  { font-size:11px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; }

/* ── CONTRACT: chips grandes para tipo de contrato (paso 2) ── */
.contract-kind-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.contract-kind-card { display:flex; flex-direction:column; gap:8px; padding:18px 16px; border:1px solid var(--border); border-radius:10px; background:var(--card); cursor:pointer; text-align:left; font-family:inherit; transition:all 0.15s; color:inherit; }
.contract-kind-card:hover { background:var(--card-h); border-color: var(--glass-highlight); }
.contract-kind-card.selected { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(48,179,167,0.18); background: var(--glass-bg-strong); }
.contract-kind-card .ckc-icon { font-size:28px; }
.contract-kind-card .ckc-title { font-size:14px; font-weight:600; color:var(--text); }
.contract-kind-card .ckc-desc  { font-size:11.5px; color:var(--muted); line-height:1.5; }

/* ── ADMIN · Screenshots del sitio público ── */
.admin-screenshots-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; }
.admin-screenshot-card { display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:10px; background:var(--card); overflow:hidden; }
.admin-screenshot-preview { aspect-ratio:4/3; background:var(--midnight); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--border); }
.admin-screenshot-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.admin-screenshot-empty { color:var(--muted); font-size:12.5px; font-style:italic; padding:24px; text-align:center; }
.admin-screenshot-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; }
.admin-screenshot-title { font-size:13.5px; font-weight:600; color:var(--text); line-height:1.3; }
.admin-screenshot-key { font-size:11px; color:var(--muted); }
.admin-screenshot-key code { background:var(--card-h); padding:1px 6px; border-radius:4px; font-size:10.5px; }
.admin-screenshot-desc { font-size:12px; color:var(--muted); line-height:1.5; margin:2px 0; }
.admin-screenshot-meta { font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 8px; line-height:1.5; }
.admin-screenshot-meta a { color:var(--teal-l); }
.admin-screenshot-uploaded { font-size:10.5px; color:var(--muted); font-style:italic; margin-top:2px; }
.admin-screenshot-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.admin-screenshot-upload-label { cursor:pointer; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.view.active > * { animation: fadeUp 0.35s ease both; }
.view.active > *:nth-child(1) { animation-delay: 0.04s; }
.view.active > *:nth-child(2) { animation-delay: 0.09s; }
.view.active > *:nth-child(3) { animation-delay: 0.14s; }
.view.active > *:nth-child(4) { animation-delay: 0.19s; }
.view.active > *:nth-child(5) { animation-delay: 0.24s; }

/* ══════════════════════════════════════════════════════════════
   Dashboard — Tab "Mi pipeline"
   KPIs personales del agente + 4 listas (próximas visitas, leads sin
   responder, ops en curso, propiedades sin actividad).
   ══════════════════════════════════════════════════════════════ */
.me-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 900px) { .me-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .me-kpis { grid-template-columns: repeat(2, 1fr); } }
.me-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--mk-color, var(--teal-l));
  border-radius: 9px;
  padding: 10px 12px;
}
.me-kpi-val {
  font-family: 'Roboto', sans-serif;
  font-size: 22px; font-weight: 600;
  color: var(--mk-color, var(--teal-l));
  line-height: 1.1;
}
.me-kpi-lbl {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.me-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) { .me-grid { grid-template-columns: 1fr; } }

.me-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--border);
  transition: background 0.12s ease;
}
.me-row:first-child { border-top: none; }
.me-row:hover { background: var(--card-h, rgba(255,255,255,0.03)); }
.me-row.is-urgent .me-when-ico { color: var(--red); }
.me-row.is-urgent .me-when-txt { color: var(--red); font-weight: 600; }
.me-row-when {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap;
}
.me-when-ico { font-size: 14px; line-height: 1; }
.me-when-txt { font-size: 11px; }
.me-row-main { min-width: 0; }
.me-row-title {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.me-row-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.me-empty {
  padding: 18px 12px; text-align: center; font-size: 12px;
  color: var(--muted); font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   Change requests — banner del dashboard + modal de revisión
   ══════════════════════════════════════════════════════════════ */
.dash-cr-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(168,120,245,0.14), rgba(132,204,255,0.06));
  border: 1px solid rgba(168,120,245,0.35);
  border-radius: 11px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.dash-cr-banner-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-cr-icon { font-size: 22px; line-height: 1; }
.dash-cr-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.dash-cr-sub   { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.cr-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--card);
  transition: opacity 0.18s ease;
}
.cr-card-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.cr-card-title { font-size: 13.5px; font-weight: 600; }
.cr-card-title a { color: var(--teal-l); text-decoration: none; }
.cr-card-title a:hover { text-decoration: underline; }
.cr-card-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.cr-card-count {
  font-size: 10.5px; font-weight: 600;
  background: rgba(168,120,245,0.16); color: var(--purple, #a878f5);
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}
.cr-card-note {
  font-size: 12px; color: var(--text); font-style: italic;
  background: rgba(132,204,255,0.06);
  border-left: 3px solid rgba(132,204,255,0.5);
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.cr-diff {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px;
}
.cr-diff-row {
  display: grid;
  grid-template-columns: 130px 1fr 18px 1fr;
  gap: 8px; align-items: center;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.cr-diff-field { font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em; }
.cr-diff-before { color: var(--muted); text-decoration: line-through; opacity: 0.85; }
.cr-diff-arrow { text-align: center; color: var(--muted); }
.cr-diff-after  { color: var(--teal-l); font-weight: 600; }
.cr-diff-lbl {
  display: inline-block; font-size: 9.5px; color: var(--muted);
  background: rgba(255,255,255,0.05); padding: 1px 5px;
  border-radius: 4px; margin-right: 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.cr-card-ft {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.cr-response-note {
  flex: 1; min-width: 200px;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); padding: 6px 10px; border-radius: 6px;
  font-family: inherit; font-size: 12px;
  resize: vertical;
}
@media (max-width: 600px) {
  .cr-diff-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .cr-diff-arrow { display: none; }
  .cr-diff-field { font-size: 10px; }
}

/* Inicio: agenda del día como <details> colapsable abajo de los KPIs+listas.
   No es una card grande aparte, queda como complemento abajo. */
.dash-agenda-details {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  padding: 0 14px;
}
.dash-agenda-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; cursor: pointer;
  list-style: none;
}
.dash-agenda-summary::-webkit-details-marker { display: none; }
.dash-agenda-summary::after {
  content: '▾';
  color: var(--muted);
  font-size: 12px;
  margin-left: 8px;
  transition: transform 0.18s;
}
.dash-agenda-details[open] .dash-agenda-summary::after { transform: rotate(180deg); }
.dash-agenda-details #dash-today-agenda {
  padding: 0 0 12px;
  border-top: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints:
     ≥1100px  → desktop (default arriba)
     1100-900 → tablet wide  (g4 → 2col, g21/g12/g32 → 1col)
     900-700  → tablet
     ≤700px   → mobile (sidebar drawer, todo apilado)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   TOUCH DEVICES — comportamientos de "app nativa" en mobile/tablet
   Aplica a cualquier device táctil (pointer:coarse) independiente del
   ancho del viewport. Más amplio que max-width:699px (cubre tablets
   en landscape y phones plus que se quedaban fuera).
   ════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Anti-zoom iOS Safari: cualquier input/select/textarea con
     font-size < 16px dispara zoom al focusear. Forzamos 16px. */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea {
    font-size: 16px !important;
  }
  /* Sin flash gris al tocar elementos clickables — sensación nativa. */
  * { -webkit-tap-highlight-color: transparent; }
  /* Sin delay de 300ms del double-tap-zoom en botones/links — el tap es
     inmediato. También evita zoom al double-tap accidental. */
  button, a, .btn, .icon-btn, .nav-item, .tb-nav-btn, .chip-opt,
  .dm-msg-link, .dm-section-hd, .dm-subtab, .dm-list-item,
  .ops-tab, .prop-quick-chip { touch-action: manipulation; }
  /* No permitir que iOS auto-ajuste el tamaño del texto en landscape. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  /* User-select=none en elementos de navegación/acción (no en textos
     copiables ni inputs). Evita el menú de selección al long-press. */
  button, .btn, .icon-btn, .nav-item, .tb-nav-btn,
  .dm-section-hd, .dm-subtab, .ops-tab, .prop-quick-chip,
  .chip-opt, .menu-btn { -webkit-user-select: none; user-select: none; }
  /* Scroll containers: bloquea el "rubber band" del body cuando se
     llega al borde del scroll interno. Sensación de app nativa. */
  .dm-msgs, .dm-list, .notif-list, .content { overscroll-behavior: contain; }
}

@media (max-width: 1099px) {
  .g4  { grid-template-columns: repeat(2, 1fr); }
  .g3  { grid-template-columns: repeat(2, 1fr); }
  .g21, .g12, .g32 { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  .g3  { grid-template-columns: 1fr; }
  .g2  { grid-template-columns: 1fr; }
  .content { padding: 18px 18px 32px; gap: 14px; }
  .topbar { padding: 12px 18px; }
}

@media (max-width: 699px) {
  :root { --sidebar-w: 0px; }
  body { overflow-y: auto; }
  html, body { height: auto; }
  /* Override de la regla `body:has(> .shell) { overflow: hidden }` definida
     en 04-cropper-amenities.css. Esa regla bloquea el scroll del body en
     desktop (donde el .content scrollea internamente), pero rompe mobile
     donde .content pasa a overflow:visible y el body debe scrollear. Sin
     este override, las vistas del CRM en mobile quedan atrapadas sin
     scroll vertical posible. Specificity de body:has() > body solo, por eso
     hay que repetir el selector. */
  body:has(> .shell) { overflow-y: auto; overflow-x: hidden; height: auto; }

  /* iOS Safari hace auto-zoom al tocar un input/select/textarea con
     font-size < 16px (y luego mantiene el zoom, "modificando" el layout).
     Forzamos 16px en mobile para evitar el comportamiento. En desktop
     dejamos los tamaños chicos originales.
     Usamos !important porque varios componentes redeclaran font-size con
     mayor especificidad (.field input, .net-composer textarea, etc.) y el
     fix debe ganar siempre en mobile — la UX de zoom es peor que un input
     un toque más grande. */
  input, select, textarea, button,
  .field input, .field select, .field textarea,
  .net-composer textarea, .cdet-chat-composer textarea,
  .field-inline, .bug-url-input, #bug-desc {
    font-size: 16px !important;
  }
  .shell { display: block; height: auto; min-height: 100vh; }
  .main { height: auto; overflow: visible; }
  .content { overflow-y: visible; padding: 16px 14px 28px; gap: 12px; }

  /* Sidebar como drawer off-canvas — más opaca en mobile para legibilidad */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 250px; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 90;
    background: var(--midnight);
    box-shadow: 8px 0 32px rgba(0,0,0,0.45), inset -1px 0 0 var(--glass-border);
  }
  :root[data-theme="light"] .sidebar { background: var(--navy); box-shadow: 8px 0 32px rgba(26,39,64,0.18), inset -1px 0 0 var(--glass-border); }
  .sidebar.open { transform: translateX(0); }

  .menu-btn { display: inline-flex; }

  /* Bug #148: respetar la status bar nativa de iOS en PWA (status-bar-style
     black-translucent pinta el contenido bajo la barra). max() = nunca menos
     de 12px (en navegadores sin safe-area env() devuelve 0). */
  .topbar { padding: max(12px, env(safe-area-inset-top)) 14px 12px; gap: 8px; }
  /* Bug #147: en pantallas chicas los botones de acción de cada línea WA
     (Desconectar/Eliminar/…) no entran en fila → se apilan. */
  .wa-line-actions { flex-direction: column; align-items: stretch; }
  .tb-title { font-size: 16px; }
  .tb-sub { font-size: 10.5px; }
  .icon-btn { width: 30px; height: 30px; font-size: 13px; }
  .tb-nav { display: none; }
  .tb-logo { display: none; }
  .tb-search { display: none; }
  .nav-mobile-only { display: flex; }
  .nav-section-label.nav-mobile-only { display: block; }

  /* En mobile, comprimir el botón de usuario a solo avatar para ganar espacio */
  .tb-user-btn { padding: 3px; gap: 0; }
  .tb-user-text, .tb-user-chev { display: none; }
  .tb-user-btn .avatar-sm { width: 28px; height: 28px; }
  .tb-user-menu { min-width: 220px; right: -4px; }

  .g4 { grid-template-columns: 1fr; }
  .kpi-val { font-size: 22px; }
  .card { padding: 16px 16px; }

  /* Tablas: scroll horizontal y reducir labels largos */
  .fn-lbl { width: 92px; font-size: 10.5px; }
  .bar-chart { height: 96px; }
  .bc-bars { height: 78px; }
}

@media (max-width: 420px) {
  .tb-title { font-size: 14.5px; }
  .kpi { padding: 14px 14px; }
  .card { padding: 14px 14px; }
  .ops-tab { padding: 5px 10px; font-size: 11px; }
  .funnel-row { gap: 6px; }
  .fn-lbl { width: 80px; font-size: 10px; }
}

/* Cartelería es SOLO desktop: el editor de canvas necesita ~900px (toolbar +
   panel + lienzo). Ocultamos sus puntos de acceso —nav del sidebar y botón
   "Generar cartel" de la ficha— por debajo de ese ancho. Quien igual llegue
   por URL directa ve el aviso interno (.cart-desktop-only). */
@media (max-width: 900px) {
  .cart-access { display: none !important; }
}

/* ═══════════════ Vista Mapa ═══════════════ */
.map-shell {
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  min-height: 480px;
}
.map-controls {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--navy);
  align-items: center;
  flex-wrap: wrap;
}
.map-controls input,
.map-controls select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}
.map-controls input { flex: 1; min-width: 200px; }
.map-controls input:focus,
.map-controls select:focus { outline: none; border-color: var(--teal); }
.map-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
  cursor: pointer; user-select: none;
}
.map-count {
  font-size: 11.5px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
.map-canvas {
  flex: 1;
  width: 100%;
  background: var(--midnight);
}
.map-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  border-top: 1px solid var(--border);
}

/* Mini-mapa del resumen */
.mini-map {
  height: 220px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--midnight);
  border: 1px solid var(--border);
}

/* Pin clásico (gotita) — usado por el ghost del geocoding y compat. */
.map-pin {
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.map-pin::after {
  content: '';
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  display: block;
}
.map-pin.own     { background: var(--teal); }
.map-pin.foreign { background: var(--purple); }

/* ─── Pin tipo "cápsula de precio" (Zillow-style) ─────────────────────
   Mostramos el precio abreviado directamente sobre el mapa, en color
   por tipo de operación, con icono de tipo de propiedad. Mucho más
   informativo que un punto y permite escanear precios en el mapa. */
.map-pin-wrap { /* contenedor del divIcon — reseteamos lo default de leaflet */
  background: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible;
}
/* La cápsula se ancla por su centro-bottom al punto del mapa (de ahí el translate).
   Como el wrap tiene 0×0, no necesitamos iconSize/iconAnchor exactos en Leaflet. */
.map-price-pin {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 3px 5px;
  border-radius: 999px;
  font-family: 'Roboto', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.15);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.map-price-pin:hover {
  transform: translate(-50%, -100%) translateY(-1px) scale(1.04);
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.2);
}
.map-price-pin .mpp-ico {
  font-size: 11px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  flex-shrink: 0;
}
.map-price-pin .mpp-cur { font-size: 9.5px; opacity: 0.88; font-weight: 600; }
.map-price-pin .mpp-num { font-size: 11.5px; }
.map-price-pin .mpp-sfx {
  font-size: 9px; opacity: 0.85; font-weight: 600;
  margin-left: 1px;
}
/* Colores por operación */
.map-price-pin.op-sale  { background: linear-gradient(180deg, var(--teal-l), var(--teal)); }
.map-price-pin.op-rent  { background: linear-gradient(180deg, #DDC089, var(--sand)); color: #2A1F0A; }
.map-price-pin.op-temp  { background: linear-gradient(180deg, #BC95F8, var(--purple)); }
.map-price-pin.op-dev   { background: linear-gradient(180deg, #F58176, var(--red)); }
/* Pin de la red (ajeno) — borde violeta para distinguirlo del propio */
.map-price-pin.is-foreign { border-color: var(--purple); }
.map-price-pin.is-foreign::after {
  content: '⇆';
  position: absolute;
  top: -7px; right: -7px;
  background: var(--purple);
  color: #fff;
  border-radius: 50%;
  width: 14px; height: 14px;
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
  font-weight: 700;
}

/* Variante compacta para el mini-mapa del Resumen (pin más chico) */
.map-pin-wrap.is-mini .map-price-pin {
  padding: 2px 6px 2px 4px;
  font-size: 10px;
  border-width: 1.5px;
}
.map-pin-wrap.is-mini .map-price-pin .mpp-ico {
  width: 13px; height: 13px; font-size: 9px;
}
.map-pin-wrap.is-mini .map-price-pin .mpp-num { font-size: 10px; }
.map-pin-wrap.is-mini .map-price-pin .mpp-cur { font-size: 8px; }

/* ─── Popup compacto (consistente entre Vista Mapa y Red Housia) ───── */
.leaflet-popup-content-wrapper {
  background: var(--navy);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
}
.leaflet-popup-content { margin: 0; min-width: 200px; }
.leaflet-popup-tip { background: var(--navy); border: 1px solid var(--border); }
.leaflet-popup-close-button { color: var(--muted) !important; padding: 6px 8px 0 0 !important; }
.map-popup-compact { font-family: 'Roboto', sans-serif; width: 220px; }
.map-popup-compact .mpc-photo {
  position: relative;
  width: 100%;
  height: 92px;
  background-size: cover;
  background-position: center;
  background-color: var(--midnight);
  border-radius: 9px 9px 0 0;
}
.map-popup-compact .mpc-op {
  position: absolute;
  top: 6px; left: 6px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.map-popup-compact .mpc-op.op-sale  { background: var(--teal); }
.map-popup-compact .mpc-op.op-rent  { background: var(--sand); color: #2A1F0A; }
.map-popup-compact .mpc-op.op-temp  { background: var(--purple); }
.map-popup-compact .mpc-op.op-dev   { background: var(--red); }
.map-popup-compact .mpc-body { padding: 8px 10px 10px; }
.map-popup-compact .mpc-price {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--teal-l);
  line-height: 1.15;
  margin-bottom: 4px;
}
.map-popup-compact .mpc-meta {
  font-size: 10.5px;
  color: var(--text);
  margin-bottom: 3px;
  line-height: 1.3;
}
.map-popup-compact .mpc-meta .mpc-type { font-weight: 600; }
.map-popup-compact .mpc-meta .mpc-specs { color: var(--muted); }
.map-popup-compact .mpc-addr {
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.map-popup-compact .mpc-owner {
  font-size: 9.5px;
  color: var(--purple);
  font-weight: 600;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-popup-compact .mpc-btn {
  width: 100%;
  background: linear-gradient(180deg, var(--teal-l), var(--teal));
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.map-popup-compact .mpc-btn:hover { filter: brightness(1.08); }

/* Mobile: popup aún más chico para no tapar el mapa */
@media (max-width: 699px) {
  .map-popup-compact { width: 180px; }
  .map-popup-compact .mpc-photo { height: 76px; }
  .map-popup-compact .mpc-price { font-size: 14px; }
  .map-popup-compact .mpc-meta,
  .map-popup-compact .mpc-addr { font-size: 10px; }
  .map-popup-compact .mpc-btn { font-size: 10.5px; padding: 5px 8px; }
  /* Pin un poco más chico para evitar superposiciones en zoom bajo */
  .map-price-pin { font-size: 10.5px; padding: 2px 7px 2px 4px; }
  .map-price-pin .mpp-ico { width: 14px; height: 14px; font-size: 10px; }
  .map-price-pin .mpp-num { font-size: 10.5px; }
}

/* Context menu del mapa (click derecho sobre el canvas) */
.map-ctx-menu {
  position: absolute;
  z-index: 1000;
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  overflow: hidden;
}
.map-ctx-menu[hidden] { display: none; }
.map-ctx-menu button {
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 9px 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-ctx-menu button:hover { background: var(--teal-dim); }

/* Autocomplete de geocoding en el control del mapa */
#map-geo-ac .addr-ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1001;
}

/* Flash de feedback cuando se copia algo al clipboard */
.toast-flash {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(58,173,173,0.95);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  animation: toastFlash 1.8s ease-out forwards;
}
@keyframes toastFlash {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); }
}

/* ═══════════════ Identidad de la inmobiliaria (sidebar) ═══════════════ */
.agency-identity {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; margin-bottom: 14px;
  border-radius: 9px; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.agency-identity:hover { background: var(--card); border-color: var(--border); }
.agency-logo {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--sand));
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 700;
  color: #fff;
}
.agency-logo.has-img { background-color: #fff; }
.agency-identity-text { min-width: 0; }
.agency-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agency-identity-sub { font-size: 9.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* ═══════════════ Tour de bienvenida ═══════════════ */
.tour-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.tour-overlay[hidden] { display: none; }
.tour-card {
  width: 100%; max-width: 460px;
  background: var(--glass-bg-elev);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow-lg);
  padding: 14px 14px 18px;
  position: relative;
}
.tour-skip {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--muted);
  font-size: 11.5px; cursor: pointer; font-family: inherit;
  padding: 4px 6px; border-radius: 6px;
}
.tour-skip:hover { color: var(--text); background: var(--card); }
.tour-slide { text-align: center; padding: 30px 22px 16px; }
.tour-slide.accent .tour-icon {
  background: var(--purple-dim);
  box-shadow: 0 0 0 6px var(--purple-dim);
}
.tour-countdown {
  position: absolute; top: 14px; left: 16px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tour-icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 16px; background: var(--teal-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.tour-title {
  font-family: 'Roboto', sans-serif;
  font-size: 21px; font-weight: 600; color: var(--text);
  margin-bottom: 9px;
}
.tour-text { font-size: 13.5px; line-height: 1.65; color: var(--muted); max-width: 340px; margin: 0 auto; }
.tour-text strong { color: var(--text); }
.tour-step { font-size: 10.5px; color: var(--dim); margin-top: 14px; letter-spacing: 0.04em; }
.tour-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border);
}
.tour-dots { display: flex; gap: 6px; padding-left: 6px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 0.2s, width 0.2s; }
.tour-dot.active { background: var(--teal-l); width: 18px; border-radius: 3px; }
.tour-controls { display: flex; gap: 6px; }
.tour-ctrl {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.tour-ctrl:hover { background: var(--card-h); }

/* ═══════════════ Splash de Inmobiliarias amigas ═══════════════ */
.modal.friends-intro { padding: 0; overflow: hidden; }
.friends-intro-hero {
  text-align: center; padding: 30px 28px 22px;
  background: linear-gradient(160deg, var(--teal-dim), transparent);
  border-bottom: 1px solid var(--border);
}
.friends-intro-icon {
  width: 58px; height: 58px; margin: 0 auto 14px;
  border-radius: 15px; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
}
.friends-intro-lede { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-top: 8px; }
.friends-intro-points { padding: 20px 26px 6px; display: flex; flex-direction: column; gap: 16px; }
.fi-point { display: flex; gap: 12px; align-items: flex-start; }
.fi-ico {
  font-size: 20px; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.fi-point > div { display: flex; flex-direction: column; gap: 3px; }
.fi-point strong { font-size: 13px; color: var(--text); }
.fi-point span { font-size: 12px; color: var(--muted); line-height: 1.55; }

/* ═══════════════ Hero de la sección Amigas ═══════════════ */
.friends-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, var(--teal-dim), var(--purple-dim));
  border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
  flex-wrap: wrap;
}
.friends-hero-main { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.friends-hero-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.friends-hero-title { font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.friends-hero-text { font-size: 12px; color: var(--muted); line-height: 1.55; }
.friends-hero-text strong { color: var(--text); }
.friends-hero-help {
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); padding: 8px 14px; border-radius: 9px;
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.friends-hero-help:hover { background: var(--card-h); }
@media (max-width: 560px) {
  .friends-hero-help { width: 100%; }
}

/* ── Modal "Buscar inmobiliaria" — rediseño limpio ── */
.friends-search-modal .fs-search-wrap {
  position: relative; margin: 12px 0 6px;
}
.friends-search-modal .fs-search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--muted); pointer-events: none;
}
.friends-search-modal .fs-search-wrap input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px 12px 40px;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: 14.5px;
  border-radius: 10px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.friends-search-modal .fs-search-wrap input:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim);
}
.friends-search-modal .fs-hint {
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
  margin-bottom: 14px;
}
.friends-search-modal .fs-results {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 280px; overflow-y: auto;
  margin-bottom: 12px;
}
.friends-search-modal .fs-results:empty { display: none; }
.friends-search-modal .fs-err {
  margin-top: 8px; padding: 10px 12px;
  background: rgba(229,105,93,0.10); border: 1px solid rgba(229,105,93,0.30);
  border-radius: 8px; font-size: 12.5px;
}

/* ═══════════════ Red Housia — capa social ═══════════════ */

/* Bar de filtros: chips compactos sin labels arriba. Cada chip-select
   muestra su placeholder en el primer <option>; cuando el user elige un
   valor, el chip se "ilumina" (color teal + bg dim) para que sea obvio
   que tiene un filtro aplicado.
   En MOBILE (≤640px) la barra deja de ser inline y se transforma en un
   bottom sheet modal: se muestra como overlay full-width pegado abajo
   con backdrop, slide-up. El toggle ⚙ abre/cierra ese sheet. */
.net-filterbar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
  padding: 10px;
  background: rgba(132,204,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* El selector de clase pisa al [hidden] del UA stylesheet (misma
   specificity, pero el author wins por cascada). Esto forzaba el
   panel de filtros a verse siempre aunque tuviera hidden. */
.net-filterbar[hidden] { display: none; }
.nf-chip {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 28px 7px 14px;
  font: inherit; font-size: 12.5px; line-height: 1.2;
  cursor: pointer;
  /* Custom chevron — más sutil que el nativo del browser */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23808d9a' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
  max-width: 100%;
}
.nf-chip:hover { border-color: var(--teal-l); }
.nf-chip:focus { outline: none; border-color: var(--teal-l); box-shadow: 0 0 0 3px var(--teal-dim); }
/* Cuando el select tiene un valor distinto al default (placeholder),
   marcamos el chip como activo. Lo hace el JS agregando data-active="true". */
.nf-chip[data-active="true"] { background-color: var(--teal-dim); border-color: var(--teal); color: var(--text); font-weight: 500; }
.nf-chip-narrow { min-width: 100px; }
.nf-chip-sort { min-width: 160px; margin-left: auto; }

/* Botón "⊘ All" — mismo shape pill, color distinto para que destaque */
.nf-chip-all {
  background: transparent; border: 1px dashed var(--border);
  color: var(--muted);
  padding: 7px 16px;
  background-image: none;
}
.nf-chip-all:hover { color: var(--red); border-color: var(--red); }

/* Rango de precios — dos inputs unidos por un guión */
.nf-range {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 10px;
  height: 32px;
}
.nf-range:focus-within { border-color: var(--teal-l); box-shadow: 0 0 0 3px var(--teal-dim); }
.nf-range input {
  width: 70px; padding: 4px 0;
  background: transparent; border: none; outline: none;
  color: var(--text); font: inherit; font-size: 12.5px;
  text-align: center;
}
.nf-range input::placeholder { color: var(--muted); opacity: 0.7; }
.nf-range-sep { color: var(--muted); font-size: 11px; }

/* Wrapper de cada filtro. En DESKTOP es transparent (display:contents) para
   que los chips queden inline como antes. En MOBILE se convierte en una
   fila stack con label arriba — el panel pasa a bottom sheet y necesita
   identificar cada control. */
.nf-field { display: contents; }
.nf-field-label { display: none; }
/* Header/footer del sheet — ocultos en DESKTOP, visibles en MOBILE */
.nf-sheet-hd, .nf-sheet-ft, .nf-sheet-close, .nf-sheet-apply { display: none; }

/* Backdrop semi-opaco para el sheet en MOBILE */
.nf-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99; display: none;
  animation: nfBackdropIn 0.2s ease;
}
.nf-sheet-backdrop.show { display: block; }
@keyframes nfBackdropIn { from { opacity: 0; } to { opacity: 1; } }

/* Mobile: la barra deja de ser inline y se vuelve bottom sheet modal.
   El backdrop bloquea interacciones de atrás. Slide-up con cubic-bezier
   tipo iOS para sensación nativa. */
@media (max-width: 640px) {
  .net-filterbar { padding: 8px; gap: 6px; }
  .nf-chip, .nf-range { font-size: 14px; }

  /* Sheet mode: cuando el panel está visible, lo despegamos del flujo
     y lo pegamos abajo full-width. Notch-safe vía env(safe-area-inset-bottom). */
  .net-filterbar:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch;
    max-height: 85dvh; overflow-y: auto;
    border-radius: 18px 18px 0 0;
    background: var(--card);
    border: 1px solid var(--border); border-bottom: none;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    gap: 14px;
    z-index: 100;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
    animation: nfSheetUp 0.28s cubic-bezier(0.32, 0.72, 0.2, 1);
    -webkit-overflow-scrolling: touch;
  }
  @keyframes nfSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Cada filtro pasa a fila stackeada con label arriba */
  .nf-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .nf-field-label {
    display: block;
    font-size: 11.5px; font-weight: 600;
    color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  /* Chips toman todo el ancho dentro del field */
  .nf-field .nf-chip,
  .nf-field .nf-range {
    width: 100%; min-width: 0;
    padding: 12px 32px 12px 14px;
    font-size: 15px;
  }
  .nf-field .nf-range { padding: 0 12px; height: 44px; }
  .nf-field .nf-range input { width: auto; flex: 1; font-size: 15px; }
  .nf-chip-sort { margin-left: 0; }

  /* Header del sheet: título + X */
  .nf-sheet-hd {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 4px 12px;
    border-bottom: 1px solid var(--border);
    margin: -4px -4px 0; /* trim para que el border-bottom llegue al borde del card */
  }
  .nf-sheet-hd strong { font-size: 17px; }
  .nf-sheet-close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 20px; color: var(--text);
    cursor: pointer; padding: 0;
  }
  .nf-sheet-close:active { background: var(--card-2, var(--card)); }

  /* Footer del sheet: limpiar + aplicar */
  .nf-sheet-ft {
    display: flex; gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    position: sticky; bottom: 0;
    background: var(--card);
    padding-bottom: 4px;
  }
  .nf-sheet-ft .nf-chip-all { flex: 1; padding: 12px 14px; font-size: 14px; }
  .nf-sheet-ft .nf-sheet-apply {
    display: inline-block; flex: 1;
    padding: 12px 14px; font-size: 14px; font-weight: 600;
  }
}

.net-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px;
}
.net-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: transform 0.13s, border-color 0.13s, box-shadow 0.13s;
}
.net-card:hover { transform: translateY(-2px); border-color: var(--teal-l); box-shadow: 0 8px 22px rgba(0,0,0,0.22); }
.net-card-photo {
  height: 152px; background: var(--midnight) center/cover no-repeat;
  position: relative; flex-shrink: 0;
}
.net-card-photo .nc-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.net-card-photo .nc-count {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(10,12,16,0.78); color: #fff; font-size: 10.5px;
  padding: 2px 7px; border-radius: 20px; display: flex; gap: 8px;
}
/* Distancia desde la ubicación del user (📍 X km) — esquina inferior izquierda */
.net-card-photo .nc-dist {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(10,12,16,0.78); color: #fff;
  font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.net-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; }
.net-card-price { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; color: var(--teal-l); }
.net-card-title { font-size: 12.5px; color: var(--text); font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.net-card-loc { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net-card-specs { font-size: 11px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.net-card-owner {
  display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px;
  border-top: 1px solid var(--border); font-size: 11px; color: var(--muted);
}
.net-card-owner .nco-logo {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--sand)) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 600;
}

.net-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }
.net-pager button { min-width: 88px; }
.net-pager-info { font-size: 12px; color: var(--muted); }

/* Directorio de inmobiliarias */
.net-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.net-agency-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; transition: transform 0.13s, border-color 0.13s;
}
.net-agency-card:hover { transform: translateY(-2px); border-color: var(--purple); }
.net-agency-cover {
  height: 78px; background: linear-gradient(135deg, var(--teal-dim), var(--purple-dim)) center/cover no-repeat;
}
.net-agency-body { padding: 0 13px 13px; margin-top: -22px; }
.net-agency-logo {
  width: 46px; height: 46px; border-radius: 10px; border: 2px solid var(--card);
  background: var(--midnight) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 20px; color: var(--text);
}
.net-agency-name { font-size: 13.5px; font-weight: 600; color: var(--text); margin-top: 7px; cursor: pointer; }
.net-agency-name:hover { color: var(--teal-l); }
.net-agency-tagline { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; }
.net-agency-meta { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 8px; }
.net-agency-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.net-agency-actions .btn, .net-agency-actions .card-link { font-size: 11.5px; }

/* Modal de perfil de inmobiliaria */
.net-profile-cover { height: 130px; margin: -22px -24px 0; background: linear-gradient(135deg, var(--teal-dim), var(--purple-dim)) center/cover no-repeat; border-radius: 18px 18px 0 0; }
.net-profile-head { display: flex; gap: 14px; align-items: flex-end; margin-top: -34px; padding: 0 2px; }
.net-profile-logo {
  width: 72px; height: 72px; border-radius: 14px; border: 3px solid var(--card);
  background: var(--midnight) center/cover no-repeat; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 28px; color: var(--text);
}
.net-profile-stats { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.net-profile-stat {
  background: var(--card-h); border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 12px; text-align: center; flex: 1; min-width: 84px;
}
.net-profile-stat b { display: block; font-family: 'Roboto', sans-serif; font-size: 18px; color: var(--teal-l); }
.net-profile-stat span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* Hilo de comentarios */
.net-comments { display: flex; flex-direction: column; gap: 10px; }
.net-comment { display: flex; gap: 9px; }
.net-comment-av {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--sand)) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600;
}
.net-comment-main { flex: 1; min-width: 0; }
.net-comment-hd { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.net-comment-author { font-size: 12px; font-weight: 600; color: var(--text); }
.net-comment-agency { font-size: 11px; color: var(--teal-l); }
.net-comment-time { font-size: 10.5px; color: var(--muted); margin-left: auto; }
.net-comment-body { font-size: 12.5px; color: var(--text); line-height: 1.5; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.net-comment-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0; margin-top: 3px; }
.net-comment-del:hover { color: var(--red); }
.net-composer { display: flex; gap: 8px; margin-top: 4px; }
.net-composer textarea {
  flex: 1; background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 12.5px; resize: vertical; min-height: 40px;
}
.net-composer textarea:focus { outline: none; border-color: var(--teal-l); box-shadow: 0 0 0 3px var(--teal-dim); }

/* Feed de actividad */
.net-activity { display: flex; flex-direction: column; gap: 2px; }
.net-act-item {
  display: flex; gap: 11px; padding: 11px 4px; border-bottom: 1px solid var(--border); align-items: center;
}
.net-act-item:last-child { border-bottom: none; }
.net-act-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--card-h); border: 1px solid var(--border);
}
.net-act-thumb { width: 46px; height: 46px; border-radius: 8px; flex-shrink: 0; background: var(--midnight) center/cover no-repeat; border: 1px solid var(--border); }
.net-act-main { flex: 1; min-width: 0; }
.net-act-text { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.net-act-text b { font-weight: 600; }
.net-act-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.net-act-time { font-size: 10.5px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.net-act-item .card-link { cursor: pointer; }

.net-section-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
  margin: 16px 0 8px; font-weight: 600;
}
.net-section-label:first-child { margin-top: 0; }

/* ═══════════════ Orquestador / Help desk — chat panel lateral ═══════════════
   - Side panel derecho con header arriba, mensajes en el medio, composer abajo
     (estilo mensajero clásico). Toggle Cmd/Ctrl+H.
   - Composer: textarea multilínea (autogrow) + botón enviar.
     Enter envía · Shift+Enter agrega salto de línea.
   - Quick replies (chips) acceden con Cmd/Ctrl + 1..9.
*/

/* Composer: queda al pie del panel, no scrollea con los mensajes. */
.assist-composer {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px;
  background: var(--glass-bg-elev);
  border-top: 1px solid var(--border);
}

/* Bar del composer: textarea + send. Look "input box" de chat clásico. */
.assist-bar {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--input-bg, var(--card));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 8px 8px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.assist-bar:focus-within {
  border-color: var(--teal-l);
  box-shadow: 0 0 0 3px var(--teal-dim);
}
.assist-bar.sending { border-color: var(--teal); }
.assist-bar.sending .assist-bar-send { animation: assistSend 0.42s cubic-bezier(.2,.9,.3,1.1); }
@keyframes assistSend {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-22px) scale(0.78); }
  60%  { transform: translateY(-22px) scale(0.78); opacity: 0; }
  61%  { transform: translateY(8px)   scale(1.1);  opacity: 1; }
  100% { transform: translateY(0)     scale(1); }
}
.assist-bar-input {
  flex: 1; border: none; background: transparent; color: var(--text);
  font: inherit; font-size: 13.5px; resize: none; outline: none;
  line-height: 1.5; max-height: 160px; min-height: 22px;
  padding: 4px 0; overflow-y: auto;
}
.assist-bar-input::placeholder { color: var(--dim); }
.assist-bar-send {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--teal); color: #fff; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.assist-bar-send:hover { background: var(--teal-l); }

/* ─── Panel de signals (DM nuevo, leads, etc.) ───
   Vive arriba del input. Chips horizontales con scroll si superan el ancho.
   Cada chip: avatar (initials) + badge de count + preview + X. Click en el
   cuerpo del chip ejecuta onClick (navega y descarta); click en X solo
   descarta. */
.assist-signals {
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.assist-signals[hidden] { display: none; }
.assist-signal-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 240px;
  padding: 5px 10px 5px 5px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font: inherit; font-size: 12px;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
  text-align: left;
}
.assist-signal-chip:hover {
  background: var(--card-h);
  border-color: var(--teal-l);
  transform: translateY(-1px);
}
.assist-signal-avatar {
  position: relative;
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--sand, var(--teal-l)));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0;
}
.assist-signal-count {
  position: absolute; top: -3px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red, #f04545);
  color: #fff;
  font-size: 9.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--glass-bg-elev, var(--card));
}
.assist-signal-text {
  display: flex; flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.assist-signal-label {
  font-weight: 600; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.assist-signal-preview {
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.assist-signal-x {
  flex-shrink: 0;
  width: 16px; height: 16px;
  font-size: 13px; line-height: 1;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  margin-left: 2px;
}
.assist-signal-x:hover { background: var(--card); color: var(--text); }

/* ─── Próximo en agenda (ambiente arriba del composer) ───
   Card chiquita que muestra la próxima visita/tarea con countdown. Tiene 3
   estados visuales:
     - default: chip neutral con tinte teal
     - .is-soon (<10 min): borde más vivo, fondo levemente acentuado
     - .is-now (ocurriendo): borde verde + dot pulsante, dispara la atención */
.assist-agenda {
  display: flex; flex-direction: column;
}
.assist-agenda[hidden] { display: none; }
.assist-agenda-card {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.assist-agenda-card:hover {
  background: var(--card-h);
  border-color: var(--teal-l);
  transform: translateY(-1px);
}
.assist-agenda-ico {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--teal-dim);
  color: var(--teal-l);
  font-size: 14px;
}
.assist-agenda-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  line-height: 1.3;
}
.assist-agenda-when {
  font-size: 11px; font-weight: 600;
  color: var(--teal-l);
  text-transform: lowercase;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.assist-agenda-title {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.assist-agenda-sub {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Estado "soon" (faltan <10 min): borde teal vivo, sutil glow. */
.assist-agenda.is-soon .assist-agenda-card {
  border-color: var(--teal-l);
  box-shadow: 0 0 0 2px var(--teal-dim);
}
/* Estado "ahora" (ocurriendo): borde verde + dot pulsante. */
.assist-agenda.is-now .assist-agenda-card {
  background: var(--green-dim, rgba(93,214,138,0.12));
  border-color: var(--green, #5DD68A);
  box-shadow: 0 0 0 2px rgba(93,214,138,0.18);
}
.assist-agenda.is-now .assist-agenda-ico {
  background: var(--green, #5DD68A);
  color: #fff;
}
.assist-agenda.is-now .assist-agenda-when {
  color: var(--green, #5DD68A);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.assist-agenda-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green, #5DD68A);
  box-shadow: 0 0 0 0 rgba(93,214,138,0.7);
  animation: agendaPulse 1.6s infinite ease-out;
}
@keyframes agendaPulse {
  0%   { box-shadow: 0 0 0 0   rgba(93,214,138,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(93,214,138,0);    }
  100% { box-shadow: 0 0 0 0   rgba(93,214,138,0);    }
}

/* ─── Shortcuts contextuales (segunda fila) ───
   Chips de acción rápida que cambian según la sección del CRM
   (Nueva propiedad, Nueva consulta, etc.). Visualmente paralelos a
   .assist-signals — chips redondeados horizontales con scroll si exceden el
   ancho. La distinción: estos son persistentes (un toolbar contextual), los
   signals son efímeros (notificaciones live). */
.assist-shortcuts {
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.assist-shortcuts[hidden] { display: none; }
.assist-shortcut-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px;
  background: var(--teal-dim);
  border: 1px solid var(--teal-dim);
  border-radius: 999px;
  color: var(--teal-l);
  cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.assist-shortcut-chip:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: translateY(-1px);
}
.assist-shortcut-chip:active { transform: scale(0.97); }
.assist-shortcut-ico {
  font-size: 13px;
  line-height: 1;
}
.assist-shortcut-label { line-height: 1.25; }

/* Hint arriba del bar mostrando atajos de quick replies cuando hay askChips activos. */
.assist-input-hint {
  display: none; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
}
.assist-input-hint.has-replies { display: flex; }
.assist-hint-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; background: var(--card);
  border: 1px solid var(--border); border-radius: 999px;
}
.assist-hint-item kbd {
  font-family: inherit; font-size: 10px; font-weight: 600; color: var(--teal-l);
  background: var(--teal-dim); padding: 1px 5px; border-radius: 4px;
}

/* El panel de notificaciones (#notif-panel) y el asistente (.assist-side)
   son ambos paneles laterales derecho. Cuando notif está abierto, ocultamos
   el asistente — tanto el panel como el FAB — para que no se solapen. */
body:has(#notif-panel.open) .assist-side,
body:has(#notif-panel.open) #assist-fab { display: none !important; }

/* Cuando el asistente está OPEN en modo overlay (entre 901 y 1499px), el
   panel queda flotando a la derecha tapando el contenido. Empujamos el
   .content con padding-right para que ningún botón/card quede tapado.
   En docked (≥1500px) el panel forma parte del grid, no aplica. En mobile
   (<901px) el panel es bottom-sheet, tampoco aplica. (Bug #80) */
@media (min-width: 901px) and (max-width: 1499px) {
  body:has(.assist-side.open) .content {
    padding-right: 410px;
  }
}

/* Side panel derecho — el chat */
.assist-side {
  position: fixed; top: 60px; right: 16px; bottom: 16px;
  width: 380px; max-width: calc(100vw - 32px); z-index: 310;
  display: flex; flex-direction: column;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  border-radius: 16px; overflow: hidden; box-shadow: var(--glass-shadow-lg);
  backdrop-filter: blur(14px) saturate(160%);
  transform: translateX(calc(100% + 20px)); opacity: 0; pointer-events: none;
  transition: transform 0.28s cubic-bezier(.2,.9,.3,1.1), opacity 0.22s ease;
  font-family: 'Roboto', system-ui, sans-serif;
}
.assist-side.open {
  transform: translateX(0); opacity: 1; pointer-events: auto;
}

.assist-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--glass-bg-elev);
}
.assist-title { font-size: 12.5px; font-weight: 600; color: var(--text); flex: 1; }
.assist-mode-badge {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 10px; background: var(--pill-grey-bg); color: var(--muted);
}
.assist-mode-badge[data-mode="chat"]        { background: var(--teal-dim);   color: var(--teal-l); }
.assist-mode-badge[data-mode="plan"]        { background: var(--sand-dim);   color: var(--sand); }
.assist-mode-badge[data-mode="orchestrate"] { background: var(--purple-dim); color: var(--purple); }
.assist-head-btn {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; border: none;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 14px;
}
.assist-head-btn:hover { background: var(--card-h); color: var(--text); }

.assist-msgs {
  flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}

/* Burbujas */
.assist-msg {
  font-size: 13px; line-height: 1.55; padding: 9px 12px; border-radius: 12px; max-width: 88%;
  word-wrap: break-word;
  animation: assistBubbleIn 0.28s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes assistBubbleIn {
  from { transform: translateY(10px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.assist-msg.assist-user {
  align-self: flex-end; background: var(--teal); color: #fff; border-bottom-right-radius: 4px;
}
.assist-msg.assist-assistant {
  align-self: flex-start; background: var(--card-h); color: var(--text); border-bottom-left-radius: 4px;
}
.assist-msg.assist-error {
  align-self: flex-start; background: var(--red-dim); color: var(--red); border: 1px solid var(--red-dim);
}
.assist-msg strong { color: inherit; font-weight: 600; }
.assist-msg code {
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.92em;
  background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px;
}
.assist-msg.assist-user code { background: rgba(255,255,255,0.22); }
.assist-msg a {
  color: var(--teal-l); text-decoration: underline;
  text-decoration-color: rgba(70,199,186,0.45); text-underline-offset: 2px;
  word-break: break-word;
}
.assist-msg.assist-user a { color: #fff; text-decoration-color: rgba(255,255,255,0.55); }
.assist-msg a:hover { text-decoration-color: currentColor; }
/* Heading dentro de una burbuja (#/##/###): bold + un poquito más grande, con
   aire arriba salvo cuando es el primer bloque. */
.assist-msg .assist-h {
  font-weight: 600; font-size: 13.5px; color: var(--text);
  margin: 8px 0 2px;
}
.assist-msg .assist-h:first-child { margin-top: 0; }
.assist-msg.assist-user .assist-h { color: #fff; }
/* Separador de párrafo (doble \n del markdown del modelo). */
.assist-msg .assist-p { height: 8px; }
/* Separador horizontal (--- en el markdown del modelo). */
.assist-msg .assist-hr {
  border: 0; height: 1px;
  background: var(--border);
  margin: 10px 0;
}
.assist-msg.assist-user .assist-hr { background: rgba(255,255,255,0.30); }

/* Pasos de orquestación */
.assist-step {
  align-self: flex-start; font-size: 11.5px; line-height: 1.5; color: var(--muted);
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; max-width: 92%;
}
.assist-step.done { opacity: 0.6; }
.assist-step strong { color: var(--text); }
.assist-step em { color: var(--sand); font-style: normal; }

/* Typing */
.assist-typing { display: flex; gap: 4px; padding: 12px 14px; }
.assist-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dim);
  animation: assistBlink 1.2s infinite ease-in-out;
}
.assist-typing span:nth-child(2) { animation-delay: 0.2s; }
.assist-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes assistBlink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* Ask (pregunta con chips de respuesta rápida) — el chip muestra el atajo Cmd+N */
.assist-ask { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.assist-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 4px; }
.assist-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--input-bg); border: 1px solid var(--teal-dim);
  color: var(--teal-l); font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 11px 5px 5px; border-radius: 14px; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.assist-chip-key {
  font-size: 10px; font-weight: 600; color: var(--teal-l);
  background: var(--teal-dim); padding: 2px 6px; border-radius: 8px;
  letter-spacing: 0.02em;
}
.assist-chip-label { line-height: 1.3; }
.assist-chip:hover { background: var(--teal-dim); }
.assist-chip:active { transform: scale(0.96); }
.assist-chip:disabled { opacity: 0.45; cursor: default; }
.assist-chip.picked { background: var(--teal); color: #fff; border-color: var(--teal); opacity: 1; }
.assist-chip.picked .assist-chip-key { background: rgba(255,255,255,0.22); color: #fff; }

/* Plan */
.assist-plan {
  align-self: stretch; background: var(--input-bg); border: 1px solid var(--sand-dim);
  border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.assist-plan-head { font-size: 12.5px; font-weight: 600; color: var(--sand); }
.assist-plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.assist-plan-steps li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.45; }
.assist-plan-n {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--sand-dim);
  color: var(--sand); font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.assist-plan-steps li div { display: flex; flex-direction: column; gap: 1px; }
.assist-plan-steps li span { color: var(--muted); font-size: 11.5px; }
.assist-plan-steps li strong { color: var(--text); font-weight: 600; }
.assist-plan-actions { display: flex; gap: 8px; }
.assist-plan-run, .assist-plan-skip {
  border: none; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer;
}
.assist-plan-run { background: var(--teal); color: #fff; }
.assist-plan-run:hover { background: var(--teal-l); }
.assist-plan-skip { background: var(--card-h); color: var(--muted); }
.assist-plan-skip:hover { color: var(--text); }

/* Spotlight (highlight de elementos) */
.assist-spotlight {
  position: fixed; z-index: 250; pointer-events: none;
  border-radius: 8px; border: 2px solid var(--teal-l);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 18px rgba(70,199,186,0.5);
  transition: all 0.25s ease;
}
.assist-spotlight[hidden] { display: none; }
.assist-spot-note {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  background: var(--glass-bg-elev); border: 1px solid var(--glass-border);
  color: var(--text); font-size: 12px; line-height: 1.45; padding: 8px 12px;
  border-radius: 10px; width: max-content; max-width: 260px;
  box-shadow: var(--glass-shadow-lg); pointer-events: none;
  font-family: 'Roboto', system-ui, sans-serif;
}
.assist-spotlight.note-below .assist-spot-note { bottom: auto; top: calc(100% + 10px); }

/* FAB permanente del asistente: botón redondo con gradient sutil + SVG inline.
   El emoji ✨ anterior rendereaba inconsistente entre OS (a veces con color del
   sistema, a veces B/N). Ahora SVG inline pintado con currentColor. */
.assist-fab {
  /* z-index 50: por encima del contenido pero por debajo de los dropdowns (75
     del user menu) y modales (100). */
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* Gradient diagonal teal → teal-l. Más rico que el sólido anterior, sin
     llegar al brillante puro del teal-l (que era invasivo, Bug #51). */
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-l) 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  cursor: pointer;
  /* Box-shadow en capas: glow turquesa exterior + sombra de profundidad + highlight interior. */
  box-shadow:
    0 0 0 1px rgba(23,198,181,0.18),
    0 6px 16px rgba(23,198,181,0.38),
    0 2px 6px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.32);
  transition: transform 0.16s cubic-bezier(.2,.9,.3,1.1),
              box-shadow 0.16s ease,
              opacity 0.18s ease;
}
.assist-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(53,230,212,0.30),
    0 10px 24px rgba(23,198,181,0.52),
    0 3px 8px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.42);
}
.assist-fab:active { transform: translateY(0) scale(1.0); }
.assist-fab:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.assist-fab.hidden { opacity: 0; pointer-events: none; transform: translateY(8px) scale(0.94); }
.assist-fab-ico {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
  /* drop-shadow muy sutil sobre el SVG para darle volumen sin emborronar. */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.22));
}
.assist-fab-ico svg { display: block; }
/* Estos quedaban del FAB con label; los neutralizamos por si algún viejo
   render todavía los inyecta. */
.assist-fab-text, .assist-fab-lbl, .assist-fab-kbd { display: none !important; }
.assist-fab-kbd > span {
  display: inline-block; min-width: 14px; padding: 1px 5px;
  background: rgba(0,0,0,0.22); border-radius: 4px;
  font-weight: 600; color: #fff;
  text-align: center;
}

@media (max-width: 699px) {
  /* Mobile: panel full-width, sube desde abajo; el composer queda al pie
     (que es donde aparece el teclado virtual). */
  .assist-side {
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%; max-width: 100%;
    height: 78vh; border-radius: 16px 16px 0 0;
    transform: translateY(110%);
  }
  .assist-side.open { transform: translateY(0); }
  /* Chips de signals: más angostos en mobile + scroll horizontal con snap
     suave. El user ve 1.5 chips a la vez y descubre los siguientes al
     deslizar. */
  .assist-signal-chip {
    max-width: 200px;
    scroll-snap-align: start;
  }
  .assist-signals {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  /* Misma estética de scroll-snap para shortcuts en mobile. */
  .assist-shortcut-chip { scroll-snap-align: start; }
  .assist-shortcuts {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
}

/* Badge del FAB cuando hay signals pendientes. Punto rojo arriba-derecha
   con el count. Aparece sólo cuando el subscriber de HousiaSignals tiene
   items > 0. .assist-fab ya es position:fixed (línea ~338), así que el
   absolute del badge se ancla a él. */
.assist-fab-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red, #f04545);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg, #0a0e14);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  pointer-events: none;
  animation: assist-fab-badge-pop 0.35s cubic-bezier(.4,1.6,.6,.95);
}
.assist-fab-badge[hidden] { display: none; }
@keyframes assist-fab-badge-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── Modo "docked": pantallas anchas convierten el panel en una columna real
   del shell (no overlay). El JS agrega body.assist-docked cuando viewport
   ≥ 1500px. La columna ocupa todo el alto y no scrollea (los mensajes
   adentro sí, vía .assist-msgs). Abajo de 1500px vuelve al modo flotante
   con FAB. Ocultamos FAB y botón de minimizar mientras está docked. */
@media (min-width: 1500px) {
  body.assist-docked .shell {
    grid-template-columns: var(--sidebar-w) 1fr 396px;
  }
  body.assist-docked .assist-side {
    /* De overlay flotante a item del grid. position:relative (no static) para
       que sirva de contexto al .bug-panel (overlay absolute:inset:0 que monta
       el bug-reporter adentro). Sin transform, sin opacity, sin border-radius
       (la columna se ve pegada al borde derecho del viewport). La altura sale
       del grid row (100vh del .shell). */
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: auto; max-width: none; height: 100%;
    transform: none;
    opacity: 1; pointer-events: auto;
    border-radius: 0;
    border-top: none; border-bottom: none; border-right: none;
    box-shadow: none;
  }
  body.assist-docked .assist-fab { display: none !important; }
  body.assist-docked #assist-close { display: none; }
}

/* ── Markdown del helpdesk admin (admin/bugs.js · bug-detail) ──────────────
   Reusa el mismo fmt() del asistente (window.HousiaMd.fmt), pero acá el
   contexto es una vista ancha (no una burbuja) — bajamos tamaños de fuente
   apenas, agregamos aire entre bloques y dejamos los headings con jerarquía
   visible. Las clases .assist-h y .assist-p las emite el formateador. */
.bug-md { font-size: 13px; line-height: 1.6; color: var(--text); }
.bug-md .assist-h {
  font-weight: 600; font-size: 14.5px; color: var(--text);
  margin: 14px 0 4px;
}
.bug-md .assist-h:first-child { margin-top: 0; }
.bug-md .assist-p { height: 10px; }
.bug-md .assist-hr {
  border: 0; height: 1px;
  background: var(--border);
  margin: 14px 0;
}
.bug-md strong { color: var(--text); font-weight: 600; }
.bug-md em     { color: var(--sand); font-style: normal; }
.bug-md code {
  background: rgba(53,230,212,0.08);
  color: var(--teal-l);
  padding: 1px 5px; border-radius: 4px;
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px;
}
.bug-md a {
  color: var(--teal-l);
  text-decoration: underline;
  text-decoration-color: rgba(53,230,212,0.45);
  text-underline-offset: 2px;
  word-break: break-word;
}
.bug-md a:hover { text-decoration-color: currentColor; }

/* Loading state de la vista Propiedades (cuando se cambia cápsula/filtro).
   La idea: indicador SUTIL que no mueve el layout — barra de progreso
   indeterminada arriba del view + fade de la lista para que se vea que
   está actualizándose. Solo se activa si el fetch tarda >180ms. Bug #83. */
#view-propiedades { position: relative; }
#view-propiedades.is-loading::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--teal) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: propLoadingBar 1.1s linear infinite;
  z-index: 10;
  pointer-events: none;
}
#view-propiedades.is-loading #prop-grid,
#view-propiedades.is-loading #prop-tbody {
  opacity: 0.55;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
@keyframes propLoadingBar {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   Propiedades — chips de atajo rápido (Amigas / Liberándose / Recientes / Hot)
   ══════════════════════════════════════════════════════════════ */
.prop-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.prop-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s;
}
.prop-quick-chip:hover { background: var(--card-h); color: var(--text); border-color: var(--glass-highlight); }
.prop-quick-chip:active { transform: translateY(1px); }
.prop-quick-chip .pqc-ico   { font-size: 14px; line-height: 1; }
.prop-quick-chip .pqc-label { font-weight: 600; }
.prop-quick-chip .pqc-count {
  font-size: 10.5px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  font-weight: 600;
  line-height: 1.4;
}
.prop-quick-chip .pqc-count[hidden],
.prop-quick-chip .pqc-count.is-zero { display: none; }

/* Estados activos: cada chip toma su propio color para que la cartera "respire"
   distinto según el atajo elegido. Mantiene el badge bien visible. */
.prop-quick-chip[data-quick="friends"].active   { background: rgba(168,120,245,0.92); color: #fff; border-color: rgba(168,120,245,0.95); }
.prop-quick-chip[data-quick="releasing"].active { background: rgba(212,160,90,0.92);  color: #1a1a1a; border-color: rgba(212,160,90,0.95); }
.prop-quick-chip[data-quick="recent"].active    { background: rgba(58,173,173,0.92);  color: #fff; border-color: rgba(58,173,173,0.95); }
.prop-quick-chip[data-quick="hot"].active       { background: rgba(229,105,93,0.92);  color: #fff; border-color: rgba(229,105,93,0.95); }
/* Reuso del mismo chip-row para clientes (Todos/Compradores/Inquilinos/
   Propietarios) y otras categorizaciones que no tienen "marca" fuerte —
   mantenemos los colores de los kpi-stripe originales por consistencia. */
.prop-quick-chip[data-kind=""].active           { background: var(--teal);   color: #fff; border-color: var(--teal); }
.prop-quick-chip[data-kind="buyer"].active      { background: #5DD68A;       color: #1a1a1a; border-color: #5DD68A; }
.prop-quick-chip[data-kind="tenant"].active     { background: var(--sand);   color: #1a1a1a; border-color: var(--sand); }
.prop-quick-chip[data-kind="owner"].active      { background: var(--purple); color: #fff; border-color: var(--purple); }
.prop-quick-chip.active .pqc-count { background: rgba(0,0,0,0.22); color: inherit; border-color: transparent; }

/* Indicadores de actividad sobre la foto en la grilla (👁 / 🚶) */
.pc-activity {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  z-index: 2;
}
.pc-act {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  line-height: 1.2;
}
.pc-act-views  { background: rgba(15,18,22,0.62); color: rgba(255,255,255,0.94); }
.pc-act-visits { background: rgba(229,105,93,0.92); color: #fff; box-shadow: 0 2px 6px rgba(229,105,93,0.35); }

/* ══════════════════════════════════════════════════════════════
   Propiedades — toggle grilla/tabla
   ══════════════════════════════════════════════════════════════ */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--input-bg); }
.view-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 32px; padding: 0; border: none; cursor: pointer;
  background: transparent; color: var(--muted); transition: background 0.15s, color 0.15s;
}
.view-toggle-btn svg { width: 16px; height: 16px; }
.view-toggle-btn:hover { color: var(--text); background: var(--hover-tint); }
.view-toggle-btn.active { background: var(--teal-dim); color: var(--teal-l); }
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border); }
.view-toggle-btn.vt-text { width: auto; padding: 0 14px; font-size: 12px; font-family: inherit; gap: 5px; }

/* Widget "Próxima visita" */
.next-visit-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--teal-dim), var(--card));
  border: 1px solid var(--teal); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(42,127,127,0.18);
}
.next-visit-icon { font-size: 24px; opacity: 0.9; }
.next-visit-main { flex: 1; min-width: 0; }
.next-visit-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.next-visit-title { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-visit-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.next-visit-countdown {
  font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 600;
  color: var(--teal-l); white-space: nowrap; padding-left: 14px; border-left: 1px solid var(--border);
}
.next-visit-countdown.soon { color: var(--sand); }
.next-visit-countdown.now  { color: var(--red); }

/* Vista del día (dentro del card de visitas) */
.day-view-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.day-view-head h2 { font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; margin: 0; }
.day-view-list { display: flex; flex-direction: column; gap: 8px; }
.day-visit {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px;
  background: var(--input-bg); cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.day-visit:hover { background: var(--card-h); border-color: var(--glass-highlight); }
.day-visit-time { font-family: 'Roboto', sans-serif; font-size: 18px; color: var(--teal-l); font-weight: 600; min-width: 70px; }
.day-visit-body { flex: 1; min-width: 0; }
.day-visit-title { font-size: 13px; font-weight: 500; }
.day-visit-sub   { font-size: 11.5px; color: var(--muted); }
.day-visit-actions { display: flex; gap: 6px; }

/* Selector de propiedad (grilla compacta dentro de la ficha de visita) */
.prop-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.prop-picker-card {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--card); cursor: pointer; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  display: flex; flex-direction: column;
}
.prop-picker-card:hover { border-color: var(--teal-l); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.prop-picker-card.selected { border-color: var(--teal-l); box-shadow: 0 0 0 2px var(--teal-dim); }
.prop-picker-photo { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--midnight); pointer-events: none; }
.prop-picker-body { padding: 8px 10px; pointer-events: none; }
.prop-picker-price { font-family: 'Roboto', sans-serif; font-size: 14px; color: var(--teal-l); font-weight: 600; }
.prop-picker-title { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-picker-sub   { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Form como ficha full-screen. Sin look de modal flotante: ocupa el ancho del
   contenedor del view, fondo sutil, separado por borde y no por sombra. La
   topbar queda sticky para que los botones de Guardar / Volver no se pierdan
   al scrollear formularios largos. */
.ficha-form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: 100%;
  margin: 0;
}
.ficha-form .ficha-topbar {
  position: sticky; top: 0; z-index: 5;
  /* var(--bg) no existe en los tokens — el header sticky quedaba con
     fondo transparente y al hacer scroll en mobile se veía el contenido
     pasar por detrás (bug #104). Usamos --card opaco para que se vea
     limpio, con un blur sutil para mantener el look glass del CRM. */
  background: var(--card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0 14px; margin-bottom: 18px;
}
/* Tabs y paneles del form usan card-look para mantener jerarquía visual sin
   parecer modal: cada panel se ve como una "card" sin glass pesado. */
.ficha-form .prop-tab-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.ficha-form .prop-tabs { margin-bottom: 14px; }
/* Forms de ficha sin tabs (ej. editar-demanda): el form-grid directo del
   .ficha-form también recibe card-look para no quedar flotando en el vacío. */
.ficha-form > .form-grid {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}

/* Ficha de demanda con panel lateral de matches en vivo */
.ficha-demand-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; max-width: 1340px; margin: 0 auto; }
.ficha-demand-grid > .ficha-form { max-width: none; margin: 0; }
.demand-matches-panel { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 16px 18px; position: sticky; top: 14px; max-height: calc(100vh - 60px); overflow-y: auto; box-shadow: 0 12px 36px rgba(0,0,0,0.18); }
.dmp-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.dmp-title { font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 600; }
.dmp-sub   { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dmp-list  { display: flex; flex-direction: column; gap: 8px; }
.dmp-card  { display: flex; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--input-bg); cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.dmp-card:hover { border-color: var(--teal-l); background: var(--card-h); }
.dmp-thumb { width: 64px; aspect-ratio: 1; background-size: cover; background-position: center; border-radius: 6px; background-color: var(--midnight); flex-shrink: 0; }
.dmp-info  { flex: 1; min-width: 0; }
.dmp-price { font-family: 'Roboto', sans-serif; font-size: 13px; color: var(--teal-l); font-weight: 600; }
.dmp-title-line { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmp-sub-line   { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 980px) { .ficha-demand-grid { grid-template-columns: 1fr; } .demand-matches-panel { position: static; max-height: none; } }

/* Propiedad ya seleccionada en la ficha (resumen + botón cambiar) */
.prop-chosen {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--teal); border-radius: 10px; padding: 12px 14px; background: var(--teal-dim);
}
.prop-chosen-photo { width: 80px; aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: 6px; background-color: var(--midnight); flex-shrink: 0; }
.prop-chosen-main  { flex: 1; min-width: 0; }
.prop-chosen-title { font-size: 13.5px; font-weight: 500; word-break: break-word; }
.prop-chosen-sub   { font-size: 11.5px; color: var(--muted); word-break: break-word; }
/* Mobile (iPhone 390px): el layout original con foto + texto + botón en una
   sola fila no entra. La columna del texto quedaba en ~110px y rompía palabra
   por palabra. Reorganizamos:
     fila 1 → foto + título/sub (texto fluye sobre todo el ancho)
     fila 2 → botón "Cambiar propiedad" full-width al final
   Bug #145.*/
@media (max-width: 600px) {
  .prop-chosen {
    flex-wrap: wrap;
    gap: 10px;
  }
  .prop-chosen-main {
    flex: 1 1 calc(100% - 80px - 10px);
  }
  .prop-chosen > .btn {
    flex-basis: 100%;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   Propiedades — vista grilla
   ══════════════════════════════════════════════════════════════ */
.prop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px;
}
.prop-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.prop-card:hover { border-color: var(--teal-l); transform: translateY(-2px); box-shadow: var(--glass-shadow); }
.prop-card-photo {
  position: relative; aspect-ratio: 4/3; background: var(--midnight) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 38px;
}
.prop-card-photo .pc-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.prop-card-photo .pc-op {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.62); color: #fff; font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; backdrop-filter: blur(4px); letter-spacing: 0.02em;
}
.prop-card-photo .pc-count {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.62); color: #fff; font-size: 10px; font-weight: 500;
  padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(4px); display: flex; align-items: center; gap: 4px;
}
/* Pill de distancia desde la ubicación del user. Aparece arriba a la
   derecha si window.me.preferred_lat está seteada y la propiedad tiene
   coords. Generada por window.applyDistancePills() (19-helpers.js). */
.prop-card-photo .pl-distance {
  /* Vive dentro de .pc-activity (columna arriba a la derecha) para apilarse
     con las vistas/visitas en vez de superponerse (Bug #149). */
  position: static;
  align-self: flex-end;
  background: rgba(0,0,0,0.72); color: #fff;
  font-size: 10.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
  backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; gap: 4px;
  letter-spacing: 0.02em;
}
.prop-card-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prop-card-price { font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 600; color: var(--teal-l); }
.prop-card-price .pc-noche { font-family: inherit; font-size: 11px; font-weight: 400; color: var(--muted); }
.prop-card-title { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.3; }
.prop-card-sub { font-size: 11px; color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.prop-card-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.prop-card-meta span { display: inline-flex; align-items: center; gap: 3px; }
.prop-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); gap: 8px;
}
.prop-card-foot .pcf-agent { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-card-foot .pcf-time  { font-size: 10px; color: var(--dim); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   Ficha de propiedad — vista completa
   ══════════════════════════════════════════════════════════════ */
.ficha { display: flex; flex-direction: column; gap: 18px; max-width: 1120px; margin: 0 auto; width: 100%; }
.ficha-flyer-host { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; }
.ficha-flyer-host canvas { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; background: #0A1520; box-shadow: 0 4px 18px rgba(0,0,0,0.15); }
.ficha-flyer-formats { display: flex; gap: 6px; flex-wrap: wrap; }
.ficha-topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ficha-back {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--text);
  padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-family: inherit; transition: background 0.15s;
}
.ficha-back:hover { background: var(--card-h); }
.ficha-topbar .ficha-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Bug #150: en mobile la cabecera ocupaba varias líneas (5 botones envueltos).
   Ahora queda en una línea: back + un botón "⋮" que despliega las acciones
   como dropdown. El botón ⋮ solo se muestra en mobile (≤640px). */
@media (max-width: 640px) {
  .ficha-topbar { gap: 6px; position: relative; }
  .ficha-topbar .ficha-actions {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; width: 100%;
    flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 8px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.22); z-index: 20;
  }
  .ficha-topbar.expanded .ficha-actions { display: flex; }
  .ficha-topbar-more {
    display: inline-flex !important; align-items: center; justify-content: center;
    margin-left: auto;
    background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--text);
    width: 34px; height: 32px; padding: 0; border-radius: 9px;
    font-size: 16px; line-height: 1; font-family: inherit; cursor: pointer; transition: background 0.15s;
  }
  .ficha-topbar-more:hover { background: var(--card-h); }
}

/* Galería */
.ficha-gallery { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ficha-stage {
  position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/10; max-height: 520px;
  background: var(--midnight); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; cursor: zoom-in;
}
.ficha-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-thumbs { max-width: 900px; width: 100%; }
.ficha-stage .ficha-stage-empty { color: var(--dim); font-size: 56px; }
.ficha-stage-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background 0.15s;
}
.ficha-stage-nav:hover { background: rgba(0,0,0,0.8); }
.ficha-stage-nav.prev { left: 12px; }
.ficha-stage-nav.next { right: 12px; }
.ficha-stage-count {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 3px 9px; border-radius: 20px; backdrop-filter: blur(4px);
}
.ficha-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ficha-thumb {
  flex: 0 0 auto; width: 92px; height: 66px; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; background: var(--midnight); padding: 0; transition: border-color 0.15s;
}
.ficha-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-thumb.active { border-color: var(--teal-l); }
.ficha-thumb:hover { border-color: var(--muted); }

/* Encabezado de datos */
.ficha-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.ficha-head-main { flex: 1; min-width: 220px; }
.ficha-head h1 { font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0 0 5px; }
.ficha-head-sub { font-size: 13px; color: var(--muted); }
.ficha-head-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.ficha-head-price { text-align: right; }
.ficha-head-price .fhp-amount { font-family: 'Roboto', sans-serif; font-size: 28px; font-weight: 600; color: var(--teal-l); }
.ficha-head-price .fhp-noche { font-size: 13px; color: var(--muted); font-weight: 400; }
.ficha-head-price .fhp-exp { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ficha-head-price .fhp-age { font-size: 11px; color: var(--dim); margin-top: 4px; }

/* Cuerpo: 2 columnas */
.ficha-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.ficha-col-main, .ficha-col-side { display: flex; flex-direction: column; gap: 16px; }
.ficha-section {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
}
.ficha-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
  font-weight: 600; margin-bottom: 12px;
}
/* Header de sección con título + botón a la derecha (ej. "Visitas + Agendar
   visita"). En mobile el botón cae a una 2da línea por flex-wrap; sin esto
   queda pegado al contenido siguiente. Bug #136. */
.ficha-section-hd { margin-bottom: 12px; }
.ficha-section-hd .ficha-section-title { margin-bottom: 0; }
/* Mobile: cuando el botón "+ Agendar visita" wrappea bajo el título por
   flex-wrap, los 12px no alcanzan vs la densidad del calendario abajo.
   Subo a 18px y dejo respirar. Bug #136. */
@media (max-width: 640px) {
  .ficha-section-hd { margin-bottom: 18px; }
}
.ficha-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.ficha-spec { display: flex; flex-direction: column; gap: 2px; }
.ficha-spec .fs-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ficha-spec .fs-value { font-size: 14px; color: var(--text); font-weight: 500; }
.ficha-desc { font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.ficha-amenities { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-amenity {
  font-size: 11px; color: var(--text); background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px;
}
.ficha-map { position: relative; height: 320px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
/* Overlay candado: en touch devices el mapa arranca bloqueado para no
   robar el scroll vertical de la ficha. Tap pal centro lo activa. */
.ficha-map-lock {
  position: absolute; inset: 0; z-index: 500;
  /* Bug #151: el cartel "activar mapa" iba centrado y quedaba mal / chocaba
     con la esquina. Va arriba a la derecha, compacto, como chip de candado
     (mismo lugar que el botón 🔓 de re-bloquear → affordance consistente). */
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 8px;
  background: rgba(10,12,16,0.18);
  cursor: pointer;
  transition: background 0.18s;
}
.ficha-map-lock:hover { background: rgba(10,12,16,0.10); }
.ficha-map-lock-pill {
  background: rgba(15,20,28,0.85); color: #fff;
  padding: 9px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  pointer-events: none;
}
/* Botón mini "🔓" para re-bloquear cuando el user terminó de mover el mapa */
.ficha-map-unlock {
  position: absolute; top: 8px; right: 8px; z-index: 500;
  width: 32px; height: 32px;
  background: rgba(15,20,28,0.78); color: #fff;
  border: none; border-radius: 50%;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}
.ficha-map-unlock:hover { background: rgba(15,20,28,0.92); transform: scale(1.06); }
.ficha-video { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--midnight); }
.ficha-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* POIs cercanos en la ficha read-only (vienen de properties.nearby_pois,
   generados con IA desde el editor). */
.ficha-poi-summary { font-size: 13px; color: var(--text); line-height: 1.55; margin-bottom: 14px; font-style: italic; opacity: 0.92; }
.ficha-poi-groups { display: flex; flex-direction: column; gap: 14px; }
.ficha-poi-group { display: flex; flex-direction: column; gap: 6px; }
.ficha-poi-cat {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); font-weight: 600;
}
.ficha-poi-items { display: flex; flex-direction: column; gap: 4px; }
.ficha-poi-item {
  padding: 8px 10px; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 8px;
}
.ficha-poi-row { display: flex; align-items: center; gap: 8px; }
.ficha-poi-icon { flex-shrink: 0; font-size: 15px; line-height: 1; }
.ficha-poi-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.ficha-poi-dist {
  flex-shrink: 0; font-size: 11px; color: var(--muted);
  background: var(--card); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
}
.ficha-poi-details {
  list-style: none; padding: 6px 0 0; margin: 4px 0 0;
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: var(--text);
}
.ficha-poi-details li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ficha-poi-det-name { color: var(--text); }
.ficha-poi-det-dist {
  font-size: 10.5px; color: var(--muted);
  background: rgba(255,255,255,0.04);
  padding: 1px 6px; border-radius: 999px;
  flex-shrink: 0;
}
.ficha-poi-det-note { color: var(--muted); }
/* Header de la sección con el botón "↻ Regenerar" al costado */
.ficha-pois-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ficha-pois-regen { white-space: nowrap; font-size: 11.5px; }

/* Bug #134: Cercanías ahora vive dentro de la sección "Ubicación" como
   sub-bloque, separado del mapa por un divisor sutil. El título sub es
   más chico que el .ficha-section-title para mantener jerarquía visual. */
.ficha-location-pois {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.ficha-subsection-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.ficha-subsection-title {
  font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
/* Estado vacío: solo CTA para generar */
.ficha-pois--empty { text-align: center; }
.ficha-pois-empty-msg { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
.ficha-pois-gen { display: inline-block; }
.ficha-pois-gen.is-loading { opacity: 0.7; cursor: progress; }
/* Botón "+N más" que expande las categorías ocultas (>3) — pill discreto
   debajo del grid de las 3 visibles. */
.ficha-pois-more {
  margin-top: 10px;
  background: var(--input-bg); border: 1px dashed var(--border);
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 500;
  padding: 7px 16px; border-radius: 999px;
  cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.ficha-pois-more:hover { color: var(--teal-l); border-color: var(--teal-l); background: var(--card-h); }
.ficha-poi-more-groups {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  animation: ficha-pois-slide 0.22s ease-out;
}
@keyframes ficha-pois-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Sidebar: agente + asociados */
.ficha-agent { display: flex; align-items: center; gap: 11px; }
.ficha-agent-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: var(--card-h) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif;
  font-size: 17px; color: var(--teal-l); border: 1px solid var(--border);
}
.ficha-agent-name { font-size: 13px; font-weight: 500; color: var(--text); }
.ficha-agent-role { font-size: 11px; color: var(--muted); }
/* Bug #135: <select> inline para asignar/cambiar agente (reemplazo del modal) */
.ficha-agent-select {
  flex-shrink: 0; max-width: 100%;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.ficha-agent-select:focus { outline: none; border-color: var(--teal); }
.ficha-agent .ficha-agent-select { margin-left: auto; }
.ficha-assoc-list { display: flex; flex-direction: column; }
.ficha-assoc-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.ficha-assoc-item:last-child { border-bottom: none; }
.ficha-assoc-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: var(--card-h); border: 1px solid var(--border);
}
.ficha-assoc-main { flex: 1; min-width: 0; }
.ficha-assoc-text { font-size: 12px; color: var(--text); line-height: 1.35; }
.ficha-assoc-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.ficha-assoc-empty { font-size: 11.5px; color: var(--dim); padding: 6px 2px; }
.ficha-stats-row { display: flex; gap: 8px; flex-wrap: wrap; }

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

/* ─── Mini-calendar reutilizable (visitas, disponibilidad) ─── */
.mini-cal {
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 12px;
}
.mini-cal-hd {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  margin-bottom: 8px;
}
.mini-cal-hd strong { font-size: 13px; text-transform: capitalize; }
.mini-cal-nav {
  width: 24px; height: 24px; border-radius: 6px; background: var(--card-h);
  border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.mini-cal-nav:hover { background: var(--midnight); }
.mini-cal-dows {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  font-size: 10px; color: var(--muted); text-align: center; margin-bottom: 4px;
}
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mini-cal-cell {
  aspect-ratio: 1; min-height: 28px; max-height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text); border-radius: 6px; position: relative;
  background: transparent; border: 1px solid transparent;
}
.mini-cal-cell.empty { background: transparent; }
.mini-cal-cell.today { border-color: var(--teal); color: var(--teal-l); font-weight: 600; }
.mini-cal-cell.has-evt { font-weight: 500; }
.mini-cal-cell.tone-teal  { background: rgba(48,179,167,0.15);  color: var(--teal-l); }
.mini-cal-cell.tone-green { background: rgba(93,214,138,0.18);  color: #5DD68A; }
.mini-cal-cell.tone-sand  { background: rgba(232,196,127,0.18); color: var(--sand); }
.mini-cal-cell.tone-red   { background: rgba(239,68,68,0.18);   color: #ff8a8a; }
.mini-cal-cell.tone-grey  { background: var(--card-h);          color: var(--muted); }
.mini-cal-dot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}

/* ─── Sección Visitas en ficha ─── */
.ficha-visits-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start;
}
@media (max-width: 760px) { .ficha-visits-grid { grid-template-columns: 1fr; } }
.ficha-visits-list { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.ficha-visit-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px;
  align-items: center;
}
.ficha-visit-card:hover { background: var(--card-h); }
.ficha-visit-when { font-size: 12px; font-weight: 500; }
.ficha-visit-when.tone-teal  { color: var(--teal-l); }
.ficha-visit-when.tone-green { color: #5DD68A; }
.ficha-visit-when.tone-red   { color: #ff8a8a; }
.ficha-visit-when.tone-grey  { color: var(--muted); }
.ficha-visit-body { font-size: 11.5px; }
.ficha-visit-status { margin-bottom: 4px; }
.ficha-visit-people { color: var(--text); }

/* ─── Disponibilidad temporario ─── */
.ficha-avail-cals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .ficha-avail-cals { grid-template-columns: 1fr; } }
.ficha-avail-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ficha-avail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 9px; font-size: 12px;
}
.ficha-avail-item strong { font-weight: 500; font-size: 12.5px; }

/* ─── Tarifas y servicios ─── */
.ficha-fees-sub-title {
  font-size: 11.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 8px;
}
.ficha-fees-tbl {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.ficha-fees-tbl th, .ficha-fees-tbl td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left;
}
.ficha-fees-tbl th { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.ficha-fees-tbl tr:last-child td { border-bottom: none; }

/* ── POIs cercanos (AI) — sección dentro de la pestaña Ubicación ──────── */
#prop-pois-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(132,204,255,0.04), transparent);
  margin-top: 8px;
}
.prop-pois-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.prop-pois-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.prop-pois-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45;
  max-width: 560px;
}
.prop-pois-result {
  margin-top: 6px;
}
.prop-pois-result:empty { display: none; }
.prop-pois-loading,
.prop-pois-err {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border);
}
.prop-pois-err {
  color: var(--red);
  border-color: rgba(229,105,93,0.35);
  background: rgba(229,105,93,0.08);
}
.prop-poi-summary {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  background: rgba(132,204,255,0.06);
  border: 1px solid rgba(132,204,255,0.18);
  padding: 9px 12px;
  border-radius: 9px;
  margin-bottom: 10px;
}
.prop-poi-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.prop-poi-group {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 11px;
  background: var(--card);
}
.prop-poi-cat {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.prop-poi-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prop-poi-hint {
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 6px;
  font-style: italic;
}
.prop-poi-item {
  font-size: 12px;
  color: var(--text);
  padding: 3px 0;
  border-radius: 6px;
}
.prop-poi-item.has-details { cursor: pointer; }
.prop-poi-item.has-details:hover .prop-poi-item-row { background: rgba(132,204,255,0.06); }
.prop-poi-item-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.prop-poi-item:not(.has-details) .prop-poi-item-row {
  grid-template-columns: 22px 1fr auto;
}
.prop-poi-caret {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  width: 14px;
  text-align: center;
  line-height: 1;
}
.prop-poi-item.is-open .prop-poi-caret { color: var(--purple); }
.prop-poi-icon { font-size: 14px; line-height: 1; text-align: center; }
.prop-poi-name { line-height: 1.35; }
.prop-poi-dist {
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.prop-poi-details {
  margin: 5px 0 6px 28px;
  padding: 6px 10px;
  list-style: none;
  border-left: 2px solid rgba(132,204,255,0.35);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prop-poi-details li {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.prop-poi-det-name { font-weight: 600; }
.prop-poi-det-dist {
  font-size: 10px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  padding: 1px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.prop-poi-det-note {
  color: var(--muted);
  font-weight: 400;
  font-size: 10.5px;
}
.prop-poi-meta {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--muted);
  text-align: right;
}

/* Toolbar arriba de los POIs (summary a la izquierda + botón "Editar") */
.prop-poi-toolbar {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  margin-bottom: 8px;
}
.prop-poi-toolbar > div:first-child { flex: 1; min-width: 0; }
.prop-poi-toolbar > div:first-child:empty { display: none; }
.prop-poi-toolbar > .prop-poi-summary { margin-bottom: 0; flex: 1; }

/* Modo edición */
.prop-poi-edit-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: rgba(167,139,250,0.10);
  border: 1px solid rgba(167,139,250,0.30);
  border-radius: 9px;
  font-size: 12px; color: var(--text);
  position: sticky; top: 0; z-index: 5;
}
.prop-poi-edit-bar .prop-poi-save { padding: 6px 14px; font-size: 12px; }
.prop-poi-edit-bar .prop-poi-save:disabled { opacity: 0.4; cursor: not-allowed; }
.prop-poi-dirty-badge { color: var(--purple); font-size: 14px; line-height: 1; margin-left: -4px; animation: poi-pulse 1.4s ease-in-out infinite; }
@keyframes poi-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
.prop-poi-count { color: var(--muted); font-size: 11.5px; }
.prop-poi-invalid-hint { color: var(--orange, #e6a23c); font-size: 11px; }
.prop-poi-clear-all { color: var(--red); }
.prop-poi-clear-all:hover { color: var(--red); filter: brightness(1.2); }

.prop-poi-summary-label {
  display: block; margin-bottom: 12px;
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.prop-poi-edit-summary {
  width: 100%; box-sizing: border-box;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--input-bg); color: var(--text);
  font: inherit; font-size: 13px; line-height: 1.5;
  resize: vertical; min-height: 50px;
}
.prop-poi-edit-summary:focus { outline: none; border-color: var(--teal); }

/* Layout del item en edit: [↑↓] [ícono-btn] [nombre] [dist] [cat-select] [✕] */
.prop-poi-item.is-edit .prop-poi-item-row {
  grid-template-columns: 22px 30px 1fr 70px 120px 24px;
  gap: 5px; padding: 4px 2px;
}
.prop-poi-item.is-edit.is-invalid .prop-poi-edit-name {
  border-color: var(--red);
  background: rgba(229,105,93,0.06);
}
.prop-poi-edit-order {
  display: flex; flex-direction: column; gap: 1px;
}
.prop-poi-edit-arrow {
  width: 22px; height: 13px; padding: 0; border: none;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 8px; line-height: 1;
  border-radius: 3px;
  transition: background 0.12s, color 0.12s;
}
.prop-poi-edit-arrow:hover:not(:disabled) { background: rgba(132,204,255,0.10); color: var(--text); }
.prop-poi-edit-arrow:disabled { opacity: 0.25; cursor: not-allowed; }

.prop-poi-edit-icon-btn {
  width: 30px; height: 28px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--input-bg); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.12s, transform 0.12s;
}
.prop-poi-edit-icon-btn:hover { border-color: var(--teal); transform: scale(1.05); }

.prop-poi-edit-name, .prop-poi-edit-dist {
  font: inherit; font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--input-bg); color: var(--text);
  min-width: 0;
}
.prop-poi-edit-name { width: 100%; }
.prop-poi-edit-dist { text-align: right; }
.prop-poi-edit-name:focus, .prop-poi-edit-dist:focus { outline: none; border-color: var(--teal); }

.prop-poi-edit-cat {
  font: inherit; font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--input-bg); color: var(--text);
  min-width: 0;
}
.prop-poi-edit-cat:focus { outline: none; border-color: var(--teal); }

.prop-poi-edit-del {
  width: 24px; height: 24px;
  border: none; background: transparent;
  color: var(--red); cursor: pointer;
  font-size: 14px; line-height: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.prop-poi-edit-del:hover { background: rgba(229,105,93,0.15); }

.prop-poi-add {
  width: 100%; margin-top: 6px;
  padding: 6px; font: inherit; font-size: 11.5px;
  background: transparent; color: var(--teal-l);
  border: 1px dashed var(--border); border-radius: 6px;
  cursor: pointer;
}
.prop-poi-add:hover { background: rgba(70,199,186,0.06); border-color: var(--teal-l); }

.prop-poi-cat-count {
  margin-left: 4px; font-size: 9.5px;
  background: var(--input-bg); color: var(--muted);
  border-radius: 999px; padding: 1px 6px;
  font-weight: 500;
}
.prop-poi-group.is-empty { background: transparent; border-style: dashed; }
.prop-poi-cat-empty {
  font-size: 11px; color: var(--muted); font-style: italic;
  padding: 6px 4px; text-align: center;
}

.prop-poi-edit-err {
  margin-top: 10px; padding: 8px 10px;
  background: rgba(229,105,93,0.08); border: 1px solid rgba(229,105,93,0.30);
  border-radius: 8px; font-size: 12px; color: var(--red);
}
.prop-poi-edit-shortcuts {
  margin-top: 10px; font-size: 10.5px; color: var(--muted);
  text-align: right;
}
.prop-poi-edit-shortcuts kbd {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
  font-family: -apple-system, BlinkMacSystemFont, monospace;
  font-size: 10px;
}

/* Picker de emojis (popup absoluto debajo del botón del ícono) */
.prop-poi-icon-picker {
  position: absolute; z-index: 1000;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 9px; padding: 5px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px;
  animation: poi-picker-in 0.12s ease-out;
}
@keyframes poi-picker-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.prop-poi-icon-picker button {
  width: 32px; height: 32px;
  border: none; background: transparent;
  font-size: 18px; line-height: 1; cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s, transform 0.1s;
}
.prop-poi-icon-picker button:hover { background: var(--input-bg); transform: scale(1.15); }

/* Mobile: el item edit se apila en dos filas (action row + select cat abajo) */
@media (max-width: 640px) {
  .prop-poi-item.is-edit .prop-poi-item-row {
    grid-template-columns: 22px 30px 1fr 60px 22px;
    grid-template-areas: 'arr ico name dist del' 'cat cat cat cat cat';
    row-gap: 4px;
  }
  .prop-poi-edit-order      { grid-area: arr; }
  .prop-poi-edit-icon-btn   { grid-area: ico; }
  .prop-poi-edit-name       { grid-area: name; }
  .prop-poi-edit-dist       { grid-area: dist; }
  .prop-poi-edit-del        { grid-area: del; }
  .prop-poi-edit-cat        { grid-area: cat; width: 100%; }
  .prop-poi-edit-bar { font-size: 11.5px; gap: 6px; padding: 8px 10px; }
  .prop-poi-edit-shortcuts { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Ficha de propiedad — cápsulas dinámicas (insights)
   ══════════════════════════════════════════════════════════════ */
.ficha-insights {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px;
}
.ficha-insights:empty { display: none; }
.prop-flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  border: 1px solid; user-select: none;
}
.prop-flag .pf-icon { font-size: 13px; line-height: 1; }
.prop-flag .pf-label { letter-spacing: 0.01em; }
.prop-flag .pf-dismiss {
  background: transparent; border: none; cursor: pointer;
  color: inherit; opacity: 0.45;
  width: 18px; height: 18px; padding: 0; margin-left: 2px;
  border-radius: 50%; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 0.12s, background 0.12s;
}
.prop-flag .pf-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.18); }
.pf-positive { color: var(--teal-l, #5eead4); background: rgba(94,234,212,0.10); border-color: rgba(94,234,212,0.35); }
.pf-warning  { color: var(--sand, #d4a05a); background: rgba(212,160,90,0.10); border-color: rgba(212,160,90,0.35); }
.pf-info     { color: var(--purple, #a878f5); background: rgba(168,120,245,0.10); border-color: rgba(168,120,245,0.35); }
.pf-neutral  { color: var(--text); background: rgba(255,255,255,0.04); border-color: var(--border); }

/* ══════════════════════════════════════════════════════════════
   Ficha de propiedad — propiedades similares (footer)
   ══════════════════════════════════════════════════════════════ */
.ficha-similar { margin-top: 28px; }
.ficha-similar:empty { display: none; }
.ficha-similar-loading {
  padding: 14px; color: var(--muted); font-size: 12.5px; text-align: center;
}
.ficha-similar-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.ficha-similar-hd h2 {
  font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 600; margin: 0;
}
.ficha-similar-radius {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
}
.ficha-similar-radius .fsr-btn {
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  padding: 3px 9px; border-radius: 6px; font-size: 11px; cursor: pointer;
  font-family: inherit; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ficha-similar-radius .fsr-btn:hover { color: var(--text); }
.ficha-similar-radius .fsr-btn.active {
  background: var(--teal-dim, rgba(94,234,212,0.15));
  color: var(--teal-l, #5eead4);
  border-color: rgba(94,234,212,0.45);
}
.ficha-similar-group { margin-bottom: 20px; }
.ficha-similar-group .fsg-title {
  font-size: 13px; font-weight: 600; margin: 0 0 9px;
  color: var(--text); display: flex; align-items: center; gap: 8px;
}
.ficha-similar-group .fsg-count {
  font-size: 10.5px; color: var(--muted); font-weight: 500;
  background: var(--card); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 10px;
}
.ficha-similar-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px) {
  .ficha-similar-row {
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .ficha-similar-row .fsc { scroll-snap-align: start; }
}
.fsc {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
  font-size: 11.5px;
}
.fsc:hover {
  border-color: var(--teal-l, #5eead4);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.fsc-ph {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--midnight, #1a1a1a) center/cover no-repeat;
}
.fsc-dist {
  position: absolute; bottom: 5px; right: 5px;
  background: rgba(15,18,22,0.78); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 999px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.fsc-body { padding: 7px 9px 8px; }
.fsc-title {
  font-size: 12px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}
.fsc-meta {
  font-size: 10.5px; color: var(--muted); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fsc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.fsc-price { font-size: 12.5px; font-weight: 600; color: var(--teal-l, #5eead4); }
.fsc-owner {
  font-size: 9.5px; color: var(--purple, #a878f5);
  background: rgba(168,120,245,0.10);
  padding: 1px 5px; border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px;
}

/* ══════════════════════════════════════════════════════════════
   Ficha de propiedad — tendencias (sparklines SVG)
   ══════════════════════════════════════════════════════════════ */
.trends-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.trends-card-wide { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .trends-grid { grid-template-columns: 1fr; }
  .trends-card-wide { grid-column: auto; }
}
.trends-card {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  background: var(--card);
}
.trends-card-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.trends-card-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.trends-card-meta  { font-size: 11px; color: var(--muted); }
.trends-card-chart { position: relative; }
.trends-svg { width: 100%; height: auto; display: block; }
.trends-ax { font-size: 9.5px; fill: var(--muted); font-family: inherit; }
.trends-empty {
  padding: 24px 12px; text-align: center; font-size: 11.5px;
  color: var(--muted); border: 1px dashed var(--border); border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════
   Visitas — Caja de prompt "agendar con texto libre"
   ══════════════════════════════════════════════════════════════ */
.visit-prompt-card {
  border: 1px solid rgba(168,120,245,0.30);
  background: linear-gradient(135deg, rgba(168,120,245,0.06), rgba(132,204,255,0.03));
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.visit-prompt-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.visit-prompt-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.visit-prompt-hd > div:nth-child(2) { flex: 1; min-width: 0; }
.visit-prompt-title { font-size: 13.5px; font-weight: 600; }
.visit-prompt-sub   { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.visit-prompt-collapse {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 18px; line-height: 1;
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.visit-prompt-collapse:hover { background: var(--card-h); color: var(--text); }
#visit-prompt-text {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px;
  font: inherit; font-size: 13.5px; line-height: 1.5;
  resize: vertical;
}
#visit-prompt-text:focus { outline: none; border-color: var(--purple, #a878f5); box-shadow: 0 0 0 3px rgba(168,120,245,0.15); }
.visit-prompt-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
#visit-prompt-result:empty { display: none; }
.visit-prompt-loading {
  padding: 12px 14px; border-radius: 9px;
  background: rgba(132,204,255,0.06); border: 1px dashed var(--border);
  font-size: 12px; color: var(--muted); margin-top: 10px;
}
.visit-prompt-err {
  padding: 10px 14px; border-radius: 9px;
  background: rgba(229,105,93,0.08); border: 1px solid rgba(229,105,93,0.30);
  font-size: 12px; color: var(--red); margin-top: 10px;
}
.vp-result-card {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--card);
}
.vp-row {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 8px; padding: 5px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--border);
}
.vp-row:last-child { border-bottom: none; }
.vp-key { color: var(--muted); font-weight: 500; }
.vp-val { color: var(--text); }
.vp-val em { color: var(--muted); font-style: italic; }
.vp-pick { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.vp-pick-lbl { font-size: 11px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.vp-candidates { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-chip {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11.5px; transition: all 0.12s;
}
.vp-chip:hover { border-color: var(--purple, #a878f5); color: var(--purple, #a878f5); }
.vp-chip-alt {
  background: rgba(94,234,212,0.06); border-color: rgba(94,234,212,0.35); color: var(--teal-l);
}
.vp-chip-alt:hover { background: rgba(94,234,212,0.14); }
.vp-conflict-block {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(212,160,90,0.08); border: 1px solid rgba(212,160,90,0.30);
  border-radius: 9px;
}
.vp-conflict-hd { font-size: 12.5px; font-weight: 600; color: var(--sand, #d4a05a); margin-bottom: 6px; }
.vp-conflict-list {
  margin: 0 0 8px 0; padding-left: 18px; font-size: 11.5px; color: var(--text);
  display: flex; flex-direction: column; gap: 2px;
}
.vp-alt-lbl { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.vp-alt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-warnings {
  margin: 10px 0 0 0; padding-left: 18px; font-size: 11.5px; color: var(--muted);
}
.vp-warnings li { padding: 2px 0; }
.vp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ══════════════════════════════════════════════════════════════
   Emprendimientos — dashboard, kanban de unidades, avance de obra
   ══════════════════════════════════════════════════════════════ */
/* Mini-dashboard del padre (KPIs en línea sobre la lista) */
.prop-dev-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 18px 0;
}
@media (max-width: 900px) { .prop-dev-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .prop-dev-stats { grid-template-columns: repeat(2, 1fr); } }
.dev-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
}
.ds-val {
  font-family: 'Roboto', sans-serif;
  font-size: 20px; font-weight: 600;
  line-height: 1.1; color: var(--text);
}
.ds-lbl {
  font-size: 10px; color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Kanban de unidades */
.units-kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  overflow-x: auto;
}
@media (max-width: 1100px) {
  .units-kanban {
    grid-template-columns: repeat(5, 240px);
    grid-auto-flow: column;
  }
}
.uk-col {
  background: var(--input-bg);
  border-radius: 10px;
  border-top: 3px solid var(--muted);
  display: flex; flex-direction: column;
  min-height: 200px;
}
.uk-col.uk-col-hover { background: rgba(132,204,255,0.08); border-top-color: var(--teal-l); }
.uk-col-hd {
  padding: 9px 12px;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.uk-count {
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  background: var(--card);
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border);
}
.uk-col-body {
  flex: 1;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.uk-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: grab;
  transition: transform 0.1s, box-shadow 0.1s;
}
.uk-card:hover { border-color: var(--teal-l); }
.uk-card-dragging { opacity: 0.5; transform: rotate(-1deg); }
.uk-card-title {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uk-card-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.uk-card-price { font-size: 11.5px; color: var(--teal-l); font-weight: 600; margin-top: 4px; }
.uk-empty { color: var(--muted); font-size: 11px; text-align: center; padding: 10px 0; font-style: italic; }

/* Tab "Avance de obra": milestones + fotos */
.progress-ms {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.progress-ms-hd {
  display: flex; align-items: center; gap: 10px;
}
.progress-ms-date { font-size: 12px; color: var(--muted); }
.progress-ms-pct {
  font-family: 'Roboto', sans-serif;
  font-size: 18px; font-weight: 600;
  color: var(--teal-l);
  margin-left: auto;
}
.progress-ms-del {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 16px;
  width: 22px; height: 22px; border-radius: 50%;
  opacity: 0.5; transition: opacity 0.12s, color 0.12s;
}
.progress-ms-del:hover { opacity: 1; color: var(--red); }
.progress-ms-bar {
  height: 6px; background: rgba(255,255,255,0.04);
  border-radius: 3px; overflow: hidden; margin-top: 8px;
}
.progress-ms-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-l));
  transition: width 0.3s ease;
}
.progress-ms-note { font-size: 12px; color: var(--text); margin-top: 6px; line-height: 1.5; }
.progress-ms-by  { font-size: 10.5px; color: var(--muted); margin-top: 4px; }

/* Grid de fotos de avance dentro de la tab Progress */
.progress-photos-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.progress-photo {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.progress-photo img {
  width: 100%; height: 140px; object-fit: cover;
  display: block;
}
.progress-photo-meta {
  padding: 8px 10px;
  font-size: 11px; line-height: 1.4;
  display: flex; flex-direction: column; gap: 3px;
}
.progress-photo-meta strong { color: var(--teal-l); font-size: 11px; }
.pp-render {
  display: inline-block; font-size: 9px; font-weight: 600;
  color: var(--purple, #a878f5); background: rgba(168,120,245,0.12);
  padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em;
  width: fit-content;
}
.pp-caption { color: var(--muted); }

/* Avance de obra en la ficha CRM read-only */
.dev-progress-current {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px; margin-bottom: 10px;
}
.dpc-pct {
  font-family: 'Roboto', sans-serif;
  font-size: 32px; font-weight: 600;
  color: var(--teal-l);
  line-height: 1;
}
.dpc-meta { flex: 1; min-width: 0; }
.dpc-date { font-size: 12px; color: var(--text); font-weight: 600; }
.dpc-note { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.dev-progress-bar {
  height: 8px; background: var(--input-bg);
  border-radius: 4px; overflow: hidden;
}
.dev-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--teal-l));
  transition: width 0.3s ease;
}
.dev-progress-row {
  display: grid; grid-template-columns: 70px 50px 1fr;
  gap: 10px; align-items: center;
  padding: 5px 0; font-size: 11.5px;
  border-bottom: 1px dashed var(--border);
}
.dev-progress-row:last-child { border-bottom: none; }
.dpr-date { color: var(--muted); }
.dpr-pct  { color: var(--teal-l); font-weight: 600; }
.dpr-note { color: var(--text); }
.dev-progress-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px; margin-top: 12px;
}
.dpp-item {
  position: relative; display: block;
  border-radius: 7px; overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
}
.dpp-item img { width: 100%; height: 80px; object-fit: cover; display: block; }
.dpp-date {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; text-align: center;
}
.dpp-more {
  display: flex; align-items: center; justify-content: center;
  background: var(--input-bg); border: 1px dashed var(--border);
  border-radius: 7px; font-size: 13px; color: var(--muted);
  min-height: 80px;
}

/* ═══════════════ Red Housia — cápsula de visibilidad y perfil sub-vista ═══════════════ */
.vis-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); padding: 6px 12px; border-radius: 999px;
  font: inherit; font-size: 11.5px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.vis-pill:hover { background: var(--card-h); border-color: var(--teal-l); }
.vis-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,0.04); }
.vis-pill-label strong { font-weight: 600; color: var(--text); margin-left: 2px; }

/* Sub-vista de perfil (drill-down dentro del card de Red) */
.net-profile-backbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.net-profile-backbar .btn { font-size: 12px; }
.net-profile-page {
  background: var(--card-h); border: 1px solid var(--border); border-radius: 14px;
  padding: 0 18px 20px; overflow: hidden;
}
.net-profile-cover-inline {
  height: 150px; margin: 0 -18px 0;
  background: linear-gradient(135deg, var(--teal-dim), var(--purple-dim)) center/cover no-repeat;
}
.net-profile-page .net-profile-head {
  margin-top: -36px; padding: 0 4px;
  display: flex; gap: 14px; align-items: flex-end;
}
.net-profile-page .net-profile-stats { margin: 16px 0 14px; }
@media (max-width: 600px) {
  .net-profile-page .net-profile-head { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   Notificaciones — bell badge + drawer derecho
   ══════════════════════════════════════════════════════════════ */
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px var(--midnight);
  pointer-events: none;
}
.notif-badge[hidden] { display: none; }
:root[data-theme="light"] .notif-badge { box-shadow: 0 0 0 2px var(--card); }

.notif-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.32);
  backdrop-filter: blur(2px); z-index: 90; opacity: 0; pointer-events: none;
  transition: opacity 0.18s;
}
.notif-backdrop.open { opacity: 1; pointer-events: auto; }

.notif-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 92vw;
  background: var(--navy); border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgba(0,0,0,0.45);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s ease;
  z-index: 100;
}
.notif-panel.open { transform: translateX(0); }
.notif-panel-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.notif-panel-title { font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 600; }
.notif-panel-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.notif-panel-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px;
  padding: 9px 18px; border-bottom: 1px solid var(--border);
  background: var(--card);
}
.notif-clear-wrap { display: inline-flex; align-items: center; margin-left: auto; }
.notif-clear-confirm {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card-h); border: 1px solid var(--border);
  padding: 3px 8px 3px 10px; border-radius: 999px;
  animation: notifClearFade 0.14s ease-out;
}
.notif-clear-confirm[hidden] { display: none; }
.notif-clear-q { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
@keyframes notifClearFade { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: none; } }

/* Mobile: el confirm "¿Seguro?/Cancelar/Sí, borrar" pisaba el botón
   "Marcar todas leídas" en pantallas angostas (viewport ≤390px). Solución:
   cuando el confirm está visible, el wrap toma toda la fila y ocultamos
   el read-all para liberar espacio. :has() está soportado en iOS Safari
   15.4+ y Chrome 105+, que es el target de la app. */
@media (max-width: 480px) {
  .notif-clear-wrap:has(.notif-clear-confirm:not([hidden])) {
    margin-left: 0; width: 100%;
  }
  .notif-clear-confirm { width: 100%; justify-content: flex-end; }
  .notif-panel-actions:has(.notif-clear-confirm:not([hidden])) [data-action="notif-read-all"] {
    display: none;
  }
}
.notif-list { flex: 1; overflow-y: auto; padding: 4px 0; }

.notif-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.12s; position: relative;
}
.notif-item:hover { background: var(--card-h); }
.notif-item.unread { background: rgba(58,173,173,0.06); }
.notif-item.unread::before {
  content: ''; position: absolute; left: 7px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal-l);
}
.notif-item-ico {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--card-h); border: 1px solid var(--border);
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.35; }
.notif-item-sub { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-item-time { font-size: 10px; color: var(--dim); margin-top: 4px; }
.notif-item-actions {
  display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s;
  position: absolute; top: 10px; right: 12px;
}
.notif-item:hover .notif-item-actions { opacity: 1; }
.notif-item-actions button {
  background: rgba(0,0,0,0.45); border: 1px solid var(--border); color: var(--text);
  font-size: 10.5px; padding: 3px 7px; border-radius: 6px; cursor: pointer;
  backdrop-filter: blur(4px); transition: background 0.12s, color 0.12s;
}
.notif-item-actions button:hover { background: var(--card-h); }
.notif-item-actions button.danger:hover { color: var(--red); border-color: var(--red); }
.notif-empty { padding: 40px 24px; text-align: center; color: var(--dim); font-size: 12.5px; }

/* ═══════════════ Red Housia v2 — header compacto + stories + toggles ═══════════════ */
.net-card-main { padding-top: 16px; }
.net-header {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
/* Variante slim: sin el title block (vive en el topbar). Sólo stats + search,
   más compacta para mobile. Bug #144. */
.net-header-slim {
  padding-bottom: 10px; margin-bottom: 12px;
}
.net-header-id { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; }
.net-header-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--purple));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.net-header-title { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.2px; }
.net-header-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; }
.net-header-stats { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: center; }
.net-stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px; font-size: 11.5px; color: var(--muted);
}
.net-stat-pill b { font-family: 'Roboto', sans-serif; font-size: 14px; color: var(--text); font-weight: 600; }
.net-stat-ico { font-size: 12px; }
.net-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.net-header-actions .btn-add { padding: 7px 14px; font-size: 12px; }
.net-header-actions .vis-pill { padding: 5px 10px; font-size: 11px; }

/* Buscador global de la cabecera (siempre prendido). Pill con icono lupa
   a la izquierda + input que ocupa el resto. Reemplaza al modal "+ Buscar". */
.net-global-search {
  position: relative; display: flex; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 0 12px 0 32px; min-width: 240px; max-width: 320px;
  transition: border-color 0.15s, background 0.15s;
}
.net-global-search:focus-within {
  border-color: var(--teal-l); background: var(--card-h);
  box-shadow: 0 0 0 3px rgba(23,198,181,0.12);
}
.net-gs-ico {
  position: absolute; left: 12px; color: var(--muted); font-size: 14px;
  pointer-events: none; line-height: 1;
}
#net-global-search-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 12.5px;
  padding: 8px 0; height: 32px;
}
#net-global-search-input::placeholder { color: var(--muted); }
#net-global-search-input::-webkit-search-cancel-button { cursor: pointer; }

@media (max-width: 760px) {
  .net-header-stats { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .net-header-actions { order: 2; flex: 1; min-width: 0; }
  .net-global-search { min-width: 0; width: 100%; max-width: 100%; }
}

/* Panel de resultados del buscador global */
.net-gs-results { display: flex; flex-direction: column; gap: 18px; }
.net-gs-results[hidden] { display: none; }
.net-gs-section { display: flex; flex-direction: column; gap: 10px; }
.net-gs-section-hd { display: flex; align-items: baseline; gap: 8px; }
.net-gs-section-title {
  font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--text);
}
.net-gs-section-count {
  font-size: 11px; color: var(--muted);
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 8px;
}

/* Reel horizontal de inmobiliarias (cover + logo circular tipo IG reel) */
.net-gs-reel {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.net-reel-card {
  position: relative; cursor: pointer; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column;
}
.net-reel-card:hover {
  transform: translateY(-2px); border-color: var(--teal-l);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.net-reel-cover {
  height: 110px; background: linear-gradient(135deg, var(--teal-dim), var(--purple-dim)) center/cover no-repeat;
}
.net-reel-logo {
  position: absolute; top: 78px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--card-h) center/cover no-repeat;
  border: 3px solid var(--card);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 600; color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.net-reel-body {
  padding: 38px 12px 14px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.net-reel-name {
  font-family: 'Roboto', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--text); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.net-reel-tagline {
  font-size: 11px; color: var(--muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.net-reel-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.net-reel-badge { margin-top: 6px; }
.net-reel-badge .pill { font-size: 10px; padding: 2px 8px; }

/* Stories bar tipo IG */
.net-stories {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px;
  margin-bottom: 14px; border-bottom: 1px solid var(--border);
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.net-stories::-webkit-scrollbar { height: 6px; }
.net-stories::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.net-story { flex-shrink: 0; width: 72px; text-align: center; cursor: pointer; scroll-snap-align: start; user-select: none; }
.net-story-avatar {
  position: relative; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
  background: var(--midnight) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 600; color: var(--text);
  box-shadow: 0 0 0 2px var(--card-h), 0 0 0 4px var(--border);
  transition: transform 0.15s, box-shadow 0.15s;
}
.net-story:hover .net-story-avatar { transform: scale(1.06); box-shadow: 0 0 0 2px var(--card-h), 0 0 0 4px var(--teal-l); }
.net-story.has-new .net-story-avatar { padding: 4px; background-image: linear-gradient(135deg, var(--teal), var(--sand), var(--purple)); box-shadow: 0 0 0 2px var(--card-h); }
.net-story.has-new .net-story-inner {
  width: 100%; height: 100%; border-radius: 50%; background: var(--card-h) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-size: 20px; color: var(--text);
}
.net-story-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  border-radius: 10px; background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid var(--card);
}
.net-story-name {
  display: block; font-size: 10.5px; color: var(--muted); margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.net-story.is-discover .net-story-avatar { background: var(--card); color: var(--teal-l); font-size: 28px; }

/* Toolbar de filtros del feed: segmented controls */
.net-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.seg-toggle { display: inline-flex; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.seg-btn {
  background: transparent; border: none; color: var(--muted);
  padding: 6px 12px; border-radius: 7px; font: inherit; font-size: 12px;
  cursor: pointer; transition: background 0.12s, color 0.12s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  /* Antes: gradient teal-l → teal. El teal-l (#35E6D4) está pensado para
     hover/glow, no para superficies grandes en estado active — se veía muy
     brillante. Pasamos a teal sólido (Bug #51). */
  background: var(--teal);
  color: #fff; font-weight: 500;
  box-shadow: 0 4px 12px rgba(23,198,181,0.25);
}
.seg-toggle-view { margin-left: auto; }

/* Sub-tabs internos de "Mi red" */
.ops-subtabs { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.ops-subtabs .ops-tab { font-size: 12px; padding: 5px 12px; }

/* ── Toggles colapsables del feed (🔍 buscar, ⚙ filtros) ── */
.net-toggle-row { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.net-toggle-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  padding: 6px 12px; border-radius: 9px;
  font: inherit; font-size: 12px; line-height: 1;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.net-toggle-btn:hover { color: var(--text); border-color: var(--teal-l); }
.net-toggle-btn[data-active="true"] { color: var(--teal-l); border-color: var(--teal-l); background: var(--teal-dim); }
.net-toggle-btn[data-has-filters="true"]::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal-l);
  box-shadow: 0 0 0 2px var(--card);
}
.net-toggle-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px;
  background: var(--teal); color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 600;
  line-height: 1;
}

/* Buscador suelto (toggle 🔍) */
.net-search-row { margin-bottom: 14px; }
.net-search-row input {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--input-bg); color: var(--text);
  font: inherit; font-size: 14px;
}
.net-search-row input:focus { outline: none; border-color: var(--teal-l); box-shadow: 0 0 0 3px var(--teal-dim); }

/* ── Tarjetas de Mi Red (accepted/incoming/outgoing) responsive ── */
.net-card-list { display: flex; flex-direction: column; gap: 10px; }
.net-card-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card);
  align-items: center;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.net-card-item:hover { border-color: var(--teal-l); box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
.net-card-logo {
  width: 46px; height: 46px; border-radius: 9px;
  background: linear-gradient(135deg, var(--teal), var(--sand));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 600; color: #fff;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.net-card-logo.has-img {
  background-color: var(--midnight); background-size: contain;
  background-position: center; background-repeat: no-repeat;
  color: transparent;
}
.net-card-body { min-width: 0; cursor: pointer; }
.net-card-name { font-size: 14.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-card-sub  { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.net-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.net-card-meta-bit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted);
  background: var(--input-bg); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px;
}
.net-card-meta-bit.net-card-shared { color: var(--teal-l); border-color: var(--teal-dim); }
.net-card-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Mobile: tarjeta apila acciones abajo del cuerpo */
@media (max-width: 640px) {
  .net-card-item { grid-template-columns: 40px 1fr; grid-template-areas: 'logo body' 'actions actions'; row-gap: 8px; padding: 10px; }
  .net-card-logo { grid-area: logo; width: 40px; height: 40px; font-size: 16px; }
  .net-card-body { grid-area: body; }
  .net-card-actions { grid-area: actions; justify-content: flex-start; }
  .net-card-actions .btn, .net-card-actions .card-link { font-size: 12px; padding: 5px 10px; }
  .net-toggle-row { width: 100%; margin-left: 0; }
}

/* ────── Módulo "Mi Web" ────── */
.miweb-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 22px 24px;
}
.miweb-hero-main { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1; }
.miweb-logo {
  width: 64px; height: 64px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 600;
  color: var(--muted); flex-shrink: 0; overflow: hidden;
}
.miweb-eyebrow {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-l); font-weight: 600; margin-bottom: 3px;
}
.miweb-name {
  font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 600;
  letter-spacing: -0.4px; color: var(--text); margin-bottom: 4px;
}
.miweb-url code {
  background: var(--input-bg); border: 1px solid var(--border);
  padding: 4px 9px; border-radius: 6px; font-size: 11.5px;
  color: var(--teal-l); display: inline-block;
}
.miweb-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* Mobile: stack hero en columna y dejá la URL break libre. En el layout
   original el flex-wrap del hero NO disparaba porque el <code> con la URL
   sin espacios fuerza un min-width intrínseco — los botones se superponían
   sobre la URL en lugar de saltar abajo. */
@media (max-width: 699px) {
  .miweb-hero { flex-direction: column; align-items: stretch; padding: 18px 16px; gap: 14px; }
  .miweb-hero-main { width: 100%; }
  .miweb-url { width: 100%; }
  .miweb-url code {
    display: block; max-width: 100%; box-sizing: border-box;
    word-break: break-all; overflow-wrap: anywhere;
    white-space: normal; line-height: 1.5;
  }
  .miweb-hero-actions { width: 100%; }
  .miweb-hero-actions .btn { flex: 1; justify-content: center; }
}

.miweb-panel { animation: fadeUp 0.18s ease; }
.miweb-save-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Tag "Tu propiedad" / "Red" en cada card del feed */
.net-card-photo .net-card-origin {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: rgba(10,12,16,0.78); color: #fff; backdrop-filter: blur(4px);
}
.net-card-photo .net-card-origin.own { background: rgba(42,140,132,0.92); }

/* ═══════════════════ Vista Mercado + Tasación ═══════════════════ */
/* Toolbar de filtros del top de la vista. */
.market-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.market-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.market-fld { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.market-fld > span {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.market-fld select, .market-fld input {
  background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
  padding: 7px 10px; border-radius: 8px; font-size: 13px; outline: none;
  transition: border-color 120ms;
}
.market-fld select:focus, .market-fld input:focus { border-color: var(--teal); }
.market-universe-note {
  font-size: 11px; color: var(--muted); margin-bottom: 10px; font-style: italic;
}

/* Fila clickeable del ranking de zonas. */
.mkt-zone-row { cursor: pointer; transition: background 80ms; }
.mkt-zone-row:hover { background: var(--hover-tint); }
.mkt-zone-row-active {
  background: var(--teal-dim) !important;
  box-shadow: inset 3px 0 0 var(--teal);
}

/* Chart de tendencia mensual: SVG full-width, alturas responsive. */
.mkt-chart-wrap { padding: 6px 4px 12px; }
.mkt-chart-hd {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--text); margin-bottom: 6px;
}
.mkt-legend { font-size: 14px; vertical-align: middle; }
.mkt-legend-offer { color: var(--teal); }
.mkt-legend-closed { color: var(--sand); }
.mkt-chart {
  width: 100%; height: 150px; display: block;
  border: 1px solid var(--border); border-radius: 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(70,199,186,0.04) 100%);
}
.mkt-chart-line {
  fill: none; stroke: var(--teal); stroke-width: 1.5; vector-effect: non-scaling-stroke;
}
.mkt-chart-dot-offer { fill: var(--teal); }
.mkt-chart-dot-closed { fill: var(--sand); stroke: #fff; stroke-width: 0.4; }
.mkt-chart-x {
  display: flex; justify-content: space-between; font-size: 9.5px;
  color: var(--muted); margin-top: 4px; padding: 0 2px;
}
.mkt-chart-x span:nth-child(even) { display: none; }
@media (min-width: 700px) { .mkt-chart-x span:nth-child(even) { display: inline; } }

/* Sección título: usado para "Por superficie", "Cierres recientes", etc. */
.mkt-section-title {
  font-size: 12px; font-weight: 500; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}

/* Distribución (rooms / surface): filas con label, valor y n. */
.mkt-dist { display: flex; flex-direction: column; gap: 6px; }
.mkt-dist-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 6px 10px; background: var(--input-bg); border-radius: 6px;
  font-size: 12.5px;
}
.mkt-dist-label { color: var(--text); }
.mkt-dist-val { color: var(--teal-l); font-weight: 500; }
.mkt-dist-n { color: var(--muted); font-size: 11px; }

/* Cierres recientes / comparables. */
.mkt-closed-list, .mkt-comps-list { display: flex; flex-direction: column; gap: 6px; }
.mkt-closed-row, .mkt-comp-row {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 8px 12px; background: var(--input-bg); border-radius: 7px;
  border: 1px solid transparent; transition: border-color 80ms;
}
.mkt-closed-row:hover, .mkt-comp-row:hover { border-color: var(--border); }
.mkt-closed-main, .mkt-comp-main { flex: 1 1 auto; min-width: 0; }
.mkt-closed-title, .mkt-comp-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.mkt-closed-title a, .mkt-comp-title a { color: var(--teal-l); text-decoration: none; }
.mkt-closed-title a:hover, .mkt-comp-title a:hover { text-decoration: underline; }
.mkt-closed-meta, .mkt-comp-meta {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.mkt-closed-price, .mkt-comp-price { text-align: right; flex-shrink: 0; }
.mkt-closed-price strong, .mkt-comp-price strong {
  font-size: 13.5px; color: var(--text); font-weight: 600;
}
.mkt-closed-sub, .mkt-comp-sub {
  font-size: 10.5px; color: var(--muted); margin-top: 2px;
}

/* Card grande con el resultado de la tasación. */
.mkt-appraise-result-card {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 11px; padding: 16px; margin-top: 14px;
}
.mkt-appraise-header {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px;
  align-items: center; margin-bottom: 14px;
}
@media (max-width: 600px) { .mkt-appraise-header { grid-template-columns: 1fr; } }
.mkt-appraise-mid {
  font-size: 26px; font-weight: 600; letter-spacing: -0.5px;
  color: var(--text); line-height: 1.1; margin-top: 2px;
}
.mkt-appraise-mid-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.mkt-appraise-meta { text-align: right; }
.mkt-appraise-delta {
  background: var(--glass-bg); border: 1px solid var(--border);
  border-left-width: 3px; border-radius: 7px; padding: 10px 12px; min-width: 140px;
}

/* Barra de rango visual (p25 — mediana — p75) con marker del precio actual. */
.mkt-range-bar { margin: 6px 0 4px; }
.mkt-range-track {
  position: relative; height: 10px; background: var(--card-h);
  border-radius: 5px; overflow: visible;
}
.mkt-range-fill {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--teal), var(--teal-l));
  border-radius: 5px; opacity: 0.55;
}
.mkt-range-marker {
  position: absolute; top: -4px; width: 4px; height: 18px;
  /* var(--bg) no existe — el "ring" usa card como fondo del slider. */
  background: var(--sand); border-radius: 2px; box-shadow: 0 0 0 2px var(--card);
  transform: translateX(-2px);
}
.mkt-range-labels {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  font-size: 11px; color: var(--muted); margin-top: 6px;
}

/* Ajustes aplicados (estado, antigüedad, etc.). */
.mkt-appraise-adj {
  margin-top: 12px; padding: 8px 12px; background: var(--card-h);
  border-radius: 7px; display: flex; flex-direction: column; gap: 4px;
}
.mkt-adj-row { display: flex; justify-content: space-between; font-size: 12px; }

/* Panel de tasación dentro de la ficha de propiedad. */
.prop-appraise-panel {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 14px;
  margin-top: 6px;
}
.prop-appraise-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap;
}
.prop-appraise-title {
  font-size: 13.5px; font-weight: 500; color: var(--text);
  letter-spacing: -0.01em;
}
.prop-appraise-sub { font-size: 11px; color: var(--muted); margin-top: 3px; max-width: 60ch; }
/* ═══════════════ Editor Markdown (EasyMDE) — adapta al tema ═══════════════
   EasyMDE viene con un CSS claro fijo. Estos overrides lo integran al sistema
   de tokens del CRM para que respete dark/light y los bordes del resto de
   los inputs. Targets:
     .EasyMDEContainer  → wrapper
     .editor-toolbar    → barra de íconos
     .CodeMirror        → área de edición (CodeMirror-based)
     .editor-preview-*  → preview lateral / fullscreen
     .editor-statusbar  → barra inferior
   Usamos vars del tema (--card, --text, etc.) — funciona en dark y light. */

.EasyMDEContainer { border-radius: 10px; overflow: hidden; }

.editor-toolbar {
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 6px 4px;
  opacity: 1;
}
.editor-toolbar a,
.editor-toolbar button {
  color: var(--muted) !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
}
.editor-toolbar a:hover,
.editor-toolbar a.active,
.editor-toolbar button:hover,
.editor-toolbar button.active {
  background: var(--card-h) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.editor-toolbar i.separator {
  border-left: 1px solid var(--border);
  border-right: 1px solid transparent;
}
.editor-toolbar.disabled-for-preview a:not(.no-disable) { background: transparent; }

.EasyMDEContainer .CodeMirror {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  font-family: 'SF Mono', Consolas, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 8px 4px;
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--text); }
.EasyMDEContainer .CodeMirror-selected { background: var(--teal-dim) !important; }
.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected { background: var(--teal-dim) !important; }
.EasyMDEContainer .CodeMirror-line::selection,
.EasyMDEContainer .CodeMirror-line ::selection { background: var(--teal-dim) !important; }

/* Tokens de syntax highlight (CodeMirror modo markdown). */
.EasyMDEContainer .cm-header { color: var(--teal-l); font-weight: 600; }
.EasyMDEContainer .cm-strong { color: var(--text); font-weight: 700; }
.EasyMDEContainer .cm-em     { color: var(--text); font-style: italic; }
.EasyMDEContainer .cm-link,
.EasyMDEContainer .cm-url    { color: var(--sand); }
.EasyMDEContainer .cm-comment,
.EasyMDEContainer .cm-formatting { color: var(--dim); }
.EasyMDEContainer .cm-hr     { color: var(--muted); }
.EasyMDEContainer .cm-quote  { color: var(--muted); font-style: italic; }
.EasyMDEContainer .cm-variable-2,
.EasyMDEContainer .cm-keyword { color: var(--purple); }

/* Preview en side-by-side y en modo solo-preview. */
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}
.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview h3,
.EasyMDEContainer .editor-preview-side h1,
.EasyMDEContainer .editor-preview-side h2,
.EasyMDEContainer .editor-preview-side h3 { color: var(--text); border-bottom-color: var(--border); }
.EasyMDEContainer .editor-preview a,
.EasyMDEContainer .editor-preview-side a { color: var(--teal-l); }
.EasyMDEContainer .editor-preview hr,
.EasyMDEContainer .editor-preview-side hr { border-color: var(--border); }
.EasyMDEContainer .editor-preview code,
.EasyMDEContainer .editor-preview-side code {
  background: var(--input-bg); color: var(--sand);
  padding: 2px 5px; border-radius: 4px; font-size: 0.92em;
}

.editor-statusbar {
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border);
  border-top: 0;
  font-size: 10.5px;
}

/* Fullscreen del editor: por encima del FAB y del side panel, debajo de modales.
   La toolbar fullscreen vuelve a aparecer y necesita asentarse sobre el body. */
.editor-toolbar.fullscreen,
.CodeMirror-fullscreen,
.editor-preview-side {
  background: var(--midnight);
  z-index: 1050 !important;
}
.editor-toolbar.fullscreen { border-bottom: 1px solid var(--border); }

/* En el modal de contrato, el editor pisa el padding del modal-body. Devolvemos
   un poco de aire arriba para que no se pegue al label "Cuerpo del contrato". */
#contract-form .EasyMDEContainer { margin-top: 4px; }
/* ═══════════════ Vista Reservas — calendario Airbnb-style + timeline ═══════════════
   Dos vistas convivientes:
     1. Calendario mensual por propiedad (grilla 7 col, días pintados según estado).
     2. Timeline global (Gantt-like): fila por propiedad, columnas por día.
   Switch entre vistas en el toolbar. Modal de nueva reserva con date range
   picker + breakdown vivo de fees (nights × rate + cleaning + commission + extras). */

/* ── Toolbar / view switch ─────────────────────────────────────────────── */
.rsv-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.rsv-toolbar .rsv-prop-sel { min-width: 240px; }
.rsv-toolbar .rsv-spacer { flex: 1; }

/* ─── Autocomplete de propiedad (input inline + dropdown) ─── */
.rsv-prop-ac { position: relative; min-width: 280px; max-width: 380px; }
.rsv-prop-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 9px;
  font: inherit; font-size: 13px;
  transition: border-color 0.12s ease;
}
.rsv-prop-input::placeholder { color: var(--muted); }
.rsv-prop-input:hover { border-color: rgba(70,199,186,0.35); }
.rsv-prop-input:focus { outline: none; border-color: var(--teal-l); }

.rsv-prop-list {
  position: absolute; top: calc(100% + 4px); left: 0;
  width: 100%; min-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  z-index: 40;
  padding: 6px;
}
.rsv-prop-opt {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.10s ease;
}
.rsv-prop-opt:hover, .rsv-prop-opt.active {
  background: var(--card-h);
}
.rsv-prop-opt.active { border-left: 2px solid var(--teal-l); }
.rsv-prop-opt-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rsv-prop-opt-sub {
  font-size: 11.5px; color: var(--muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rsv-prop-empty {
  padding: 16px 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

.rsv-view-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 9px;
  overflow: hidden; background: var(--input-bg);
}
.rsv-view-toggle button {
  padding: 7px 14px; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background 0.12s, color 0.12s;
  border-right: 1px solid var(--border);
}
.rsv-view-toggle button:last-child { border-right: 0; }
.rsv-view-toggle button.active { background: var(--teal); color: #fff; }
.rsv-view-toggle button:not(.active):hover { background: var(--card-h); color: var(--text); }

/* ── Calendario mensual (vista por propiedad) ─────────────────────────── */
.rsv-cal-card { padding: 16px; }
.rsv-cal-nav {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.rsv-cal-nav .rsv-month {
  font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 600;
  min-width: 200px; text-align: center; text-transform: capitalize;
}
.rsv-cal-nav button.rsv-nav-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.rsv-cal-nav button.rsv-nav-btn:hover { background: var(--card-h); }
.rsv-cal-legend {
  display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto;
  font-size: 11px; color: var(--muted);
}
.rsv-cal-legend .rsv-leg {
  display: inline-flex; align-items: center; gap: 5px;
}
.rsv-cal-legend .rsv-leg-sw {
  width: 11px; height: 11px; border-radius: 3px; border: 1px solid transparent;
}
.rsv-leg-sw.s-reserved  { background: var(--sand-dim);  border-color: var(--sand);  }
.rsv-leg-sw.s-confirmed { background: var(--green-dim); border-color: var(--green); }
.rsv-leg-sw.s-blocked   { background: var(--hover-tint); border-color: var(--muted); }

.rsv-cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.rsv-cal-dayhead {
  text-align: center; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 4px;
}

.rsv-cal-cell {
  position: relative;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  min-height: 84px; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.rsv-cal-cell:hover { background: var(--card-h); }
.rsv-cal-cell.is-other  { opacity: 0.35; }
.rsv-cal-cell.is-past   { opacity: 0.6; cursor: default; }
.rsv-cal-cell.is-today  { border-color: var(--teal-l); }
.rsv-cal-cell.is-today .rsv-day-num { color: var(--teal-l); font-weight: 700; }
.rsv-cal-cell.is-selecting,
.rsv-cal-cell.is-selected     { border-color: var(--teal-l); background: var(--teal-dim); }
.rsv-cal-cell.is-range        { background: var(--teal-dim); }
.rsv-cal-cell.is-range-start  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rsv-cal-cell.is-range-end    { border-top-left-radius:  0; border-bottom-left-radius:  0; }
.rsv-cal-cell.is-range-mid    { border-radius: 0; }

.rsv-day-num { font-size: 12px; font-weight: 500; color: var(--text); }

/* Pill de reserva dentro de la celda (Airbnb-style) */
.rsv-pill {
  font-size: 10.5px; line-height: 1.25;
  padding: 3px 7px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; border: 1px solid transparent;
  transition: filter 0.12s, transform 0.08s;
}
.rsv-pill:hover { filter: brightness(1.15); }
.rsv-pill:active { transform: scale(0.98); }
.rsv-pill.s-reserved  { background: var(--sand-dim);  color: var(--sand);  border-color: rgba(23,198,181,0.35); }
.rsv-pill.s-confirmed { background: var(--green-dim); color: var(--green); border-color: rgba(63,185,80,0.35); }
.rsv-pill.s-blocked   { background: var(--hover-tint); color: var(--muted); border-color: var(--border); }
.rsv-pill.s-cancelled { background: var(--hover-tint); color: var(--dim); text-decoration: line-through; }

.rsv-cal-empty {
  padding: 60px 18px; text-align: center; color: var(--muted);
  font-size: 13px;
}
.rsv-cal-empty strong { color: var(--text); font-weight: 600; }

/* ── Timeline global (Gantt) ──────────────────────────────────────────── */
.rsv-tl-wrap {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  /* Scroll horizontal en el contenedor; el header sticky usa position:sticky
     contra este overflow. */
  position: relative;
}
.rsv-tl-scroll { overflow-x: auto; overflow-y: visible; }
.rsv-tl {
  /* La grilla tiene una columna fija para "Propiedad" + N columnas auto
     (una por día). JS calcula y aplica grid-template-columns inline.
     position:relative para que las barras absolute (creadas en JS) se
     posicionen respecto a la grilla y no al wrap externo. */
  position: relative;
  display: grid;
  min-width: 100%;
}
.rsv-tl-corner,
.rsv-tl-prop {
  background: var(--card);
  border-right: 1px solid var(--border);
  position: sticky; left: 0; z-index: 2;
}
.rsv-tl-corner {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 3;
}
.rsv-tl-prop {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.rsv-tl-prop .rsv-tl-prop-name {
  font-size: 12px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsv-tl-prop .rsv-tl-prop-sub {
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsv-tl-header {
  padding: 8px 0; text-align: center; font-size: 10.5px;
  color: var(--muted); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--card);
}
.rsv-tl-header.is-weekend { background: var(--hover-tint); }
.rsv-tl-header .rsv-tl-h-day { font-size: 13px; font-weight: 600; color: var(--text); }
.rsv-tl-header.is-today .rsv-tl-h-day { color: var(--teal-l); }
.rsv-tl-cell {
  border-bottom: 1px solid var(--border);
  border-right: 1px dashed transparent;
  min-height: 44px; position: relative;
}
.rsv-tl-cell.is-weekend { background: var(--hover-tint); }
.rsv-tl-cell.is-today   { background: var(--teal-dim); }

/* Bar dentro del timeline (booking que ocupa N días) */
.rsv-tl-bar {
  position: absolute; top: 6px; bottom: 6px;
  border-radius: 6px;
  display: flex; align-items: center; padding: 0 8px;
  font-size: 11px; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; z-index: 1;
  border: 1px solid transparent;
  transition: filter 0.12s, transform 0.08s;
}
.rsv-tl-bar:hover { filter: brightness(1.18); z-index: 2; }
.rsv-tl-bar.s-reserved  { background: var(--sand-dim);  color: var(--sand);  border-color: rgba(23,198,181,0.45); }
.rsv-tl-bar.s-confirmed { background: var(--green-dim); color: var(--green); border-color: rgba(63,185,80,0.45); }
.rsv-tl-bar.s-blocked   { background: var(--hover-tint); color: var(--muted); border-color: var(--border); }
.rsv-tl-bar.s-cancelled { background: var(--hover-tint); color: var(--dim);  text-decoration: line-through; }

/* ── Modal de reserva con breakdown vivo ──────────────────────────────── */
.rsv-modal { max-width: 720px; }
.rsv-modal-body {
  display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: flex-start;
}
@media (max-width: 760px) {
  .rsv-modal-body { grid-template-columns: 1fr; }
}
.rsv-form-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.rsv-form-section + .rsv-form-section { margin-top: 10px; }
.rsv-form-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 8px;
}

/* Breakdown card (sidebar derecha del modal) */
.rsv-breakdown {
  position: sticky; top: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.rsv-bd-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 4px;
}
.rsv-bd-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px;
}
.rsv-bd-row .rsv-bd-lbl   { color: var(--text); }
.rsv-bd-row .rsv-bd-sub   { color: var(--muted); font-size: 11px; }
.rsv-bd-row .rsv-bd-val   { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; }
.rsv-bd-row .rsv-bd-val.bd-secondary { color: var(--muted); font-size: 11px; font-weight: 400; }
.rsv-bd-sep { height: 1px; background: var(--border); margin: 4px 0; }
.rsv-bd-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border);
  font-family: 'Roboto', sans-serif;
}
.rsv-bd-total .rsv-bd-lbl { font-size: 13px; font-weight: 600; color: var(--text); }
.rsv-bd-total .rsv-bd-val { font-size: 18px; font-weight: 700; color: var(--teal-l); font-variant-numeric: tabular-nums; }
.rsv-bd-total .rsv-bd-alt { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }
.rsv-bd-deposit {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--sand-dim); color: var(--sand);
  font-size: 11.5px; line-height: 1.5;
}
.rsv-bd-empty {
  padding: 30px 8px; text-align: center; color: var(--muted); font-size: 12px;
}

.rsv-extra-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.rsv-extra-row:last-child { border-bottom: 0; }
.rsv-extra-row input[type="checkbox"] { width: 14px; height: 14px; }
.rsv-extra-row .rsv-extra-lbl   { flex: 1; font-size: 12.5px; }
.rsv-extra-row .rsv-extra-sub   { font-size: 10.5px; color: var(--muted); }
.rsv-extra-row .rsv-extra-price { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Form de fees en ficha de propiedad ──────────────────────────────── */
.rsv-fees-table { width: 100%; border-collapse: collapse; }
.rsv-fees-table th,
.rsv-fees-table td { padding: 8px 6px; font-size: 12px; text-align: left; border-bottom: 1px solid var(--border); }
.rsv-fees-table th { color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; }
.rsv-fees-table input,
.rsv-fees-table select {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 7px; color: var(--text); font: inherit; font-size: 12px;
}
.rsv-fees-table .rsv-fees-del {
  background: transparent; border: 0; color: var(--red); cursor: pointer;
  font-size: 14px; padding: 4px 6px;
}
.rsv-fees-empty { padding: 14px; color: var(--muted); font-size: 12px; text-align: center; }
/* ── Vista Búsqueda global (resultados del buscador del topbar) ── */

.search-results { display: flex; flex-direction: column; gap: 18px; }

.search-loading,
.search-empty {
  padding: 24px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.search-group { border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }
.search-group-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--card-h, var(--card));
  border-bottom: 1px solid var(--border);
}
.search-group-title { font-weight: 600; font-size: 13px; color: var(--text); }
.search-group-count {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--input-bg, var(--card)); color: var(--muted);
  border: 1px solid var(--border);
}

.search-group-items { list-style: none; margin: 0; padding: 0; }
.search-group-items li + li { border-top: 1px solid var(--border); }

.search-item {
  display: block; padding: 10px 14px;
  text-decoration: none; color: var(--text);
  transition: background 0.12s;
}
.search-item:hover { background: var(--card-h, rgba(127,127,127,0.06)); }
.search-item-title { font-size: 13px; font-weight: 500; }
.search-item-sub   { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* Wise-style picker: chips con avatar (foto o iniciales) + nombre, buscador
   con autocomplete remoto. Reemplaza <select> en asociaciones (broker, cliente,
   propiedad, etc.). Single y multi-select. Usa los tokens del 00-base.css. */

.wp-root {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 38px;
}

/* Zona de chips seleccionados + input inline */
.wp-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--input-bg);
  cursor: text;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.wp-control:focus-within {
  border-color: var(--accent, #7c5cff);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .15);
}
.wp-control[data-disabled="1"] {
  opacity: .55;
  pointer-events: none;
}

/* Chip de cada item seleccionado (multi) o el único (single) */
.wp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  background: var(--chip-bg, rgba(124, 92, 255, .08));
  border: 1px solid var(--chip-border, rgba(124, 92, 255, .25));
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text);
  max-width: 100%;
}
.wp-chip .wp-avatar { width: 22px; height: 22px; font-size: 10px; }
.wp-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.wp-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.wp-chip-remove:hover { background: rgba(0, 0, 0, .08); color: var(--text); }
html[data-theme="dark"] .wp-chip-remove:hover { background: rgba(255, 255, 255, .08); }

/* Input de búsqueda inline */
.wp-input {
  flex: 1;
  min-width: 80px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  padding: 4px 2px;
}
.wp-input::placeholder { color: var(--muted); }

/* Variante compacta para usar en barras de filtros (altura matching
   .field-inline). Aplicada vía .filter-wp-host wrapper. Bug #100. */
.filter-wp-host .wp-root { min-height: 32px; gap: 0; }
.filter-wp-host .wp-control { min-height: 32px; padding: 2px 6px; border-color: var(--glass-border); }
.filter-wp-host .wp-input { font-size: 12px; padding: 2px 2px; }
.filter-wp-host .wp-chip { padding: 1px 6px 1px 1px; font-size: 12px; }
.filter-wp-host .wp-chip .wp-avatar { width: 18px; height: 18px; font-size: 9px; }
.filter-wp-host .wp-chip-label { max-width: 120px; }

/* Botón clear (single, cuando hay valor y no se busca) */
.wp-clear {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}
.wp-clear:hover { color: var(--text); }

/* Dropdown de resultados */
.wp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  z-index: 1000;
  background: var(--card-bg, var(--input-bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.wp-dropdown[data-open="1"] { display: block; }

.wp-empty, .wp-loading {
  padding: 14px 12px;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

/* Grid de opciones — estilo Wise: avatar grande + nombre debajo */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 4px;
  padding: 8px;
}
.wp-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  text-align: center;
  transition: background-color .1s ease, border-color .1s ease;
}
.wp-grid-item:hover,
.wp-grid-item[data-active="1"] {
  background: var(--hover-bg, rgba(124, 92, 255, .08));
  border-color: var(--chip-border, rgba(124, 92, 255, .25));
}
.wp-grid-item[data-selected="1"] {
  background: var(--chip-bg, rgba(124, 92, 255, .12));
  border-color: var(--accent, #7c5cff);
}

.wp-grid-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  max-width: 100%;
  word-break: break-word;
  /* Limitar a 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-grid-sublabel {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Avatar: foto circular o iniciales con color por hash */
.wp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  user-select: none;
  letter-spacing: .5px;
}
.wp-avatar[data-photo="1"] { background-color: #ddd; color: transparent; }

/* Variante cuadrada para propiedades (más fiel a "miniatura") */
.wp-avatar[data-shape="square"] {
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: 0;
}

/* Mobile: dropdown ocupa más ancho */
@media (max-width: 699px) {
  .wp-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
  .wp-avatar { width: 40px; height: 40px; }
}
/* ═══════════════════════════════════════════════════════════════
   Marketing module: hub unificado de portales + redes sociales.
   Reusa primitives del CRM (.card, .kpi, .pill, .btn). Lo específico
   son los chips de plataforma, el calendario editorial y los bar
   charts de analytics.
   ═══════════════════════════════════════════════════════════════ */

/* Grid de 5 columnas para los KPIs principales. Replica el shape de .g4. */
.g5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

/* ── Header del módulo ── */
.mkt-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.mkt-header-text { min-width: 0; }
.mkt-header-title {
  font-size: 22px; font-weight: 600; letter-spacing: -0.4px;
  margin: 0 0 4px; color: var(--text);
}
.mkt-header-sub { font-size: 12.5px; color: var(--muted); max-width: 620px; line-height: 1.5; }
.mkt-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Selector de plataformas (chips horizontales) ── */
.mkt-platforms {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px;
}
.mkt-plat-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--glass-bg, transparent); color: var(--text);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .15s ease;
}
.mkt-plat-chip:hover { background: var(--hover-tint); border-color: var(--border-strong, var(--border)); }
.mkt-plat-chip.active {
  background: var(--teal-dim, rgba(70,199,186,0.12));
  border-color: var(--teal);
  color: var(--teal-l, var(--teal));
}
.mkt-plat-chip.disconnected { opacity: 0.72; }
.mkt-plat-ico {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1;
  background: var(--input-bg); color: var(--text);
}
.mkt-plat-name { line-height: 1.2; }
.mkt-plat-status {
  font-size: 8px; line-height: 1; margin-left: 2px;
  color: var(--muted);
}
.mkt-plat-status[data-connected="yes"] { color: #5DD68A; }
.mkt-plat-status[data-connected="no"]  { color: var(--muted); opacity: 0.6; }

/* Panel inline debajo del selector */
.mkt-plat-detail {
  margin-top: 14px; padding: 14px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px;
}
.mkt-plat-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.mkt-plat-detail-title { font-size: 13px; font-weight: 600; }
.mkt-plat-detail-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ── Filtros de publicaciones ── */
.mkt-pub-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.mkt-filter-chip {
  padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 11.5px; font-weight: 500;
  cursor: pointer; transition: all .15s ease;
}
.mkt-filter-chip:hover { color: var(--text); border-color: var(--border-strong, var(--border)); }
.mkt-filter-chip.active {
  /* var(--bg) no existe en los tokens — usamos card como inverso a text. */
  background: var(--text); color: var(--card);
  border-color: var(--text);
}

/* ── Tabla de publicaciones ── */
.mkt-pub-table-wrap { overflow-x: auto; margin: 0 -2px; }
.mkt-pub-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12.5px;
}
.mkt-pub-table th {
  text-align: left; font-size: 10.5px; font-weight: 500;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.mkt-pub-table td {
  padding: 10px; border-bottom: 1px solid var(--border-soft, var(--border));
  vertical-align: middle;
}
.mkt-pub-table tbody tr:last-child td { border-bottom: 0; }
.mkt-pub-table tbody tr:hover { background: var(--hover-tint); }
.mkt-pub-prop-title { font-weight: 500; color: var(--text); }
.mkt-pub-plat {
  font-size: 11.5px; padding: 3px 8px; border-radius: 5px;
  background: var(--input-bg); color: var(--text); white-space: nowrap;
}
.mkt-pub-date { color: var(--muted); font-size: 11.5px; }
.mkt-pub-perf { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
.mkt-pub-perf-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
}
.mkt-pub-agent { font-size: 11.5px; color: var(--muted); }

/* ── Calendario editorial ── */
.mkt-calendar-card { display: flex; flex-direction: column; }
.mkt-cal-nav { display: inline-flex; align-items: center; gap: 4px; }
.mkt-cal-month {
  font-size: 12.5px; font-weight: 500; padding: 0 6px;
  min-width: 110px; text-align: center; text-transform: capitalize;
}
.mkt-cal-today { font-size: 11.5px; padding: 4px 10px; margin-left: 4px; }
.mkt-cal-dows {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 6px;
}
.mkt-cal-dows span {
  text-align: center; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
}
.mkt-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.mkt-cal-cell {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-soft, var(--border));
  border-radius: 8px; padding: 6px;
  font-size: 11.5px; color: var(--text);
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; transition: all .15s ease;
  background: transparent;
}
.mkt-cal-cell:hover:not(.empty) { background: var(--hover-tint); border-color: var(--teal); }
.mkt-cal-cell.empty { background: transparent; border-color: transparent; cursor: default; }
.mkt-cal-cell.today {
  background: var(--teal-dim, rgba(70,199,186,0.10));
  border-color: var(--teal);
}
.mkt-cal-cell.today .mkt-cal-day { color: var(--teal-l, var(--teal)); font-weight: 600; }
.mkt-cal-day { font-size: 11.5px; font-weight: 500; line-height: 1; }
.mkt-cal-dots { display: flex; gap: 2px; flex-wrap: wrap; }
.mkt-cal-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal);
}

/* ── Analytics ── */
.mkt-analytics-mini {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 18px;
}
.mkt-ana-mini {
  padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--glass-bg, transparent);
}
.mkt-ana-mini-lbl {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 4px;
}
.mkt-ana-mini-val { font-size: 19px; font-weight: 600; line-height: 1; margin-bottom: 6px; }
.mkt-ana-mini-spark { color: var(--teal); height: 24px; }

.mkt-perf-section { padding-top: 14px; border-top: 1px solid var(--border); }
.mkt-perf-title {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 10px;
}
.mkt-perf-bars { display: flex; flex-direction: column; gap: 8px; }
.mkt-perf-row {
  display: grid; grid-template-columns: 110px 1fr 36px; gap: 10px;
  align-items: center; font-size: 12px;
}
.mkt-perf-lbl { color: var(--text); }
.mkt-perf-bar-track {
  height: 8px; background: var(--input-bg); border-radius: 4px; overflow: hidden;
}
.mkt-perf-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--teal), var(--sand));
  border-radius: 4px; transition: width .4s ease;
}
.mkt-perf-val {
  font-variant-numeric: tabular-nums; font-size: 11.5px;
  color: var(--muted); text-align: right;
}

/* ── Campañas ── */
.mkt-campaigns-list { display: flex; flex-direction: column; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════
   Role gating: cuando el body tiene class="role-marketing" ocultamos
   en la nav los módulos que no aplican (clientes, finanzas, equipo,
   contratos, etc). El backend valida igual con requireRole; esto es
   chrome para que el agente no vea entradas que no puede usar.
   ═══════════════════════════════════════════════════════════════ */
body.role-marketing #sidebar .nav-item[data-view="operaciones"],
body.role-marketing #sidebar .nav-item[data-view="contratos"],
body.role-marketing #sidebar .nav-item[data-view="consultas"],
body.role-marketing #sidebar .nav-item[data-view="agentes"],
body.role-marketing #sidebar .nav-item[data-view="clientes"],
body.role-marketing #sidebar .nav-item[data-view="demanda"],
body.role-marketing #sidebar .nav-item[data-view="visitas"],
body.role-marketing #sidebar .nav-item[data-view="reservas"],
body.role-marketing #sidebar .nav-item[data-view="tareas"],
body.role-marketing #sidebar .nav-item[data-view="finanzas"],
body.role-marketing #sidebar .nav-item[data-view="cobranza"],
body.role-marketing #sidebar .nav-item[data-view="reporte"],
body.role-marketing #sidebar .nav-item[data-view="mercado"],
body.role-marketing #sidebar .nav-item[data-view="amigas"],
body.role-marketing #sidebar .nav-item[data-view="aliados"],
body.role-marketing #sidebar .nav-item[data-view="mi-web"],
body.role-marketing #sidebar .nav-item[data-view="resumen"] {
  display: none !important;
}

/* En el resumen (que sí se podría ocultar como nav) el JS además redirige a
   #marketing al login, así que el usuario nunca aterriza ahí. */

/* CTAs del topbar que no aplican a marketing (botones de operación, etc.). */
body.role-marketing .tb-action-new-op,
body.role-marketing .tb-action-new-lead {
  display: none !important;
}

/* ── Responsive ── */
@media (max-width: 1099px) {
  .g5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 699px) {
  .g5 { grid-template-columns: repeat(2, 1fr); }
  .mkt-header-title { font-size: 19px; }
  .mkt-platforms { gap: 6px; }
  .mkt-plat-chip { padding: 6px 10px 6px 7px; font-size: 12px; }
  .mkt-plat-name { display: none; } /* en mobile mostramos solo ícono + status */
  .mkt-plat-chip.active .mkt-plat-name { display: inline; } /* salvo el activo */
  .mkt-perf-row { grid-template-columns: 90px 1fr 30px; gap: 8px; font-size: 11.5px; }
  .mkt-cal-cell { padding: 4px; border-radius: 6px; }
  .mkt-cal-day { font-size: 10.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   Modal de scheduling + campañas + caption AI
   ═══════════════════════════════════════════════════════════════ */
.mkt-sch-channels {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 200px; overflow-y: auto;
  padding: 8px;
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}
.mkt-sch-ch {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.mkt-sch-ch:hover { background: var(--glass-bg-strong); }
.mkt-sch-ch input[type=checkbox] { margin: 0; }
.mkt-sch-ch-provider { font-size: 12px; font-weight: 600; color: var(--text); min-width: 88px; }
.mkt-sch-ch-name { font-size: 12px; color: var(--muted); }

.mkt-sch-caption-row { display: flex; flex-direction: column; gap: 8px; }
.mkt-sch-caption-row textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  background: var(--input-bg); color: var(--text);
  border: 1px solid var(--glass-border);
  font-family: inherit; font-size: 13px; line-height: 1.5;
  resize: vertical;
}
.mkt-sch-ai-btn {
  align-self: flex-start;
  background: linear-gradient(180deg, var(--teal-l), var(--teal));
  color: #fff; border-color: rgba(255,255,255,0.18);
  font-size: 12.5px; padding: 8px 14px;
}
.mkt-sch-ai-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.mkt-sch-when { display: flex; gap: 12px; }
.mkt-sch-when .field { margin-bottom: 0; }

.mkt-sch-err {
  background: rgba(220,80,80,0.10);
  border: 1px solid rgba(220,80,80,0.30);
  color: #ffb8b8;
  padding: 10px 14px; border-radius: 9px;
  font-size: 12.5px; margin-top: 4px;
}

/* Campaign cards */
.mkt-campaigns-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 4px; }
.mkt-campaign-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.mkt-campaign-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mkt-campaign-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.mkt-campaign-meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.mkt-campaign-stats { display: flex; gap: 14px; font-size: 12px; color: var(--text); }
.mkt-campaign-stats b { font-weight: 600; color: var(--text); }
.mkt-campaign-actions { display: flex; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--glass-border); }

/* Calendar dots ya tenían estilo en partial 19-marketing.css — agregamos
   variantes por status del scheduled post para diferenciar visualmente. */
.mkt-cal-dots .mkt-cal-dot { background: var(--teal); }
.mkt-cal-cell .mkt-cal-dot[data-status="failed"]    { background: var(--red); }
.mkt-cal-cell .mkt-cal-dot[data-status="published"] { background: #5DD68A; }
.mkt-cal-cell .mkt-cal-dot[data-status="cancelled"] { background: var(--muted); }
/* ── phone-input: selector de código de país acoplado a un input de teléfono ── */
.phone-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.phone-input-wrap > input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 0 !important;
}
.phone-cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-right: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.phone-cc-btn:hover { background: var(--card-h); }
.phone-cc-btn:focus { outline: none; background: var(--card-h); }
.phone-cc-flag { font-size: 15px; line-height: 1; }
.phone-cc-code { font-size: 12.5px; color: var(--muted); }
.phone-cc-caret { font-size: 10px; color: var(--dim); margin-left: 1px; }

.phone-cc-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1200;
  width: 280px;
  max-width: 90vw;
  background: var(--navy-l);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: none;
  overflow: hidden;
}
.phone-cc-dropdown.open { display: block; }
.phone-cc-search {
  width: 100%;
  padding: 9px 12px;
  background: var(--input-bg);
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.phone-cc-search::placeholder { color: var(--dim); }
.phone-cc-list {
  max-height: 260px;
  overflow-y: auto;
}
.phone-cc-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}
.phone-cc-item:hover { background: var(--hover-tint); }
.phone-cc-item.active { background: var(--teal-dim); }
.phone-cc-item .phone-cc-name { flex: 1; }
.phone-cc-item .phone-cc-code { color: var(--muted); font-size: 12px; }
.phone-cc-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12px; }
/* ── Vista Mensajes: mensajería directa 1:1 ── */

/* En la vista Mensajes, el FAB del asistente se superpone con el input/burbujas
   del chat. Lo ocultamos cuando #view-mensajes está active. Usa :has() (Safari
   15.4+, Chrome 105+); en browsers viejos el FAB queda visible — fallback OK. */
body:has(#view-mensajes.active) #assist-fab { display: none !important; }

/* Layout master-detail: lista a la izquierda, chat a la derecha. */
.dm-shell {
  display: flex;
  height: calc(100vh - 120px); /* descontamos topbar + padding del view */
  min-height: 480px;
  gap: 1px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.dm-aside {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  min-width: 0;
}

/* Header brand: logo + nombre de la inmobiliaria al tope del sidebar */
.dm-aside-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}
.dm-aside-brand-logo {
  width: 32px; height: 32px; border-radius: 8px;
  background-color: var(--teal-dim);
  background-size: cover; background-position: center;
  color: var(--teal-l);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.dm-aside-brand-logo.has-img { color: transparent; }
.dm-aside-brand-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

/* Shortcut mute/unmute del sonido — siempre visible en el header del sidebar.
   El icono activo se controla con data-muted (lo setea _syncSoundBtn del
   messengerView según me.messenger_sound_muted). */
.dm-sound-toggle {
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.dm-sound-toggle:hover { color: var(--teal-l); background: var(--card-h); border-color: var(--glass-border); }
.dm-sound-toggle[data-muted="true"] { color: var(--red); }
.dm-sound-toggle[data-muted="true"]:hover { color: var(--red); background: var(--red-dim); }
.dm-sound-toggle .icon-off { display: none; }
.dm-sound-toggle[data-muted="true"] .icon-on { display: none; }
.dm-sound-toggle[data-muted="true"] .icon-off { display: block; }

/* Pop-out del header del sidebar: detacha el mensajero a su ventana. Mismo
   look que el toggle de sonido para que el header se sienta uniforme. Siempre
   visible mientras estás en la sección (no depende de un chat abierto). */
.dm-aside-popout {
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.dm-aside-popout:hover { color: var(--teal-l); background: var(--card-h); border-color: var(--glass-border); }
/* Pulso visible al togglear — el cambio de ícono/color solo no es obvio
   (Bug #99 reportado como "no da feedback"). */
.dm-sound-toggle.pulse { animation: dm-sound-pulse 0.4s ease-out; }
@keyframes dm-sound-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 currentColor; }
  40%  { transform: scale(1.18); box-shadow: 0 0 0 6px transparent; }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 transparent; }
}

/* Groups colapsables (DM y Canales) */
.dm-section {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dm-section:last-child { border-bottom: none; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dm-section-hd {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.dm-section-hd:hover { background: var(--card-h); }
.dm-section-chevron {
  font-size: 10px; color: var(--muted);
  transition: transform 0.14s ease;
}
.dm-section.collapsed .dm-section-chevron { transform: rotate(-90deg); }
.dm-section-title { flex: 1; min-width: 0; }
.dm-section-action {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.dm-section-action:hover { background: var(--card-h); color: var(--text); }
.dm-section-body { display: flex; flex-direction: column; min-height: 0; }
.dm-section.collapsed .dm-section-body { display: none; }
.dm-section:last-child .dm-section-body { flex: 1; min-height: 0; }

/* ── Switcher de plataforma (tabs horizontales: Housia / WhatsApp / …) ──
   Nivel superior del sidebar: elige qué plataforma se ve. Se oculta entera
   (hidden vía JS) cuando hay una sola plataforma disponible. */
.dm-platforms {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
}
.dm-platforms[hidden] { display: none; }
.dm-platform-tab {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.dm-platform-tab:hover { background: var(--card-h); color: var(--text); }
.dm-platform-tab.active {
  background: var(--teal-dim);
  color: var(--teal-l);
  border-color: var(--glass-border);
}
.dm-platform-ico { display: inline-flex; flex-shrink: 0; }
.dm-platform-label {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-platform-tab .dm-unread { flex-shrink: 0; }

/* Cuerpo por plataforma: sólo el activo se muestra. Es el contenedor
   scrolleable que llena el alto restante del sidebar. Dentro neutralizamos el
   flex:1 del último .dm-section (de la columna apilada vieja) para que toda la
   plataforma scrollee como una sola columna. */
.dm-platform-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dm-platform-body[hidden] { display: none; }
.dm-platform-body .dm-section:last-child { flex: 0 0 auto; }
.dm-platform-body .dm-section:last-child .dm-section-body { flex: 0 0 auto; }
.dm-platform-body .dm-list { overflow-y: visible; }

/* Sub-tabs del group DM: Inbox / Solicitudes / Pendientes */
.dm-subtabs {
  display: flex; gap: 2px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.dm-subtab {
  flex: 1; min-width: 0;
  padding: 5px 8px;
  background: transparent; border: none;
  color: var(--muted);
  font: inherit; font-size: 11.5px; font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  position: relative;
}
.dm-subtab:hover { background: var(--card-h); color: var(--text); }
.dm-subtab.active { background: var(--teal-dim); color: var(--teal-l); }
.dm-subtab-badge { margin-left: 4px; }

/* Channel rows en el sidebar: compactos tipo Slack */
.dm-channel-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.dm-channel-row:hover { background: var(--card-h); }
.dm-channel-row.active {
  background: var(--teal-dim);
  color: var(--teal-l);
}
.dm-channel-hash {
  color: var(--muted); font-weight: 600;
  flex-shrink: 0;
}
.dm-channel-row.active .dm-channel-hash { color: var(--teal-l); }
.dm-channel-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dm-list {
  flex: 1;
  min-height: 0;             /* permite que el flex shrinking + overflow:auto funcionen */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card-h);
}

.dm-item {
  display: flex;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.12s ease;
}
.dm-item:hover { background: var(--card); }
.dm-item.active { background: var(--teal-dim); border-left: 3px solid var(--teal); padding-left: 9px; }

.dm-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-avatar.sm { flex: 0 0 28px; width: 28px; height: 28px; font-size: 11.5px; }
.dm-avatar { overflow: hidden; }
.dm-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dm-item-body {
  flex: 1;
  min-width: 0;
}
.dm-item-row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.dm-item-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-item-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.dm-item-row2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.dm-item-prev {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.dm-item-agency {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  opacity: 0.7;
}

.dm-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--teal);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
}

/* ─── Columna derecha: panel del chat ─── */
.dm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--card);
  min-width: 0;
  min-height: 0;   /* permite que .dm-msgs (flex:1 + overflow:auto) scrollee */
}

.dm-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  color: var(--muted);
}
.dm-empty-icon { font-size: 48px; opacity: 0.4; margin-bottom: 12px; }
.dm-empty-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.dm-empty-sub { font-size: 13px; }

.dm-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dm-chat-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.dm-back-btn {
  display: none; /* solo mobile */
  background: none;
  border: none;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.dm-back-btn:hover { background: var(--card-h); }

.dm-chat-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-chat-meta {
  flex: 1;
  min-width: 0;
}
.dm-chat-name {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-chat-sub {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-chat-actions {
  display: flex;
  gap: 6px;
}
.dm-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dm-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--teal-dim);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.dm-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }

.dm-msgs {
  flex: 1;
  min-height: 0;             /* sin esto, flex no shrinkea y el overflow:auto no scrollea */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* momentum scroll en iOS Safari */
  overscroll-behavior: contain;       /* el scroll no se "escapa" al body */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card-h);
}

.dm-msg {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}
.dm-msg.mine   { align-self: flex-end;   align-items: flex-end;   }
.dm-msg.theirs { align-self: flex-start; align-items: flex-start; }

.dm-msg-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}
.dm-msg.mine   .dm-msg-bubble {
  /* Cyan claro (#17C6B5) + blanco da contraste 2.4:1 — ilegible.
     Texto midnight sobre cyan: ~10:1 y se ve sólido (patrón WhatsApp,
     Stripe, Linear). */
  background: var(--teal);
  color: var(--midnight);
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.dm-msg.theirs .dm-msg-bubble {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.dm-msg-meta {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  padding: 0 4px;
}

.dm-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--card);
  align-items: center;
}
.dm-input-row textarea {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 120px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-h);
  color: var(--text);
}
.dm-input-row textarea:focus {
  outline: none;
  border-color: var(--teal);
}
.dm-input-row textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.dm-send-btn {
  flex-shrink: 0;
  height: 38px;
  padding: 0 16px;
}

/* ─── Modal de nueva conversación: resultados de búsqueda ─── */
.dm-search-results {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-h);
}
.dm-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.dm-search-item:last-child { border-bottom: none; }
.dm-search-item:hover { background: var(--card); }
.dm-search-meta { flex: 1; min-width: 0; }
.dm-search-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.dm-search-sub {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Canales (Slack-style) ───
   Diferenciación visual del avatar # del de un user (iniciales). Nombre del
   sender encima de la burbuja en mensajes ajenos (en 1:1 no hace falta).
   Chips para los invitados en el modal de crear canal. */
.dm-avatar.dm-avatar-channel,
.dm-avatar-channel {
  background: linear-gradient(135deg, #5DD68A 0%, #46c7ba 100%);
  font-weight: 700;
  font-size: 16px;
}
.dm-msg-sender {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
  padding: 0 4px;
}
.dm-msg.mine .dm-msg-sender { display: none; }

/* Links en el bubble del mensaje */
.dm-msg-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.5);
  word-break: break-all;
}
.dm-msg.theirs .dm-msg-link {
  color: var(--teal-l);
  text-decoration-color: rgba(70,199,186,0.4);
}
.dm-msg-link:hover { text-decoration-color: currentColor; }

/* OG link preview card debajo del bubble */
/* ─── Smart chat cards ─────────────────────────────────────────────────
   Card unificada que se renderiza debajo de cada burbuja con un link.
   Variants: property | contract | lead | client | og | redacted.
   El layout es el mismo; cambian color de acento y algunos detalles.

   Estructura HTML:
     <div class="chat-card chat-card--{variant}">
       <a class="chat-card-inner">         (o <div class="chat-card-inner is-redacted">)
         <div class="chat-card-hero is-img|is-icon">…</div>
         <div class="chat-card-body">
           <div class="chat-card-badges">…</div>
           <div class="chat-card-title">…</div>
           <div class="chat-card-subtitle">…</div>
           <dl class="chat-card-kvs">…</dl>
           <div class="chat-card-actions">…</div>
         </div>
       </a>
     </div>                                                              */

.chat-card {
  max-width: 360px;
  margin-top: 6px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  /* Acento por variant: el borde superior coloreado le da identidad sin
     gritar. Override por variant abajo. */
  border-top: 2px solid var(--border);
}
.chat-card--property { border-top-color: var(--teal); }
.chat-card--contract { border-top-color: var(--purple); }
.chat-card--lead     { border-top-color: var(--green); }
.chat-card--client   { border-top-color: var(--teal-l); }
.chat-card--og       { border-top-color: var(--border); }
.chat-card--redacted { border-top-color: var(--border); opacity: 0.78; }

.chat-card-inner {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.chat-card-inner:hover { text-decoration: none; background: var(--card-h); }
.chat-card-inner.is-redacted:hover { background: var(--card); cursor: default; }

/* Hero: foto (propiedad, OG) o icono (entidades sin foto). */
.chat-card-hero {
  width: 100%;
  background-color: var(--card-h);
  background-size: cover;
  background-position: center;
}
.chat-card-hero.is-img {
  aspect-ratio: 1.91 / 1;
}
.chat-card-hero.is-icon {
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.chat-card--property .chat-card-hero.is-icon { color: var(--teal); }
.chat-card--contract .chat-card-hero.is-icon { color: var(--purple); }
.chat-card--lead     .chat-card-hero.is-icon { color: var(--green); }
.chat-card--client   .chat-card-hero.is-icon { color: var(--teal-l); }

.chat-card-body { padding: 10px 12px 12px; }

/* Badges arriba del título (estado, kind, etc.). */
.chat-card-badges {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 6px;
}
.chat-card-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.chat-card-badge--ok    { background: var(--green-dim);  color: var(--green); }
.chat-card-badge--warn  { background: var(--purple-dim); color: var(--purple); }
.chat-card-badge--info  { background: var(--teal-dim);   color: var(--teal-l); }
.chat-card-badge--muted { background: var(--card-h);     color: var(--muted); }

.chat-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-card-subtitle {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Key/value: lista compacta de 2 columnas. */
.chat-card-kvs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 11.5px;
}
.chat-card-kv {
  display: contents;
}
.chat-card-kv dt {
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 10.5px;
  align-self: center;
}
.chat-card-kv dd {
  color: var(--text);
  margin: 0;
  font-weight: 500;
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Acciones (botón primario abrir + secundarios opcionales). */
.chat-card-actions {
  display: flex; gap: 6px;
  margin-top: 10px;
}
.chat-card-action {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--border);
}
.chat-card-action--primary {
  background: var(--teal-dim);
  color: var(--teal-l);
  border-color: var(--teal-dim);
}
.chat-card--contract .chat-card-action--primary { background: var(--purple-dim); color: var(--purple); border-color: var(--purple-dim); }
.chat-card--lead     .chat-card-action--primary { background: var(--green-dim);  color: var(--green);  border-color: var(--green-dim); }
.chat-card-action--primary:hover { filter: brightness(1.1); }
.chat-card-action--secondary {
  background: transparent;
  color: var(--muted);
}
.chat-card-action--secondary:hover { background: var(--card-h); color: var(--text); }

/* ─── Summary message (kind='summary') ────────────────────────────────
   Mensaje system full-width, no es burbuja. Aparece centrado en el chat
   con un borde teal y un header tipo "X resumió la conversación · 2 min".
   No tiene avatar a los lados; se diferencia visualmente de las burbujas
   normales de texto.                                                 */

.dm-summary {
  align-self: stretch;
  max-width: 600px;
  margin: 10px auto;
  padding: 14px 16px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.dm-summary-hd {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.dm-summary-hd-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-dim);
  color: var(--teal-l);
  border-radius: 50%;
  flex-shrink: 0;
}
.dm-summary-hd-text { flex: 1; min-width: 0; }
.dm-summary-hd-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.dm-summary-hd-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.dm-summary-tldr {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 8px;
}
.dm-summary-bullets {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}
.dm-summary-bullets li { margin-bottom: 2px; }
.dm-summary-section-hd {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 4px;
}
.dm-summary-actions {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}
.dm-summary-actions li { margin-bottom: 2px; }
.dm-summary-task { color: var(--text); }
.dm-summary-who  { color: var(--muted); }
.dm-summary-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}
.dm-summary-more {
  font-size: 12px; font-weight: 600;
  color: var(--teal);
  text-decoration: none;
}
.dm-summary-more:hover { text-decoration: underline; }

/* ─── Modal historial de resúmenes ─────────────────────────────────── */
.dm-summaries-list {
  max-height: 460px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.dm-summaries-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.dm-summaries-item:last-child { border-bottom: none; }
.dm-summaries-item:hover { background: var(--card-h); }
.dm-summaries-item-row1 {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px;
}
.dm-summaries-item-when {
  font-size: 12px; font-weight: 600; color: var(--text);
}
.dm-summaries-item-count {
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.dm-summaries-item-tldr {
  font-size: 12.5px; color: var(--muted);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dm-summaries-item-cta {
  font-size: 11.5px; font-weight: 600;
  color: var(--teal);
}

/* Botón "Resumir" en estado loading: spinner sutil sobre el ícono. */
.dm-icon-btn.is-loading {
  opacity: 0.6;
  cursor: progress;
}
.dm-icon-btn.is-loading svg {
  animation: dm-pulse 1.2s ease-in-out infinite;
}
@keyframes dm-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ─── Mensaje del bot @Housia (kind='ai') ─────────────────────────────
   Render con avatar + nombre + bubble propio. Tonos sobrios — sin teal
   fluo: usamos el teal base (oscuro) sobre fondo de card-h, sin
   gradients chillones.                                                */

.dm-msg.dm-msg--ai {
  align-self: flex-start;
  align-items: flex-start;
  max-width: 80%;
}
.dm-msg-ai-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.dm-msg-ai-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--card-h);
  color: var(--teal);
  border: 1px solid var(--border);
  font-family: 'Roboto', sans-serif;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dm-msg-ai-meta {
  display: flex; align-items: baseline; gap: 6px;
  min-width: 0;
}
.dm-msg-ai-name {
  font-size: 12.5px; font-weight: 600;
  color: var(--text);
}
.dm-msg-ai-sub {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dm-msg-bubble--ai {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: normal;
  word-wrap: break-word;
}
.dm-msg-bubble--ai a { color: var(--teal); }

/* Markdown rendering dentro de respuestas del bot (kind='ai'). Tipografía
   compacta para que no infle la burbuja. */
.dm-msg-bubble--ai .dm-md-h {
  font-size: 13.5px;
  font-weight: 700;
  margin: 8px 0 4px;
  color: var(--text);
}
.dm-msg-bubble--ai .dm-md-h:first-child { margin-top: 0; }
.dm-msg-bubble--ai .dm-md-ul,
.dm-msg-bubble--ai .dm-md-ol {
  margin: 4px 0 4px 0;
  padding-left: 22px;
}
.dm-msg-bubble--ai .dm-md-ul li,
.dm-msg-bubble--ai .dm-md-ol li {
  margin-bottom: 2px;
  line-height: 1.45;
}
.dm-msg-bubble--ai strong { font-weight: 700; color: var(--text); }
.dm-msg-bubble--ai em { font-style: italic; }
/* Indicador "Housia está pensando..." mientras el bot procesa una mention.
   Aparece al pie de la lista de mensajes, con avatar y 3 puntos animados. */
.dm-bot-thinking {
  display: flex; align-items: center; gap: 10px;
  align-self: flex-start;
  margin: 8px 0 4px;
  padding: 8px 12px;
  background: var(--card-h);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 80%;
}
.dm-bot-thinking-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--card);
  color: var(--teal);
  border: 1px solid var(--border);
  font-family: 'Roboto', sans-serif;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dm-bot-thinking-text { display: flex; align-items: center; gap: 6px; }
.dm-bot-thinking-dots {
  display: inline-flex; gap: 3px;
  align-items: center;
}
.dm-bot-thinking-dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
  opacity: 0.3;
  animation: dm-bot-dot 1.2s ease-in-out infinite;
}
.dm-bot-thinking-dots i:nth-child(2) { animation-delay: 0.2s; }
.dm-bot-thinking-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dm-bot-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

.dm-msg-bubble--ai code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 1px 5px;
  background: var(--card-h);
  border-radius: 3px;
  color: var(--text);
}

/* Chip de mención @Housia dentro de un mensaje normal — sobrio */
.dm-mention-housia {
  display: inline-block;
  padding: 1px 6px;
  background: var(--card-h);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95em;
}
/* Chip de mención a un humano (peer o member de canal). */
.dm-mention-user {
  display: inline-block;
  padding: 1px 6px;
  background: var(--card-h);
  color: var(--muted);
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95em;
}

/* ─── Popup de autocomplete @ mentions ──────────────────────────────── */
.dm-input-row { position: relative; } /* anchor para el popup */

.dm-mention-popup {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 0;
  max-width: 320px;
  min-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 50;
  padding: 4px;
}
.dm-mention-popup[hidden] { display: none; }

.dm-mention-popup-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.dm-mention-popup-item:hover,
.dm-mention-popup-item.is-active {
  background: var(--card-h);
}

.dm-mention-popup-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 11.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dm-mention-popup-avatar.is-bot {
  background: var(--card-h);
  color: var(--teal);
  border: 1px solid var(--border);
  font-family: 'Roboto', sans-serif;
  font-size: 13px; font-weight: 700;
}

.dm-mention-popup-meta { flex: 1; min-width: 0; }
.dm-mention-popup-label {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-mention-popup-sub {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Chips en el modal de crear canal: nombres de invitados con × para sacar. */
.dm-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 0;
  margin-bottom: 6px;
}
.dm-chips:empty { margin-bottom: 0; }
.dm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--teal-dim);
  color: var(--teal-l);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.dm-chip-x {
  background: none; border: none;
  color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1;
  padding: 0 2px;
  opacity: 0.7;
}
.dm-chip-x:hover { opacity: 1; }

/* Lista de miembros en el modal de gestión del canal: avatar + nombre +
   rol + botón sacar (solo para channel admin sobre los demás). */
.dm-members-list {
  margin-top: 8px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
/* Read receipts: avatar chico al pie de la burbuja indicando "X leyó hasta acá".
   En canales se apilan varios. Tooltip nativo (title="...") muestra el nombre.
   La fila se renderiza siempre dentro de cada .dm-msg pero queda vacía si no
   hay lectores en esa burbuja — así no hay reflow al moverse el avatar. */
.dm-read-row {
  display: flex; gap: 3px; flex-wrap: wrap;
  margin-top: 3px;
  min-height: 0;
  justify-content: flex-end;  /* burbujas mías van derecha; aligns natural */
}
.dm-msg.theirs .dm-read-row { justify-content: flex-start; }
.dm-read-avatar {
  /* 20% más grande que 16px = 19.2 → 20px. Le sumo proporcionalmente al
     font-size (11px) para que las iniciales se sigan viendo bien. */
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-l));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* El borde matchea el bg de la lista de mensajes (--card-h) para que,
     cuando varios avatares se apilan, se vea separación entre ellos sin
     "halo" oscuro. */
  border: 2px solid var(--card-h);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: transform 0.12s ease;
}
.dm-read-avatar:hover { transform: scale(1.15); z-index: 1; }
/* Cuando hay varios apilados en la misma burbuja, los superpongo levemente
   (estilo Slack) para no comer ancho. El último visible mantiene posición. */
.dm-read-avatar + .dm-read-avatar { margin-left: -6px; }

.dm-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.dm-member-row:last-child { border-bottom: none; }
.dm-member-meta { flex: 1; min-width: 0; }
.dm-member-name {
  font-size: 13px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dm-member-sub {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-member-role {
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--teal-dim); color: var(--teal-l);
  font-weight: 600;
}
/* Badge "Externo": miembro de otra inmoba dentro de un canal cross-inmoba.
   Visualmente distinto del rol admin — usamos un tono ambar para que se
   note en el listado sin ser alarmante. */
.dm-member-ext {
  display: inline-flex; align-items: center;
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(241,196,15,0.14); color: #d9a409;
  border: 1px solid rgba(241,196,15,0.32);
  font-weight: 600;
}
/* Variante del chip de invitado cuando es externo (en el modal de crear canal) */
.dm-chip--ext { background: rgba(241,196,15,0.14); color: #d9a409; }
.dm-chip-ext {
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 999px;
  background: rgba(0,0,0,0.10); color: inherit;
  font-weight: 700;
}
.dm-member-you {
  font-size: 11px; color: var(--muted); font-weight: 400;
}
.dm-member-remove {
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  font-size: 18px; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
  flex-shrink: 0;
}
.dm-member-remove:hover { background: rgba(244,71,71,0.12); color: var(--red, #f44747); }

.dm-form-err {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(244, 71, 71, 0.10);
  border: 1px solid rgba(244, 71, 71, 0.30);
  color: var(--red, #f44747);
  border-radius: 8px;
  font-size: 12.5px;
}

/* ─── Mobile: una sola columna, back button visible ─── */
@media (max-width: 760px) {
  /* Estado por defecto (lista visible): altura natural — la página fluye
     como cualquier otra vista del CRM, el topbar queda accesible al
     scrollear hacia arriba, el body es quien scrollea. */
  .dm-shell {
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;     /* sin la línea separadora del desktop */
    gap: 0;
  }
  .dm-aside {
    flex: 1;
    min-height: 0;
    display: flex;
  }
  /* La lista mobile NO tiene scroll propio — fluye con la página. */
  .dm-list {
    overflow-y: visible;
    max-height: none;
  }
  /* Idem el cuerpo de plataforma: en mobile fluye con la página (sin abrir un
     scroll interno propio como en desktop). */
  .dm-platform-body {
    overflow-y: visible;
    min-height: 0;
  }
  .dm-main {
    display: none;
  }

  /* Cuando hay conv abierta: full viewport. dvh para que iOS Safari no
     se coma altura con la barra del browser. El topbar del CRM queda
     detrás (off-screen) y el back-button del chat es el único exit.
     Padding safe-area para esquivar notch + home indicator del iPhone. */
  .dm-shell.has-open {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 50;
    background: var(--card);
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
  }
  .dm-shell.has-open .dm-aside { display: none; }
  .dm-shell.has-open .dm-main  { display: flex; }
  .dm-back-btn { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   MODO STANDALONE — Housia Mensajes como vista extraíble tipo Slack.
   Se activa con body[data-standalone="messenger"] (renderApp render_app_html.js
   inyecta el attr en GET /mensajes). Oculta sidebar/topbar del CRM, fija el
   .dm-shell al viewport completo y muestra el botón pop-in/pop-out.
   ═══════════════════════════════════════════════════════════════════ */
body[data-standalone="messenger"] .sidebar,
body[data-standalone="messenger"] .topbar,
body[data-standalone="messenger"] .sidebar-backdrop,
body[data-standalone="messenger"] .tb-user-menu,
body[data-standalone="messenger"] #assist-fab,
body[data-standalone="messenger"] .notif-panel { display: none !important; }

body[data-standalone="messenger"] .shell { grid-template-columns: 1fr !important; height: 100dvh; }
body[data-standalone="messenger"] .main { height: 100dvh; }
body[data-standalone="messenger"] .content { padding: 0 !important; overflow: hidden; height: 100dvh; }

/* La view base esconde con display:none / flex; en standalone forzamos siempre
   visible al view-mensajes (el JS setea active igual, pero por si acaso). */
body[data-standalone="messenger"] #view-mensajes {
  display: flex !important;
  flex: 1;
  margin: 0;
  padding: 0;
  min-height: 0;
}

/* El .dm-shell normalmente descuenta topbar/padding; en standalone toma todo. */
body[data-standalone="messenger"] .dm-shell {
  height: 100dvh;
  min-height: 0;
  border-radius: 0;
  gap: 0;
  padding-top: env(safe-area-inset-top);
}

/* Botón pop-out: abre el messenger en una ventana standalone (/mensajes).
   Solo visible cuando NO estamos en standalone — adentro no tiene sentido. */
.dm-popout-btn { display: inline-flex; }
body[data-standalone="messenger"] .dm-popout-btn,
body[data-standalone="messenger"] .dm-aside-popout { display: none !important; }

/* ─── Adjuntos del chat (chat_media) ──────────────────────────────────── */

/* Paperclip a la izquierda del textarea. Color sutil hasta hover, animación
   minima al hover para sentirse vivo sin ser ruidoso. */
.dm-attach-btn {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 8px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dm-attach-btn:hover { color: var(--text); background: var(--card-h); }
.dm-attach-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* Fila de chips de attachments pendientes (arriba del .dm-input-row). Scroll
   horizontal si hay muchos para no romper layout. */
.dm-attach-row {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--card);
  overflow-x: auto;
}
.dm-attach-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--card-h);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 28px 6px 6px;
  max-width: 240px;
}
.dm-attach-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.dm-attach-thumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--muted);
}
.dm-attach-meta { min-width: 0; }
.dm-attach-name {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.dm-attach-size { font-size: 11px; color: var(--muted); }
.dm-attach-rm {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  line-height: 18px;
  padding: 0;
  font-size: 16px;
}
.dm-attach-rm:hover { background: var(--card); color: var(--text); }

/* Drag-over hint: una ligera overlay teal sobre la zona de mensajes para
   indicar que vas a dropear archivos. */
.dm-drag-over { outline: 2px dashed var(--teal); outline-offset: -8px; }

/* ─── Bubble de media (kind='media') ──────────────────────────────────── */

.dm-msg--media .dm-att-grid { margin-bottom: 4px; }

.dm-att-grid {
  display: grid;
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
  max-width: 320px;
}
.dm-att-grid--one    { grid-template-columns: 1fr; }
.dm-att-grid--two,
.dm-att-grid--three,
.dm-att-grid--four   { grid-template-columns: 1fr 1fr; }

.dm-att {
  display: block;
  position: relative;
  background: var(--card-h);
  text-decoration: none;
}
.dm-att--img img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
}
.dm-att-grid--one .dm-att--img img { max-height: 320px; }

/* En grid 5+, el 4to tile lleva un overlay "+N más". Las extras quedan en el
   lightbox; visualmente sólo mostramos 4 para no romper el layout del bubble. */
.dm-att-grid .dm-att:nth-child(n+5) { display: none; }
.dm-att-more {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dm-att--video video {
  display: block;
  width: 100%;
  max-height: 320px;
  background: #000;
}

.dm-att--doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-h);
}
.dm-att--doc:hover { background: var(--card); }
.dm-att-meta .dm-att-name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  white-space: nowrap;
}
.dm-att-meta .dm-att-size { font-size: 11px; color: var(--muted); }

/* Estado "media expirado": placeholder neutro. El caption sigue debajo si había. */
.dm-media-expired {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card-h);
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  max-width: 320px;
}

/* ─── Lightbox ────────────────────────────────────────────────────────── */

.dm-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.dm-lb-img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.dm-lb-close,
.dm-lb-prev,
.dm-lb-next {
  position: absolute;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dm-lb-close:hover,
.dm-lb-prev:hover,
.dm-lb-next:hover { background: rgba(0,0,0,0.8); }
.dm-lb-close { top: 16px; right: 16px; }
.dm-lb-prev  { left: 16px; top: 50%; transform: translateY(-50%); }
.dm-lb-next  { right: 16px; top: 50%; transform: translateY(-50%); }

/* ─── Tab Media (sidebar) ─────────────────────────────────────────────── */

/* El sidebar se monta absoluto sobre la columna del chat. Padre .dm-chat
   necesita position: relative para esto (lo definimos en su selector si no
   lo tenía). En mobile usamos position:fixed para que cubra toda la pantalla. */
.dm-chat { position: relative; }

.dm-media-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: var(--card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 30;
  box-shadow: -4px 0 12px rgba(0,0,0,0.06);
  transform: translateX(100%);
  transition: transform 180ms ease;
}
.dm-media-panel.is-open { transform: translateX(0); }
.dm-media-panel[hidden] { display: none; }

.dm-media-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.dm-media-title { font-weight: 600; font-size: 14px; color: var(--text); }

.dm-media-filters {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.dm-media-chip {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-h);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.dm-media-chip.is-active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.dm-media-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-content: start;
}

.dm-media-tile {
  position: relative;
  border: 0;
  background: var(--card-h);
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  gap: 4px;
}
.dm-media-tile--img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dm-media-tile-name {
  font-size: 11px;
  color: var(--text);
  padding: 0 6px;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-media-tile-size { font-size: 10px; }

.dm-media-empty {
  grid-column: 1 / -1;
  padding: 28px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.dm-media-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Modo "links": el grid pasa a lista 1-col, sin aspect-ratio. */
.dm-media-grid--links { grid-template-columns: 1fr; }
.dm-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card-h);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
}
.dm-link-row:hover { background: var(--card); }
.dm-link-row-icon { font-size: 18px; opacity: 0.8; }
.dm-link-row-meta { min-width: 0; flex: 1; }
.dm-link-row-host { font-size: 13px; font-weight: 600; color: var(--text); }
.dm-link-row-url {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile: overlay full-screen. El sidebar toma toda la pantalla. */
@media (max-width: 720px) {
  .dm-media-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    border-left: 0;
    z-index: 1000;
  }
}

/* ─── Cross-section picker (window.openChatMediaPicker) ───────────────── */

.chat-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.chat-picker {
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.chat-picker-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.chat-picker-title { font-weight: 600; font-size: 15px; color: var(--text); }
.chat-picker-close {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  border-radius: 6px;
}
.chat-picker-close:hover { background: var(--card-h); color: var(--text); }
.chat-picker-search-row {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.chat-picker-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-h);
  color: var(--text);
  font-size: 13px;
}
.chat-picker-search:focus { outline: none; border-color: var(--teal); }
.chat-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.chat-picker-loading,
.chat-picker-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.chat-picker-group { margin-bottom: 16px; }
.chat-picker-group:last-child { margin-bottom: 0; }
.chat-picker-group-hd {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chat-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.chat-picker-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  background: var(--card-h);
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}
.chat-picker-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.chat-picker-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 24px;
  color: var(--muted);
}
.chat-picker-tile-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}
.chat-picker-tile.is-selected {
  border-color: var(--teal);
}
.chat-picker-tile.is-selected .chat-picker-tile-check { display: flex; }

.chat-picker-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--card);
}
.chat-picker-count { font-size: 12px; color: var(--muted); }
.chat-picker-actions { display: flex; gap: 8px; }

@media (max-width: 600px) {
  .chat-picker-overlay { padding: 0; }
  .chat-picker { max-width: 100%; max-height: 100vh; border-radius: 0; height: 100vh; }
  .chat-picker-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Threads (reply en thread + sidebar panel) ───────────────────────── */

/* Botón hover "Responder en thread" en cada bubble. Por default invisible
   y sólo aparece en hover del .dm-msg. */
.dm-msg-thread-reply {
  position: absolute;
  top: -8px;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.dm-msg { position: relative; }
.dm-msg:hover .dm-msg-thread-reply { display: inline-flex; }
.dm-msg-thread-reply:hover { color: var(--text); background: var(--card-h); }

/* Footer "💬 N respuestas · hace 5 min" debajo del bubble. Click → abre thread. */
.dm-msg-thread-footer {
  background: transparent;
  border: 0;
  color: var(--teal);
  font-size: 12px;
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
  text-align: left;
  display: inline-block;
}
.dm-msg-thread-footer:hover { background: rgba(94, 234, 212, 0.08); }
.dm-msg-thread-bot { color: var(--teal); }

/* Panel del thread (right-side sidebar). Mismo footprint que dm-media-panel
   pero más ancho — tiene composer + lista. */
.dm-thread-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 380px;
  background: var(--card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 30;
  box-shadow: -4px 0 12px rgba(0,0,0,0.06);
  transform: translateX(100%);
  transition: transform 180ms ease;
}
.dm-thread-panel.is-open { transform: translateX(0); }
.dm-thread-panel[hidden] { display: none; }

.dm-thread-hd {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  gap: 4px;
}
.dm-thread-title { font-weight: 600; font-size: 14px; color: var(--text); grid-column: 1; grid-row: 1; }
.dm-thread-sub   { font-size: 11px; color: var(--muted); grid-column: 1; grid-row: 2; }
#dm-thread-close { grid-column: 2; grid-row: 1 / span 2; }

.dm-thread-bot-hint {
  background: rgba(94, 234, 212, 0.08);
  color: var(--teal);
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

.dm-thread-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-thread-row { display: flex; }
.dm-thread-row.is-root {
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.dm-thread-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px 12px;
  font-size: 13px;
}

.dm-thread-attach-row {
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  background: var(--card);
  overflow-x: auto;
}
.dm-thread-input-row {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--card);
  align-items: center;
}
.dm-thread-input-row textarea {
  flex: 1;
  resize: none;
  min-height: 36px;
  max-height: 100px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-h);
  color: var(--text);
}
.dm-thread-input-row textarea:focus { outline: none; border-color: var(--teal); }

@media (max-width: 720px) {
  .dm-thread-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    border-left: 0;
    z-index: 1000;
  }
}

/* ─── Inbox unificado: WhatsApp dentro del messenger ─────────────────────── */

/* Avatar de contacto WhatsApp: acento verde (vs teal de los DM internos). */
.dm-avatar--wa { background: var(--green); }

/* Badge "WA" en el header de cada grupo de línea. */
.dm-wa-badge {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--green-dim);
  color: var(--green);
}

/* Toggle Bot/Manual en el header del chat. Segmented control compacto. */
.dm-wa-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-right: 6px;
}
.dm-wa-toggle-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  line-height: 1;
}
.dm-wa-toggle-btn + .dm-wa-toggle-btn { border-left: 1px solid var(--border); }
.dm-wa-toggle-btn:hover { background: var(--card-h); color: var(--text); }
/* Activo: "Bot" en teal (AI), "Manual" en verde (humano toma). */
.dm-wa-toggle-btn.is-active[data-wa-mode="bot"]    { background: var(--teal);  color: #fff; }
.dm-wa-toggle-btn.is-active[data-wa-mode="broker"] { background: var(--green); color: #fff; }

/* Audio entrante de WhatsApp (nota de voz). */
.dm-msg-audio { margin-top: 2px; }
.dm-msg-audio audio { width: 240px; max-width: 100%; height: 38px; display: block; }
.dm-msg.mine .dm-msg-audio audio { margin-left: auto; }

/* ─── Audio interno: adjunto reproducible + grabación de nota de voz ─── */
.dm-att--audio { width: 100%; min-width: 220px; }
.dm-att--audio audio { width: 100%; height: 40px; display: block; }

/* Transcripción on-demand de notas de voz (WA + internas). */
.dm-audio-transcribe {
  margin-top: 4px; padding: 3px 8px; font-size: 12px; line-height: 1.3;
  background: transparent; border: 1px solid var(--border, #d9dde3);
  border-radius: 999px; color: var(--text-soft, #667); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.dm-audio-transcribe:hover { background: var(--surface-2, #f1f3f5); border-color: var(--text-soft, #99a); }
.dm-audio-transcribe[data-loading] { opacity: .6; cursor: default; }
.dm-audio-transcript {
  margin-top: 4px; padding: 6px 10px; font-size: 13px; line-height: 1.4;
  background: var(--surface-2, #f1f3f5); border-radius: 10px;
  color: var(--text, #222); white-space: pre-wrap; word-break: break-word;
}
.dm-msg.mine .dm-audio-transcript { margin-left: auto; }

/* Botón de micrófono en el composer (mismo estilo que el clip). */
.dm-mic-btn {
  flex-shrink: 0; background: transparent; border: 0; padding: 8px; border-radius: 8px;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.dm-mic-btn:hover { color: var(--text); background: var(--card-h); }
.dm-mic-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.dm-mic-btn.is-recording { color: var(--red); }

/* Barra de grabación: overlay sobre el composer mientras se graba la nota. */
.dm-rec-bar {
  position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 5;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px 10px;
}
.dm-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: dm-rec-pulse 1s infinite; }
@keyframes dm-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.dm-rec-time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--text); }
.dm-rec-bar .dm-rec-cancel { margin-left: auto; background: transparent; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.dm-rec-bar .dm-rec-cancel:hover { color: var(--text); background: var(--card-h); }
.dm-rec-bar .dm-rec-stop { padding: 5px 14px; font-size: 14px; }

/* ═══════════════ Administración de propiedad (ficha CRM) ═══════════════
   Cuenta, KPIs de saldo, libro mayor de movimientos. La tab "Administración"
   en la ficha de propiedad usa estos estilos. */

/* Empty state cuando la propiedad no tiene cuenta de admin abierta */
.pa-empty {
  text-align: center;
  padding: 32px 18px;
  background: linear-gradient(180deg, rgba(132,204,255,0.04), transparent);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.pa-empty-ic { font-size: 36px; margin-bottom: 10px; opacity: 0.7; }
.pa-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.pa-empty-sub {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  max-width: 460px; margin: 0 auto 18px;
}

/* Header de la cuenta: identidad + acciones */
.pa-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.pa-hd-id { flex: 1 1 auto; min-width: 240px; }
.pa-hd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-hd-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pa-hd-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Pills de estado de la cuenta */
.pa-pill {
  font-size: 10.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.pa-pill-ok   { background: rgba(23,198,181,0.16); color: var(--teal-l, #5eead4); border: 1px solid var(--teal); }
.pa-pill-warn { background: rgba(212,160,90,0.16); color: var(--sand, #d4a05a); border: 1px solid var(--sand); }
.pa-pill-mute { background: rgba(255,255,255,0.04); color: var(--muted); border: 1px solid var(--border); }

/* KPIs: 4 cards en grilla responsive */
.pa-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 18px;
}
@media (max-width: 720px) {
  .pa-kpis { grid-template-columns: repeat(2, 1fr); }
}
.pa-kpi {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.pa-kpi-lb {
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.pa-kpi-val {
  font-family: 'Roboto', sans-serif;
  font-size: 19px; font-weight: 600;
  color: var(--text);
}
.pa-kpi-sm { font-size: 14px; }

/* Saldo: verde si positivo, rojo si negativo */
.pa-pos { color: var(--teal-l, #5eead4); }
.pa-neg { color: var(--red, #e5695d); }
.pa-zero { color: var(--muted); }

/* Header de la tabla de movimientos */
.pa-movs-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; gap: 12px; flex-wrap: wrap;
}
.pa-movs-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.pa-movs-actions .card-link { font-size: 11.5px; }

/* Filtros sobre la tabla: chips de dirección + select de categoría */
.pa-mov-filters {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.pa-filter-chip {
  appearance: none; background: var(--card); border: 1px solid var(--border);
  color: var(--text); padding: 5px 12px; border-radius: 999px;
  font: inherit; font-size: 11.5px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.pa-filter-chip:hover { border-color: var(--teal-l); }
.pa-filter-chip.on {
  background: var(--teal-dim); border-color: var(--teal); color: var(--text); font-weight: 600;
}
.pa-filter-select {
  appearance: none; -webkit-appearance: none;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); padding: 5px 24px 5px 12px; border-radius: 999px;
  font: inherit; font-size: 11.5px; cursor: pointer;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23808d9a' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.pa-filter-select:focus { outline: none; border-color: var(--teal-l); box-shadow: 0 0 0 3px var(--teal-dim); }

/* Adjuntar comprobante en el modal de movimiento: file picker + IA */
.pa-attach {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pa-attach .btn { font-size: 12px; padding: 7px 12px; }
.pa-attach-name {
  font-size: 12px; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 8px;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pa-attach-name a { color: var(--teal-l, #5eead4); text-decoration: none; }
.pa-attach-name a:hover { text-decoration: underline; }
.pa-attach-clear { color: var(--muted); font-size: 14px; padding: 4px 8px; }
.pa-attach-clear:hover { color: var(--red); }
.pa-attach-ai {
  background: linear-gradient(135deg, var(--teal-dim), rgba(168,120,245,0.18));
  border-color: var(--teal);
}
.pa-attach-ai:hover:not(:disabled) { background: var(--teal); color: var(--midnight); }
.pa-attach-ai:disabled { opacity: 0.6; cursor: progress; }
.pa-attach-hint {
  margin-top: 8px; font-size: 11.5px; line-height: 1.4;
  color: var(--muted);
}

/* Modal Avisar al propietario */
.pa-notify-msg { margin-bottom: 14px; }
.pa-notify-msg label {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; display: block; margin-bottom: 4px;
}
.pa-notify-msg pre {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
  font-size: 12px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  font-family: inherit; margin: 0;
  max-height: 200px; overflow-y: auto;
}
.pa-notify-channels {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.pa-notify-channels .btn { font-size: 12.5px; }
.pa-notify-disabled {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--card); border: 1px dashed var(--border);
  border-radius: 8px; padding: 7px 12px;
  font-size: 12px; color: var(--muted);
}

/* Panel de alertas en la vista global #administracion */
.pa-alerts-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.pa-alerts-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.pa-alerts-title {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.pa-alerts-group { margin-top: 12px; }
.pa-alerts-group:first-of-type { margin-top: 0; }
.pa-alerts-group-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  margin-bottom: 6px;
}
.pa-alerts-badge {
  display: inline-block; margin-left: 4px;
  background: var(--card-h, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; color: var(--text);
}
.pa-alerts-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pa-alert-item {
  font-size: 12px; line-height: 1.5;
  padding: 7px 10px; border-radius: 7px;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid var(--muted);
}
.pa-alert-item a { color: var(--teal-l, #5eead4); text-decoration: none; font-weight: 500; }
.pa-alert-item a:hover { text-decoration: underline; }
.pa-alert-high { border-left-color: var(--red); background: rgba(229,105,93,0.06); }
.pa-alert-normal { border-left-color: var(--sand, #d4a05a); }

/* Banner cuando hay un contrato de alquiler activo que aún no está
   reflejado en el módulo de administración (cuenta no abierta, o cuenta
   abierta pero sin recurrencia matching). El primario invita a abrir
   cuenta pre-cargada; el chico invita a crear recurrencia desde contrato. */
.pa-contract-banner {
  display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(132,204,255,0.08), rgba(168,120,245,0.08));
  border: 1px solid var(--teal);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.pa-contract-banner-sm { padding: 11px 14px; gap: 10px; margin-bottom: 14px; }
.pa-contract-ico { font-size: 22px; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.pa-contract-body { flex: 1; min-width: 0; }
.pa-contract-title { font-weight: 600; font-size: 13.5px; color: var(--text); margin-bottom: 4px; }
.pa-contract-meta { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.pa-contract-banner .btn { font-size: 12.5px; }

/* ═══════════════ Mantenimiento (tab en la ficha) ═══════════════ */
.pmi-group { margin-top: 18px; }
.pmi-group-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  margin-bottom: 10px;
}
.pmi-list { display: flex; flex-direction: column; gap: 8px; }
.pmi-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  transition: border-color 0.12s;
}
.pmi-item:hover { border-color: var(--teal-l); }
.pmi-item-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.pmi-item-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 1; min-width: 0;
}
.pmi-item-title strong { font-size: 14px; }
.pmi-ico { font-size: 17px; }
.pmi-actions { display: flex; gap: 6px; align-items: center; }
.pmi-actions .btn { font-size: 12px; padding: 5px 10px; }
.pmi-actions .card-link { color: var(--muted); }
.pmi-actions .pmi-del:hover { color: var(--red); }

.pmi-pri-pill {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.pmi-pri-low  { background: rgba(255,255,255,0.04); color: var(--muted); border: 1px solid var(--border); }
.pmi-pri-norm { background: rgba(132,204,255,0.08); color: var(--teal-l, #5eead4); border: 1px solid var(--teal); }
.pmi-pri-high { background: rgba(212,160,90,0.16); color: var(--sand, #d4a05a); border: 1px solid var(--sand); }
.pmi-pri-urg  { background: rgba(229,105,93,0.16); color: var(--red); border: 1px solid var(--red); animation: pmiPulse 1.6s infinite; }
@keyframes pmiPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.pmi-item-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: var(--muted);
  margin-bottom: 4px;
}
.pmi-item-meta .pmi-kind { font-weight: 500; color: var(--text); }
.pmi-due { display: inline-flex; align-items: center; gap: 4px; }
.pmi-overdue { color: var(--red); font-weight: 500; }
.pmi-cost { font-variant-numeric: tabular-nums; color: var(--text); }
.pmi-cost-est { color: var(--muted); font-style: italic; }
.pmi-cost-est small { font-size: 9px; }
.pmi-mov { color: var(--teal-l, #5eead4); font-weight: 500; }
.pmi-assignee { color: var(--text); }

.pmi-desc {
  font-size: 12px; color: var(--muted);
  margin-top: 4px; line-height: 1.4;
  padding-left: 4px; border-left: 2px solid var(--border);
  padding-left: 10px;
}

@media (max-width: 640px) {
  .pmi-item-hd { gap: 6px; }
  .pmi-actions { width: 100%; justify-content: flex-end; margin-top: 4px; }
  .pmi-item-meta { gap: 8px; font-size: 11px; }
}

/* Tabla de movimientos */
.pa-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.pa-table thead th {
  text-align: left; font-weight: 600;
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.pa-table tbody td {
  padding: 10px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.pa-table tbody tr:hover { background: var(--card-h, rgba(255,255,255,0.02)); }
.pa-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-actions { text-align: right; }
.pa-desc { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.pa-attach-link { text-decoration: none; margin-left: 4px; opacity: 0.7; }
.pa-attach-link:hover { opacity: 1; }
.pa-mov-pdf, .pa-mov-notify, .pa-mov-edit, .pa-mov-del { color: var(--muted); margin-left: 4px; text-decoration: none; }
.pa-mov-pdf:hover    { color: var(--sand, #d4a05a); }
.pa-mov-notify:hover { color: var(--teal-l, #5eead4); }
.pa-mov-edit:hover { color: var(--teal-l, #5eead4); }
.pa-mov-del:hover { color: var(--red); }

/* Mobile: tabla compacta. En vez de hacer scroll horizontal, achicamos
   tipografía y removemos icono de categoría. */
@media (max-width: 640px) {
  .pa-table { font-size: 12px; }
  .pa-table thead th, .pa-table tbody td { padding: 8px 6px; }
  .pa-hd-actions .btn { flex: 1; min-width: 0; font-size: 12px; padding: 8px 10px; }
}

/* ═══════════════ Cross-country admin panel ═══════════════ */
.cc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.cc-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-card-err { opacity: 0.65; }
.cc-card-hd {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.cc-card-hd strong { font-size: 14px; }
.cc-card-flag { font-size: 22px; line-height: 1; }
.cc-pill-here {
  margin-left: auto;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--teal-dim); color: var(--teal-l, #5eead4); border: 1px solid var(--teal);
  padding: 2px 8px; border-radius: 999px;
}
.cc-card-empty {
  color: var(--muted); font-size: 12px; padding: 8px 0;
}
.cc-card-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.cc-stat {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(255,255,255,0.02); padding: 8px 10px; border-radius: 8px;
}
.cc-stat-lb {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-stat-val {
  font-family: 'Roboto', sans-serif;
  font-size: 18px; font-weight: 600;
}
.cc-stat-sub { font-size: 10.5px; color: var(--muted); }
.cc-jump-btn {
  align-self: flex-end; font-size: 12px;
}
/* ═══════════════ Bookmarks ═══════════════ */

/* Botón 🔖 del topbar — al lado del título cuando se está en una ficha.
   Usa SVG inline (ribbon estilo Slack); CSS controla color vía currentColor. */
.tb-bookmark-btn {
  appearance: none; background: transparent; border: none;
  color: var(--muted);
  cursor: pointer; padding: 4px 6px; margin-left: 6px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.12s, background 0.12s, transform 0.08s;
}
.tb-bookmark-btn svg { display: block; }
.tb-bookmark-btn:hover { color: var(--sand, #d4a05a); background: rgba(212,160,90,0.08); }
.tb-bookmark-btn.bookmark-btn-on { color: var(--sand, #d4a05a); }
.tb-bookmark-btn:active { transform: scale(0.9); }
.tb-bookmark-btn:disabled { opacity: 0.5; cursor: progress; }

/* Genérico de bookmark button (por si lo usamos en otros lados) */
.bookmark-btn { cursor: pointer; transition: color 0.12s, transform 0.08s; }
.bookmark-btn.bookmark-btn-on { color: var(--sand, #d4a05a); }

/* Vista #bookmarks */
.bm-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.bm-filter-chip {
  appearance: none; background: var(--card); border: 1px solid var(--border);
  color: var(--text); padding: 5px 12px; border-radius: 999px;
  font: inherit; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.bm-filter-chip:hover { border-color: var(--teal-l); }
.bm-filter-chip.on {
  background: var(--teal-dim); border-color: var(--teal); font-weight: 600;
}
.bm-count {
  font-size: 10px; color: var(--muted);
  background: var(--input-bg); border-radius: 999px;
  padding: 1px 6px; min-width: 18px; text-align: center;
}
.bm-filter-chip.on .bm-count { background: rgba(255,255,255,0.08); color: var(--text); }

.bm-host { display: flex; flex-direction: column; gap: 18px; }
.bm-group {}
.bm-group-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.bm-list { display: flex; flex-direction: column; gap: 6px; }
.bm-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 12px;
  transition: border-color 0.12s;
}
.bm-item:hover { border-color: var(--teal-l); }
.bm-item.bm-pinned { border-left: 3px solid var(--sand); }
.bm-ico { font-size: 18px; flex-shrink: 0; }
.bm-body {
  flex: 1; min-width: 0; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 2px;
}
.bm-title { font-size: 13px; font-weight: 500; }
.bm-sub { font-size: 11.5px; color: var(--muted); }
.bm-dead {
  color: var(--sand); margin-left: 6px; font-size: 11px;
}
.bm-actions { display: flex; gap: 4px; flex-shrink: 0; }
.bm-act {
  appearance: none; background: transparent; border: none;
  font-size: 14px; color: var(--muted); cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}
.bm-act:hover { background: var(--input-bg); }
.bm-act-del:hover { color: var(--red); }
.bm-act[data-pinned="1"] { color: var(--sand); }

@media (max-width: 640px) {
  .bm-item { padding: 8px 10px; gap: 8px; }
  .bm-title { font-size: 12.5px; }
  .bm-sub { font-size: 11px; }
}

/* Sección bookmarks en el asistente (arriba del composer/signals) */
.assist-bookmarks {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: rgba(212,160,90,0.04);
}
.assist-bookmarks[hidden] { display: none; }
.assist-bm-label {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.assist-bm-chips {
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.assist-bm-chips::-webkit-scrollbar { height: 4px; }
.assist-bm-chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.assist-bm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 10px;
  font-size: 11.5px; color: var(--text);
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}
.assist-bm-chip:hover { border-color: var(--teal-l); color: var(--teal-l, #5eead4); }