/* ============================================================
   LINKEO OS · STYLES (DARK THEME)
   Paleta: lime #C8FF00 · navy #1C2744 / #06091A
   Tipografía: Outfit (titulares) + Plus Jakarta Sans (cuerpo)
   ============================================================ */

:root {
  --lime: #C8FF00;
  --lime-dark: #A8DC00;
  --lime-glow: rgba(200, 255, 0, 0.2);
  --navy: #1C2744;
  --navy-deep: #06091A;

  --bg: #0B0F1E;            /* fondo principal */
  --bg-2: #11172A;          /* sidebar / topbar */
  --surface: #161D33;       /* cards, modals */
  --surface-hover: #1F2745;
  --surface-2: #232C4D;     /* alt surfaces */

  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);

  --text: #ECEEF3;
  --text-muted: #8E96A8;
  --text-faint: #5A6178;

  --coral: #FF5C4D;
  --coral-bg: rgba(255, 92, 77, 0.12);
  --danger: #F87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --warning: #FBBF24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --success: #34D399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --info: #60A5FA;
  --info-bg: rgba(96, 165, 250, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 4px var(--lime-glow);

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

/* ============================================================
   LIGHT MODE OVERRIDES  (body.light)
   Filosofía:
     · Fondo blanco / off-white en TODO (topbar, sidebar, main).
     · Texto navy sobre fondo blanco.
     · Lima sólo en botones primarios y acentos clave, SIEMPRE con texto navy
       (no blanco sobre lima — bajo contraste).
     · Nada de letras lima sobre blanco (bajo contraste) — usar navy.
   ============================================================ */
body.light {
  --bg: #FFFFFF;
  --bg-2: #FAFBFE;          /* topbar/sidebar: off-white en light mode */
  --surface: #F4F7FE;
  --surface-hover: #E8EDF8;
  --surface-2: #D8E0F3;
  --border: rgba(28, 39, 68, 0.1);
  --border-strong: rgba(28, 39, 68, 0.22);
  --text: #06091A;
  --text-muted: #3A4568;
  --text-faint: #6A759A;
  --shadow-sm: 0 1px 3px rgba(28,39,68,0.08);
  --shadow-md: 0 4px 16px rgba(28,39,68,0.1);
  --shadow-lg: 0 16px 48px rgba(28,39,68,0.14);
}
/* En modo claro, el main necesita scrollbar más claro */
body.light ::-webkit-scrollbar-track { background: #F0F3FC; }
body.light ::-webkit-scrollbar-thumb { background: #C8D3EA; }

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

html, body {
  height: 100%;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.18s ease, color 0.18s ease;
}
/* Transición coordinada del tema en superficies principales */
.topbar, .sidebar, .main, .app, .app-footer {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
}
h1 { font-size: 28px; margin-bottom: 16px; }
h2 { font-size: 22px; margin-bottom: 12px; }
h3 { font-size: 18px; margin-bottom: 10px; }
h4 { font-size: 16px; margin-bottom: 8px; }

.hidden { display: none !important; }
.muted { color: var(--text-muted); font-size: 13px; }

/* ============================================================
   LOADING
   ============================================================ */
.loading-screen {
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--navy) 0%, var(--bg) 70%);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.logo-loading {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  animation: pulse 1.5s ease-in-out infinite;
}
.logo-loading-iso {
  height: 72px; width: auto;
  filter: drop-shadow(0 0 28px var(--lime-glow));
}
.logo-loading-text {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.97); }
}

/* ============================================================
   AUTH
   ============================================================ */
.auth-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(200, 255, 0, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(28, 39, 68, 0.6) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  padding: 20px;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%; max-width: 460px;
  box-shadow: var(--shadow-lg);
}
.auth-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
}
.auth-iso {
  height: 44px; width: auto;
  filter: drop-shadow(0 0 12px var(--lime-glow));
}
.auth-wordmark-text {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}
.auth-tagline {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 28px;
}
/* Banner de invitación en la pantalla de auth */
.invite-banner {
  background: rgba(200, 255, 0, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.32);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: -10px 0 22px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.invite-banner.invite-banner-error {
  background: rgba(255, 100, 100, 0.08);
  border-color: rgba(255, 100, 100, 0.32);
}
.invite-banner-icon { font-size: 22px; line-height: 1; }
.invite-banner-text { color: var(--text); font-size: 14px; line-height: 1.4; }
.invite-banner-text strong { color: var(--lime); font-weight: 700; }
.invite-banner-error .invite-banner-text strong { color: #ff8080; }
.invite-banner-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
}
body.light .invite-banner {
  background: rgba(60, 80, 30, 0.05);
  border-color: rgba(120, 160, 20, 0.42);
}
body.light .invite-banner-text strong { color: var(--lime-dark); }
.auth-tabs {
  display: flex; gap: 4px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}
.tab-btn {
  flex: 1;
  padding: 10px 12px;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.tab-btn.active {
  background: var(--surface-2);
  color: var(--lime);
}
.tab-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label, .form-grid label, .config-panel label {
  display: flex; flex-direction: column;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

input, select, textarea {
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-glow);
  background: var(--surface);
}
select option { background: var(--surface); color: var(--text); }

textarea { resize: vertical; min-height: 60px; font-family: inherit; }

.form-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  font-weight: 500;
}
.invite-info {
  background: var(--bg); padding: 14px; border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px;
  border: 1px solid var(--border);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary, .btn-secondary, .btn-danger, .btn-link, .btn-ghost {
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--lime);
  color: var(--navy-deep);
}
.btn-primary:hover { background: var(--lime-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--border-strong); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}
.btn-danger:hover { background: var(--danger); color: white; }

.btn-link {
  background: transparent;
  color: var(--text);
  padding: 8px 12px;
}
.btn-link:hover { background: var(--surface); }

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

.topbar {
  height: 56px; background: var(--bg-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.topbar::before {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
  opacity: 0.4;
}
.topbar-left { display: flex; align-items: center; gap: 18px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.topbar-isotipo {
  height: 28px; width: auto;
  filter: drop-shadow(0 0 8px var(--lime-glow));
  flex-shrink: 0;
}
.topbar-wordmark-text {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.brand-link { color: #FFFFFF; }
.brand-eo   { color: var(--lime); }

/* ============================================================
   LOCK-UP ENDOSADO · separador + sub-label vertical
   Aplica en: loading-screen, auth-screen, topbar
   Estrategia: inline-flex + line-height:1 uniforme + display inline-block
   en cada pieza para que LINKEO, "·" e "Inmobiliario" compartan la misma
   caja vertical y queden ópticamente centrados entre sí.
   ============================================================ */
.logo-loading-text,
.auth-wordmark-text,
.topbar-wordmark-text {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.brand-link,
.brand-eo,
.brand-sep,
.brand-vertical {
  display: inline-block;
  line-height: 1;
}
.brand-sep {
  color: var(--lime);
  opacity: 0.55;
  font-weight: 700;
  font-size: 0.78em;
  margin: 0 0.32em;
  /* Sin transform: el align-items:center del contenedor centra al separador
     respecto del wordmark master sin ningún offset óptico extra. */
}
.brand-vertical {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  /* tamaño relativo: 58% del wordmark master */
  font-size: 0.58em;
  /* Pequeño nudge óptico: las letras title-case tienen masa visual en la
     mitad inferior; subimos 0.05em para que el centro visual de
     "Inmobiliario" coincida con el centro de LINKEO y del "·". */
  transform: translateY(-0.04em);
}
/* En topbar el wordmark es más chico → el vertical también, pero proporcional */
.topbar-wordmark-text .brand-vertical { font-size: 0.62em; }

.topbar-divider {
  width: 1px; height: 22px;
  background: var(--border-strong);
  margin-left: 4px;
  flex-shrink: 0;
}
/* light mode: isotipo sin glow (legacy, por si vuelven a usarse las imgs) */
body.light .topbar-isotipo { filter: none; }
body.light .auth-iso       { filter: none; }

/* ============================================================
   LIGHT MODE — TOPBAR / SIDEBAR / BRAND
   Fondo blanco. Letras navy. Acentos lima sólo donde el contraste lo permita.
   ============================================================ */
body.light .topbar {
  background: var(--bg-2);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
body.light .topbar::before {
  /* línea inferior con lima atenuada para no romper la blancura del header */
  opacity: 0.25;
}
body.light .topbar-divider {
  background: var(--border-strong);
  opacity: 0.5;
}
body.light .sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--border);
}
/* Wordmark "LINK · EO · Inmobiliario" en topbar light:
     LINK → navy fuerte (legible sobre blanco)
     EO   → lima (acento de marca, pesa lo suficiente como bloque corto)
     ·    → lima atenuado
     Inmobiliario → text-muted (navy claro) */
body.light .topbar .brand-link,
body.light .auth-card .brand-link { color: var(--navy-deep); }
body.light .topbar .brand-eo { color: var(--lime-dark); }   /* lima más oscuro para contraste sobre blanco */
body.light .topbar .brand-sep { color: var(--lime-dark); opacity: 0.55; }
body.light .topbar .brand-vertical,
body.light .auth-card .brand-vertical { color: var(--text-muted); }
body.light .topbar-isotipo { filter: none; }                /* sin glow */
body.light .agency-name { color: var(--text); opacity: 1; }
body.light .user-info { color: var(--text-muted); }
body.light .topbar-clock { color: var(--text-muted); }
body.light .topbar-version { color: var(--text-faint); }

/* Botón de tema en light mode: tinta navy sobre blanco */
body.light .btn-theme {
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
}
body.light .btn-theme:hover {
  background: var(--surface);
  border-color: var(--lime-dark);
  color: var(--lime-dark);
}

/* Sidebar light: bordes y textos navy */
body.light .sidebar-section-title { color: var(--text-faint); }
body.light .nav-btn { color: var(--text-muted); }
body.light .nav-btn:hover { background: var(--surface); color: var(--text); }
body.light .nav-btn.active {
  /* En light mode usamos un fondo lima MUY suave + indicador lateral lima
     fuerte. La letra es navy (no lima) para no perder contraste sobre el
     halo verdoso. */
  background: linear-gradient(90deg, rgba(200,255,0,0.18) 0%, transparent 100%);
  color: var(--navy-deep);
  font-weight: 700;
}
body.light .nav-btn.active::before { background: var(--lime-dark); }
body.light .nav-btn.active .nav-icon { color: var(--navy-deep); opacity: 1; }
body.light .sidebar-collapse-btn {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
body.light .sidebar-collapse-btn:hover {
  border-color: var(--lime-dark);
  color: var(--lime-dark);
}

/* Botón primario en light mode: lima + navy (no blanco). */
body.light .btn-primary {
  background: var(--lime);
  color: var(--navy-deep);
}
body.light .btn-primary:hover {
  background: var(--lime-dark);
  color: var(--navy-deep);
}
/* Badges / pills lima en light mode: navy en vez de blanco */
body.light .badge[style*="background:var(--lime)"],
body.light .badge-lime { color: var(--navy-deep) !important; }
.agency-name { font-weight: 600; font-size: 14px; color: var(--text); opacity: 0.9; }
.topbar-right { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.user-info { color: var(--text-muted); }

.layout { flex: 1; display: flex; min-height: 0; }

/* ============================================================
   SIDEBAR (con iconografía)
   ============================================================ */
.sidebar {
  width: 220px; background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 18px;
  transition: width 0.18s ease;
  position: relative;
  flex-shrink: 0;          /* no se achica si el layout queda corto */
  overflow: hidden;        /* recorta contenido durante el toggle */
}
/* Botón colapsar/expandir — fila dentro del sidebar, no flotante */
.sidebar-collapse-btn {
  align-self: flex-end;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: all 0.15s;
  margin-bottom: -8px;     /* compensa el gap del sidebar para pegarlo arriba */
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
  border-color: var(--lime);
  color: var(--lime);
}
.sidebar-collapse-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.sidebar-collapse-icon-collapsed { display: none; }
body.sidebar-collapsed .sidebar-collapse-icon-expanded { display: none; }
body.sidebar-collapsed .sidebar-collapse-icon-collapsed { display: inline-flex; }

/* Modo colapsado: solo iconos visibles */
body.sidebar-collapsed .sidebar {
  width: 60px;
  padding: 14px 6px;
}
body.sidebar-collapsed .sidebar-collapse-btn {
  align-self: center;
  margin-bottom: -6px;
}
body.sidebar-collapsed .sidebar-section-title { display: none; }
body.sidebar-collapsed .nav-btn {
  justify-content: center;
  padding: 10px 6px;
  gap: 0;
  position: relative;
  overflow: visible;       /* permite ver el tooltip aunque el sidebar tenga overflow:hidden */
}
body.sidebar-collapsed .nav-btn > *:not(.nav-icon):not(.nav-badge-hoy) { display: none; }
body.sidebar-collapsed .nav-btn .nav-icon { min-width: auto; }
body.sidebar-collapsed .nav-badge-hoy {
  position: absolute;
  top: 2px; right: 2px;
  font-size: 9px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
body.sidebar-collapsed .nav-group-trigger .nav-group-toggle { display: none; }
body.sidebar-collapsed .nav-sub { display: none; }
/* Sin tooltip flotante (causaba conflictos con overflow:hidden del sidebar);
   los íconos llevan title="..." nativo del browser. */
.sidebar-section-title {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-faint);
  padding: 0 12px;
  margin-bottom: 4px;
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
  position: relative;
}
.nav-btn:hover {
  background: var(--surface);
  color: var(--text);
}
.nav-btn.active {
  background: linear-gradient(90deg, rgba(200, 255, 0, 0.1) 0%, transparent 100%);
  color: var(--lime);
  font-weight: 600;
}
.nav-btn.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--lime);
  border-radius: 0 3px 3px 0;
}
.nav-icon {
  font-size: 18px;
  min-width: 22px;
  display: inline-flex;
  align-items: center; justify-content: center;
  opacity: 0.65;
  transition: opacity 0.15s;
}
.nav-btn.active .nav-icon { opacity: 1; }
.nav-icon svg { width: 17px; height: 17px; stroke-width: 1.75; }
/* Bell icon Lucide */
.notif-bell i svg, .notif-bell svg { width: 20px; height: 20px; }

.main {
  flex: 1; min-width: 0;
  padding: 24px 28px;
  overflow-y: auto;
  background: var(--bg);
}

.view { display: none; }
.view.active { display: block; }

.view-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.view-header h1 { margin-bottom: 0; }
.view-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.view-tools input, .view-tools select {
  padding: 8px 11px;
  font-size: 13px;
}
.view-tools input { min-width: 200px; }

/* ============================================================
   DASHBOARD — KPIs grandes + charts + role views
   ============================================================ */
.dash-role-label {
  font-size: 12px; font-weight: 600; margin-top: 4px;
  padding: 3px 10px; border-radius: 20px; display: inline-block;
}
.dash-role-label.owner {
  background: rgba(200,255,0,0.12); color: var(--lime);
}
.dash-role-label.agent {
  background: rgba(96,165,250,0.12); color: var(--info);
}

/* Dashboard date filter */
.dash-date-filter {
  display: flex; gap: 3px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.dash-period-btn {
  padding: 5px 12px;
  border: none; background: transparent;
  border-radius: 5px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer; transition: all 0.13s;
}
.dash-period-btn.active, .dash-period-btn:hover {
  background: var(--surface-2); color: var(--lime);
}

/* KPI Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--lime) 0%, transparent 70%);
  opacity: 0.5;
}
.kpi-card-accent::after { opacity: 1; }
.kpi-card-accent { border-color: rgba(200,255,0,0.2); }

.kpi-icon-wrap {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--bg);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.kpi-icon-wrap svg { width: 24px; height: 24px; stroke-width: 1.5; }
.kpi-card-accent .kpi-icon-wrap { color: var(--navy-deep); }
.kpi-content { flex: 1; min-width: 0; }
.kpi-label {
  font-size: 11px; color: var(--text-muted);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.kpi-value {
  font-family: 'Outfit', sans-serif;
  font-size: 42px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.kpi-trend {
  font-size: 12px; color: var(--text-muted);
}
.kpi-trend strong { color: var(--lime); }

/* Charts row */
.dash-charts-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1000px) { .dash-charts-row { grid-template-columns: 1fr; } }

/* Bottom row */
.dash-bottom-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

/* Common panel */
.dash-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.dash-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.dash-panel-header h3 { margin-bottom: 0; font-size: 15px; }

/* Chart canvas wrapper */
.chart-wrap {
  position: relative;
  height: 200px;
}
.chart-wrap canvas { width: 100% !important; }

/* Horizontal bars */
.dash-bars { display: flex; flex-direction: column; gap: 8px; }
.dash-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dash-bar-label { width: 170px; color: var(--text); font-weight: 500; flex-shrink: 0; font-size: 12px; }
.dash-bar-track {
  flex: 1; background: var(--bg); border-radius: 4px; height: 20px; position: relative;
  border: 1px solid var(--border);
}
.dash-bar-fill { background: var(--lime); height: 100%; border-radius: 3px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
.dash-bar-count {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--text); font-size: 11px;
}

/* Agent ranking */
.dash-agent-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; font-size: 13px;
}
.dash-agent-name { width: 110px; font-weight: 600; color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }

/* Rental KPIs */
.rental-kpi-row { display: flex; gap: 16px; flex-wrap: wrap; }
.rental-kpi { flex: 1; min-width: 100px; }
.rental-kpi-value {
  font-family: 'Outfit', sans-serif;
  font-size: 24px; font-weight: 800;
  color: var(--text); letter-spacing: -0.02em;
}
.rental-kpi-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

/* ============================================================
   KANBAN
   ============================================================ */
.kanban-board {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 16px;
  min-height: calc(100vh - 200px);
}
.kanban-col {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 240px; min-width: 240px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 200px);
  position: relative;
}
/* WIP indicator — barra de color en top de columna según densidad */
.kanban-col::before {
  content: '';
  display: block;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--border);
  transition: background 0.3s;
}
.kanban-col.wip-low::before   { background: var(--success); }
.kanban-col.wip-mid::before   { background: var(--warning); }
.kanban-col.wip-high::before  { background: var(--danger); }
.kanban-col-header {
  padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.kanban-col-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 11px;
  color: var(--text);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.kanban-col-count {
  background: var(--surface-2);
  color: var(--lime);
  font-size: 11px; font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 22px; text-align: center;
}
.kanban-col-body {
  padding: 10px; flex: 1;
  overflow-y: auto;
  min-height: 100px;
  display: flex; flex-direction: column; gap: 8px;
}
.kanban-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: grab;
  transition: all 0.12s;
  border-left: 3px solid var(--text-faint);
}
.kanban-card:hover {
  background: var(--surface-hover);
  border-left-color: var(--lime);
  transform: translateY(-1px);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.drag-ghost { opacity: 0.4; }
.kanban-card.temp-hot   { border-left-color: #F87171; }
.kanban-card.temp-warm  { border-left-color: #FBBF24; }
.kanban-card.temp-cool  { border-left-color: #60A5FA; }
.kanban-card.temp-cold  { border-left-color: var(--text-faint); }
.kanban-card-name { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.kanban-card-meta { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kanban-card-tag {
  padding: 1px 6px;
  background: var(--surface-2);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.kanban-card-tag.tipo-comprador { background: rgba(96, 165, 250, 0.15); color: var(--info); }
.kanban-card-tag.tipo-inquilino { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.kanban-card-loss {
  font-size: 11px; color: var(--danger);
  margin-top: 4px;
  font-style: italic;
}
.kanban-card-matched {
  margin-top: 6px;
  padding: 3px 6px;
  font-size: 11px;
  color: var(--lime);
  background: rgba(200, 255, 0, 0.08);
  border: 1px solid rgba(200, 255, 0, 0.18);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  background: var(--bg-2);
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.data-table tr { cursor: pointer; transition: background 0.1s; }
.data-table tr:hover td { background: var(--surface-hover); }
.data-table .empty {
  text-align: center; padding: 40px; color: var(--text-muted); font-style: italic;
}
.data-table .badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--text);
}

/* ── View toggle (grilla / mapa) ── */
.view-toggle {
  display: flex; gap: 2px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px;
}
.view-toggle-btn {
  padding: 5px 8px; border: none; background: transparent;
  border-radius: 4px; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center;
  transition: all 0.13s;
}
.view-toggle-btn.active, .view-toggle-btn:hover {
  background: var(--surface-2); color: var(--lime);
}

/* ── Mapa ── */
.properties-map {
  height: calc(100vh - 200px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
/* Estilo Leaflet oscuro */
.properties-map .leaflet-tile { filter: invert(0.9) hue-rotate(180deg); }
body.light .properties-map .leaflet-tile { filter: none; }
.map-marker {
  padding: 3px 8px; border-radius: 12px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px;
  color: #06091A; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.map-popup { font-family: 'Plus Jakarta Sans', sans-serif; min-width: 160px; }
.map-empty-overlay {
  position: absolute; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,15,30,0.85); color: var(--text-muted);
  font-size: 13px; text-align: center; padding: 20px;
  pointer-events: none;
}

/* ── Comparador ── */
.comparador-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.comparador-table th, .comparador-table td {
  padding: 10px 14px; border: 1px solid var(--border);
  text-align: left;
}
.comparador-table thead th {
  background: var(--bg-2); font-weight: 700; color: var(--text);
  position: sticky; top: 0; z-index: 1;
}
.comp-label { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.comparador-table tbody tr:nth-child(even) { background: var(--surface); }
.comparador-table tbody tr:hover { background: var(--surface-hover); }
.modal-wide { max-width: 900px !important; width: 95vw !important; }

/* ============================================================
   PROPERTIES GRID
   ============================================================ */
.properties-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.property-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex; flex-direction: column;
}
.property-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 8px 28px rgba(0,0,0,0.18); }
.property-card-img {
  aspect-ratio: 16/10;
  background: var(--bg) center/cover;
  position: relative;
}
.property-card-img::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") center no-repeat;
  opacity: 0.1;
}
.property-card.has-img .property-card-img::before { display: none; }
.property-card-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
}
.property-card-tag.alquiler { background: var(--lime); color: var(--navy-deep); border-color: var(--lime); }
.property-card-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.property-card-price { font-size: 18px; font-weight: 700; color: var(--text); font-family: 'Outfit', sans-serif; }
.property-card-zone { font-size: 13px; color: var(--text-muted); }
.property-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.property-card-status {
  font-size: 10px; padding: 2px 8px;
  background: var(--surface-2); border-radius: 4px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  align-self: flex-start; color: var(--text-muted);
}
.property-card-status.disponible { background: var(--success-bg); color: var(--success); }
.property-card-status.reservado { background: var(--warning-bg); color: var(--warning); }
.property-card-status.vendido,
.property-card-status.alquilado,
.property-card-status.archivado { background: var(--surface-2); color: var(--text-muted); }

/* ============================================================
   MATCHING VIEW (split panel)
   ============================================================ */
.matching-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  height: calc(100vh - 160px);
}
@media (max-width: 900px) { .matching-layout { grid-template-columns: 1fr; height: auto; } }
.matching-leads-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.matching-leads-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.matching-leads-header h3 { margin: 0; font-size: 14px; }
.matching-leads-search {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.matching-leads-search input { width: 100%; }
.matching-leads-list {
  flex: 1; overflow-y: auto; padding: 6px;
}
.matching-lead-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
  border-left: 3px solid transparent;
  margin-bottom: 2px;
}
.matching-lead-item:hover { background: var(--surface-hover); }
.matching-lead-item.selected {
  background: var(--surface-2);
  border-left-color: var(--lime);
}
.matching-lead-item-name { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.matching-lead-item-meta { font-size: 12px; color: var(--text-muted); }
.matching-lead-item-status {
  font-size: 10px; padding: 1px 6px;
  background: var(--surface-2); border-radius: 3px;
  font-weight: 600; text-transform: uppercase;
  display: inline-block; margin-top: 4px;
}
.matching-results-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  overflow-y: auto;
}
.matching-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  color: var(--text-muted);
  flex-direction: column; gap: 12px;
  text-align: center;
}
.matching-empty-icon { font-size: 48px; opacity: 0.4; }
.matching-lead-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}
.matching-lead-card h2 { font-size: 20px; margin-bottom: 6px; }
.matching-lead-card-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  color: var(--text-muted); font-size: 13px;
  margin-top: 4px;
}
.matching-lead-card-meta strong { color: var(--text); }
.matching-result-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

/* ============================================================
   MATCH RESULTS (cards individuales)
   ============================================================ */
.match-result {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  border-left: 4px solid var(--text-faint);
}
.match-result.perfecto {
  border-left-color: var(--success);
  background: linear-gradient(90deg, var(--success-bg) 0%, var(--bg-2) 30%);
}
.match-result.excelente {
  border-left-color: var(--lime);
  background: linear-gradient(90deg, rgba(200, 255, 0, 0.08) 0%, var(--bg-2) 30%);
}
.match-result.bueno { border-left-color: var(--info); }
.match-result.parcial { border-left-color: var(--warning); }
.match-result.blocked {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, var(--danger-bg) 0%, var(--bg-2) 30%);
  opacity: 0.8;
}
.match-result-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.match-result-title { font-weight: 700; color: var(--text); font-size: 15px; }
.match-result-score {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  background: var(--surface-2); padding: 4px 10px; border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}
.match-result.perfecto .match-result-score { background: var(--success); color: var(--bg); }
.match-result.excelente .match-result-score { background: var(--lime); color: var(--navy-deep); }
.match-result.blocked .match-result-score { background: var(--danger); color: white; }
.match-result-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.match-criteria { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.match-criterion {
  font-size: 11px; padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
}
.match-criterion.ok { background: var(--success-bg); color: var(--success); }
.match-criterion.fail { background: var(--danger-bg); color: var(--danger); }
.match-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn-whatsapp {
  background: #25D366; color: white;
  padding: 7px 14px; border-radius: 6px;
  border: none;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.12s;
}
.btn-whatsapp:hover { background: #1DA851; transform: translateY(-1px); }

.matching-toolbar {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center;
}
.matching-info-banner {
  font-size: 12px; color: var(--text-muted);
  background: var(--bg-2);
  padding: 8px 12px; border-radius: var(--radius-sm);
  border-left: 3px solid var(--lime);
  margin-bottom: 12px;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal {
  position: fixed; inset: 0;
  background: rgba(6, 9, 26, 0.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadein 0.15s ease;
}
@keyframes fadein {
  from { opacity: 0; } to { opacity: 1; }
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 540px; width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.modal-card.modal-large  { max-width: 880px; }
.modal-card.modal-medium { max-width: 640px; }

/* Auto-save indicator */
.autosave-indicator {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  transition: all 0.2s;
  margin-left: 10px;
  display: inline-block;
}
.autosave-indicator.saving { background: var(--warning-bg); color: var(--warning); }
.autosave-indicator.saved  { background: var(--success-bg); color: var(--success); }

/* Validación progresiva */
.field-error { border-color: var(--danger) !important; }
.field-ok    { border-color: var(--success) !important; }
.field-hint { display: block; font-size: 11px; margin-top: 3px; }
.field-hint-error { color: var(--danger); }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--surface-2); border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 16px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: all 0.12s;
}
.modal-close:hover { background: var(--danger); color: white; }

.modal-tabs {
  display: flex; gap: 4px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
}
.modal-tab { display: none; }
.modal-tab.active { display: block; }

.form-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
.form-grid label.full-width { grid-column: 1 / -1; }
.form-grid label.only-inquilino.disabled { opacity: 0.4; pointer-events: none; }

.form-actions {
  margin-top: 24px;
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}
.form-actions .btn-danger { margin-right: auto; }

/* ============================================================
   MEDIA UPLOAD
   ============================================================ */
.media-section {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; margin-top: 8px;
}
.media-section input[type=file] {
  background: var(--surface);
  cursor: pointer;
}
.media-preview {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin-top: 10px;
}
.media-thumb {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  background: var(--surface-2) center/cover;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.media-thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-thumb-delete {
  position: absolute; top: 4px; right: 4px;
  background: rgba(6, 9, 26, 0.85); color: white;
  border: none; border-radius: 50%;
  width: 26px; height: 26px;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.media-thumb-delete:hover { background: var(--danger); }

/* ============================================================
   IMPORT EXCEL MODAL
   ============================================================ */
.import-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
  background: var(--bg);
  margin-bottom: 16px;
  transition: all 0.15s;
}
.import-dropzone:hover { border-color: var(--lime); }
.import-dropzone p { color: var(--text-muted); margin: 4px 0; font-size: 13px; }
.import-dropzone .icon { font-size: 36px; margin-bottom: 8px; opacity: 0.6; }

.import-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  max-height: 320px;
  overflow: auto;
}
.import-preview table { width: 100%; font-size: 12px; border-collapse: collapse; }
.import-preview th {
  background: var(--surface-2);
  padding: 6px 10px;
  text-align: left;
  font-weight: 700;
  color: var(--text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.import-preview td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.import-preview td.error { color: var(--danger); }
.import-summary {
  display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; font-size: 13px;
}
.import-summary-item {
  background: var(--bg);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.import-summary-item.ok { border-color: var(--success); color: var(--success); }
.import-summary-item.err { border-color: var(--danger); color: var(--danger); }

/* ============================================================
   ACTIVITY TIMELINE
   ============================================================ */
.activity-item {
  display: flex; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.activity-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--lime);
  color: var(--navy-deep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.activity-body { flex: 1; }
.activity-title { font-weight: 600; font-size: 13px; color: var(--text); }
.activity-detail { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.activity-time { color: var(--text-faint); font-size: 11px; margin-top: 2px; }

/* ============================================================
   CONFIG
   ============================================================ */
/* config-panels layout → ver reglas completas al final del archivo */
.config-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.config-panel form {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;
}
/* Subsecciones dentro del form de config (Identificación / Domicilio / Contacto) */
.form-subsection-title {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-top: 8px;
  margin-bottom: -4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.form-subsection-title:first-child { margin-top: 0; }
/* Layout 2-columnas para campos cortos (ciudad/provincia, CUIT/matrícula, web/IG) */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .form-row-2 { grid-template-columns: 1fr; }
}
.members-list { margin-bottom: 18px; }
.member-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.member-info { display: flex; flex-direction: column; }
.member-name { font-weight: 600; font-size: 14px; color: var(--text); }
.member-email { color: var(--text-muted); font-size: 12px; }
.member-role {
  padding: 2px 8px; border-radius: 4px;
  background: var(--surface-2); font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted);
}
.member-role.owner { background: var(--lime); color: var(--navy-deep); }
.invite-result {
  margin-top: 10px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  word-break: break-all;
  display: none;
}
.invite-result.shown { display: block; }
.invite-result code {
  background: var(--surface-2);
  color: var(--lime);
  padding: 6px;
  border-radius: 4px;
  display: inline-block;
  font-family: ui-monospace, monospace;
}

/* ============================================================
   LOST REASONS MODAL
   ============================================================ */
.lost-reasons {
  display: flex; flex-direction: column; gap: 8px;
  margin: 16px 0;
}
.lost-reasons button {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s;
  color: var(--text);
}
.lost-reasons button:hover {
  background: var(--lime); color: var(--navy-deep); border-color: var(--lime);
}

/* ============================================================
   TOAST
   ============================================================ */
/* ============================================================
   ONBOARDING TOUR
   ============================================================ */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
}
.onboarding-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 9, 26, 0.78);
  backdrop-filter: blur(4px);
}
.onboarding-card {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--lime);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  max-width: 420px; width: 90%;
  box-shadow: 0 0 0 1px var(--lime-glow), var(--shadow-lg);
  text-align: center;
  animation: popIn 0.25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
.onboarding-step-indicator {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.08em;
}
.onboarding-icon { margin-bottom: 16px; }
.onboarding-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 22px; font-weight: 800;
  color: var(--text); margin-bottom: 10px;
}
.onboarding-card p {
  color: var(--text-muted); font-size: 14px; line-height: 1.6;
  margin-bottom: 20px;
}
.onboarding-dots {
  display: flex; justify-content: center; gap: 7px; margin-bottom: 24px;
}
.onboarding-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-strong); transition: all 0.2s;
}
.onboarding-dot.active { background: var(--lime); transform: scale(1.3); }
.onboarding-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 14px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 500;
  z-index: 2000;
  animation: slideup 0.25s ease;
  max-width: 360px;
}
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast.warning { border-color: var(--warning); }
@keyframes slideup {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   AGENCY LOGO
   ============================================================ */
.agency-logo-section {
  display: flex; gap: 16px; align-items: center;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 4px;
}
.agency-logo-preview {
  width: 72px; height: 72px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.agency-logo-preview img {
  width: 100%; height: 100%; object-fit: contain;
}
.agency-logo-placeholder {
  font-size: 11px; color: var(--text-faint);
}
/* Logo en topbar */
.topbar-logo-img {
  height: 28px; max-width: 100px; object-fit: contain; border-radius: 3px;
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.btn-theme {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  width: 32px; height: 32px;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-theme svg { width: 15px; height: 15px; stroke-width: 1.75; }
.btn-theme:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--lime);
  color: var(--lime);
}
/* Icon swap: en dark se ve luna (cambiar a light); en light se ve sol */
.btn-theme .theme-icon-light { display: none; }
body.light .btn-theme .theme-icon-dark { display: none; }
body.light .btn-theme .theme-icon-light { display: inline-flex; }

/* ============================================================
   TOPBAR CLOCK + VERSION
   ============================================================ */
.topbar-clock {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  padding-right: 4px;
}
.topbar-version {
  font-size: 10px;
  font-weight: 600;
  color: var(--lime);
  background: rgba(200, 255, 0, 0.1);
  border: 1px solid rgba(200, 255, 0, 0.2);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.04em;
  font-family: 'Outfit', sans-serif;
}

/* ============================================================
   MATCHING MODE TOGGLE
   ============================================================ */
.matching-mode-toggle {
  display: flex; gap: 8px;
  margin-bottom: 14px;
}
.matching-mode-btn {
  flex: 1;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.matching-mode-btn:hover {
  border-color: var(--lime);
  color: var(--text);
}
.matching-mode-btn.active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--navy-deep);
}

/* ============================================================
   PREVIEW MODALS
   ============================================================ */
.preview-card {
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
}
.preview-header {
  margin-bottom: 18px;
}
.preview-header h2 {
  margin-bottom: 4px;
}
.preview-subheader {
  display: flex; gap: 6px; align-items: center;
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 4px;
}
.preview-price {
  font-size: 22px; font-weight: 700;
  font-family: 'Outfit', sans-serif;
  color: var(--lime);
  margin-top: 6px;
}
.preview-updated {
  font-size: 11px; color: var(--text-faint);
}
.preview-grid {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.preview-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.preview-row:last-child { border-bottom: none; }
.preview-row:nth-child(even) { background: rgba(255,255,255,0.02); }
.preview-label {
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.preview-value {
  color: var(--text);
  word-break: break-word;
}
.preview-gallery {
  display: flex; gap: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
  padding-bottom: 4px;
}
.preview-gallery-img {
  width: 120px; height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: 1px solid var(--border);
}

/* ============================================================
   PROPERTY CARDS — ACTIONS BAR & BUTTON HIERARCHY
   ============================================================ */
.property-card-actions {
  display: flex; gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.btn-card-action {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 8px;
  font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: inherit;
}
.btn-card-action:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-hover); }
.btn-card-primary {
  background: var(--lime);
  color: var(--navy-deep);
  border-color: var(--lime);
}
.btn-card-primary:hover { background: var(--lime-dark); border-color: var(--lime-dark); color: var(--navy-deep); }
.btn-card-ghost { background: transparent; }
.btn-card-ghost:hover { background: var(--surface-2); }
.btn-card-action svg { flex-shrink: 0; }

/* Property card meta icons */
.prop-meta-icon {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--text-muted);
}
.prop-meta-icon svg { opacity: 0.7; }

.btn-small {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* ============================================================
   KANBAN CARD — PREVIEW BTN
   ============================================================ */
.kanban-card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.kanban-preview-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.55;
  transition: all 0.12s;
  flex-shrink: 0;
  line-height: 1;
  color: var(--text-muted);
}
.kanban-card:hover .kanban-preview-btn { opacity: 1; }
.kanban-preview-btn:hover {
  background: rgba(200, 255, 0, 0.15);
  border-color: var(--lime);
  color: var(--lime);
  opacity: 1;
}
.kanban-preview-btn svg { width: 13px; height: 13px; }

/* ============================================================
   LEADS LIST — PREVIEW ACTION
   ============================================================ */
.btn-icon {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.12s;
}
.btn-icon:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

/* ============================================================
   MÓDULO ALQUILERES
   ============================================================ */
.agenda-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.agenda-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.agenda-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.agenda-kpi-value { font-size: 26px; font-weight: 700; font-family: 'Outfit', sans-serif; color: var(--text); }
.agenda-kpi.warn .agenda-kpi-value { color: var(--warning); }
.agenda-kpi.danger .agenda-kpi-value { color: var(--danger); }
.agenda-kpi.ok .agenda-kpi-value { color: var(--success); }

.agenda-list { display: flex; flex-direction: column; gap: 8px; }
.agenda-month-header {
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 15px;
  color: var(--text);
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  margin-top: 16px;
}
.agenda-month-header:first-child { margin-top: 0; }

.agenda-item {
  display: grid;
  grid-template-columns: 90px 1fr 120px 100px auto;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  transition: background 0.12s;
}
.agenda-item:hover { background: var(--surface-hover); }
.agenda-item.atrasado { border-left: 3px solid var(--danger); }
.agenda-item.pagado { border-left: 3px solid var(--success); opacity: 0.75; }
.agenda-item.pendiente { border-left: 3px solid var(--warning); }

.agenda-fecha { font-size: 13px; font-weight: 600; }
.agenda-inquilino { font-weight: 600; font-size: 13px; }
.agenda-prop { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.agenda-monto { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; text-align: right; }
.agenda-estado-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.agenda-estado-badge.pendiente { background: var(--warning-bg); color: var(--warning); }
.agenda-estado-badge.pagado { background: var(--success-bg); color: var(--success); }
.agenda-estado-badge.atrasado { background: var(--danger-bg); color: var(--danger); }
.agenda-estado-badge.activo { background: var(--success-bg); color: var(--success); }
.agenda-estado-badge.finalizado { background: var(--surface-2); color: var(--text-muted); }
.agenda-estado-badge.rescindido { background: var(--danger-bg); color: var(--danger); }

/* ── Contratos grid (cards) ── */
.contratos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px; padding: 4px 0;
}
.contrato-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
  box-shadow: var(--shadow-sm);
}
.contrato-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  border-color: var(--border-strong);
}
.contrato-card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.contrato-card-name {
  font-weight: 700; font-size: 15px; color: var(--text);
  line-height: 1.3;
}
.contrato-card-prop {
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.4;
}
.contrato-card-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 14px;
}
.contrato-meta-item {
  display: flex; flex-direction: column; gap: 2px;
}
.contrato-meta-label {
  font-size: 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.contrato-meta-val {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.venc-urgent .contrato-meta-val { color: var(--danger); }
.venc-warn   .contrato-meta-val { color: var(--warning); }
.days-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  background: var(--warning-bg); color: var(--warning);
  margin-left: 4px; vertical-align: middle;
}
.venc-urgent .days-badge { background: var(--danger-bg); color: var(--danger); }
.contrato-card-actions {
  display: flex;
  flex-wrap: wrap;            /* permite que los botones bajen si no caben */
  align-items: center;
  gap: 6px;                   /* gap más chico para que entren más botones */
  padding-top: 12px;
  border-top: 1px solid var(--border);
  width: 100%;
  min-width: 0;
}
.contrato-card-actions .btn-card-action {
  flex-shrink: 0;
  min-width: 0;
  font-size: 12px;            /* ligeramente más chico para optimizar espacio */
  padding: 5px 9px;
}
.contrato-wa-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(37,211,102,0.1);
  color: #25D366;
  text-decoration: none;
  transition: background 0.15s;
  flex-shrink: 0;
}
.contrato-wa-link:hover { background: rgba(37,211,102,0.22); }
body.light .contrato-card { box-shadow: 0 2px 10px rgba(28,39,68,0.08); }
body.light .contrato-card:hover { box-shadow: 0 6px 20px rgba(28,39,68,0.14); }
.agenda-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.agenda-wa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  color: #25D366;
  background: rgba(37,211,102,0.08);
  border: 1px solid rgba(37,211,102,0.2);
  transition: background 0.12s;
  text-decoration: none;
}
.agenda-wa-btn:hover { background: rgba(37,211,102,0.18); }

/* Recibo duplicado */
.recibo-duplicado {
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.recibo-half {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 8px;
}
.recibo-corte {
  border-top: 2px dashed #aaa;
  text-align: center;
  color: #aaa;
  font-size: 10px;
  padding: 4px 0;
  margin: 4px 0;
  letter-spacing: 0.2em;
}

/* Estado badge en contratos */
.estado-activo    { background: var(--success-bg); color: var(--success); }
.estado-finalizado { background: var(--info-bg); color: var(--info); }
.estado-rescindido { background: var(--danger-bg); color: var(--danger); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .topbar { padding: 0 12px; }
  .main { padding: 16px; }
}

/* ============================================================
   LIGHT MODE — overrides detallados (blanco + navy accent)
   ============================================================ */

/* Layout base */
body.light .main { background: #FFFFFF; }
body.light .app { background: #FFFFFF; }

/* Inputs */
body.light input, body.light select, body.light textarea {
  background: #FFFFFF;
  color: #06091A;
  border-color: rgba(28, 39, 68, 0.22);
}
body.light input::placeholder, body.light textarea::placeholder { color: #8A95B0; }
body.light input:focus, body.light select:focus, body.light textarea:focus {
  background: #FFFFFF;
  border-color: #1C2744;
  box-shadow: 0 0 0 3px rgba(28,39,68,0.1);
}
body.light select option { background: #fff; color: #06091A; }

/* Botones en light mode: primary mantiene lime, secondary usa navy outline */
body.light .btn-secondary {
  background: #FFFFFF;
  color: #1C2744;
  border-color: rgba(28,39,68,0.25);
}
body.light .btn-secondary:hover { background: #F0F3FC; border-color: #1C2744; }
body.light .btn-ghost {
  background: transparent;
  color: #1C2744;
  border-color: rgba(28,39,68,0.22);
}
body.light .btn-ghost:hover { background: #F0F3FC; }
body.light .btn-link { color: #1C2744; }
body.light .btn-link:hover { background: #F0F3FC; }

/* Cards y superficies */
body.light .kanban-card,
body.light .match-result,
body.light .agenda-item,
body.light .property-card,
body.light .modal-card,
body.light .dash-panel,
body.light .kpi-card,
body.light .config-panel,
body.light .auth-card {
  background: #FFFFFF;
  border-color: rgba(28,39,68,0.12);
  color: #06091A;
}
body.light .dash-panel { box-shadow: 0 2px 12px rgba(28,39,68,0.08); }
body.light .kpi-card { box-shadow: 0 2px 12px rgba(28,39,68,0.08); }
body.light .property-card { box-shadow: 0 2px 12px rgba(28,39,68,0.08); border-color: rgba(28,39,68,0.1); }
body.light .property-card:hover { box-shadow: 0 8px 32px rgba(28,39,68,0.16); border-color: rgba(28,39,68,0.25); }
body.light .kanban-card { box-shadow: 0 1px 6px rgba(28,39,68,0.07); }
body.light .kanban-card:hover { box-shadow: 0 4px 16px rgba(28,39,68,0.13); }
body.light .contact-card { box-shadow: 0 2px 10px rgba(28,39,68,0.07); }
body.light .btn-card-action { background: #F4F7FE; border-color: rgba(28,39,68,0.12); color: #3A4568; }
body.light .btn-card-action:hover { background: #E8EDF8; border-color: rgba(28,39,68,0.22); color: #06091A; }
body.light .btn-card-primary { background: var(--lime); color: var(--navy-deep); border-color: var(--lime); }
body.light .btn-card-primary:hover { background: var(--lime-dark); }

/* Sidebar y navbar de kanban */
body.light .kanban-col { background: #F4F7FE; border-color: rgba(28,39,68,0.1); }
body.light .kanban-col-header { border-color: rgba(28,39,68,0.1); }
body.light .nav-btn:hover { background: rgba(28,39,68,0.06); }
body.light .notif-panel { background: #FFFFFF; border-color: rgba(28,39,68,0.14); }
body.light .notif-item { border-color: rgba(28,39,68,0.08); }
body.light .notif-panel-header { border-color: rgba(28,39,68,0.1); }

/* Texto */
body.light h1, body.light h2, body.light h3, body.light h4 { color: #06091A; }
body.light .kanban-card-meta span,
body.light .muted,
body.light .user-info { color: #3A4568; }
body.light .kanban-card-footer { color: #6A759A; }
body.light .kpi-label { color: #3A4568; }
body.light .kpi-trend { color: #6A759A; }
body.light .kpi-value { color: #06091A; }
body.light .dash-role-label { color: #3A4568; }
body.light .dash-role-label.owner { background: rgba(28,39,68,0.07); color: #1C2744; }
body.light .dash-role-label.agent { background: rgba(200,255,0,0.15); color: #3A6600; }
body.light .agenda-monto { color: #06091A; }
body.light .match-result-title { color: #06091A; }
body.light .match-result-meta { color: #3A4568; }
body.light .preview-label { color: #6A759A; }
body.light .preview-value { color: #06091A; }

/* Badges y tablas */
body.light .badge { background: rgba(28,39,68,0.08); color: #06091A; }
body.light .kanban-col-count { background: #E8EDF8; color: #1C2744; }
body.light .data-table th { background: #EEF1FB; color: #06091A; }
body.light .data-table td { color: #06091A; }
body.light .data-table tr:hover td { background: #F0F4FD; }
/* topbar-clock: en light la barra es blanca → tinta navy */
body.light .topbar-clock { color: var(--text-muted); }
body.light .version-badge { background: rgba(200,255,0,0.22); color: #1C2744; }

/* Tabs auth */
body.light .auth-tabs { background: #F0F3FC; }
body.light .tab-btn { color: #3A4568; }
body.light .tab-btn.active { background: #1C2744; color: #C8FF00; }
body.light .invite-info { background: #F4F7FE; color: #06091A; }

/* Toast en light */
body.light .toast { box-shadow: 0 4px 20px rgba(28,39,68,0.2); }

/* ICL banner en agenda */
body.light .icl-banner { background: rgba(251,191,36,0.12); color: #8A5C00; border-color: rgba(251,191,36,0.3); }

/* Docs section */
body.light .doc-item { background: #F4F7FE; border-color: rgba(28,39,68,0.1); }
body.light .doc-name { color: #1C2744; }

/* Rental kpis */
body.light .rental-kpi-value { color: #06091A; }
body.light .rental-kpi-label { color: #3A4568; }

/* Footer: en light también lo dejamos navy con texto blanco — es franja decorativa */
body.light .app-footer { background: #1C2744; border-color: rgba(28,39,68,0.2); }

/* ============================================================
   LIGHT MODE — Contraste: nada de lima sobre blanco como texto
   Cambios sistemáticos para que cualquier "texto lima" sobre un
   contenedor blanco pase a tinta navy fuerte. El lima queda solo
   como FONDO de botones/badges (con texto navy encima).
   ============================================================ */
body.light .kpi-trend strong,
body.light .kpi-trend,
body.light .filter-chip.active,
body.light .stage-progress-value,
body.light .form-section-title,
body.light .config-panel h3 i[data-lucide],
body.light .ayuda-card-title i[data-lucide],
body.light .nav-icon,
body.light .icon-lime,
body.light .text-lime,
body.light .val-lime,
body.light .agenda-kpi-value.ok,
body.light .historial-section-title svg,
body.light .historial-section-title i {
  color: var(--navy-deep) !important;
}
/* Iconos lima inline (style="color:var(--lime)") sobre paneles blancos en light:
   los neutralizamos vía override semántico — los headers de cards/sections
   muestran su icono en navy en vez de lima para que el ojo lea el titular antes
   que el accent. */
body.light .config-panel h3 i,
body.light .config-panel h4 i,
body.light .contract-section-title i,
body.light .ayuda-card-title i {
  color: var(--navy-deep) !important;
}
/* WhatsApp / acentos lima de hover en cards: usar lima-oscuro para que no
   desaparezcan visualmente sobre blanco */
body.light .kanban-wa-btn:hover,
body.light .agenda-wa-btn:hover {
  color: var(--lime-dark);
  background: rgba(168, 220, 0, 0.18);
  border-color: var(--lime-dark);
}
/* Badge "version" del topbar y similares: en light el lima de fondo necesita
   más opacidad para no parecer un manchón translúcido */
body.light .nav-badge-hoy {
  background: var(--lime-dark);
  color: var(--navy-deep);
}
/* SVG de Lucide en headers de modales/paneles: heredan el color del padre,
   y muchos padres lo setean a var(--lime) inline. En light, los volcamos a
   navy-deep para que se lean sobre fondo blanco. */
body.light .modal-card h3 svg,
body.light .modal-card h4 svg,
body.light .ayuda-card h2 svg,
body.light .config-panel h3 svg,
body.light .config-panel h4 svg,
body.light .contract-section-title svg,
body.light .form-subsection-title svg {
  color: var(--navy-deep) !important;
  stroke: var(--navy-deep) !important;
}
/* El "EO" de LINKEO en topbar light ya está en lime-dark; en auth-card también */
body.light .auth-card .brand-eo,
body.light .auth-card .brand-sep { color: var(--lime-dark); }

/* ============================================================
   LIGHT MODE — Override TOTAL de contraste lima/blanco
   Regla:
     · Lima como FONDO → texto navy-deep (nunca blanco)
     · Lima como TEXTO sobre superficie clara → cambiar a navy-deep
       o lima-dark (según sea texto importante o solo acento)
   ============================================================ */

/* 1) Cualquier wordmark "EO" del brand en light → lima-dark */
body.light .brand-eo { color: var(--lime-dark) !important; }
body.light .brand-sep { color: var(--lime-dark) !important; opacity: 0.55; }

/* 2) Texto/ícono lima genérico sobre superficies claras → navy */
body.light .kpi-trend,
body.light .kpi-trend strong,
body.light .dash-trend,
body.light .stage-label-active,
body.light .stage-progress-value,
body.light .stage-arrow,
body.light .filter-chip.active,
body.light .matching-stat-value,
body.light .matching-tab.active,
body.light .matching-pill,
body.light .property-card-feature i,
body.light .kpi-value-accent,
body.light .agenda-kpi.ok .agenda-kpi-value,
body.light .agenda-kpi.icl .agenda-kpi-value,
body.light .historial-section-title,
body.light .historial-pct,
body.light .icl-banner-count,
body.light .nav-group-label,
body.light .table-pill-ok,
body.light .modal-tabs .tab-btn.active,
body.light .members-role-owner,
body.light .onboarding-step-num,
body.light .recibo-totales .val-lime,
body.light .recibo-info-grid .val-lime {
  color: var(--navy-deep) !important;
}

/* 3) Borders lima en hover/focus → lima-dark para que se vean */
body.light input:focus, body.light select:focus, body.light textarea:focus,
body.light .import-dropzone:hover,
body.light .auth-form input:focus {
  border-color: var(--lime-dark) !important;
  box-shadow: 0 0 0 2px rgba(168, 220, 0, 0.18) !important;
}

/* 4) Botones con fondo lima → SIEMPRE texto navy */
body.light .btn-primary,
body.light .btn-card-primary,
body.light .filter-chip.active,
body.light .member-role.owner,
body.light .property-card-tag.alquiler,
body.light .match-result.excelente .match-result-score,
body.light .badge.estado-pagado,
body.light .agenda-estado-badge.pagado,
body.light .stage-pill.active,
body.light .onboarding-dot.active,
body.light .agenda-view-btn.active,
body.light .nav-badge-hoy {
  color: var(--navy-deep) !important;
}

/* 5) Tabs con fondo navy y texto lima (como auth tabs): subimos saturación
   del lima para que se lea sobre navy oscuro. Mantenemos. */
body.light .tab-btn.active[style*="background:#1C2744"],
body.light .auth-tabs .tab-btn.active {
  background: var(--navy);
  color: var(--lime);
}

/* 6) Subtítulos / encabezados que usaban lima decorativo → cambiar a navy
   subtle para no perder jerarquía */
body.light .dash-panel-header h3,
body.light .contract-section-title,
body.light .ayuda-card-title,
body.light .form-subsection-title {
  color: var(--navy-deep);
}

/* 7) Iconos inline con color:var(--lime) → forzamos navy en light dentro de
   contextos comunes. Los iconos lima de "marca" (en topbar) se preservan
   porque ya tienen reglas más específicas arriba (brand-eo etc.). */
body.light .modal-card i[data-lucide],
body.light .modal-card svg,
body.light .ayuda-card i[data-lucide],
body.light .ayuda-card svg,
body.light .view-header h1 i[data-lucide],
body.light .view-header h1 svg,
body.light .contract-tab-section i[data-lucide],
body.light .contract-tab-section svg,
body.light .form-subsection-title i[data-lucide],
body.light .form-subsection-title svg,
body.light .agenda-view-btn svg,
body.light .historial-toolbar svg {
  color: var(--text) !important;
  stroke: currentColor !important;
}

/* 8) Excepción: dentro de un botón con fondo lima, los íconos deben ser
   navy-deep (sobre lima, no sobre blanco). */
body.light .btn-primary i[data-lucide],
body.light .btn-primary svg,
body.light .btn-card-primary i[data-lucide],
body.light .btn-card-primary svg {
  color: var(--navy-deep) !important;
  stroke: var(--navy-deep) !important;
}

/* 9) Quitamos cualquier "color: white" sobre fondo lima — debería ser navy.
   Atacamos las clases conocidas que tenían white text. */
body.light .match-result.blocked .match-result-score,
body.light .modal-close:hover,
body.light .btn-danger:hover {
  /* danger / negro mantienen white-on-color porque son rojos / dark, no lima */
  color: #FFFFFF !important;
}
/* Nota: arriba mantuvimos el contraste de los danger/dark (rojo + blanco está
   ok). Las que NO queremos blanco son sobre lima — ver punto 4. */

/* 10) Marca topbar versión-badge: en light el lima translúcido necesita
   texto navy fuerte. */
body.light .version-badge { color: var(--navy-deep); }
body.light .topbar-version { color: var(--text-faint); }

/* 11) Pipeline progress bars en dashboard light: fill lima-dark, no lima */
body.light .dash-bar-fill { background: var(--lime-dark); }
body.light .dash-trend { color: var(--navy-deep); }

/* 12) Header de columnas Kanban con accent lima → en light, accent navy */
body.light .kanban-col-header .kanban-col-title { color: var(--text); }
body.light .kanban-col[data-stage-color] { --stage-accent: var(--lime-dark); }

/* ============================================================
   KANBAN CARD — mejoras
   ============================================================ */
.kanban-card-actions-row {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  /* Por default semi-transparente; solo al hover de la card se hace evidente */
  opacity: 0.5;
  transition: opacity 0.15s;
}
.kanban-card:hover .kanban-card-actions-row { opacity: 1; }

/* Asegura que el header no se desborde: el nombre se trunca, los actions tienen ancho fijo */
.kanban-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  min-width: 0; /* permite que el flex-child se encoja */
}
.kanban-card-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-wa-btn {
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 5px;
  line-height: 1;
  transition: all 0.12s;
  color: var(--text-muted);
}
.kanban-wa-btn:hover {
  background: rgba(200, 255, 0, 0.15);
  border-color: var(--lime);
  color: var(--lime);
}
.kanban-wa-btn svg { width: 13px; height: 13px; }
.kanban-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border);
}
.kanban-updated {
  font-size: 10px; color: var(--text-faint);
  letter-spacing: 0.02em;
}
.kanban-urgencia-badge {
  font-size: 9px; font-weight: 800;
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 10px; padding: 1px 6px;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── Kanban bulk toolbar ── */
.kanban-bulk-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--navy);
  border: 1px solid var(--lime);
  border-radius: var(--radius);
  margin-bottom: 10px;
  animation: slideDown 0.15s ease;
}
@keyframes slideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.bulk-count { font-weight: 700; font-size: 13px; color: var(--lime); min-width: 110px; }
.bulk-actions { display: flex; gap: 8px; flex: 1; }
.bulk-select {
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); border-radius: var(--radius-sm);
  font-size: 13px; padding: 6px 10px; cursor: pointer;
}
/* ── Kanban card checkbox ── */
.kanban-check-wrap {
  display: flex; align-items: center;
  flex-shrink: 0; margin-right: 6px;
}
.kanban-check {
  width: 15px; height: 15px;
  accent-color: var(--lime);
  cursor: pointer;
}
/* Card selected state */
.kanban-card:has(.kanban-check:checked) {
  border-color: var(--lime);
  background: rgba(200,255,0,0.05);
}

/* ============================================================
   NOTIFICACIONES — bell + panel
   ============================================================ */
.notif-bell {
  position: relative;
  border: 1px solid rgba(255,255,255,0.15);
  background: none;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 16px; cursor: pointer;
  line-height: 1; transition: all 0.15s;
  color: var(--text-muted);
}
.notif-bell:hover { background: rgba(255,255,255,0.08); border-color: var(--lime); }
.notif-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 800;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  pointer-events: none;
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 340px; max-height: 480px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 9000;
  display: none; flex-direction: column;
  overflow: hidden;
}
.notif-panel.open { display: flex; }
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text);
}
.notif-panel-body {
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 0;
}
.notif-item {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.notif-item:hover { background: var(--surface-hover); }
.notif-item.notif-danger { border-left: 3px solid var(--danger); }
.notif-item.notif-warn { border-left: 3px solid var(--warning); }
.notif-item.notif-info { border-left: 3px solid var(--info); }
.notif-icon { font-size: 16px; margin-top: 1px; }
.notif-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.notif-body { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.notif-empty { padding: 24px 16px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* ============================================================
   AGENDA — toggle lista/calendario + ICL banner
   ============================================================ */
.agenda-view-toggle {
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.agenda-view-btn {
  padding: 6px 14px;
  border: none; background: transparent;
  border-radius: 4px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer; transition: all 0.12s;
}
.agenda-view-btn.active {
  background: var(--surface-2); color: var(--lime);
}
.agenda-kpi.icl .agenda-kpi-value { color: var(--info); }
.icl-banner {
  background: var(--info-bg);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 12px;
  font-size: 13px; color: var(--text);
  overflow: hidden;
}
.icl-banner-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.icl-banner-toggle:hover { background: rgba(96,165,250,0.06); }
.icl-banner-chevron {
  font-size: 11px;
  color: var(--info);
  width: 12px;
  display: inline-block;
}
.icl-banner-count {
  margin-left: auto;
  background: var(--info-bg);
  color: var(--info);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.icl-banner-body {
  padding: 0 14px 12px 30px;
  display: block;
}
.icl-banner.collapsed .icl-banner-body { display: none; }
.icl-banner.collapsed .icl-banner-toggle { padding-bottom: 10px; }
.icl-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(96,165,250,0.15);
}
.icl-banner-body .icl-item:first-child {
  margin-top: 0; padding-top: 4px; border-top: none;
}
.icl-badge {
  background: var(--info-bg); color: var(--info);
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ============================================================
   CALENDAR VIEW — grilla mensual
   ============================================================ */
.agenda-calendar { padding: 0; }
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding: 0 4px;
}
.cal-month-label {
  font-family: 'Outfit', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--text);
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 16px;
}
.cal-header-day {
  text-align: center; font-size: 10px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  padding: 4px 0; letter-spacing: 0.06em;
}
.cal-day {
  min-height: 60px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.12s;
  display: flex; flex-direction: column; gap: 4px;
}
.cal-day.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day:not(.empty):hover { background: var(--surface-hover); }
.cal-day.today { border-color: var(--lime); background: rgba(200,255,0,0.05); }
.cal-day.has-events { background: var(--surface-2); }
.cal-day-num {
  font-size: 12px; font-weight: 700; color: var(--text);
}
.cal-day.today .cal-day-num { color: var(--lime); }
.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.cal-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.cal-dot.danger { background: var(--danger); }
.cal-dot.warn { background: var(--warning); }
.cal-dot.ok { background: var(--success); }
.cal-day-detail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-top: 4px;
}
.cal-detail-header {
  font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 12px; text-transform: capitalize;
}

/* ============================================================
   DOCUMENTOS ADJUNTOS — contratos
   ============================================================ */
.contract-docs-section {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.contract-docs-section h4 { margin-bottom: 10px; color: var(--text-muted); }
.doc-list { display: flex; flex-direction: column; gap: 6px; }
.doc-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px;
}
.doc-icon { font-size: 16px; flex-shrink: 0; }
.doc-name {
  flex: 1; color: var(--info); text-decoration: none; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-name:hover { text-decoration: underline; }
.doc-date { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

/* ============================================================
   SECTION BACKGROUND IMAGES — dark mode: abstractas, overlay 82%
   background-image directo en el .view (sin pseudo-elementos)
   ============================================================ */
#view-dashboard {
  background-image:
    linear-gradient(rgba(6,9,26,0.82), rgba(6,9,26,0.82)),
    url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1920&q=40&auto=format&fit=crop');
  background-size: cover; background-position: center; background-attachment: fixed;
}
#view-contratos {
  background-image:
    linear-gradient(rgba(6,9,26,0.82), rgba(6,9,26,0.82)),
    url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1920&q=40&auto=format&fit=crop');
  background-size: cover; background-position: center; background-attachment: fixed;
}
#view-agenda {
  background-image:
    linear-gradient(rgba(6,9,26,0.82), rgba(6,9,26,0.82)),
    url('https://images.unsplash.com/photo-1506784983877-45594efa4cbe?w=1920&q=40&auto=format&fit=crop');
  background-size: cover; background-position: center; background-attachment: fixed;
}
#view-matching {
  background-image:
    linear-gradient(rgba(6,9,26,0.82), rgba(6,9,26,0.82)),
    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=40&auto=format&fit=crop');
  background-size: cover; background-position: center; background-attachment: fixed;
}
#view-properties {
  background-image:
    linear-gradient(rgba(6,9,26,0.82), rgba(6,9,26,0.82)),
    url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1920&q=40&auto=format&fit=crop');
  background-size: cover; background-position: center; background-attachment: fixed;
}
#view-leads-kanban,
#view-leads-list {
  background-image:
    linear-gradient(rgba(6,9,26,0.82), rgba(6,9,26,0.82)),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=40&auto=format&fit=crop');
  background-size: cover; background-position: center; background-attachment: fixed;
}
#view-contacts {
  background-image:
    linear-gradient(rgba(6,9,26,0.82), rgba(6,9,26,0.82)),
    url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1920&q=40&auto=format&fit=crop');
  background-size: cover; background-position: center; background-attachment: fixed;
}

/* Light mode: sin imagen, gradiente sutil desde gris muy claro */
body.light #view-dashboard,
body.light #view-contratos,
body.light #view-agenda,
body.light #view-matching,
body.light #view-properties,
body.light #view-leads-kanban,
body.light #view-leads-list,
body.light #view-contacts,
body.light #view-config {
  background-image: none;
  background: linear-gradient(180deg, #F0F4FD 0%, #FFFFFF 120px);
}

/* ============================================================
   APP FOOTER
   ============================================================ */
.app-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 26px;
  background: var(--navy-deep);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.03em;
  z-index: 50;
  user-select: none;
}
.app-footer strong { color: var(--lime); font-weight: 700; }
.app-footer a { color: rgba(255,255,255,0.5); text-decoration: none; }

/* Compensar el footer fijo en el area de contenido */
.main { padding-bottom: 44px; }

/* ========== EMPTY STATES ========== */
.empty-state-full {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 64px 24px;
  color: var(--text-faint); text-align: center;
  grid-column: 1 / -1;
}
.empty-state-full svg { opacity: 0.25; }
.empty-state-full p { font-size: 16px; font-weight: 500; color: var(--text-muted); margin: 0; }
.empty-state-full span { font-size: 13px; color: var(--text-faint); }

.empty-state-table {
  padding: 32px 24px; text-align: center;
  font-size: 14px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.btn-xs {
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm);
}

/* ========== RESPONSIVE — Tablet (sidebar compacto) ========== */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar { width: 52px; min-width: 52px; padding: 12px 6px; }
  .sidebar-section-title { display: none; }
  .nav-btn span:not(.nav-icon) { display: none; }
  .nav-btn { justify-content: center; padding: 10px; }
  .nav-icon { min-width: unset; }
}

/* ========== RESPONSIVE — Agenda + Contratos mobile ========== */
@media (max-width: 768px) {
  .main { padding: 16px 12px; }
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-clock { display: none; }
  .topbar-version { display: none; }
  .agency-name { display: none; }

  /* Contratos: tabla → cards apiladas */
  #view-contratos .table-wrap { overflow-x: auto; }
  #view-contratos .data-table { font-size: 12px; }
  #view-contratos .data-table th:nth-child(3),
  #view-contratos .data-table th:nth-child(4),
  #view-contratos .data-table td:nth-child(3),
  #view-contratos .data-table td:nth-child(4) { display: none; }

  /* Agenda: items apilados */
  .agenda-item {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 12px;
  }
  .agenda-fecha { flex: 0 0 60px; }
  .agenda-monto { flex: 0 0 100%; font-size: 15px; font-weight: 700; }
  .agenda-actions { flex: 0 0 100%; justify-content: flex-start; }

  /* View header tools en mobile */
  .view-header { flex-wrap: wrap; gap: 10px; }
  .view-tools { flex-wrap: wrap; gap: 6px; }
  .view-tools input[type="search"] { width: 100%; }

  /* KPI grid: 2 columnas en mobile */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-charts-row { grid-template-columns: 1fr; }
  .dash-bottom-row { grid-template-columns: 1fr; }
}

/* Light mode: footer mantiene navy */
body.light .app-footer {
  background: #06091A;
  border-top-color: rgba(255,255,255,0.08);
}

/* ========== MÓDULO CONTACTOS ========== */
.view-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding-top: 4px;
}

/* === Vista LISTA de contactos (default) === */
.contacts-grid.is-list {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.contacts-list-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.contacts-list-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.contacts-list-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}
.contacts-list-table tbody tr:last-child { border-bottom: none; }
.contacts-list-table tbody tr:hover { background: var(--bg); }
.contacts-list-table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
  color: var(--text);
}
.contacts-list-table .contact-name-cell { display: flex; align-items: center; gap: 10px; }
.contacts-list-table .contact-name-cell .contact-avatar {
  width: 30px; height: 30px; font-size: 11px; flex-shrink: 0;
}
.contacts-list-table .contact-name-text { font-weight: 600; }
.contacts-list-table .col-actions { text-align: right; white-space: nowrap; }
.contacts-list-table .col-actions .btn-icon { padding: 4px 7px; }
.contacts-list-table .col-actions .btn-icon-danger:hover { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
.contacts-list-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.contacts-list-table .contact-badge-mini {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  background: var(--bg); font-size: 11px; color: var(--text-muted);
  border: 1px solid var(--border);
}

/* === Toggle Grid / Lista === */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.view-toggle-btn {
  background: transparent;
  border: 0;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.view-toggle-btn:hover { color: var(--text); background: var(--bg); }
.view-toggle-btn.is-active {
  background: var(--lime);
  color: var(--navy-deep);
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border); }

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 14px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-card:hover {
  border-color: var(--lime);
  box-shadow: 0 4px 18px rgba(200,255,0,0.08);
  transform: translateY(-1px);
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-avatar {
  width: 42px; height: 42px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.02em;
}

.contact-card-info { flex: 1; min-width: 0; }
.contact-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.contact-card-search {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  line-height: 1.45;
}

.contact-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.contact-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 9px;
}

.contact-wa-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  color: #25D366;
  text-decoration: none;
  background: rgba(37,211,102,0.08);
  border: 1px solid rgba(37,211,102,0.22);
  border-radius: 20px;
  padding: 4px 10px;
  transition: background 0.15s;
}
.contact-wa-btn:hover { background: rgba(37,211,102,0.16); }

/* Modal contacto */
.contact-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.contact-modal-avatar {
  width: 56px; height: 56px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 20px; font-weight: 700;
  color: var(--lime);
}
.contact-modal-header h2 { margin: 0; font-size: 20px; }
.contact-modal-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

.contact-notes-list, .contact-leads-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.contact-note-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.contact-note-content {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.contact-note-date {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
}

.contact-lead-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.contact-lead-item:hover { border-color: var(--lime); }
.contact-lead-name { font-size: 14px; font-weight: 600; color: var(--text); }
.contact-lead-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* Empty states */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 60px 24px;
  color: var(--text-faint); text-align: center;
}
.empty-state svg { opacity: 0.35; }
.empty-state p { font-size: 16px; font-weight: 500; color: var(--text-muted); margin: 0; }
.empty-state span { font-size: 13px; }
.empty-small {
  text-align: center; padding: 24px;
  font-size: 13px; color: var(--text-faint);
}

/* modal-medium */
.modal-medium { max-width: 560px; }

/* Light mode overrides */
body.light .contact-avatar,
body.light .contact-modal-avatar {
  background: linear-gradient(135deg, var(--bg-2), #2d3f6e);
}

/* ====== v1.6.0 — UX SPRINT ====== */

/* --- Topbar center search --- */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-center { display: flex; justify-content: center; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.global-search-wrap {
  position: relative;
  width: min(480px, 100%);
}
.global-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.global-search-input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.global-search-input:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(200,255,0,0.12);
}
.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 1000;
  display: none;
  max-height: 400px;
  overflow-y: auto;
}
.global-search-results.visible { display: block; }
.search-group-label {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}
.search-result-item:hover { background: var(--hover); }
.search-result-icon { color: var(--text-muted); flex-shrink: 0; }
.search-result-name { font-size: 13px; font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.search-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* --- Nav group (Leads consolidado) --- */
.nav-group { position: relative; }
.nav-group-trigger {
  display: flex;
  align-items: center;
  width: 100%;
}
.nav-group-label { flex: 1; }
.nav-group-toggle {
  display: flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--text-muted);
}
.nav-group-toggle:hover { background: var(--hover); }
.nav-sub {
  display: none;
  padding-left: 28px;
  margin-bottom: 2px;
}
.nav-sub.open { display: block; }
.nav-sub-btn {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-muted);
  border-radius: 6px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-sub-btn:hover { background: var(--hover); color: var(--text); }
.nav-sub-btn.active { color: var(--lime); font-weight: 600; }

/* --- Property modal tabs --- */
#modal-prop-tabs { margin-bottom: 16px; }
.modal-tab { display: none; }
.modal-tab.active { display: block; }

/* --- Media upload section (property) --- */
.media-upload-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 4px 0;
}
.media-upload-block h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-helper-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--hover);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.field-hint-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* --- Lead modal: secciones colapsables --- */
.lead-completitud-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--hover);
  border-radius: 10px;
}
.lead-completitud-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.lead-completitud-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease, background 0.4s ease;
  background: var(--coral);
}
.lead-completitud-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 500;
}

.form-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.form-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: var(--hover);
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s;
}
.form-section-header:hover { background: var(--border); }
.form-section-icon { color: var(--lime); display: flex; align-items: center; }
.form-section-title { flex: 1; }
.form-section-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}
.form-section-chevron { color: var(--text-muted); transition: transform 0.2s; }
.form-section-body {
  display: none;
  padding: 14px;
}
.form-section-body.open { display: block; }

/* --- Filter chips --- */
.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 0 2px;
}
.filter-chip {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.filter-chip:hover { border-color: var(--lime); color: var(--text); }
.filter-chip.active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--navy-deep, #06091A);
  font-weight: 700;
}
.filter-chip-warn { border-color: rgba(245,158,11,0.4); }
.filter-chip-warn:hover, .filter-chip-warn.active { border-color: #F59E0B; background: rgba(245,158,11,0.15); color: #F59E0B; }
.filter-chip-warn.active { background: #F59E0B; color: #000; }
.filter-chip-danger { border-color: rgba(239,68,68,0.4); }
.filter-chip-danger:hover, .filter-chip-danger.active { border-color: var(--coral); color: var(--coral); }
.filter-chip-danger.active { background: var(--coral); color: #fff; }

/* --- WA Preview modal --- */
.wa-preview-recipient {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.wa-preview-textarea {
  width: 100%;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  resize: vertical;
  font-family: inherit;
}
.wa-preview-textarea:focus {
  outline: none;
  border-color: #25D366;
}

/* --- Ayuda / Glosario --- */
.ayuda-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
}
.ayuda-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.ayuda-card-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.glosario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.glosario-item {
  background: var(--hover);
  border-radius: 10px;
  padding: 12px 14px;
}
.glosario-term {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--lime);
  margin-bottom: 4px;
}
.glosario-def {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.faq-list { display: flex; flex-direction: column; gap: 4px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.faq-item[open] { border-color: var(--lime); }
.faq-question {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hover);
  transition: background 0.15s;
  user-select: none;
}
.faq-question:hover { background: var(--border); }
.faq-question::after { content: '+'; color: var(--text-muted); font-size: 16px; font-weight: 300; }
.faq-item[open] .faq-question::after { content: '−'; color: var(--lime); }
.faq-answer {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  background: var(--surface);
}

/* --- Responsive mobile (kanban → lista) --- */
@media (max-width: 767px) {
  .topbar-center { display: none; }
  .topbar { grid-template-columns: auto auto; }
  .glosario-grid { grid-template-columns: 1fr; }
  .media-upload-section { grid-template-columns: 1fr; }
}

/* ============================================================
   v1.7.0 — Alquileres: tabs, ICL, Rendición, Cobro, Historial
   ============================================================ */

/* ── Contract modal tabs ─────────────────────────────────── */
.contract-tab-section { display: block; }
.contract-tab-section.hidden { display: none; }

.contract-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.contract-section-title svg { opacity: .6; }

/* ── Monto actual badge ──────────────────────────────────── */
.contract-monto-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(200,255,0,.08), rgba(200,255,0,.03));
  border: 1px solid rgba(200,255,0,.25);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text);
}
.monto-actual-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.contract-monto-badge strong {
  color: var(--lime);
  font-size: 15px;
  font-weight: 700;
}
.btn-icl {
  margin-left: auto;
  background: rgba(200,255,0,.12);
  color: var(--lime);
  border: 1px solid rgba(200,255,0,.3);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-icl:hover { background: rgba(200,255,0,.22); }

/* ── Garante section ─────────────────────────────────────── */
.garante-section {
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-top: 8px;
}
.garante-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) { .garante-grid { grid-template-columns: 1fr; } }

/* ── Cobrar button in cards ──────────────────────────────── */
.btn-cobrar {
  background: rgba(200,255,0,.1);
  color: var(--lime);
  border: 1px solid rgba(200,255,0,.25);
  font-weight: 600;
  transition: background .15s, transform .1s;
}
.btn-cobrar:hover {
  background: rgba(200,255,0,.2);
  transform: translateY(-1px);
}
.btn-cobrar svg { stroke: var(--lime); }

/* ── ICL modal ───────────────────────────────────────────── */
.icl-monto-display {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--hover);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 12px 0;
}
.icl-monto-block {
  flex: 1;
  text-align: center;
}
.icl-monto-block label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.icl-monto-block .icl-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
#icl-nuevo-monto .icl-val { color: var(--lime); }

/* Inputs bidireccionales del modal ICL: ambos en una grilla 1fr 1fr y con tabular nums */
#icl-porcentaje,
#icl-monto-nuevo {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#icl-monto-nuevo {
  color: var(--lime);
}
body.light #icl-monto-nuevo { color: #5A6D00; }
.icl-arrow {
  font-size: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Cobro rápido modal ──────────────────────────────────── */
.cobro-rapido-info {
  background: var(--hover);
  border-left: 3px solid var(--lime);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ── Rendición modal ─────────────────────────────────────── */
.rendicion-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.rendicion-row .form-group { flex: 1; }

/* ── Historial de pagos ──────────────────────────────────── */
.historial-section { margin-bottom: 20px; }
.historial-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.historial-updates-grid,
.historial-pagos-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.historial-update-row,
.historial-pago-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--hover);
  font-size: 12px;
  flex-wrap: wrap;
}
.historial-update-row { border-left: 3px solid var(--lime); }
.historial-pago-row.pago-ok { opacity: .7; }
.historial-pago-row.pago-atraso { border-left: 3px solid #ff5c4d; }

.historial-fecha { color: var(--text-muted); min-width: 68px; }
.historial-pct { color: var(--lime); font-weight: 700; }
.historial-monto { flex: 1; }
.historial-notas { font-size: 11px; color: var(--text-muted); font-style: italic; }
.historial-cuota-num { font-weight: 700; min-width: 28px; color: var(--text-muted); }

.badge-icl {
  background: rgba(200,255,0,.12);
  color: var(--lime);
  border: 1px solid rgba(200,255,0,.2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── Historial empty & muted ─────────────────────────────── */
.text-muted { color: var(--text-muted); font-size: 12px; }

/* ── Payment grid in agenda ──────────────────────────────── */
.contrato-card .contrato-meta-val .days-badge {
  display: inline-block;
  background: rgba(200,255,0,.15);
  color: var(--lime);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}

/* ── ICL banner actualizaciones ──────────────────────────── */
.icl-banner {
  background: var(--surface);
  border: 1px solid rgba(200,255,0,.2);
  border-left: 3px solid var(--lime);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.icl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.icl-badge {
  background: rgba(200,255,0,.1);
  color: var(--lime);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── Modal form action buttons v1.7.0 ────────────────────── */
.modal-form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.modal-form-actions .btn-ghost { font-size: 12px; }

/* ============================================================
   v1.8.0 — Tier 3: Semáforo, WA recordar, Morosidad, BCRA
   ============================================================ */

/* ── Semáforo en cards ───────────────────────────────────── */
.contrato-semaforo-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.semaforo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}
.semaforo-verde  { background: #22c55e; color: #22c55e; }
.semaforo-amarillo { background: #f59e0b; color: #f59e0b; }
.semaforo-rojo   { background: #ef4444; color: #ef4444; }
.semaforo-gris   { background: var(--text-muted); color: var(--text-muted); box-shadow: none; }

.semaforo-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.contrato-card-semaforo-rojo  { border-left: 3px solid #ef4444; }
.contrato-card-semaforo-amarillo { border-left: 3px solid #f59e0b; }
.contrato-card-semaforo-verde { border-left: 3px solid #22c55e; }
.contrato-card-semaforo-gris  { border-left: 3px solid var(--border); }

/* ── WA Recordar button ──────────────────────────────────── */
.btn-wa-recordar {
  background: rgba(37, 211, 102, .1);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, .25);
  font-weight: 600;
}
.btn-wa-recordar:hover { background: rgba(37, 211, 102, .2); }
.btn-wa-recordar svg { stroke: #25d366; }

/* ── Tab mora en agenda ──────────────────────────────────── */
.agenda-view-mora { position: relative; }
.agenda-view-mora.active,
.agenda-view-mora:not(.active):hover {
  /* hereda de .agenda-view-btn.active pero con tinte rojo */
}
.agenda-view-mora.active { background: rgba(239,68,68,.15); color: #ef4444; border-color: rgba(239,68,68,.3); }

.agenda-morosidad { padding: 4px 0; }

.mora-summary-bar {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #ef4444;
  margin-bottom: 14px;
}
.mora-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 13px;
}
.mora-empty-icon svg { stroke: #22c55e; width: 36px; height: 36px; }

.mora-table { display: flex; flex-direction: column; gap: 6px; }
.mora-table-header {
  display: grid;
  grid-template-columns: 2fr .6fr .5fr 1fr .6fr;
  gap: 8px;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.mora-row {
  display: grid;
  grid-template-columns: 2fr .6fr .5fr 1fr .6fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #ef4444;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.mora-row:hover { background: var(--hover); }
.mora-inquilino strong { display: block; font-size: 13px; }
.mora-prop { font-size: 11px; color: var(--text-muted); }
.mora-cuotas-count { display: flex; align-items: center; }
.badge-mora {
  background: rgba(239,68,68,.15);
  color: #ef4444;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
}
.mora-dias { font-size: 13px; font-weight: 700; }
.mora-media   { color: #f59e0b; }
.mora-alta    { color: #ef4444; }
.mora-critica { color: #991b1b; }
.mora-total { font-size: 13px; }
.mora-actions { display: flex; gap: 6px; justify-content: flex-end; }

@media (max-width: 640px) {
  .mora-table-header { display: none; }
  .mora-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .mora-inquilino { grid-column: 1; }
  .mora-actions { grid-column: 2; grid-row: 1/3; }
  .mora-cuotas-count, .mora-dias, .mora-total { font-size: 12px; }
}

/* ── ICL fuente BCRA ─────────────────────────────────────── */
.icl-fuente-loading { color: var(--text-muted); }
.icl-fuente-ok      { color: #22c55e; font-weight: 600; }
.icl-fuente-error   { color: #f59e0b; }

/* ═══════════════════════════════════════════════════════════
   v1.9.0 — Activity Timeline + Kanban UX
   ═══════════════════════════════════════════════════════════ */

/* ── Activity tab container ─────────────────────────────── */
#activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.activity-loading {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.activity-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Log panel ───────────────────────────────────────────── */
.activity-log-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 14px 16px;
  margin: 16px 20px 12px;
}
.activity-log-types {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.activity-type-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.activity-type-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.activity-type-btn.active {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--text);
}
.activity-type-icon {
  display: flex;
  align-items: center;
}
.activity-log-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg, var(--bg));
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  resize: vertical;
  font-family: inherit;
  transition: border-color .15s;
}
.activity-log-textarea:focus {
  outline: none;
  border-color: var(--lime);
}
.activity-log-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ── Pending tasks (scheduled follow-ups) ───────────────── */
.activity-tasks-pending {
  margin: 0 20px 12px;
  border: 1px solid rgba(200,255,0,.2);
  border-radius: 8px;
  background: rgba(200,255,0,.04);
  padding: 10px 14px;
}
.activity-tasks-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lime);
  margin-bottom: 8px;
}
.activity-task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.activity-task-item:last-child { border-bottom: none; }
.activity-task-body { flex: 1; }
.activity-task-due {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.activity-task-done {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #22c55e;
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  transition: background .15s;
}
.activity-task-done:hover { background: rgba(34,197,94,.15); }

/* ── Timeline list ───────────────────────────────────────── */
.activity-timeline-list {
  position: relative;
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.activity-tl-item {
  display: grid;
  grid-template-columns: 28px 2px 1fr;
  gap: 0 10px;
  margin-bottom: 4px;
}
.activity-tl-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.activity-tl-line {
  grid-column: 1;
  grid-row: 2;
  width: 2px;
  background: var(--border);
  margin: 0 auto;
  min-height: 16px;
}
.activity-tl-item:last-child .activity-tl-line { display: none; }
.activity-tl-body {
  grid-column: 3;
  grid-row: 1;
  padding: 4px 0 16px;
}
.activity-tl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.activity-tl-kind {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.activity-tl-agent {
  font-size: 11px;
  color: var(--text-muted);
}
.activity-tl-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}
.activity-tl-note {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  white-space: pre-line;
}

/* ── Kanban filter bar ───────────────────────────────────── */
.kanban-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 6px;
  flex-wrap: wrap;
}
.kanban-filter-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.kanban-filter-select {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s;
}
.kanban-filter-select:focus {
  outline: none;
  border-color: var(--lime);
}
.kanban-filter-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #f59e0b;
  border-radius: 20px;
  background: rgba(245,158,11,.1);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.kanban-filter-badge:hover { background: rgba(245,158,11,.2); }

/* Compact toggle button */
.kanban-compact-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.kanban-compact-toggle:hover,
.kanban-compact-toggle.active {
  background: var(--lime);
  color: #000;
  border-color: var(--lime);
}

/* ── Kanban URGENTE swimlane ─────────────────────────────── */
.kanban-swimlane-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #ef4444;
  padding: 2px 6px 4px;
  border-bottom: 1px dashed rgba(239,68,68,.3);
  margin-bottom: 4px;
}
.kanban-swimlane-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* ── Days-without-contact dot ────────────────────────────── */
.kanban-footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.kanban-days-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  cursor: default;
}
.days-dot-ok {
  background: rgba(34,197,94,.15);
  color: #22c55e;
}
.days-dot-warn {
  background: rgba(245,158,11,.15);
  color: #f59e0b;
}
.days-dot-cold {
  background: rgba(239,68,68,.12);
  color: #ef4444;
}

/* ── Compact kanban mode ─────────────────────────────────── */
.kanban-board.kanban-compact .kanban-card {
  padding: 7px 10px;
}
.kanban-board.kanban-compact .kanban-card-meta,
.kanban-board.kanban-compact .kanban-card-loss {
  display: none;
}
.kanban-board.kanban-compact .kanban-card-name {
  font-size: 12px;
}
.kanban-board.kanban-compact .kanban-card-footer {
  padding-top: 4px;
}
.kanban-board.kanban-compact .kanban-updated {
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════
   v1.10.0 — Google Calendar + Vista Hoy + Property match badge
   ═══════════════════════════════════════════════════════════ */

/* ── Nav badge Hoy ───────────────────────────────────────── */
.nav-badge-hoy {
  background: #ef4444;
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: auto;
  line-height: 1.4;
}

/* ── Google Calendar connection UI ───────────────────────── */
.gcal-config-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gcal-config-connect-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gcal-config-status {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.gcal-config-status.gcal-ok { color: #22c55e; font-weight: 600; }
.gcal-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid currentColor;
}
.gcal-badge-ok { color: #22c55e; }
.btn-gcal-connect {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #4285f4;
  border-radius: 8px;
  background: transparent;
  color: #4285f4;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.btn-gcal-connect:hover { background: rgba(66,133,244,.1); }

/* ── Vista Hoy ───────────────────────────────────────────── */
.hoy-loading {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.hoy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 0 40px;
  align-items: start;
}
@media (max-width: 900px) { .hoy-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   MÓDULO HOY · v2 Daily Brief (mayo 2026)
   ════════════════════════════════════════════════════════════ */

/* Hero: saludo personalizado arriba de todo */
.view-hoy-v2 { padding-bottom: 24px; }
.hoy-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 8px 0 22px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.hoy-hero-greeting { min-width: 0; flex: 1; }
.hoy-hero-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--text);
}
.hoy-hero-title .hoy-hero-name { color: var(--lime); }
.hoy-hero-date {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  text-transform: capitalize;
}
.hoy-hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

/* KPIs jumbo arriba — 4 cards con acento de color */
.hoy-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
@media (max-width: 900px) { .hoy-kpis { grid-template-columns: repeat(2, 1fr); } }

.hoy-kpi {
  position: relative;
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.hoy-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.hoy-kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-accent, var(--border));
}
.hoy-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.hoy-kpi-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.7px;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hoy-kpi-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 6px;
}
/* Acentos por tipo de KPI */
.hoy-kpi--danger     { --kpi-accent: #DC2626; }
.hoy-kpi--danger     .hoy-kpi-value { color: #DC2626; }
.hoy-kpi--warn       { --kpi-accent: #F59E0B; }
.hoy-kpi--warn       .hoy-kpi-value { color: #B45309; }
body.light .hoy-kpi--warn .hoy-kpi-value { color: #B45309; }
.hoy-kpi--info       { --kpi-accent: #3B82F6; }
.hoy-kpi--info       .hoy-kpi-value { color: #1E40AF; }
body.light .hoy-kpi--info .hoy-kpi-value { color: #1E40AF; }
.hoy-kpi--success    { --kpi-accent: #16A34A; }
.hoy-kpi--success    .hoy-kpi-value { color: #166534; }
.hoy-kpi--idle       { --kpi-accent: var(--border); }

/* Secciones del Daily Brief — header con accent color + body */
.hoy-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}
.hoy-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.hoy-section-title::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--section-accent, var(--lime));
  display: inline-block;
}
.hoy-section-hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
.hoy-section-body { padding: 8px 14px 14px; }

/* Acentos por sección (incluye aliases que ya usa el JS) */
.hoy-section-urgent       { --section-accent: #DC2626; }
.hoy-section-urgent       .hoy-section-title { color: #991B1B; background: rgba(220,38,38,0.05); }
.hoy-section-today,
.hoy-section-agenda       { --section-accent: #F59E0B; }
.hoy-section-today        .hoy-section-title,
.hoy-section-agenda       .hoy-section-title { color: #92400E; background: rgba(245,158,11,0.05); }
.hoy-section-opportunity,
.hoy-section-opp          { --section-accent: #16A34A; }
.hoy-section-opportunity  .hoy-section-title,
.hoy-section-opp          .hoy-section-title { color: #166534; background: rgba(22,163,74,0.04); }
.hoy-section-backlog      { --section-accent: #6B7280; }
.hoy-section-backlog      .hoy-section-title { color: var(--text-muted); }
.hoy-section-predict      { --section-accent: var(--lime); }
.hoy-section-predict      .hoy-section-title { background: rgba(200,255,0,0.06); }

/* Snoozed visual: sección "colapsada" pero presente */
.hoy-section-snoozed { opacity: 0.55; }
.hoy-section-snoozed .hoy-section-title { background: var(--bg); }

/* La estructura vieja .hoy-grid de 2 columnas la conservamos para los subcards
   dentro de cada sección (hoy-card sigue funcionando). */
.hoy-col { display: flex; flex-direction: column; gap: 16px; }
.hoy-col-main { }

.hoy-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.hoy-card-alert { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.04); }
.hoy-card-gcal  { border-color: rgba(66,133,244,.3); }
.hoy-card-gcal-promo { border-color: rgba(66,133,244,.2); background: rgba(66,133,244,.03); padding-bottom: 16px; }

.hoy-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.hoy-card-count {
  margin-left: auto;
  background: var(--hover);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  color: var(--text-muted);
}
.hoy-empty {
  padding: 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.hoy-add-task-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-top: 1px dashed var(--border);
  color: var(--lime);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.hoy-add-task-btn:hover { background: rgba(200,255,0,.06); }

/* Task rows */
.hoy-task-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.hoy-task-row:last-of-type { border-bottom: none; }
.hoy-task-row:hover { background: var(--hover); }
.hoy-task-overdue { background: rgba(239,68,68,.04); }
.hoy-task-done-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: all .15s;
  margin-top: 1px;
}
.hoy-task-done-btn:hover { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,.1); }
.hoy-task-body { flex: 1; min-width: 0; }
.hoy-task-text { font-size: 13px; color: var(--text); line-height: 1.4; }
.hoy-task-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.hoy-task-lead-link {
  background: transparent;
  border: none;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .15s;
}
.hoy-task-lead-link:hover { text-decoration-color: currentColor; }
.hoy-date { font-size: 11px; color: var(--text-muted); }
.hoy-date-overdue { font-size: 11px; color: #ef4444; font-weight: 700; }
.hoy-date-today   { font-size: 11px; color: var(--lime); font-weight: 700; }
.hoy-quick-wa {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background .15s;
  flex-shrink: 0;
}
.hoy-quick-wa:hover { background: rgba(37,211,102,.1); }

/* Google Calendar events */
.hoy-gcal-event {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.hoy-gcal-event:last-child { border-bottom: none; }
.hoy-gcal-time  { font-size: 11px; color: #4285f4; font-weight: 700; white-space: nowrap; }
.hoy-gcal-title { flex: 1; color: var(--text); }
.hoy-gcal-loc   { font-size: 11px; color: var(--text-muted); }

/* Cobros (pagos próximos) */
.hoy-pago-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.hoy-pago-row:last-child { border-bottom: none; }
.hoy-pago-info { flex: 1; min-width: 0; }
.hoy-pago-inquilino { font-size: 13px; font-weight: 600; color: var(--text); }
.hoy-pago-meta      { font-size: 11px; color: var(--text-muted); }
.hoy-pago-right     { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hoy-pago-date      { font-size: 11px; color: var(--text-muted); }
.hoy-cobrar-btn     { padding: 4px 10px; font-size: 11px; }

/* Sin contacto rows */
.hoy-sincontacto-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.hoy-sincontacto-row:last-child { border-bottom: none; }
.hoy-sincontacto-row:hover { background: var(--hover); }
.hoy-sincontacto-row.urgente { background: rgba(239,68,68,.05); }
.hoy-sincontacto-row.urgente .hoy-sincontacto-name { color: #ef4444; }
.hoy-sincontacto-body { flex: 1; cursor: pointer; min-width: 0; }
.hoy-sincontacto-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-sincontacto-meta { font-size: 11px; color: var(--text-muted); }
.hoy-sincontacto-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

/* CTA buttons in sinContacto */
.hoy-cta-wa {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500; color: #25d366;
  background: rgba(37,211,102,.1); border-radius: 5px;
  padding: 3px 7px; text-decoration: none; border: none; cursor: pointer;
  transition: background .15s;
}
.hoy-cta-wa:hover { background: rgba(37,211,102,.2); }
.hoy-cta-call {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  background: var(--hover); border-radius: 5px;
  padding: 3px 7px; border: none; cursor: pointer;
  transition: background .15s;
}
.hoy-cta-call:hover { background: var(--border); color: var(--text); }

/* Call script mini-modal */
.callscript-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.callscript-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px; max-width: 440px; width: 90%;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.callscript-header {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; margin-bottom: 12px;
  color: var(--text);
}
.callscript-body {
  font-size: 14px; line-height: 1.6; color: var(--text);
  background: var(--hover); border-radius: 8px;
  padding: 12px 14px; margin: 0;
}

/* ── Property match badge ────────────────────────────────── */
.prop-match-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(200,255,0,.92);
  color: #06091A;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.prop-match-badge:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
/* Property card image must be position:relative for the badge */
.property-card-img { position: relative; }

/* ── Migration cards (Config panel) ─────────────────────── */
.migration-option-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color .15s;
}
.migration-option-card:hover { border-color: var(--lime); }

/* ── WA offer toast (post-PDF download) ─────────────────── */
.wa-offer-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid rgba(37, 211, 102, .3);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  font-size: 13px;
  color: var(--text);
  max-width: 420px;
  animation: toastSlideIn .25s ease;
}
.wa-offer-toast span { flex: 1; line-height: 1.4; }
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── GCal Setup Wizard ───────────────────────────────────── */
.gcal-setup-wizard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}
.gcal-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.gcal-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy-deep);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.gcal-step strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.gcal-step-link {
  display: inline-block;
  font-size: 12px;
  color: #4285f4;
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
}
.gcal-step-link:hover { text-decoration: underline; }

/* ── Config layout — unified panel widths ──────────────────
   Apilamos todos los paneles vertical y centrados con ancho uniforme.
   Esto elimina la inconsistencia del grid 2×2 cuando hay número impar
   de paneles (Datos agencia, GCal, Equipo, Migración = 4 paneles).
*/
.config-panels {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}
.config-panels > .config-panel {
  width: 100%;
  box-sizing: border-box;
}

/* ===== PDF Paleta de colores (Configuración) ===== */
.pdf-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.pdf-palette-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font: inherit;
}
.pdf-palette-card:hover {
  border-color: var(--lime);
  transform: translateY(-1px);
}
.pdf-palette-card.is-active {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.18);
  background: rgba(200, 255, 0, 0.04);
}
.pdf-palette-card__preview {
  height: 38px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.pdf-palette-card__swatch-main {
  position: absolute;
  inset: 0;
}
.pdf-palette-card__swatch-soft {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 35%;
}
.pdf-palette-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.pdf-palette-card.is-active .pdf-palette-card__name::after {
  content: " ✓";
  color: var(--lime);
  font-weight: 700;
}
.config-panels > .config-panel > h3 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.config-panels > .config-panel > h3:hover {
  color: var(--lime);
}
/* Chevron indicator — agregado por JS al cargar */
.config-panels > .config-panel > h3::after {
  content: '▾';
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.18s;
}
.config-panels > .config-panel.collapsed > h3::after {
  transform: rotate(-90deg);
}
.config-panels > .config-panel.collapsed > h3 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.config-panels > .config-panel.collapsed > *:not(h3) {
  display: none !important;
}

/* light mode adjustments */
body.light .gcal-setup-wizard {
  background: #f8f9fc;
  border-color: rgba(0,0,0,.08);
}
body.light .gcal-step-num {
  background: var(--lime-dark);
}

/* ============================================================
   COTIZADOR (Bloque 3)
   ============================================================ */
.cotizador-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px) {
  .cotizador-layout { grid-template-columns: 1fr; }
}
.cotizador-form-wrap,
.cotizador-result-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.cotizador-form-wrap form {
  display: flex; flex-direction: column; gap: 12px;
}
.cotizador-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  min-height: 320px;
  color: var(--text-muted);
  text-align: center;
}
.cotizador-empty h3 {
  margin: 0; font-size: 16px;
  color: var(--text); font-family: 'Outfit', sans-serif;
}
.cotizador-empty p { font-size: 13px; max-width: 320px; margin: 0; }

/* KPIs */
.cot-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.cot-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.cot-kpi-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.cot-kpi-value {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
}
.cot-kpi-highlight {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-color: var(--lime);
}
.cot-kpi-highlight .cot-kpi-label { color: rgba(200, 255, 0, 0.7); }
.cot-kpi-highlight .cot-kpi-value { color: var(--lime); }

/* Tabla de amortización */
.cot-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  max-height: 480px;
  overflow-y: auto;
}
.cot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cot-table thead th {
  position: sticky; top: 0;
  background: var(--bg-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
}
.cot-table th.num,
.cot-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cot-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.cot-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
.cot-table tbody tr:hover td { background: var(--surface-hover); }
.cot-table tbody td strong { color: var(--lime); font-weight: 700; }
body.light .cot-table tbody tr:nth-child(even) td { background: rgba(28, 39, 68, 0.025); }
body.light .cot-table tbody td strong { color: var(--navy-deep); }

.view-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================
   CLÁUSULAS PARTICULARES (Bloque 4)
   ============================================================ */
.contract-clausulas-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.contract-clausulas-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.contract-clausulas-header h4 {
  margin: 0; font-size: 14px; font-family: 'Outfit', sans-serif;
  font-weight: 700; color: var(--text);
}
.contract-clausulas-hint {
  font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
}
.contract-clausulas-list {
  display: flex; flex-direction: column; gap: 6px;
}
.contract-clausula-row {
  display: grid;
  grid-template-columns: 24px 1fr 28px;
  gap: 8px;
  align-items: center;
}
.contract-clausula-bullet {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--lime);
  text-align: right;
}
.contract-clausula-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.contract-clausula-input:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-glow);
}
.btn-icon-danger {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-icon-danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}
.btn-small {
  font-size: 12px;
  padding: 4px 10px;
}

/* ============================================================
   CONCEPTOS EXTRAS DEL CONTRATO (v1.13.1)
   ============================================================ */
.contract-extras-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.contract-extra-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 28px;
  gap: 8px;
  align-items: end;
}
.contract-extra-row.full-row {
  grid-template-columns: 1fr 28px;
}
.contract-extra-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.contract-extra-row input,
.contract-extra-row select {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
}
.contract-extra-row input:focus,
.contract-extra-row select:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-glow);
}
.contract-extra-quien {
  grid-column: 1 / -2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.contract-extra-quien label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  flex-direction: row;
}
.contract-extra-quien label input { width: auto; padding: 0; }
.contract-extra-quien label.checked {
  border-color: var(--lime);
  background: var(--lime-glow);
}
.contract-extra-split {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Fila v2: layout más rico (tipo fijo/porc + 2 ejes de acción + advanced) ── */
.contract-extra-row--v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
.contract-extra-row--v2 .ext-row-main {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) 130px 110px 90px 110px 28px;
  gap: 8px;
  align-items: end;
}
.contract-extra-row--v2 .ext-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.contract-extra-row--v2 .ext-col-grow { min-width: 0; }
.contract-extra-row--v2 .ext-remove { align-self: end; }
.contract-extra-row--v2 input,
.contract-extra-row--v2 select {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
}
.contract-extra-row--v2 input:focus,
.contract-extra-row--v2 select:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-glow);
}

/* ── v5: dos paneles independientes inquilino/propietario ── */
.contract-extra-row--v2 .ext-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.contract-extra-row--v2 .ext-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.18s ease;
}
.contract-extra-row--v2.ext-inmo-on .ext-panel { opacity: 0.45; }
.contract-extra-row--v2 .ext-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contract-extra-row--v2 .ext-panel--inq .ext-panel-head i { color: var(--lime); }
.contract-extra-row--v2 .ext-panel--prop .ext-panel-head i { color: var(--accent, var(--lime)); }
.contract-extra-row--v2 .ext-radio-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contract-extra-row--v2 .ext-radio-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.contract-extra-row--v2 .ext-radio-opt input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: var(--lime);
}
.contract-extra-row--v2 .ext-radio-opt.is-on {
  border-color: var(--lime);
  background: var(--lime-glow);
  color: var(--lime);
}
body.light .contract-extra-row--v2 .ext-radio-opt.is-on { color: #5A6D00; }
.contract-extra-row--v2 .ext-mod-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.contract-extra-row--v2 .ext-mod-check input[type="checkbox"] {
  width: auto; margin: 0; accent-color: var(--lime);
}

/* Fila inmobiliaria absorbe */
.contract-extra-row--v2 .ext-inmo-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.45;
}
.contract-extra-row--v2 .ext-inmo-row input[type="checkbox"] {
  width: auto; margin: 2px 0 0 0; accent-color: var(--lime);
}
.contract-extra-row--v2 .ext-inmo-row strong { color: var(--text); font-weight: 600; }

/* Bloque avanzado */
.contract-extra-row--v2 .ext-advanced {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.contract-extra-row--v2 .ext-advanced summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  user-select: none;
  padding: 2px 0;
}
.contract-extra-row--v2 .ext-advanced summary:hover { color: var(--lime); }
.contract-extra-row--v2 .ext-row-vigencia {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 10px;
  margin-top: 10px;
  align-items: end;
}
.contract-extra-row--v2 .ext-col-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.contract-extra-row--v2 .ext-period-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.contract-extra-row--v2 .ext-period-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.contract-extra-row--v2 .ext-period-opt input[type="radio"] {
  width: auto; margin: 0; accent-color: var(--lime);
}
.contract-extra-row--v2 .ext-period-opt input[type="radio"]:checked + span {
  color: var(--lime);
  font-weight: 600;
}
.contract-extra-row--v2 .ext-meses-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.contract-extra-row--v2 .ext-mes-chip {
  padding: 6px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0.02em;
  transition: all 0.12s ease;
}
.contract-extra-row--v2 .ext-mes-chip:hover { border-color: var(--lime); color: var(--text); }
.contract-extra-row--v2 .ext-mes-chip.is-on {
  background: var(--lime);
  border-color: var(--lime);
  color: #0E1413;
}
body.light .contract-extra-row--v2 .ext-mes-chip.is-on { color: #0E1413; }

@media (max-width: 768px) {
  .contract-extra-row--v2 .ext-row-main { grid-template-columns: 1fr 1fr; }
  .contract-extra-row--v2 .ext-panels { grid-template-columns: 1fr; }
  .contract-extra-row--v2 .ext-row-vigencia { grid-template-columns: 1fr 1fr; }
  .contract-extra-row--v2 .ext-row-vigencia .ext-col-grow { grid-column: 1 / -1; }
  .contract-extra-row--v2 .ext-meses-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   MODAL RECIBO (Bloque 5)
   ============================================================ */
.recibo-resumen,
.recibo-totales {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.recibo-info-grid,
.recibo-totales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.recibo-info-grid > div,
.recibo-totales-grid > div {
  display: flex; flex-direction: column; gap: 2px;
}
.recibo-info-grid .lbl,
.recibo-totales-grid .lbl {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.recibo-info-grid .val,
.recibo-totales-grid .val {
  font-size: 13.5px;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
}
.val-strong { font-weight: 700 !important; }
.val-lime   { color: var(--lime) !important; font-weight: 700 !important; }
.val-danger { color: var(--danger) !important; font-weight: 600 !important; }

.recibo-servicios-list {
  display: flex; flex-direction: column; gap: 6px;
}
.recibo-servicio-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 110px 130px 60px 28px;
  gap: 6px;
  align-items: center;
}
.recibo-servicio-row input,
.recibo-servicio-row select {
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.recibo-servicio-row input:focus,
.recibo-servicio-row select:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-glow);
}

/* ============================================================
   NOTAS LEAD (Bloque 6)
   ============================================================ */
.notes-timeline {
  max-height: 300px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.notes-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.notes-item-head {
  display: flex; justify-content: space-between;
  font-size: 11.5px; margin-bottom: 4px;
}
.notes-author {
  font-weight: 600; color: var(--text);
}
.notes-date {
  color: var(--text-muted);
}
.notes-body {
  font-size: 13.5px; color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
}
.notes-mention {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(200, 255, 0, 0.12);
  color: var(--lime);
  border-radius: 50px;
  font-weight: 600;
}
.notes-empty, .notes-loading {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 20px;
}
.notes-input-wrap {
  display: flex; gap: 8px; align-items: flex-end;
}
.notes-input-wrap textarea {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.notes-input-wrap textarea:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-glow);
}

/* ============================================================
   STAGES ADMIN (Bloque 6)
   ============================================================ */
.stages-list {
  display: flex; flex-direction: column; gap: 8px;
}
.stages-row {
  display: grid;
  grid-template-columns: 20px 36px 1fr 100px 80px 28px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.stages-handle {
  color: var(--text-faint);
  cursor: grab;
  font-size: 14px;
  user-select: none;
}
.stages-handle:active { cursor: grabbing; }
/* Estados visuales del drag (Sortable) */
.stages-row-ghost {
  opacity: 0.4;
  background: var(--bg);
}
.stages-row-chosen {
  background: var(--surface-2, var(--surface));
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.stages-color {
  width: 36px; height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: transparent;
}
.stages-label {
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.stages-label:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-glow);
}
.stages-flag {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.stages-flag input[type="checkbox"] {
  cursor: pointer;
}

/* Kanban: aplica el acento de la columna si tiene stage-accent */
.kanban-col-header[style*="--stage-accent"] {
  border-top: 3px solid var(--stage-accent);
}

/* ============================================================
   BREVO STATUS PILL (Bloque 7a)
   ============================================================ */
.brevo-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.brevo-status-ok {
  background: rgba(52, 211, 153, 0.12);
  color: var(--success);
}
.brevo-status-error {
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
}

/* ============================================================
   CAMPAÑAS (Bloque 7c)
   ============================================================ */
.campaigns-warning {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--warning);
  margin-bottom: 16px;
}
.campaigns-list {
  display: flex; flex-direction: column; gap: 8px;
}
.campaigns-empty {
  text-align: center;
  padding: 60px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.campaigns-empty h3 { font-size: 18px; margin: 14px 0 8px; }
.campaigns-empty p { color: var(--text-muted); max-width: 380px; margin: 0 auto 18px; font-size: 13px; }
.campaigns-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
}
.campaigns-row:hover {
  border-color: var(--lime);
  transform: translateY(-1px);
}
.campaign-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}
.campaign-subject {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.campaign-meta {
  display: flex; gap: 10px;
  font-size: 11.5px;
  color: var(--text-faint);
  align-items: center;
}
.campaign-audience-tag {
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 50px;
  color: var(--text-muted);
}
.campaign-stats {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px;
}
.campaign-status-pill {
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.campaign-draft     { background: rgba(141,153,174,.15); color: var(--text-muted); }
.campaign-scheduled { background: rgba(96,165,250,.15); color: var(--info); }
.campaign-sending   { background: rgba(251,191,36,.15); color: var(--warning); }
.campaign-sent      { background: rgba(52,211,153,.15); color: var(--success); }
.campaign-failed    { background: rgba(248,113,113,.15); color: var(--danger); }
.campaign-sent-info {
  font-size: 11px; color: var(--text-muted);
}
.campaigns-audience-count {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text);
}

/* HOY: cumpleaños + eventos (Bloque 7c) */
.hoy-card-birthday { border-left: 3px solid #FF6B9D; }
.hoy-card-events   { border-left: 3px solid var(--lime); }
.hoy-birthday-emoji {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px; text-align: center;
}
.hoy-birthday-edad {
  font-size: 12px; color: var(--text-muted);
  margin-left: 6px;
  font-weight: 400;
}

/* ============================================================
   AGENDA: items de evento (Bloque 8)
   ============================================================ */
.agenda-item-event {
  border-left: 3px solid var(--lime);
}
.agenda-item-event.atrasado {
  border-left-color: var(--danger);
}
.agenda-item-payment {
  border-left: 3px solid var(--info);
}
.agenda-item-payment.atrasado {
  border-left-color: var(--danger);
}
.agenda-item-payment.pagado {
  border-left-color: var(--success);
}

/* Dot lima para eventos en el calendario */
.cal-dot.event {
  background: var(--lime);
}

/* Quick-action buttons en agenda */
.agenda-actions .agenda-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(37, 211, 102, 0.1);
  color: #25d366;
  text-decoration: none;
  transition: all 0.15s ease;
}
.agenda-actions .agenda-wa-btn:hover {
  background: rgba(37, 211, 102, 0.2);
  transform: translateY(-1px);
}

/* ============================================================
   NOTAS · BANNER DE SUGERENCIA NLP (Bloque 9)
   ============================================================ */
.notes-suggestion {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(200, 255, 0, 0.08), rgba(200, 255, 0, 0.02));
  border: 1px solid rgba(200, 255, 0, 0.3);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  animation: notes-suggest-in 0.18s ease-out;
}
@keyframes notes-suggest-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.notes-suggest-body {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.notes-suggest-icon { font-size: 18px; flex-shrink: 0; }
.notes-suggest-text {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
}
.notes-suggest-text strong {
  color: var(--lime);
  font-weight: 700;
}
.notes-suggest-detail {
  color: var(--text-muted);
}
.notes-suggest-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}

/* ============================================================
   CONTRATOS · VISTA LISTA
   ============================================================ */
.contratos-list-view {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.contratos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.contratos-table thead th {
  background: var(--bg-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.contratos-table thead th.num { text-align: right; }
.contratos-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.contratos-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.contratos-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.contratos-table tbody tr:hover {
  background: var(--surface-hover);
}
.contratos-table tbody tr:last-child td { border-bottom: none; }
.contratos-table-carpeta {
  font-family: ui-monospace, 'Menlo', monospace;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.contratos-table-prop {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}
.contratos-table-date {
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-muted);
}
.contratos-table-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.contratos-table-actions .btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}
.contratos-table-actions .btn-icon:hover {
  border-color: var(--lime);
  color: var(--lime);
}

/* Botón "Generar cuotas" en card (warn = ámbar) */
.btn-card-warn {
  background: rgba(251, 191, 36, 0.12);
  border-color: var(--warning) !important;
  color: var(--warning) !important;
}
.btn-card-warn:hover {
  background: rgba(251, 191, 36, 0.2);
}

/* (Removido el segundo .agenda-view-toggle que pisaba el original de línea 2078)
   El toggle de Contratos (Cards/Lista) hereda los estilos originales — usa
   las mismas clases que el toggle de Agenda. */

/* Botón warn (ámbar) — para "Revertir cobro" y otras acciones destructivas suaves */
.btn-icon-warn,
.btn-ghost.btn-icon-warn {
  color: var(--warning) !important;
  border-color: var(--warning) !important;
  background: rgba(251, 191, 36, 0.08) !important;
}
.btn-icon-warn:hover,
.btn-ghost.btn-icon-warn:hover {
  background: rgba(251, 191, 36, 0.18) !important;
}

.import-summary-item.warn {
  background: rgba(251, 191, 36, 0.12);
  color: var(--warning);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   CONTRATOS · v2 (Path B · mayo 2026)
   KPIs hero + agrupación por urgencia + tabla 6 col + dropdown acciones
   ════════════════════════════════════════════════════════════ */

/* Subtítulo del header (contexto global) */
.view-contratos-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* KPIs hero — 4 cards operativas clickeables (sobrio, acento solo en borde sup) */
.contratos-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 900px) { .contratos-kpis { grid-template-columns: repeat(2, 1fr); } }

.contratos-kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: border-color 0.12s;
  overflow: hidden;
  text-align: left;
  font: inherit;
}
.contratos-kpi:hover { border-color: var(--border-strong, var(--text-muted2, #5C667D)); }
.contratos-kpi.is-active {
  border-color: var(--lime);
}
.contratos-kpi::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 2px; height: 100%;
  background: var(--ckpi-accent, transparent);
}
.contratos-kpi-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-muted); margin-bottom: 6px;
}
.contratos-kpi-value {
  font-size: 19pt; font-weight: 700; letter-spacing: -0.4px;
  line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.contratos-kpi-sub {
  font-size: 11px; color: var(--text-muted); margin-top: 6px;
}
/* Acentos discretos: solo barra lateral fina de 2px. Idle = sin barra. */
.contratos-kpi--danger  { --ckpi-accent: rgba(220, 38, 38, 0.7); }
.contratos-kpi--warn    { --ckpi-accent: rgba(245, 158, 11, 0.7); }
.contratos-kpi--info    { --ckpi-accent: rgba(59, 130, 246, 0.6); }
.contratos-kpi--success { --ckpi-accent: rgba(200, 255, 0, 0.6); }
.contratos-kpi--idle    { --ckpi-accent: transparent; }

/* Secciones agrupadas por urgencia (header neutro, solo barra lateral coloreada) */
.contratos-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.contratos-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
  background: transparent;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.contratos-section-title::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px;
  background: var(--cs-accent, var(--text-muted));
}
.contratos-section-count {
  margin-left: auto;
  font-size: 11px; font-weight: 400;
  color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}
.contratos-section-toggle {
  font-size: 10px; color: var(--text-muted);
  transition: transform 0.2s;
}
.contratos-section.collapsed .contratos-section-toggle { transform: rotate(-90deg); }
.contratos-section.collapsed .contratos-table { display: none; }

/* Acentos por sección (solo en barra lateral, sin tinted en el header) */
.contratos-section--urgent  { --cs-accent: rgba(220, 38, 38, 0.7); }
.contratos-section--soon    { --cs-accent: rgba(245, 158, 11, 0.7); }
.contratos-section--ok      { --cs-accent: rgba(200, 255, 0, 0.5); }
.contratos-section--archive { --cs-accent: var(--border); }

/* Sin borde lateral coloreado en filas — se mantiene neutro */
.contratos-table tbody tr.row-rojo     td:first-child,
.contratos-table tbody tr.row-amarillo td:first-child,
.contratos-table tbody tr.row-verde    td:first-child,
.contratos-table tbody tr.row-gris     td:first-child { border-left: 0; }

/* Pills de estado — muy sutiles, sin fondos saturados */
.estado-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.estado-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.estado-pill.estado-rojo     .dot { background: #DC2626; }
.estado-pill.estado-rojo     { color: var(--text); }
.estado-pill.estado-amarillo .dot { background: #F59E0B; }
.estado-pill.estado-amarillo { color: var(--text); }
.estado-pill.estado-verde    .dot { background: var(--lime); }
.estado-pill.estado-verde    { color: var(--text-muted); }
.estado-pill.estado-gris     .dot { background: #6B7280; }
.estado-pill.estado-gris     { color: var(--text-muted); opacity: 0.7; }

/* Inquilino cell con DNI/tel debajo + badge renovación */
.tc-inquilino { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tc-inquilino-name { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tc-inquilino-extra { font-size: 11px; color: var(--text-muted); }
.badge-renov {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(200, 255, 0, 0.1);
  color: var(--lime);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.badge-renov:hover { background: rgba(200, 255, 0, 0.2); }
.badge-renov-finalizado { background: rgba(107,114,128,0.2); color: var(--text-muted); }

.tc-prop { display: flex; flex-direction: column; gap: 2px; max-width: 240px; }
.tc-prop-extra { font-size: 11px; color: var(--text-muted); }
.tc-monto-sub { font-size: 11px; color: var(--text-muted); }
.tc-monto-extras {
  font-size: 11px; font-weight: 600;
  color: var(--lime, #C8FF00);
  background: rgba(200,255,0,0.08);
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
body.light .tc-monto-extras { color: #5A6D00; background: rgba(200,255,0,0.18); }

/* En la card mobile, badge de extras debajo del monto */
.contrato-meta-extras {
  display: block;
  font-size: 10.5px; font-weight: 600;
  color: var(--lime, #C8FF00);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
body.light .contrato-meta-extras { color: #5A6D00; }

/* Pill que muestra los totales de extras en el header del card detail */
.ctd-extras-total-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200,255,0,0.08);
  color: var(--lime, #C8FF00);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.light .ctd-extras-total-pill { color: #5A6D00; background: rgba(200,255,0,0.18); }

/* ── Checklist multi-cuota en modal recibo ── */
.recibo-pagos-checklist {
  font-size: 13px;
}
.recibo-pago-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease;
}
.recibo-pago-row:last-child { border-bottom: none; }
.recibo-pago-row:hover { background: rgba(200,255,0,0.05); }
.recibo-pago-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; cursor: pointer; }
.recibo-pago-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.recibo-pago-titulo { color: var(--text); font-weight: 500; font-size: 12.5px; }
.recibo-pago-est {
  display: inline-block; width: fit-content;
  padding: 1px 6px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600;
}
.recibo-pago-est.est-pagado    { background: rgba(34,197,94,0.15); color: #15803D; }
.recibo-pago-est.est-pendiente { background: rgba(245,158,11,0.15); color: #B45309; }
.recibo-pago-est.est-atrasado  { background: rgba(220,38,38,0.18); color: #DC2626; }
.recibo-pago-est.est-anulado   { background: rgba(107,114,128,0.15); color: var(--text-muted); }
.recibo-pago-monto {
  color: var(--text); font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}

.tc-proxpago { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.tc-proxpago-days {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600;
  background: rgba(255,255,255,0.04); color: var(--text-muted);
  width: fit-content;
}
.tc-proxpago-days.urgent { background: rgba(220,38,38,0.2); color: #DC2626; }
.tc-proxpago-days.warn   { background: rgba(245,158,11,0.2); color: #B45309; }

/* Acciones reorganizadas (Cobrar primaria · WA · Recibo · dropdown) */
.tc-actions {
  display: flex; gap: 5px; justify-content: flex-end; align-items: center;
}
.tc-actions .btn-action {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; background: transparent; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); cursor: pointer; font-size: 11.5px;
  font-weight: 500; white-space: nowrap;
}
.tc-actions .btn-action:hover { background: rgba(200,255,0,0.08); border-color: var(--lime); color: var(--lime); }
.tc-actions .btn-action--primary { background: var(--lime); color: var(--navy-deep, #06091A); border-color: var(--lime); font-weight: 600; }
.tc-actions .btn-action--primary:hover { background: var(--lime-dark, #A8DC00); }
.tc-actions .btn-action--icon { padding: 5px 8px; }

/* Dropdown "Más" (reutilizamos el patrón de hoy-bulk-dropdown) */
.tc-more { position: relative; display: inline-block; }
.tc-more-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  min-width: 200px;
  z-index: 50;
  padding: 4px;
}
.tc-more-menu.show { display: block; }
.tc-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 4px;
}
.tc-more-menu button:hover { background: var(--bg); }
.tc-more-menu button.danger { color: #DC2626; }
.tc-more-menu button.danger:hover { background: rgba(220,38,38,0.08); }
.tc-more-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* "Ver todos +N" en sección con clamp */
.tc-clamp-row td {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 12px;
  cursor: default !important;
}
.tc-clamp-row:hover { background: transparent !important; }
.tc-clamp-row a { color: var(--lime); text-decoration: none; }
.tc-clamp-row a:hover { text-decoration: underline; }

/* Chip count (número entre paréntesis) */
.filter-chip .chip-count {
  background: rgba(255,255,255,0.08);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  margin-left: 4px;
}
.filter-chip.active .chip-count {
  background: rgba(6,9,26,0.18);
}

/* ════════════════════════════════════════════════════════════
   CONTRATO · DETALLE (Path C · página dedicada · mayo 2026)
   ════════════════════════════════════════════════════════════ */

#view-contrato-detalle { padding: 0; }

/* Breadcrumb */
.ctd-breadcrumb {
  padding: 14px 0 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.ctd-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}
.ctd-breadcrumb a:hover { color: var(--lime); }
.ctd-breadcrumb span { color: var(--text); margin-left: 4px; }

/* Header sticky */
.ctd-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.ctd-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.ctd-header-info {
  display: flex; align-items: center; gap: 16px;
  min-width: 0; flex: 1;
}
.ctd-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(200,255,0,0.08);
  color: var(--lime);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px;
  border: 1px solid rgba(200,255,0,0.2);
  flex-shrink: 0;
}
.ctd-titles { min-width: 0; flex: 1; }
.ctd-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.ctd-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
}
.ctd-actions {
  display: flex; gap: 6px; flex-shrink: 0;
  position: relative;
}

/* Stats inline */
.ctd-stats {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.ctd-stat {
  display: flex; flex-direction: column; gap: 2px;
}
.ctd-stat-label {
  font-size: 10.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.ctd-stat-val {
  font-size: 14px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ctd-stat-val small { color: var(--text-muted); font-weight: 400; font-size: 11.5px; }

/* Body 2 columnas */
.ctd-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 22px;
  padding-bottom: 60px;
}
@media (max-width: 1100px) { .ctd-body { grid-template-columns: 1fr; } }

/* Cards de datos */
.ctd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
}
.ctd-card-header {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted);
}
.ctd-card-header-action {
  margin-left: auto;
  font-size: 11px; font-weight: 500;
  color: var(--lime);
  cursor: pointer;
  background: transparent; border: 0;
  text-transform: none; letter-spacing: 0;
  padding: 4px 8px;
}
.ctd-card-header-action:hover { text-decoration: underline; }
.ctd-card-body { padding: 14px 16px; }

.ctd-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 8px;
  font-size: 13px;
}
.ctd-kv-label { color: var(--text-muted); font-size: 12px; }
.ctd-kv-val { color: var(--text); font-weight: 500; word-break: break-word; }
.ctd-kv-val small { color: var(--text-muted); font-weight: 400; font-size: 11px; }
.ctd-kv-val.is-empty { color: var(--text-muted2, var(--text-muted)); font-weight: 400; font-style: italic; }
.ctd-kv-val a { color: var(--lime); text-decoration: none; }
.ctd-kv-val a:hover { text-decoration: underline; }

/* Lista de extras (conceptos del recibo) */
.ctd-extras-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.ctd-extras-row:last-child { border-bottom: none; }
.ctd-extras-info { display: flex; flex-direction: column; gap: 2px; }
.ctd-extras-name { font-size: 13px; font-weight: 500; }
.ctd-extras-sub { font-size: 11px; color: var(--text-muted); }
.ctd-extras-monto { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Timeline (columna derecha) */
.ctd-timeline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: 140px;
  max-height: calc(100vh - 160px);
  display: flex; flex-direction: column;
}
.ctd-timeline-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.ctd-timeline-tab {
  flex: 1;
  padding: 11px 8px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.12s;
}
.ctd-timeline-tab:hover { color: var(--text); }
.ctd-timeline-tab.is-active {
  color: var(--lime);
  border-bottom-color: var(--lime);
}
.ctd-timeline-list {
  overflow-y: auto;
  padding: 6px 0;
  flex: 1;
}
.ctd-timeline-empty {
  text-align: center;
  padding: 32px 14px;
  color: var(--text-muted);
  font-size: 12px;
}
.ctd-timeline-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.ctd-timeline-item:last-child { border-bottom: none; }
.ctd-timeline-marker {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  margin-top: 5px;
}
.ctd-timeline-marker.is-success { background: var(--lime); }
.ctd-timeline-marker.is-warn { background: var(--warning, #F59E0B); }
.ctd-timeline-marker.is-danger { background: var(--danger, #DC2626); }
.ctd-timeline-content { min-width: 0; }
.ctd-timeline-title {
  font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ctd-timeline-title strong { font-weight: 600; }
.ctd-timeline-meta {
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px;
}
.ctd-timeline-monto {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  font-size: 12.5px;
}

/* Toolbar bulk (cobro múltiple en tab Cuotas) */
.ctd-cuotas-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);                /* opaco — sino se transparenta sobre las filas */
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  position: sticky;
  top: 0;                                    /* relativo al scroll container .ctd-timeline-list */
  z-index: 5;
}
.ctd-cuotas-toolbar--hint {
  background: var(--bg);                     /* tono más sutil para diferenciar del activo */
  color: var(--text-muted);
}
/* Cuando hay seleccionadas, dejamos un acento lima en el borde inferior */
.ctd-cuotas-toolbar:not(.ctd-cuotas-toolbar--hint) {
  border-bottom: 1px solid var(--lime);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.ctd-cuotas-toolbar strong { color: var(--lime); font-weight: 700; }

/* Filas de cuotas con checkbox */
.ctd-cuota-row {
  display: grid !important;
  grid-template-columns: 16px 14px 1fr !important;
  gap: 10px !important;
}
.ctd-cuota-row.is-selected {
  background: rgba(200,255,0,0.04);
}
.ctd-cuota-check {
  margin-top: 6px;
  cursor: pointer;
  accent-color: var(--lime);
  width: 14px; height: 14px;
}

/* Chip "Renovación de X" linkeable */
.ctd-renov-link {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(200,255,0,0.08);
  color: var(--lime);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.ctd-renov-link:hover { background: rgba(200,255,0,0.18); }
.ctd-renov-link.is-finalizado {
  background: rgba(107,114,128,0.18);
  color: var(--text-muted);
}

/* ============================================================
   DASHBOARD EJECUTIVO · KPIs financieros (Opción A)
   ============================================================ */
.kpi-grid-financial {
  margin-bottom: 16px;
}
.kpi-card-finance {
  border-left: 3px solid var(--lime);
}
.kpi-value-money {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.kpi-icon-ok      { color: var(--success); }
.kpi-icon-info    { color: var(--info); }
.kpi-icon-danger  { color: var(--danger); }
.kpi-card-finance .kpi-icon-wrap {
  background: transparent;
}
.kpi-card-finance.kpi-card-accent .kpi-value-money {
  color: var(--lime);
}

/* ============================================================
   HOY · Disparadores en tareas (contextuales)
   ============================================================ */
.hoy-task-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}
.hoy-task-btn {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.12s;
  padding: 0;
}
.hoy-task-btn svg { width: 14px; height: 14px; }
.hoy-task-btn:hover {
  background: rgba(200,255,0,0.12);
  border-color: var(--lime);
  color: var(--lime);
}
.hoy-task-btn-wa:hover {
  background: rgba(37, 211, 102, 0.15);
  border-color: #25d366;
  color: #25d366;
}
.hoy-task-btn-visita:hover,
.hoy-task-btn-agenda:hover {
  background: rgba(200,255,0,0.18);
  border-color: var(--lime);
  color: var(--lime);
}
.hoy-task-btn-mail:hover {
  background: rgba(96,165,250,0.15);
  border-color: var(--info);
  color: var(--info);
}

/* ============================================================
   ¿QUE HAGO HOY? V3 · Centro de comando estilo dashboard
   ============================================================ */
#hoy-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* ============================================================
   HOY · Dashboard compacto (template-areas con max-height)
   Layout fijo: en desktop ancho >= 1100px:
   ┌──────────────────────────────────────────┐
   │ Urgente (2 cols)                          │
   ├────────────────────┬─────────────────────┤
   │ Predicciones        │ Agenda              │
   ├────────────────────┼─────────────────────┤
   │ Oportunidades       │ Backlog             │
   └────────────────────┴─────────────────────┘
   En desktop angosto / tablet: 1 col stack.
   ============================================================ */
.hoy-widgets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "urgent  urgent"
    "predict agenda"
    "opp     backlog";
  gap: 12px;
  margin-bottom: 16px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .hoy-widgets-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "urgent"
      "predict"
      "agenda"
      "opp"
      "backlog";
  }
}
.hoy-widgets-grid > .hoy-section-urgent  { grid-area: urgent; }
.hoy-widgets-grid > .hoy-section-predict { grid-area: predict; }
.hoy-widgets-grid > .hoy-section-agenda  { grid-area: agenda; }
.hoy-widgets-grid > .hoy-section-opp     { grid-area: opp; }
.hoy-widgets-grid > .hoy-section-backlog { grid-area: backlog; }

.hoy-widgets-grid > .hoy-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 320px;
  overflow: hidden;
}
.hoy-widgets-grid > .hoy-section-urgent {
  max-height: 200px;
  border-color: rgba(248, 113, 113, 0.3);
  background: linear-gradient(180deg, rgba(248,113,113,0.04) 0%, var(--surface) 100%);
}
.hoy-widgets-grid > .hoy-section-predict {
  border-left: 3px solid var(--info);
}

/* Lista scrollable dentro de cada widget */
.hoy-widgets-grid > .hoy-section .hoy-section-body {
  overflow-y: auto;
  flex: 1;
  margin: -2px -2px -2px 0;
  padding-right: 4px;
}
.hoy-widgets-grid > .hoy-section .hoy-section-body::-webkit-scrollbar { width: 6px; }
.hoy-widgets-grid > .hoy-section .hoy-section-body::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 3px;
}

/* Items compactos */
.hoy-widgets-grid .hoy-action-row {
  background: var(--bg);
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 6px;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  font-size: 12px;
}
.hoy-widgets-grid .hoy-action-icon { font-size: 14px; }
.hoy-widgets-grid .hoy-action-title {
  font-size: 12.5px;
  margin-bottom: 1px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hoy-widgets-grid .hoy-action-sub {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hoy-widgets-grid .hoy-action-buttons .btn-small {
  font-size: 11px;
  padding: 3px 7px;
}
.hoy-widgets-grid .hoy-action-buttons .btn-icon {
  width: 24px;
  height: 24px;
}
.hoy-widgets-grid .hoy-action-buttons .btn-icon svg { width: 12px; height: 12px; }

.hoy-widgets-grid .hoy-section-title {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hoy-widgets-grid .hoy-section-hint {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  flex: 1;
}
.hoy-widgets-grid .hoy-section-menu-btn { width: 22px; height: 22px; font-size: 12px; }
.hoy-widgets-grid .hoy-empty { padding: 8px; font-size: 12px; }
.hoy-widgets-grid .hoy-add-task-btn { font-size: 11px; padding: 5px; margin-top: 6px; }

/* Footer counter "+N más" cuando hay overflow */
.hoy-section-footer {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  padding: 4px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
  flex-shrink: 0;
}
/* Resumen ejecutivo arriba */
.hoy-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.hoy-summary-item {
  display: flex; flex-direction: column;
  gap: 2px;
}
.hoy-summary-num {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hoy-summary-item.urgent .hoy-summary-num { color: var(--danger); }
.hoy-summary-lbl {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Sección genérica */
.hoy-section {
  margin-bottom: 22px;
}
.hoy-section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hoy-section-hint {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 400;
}

/* Filas de acción */
.hoy-action-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  transition: border-color 0.12s;
}
.hoy-action-row:hover {
  border-color: var(--border-strong);
}
.hoy-action-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hoy-time {
  font-family: ui-monospace, 'Menlo', monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.hoy-action-body { min-width: 0; }
.hoy-action-title {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 2px;
}
.hoy-action-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.hoy-action-buttons {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.hoy-action-buttons .btn-small {
  font-size: 12px;
  padding: 5px 10px;
}

/* Variantes por nivel de prioridad */
.hoy-row-danger {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.3);
}
.hoy-row-danger:hover { border-color: var(--danger); }
.hoy-row-warn {
  background: rgba(251, 191, 36, 0.07);
  border-color: rgba(251, 191, 36, 0.28);
}
.hoy-row-money {
  background: rgba(200, 255, 0, 0.06);
  border-color: rgba(200, 255, 0, 0.28);
}
.hoy-row-predict {
  background: rgba(96, 165, 250, 0.05);
  border-left: 3px solid var(--info);
}
.hoy-row-gcal {
  border-left: 3px solid #4285f4;
}
.hoy-row-soft {
  background: transparent;
}

/* Variantes de sección */
.hoy-section-urgent .hoy-section-title { color: var(--danger); }
.hoy-section-predict .hoy-section-title { color: var(--info); }
.hoy-section-agenda .hoy-section-title { color: var(--text); }
.hoy-section-opp .hoy-section-title { color: var(--lime); }
.hoy-section-backlog .hoy-section-title { color: var(--text-muted); }

/* Backlog colapsable */
.hoy-backlog-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  padding: 10px 14px;
}
.hoy-backlog-group summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  user-select: none;
}
.hoy-backlog-group summary strong {
  color: var(--text);
  font-weight: 700;
  margin-left: 6px;
}
.hoy-backlog-group[open] summary {
  margin-bottom: 10px;
}
.hoy-backlog-body {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-muted);
  transition: all 0.12s;
}
.btn-icon:hover {
  border-color: var(--lime);
  color: var(--lime);
}
.btn-icon svg { width: 14px; height: 14px; }

.hoy-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.hoy-add-task-btn {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12.5px;
  transition: all 0.12s;
}
.hoy-add-task-btn:hover {
  border-color: var(--lime);
  color: var(--lime);
}

/* ============================================================
   HOY V3 · Toolbar + menús (Fase 3)
   ============================================================ */
.hoy-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.hoy-filter-label {
  font-size: 12px;
  color: var(--text-muted);
}
.hoy-filter-select {
  padding: 6px 28px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.hoy-filter-select:hover { border-color: var(--lime); }

.hoy-bulk-dropdown {
  position: relative;
  margin-left: auto;
}
.hoy-bulk-menu {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 4px;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
  padding: 4px;
}
.hoy-bulk-menu.show { display: block; }
.hoy-bulk-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.hoy-bulk-menu button:hover {
  background: var(--surface-hover);
  color: var(--lime);
}

/* Menú "..." por sección */
.hoy-section-menu {
  position: relative;
  margin-left: auto;
  display: inline-block;
}
.hoy-section-menu-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 26px; height: 26px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.hoy-section-menu-btn:hover {
  border-color: var(--lime);
  color: var(--lime);
}
.hoy-section-menu-list {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 4px;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
  padding: 4px;
}
.hoy-section-menu-list.show { display: block; }
.hoy-section-menu-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.hoy-section-menu-list button:hover {
  background: var(--surface-hover);
  color: var(--lime);
}

/* Sección snoozed (placeholder colapsado) */
.hoy-section-snoozed {
  opacity: 0.55;
  background: transparent;
  border: 1px dashed var(--border-strong);
}
.hoy-section-snoozed .hoy-section-title {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Asegurar que el título tenga el "..." al final, no en medio */
.hoy-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hoy-section-hint {
  flex: 1;
}

/* ============================================================
   QUICK-CREATE FAB + MODAL (Fase 4)
   ============================================================ */
.quick-create-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  background: var(--lime);
  color: var(--navy-deep);
  border: none;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(200, 255, 0, 0.35), 0 2px 6px rgba(0,0,0,0.18);
  transition: all 0.18s cubic-bezier(.4,0,.2,1);
}
.quick-create-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(200, 255, 0, 0.45), 0 4px 10px rgba(0,0,0,0.22);
}
.quick-create-fab-kbd {
  font-family: ui-monospace, 'Menlo', monospace;
  font-size: 11px;
  background: rgba(6, 9, 26, 0.18);
  padding: 2px 6px;
  border-radius: 5px;
  margin-left: 4px;
  color: var(--navy-deep);
}
.quick-create-fab svg { color: var(--navy-deep); }
body.light .quick-create-fab {
  box-shadow: 0 8px 24px rgba(168, 220, 0, 0.4), 0 2px 6px rgba(0,0,0,0.12);
}
@media (max-width: 640px) {
  .quick-create-fab-label, .quick-create-fab-kbd { display: none; }
  .quick-create-fab {
    width: 56px; height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
}

/* Modal */
.quick-create-card {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.quick-create-card h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.quick-create-hint {
  margin-left: 12px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.quick-create-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
#quick-create-text {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}
#quick-create-text:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-glow);
}

/* Sugerencias de lead */
.quick-create-suggest {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.quick-create-suggest-label {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.quick-create-lead-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.quick-create-lead-option:hover {
  background: var(--surface-hover);
}
.quick-create-lead-option .lead-name { font-weight: 500; }
.quick-create-lead-option .lead-meta { font-size: 11px; margin-left: auto; }

/* Análisis NLP */
.quick-create-analysis {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(200, 255, 0, 0.06);
  border: 1px solid rgba(200, 255, 0, 0.3);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.quick-create-analysis-icon { font-size: 16px; }
.quick-create-analysis-text { color: var(--text); }
.quick-create-analysis-text strong { color: var(--lime); }

/* Chip de lead seleccionado */
.quick-create-meta {
  margin-top: 8px;
}
.quick-create-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  background: rgba(200, 255, 0, 0.12);
  border: 1px solid var(--lime);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text);
}
.chip-label {
  font-size: 11px;
  color: var(--text-muted);
}
.chip-value {
  font-weight: 600;
  color: var(--lime);
}
.chip-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 0 0 4px;
}
.chip-remove:hover { color: var(--danger); }

/* ============================================================
   PLAN & ADMIN — Planes Start/Pro/Multi + superadmin
   ============================================================ */
.plan-current-summary {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(200, 255, 0, 0.05);
  border: 1px solid rgba(200, 255, 0, 0.2);
  border-radius: var(--radius);
}
.plan-current-tier {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--lime);
  text-transform: uppercase;
}
.plan-current-status-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.plan-current-status-pill.active   { background: rgba(52,211,153,0.15); color: var(--success); }
.plan-current-status-pill.trial    { background: rgba(96,165,250,0.15); color: var(--info); }
.plan-current-status-pill.past_due { background: rgba(248,113,113,0.15); color: var(--danger); }
.plan-current-status-pill.paused   { background: rgba(251,191,36,0.15); color: var(--warning); }
.plan-current-status-pill.cancelled{ background: rgba(248,113,113,0.15); color: var(--danger); }

.plan-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.plan-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, transform .15s;
}
.plan-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.plan-card.is-current {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime-glow);
}
.plan-card.is-featured::before {
  content: 'Más elegido';
  position: absolute; top: -10px; left: 14px;
  background: var(--lime); color: #06091A;
  padding: 2px 10px; border-radius: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
}
.plan-card-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.plan-card-tagline { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }
.plan-card-price {
  margin-top: 6px;
  display: flex; align-items: baseline; gap: 4px;
}
.plan-card-price-amount {
  font-family: 'Outfit', sans-serif;
  font-weight: 800; font-size: 28px; color: var(--lime);
  letter-spacing: -0.025em;
}
.plan-card-price-period { font-size: 11px; color: var(--text-muted); }
.plan-card-feats { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 5px; }
.plan-card-feats li {
  font-size: 12.5px; color: var(--text); padding-left: 18px; position: relative;
}
.plan-card-feats li::before {
  content: '✓';
  position: absolute; left: 0; color: var(--lime); font-weight: 800;
}
.plan-card-feats li.disabled { color: var(--text-faint); }
.plan-card-feats li.disabled::before { content: '—'; color: var(--text-faint); }
.plan-card-cta {
  margin-top: auto;
  padding: 9px 12px;
  background: transparent;
  color: var(--lime);
  border: 1px solid var(--lime);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.plan-card-cta:hover { background: var(--lime); color: #06091A; }
.plan-card-cta.is-current { background: var(--surface-2); color: var(--text-muted); border-color: var(--border-strong); cursor: default; }
.plan-card-cta.is-current:hover { background: var(--surface-2); color: var(--text-muted); }

/* Paywall toast/banner inline para gating */
.plan-paywall-banner {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: var(--warning);
  border-radius: var(--radius);
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}

/* ── Admin panel ───────────────────────────────────────── */
.admin-kpis-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.admin-kpi-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.admin-kpi-value { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 24px; color: var(--lime); margin-top: 4px; }
.admin-filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
.admin-filters input,
.admin-filters select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
}
.admin-filters input { flex: 1; min-width: 220px; }
.admin-tier-pill {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 8px; border-radius: 10px;
}
.admin-tier-pill.trial { background: rgba(96,165,250,0.15); color: var(--info); }
.admin-tier-pill.start { background: rgba(140,200,255,0.12); color: #93C5FD; }
.admin-tier-pill.pro   { background: rgba(200,255,0,0.15); color: var(--lime); }
.admin-tier-pill.multi { background: rgba(168,85,247,0.15); color: #C084FC; }

/* ============================================================
   MÓDULO RECLAMOS — kanban + lista + proveedores
   ============================================================ */

/* Tabs */
.reclamos-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.reclamos-tab {
  padding: 7px 12px; font-family: inherit; font-size: 13px; font-weight: 600;
  background: transparent; color: var(--text-muted); border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s;
}
.reclamos-tab:hover { color: var(--text); }
.reclamos-tab.active { background: var(--surface-2); color: var(--lime); }

.reclamos-pane { display: none; }
.reclamos-pane.active { display: block; }

/* KPIs */
.reclamos-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
  margin: 16px 0 24px 0;
}
.rkpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.rkpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.rkpi-val { font-size: 22px; font-weight: 800; color: var(--text); font-family: var(--font-display); }
.rkpi-val.rkpi-danger { color: #ff7575; }
.rkpi-val.rkpi-warning { color: #f59e0b; }
.rkpi-val.rkpi-ok { color: var(--lime); }

/* Kanban */
.reclamos-kanban {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.reclamos-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  min-height: 200px;
  display: flex; flex-direction: column;
}
.reclamos-col-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding: 4px 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
}
.reclamos-col-count {
  background: var(--surface-2); color: var(--text); border-radius: 999px;
  padding: 2px 8px; font-size: 11px; font-weight: 700;
}
.reclamos-col[data-status="nuevo"] .reclamos-col-header { color: #93C5FD; }
.reclamos-col[data-status="diagnosticando"] .reclamos-col-header { color: #FBBF24; }
.reclamos-col[data-status="asignado"] .reclamos-col-header { color: #C084FC; }
.reclamos-col[data-status="en_curso"] .reclamos-col-header { color: var(--lime); }
.reclamos-col[data-status="por_validar"] .reclamos-col-header { color: #FB923C; }
.reclamos-col[data-status="resuelto"] .reclamos-col-header { color: #4ADE80; }
.reclamos-col[data-status="rechazado"] .reclamos-col-header { color: #94A3B8; }

.reclamos-col.drag-over { background: rgba(200, 255, 0, 0.05); border-color: var(--lime); }

.reclamos-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: grab;
  transition: all 0.15s;
}
.reclamos-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.18); border-color: var(--lime); }
.reclamos-card:active { cursor: grabbing; }
.reclamos-card.dragging { opacity: 0.4; }
.reclamos-card[data-priority="urgente"] { border-left-color: #ef4444; }
.reclamos-card[data-priority="alta"]    { border-left-color: #f59e0b; }
.reclamos-card[data-priority="media"]   { border-left-color: #60a5fa; }
.reclamos-card[data-priority="baja"]    { border-left-color: #94a3b8; }

.reclamos-card-ticket { font-size: 10px; color: var(--text-muted); font-family: monospace; letter-spacing: 0.04em; }
.reclamos-card-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 4px 0; line-height: 1.3; }
.reclamos-card-meta { font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.reclamos-card-prov { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.reclamos-card-prov i { width: 11px; height: 11px; vertical-align: -1px; }

.priority-pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.priority-pill.urgente { background: rgba(239, 68, 68, 0.18); color: #ef4444; }
.priority-pill.alta    { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.priority-pill.media   { background: rgba(96, 165, 250, 0.18); color: #60a5fa; }
.priority-pill.baja    { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }

/* Lista */
.reclamos-filters {
  display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap;
}
.reclamos-filters input[type=search], .reclamos-filters select {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px; font-family: inherit; font-size: 13px;
  min-width: 180px;
}

/* Proveedores */
.providers-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.provider-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px;
}
.provider-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.provider-name { font-size: 15px; font-weight: 700; color: var(--text); }
.provider-rubro { display: inline-block; background: rgba(200,255,0,0.1); color: var(--lime); padding: 2px 8px; border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin-top: 4px; }
.provider-contact { font-size: 12px; color: var(--text-muted); margin: 6px 0; }
.provider-contact a { color: var(--lime); text-decoration: none; }
.provider-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.provider-metric { text-align: center; }
.provider-metric-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.provider-metric-val { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 2px; }
.provider-stars { color: #FBBF24; font-size: 14px; letter-spacing: 1px; }

/* Modal de claim — wide */
.modal-content-wide { max-width: 760px; }

.claim-section-title { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin: 18px 0 10px 0; }

.claim-foto-preview { margin-top: 8px; }
.claim-foto-preview img { max-width: 200px; max-height: 150px; border-radius: var(--radius-sm); border: 1px solid var(--border); }

.claim-satisfaction-block {
  background: rgba(200, 255, 0, 0.04); border: 1px dashed rgba(200, 255, 0, 0.25);
  border-radius: var(--radius); padding: 14px; margin-top: 14px;
}

.rating-stars { display: flex; gap: 2px; margin: 8px 0; font-size: 28px; cursor: pointer; user-select: none; }
.rating-stars span { color: rgba(255, 255, 255, 0.15); transition: color 0.1s; cursor: pointer; }
.rating-stars span:hover, .rating-stars span.filled { color: #FBBF24; }
body.light .rating-stars span { color: rgba(0,0,0,0.15); }
body.light .rating-stars span:hover, body.light .rating-stars span.filled { color: #F59E0B; }

/* Timeline */
.claim-timeline {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 220px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px;
}
.claim-timeline-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 6px 0;
  font-size: 12px; border-bottom: 1px solid var(--border);
}
.claim-timeline-row:last-child { border-bottom: none; }
.claim-timeline-time { color: var(--text-muted); font-family: monospace; font-size: 11px; }
.claim-timeline-text { color: var(--text); }
.claim-timeline-text strong { color: var(--lime); }

/* Nav badge para reclamos abiertos */
.nav-badge {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  text-align: center; padding: 0 5px; margin-left: auto;
  background: #ef4444; color: white; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}

/* Responsive kanban */
@media (max-width: 1100px) {
  .reclamos-kanban { grid-template-columns: repeat(7, 240px); }
}

/* Light mode adjustments */
body.light .reclamos-col { background: #F4F6FB; }
body.light .reclamos-card { background: #FFFFFF; }
body.light .reclamos-card-title { color: var(--navy-deep); }
body.light .provider-card { background: #FFFFFF; }
body.light .provider-name { color: var(--navy-deep); }
body.light .provider-rubro { background: rgba(120, 160, 20, 0.12); color: var(--lime-dark); }
body.light .priority-pill.urgente { background: rgba(239,68,68,0.12); color: #DC2626; }
body.light .priority-pill.alta { background: rgba(245,158,11,0.12); color: #D97706; }
body.light .priority-pill.media { background: rgba(96,165,250,0.12); color: #2563EB; }
body.light .priority-pill.baja { background: rgba(148,163,184,0.18); color: #475569; }

/* ============================================================
   Botón "Generar con IA" — usado en modal de propiedad
   ============================================================ */
.btn-ai-generate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(163,230,53,0.15), rgba(163,230,53,0.05));
  border: 1px solid rgba(163,230,53,0.4);
  color: var(--lime, #A3E635);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ai-generate:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(163,230,53,0.25), rgba(163,230,53,0.1));
  border-color: rgba(163,230,53,0.7);
  transform: translateY(-1px);
}
.btn-ai-generate:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
}

/* ===== Auth: forgot / reset password ===== */
.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
  margin-bottom: 2px;
}
.auth-link {
  color: var(--lime-dark, #6BA70A);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }
.auth-helper {
  font-size: 13px;
  color: var(--text-muted, #9CA3AF);
  margin: 0 0 4px 0;
  line-height: 1.45;
}
.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted, #9CA3AF);
  line-height: 1.5;
  cursor: pointer;
}
.auth-checkbox input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--lime-dark, #6BA70A);
  flex-shrink: 0;
}
.auth-checkbox a { color: var(--lime-dark, #6BA70A); text-decoration: none; }
.auth-checkbox a:hover { text-decoration: underline; }

/* ============================================================
   HQ · Torre de control del founder
   ============================================================ */

.hq-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #2a2f3a);
  margin: 18px 0 24px 0;
  overflow-x: auto;
}
.hq-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  color: var(--text-muted, #9CA3AF);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.hq-tab:hover:not(:disabled) {
  color: var(--text, #fff);
}
.hq-tab.active {
  color: var(--lime, #A3E635);
  border-bottom-color: var(--lime, #A3E635);
}
.hq-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.hq-tab-soon {
  font-size: 9px;
  background: rgba(163,230,53,0.15);
  color: var(--lime, #A3E635);
  padding: 2px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.hq-panel { animation: hq-fade 0.18s ease; }
@keyframes hq-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.hq-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 24px 0 12px 0;
}

.hq-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0 12px 0;
}
.hq-section-header .hq-section-title { margin: 0; }

.hq-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.hq-kpi-card {
  background: var(--surface-elevated, #1a1f2a);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 84px;
  transition: border-color 0.15s, transform 0.15s;
}
.hq-kpi-card:hover { border-color: rgba(163,230,53,0.35); }
.hq-kpi-card.hq-kpi-accent { border-color: rgba(163,230,53,0.4); background: linear-gradient(180deg, rgba(163,230,53,0.06) 0%, transparent 100%); }
.hq-kpi-card.hq-kpi-danger { border-color: rgba(239,68,68,0.4); }
.hq-kpi-card.hq-kpi-warn { border-color: rgba(245,158,11,0.4); }

.hq-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hq-kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text, #fff);
  line-height: 1.05;
  font-family: 'Outfit', system-ui, sans-serif;
}
.hq-kpi-hint {
  font-size: 11px;
  color: var(--text-muted, #9CA3AF);
  margin-top: 2px;
}

/* Leyenda del semáforo */
.hq-legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted, #9CA3AF);
}
.hq-legend > span { display: flex; align-items: center; gap: 5px; }
.hq-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.hq-dot-red    { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.6); }
.hq-dot-yellow { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.6); }
.hq-dot-green  { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.6); }

/* Badge de health en cada fila */
.hq-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.hq-health-badge.red {
  background: rgba(239,68,68,0.12);
  color: #f87171;
}
.hq-health-badge.yellow {
  background: rgba(245,158,11,0.12);
  color: #fbbf24;
}
.hq-health-badge.green {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}

/* ============================================================
   MOBILE BOTTOM NAV + MORE SHEET (Fase 1 — PWA)
   ============================================================
   - Visible solo en <768px (mobile estricto)
   - 5 destinos principales abajo: Hoy / Props / Agenda / Leads / Más
   - "Más" abre un sheet inferior con las views secundarias
   - Respeta safe-area-inset (notch / barra inferior iOS)
   - Oculto cuando está activo #loading o #auth-screen (no logueado)
   ============================================================ */
.mobile-bottom-nav { display: none; }
.mobile-more-sheet { display: none; }

/* Cuando el usuario NO está logueado (auth-screen visible) o
   está en el splash, ocultamos el nav. Usa :has() — soportado
   desde iOS 15.4 / Chrome 105 / Safari 15.4. */
body:has(#auth-screen:not(.hidden)) .mobile-bottom-nav,
body:has(#auth-screen:not(.hidden)) .mobile-more-sheet,
body:has(#loading:not(.hidden)) .mobile-bottom-nav,
body:has(#loading:not(.hidden)) .mobile-more-sheet {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    border-top: 0.5px solid rgba(0,0,0,0.08);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom)) 4px;
    z-index: 9999;
    box-shadow: 0 -2px 14px rgba(0,0,0,0.04);
    pointer-events: auto;
  }
  .mobile-bottom-nav * { pointer-events: auto; }
  body:not(.light) .mobile-bottom-nav {
    background: #0B0F22;
    border-top-color: rgba(255,255,255,0.06);
    box-shadow: 0 -2px 14px rgba(0,0,0,0.5);
  }

  .mbn-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: 0;
    padding: 6px 2px;
    color: #6B7280;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
  }
  body:not(.light) .mbn-btn { color: rgba(255,255,255,0.55); }
  .mbn-btn:active { transform: scale(0.94); }
  .mbn-btn.active { color: #1C2744; }
  body:not(.light) .mbn-btn.active { color: #C8FF00; }

  .mbn-icon { display: inline-flex; line-height: 0; }
  .mbn-icon svg { width: 22px; height: 22px; stroke-width: 2; }
  .mbn-label { font-size: 10px; font-weight: 500; letter-spacing: 0.1px; }

  /* Reservar espacio en el bottom para que el contenido no quede tapado */
  .main {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }
  .app-footer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    margin-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  /* MORE SHEET */
  .mobile-more-sheet:not(.hidden) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
  .mms-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 9, 26, 0.5);
    animation: mmsFadeIn 0.18s ease;
  }
  .mms-card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    animation: mmsSlideUp 0.22s ease;
  }
  body:not(.light) .mms-card { background: #11152A; color: #fff; }
  .mms-handle {
    width: 40px;
    height: 4px;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    margin: 4px auto 14px;
  }
  body:not(.light) .mms-handle { background: rgba(255,255,255,0.25); }
  .mms-title {
    font-size: 13px;
    font-weight: 600;
    color: #1C2744;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  body:not(.light) .mms-title { color: rgba(255,255,255,0.85); }
  .mms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .mms-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: #F1EFE8;
    border: 0;
    border-radius: 10px;
    color: #1C2744;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body:not(.light) .mms-item {
    background: rgba(255,255,255,0.05);
    color: #fff;
  }
  .mms-item:active { transform: scale(0.96); }
  .mms-item svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .mms-item.hidden { display: none; }

  .mms-close {
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    background: transparent;
    border: 0.5px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    color: #1C2744;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }
  body:not(.light) .mms-close {
    border-color: rgba(255,255,255,0.12);
    color: #fff;
  }
}

@keyframes mmsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mmsSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ============================================================
   LINKEO LOADER · overlay sutil para operaciones largas
   Estilo Apple: backdrop con blur, card flotante con spinner.
   Transiciones suaves con cubic-bezier(0.32, 0.72, 0, 1).
   ============================================================ */
.linkeo-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 26, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.linkeo-loader.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.linkeo-loader__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 28px;
  min-width: 140px;
  max-width: 320px;
  background: rgba(22, 29, 51, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: scale(0.96) translateY(4px);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.linkeo-loader.is-visible .linkeo-loader__card {
  transform: scale(1) translateY(0);
}
.linkeo-loader__spinner {
  color: var(--lime, #C8FF00);
  animation: linkeoSpin 1100ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}
.linkeo-loader__spinner svg {
  display: block;
}
.linkeo-loader__spinner circle {
  animation: linkeoDash 1500ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  transform-origin: center;
}
.linkeo-loader__label {
  color: var(--text, #ECEEF3);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

body.light .linkeo-loader {
  background: rgba(255, 255, 255, 0.38);
}
body.light .linkeo-loader__card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.08);
}
body.light .linkeo-loader__spinner { color: #5A6D00; }
body.light .linkeo-loader__label { color: #06091A; }

@keyframes linkeoSpin {
  100% { transform: rotate(360deg); }
}
@keyframes linkeoDash {
  0%   { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 200; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 200; stroke-dashoffset: -125; }
}

/* ============================================================
   FIXES MOBILE STANDALONE PWA (Fase 1.1)
   ============================================================
   - Ocultar el FAB de Quick Create en mobile (tapaba el "Más"
     del bottom nav). La función sigue accesible vía Cmd+K en
     desktop y se puede agregar al sheet Más más adelante.
   - Reservar espacio para el notch (safe-area-inset-top) en
     standalone, así el header no queda tapado por status bar.
   - Topbar slim en mobile: ocultamos versión, agency-name larga,
     theme toggle, y el botón "Cerrar sesión" largo.
   ============================================================ */
@media (max-width: 768px) {
  .quick-create-fab { display: none !important; }

  /* PWA standalone: respetar notch del iPhone arriba */
  .topbar {
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
    min-height: calc(56px + env(safe-area-inset-top));
  }

  /* Achicar elementos de la topbar para que entren */
  .topbar .topbar-version,
  .topbar .topbar-clock,
  .topbar .agency-name,
  .topbar .user-role-label,
  .topbar .global-search {
    display: none !important;
  }
  .topbar .user-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  /* Botón "Cerrar sesión" → solo ícono o texto corto en mobile */
  .topbar .logout-btn,
  .topbar [onclick*="logout"] {
    font-size: 0 !important;
    padding: 6px 8px !important;
  }
  .topbar .logout-btn::after,
  .topbar [onclick*="logout"]::after {
    content: "Salir";
    font-size: 12px;
    font-weight: 500;
  }
}

/* ============================================================
   ANTI-ZOOM iOS + ANTI-OVERFLOW HORIZONTAL (Fase 1)
   ============================================================
   - iOS hace auto-zoom cuando focuseás un input con font-size < 16px.
     Forzamos 16px en mobile para evitar el "pinch" no deseado.
   - overflow-x: hidden corta cualquier hijo que se salga del viewport
     y rompa el layout horizontal.
   - touch-action: manipulation desactiva el double-tap-to-zoom
     accidental sobre elementos no editables (botones, cards).
   ============================================================ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  /* iOS: cualquier control de form debe tener al menos 16px de
     font-size para que el navegador NO haga zoom al focusearlo. */
  input,
  select,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="url"] {
    font-size: 16px !important;
  }
  /* Desactivar double-tap-to-zoom sobre botones y áreas táctiles
     pequeñas. No afecta a inputs ni a scroll/pinch real. */
  button,
  .nav-btn,
  .mbn-btn,
  .mms-item,
  .btn,
  [role="button"],
  a.nav-btn {
    touch-action: manipulation;
  }
  /* Layout root: que el .main scrollee dentro de su contenedor sin
     desbordar el viewport. */
  .main,
  .app,
  .topbar {
    max-width: 100vw;
  }
}

/* ============================================================
   FASE 2A — REDISEÑO MOBILE PROPIEDADES
   ============================================================
   En mobile (<768px):
   - Search hero ancho completo arriba
   - Filtros (selects) en una fila scrolleable horizontal
   - Cards full-width, foto grande arriba, datos abajo
   - Acciones reorganizadas: WhatsApp + Ver protagonistas
   - Importar Excel / view-toggle ocultos (no son flujos mobile)
   - Botón "Nueva propiedad" se convierte en FAB flotante
   ============================================================ */

/* Botón compartir verde WhatsApp — visible en todos los breakpoints */
.btn-card-share {
  background: #25D366 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 600 !important;
}
.btn-card-share:hover {
  background: #1FB857 !important;
  color: #FFFFFF !important;
}
.btn-card-share svg { fill: #FFFFFF; }

@media (max-width: 768px) {
  /* View header: stack vertical, sin presionar */
  #view-properties .view-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 4px 0 0;
  }
  #view-properties .view-header h1 {
    font-size: 22px;
    margin: 0;
  }

  /* Tools: stack + scroll horizontal para filtros */
  #view-properties .view-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  #view-properties .view-tools input[type="search"] {
    width: 100% !important;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 16px !important;
  }
  /* Selects en una fila scrolleable horizontal */
  #view-properties .view-tools select {
    flex: 0 0 auto;
    min-width: 120px;
    padding: 8px 28px 8px 12px;
    border-radius: 18px;
    font-size: 13px !important;
    background-color: #F1EFE8;
    border: 0.5px solid rgba(6,9,26,0.08);
  }
  body:not(.light) #view-properties .view-tools select {
    background-color: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    color: #fff;
  }

  /* Toggle vista (grilla/mapa) y comparador ocultos en mobile */
  #view-properties .view-toggle,
  #view-properties #btn-comparador,
  #view-properties .btn-ghost {
    display: none !important;
  }
  /* "Nueva propiedad" se va: aparece como FAB */
  #view-properties .btn-primary {
    display: none !important;
  }

  /* Grid → 1 columna, full-width */
  #view-properties .properties-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding-top: 8px;
  }

  /* Cards: foto grande arriba, datos prolijos abajo */
  .property-card {
    border-radius: 14px;
    overflow: hidden;
  }
  .property-card-img {
    aspect-ratio: 4 / 3;
    height: auto !important;
    min-height: 200px;
  }
  .property-card-body {
    padding: 14px 14px 8px;
  }
  .property-card-price {
    font-size: 20px !important;
    font-weight: 800;
    letter-spacing: -0.3px;
  }
  .property-card-zone {
    font-size: 13px;
    margin-top: 4px;
  }
  .property-card-meta {
    margin-top: 8px;
    font-size: 12px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .property-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 12px 14px;
  }
  .btn-card-action {
    padding: 10px 8px !important;
    font-size: 12px !important;
    justify-content: center;
  }
  /* WhatsApp y Ver protagonistas — primera fila */
  .property-card-actions .btn-card-share,
  .property-card-actions .btn-card-primary {
    grid-column: span 1;
  }
  /* Ficha, Comparar, Editar van más chicos abajo */
  .property-card-actions .btn-card-ghost {
    font-size: 11px !important;
    padding: 8px 6px !important;
  }

  /* FAB "Nueva propiedad" — visible solo en mobile */
  .props-mobile-fab {
    position: fixed;
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #06091A;
    color: #C8FF00;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 800;
  }
  .props-mobile-fab:active { transform: scale(0.94); }
}
.props-mobile-fab { display: none; }
@media (max-width: 768px) {
  #view-properties.active ~ .props-mobile-fab,
  body:has(#view-properties.active) .props-mobile-fab {
    display: flex;
  }
}

/* ============================================================
   FASE 2B — REDISEÑO MOBILE HOY
   ============================================================
   - Hero compacto (saludo + fecha sin botones grandes)
   - KPIs jumbo en 2x2, números grandes
   - Próxima visita destacada
   ============================================================ */
@media (max-width: 768px) {
  #view-hoy .hoy-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0 6px;
  }
  #view-hoy .hoy-hero-title {
    font-size: 22px !important;
    line-height: 1.15;
    margin: 0;
  }
  #view-hoy .hoy-hero-date {
    font-size: 12px;
    margin: 0;
  }
  #view-hoy .hoy-hero-actions {
    width: 100%;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 6px;
  }
  #view-hoy .hoy-hero-actions .btn-ghost,
  #view-hoy .hoy-hero-actions .btn-gcal-connect {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* KPIs jumbo en 2x2 */
  #view-hoy .hoy-kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 14px 0 18px !important;
  }
  #view-hoy .hoy-kpis .hoy-kpi {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }
  #view-hoy .hoy-kpis .hoy-kpi-num,
  #view-hoy .hoy-kpis .hoy-kpi-value {
    font-size: 28px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
  }
  #view-hoy .hoy-kpis .hoy-kpi-label,
  #view-hoy .hoy-kpis .hoy-kpi-title {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  /* Grid contenido principal: stack */
  #view-hoy .hoy-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  #view-hoy .hoy-widgets-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ============================================================
   MODALES FULL-SCREEN EN MOBILE (Fase 1)
   ============================================================
   En <640px los modales pasan a ocupar toda la pantalla.
   Mejor UX táctil: sin "card flotante" apretada con scroll dentro
   de scroll. Usamos !important para sobrescribir max-width
   inline puesto en algunos modal-card de index.html.
   ============================================================ */
@media (max-width: 640px) {
  .modal {
    padding: 0;
    align-items: stretch;
    backdrop-filter: none;
  }
  .modal-card,
  .modal-card.modal-large,
  .modal-card.modal-medium,
  .modal-card.quick-create-card {
    max-width: 100% !important;
    width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-width: 0;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* El botón de cerrar (X) suele ser absolute top-right — lo dejamos cómodo */
  .modal-card .modal-close,
  .modal-card [class*="modal-close"] {
    top: 12px;
    right: 12px;
  }
}

/* ============================================================
   LINKEO STUDIO · Plantillas de Story (Bloque 41 · v3 Canva-style)
   -----------------------------------------------------------
   Diseño inspirado en Canva: whitespace generoso, drop zones
   amplias, cards con sombras suaves, jerarquía visual clara.
   ============================================================ */

/* ── Lista en Configuración ───────────────────────────────── */
.studio-templates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.studio-template-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.18s ease,
              border-color 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.studio-template-card:hover {
  border-color: var(--lime);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
}
.studio-template-thumb {
  aspect-ratio: 9 / 16;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  overflow: hidden;
  position: relative;
}
.studio-template-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.studio-template-card:hover .studio-template-thumb img { transform: scale(1.04); }
.studio-template-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 35%);
  pointer-events: none;
}
.studio-template-info {
  padding: 12px 14px 6px;
}
.studio-template-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.studio-template-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.studio-template-meta::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  display: inline-block;
}
.studio-template-actions {
  display: flex;
  gap: 6px;
  padding: 6px 14px 14px;
}
.studio-template-actions .btn-ghost {
  flex: 1;
}

/* Empty state */
.studio-empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  grid-column: 1 / -1;
}
.studio-empty-state i { color: var(--text-muted) !important; }

/* ── Editor modal ─────────────────────────────────────────── */
.studio-editor-card {
  max-width: 1100px;
  width: 96vw;
}
.studio-editor-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 340px;
  gap: 28px;
  margin-top: 16px;
}
.studio-editor-stage-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 0;
}
.studio-editor-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  background: #F4F4F0;          /* gris muy claro, neutral, no compite con la plantilla */
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.10),
    0 4px 12px rgba(0,0,0,0.05);
}
body.dark .studio-editor-stage { background: #2A2A28; }

/* Estado vacío del stage — drop zone Canva-style */
.studio-editor-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 22px;
  width: 100%;
  height: 100%;
  border: 2px dashed #D4D4CD;
  border-radius: 14px;
  margin: 14px;
  background: #FFFFFF;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
  cursor: pointer;
}
.studio-editor-empty:hover,
.studio-editor-empty.is-dragover {
  border-color: var(--lime);
  background: var(--lime-glow);
  transform: scale(1.01);
}
.studio-editor-empty.is-dragover { border-style: solid; }
body.dark .studio-editor-empty {
  border-color: rgba(255,255,255,0.20);
  background: #1a1a18;
}
body.dark .studio-editor-empty:hover,
body.dark .studio-editor-empty.is-dragover {
  border-color: var(--lime);
  background: rgba(165, 213, 47, 0.06);
}
.studio-editor-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lime-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.studio-editor-empty-icon i { color: var(--lime) !important; }
body.light .studio-editor-empty-icon i { color: #5A6D00 !important; }
.studio-editor-empty-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em;
}
.studio-editor-empty-sub {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
  max-width: 240px;
}
.studio-editor-empty-hint {
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  margin: 12px 0 0 !important;
}

.studio-editor-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
}
.studio-editor-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.studio-editor-toolbar {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.studio-editor-toolbar .btn-ghost {
  background: rgba(0,0,0,0.55) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.studio-editor-toolbar .btn-ghost:hover {
  background: rgba(0,0,0,0.75) !important;
  border-color: var(--lime) !important;
}

/* Cajas de placeholders sobre el canvas */
.studio-field-box {
  position: absolute;
  border: 2px solid var(--lime);
  background: rgba(165, 213, 47, 0.10);
  box-sizing: border-box;
  cursor: grab;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  border-radius: 4px;
}
.studio-field-box:active { cursor: grabbing; }
.studio-field-box:hover {
  background: rgba(165, 213, 47, 0.18);
}
.studio-field-box.is-selected {
  background: rgba(165, 213, 47, 0.22);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.6),
    0 0 0 4px var(--lime),
    0 8px 24px rgba(165, 213, 47, 0.40);
}
body.dark .studio-field-box.is-selected {
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.5),
    0 0 0 4px var(--lime),
    0 8px 24px rgba(165, 213, 47, 0.40);
}
.studio-field-box-label {
  position: absolute;
  top: -28px;
  left: 0;
  background: var(--lime);
  color: #0E1413;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px 6px 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.studio-field-box-handle {
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  background: var(--lime);
  border: 2.5px solid #FFFFFF;
  border-radius: 4px;
  cursor: se-resize;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
body.dark .studio-field-box-handle { border-color: #0E1413; }

/* ── Panel lateral del editor ──────────────────────────────── */
.studio-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.studio-editor-panel > label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}
.studio-editor-panel > label::before {
  content: '1';
  display: inline-flex;
  width: 20px; height: 20px;
  background: var(--lime);
  color: #0E1413;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  margin-right: 8px;
  vertical-align: -3px;
}
.studio-editor-panel #studio-template-name {
  width: 100%;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-weight: 500;
  border-radius: 10px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  transition: border-color 0.15s ease;
}
.studio-editor-panel #studio-template-name:focus {
  border-color: var(--lime) !important;
  outline: none;
}
.studio-fields-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.studio-fields-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.studio-fields-title::before {
  content: '2';
  display: inline-flex;
  width: 20px; height: 20px;
  background: var(--lime);
  color: #0E1413;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.studio-field-edit .studio-fields-title::before { content: '3'; }
.studio-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.studio-field-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  letter-spacing: -0.01em;
  transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}
.studio-field-btn:hover {
  border-color: var(--lime);
  background: var(--lime-glow);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.studio-field-btn:active {
  transform: translateY(0);
}
.studio-field-btn i {
  width: 18px !important;
  height: 18px !important;
  color: var(--lime);
}
body.light .studio-field-btn i { color: #5A6D00; }

.studio-field-edit {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.studio-field-edit-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.studio-field-edit-controls .btn-icon-danger {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: #DC2626;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.12s ease;
}
.studio-field-edit-controls .btn-icon-danger:hover {
  background: #DC2626;
  color: white;
  border-color: #DC2626;
}
.studio-field-edit-controls .btn-icon-danger::after {
  content: 'Quitar caja';
}

.studio-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* ── Preview modal ─────────────────────────────────────────── */
.studio-preview-card {
  max-width: 920px;
  width: 95vw;
}
.studio-preview-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 300px;
  gap: 28px;
  margin-top: 16px;
  align-items: center;
}
/* Phone-bezel wrapper alrededor del canvas */
.studio-preview-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  background: #0E1413;          /* frame oscuro tipo bezel */
  border-radius: 32px;
  overflow: hidden;
  margin: 12px auto 0;
  padding: 14px 10px;           /* "borde" del phone */
  box-shadow:
    0 30px 70px rgba(0,0,0,0.30),
    0 8px 22px rgba(0,0,0,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  box-sizing: border-box;
}
/* Notch decorativo simulado arriba */
.studio-preview-stage::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
}
.studio-preview-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 20px;
  background: #F4F4F0;
}
.studio-preview-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(14, 20, 19, 0.85);
  z-index: 2;
  border-radius: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.studio-preview-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.studio-preview-panel select {
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500;
}
.studio-preview-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.studio-preview-actions .btn-primary {
  padding: 12px 16px !important;
  font-size: 14px !important;
}

@media (max-width: 768px) {
  .studio-editor-grid,
  .studio-preview-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .studio-editor-stage,
  .studio-preview-stage {
    max-width: 280px;
  }
  .studio-fields-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .studio-field-btn {
    font-size: 10.5px;
    padding: 10px 6px;
  }
  .studio-templates-list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
}

/* ── Botones icon-only en card de propiedad (Story, Comparar, Editar) ── */
.property-card-actions .btn-card-icon {
  flex: 0 0 34px;        /* ancho fijo para los icon-only */
  padding: 7px 0;
  min-width: 0;
}
.property-card-actions .btn-card-icon svg {
  width: 14px;
  height: 14px;
}
/* Story: tinte sutil lime (no agresivo) — accent discreto que se nota sin gritar */
.btn-card-story {
  color: var(--lime) !important;
  border-color: rgba(165, 213, 47, 0.35);
}
.btn-card-story:hover {
  background: var(--lime-glow);
  border-color: var(--lime);
}
body.light .btn-card-story { color: #5A6D00 !important; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .studio-editor-grid,
  .studio-preview-grid {
    grid-template-columns: 1fr;
  }
  .studio-editor-stage,
  .studio-preview-stage {
    max-width: 280px;
  }
  .studio-fields-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ============================================================
   PANEL DE ÍNDICES (módulo Hoy · Bloque 42)
   ============================================================ */
.hoy-indices {
  margin: 18px 0 22px;
}
.indices-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.indices-row::-webkit-scrollbar { height: 4px; }
.indices-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.indice-chip {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  cursor: default;
  text-align: left;
  min-width: 150px;
  min-height: 84px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.indice-chip.is-clickable {
  cursor: pointer;
}
.indice-chip.is-clickable:hover {
  border-color: var(--lime);
  background: var(--lime-glow);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.indice-chip.is-loading {
  background: var(--bg);
  pointer-events: none;
}
.indice-chip.is-loading .indice-chip-label,
.indice-chip.is-loading .indice-chip-value {
  background: var(--border);
  border-radius: 4px;
  min-height: 10px;
  width: 60px;
  animation: indicePulse 1.2s ease-in-out infinite;
}
.indice-chip.is-loading .indice-chip-value { width: 80px; min-height: 14px; }
@keyframes indicePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.indice-chip-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.indice-chip-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.indice-chip.is-up .indice-chip-value { color: #16A34A; }
.indice-chip.is-down .indice-chip-value { color: #DC2626; }
body.light .indice-chip.is-up .indice-chip-value { color: #15803D; }
body.light .indice-chip.is-down .indice-chip-value { color: #B91C1C; }

@media (max-width: 768px) {
  .indice-chip {
    flex: 0 0 auto;        /* en mobile no estiramos, scroll horizontal */
    min-width: 130px;
    min-height: 72px;
    padding: 12px 14px;
  }
  .indice-chip-value { font-size: 18px; }
  .indice-chip-label { font-size: 10.5px; }
}

/* ============================================================
   BLOQUES EXCLUSIVOS DE LINKEO MOTOS
   (Repuestos, Taller Kanban, AI Score, Notif Prefs, contactos lista,
    backgrounds taller-kanban y repuestos, helpers stock-bajo)
   ============================================================ */

/* ============================================================
   TALLER KANBAN — 5 columnas para flujo de OTs
   ============================================================ */
#view-taller-kanban #taller-kanban-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 1200px) {
  #view-taller-kanban #taller-kanban-board { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  #view-taller-kanban #taller-kanban-board { grid-template-columns: repeat(2, 1fr); }
}
.kanban-col-taller {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: 200px;
  padding: 12px 10px;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, background 0.15s;
}
.kanban-col-taller.drag-over {
  border-color: var(--accent-text);
  background: var(--surface-hover);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.kanban-col-taller .kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.kanban-col-taller .kanban-col-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.kanban-col-taller .kanban-col-count {
  font-size: 11px; padding: 2px 8px;
  border-radius: 10px; background: var(--surface-2);
  color: var(--text-muted); font-weight: 700;
}
.kanban-col-cards { display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.kanban-col-empty {
  font-size: 11px; text-align: center; padding: 16px 0;
  font-style: italic; opacity: 0.5;
}
.kanban-card-taller {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  font-size: 12.5px;
}
.kanban-card-taller:hover {
  border-color: var(--accent-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.kanban-card-taller.dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.kanban-card-taller .kanban-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.kanban-card-taller .kanban-card-prop {
  font-size: 11.5px; color: var(--text-muted);
  margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.kanban-card-taller .kanban-card-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-muted);
}
.kanban-card-taller .kanban-card-tag {
  background: var(--surface-2);
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px; font-weight: 700;
}
.kanban-dias-badge {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
}
.kanban-dias-alarma {
  background: rgba(248, 113, 113, 0.18);
  color: var(--danger);
}
/* Botón inline en card kanban para Comprobante de Entrega */
.kanban-card-entrega-btn {
  margin-top: 8px;
  width: 100%;
  background: var(--accent-text);
  color: var(--navy);
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .15s ease, transform .15s ease;
}
.kanban-card-entrega-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.kanban-card-entrega-btn.entregada {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px dashed var(--border);
}
.btn-card-success {
  background: rgba(34, 197, 94, 0.12) !important;
  color: var(--success) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  font-weight: 700;
}

/* ============================================================
   REPUESTOS EN OT — tab Repuestos del modal de contrato
   ============================================================ */
.repuestos-ot-wrap { display: flex; flex-direction: column; gap: 14px; }
.repuestos-ot-search-wrap { position: relative; }
.repuesto-autocomplete-results {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 4px;
  max-height: 260px; overflow-y: auto;
  z-index: 100;
  box-shadow: var(--shadow-md);
}
.repuesto-ac-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.repuesto-ac-item:last-child { border-bottom: none; }
.repuesto-ac-item:hover { background: var(--surface-hover); }
.repuesto-ac-main { font-size: 13px; }
.repuesto-ac-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; gap: 6px; }
.repuesto-ac-empty {
  padding: 14px;
  text-align: center; color: var(--text-muted);
  font-size: 12px; font-style: italic;
}
.repuestos-ot-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 60px;
}
.repuesto-ot-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.repuesto-ot-row:last-child { border-bottom: none; }
.repuesto-ot-info { min-width: 0; overflow: hidden; }
.repuesto-ot-name { font-weight: 600; }
.repuesto-ot-qty {
  display: flex; align-items: center; gap: 4px;
}
.btn-qty {
  min-width: 26px; padding: 2px 6px !important;
  font-weight: 800;
}
.repuesto-ot-qty-val {
  min-width: 24px; text-align: center;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.repuesto-ot-price, .repuesto-ot-subtotal {
  font-variant-numeric: tabular-nums; text-align: right;
  min-width: 80px;
}
.repuesto-ot-subtotal { font-weight: 700; color: var(--accent-text); }
.repuestos-ot-totals {
  display: flex; justify-content: flex-end;
  gap: 12px; padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 14px;
}
.repuestos-ot-totals strong { color: var(--accent-text); font-size: 16px; }

/* ============================================================
   AI SCORE — badge en card del kanban + box en modal del lead
   ============================================================ */
.ai-score-badge {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid currentColor;
  background: var(--surface-2);
}
.ai-score-badge.temp-hot   { color: #ef4444; background: rgba(239,68,68,0.14); }
.ai-score-badge.temp-warm  { color: #f59e0b; background: rgba(245,158,11,0.14); }
.ai-score-badge.temp-cool  { color: #60a5fa; background: rgba(96,165,250,0.14); }
.ai-score-badge.temp-cold  { color: #94a3b8; background: rgba(148,163,184,0.14); }

.ai-score-box {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius);
}
.ai-score-box.temp-hot   { border-left-color: #ef4444; }
.ai-score-box.temp-warm  { border-left-color: #f59e0b; }
.ai-score-box.temp-cool  { border-left-color: #60a5fa; }
.ai-score-box.temp-cold  { border-left-color: #94a3b8; }

.ai-score-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.ai-score-header .ai-score-badge {
  font-size: 14px; padding: 4px 12px;
}
.ai-score-temp {
  font-family: 'Outfit', sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.ai-score-reasons {
  font-size: 13px; line-height: 1.55;
  color: var(--text); margin-bottom: 8px;
}
.ai-score-recommendation {
  font-size: 13px; font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 8px 10px; border-radius: 6px;
  margin-bottom: 6px;
}
.ai-score-recommendation:empty { display: none; }
.ai-score-meta {
  font-size: 11px; color: var(--text-faint);
  margin-top: 4px;
}

/* ============================================================
   NOTIF PREFS — checkboxes de tipos de notificación
   ============================================================ */
.notif-prefs-group { margin-bottom: 18px; }
.notif-prefs-group-title {
  font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.notif-pref-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
  margin-bottom: 4px;
}
.notif-pref-row:hover { background: var(--surface-hover); }
.notif-pref-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent-text);
  cursor: pointer;
}
.notif-pref-row > span {
  display: flex; flex-direction: column;
  font-size: 13px; line-height: 1.4;
}
.notif-pref-row strong { color: var(--text); font-weight: 700; }
.notif-pref-desc {
  font-size: 12px; color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
}

/* ── View toggle (grilla / mapa) ── */
.view-toggle {
  display: flex; gap: 2px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px;
}
.view-toggle-btn {
  padding: 5px 8px; border: none; background: transparent;
  border-radius: 4px; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center;
  transition: all 0.13s;
}
.view-toggle-btn.active, .view-toggle-btn:hover {
  background: var(--surface-2); color: var(--accent-text);
}

/* ── Mapa ── */
.properties-map {
  height: calc(100vh - 200px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
/* Estilo Leaflet oscuro */
.properties-map .leaflet-tile { filter: invert(0.9) hue-rotate(180deg); }
body.light .properties-map .leaflet-tile { filter: none; }
.map-marker {
  padding: 3px 8px; border-radius: 12px;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px;
  color: #06091A; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.map-popup { font-family: 'Plus Jakarta Sans', sans-serif; min-width: 160px; }
.map-empty-overlay {
  position: absolute; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,15,30,0.85); color: var(--text-muted);
  font-size: 13px; text-align: center; padding: 20px;
  pointer-events: none;
}

/* ── Comparador ── */
.comparador-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.comparador-table th, .comparador-table td {
  padding: 10px 14px; border: 1px solid var(--border);
  text-align: left;
}
.comparador-table thead th {
  background: var(--bg-2); font-weight: 700; color: var(--text);
  position: sticky; top: 0; z-index: 1;
}
.comp-label { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.comparador-table tbody tr:nth-child(even) { background: var(--surface); }
.comparador-table tbody tr:hover { background: var(--surface-hover); }
.modal-wide { max-width: 900px !important; width: 95vw !important; }

/* ── Vista lista alfabética ───────────────────────── */
/* ── Vista lista alfabética ───────────────────────── */
.contacts-grid.contacts-list-mode {
  display: block;
  padding-top: 0;
}
.contact-letter-group { margin-bottom: 18px; }
.contact-letter-header {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent-text);
  padding: 8px 4px 6px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 2;
}
body.light .contact-letter-header { color: var(--lime-deep, #6fa800); }
.contact-list-rows { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.contact-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.contact-list-row:hover {
  border-color: var(--accent-text);
  background: var(--surface-hover);
}
.contact-avatar.contact-avatar-sm {
  width: 32px; height: 32px; font-size: 12px;
}
.contact-list-info { flex: 1; min-width: 0; }
.contact-list-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contact-list-sub {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contact-list-meta {
  font-size: 11px; color: var(--text-faint);
  flex-shrink: 0;
}
.contact-card:hover {
  border-color: var(--accent-text);
  box-shadow: 0 4px 18px rgba(200,255,0,0.08);
  transform: translateY(-1px);
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-avatar {
  width: 42px; height: 42px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-deep));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--accent-text);
  letter-spacing: 0.02em;
}

.contact-card-info { flex: 1; min-width: 0; }
.contact-card-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.contact-card-search {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  line-height: 1.45;
}

.contact-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.contact-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 9px;
}

.contact-wa-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  color: #25D366;
  text-decoration: none;
  background: rgba(37,211,102,0.08);
  border: 1px solid rgba(37,211,102,0.22);
  border-radius: 20px;
  padding: 4px 10px;
  transition: background 0.15s;
}
.contact-wa-btn:hover { background: rgba(37,211,102,0.16); }



#view-taller-kanban {
  /* Taller Kanban: moto en reparación con mecánicos */
  background-image:
    linear-gradient(rgba(6,9,26,0.88), rgba(6,9,26,0.88)),
    url('https://images.unsplash.com/photo-1591768793355-74d04bb6608f?w=1920&q=40&auto=format&fit=crop');
  background-size: cover; background-position: center; background-attachment: fixed;
}

#view-repuestos {
  /* Repuestos: partes / herramientas de taller */
  background-image:
    linear-gradient(rgba(6,9,26,0.88), rgba(6,9,26,0.88)),
    url('https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?w=1920&q=40&auto=format&fit=crop');
  background-size: cover; background-position: center; background-attachment: fixed;
}

.stock-bajo { color: var(--warning); font-weight: 700; }
.stock-cero { color: var(--danger); font-weight: 800; }

.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th.num { text-align: right; }