:root {
  /* ─────────────────────────────────────────────────────────────────────────
     SISTEMA DE MARCA RE/MAX  (rojo + azul + blanco)
     El rojo es el acento primario; el azul, el secundario/estructural.
     Históricamente la app usaba --teal como acento único: lo repuntamos al rojo
     RE/MAX para que todas las referencias `var(--teal)` adopten la marca.
     ──────────────────────────────────────────────────────────────────────── */
  --rmx-red: #dc1c2e;        /* Rojo RE/MAX — primario, estado "venta", CTAs */
  --rmx-red-dark: #b3121f;   /* hover/pressed del rojo */
  --rmx-red-soft: #f04555;   /* rojo claro para realces */
  --rmx-blue: #003da5;       /* Azul RE/MAX — secundario, estado "alquiler" */
  --rmx-blue-dark: #002b73;
  --rmx-blue-soft: #1857c4;

  /* Estados de las captaciones (badges del catálogo) */
  --st-venta: var(--accent);
  --st-alquiler: var(--rmx-blue);
  --st-anticretico: #0a8f6e;
  --st-captacion: #e08a00;

  --page-bg: #eef2f7;
  --ice-0: #ffffff;
  --ice-1: #f7f9fc;
  --ice-2: #eef2f7;
  --ice-3: #e2e8f1;
  --ink: #16263d;            /* navy tinta — texto principal */
  --ink-soft: #44566b;
  --ink-muted: #6b7c8f;
  /* Alias de compatibilidad: el código viejo referencia --teal / --teal-dark.
     Ahora apuntan al rojo de marca para no tener que tocar cada ocurrencia. */
  --teal: var(--accent);
  --teal-dark: var(--accent-dark);
  --line: rgba(20, 38, 61, 0.12);
  --shadow-soft: 0 14px 40px rgba(16, 27, 45, 0.10);
  --shadow-hover: 0 22px 56px rgba(16, 27, 45, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-modal: 0 30px 80px rgba(16, 27, 45, 0.22);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --ring: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
  /* Curvas de easing tokenizadas (mantienen las 3 curvas ya en uso) */
  --ease-out: cubic-bezier(.2, .8, .2, 1);      /* UI general: entra rápido, responde */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);    /* movimiento en pantalla (stepper) */
  --ease-panel: cubic-bezier(.22, .61, .36, 1); /* paneles del wizard */
  --ease-out-premium: cubic-bezier(.22, 1, .36, 1); /* tarjetas/botones de Mercado */
  /* Curva "resorte" (2026-09-09): pequeño rebote al asentarse, para que la
     apertura de fichas/modales y los botones se sientan con más carácter.
     Solo se usa en `transform` — nunca en color/background/box-shadow, donde
     un rebote se ve como parpadeo en vez de movimiento. */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ─────────────────────────────────────────────────────────────────────────
     IntraPlus — capa "dashboard limpio" (SaaS)
     Fondos sólidos, superficies planas y sombras suaves. Reemplaza el look
     glassmorphism por un sistema de superficies opacas + borde sutil.
     ──────────────────────────────────────────────────────────────────────── */
  --bg: #f1f4f9;             /* fondo de la app (sólido) */
  --surface: #ffffff;        /* tarjetas / paneles */
  --surface-2: #f7f9fc;      /* superficies secundarias (inputs, chips) */
  --surface-3: #eef2f7;      /* realces / hovers suaves */
  --border: #e4e9f0;         /* borde neutro de superficies */
  --border-strong: #d3dbe6;
  --shadow-sm: 0 1px 2px rgba(16,27,45,.06), 0 2px 8px rgba(16,27,45,.05);
  --shadow-md: 0 4px 14px rgba(16,27,45,.08), 0 10px 30px rgba(16,27,45,.06);
  --shadow-lg: 0 12px 40px rgba(16,27,45,.14);
  --sidebar-w: 250px;
  --topbar-h: 62px;
  --radius-card: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  /* overflow-x: clip (no "hidden"): "hidden" forzaría overflow-y:auto y convertiría al
     body en contenedor de scroll, rompiendo el position:sticky del mapa. */
  overflow-x: clip;
  color: var(--ink);
  line-height: 1.5;
  font-family: "Inter", "Segoe UI", Tahoma, sans-serif;
  background: var(--bg);
  color-scheme: light;
}

body.app-locked { overflow: hidden; }

.app-lockable { transition: opacity .22s ease, transform .22s ease, filter .22s ease; }
body.app-locked .app-lockable { opacity: 0; pointer-events: none; user-select: none; filter: blur(8px); transform: translateY(8px); }
.container { width: min(1220px, calc(100% - 40px)); margin: 0 auto; }

.login-gate {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(var(--accent-rgb), .06), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(0,61,165,.06), transparent 60%),
    var(--bg);
}
.login-shell { width: min(460px, 100%); }
.login-card {
  position: relative; overflow: hidden; padding: 34px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
/* Cinta de marca RE/MAX en el borde superior de la tarjeta de login */
.login-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent) 0 50%, var(--rmx-blue) 50% 100%);
}
/* Estructura base de los pseudo-elementos de acento (el bevel glass se retira;
   .summary::before y .card::after conservan su acento de marca más abajo). */
.card::before, .summary::before {
  content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
  background: none;
}
.login-brand { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-mark {
  width: 46px; height: 46px; border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(232,243,245,.82)), radial-gradient(circle at 65% 25%, rgba(var(--accent-rgb), .32), transparent 42%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 9px 9px 24px rgba(98,126,140,.14), -10px -10px 24px rgba(255,255,255,.9);
}
.login-brand strong, .brand-copy strong { display: block; color: var(--ink); font-size: 15px; letter-spacing: -.01em; }
.login-brand span, .brand-copy span { display: block; color: var(--ink-muted); font-size: 12px; }
.login-card h1 { position: relative; margin: 0; color: var(--ink); font-size: clamp(30px, 4vw, 40px); line-height: 1; letter-spacing: -.05em; }
.login-card p { position: relative; margin: 12px 0 0; color: var(--ink-soft); }
.login-form { position: relative; display: grid; gap: 12px; margin-top: 24px; }
.login-form label { display: grid; gap: 8px; }
.login-form label span { color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.login-form input, .login-form button { width: 100%; }
.login-form button { margin-top: 4px; min-height: 50px; }
.login-error { min-height: 20px; margin: 0; color: #c63d45; font-size: 13px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHELL — Sidebar fija + área principal + topbar delgado (dashboard limpio)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; z-index: 40;
  width: var(--sidebar-w); height: 100vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  transition: transform .28s var(--ease-out);
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.sidebar-brand .brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 4px 8px; border-radius: 11px; background: #fff; border: 1px solid var(--border);
}
.sidebar-brand .brand-logo { display: block; height: 30px; width: auto; }
.brand-copy { display: grid; gap: 1px; min-width: 0; }
.brand-copy strong { display: block; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.brand-copy span { display: block; color: var(--ink-muted); font-size: 11px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 3px; align-content: start; }
.sidebar-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 10px 12px; border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; color: var(--ink-soft); text-align: left;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  transition: background .16s var(--ease-out), color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.sidebar-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-link:hover { background: var(--surface-3); color: var(--ink); box-shadow: none; transform: none; }
.sidebar-link.active { background: rgba(var(--accent-rgb), .10); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar-link:active { transform: none; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 4px 6px; min-width: 0; }
.sidebar-user-avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
}
.sidebar-user-info { min-width: 0; display: grid; gap: 1px; }
.sidebar-user-info strong { color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-info span { color: var(--ink-muted); font-size: 11px; }
.sidebar-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--ink-soft); font-size: 13px; font-weight: 700;
}
.sidebar-logout:hover { border-color: rgba(var(--accent-rgb), .4); color: var(--accent); background: #fff; transform: none; box-shadow: none; }
.sidebar-logout svg { width: 17px; height: 17px; }

/* Overlay para cerrar la sidebar en mobile */
.sidebar-overlay { position: fixed; inset: 0; z-index: 39; background: rgba(16,27,45,.42); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
body.nav-open .sidebar-overlay { opacity: 1; visibility: visible; }

/* ── Área principal + topbar delgado ─────────────────────────────────────── */
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .28s var(--ease-out); }
.app-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: var(--topbar-h); padding: 0 clamp(16px, 3vw, 32px);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.app-topbar-title { margin: 0; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.nav-toggle {
  display: inline-flex; width: 42px; height: 42px; min-height: 42px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--ink);
  align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-toggle:hover { background: var(--surface-3); transform: none; box-shadow: none; border-color: var(--border-strong); }
.nav-toggle svg { width: 20px; height: 20px; }

/* Ocultar el sidebar en desktop para ganar espacio (toggle desde el topbar) */
body.sidebar-hidden .sidebar { transform: translateX(-100%); }
body.sidebar-hidden .app-main { margin-left: 0; }

/* ── Page header uniforme por vista ──────────────────────────────────────── */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 4px 0 22px; }
.page-header h2 { margin: 0; color: var(--ink); font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.page-header p { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; max-width: 72ch; }
.page-header-counter {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 96px; padding: 10px 18px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.page-header-counter strong { font-size: 26px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.page-header-counter span { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ═══════════════════════════════════════════════════════════════════════════
   VISTA INICIO — portada institucional
   ═══════════════════════════════════════════════════════════════════════════ */
.inicio-hero {
  position: relative; overflow: hidden;
  padding: clamp(28px, 4vw, 44px); margin-bottom: 26px;
  border-radius: var(--radius-card); border: 1px solid var(--border);
  background:
    radial-gradient(680px 320px at 100% -20%, rgba(var(--accent-rgb), .10), transparent 60%),
    radial-gradient(560px 320px at -10% 120%, rgba(0,61,165,.10), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}
.inicio-hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent) 0 50%, var(--rmx-blue) 50% 100%);
}
.inicio-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.inicio-hero h1 { margin: 16px 0 0; color: var(--ink); font-size: clamp(32px, 5vw, 52px); line-height: 1.02; letter-spacing: -.05em; }
.inicio-hero h1 b { color: var(--accent); }
.inicio-hero p { margin: 14px 0 0; max-width: 64ch; color: var(--ink-soft); font-size: 15px; }
.inicio-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.inicio-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 11px 20px;
  border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  font-size: 14px; font-weight: 800; text-decoration: none;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark)); color: #fff;
  box-shadow: 0 10px 22px rgba(var(--accent-rgb), .24);
  transition: transform .16s var(--ease-out), box-shadow .24s var(--ease-out), background .24s var(--ease-out);
}
.inicio-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(var(--accent-rgb), .3); background: linear-gradient(145deg, var(--accent-soft), var(--accent)); }
.inicio-cta--ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.inicio-cta--ghost:hover { background: #fff; border-color: rgba(var(--accent-rgb), .4); color: var(--accent); box-shadow: var(--shadow-sm); }

/* Encabezado de subsección dentro de Inicio */
.inicio-block { margin: 30px 0 14px; }
.inicio-block h3 { margin: 0; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.inicio-block p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; }

/* Bloque "Sobre RE/MAX Plus": texto + puntos clave */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: stretch; }
.about-card {
  padding: 24px; border-radius: var(--radius-card); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.about-card h4 { margin: 0 0 10px; color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.about-card p { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.about-card p:last-child { margin-bottom: 0; }
.about-card--placeholder { border-style: dashed; }
.about-note { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-muted); font-size: 12px; }

.about-stats { display: grid; gap: 12px; align-content: start; }
.about-stat {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
}
.about-stat-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  background: rgba(var(--accent-rgb), .10); color: var(--accent);
}
.about-stat b { display: block; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.about-stat span { display: block; margin-top: 3px; color: var(--ink-muted); font-size: 12px; font-weight: 600; }

/* Puntos de valor de la agencia */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.value-card { padding: 20px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.value-card-ico {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 12px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  background: rgba(0,61,165,.10); color: var(--rmx-blue);
}
.value-card h4 { margin: 0 0 6px; color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.value-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }

/* Accesos rápidos a las secciones */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.quick-card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 20px; border-radius: var(--radius-card); border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; text-align: left;
  transition: transform .32s var(--ease-spring), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
.quick-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-md); border-color: rgba(var(--accent-rgb), .28); }
.quick-card:active { transform: translateY(-2px) scale(.97); }
.quick-card-ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), .10); color: var(--accent);
}
.quick-card-ico svg { width: 24px; height: 24px; }
.quick-card strong { color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.quick-card span { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.quick-card-go { margin-top: auto; color: var(--accent); font-size: 13px; font-weight: 800; }

.app-view.is-hidden { display: none; }
/* Transición de entrada al cambiar de vista (se re-dispara vía reflow en setActiveView).
   Movimiento con resorte (2026-09-09): entra desde más abajo y un poco más chica,
   con un pequeño rebote al asentarse — bien distinto del fade plano anterior. */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(26px) scale(.975); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.app-view.view-anim { animation: viewIn .5s var(--ease-spring) both; }
.app-shell { position: relative; z-index: 1; padding: 26px 0 60px; }

.filters, .properties-filters {
  position: relative; isolation: isolate; display: grid; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ice-0);
  box-shadow: var(--shadow-soft);
}
.filters { margin-top: 24px; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 18px; }
.properties-filters { margin-top: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px; }
.filters > *, .properties-filters > * { width: 100%; }

input, select, button {
  min-height: 46px; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 11px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px;
  transition: border-color .24s var(--ease-out), box-shadow .24s var(--ease-out), transform .16s var(--ease-out), background .24s var(--ease-out), color .24s var(--ease-out);
  appearance: none;
}
/* Los botones (no los campos de texto/select) llevan su propio resorte, pero
   SOLO en el transform: un rebote en el press/hover se siente bien en un botón
   y raro en un input o un <select>. Un rebote en color/background/box-shadow
   se ve como parpadeo, así que esas propiedades se quedan en --ease-out. */
button {
  transition: border-color .24s var(--ease-out), box-shadow .24s var(--ease-out),
              transform .32s var(--ease-spring), background .24s var(--ease-out), color .24s var(--ease-out);
}
input::placeholder { color: rgba(79,101,120,.66); }
select {
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 4px), calc(100% - 12px) calc(50% - 4px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
select:focus, select:hover {
  background-image: linear-gradient(45deg, transparent 50%, var(--teal) 50%), linear-gradient(135deg, var(--teal) 50%, transparent 50%);
}
input:hover, select:hover, button:hover { border-color: rgba(var(--accent-rgb), .42); box-shadow: var(--shadow-sm); background: #fff; }
input:focus, select:focus { outline: none; border-color: rgba(var(--accent-rgb), .62); box-shadow: var(--ring); background: #fff; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: none; border-color: rgba(var(--accent-rgb), .62); box-shadow: var(--ring); background: #fff; }
button:focus:not(:focus-visible) { box-shadow: none; }
button { cursor: pointer; font-weight: 800; }
button:disabled, button[disabled] {
  opacity: .5; cursor: not-allowed; transform: none !important;
  box-shadow: none; filter: saturate(.85);
}
button:disabled:hover, button[disabled]:hover { transform: none; box-shadow: none; border-color: rgba(124,151,164,.26); background: rgba(255,255,255,.68); }
/* CTAs primarios RE/MAX: rojo de marca */
.login-form button, .pdfLink, .modal-link {
  border-color: transparent; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); color: #ffffff;
  box-shadow: 0 12px 26px rgba(var(--accent-rgb), .28), inset 0 1px 0 rgba(255,255,255,.18);
}
.login-form button:hover, .pdfLink:hover, .modal-link:hover {
  transform: translateY(-3px) scale(1.02); border-color: transparent; background: linear-gradient(145deg, var(--accent-soft), var(--accent));
  box-shadow: 0 18px 34px rgba(var(--accent-rgb), .34);
}
/* Botones "Limpiar filtros": secundario neutro (acción de menor jerarquía) */
#clearBtn, #propClearBtn {
  border-color: rgba(20,38,61,.16); background: #ffffff; color: var(--ink);
  box-shadow: 0 6px 16px rgba(16,27,45,.08);
}
#clearBtn:hover, #propClearBtn:hover {
  transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .5); color: var(--accent);
  background: #fff; box-shadow: 0 12px 24px rgba(16,27,45,.1);
}

/* Press feedback — la UI confirma que "escuchó" el click. El resorte del
   transform (--ease-spring, definido arriba) hace que el botón "rebote" al
   volver a su tamaño normal en vez de solo encogerse y volver en línea recta. */
button:active { transform: scale(.93); }
#clearBtn:active, #propClearBtn:active, .login-form button:active,
.pdfLink:active, .modal-link:active, #fctWordBtn:active { transform: translateY(-1px) scale(.93); }
.pagination-btn:active, .chip:active { transform: translateY(-1px) scale(.92); }
.modal-close:active { transform: rotate(90deg) scale(.88); }

.summary {
  position: relative; overflow: hidden; margin: 18px 0; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--ice-1); color: var(--ink-soft);
  box-shadow: 0 4px 14px rgba(16,27,45,.05);
  font-weight: 700; letter-spacing: .005em;
}
/* Acento RE/MAX a la izquierda del resumen */
.summary::before { background: var(--accent); inset: 0 auto 0 0; width: 4px; border-radius: 14px 0 0 14px; }

.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px; }
.card {
  position: relative; overflow: hidden; display: grid; gap: 14px; min-height: 330px; padding: 22px;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background:
    radial-gradient(320px 220px at 100% 0%, rgba(var(--accent-rgb), .05), transparent 60%),
    var(--ice-0);
  box-shadow: var(--shadow-soft); cursor: pointer; transform: translateY(0);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, background .32s ease;
}
/* Cinta de acento RE/MAX en el borde superior de la tarjeta de proyecto */
.card::before { background: linear-gradient(135deg, rgba(var(--accent-rgb), .04), transparent 60%); }
.card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--rmx-blue));
  transform: scaleX(0); transform-origin: left; opacity: .9;
  transition: transform .4s var(--ease-out); pointer-events: none;
}
.card:hover::after { transform: scaleX(1); }
.card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .28); box-shadow: var(--shadow-hover); }
.card:active { transform: translateY(-2px); }
.card h2 { position: relative; z-index: 1; margin: 0; padding-bottom: 13px; color: var(--ink); font-size: 22px; line-height: 1.15; letter-spacing: -.04em; }
.card h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 76px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), rgba(var(--accent-rgb), 0)); }
.grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card p { position: relative; z-index: 1; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.grid p, .contact p, .sourceRow, .modal-grid p, .modal-full { padding: 11px 13px; border-radius: 12px; background: var(--ice-1); border: 1px solid var(--line); }
.contact { position: relative; z-index: 1; display: grid; gap: 9px; }
.sourceRow { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdfLink { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 14px; border-radius: 16px; text-decoration: none; font-size: 13px; font-weight: 800; transition: transform .16s var(--ease-out), box-shadow .24s var(--ease-out), background .24s var(--ease-out), border-color .24s var(--ease-out); }
.pdfMissing { display: none; color: var(--ink-muted); font-size: 13px; font-weight: 700; }
.card strong, .prop-card strong, .modal-content strong { color: var(--ink); font-weight: 800; }
.empty-state { min-height: auto; text-align: center; color: var(--ink-soft); }

.properties-shell {
  /* overflow visible: un ancestro con overflow:hidden rompería el position:sticky del mapa */
  position: relative; overflow: visible; margin-top: 8px; padding: 26px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.properties-head, .properties-filters, .properties-pagination, .properties-cards { position: relative; z-index: 1; }
.properties-head h2 { margin: 0; color: var(--ink); font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.05em; line-height: 1.02; }
.properties-head p { margin: 10px 0 0; color: var(--ink-soft); }
.properties-filters input, .properties-filters select, .properties-filters button { min-height: 46px; }
.properties-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; margin-top: 18px; align-items: stretch; }

/* ── Tarjeta de propiedad (estilo portal inmobiliario) ──────────────────────
   Cuadrícula simétrica: todas las tarjetas comparten alto gracias a
   grid-template-rows: auto 1fr (foto fija + cuerpo flexible).               */
.prop-card {
  position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr;
  border: 1px solid var(--line); border-radius: 18px; padding: 0;
  background: var(--ice-0);
  box-shadow: 0 6px 20px rgba(16,27,45,.07);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  cursor: pointer;
}
.prop-card:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), .28); box-shadow: 0 18px 40px rgba(16,27,45,.16); }
.prop-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.prop-card-media {
  position: relative; width: 100%; aspect-ratio: 16 / 11; overflow: hidden;
  background: linear-gradient(145deg, var(--ice-2), var(--ice-3));
}
/* contain: la foto se ve entera (con cover se cortaban los bordes de fotos verticales o panorámicas). */
.prop-card-image { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform .5s var(--ease-out); }
.prop-card:hover .prop-card-image { transform: scale(1.06); }
/* Velo inferior para legibilidad de los badges sobre la foto */
.prop-card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16,27,45,.18) 0%, transparent 26%); }
.prop-card-media-empty { display: grid; place-items: center; }
.prop-media-empty-label { color: var(--ink-muted); font-size: 13px; font-weight: 800; letter-spacing: .02em; }

/* Badge de estado (esquina sup. izq.) — color por categoría */
.prop-badge {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  padding: 6px 12px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(16,27,45,.22);
}
.prop-badge--venta       { background: var(--st-venta); }
.prop-badge--alquiler    { background: var(--st-alquiler); }
.prop-badge--anticretico { background: var(--st-anticretico); }
.prop-badge--captacion   { background: var(--st-captacion); }
.prop-badge--propia      { background: var(--accent); }
.prop-badge--red         { background: #546e7a; }
/* Chip de tipo de inmueble (esquina sup. der.) */
.prop-type-chip {
  position: absolute; z-index: 2; top: 12px; right: 12px;
  max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--ink);
  background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(16,27,45,.16);
}

.prop-card-body { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px 16px; min-width: 0; }
.prop-price { color: var(--ink); font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.prop-loc { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.prop-loc-pin { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); }
.prop-loc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.prop-tag { padding: 4px 10px; border-radius: 8px; background: var(--ice-2); border: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; font-weight: 700; }
/* Pie con avatar de iniciales del agente; se ancla abajo (margin-top:auto) */
.prop-agent { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.prop-agent-avatar {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, var(--rmx-blue), var(--rmx-blue-dark));
}
.prop-agent-name { min-width: 0; color: var(--ink-soft); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-drive-link {
  align-self: flex-end; margin-top: 2px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--ice-1);
  color: var(--rmx-blue); font-size: 11px; font-weight: 800;
  text-decoration: none; line-height: 1; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.prop-drive-link:hover {
  background: var(--rmx-blue); border-color: var(--rmx-blue); color: #fff;
  box-shadow: 0 5px 12px rgba(0,61,165,.22);
}
.prop-drive-link:focus-visible { outline: 2px solid var(--rmx-blue); outline-offset: 2px; }
.prop-card-empty { cursor: default; color: var(--ink-muted); text-align: center; padding: 24px; grid-template-rows: none; }
.properties-map { width: 100%; height: 420px; border-radius: 22px; border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); overflow: hidden; z-index: 0; }
.property-pin { background: none; border: none; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(38,54,72,.35)); transition: transform .15s ease; }
.property-pin svg { width: 28px; height: 40px; display: block; }
.property-pin:hover { transform: scale(1.12); }
.prop-card-highlight { outline: 3px solid var(--teal); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .18); animation: propCardPulse 1.1s ease-in-out 2; }
@keyframes propCardPulse { 0%,100% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .18); } 50% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), .05); } }
.properties-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pagination-btn, .pagination-ellipsis { min-width: 40px; height: 38px; border-radius: 14px; border: 1px solid rgba(124,151,164,.2); background: rgba(255,255,255,.62); color: var(--ink); font-size: 13px; font-weight: 800; }
.pagination-btn { cursor: pointer; transition: transform .16s var(--ease-out), border-color .22s var(--ease-out), background .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.pagination-btn:hover { transform: translateY(-2px) scale(1.04); border-color: rgba(var(--accent-rgb), .34); box-shadow: 0 10px 22px rgba(38,54,72,.09); }
.pagination-btn.is-active { background: linear-gradient(145deg, var(--accent), var(--accent-dark)); border-color: transparent; color: #ffffff; box-shadow: 0 8px 18px rgba(var(--accent-rgb), .28); }
.pagination-btn.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; cursor: default; border-style: dashed; color: var(--ink-muted); }

.modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(16,27,45,.5); }
.modal-content {
  position: relative; overflow: auto; width: min(1060px, calc(100% - 24px)); max-height: calc(100vh - 48px); margin: 24px auto; padding: 26px;
  border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modalRise .46s var(--ease-spring) both;
}
.modal.open .modal-backdrop { animation: backdropFade .22s ease both; }
/* z-index alto: el título (#propModalTitle/#modalTitle) tiene z-index:1 y, sin esto,
   tapaba el botón de cerrar interceptando el clic. Debe quedar por encima de todo el modal. */
.modal-close { position: absolute; z-index: 6; top: 18px; right: 18px; width: 42px; height: 42px; min-height: 42px; border-radius: 50%; padding: 0; background: rgba(255,255,255,.72); border: 1px solid rgba(124,151,164,.24); color: var(--ink); box-shadow: 0 10px 20px rgba(38,54,72,.1); }
.modal-close:hover { transform: rotate(90deg); border-color: rgba(var(--accent-rgb), .38); background: rgba(255,255,255,.9); }
.modal-content h3, .modal-content #modalSubtitle, .modal-grid, .modal-full, .modal-link, .detail-title, .detail-search, .detail-chips, .detail-wrap { position: relative; z-index: 1; }
.modal-content h3 { margin: 0; padding-right: 58px; color: var(--ink); font-size: clamp(26px, 3vw, 38px); line-height: 1.02; letter-spacing: -.05em; }
.modal-content #modalSubtitle { margin: 10px 0 20px; color: var(--ink-soft); }
.modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.modal-full { margin-bottom: 10px; }
.modal-link { margin: 8px 0 18px; }

.detail-title { margin: 12px 0 12px; color: var(--ink); font-size: 17px; letter-spacing: -.01em; }
.detail-search { width: 100%; margin: 0 0 12px; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip { min-height: 38px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(124,151,164,.22); background: rgba(255,255,255,.62); color: var(--ink-soft); font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .16s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out), background .22s var(--ease-out), color .22s var(--ease-out); }
.chip:hover { transform: translateY(-2px) scale(1.04); border-color: rgba(var(--accent-rgb), .42); box-shadow: 0 10px 20px rgba(38,54,72,.08); }
.chip.active { background: linear-gradient(145deg, var(--teal), var(--teal-dark)); border-color: rgba(var(--accent-rgb), .64); color: #ffffff; box-shadow: 0 12px 24px rgba(var(--accent-rgb), .18); }
.detail-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background: rgba(255,255,255,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.detail-table-scroll { overflow: auto; }
.detail-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.detail-table th, .detail-table td { padding: 13px 13px; text-align: left; font-size: 13px; border-bottom: 1px solid rgba(124,151,164,.16); }
.detail-table th { position: sticky; top: 0; z-index: 1; color: var(--ink); background: var(--surface-3); font-weight: 800; }
.detail-table td { color: var(--ink-soft); }
.detail-empty { margin: 0; padding: 16px; color: var(--ink-soft); }

.reveal { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity .52s var(--ease-out), transform .52s var(--ease-out), filter .52s var(--ease-out); }
.reveal.in-view { opacity: 1; transform: translateY(0); filter: blur(0); }
.card.reveal.in-view:hover { transform: translateY(-4px); }
@keyframes modalRise { from { opacity: 0; transform: translateY(32px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdropFade { from { opacity: 0; } to { opacity: 1; } }

/* Stagger de entrada para tarjetas de Propiedades (solo primera carga) */
@keyframes propCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.properties-cards.stagger-in .prop-card {
  animation: propCardIn .42s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* En táctil, un tap no debe dejar la tarjeta "elevada" de forma permanente */
@media (hover: none) {
  .card:hover, .prop-card:hover { transform: none; box-shadow: var(--shadow-soft), var(--shadow-inset); }
  .card.reveal.in-view:hover { transform: translateY(0); }
  .prop-card:hover .prop-card-image { transform: none; }
  /* En táctil, el hover persiste tras el tap: neutralizamos los lifts para no dejar
     botones/chips/links "elevados" permanentemente. */
  #clearBtn:hover, #propClearBtn:hover, #fctWordBtn:hover, .pdfLink:hover, .modal-link:hover,
  .chip:hover, .pagination-btn:hover, .hero-pill:hover { transform: none; }
}

/* Sidebar off-canvas en pantallas medianas/pequeñas */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  body.nav-open .sidebar { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .nav-toggle { display: inline-flex; }
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1040px) {
  .filters, .properties-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .properties-shell { padding: 18px; }
  .reveal, .reveal.in-view { opacity: 1; transform: none; filter: none; }
  .filters, .properties-filters { grid-template-columns: 1fr; }
  .results, .properties-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .container { width: min(1220px, calc(100% - 20px)); }
  .app-shell { padding-top: 20px; }
  input, select, button { font-size: 16px; }
  .filters, .properties-filters { padding: 14px; gap: 10px; border-radius: 22px; }
  .summary { padding: 12px 14px; font-size: 13px; }
  .card { min-height: auto; padding: 17px; border-radius: 24px; }
  .grid, .modal-grid { grid-template-columns: 1fr; }
  .modal-content { width: calc(100% - 16px); max-height: calc(100vh - 24px); margin: 12px auto; padding: 18px; border-radius: 24px; }
  .modal-close { top: 12px; right: 12px; width: 38px; height: 38px; min-height: 38px; }
  .detail-table { min-width: 700px; }
}
/* ── Dashboard de métricas ──────────────────────────────────────────────── */

.dash-root { margin-top: 28px; }

.dash-hd { margin-bottom: 28px; }
.dash-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.58); color: var(--ink-soft);
  box-shadow: 0 8px 20px rgba(38,54,72,.07);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.dash-tag::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
  animation: dashPulse 2.4s ease-in-out infinite;
}
@keyframes dashPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
  50%       { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .08); }
}
.dash-h2 {
  margin: 14px 0 0; color: var(--ink);
  font-size: clamp(24px, 3.5vw, 36px); line-height: 1; letter-spacing: -.05em;
}
.dash-sub { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; max-width: 62ch; }

/* Hero de valor gestionado */
.dash-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: center;
  padding: 26px 28px; margin-bottom: 22px;
  border-radius: var(--radius-card); border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease;
}
.dash-hero.in-chart { opacity: 1; transform: translateY(0); }
.dash-hero:hover { box-shadow: var(--shadow-hover), var(--shadow-inset); }
.dash-hero-eyebrow {
  display: block; color: var(--ink-muted); font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
}
.dash-hero-val {
  display: block; margin: 8px 0 6px;
  font-size: clamp(40px, 6vw, 60px); line-height: .96; letter-spacing: -.05em;
  font-weight: 800; color: var(--ink);
  background: linear-gradient(120deg, var(--accent), var(--rmx-blue) 60%, var(--rmx-blue-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dash-hero-note { display: block; color: var(--ink-soft); font-size: 13px; }
.dash-hero-split {
  display: flex; gap: 4px; height: 12px; margin-top: 18px;
  border-radius: 999px; overflow: hidden; background: rgba(124,151,164,.14);
}
.hs-seg { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 1.1s cubic-bezier(.2,.8,.2,1) .25s; }
.dash-hero.in-chart .hs-seg { width: var(--w); }
.hs-inv { background: linear-gradient(90deg, var(--rmx-blue), var(--rmx-blue-soft)); }
.hs-prop { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }
.dash-hero-pills { display: grid; gap: 12px; }
.hero-pill {
  position: relative; padding: 16px 18px;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.hero-pill:hover { transform: translateX(4px); }
.hp-dot { width: 11px; height: 11px; border-radius: 4px; }
.hp-lbl { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.hp-val { grid-column: 3; grid-row: 1; font-size: 22px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.hp-sub { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; font-size: 12px; color: var(--ink-muted); }

/* Etiquetas de grupo */
.dash-group-label {
  display: flex; align-items: center; gap: 14px; margin: 30px 2px 16px;
}
.dash-group-label span {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.dash-group-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* KPI counters */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px; margin-bottom: 8px;
}
.dash-kpi {
  position: relative; overflow: hidden; padding: 20px 18px 18px;
  border-radius: var(--radius-card); border: 1px solid var(--border);
  background:
    radial-gradient(260px 180px at 100% 0%, rgba(var(--kc-rgb),.06), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease;
}
.dash-kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.dash-kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; font-size: 22px;
  background: var(--surface-2); border: 1px solid var(--border);
  margin-bottom: 14px;
}
.dash-kpi-num {
  display: block; font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1; letter-spacing: -.06em; color: var(--ink);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.hp-val, .rank-val, .db-count, .dash-hero-val { font-variant-numeric: tabular-nums; }
.dash-kpi-lbl {
  display: block; margin-top: 6px;
  color: var(--ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.dash-kpi-accent {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--kc), transparent);
  border-radius: 0 0 0 26px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.2,.8,.2,1) .15s;
}
.dash-kpi:hover .dash-kpi-accent,
.dash-kpis.counted .dash-kpi-accent { transform: scaleX(1); }

/* Chart grid */
.dash-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.dash-card {
  position: relative; overflow: hidden; padding: 22px;
  border-radius: var(--radius-card); border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease;
}
.dash-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.dash-card-ttl {
  margin: 0 0 18px; color: var(--ink);
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
}
.dash-card-ttl::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  border-radius: 4px; background: var(--teal); margin-right: 8px;
  vertical-align: middle;
}

/* Donut */
.dash-donut-row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.dash-donut-fig {
  position: relative; flex-shrink: 0;
}
.dash-donut-fig svg { display: block; }

.donut-arc {
  opacity: 0;
  transition: opacity .5s ease;
}
.dash-card.in-chart .donut-arc { opacity: 1; }

.dash-donut-ctr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.dash-donut-ctr strong {
  font-size: 20px; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.04em;
}
.dash-donut-ctr span { font-size: 11px; color: var(--ink-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* Legend */
.dash-legend { display: grid; gap: 10px; flex: 1; min-width: 130px; }
.dl-row { display: flex; align-items: center; gap: 8px; }
.dl-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; }
.dl-lbl { flex: 1; font-size: 12px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-val { font-size: 12px; color: var(--ink); font-weight: 800; white-space: nowrap; }
.dl-val em { font-style: normal; color: var(--ink-muted); font-weight: 600; }

/* Bar chart */
.dash-bars { display: grid; gap: 12px; }
.db-row { display: grid; grid-template-columns: 90px 1fr 28px; align-items: center; gap: 10px; }
.db-lbl { font-size: 12px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.db-track {
  height: 10px; border-radius: 999px;
  background: rgba(124,151,164,.14);
  overflow: hidden;
}
.db-fill {
  height: 100%; border-radius: 999px;
  width: 0;
  transition: width .9s cubic-bezier(.2,.8,.2,1);
}
.dash-card.in-chart .db-fill { width: var(--pct); transition-delay: calc(var(--i, 0) * .07s); }
.db-count { font-size: 12px; color: var(--ink); font-weight: 800; }

/* Ranking de agentes */
.dash-card-wide { grid-column: 1 / -1; }
.dash-rank { display: grid; gap: 12px; }
.rank-row {
  display: grid; grid-template-columns: 20px 38px 1fr auto;
  align-items: center; gap: 12px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i, 0) * .08s);
}
.dash-card.in-chart .rank-row { opacity: 1; transform: translateX(0); }
.rank-pos { font-size: 13px; font-weight: 800; color: var(--ink-muted); text-align: center; }
.rank-avatar {
  width: 38px; height: 38px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: var(--ac);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ac) 38%, transparent);
}
.rank-body { display: grid; gap: 7px; min-width: 0; }
.rank-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-track { height: 8px; border-radius: 999px; background: rgba(124,151,164,.14); overflow: hidden; }
.rank-fill { height: 100%; width: 0; border-radius: 999px; transition: width .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * .08s + .1s); }
.dash-card.in-chart .rank-fill { width: var(--pct); }
.rank-val { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.rank-val em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-muted); }

/* Responsive dashboard */
@media (max-width: 1040px) {
  .dash-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .dash-charts { grid-template-columns: 1fr; }
  .dash-hero { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .dash-charts { gap: 12px; }
  .dash-card { padding: 18px; }
  .dash-hero { padding: 22px; }
  .dash-donut-row { flex-direction: column; align-items: flex-start; }
  .db-row { grid-template-columns: 88px 1fr 34px; }
  .rank-row { grid-template-columns: 18px 34px 1fr auto; gap: 10px; }
}
@media (max-width: 480px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-hero-val { font-size: 40px; }
}

/* ── /Dashboard ─────────────────────────────────────────────────────────── */

/* ── Formulario de Captación (FCT-24001) ───────────────────────────────── */

.fct-shell {
  position: relative; overflow: hidden; margin-top: 8px; padding: 26px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.fct-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; }
.fct-head-logo { width: 140px; height: auto; flex-shrink: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.10)); }
.fct-head h2 { margin: 0; color: var(--ink); font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -.05em; line-height: 1.02; }
.fct-head p { margin: 8px 0 0; color: var(--ink-soft); }

.fct-layout {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; margin-top: 20px; align-items: start;
}
.fct-form { display: grid; gap: 18px; }

/* ── Stepper (indicador de progreso) ─────────────────────────────────────── */
.fct-stepper { position: relative; z-index: 1; margin-top: 18px; }
.fct-stepper-list {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin: 0 0 12px; padding: 0; list-style: none;
}
.fct-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 2px; color: var(--ink-muted); text-align: center; cursor: default;
  user-select: none; transition: color .2s ease;
}
.fct-step.is-clickable { cursor: pointer; }
.fct-step-num {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(124,151,164,.34); background: rgba(255,255,255,.62);
  color: var(--ink-soft); font-size: 13px; font-weight: 800; line-height: 1;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.fct-step-label { font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.fct-step.is-clickable:hover .fct-step-num { border-color: rgba(var(--accent-rgb), .5); transform: translateY(-1px); }
.fct-step.is-done { color: var(--ink-soft); }
.fct-step.is-done .fct-step-num {
  border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .12); color: var(--teal);
}
.fct-step.is-active { color: var(--ink); }
.fct-step.is-active .fct-step-num {
  border-color: transparent; color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), .28), inset 0 1px 0 rgba(255,255,255,.25);
}
.fct-step-track {
  position: relative; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(124,151,164,.2);
}
.fct-step-progress {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transition: width .35s var(--ease-in-out);
}
.fct-step-count { margin: 8px 0 0; color: var(--ink-muted); font-size: 12px; font-weight: 700; }

/* ── Paneles de paso (uno visible a la vez) ──────────────────────────────── */
.fct-step-panel { display: none; }
.fct-step-panel.is-active { display: block; animation: fctStepIn .32s var(--ease-panel); }
@keyframes fctStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Navegación del wizard ───────────────────────────────────────────────── */
.fct-step-nav { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fct-step-nav [hidden] { display: none !important; }
.fct-nav-btn { min-width: 140px; }
.fct-nav-next { margin-left: auto; }
.fct-step-error {
  position: relative; z-index: 1; margin: 0 0 2px; padding: 10px 14px;
  border: 1px solid rgba(214,69,69,.32); border-radius: 14px;
  background: rgba(214,69,69,.08); color: #c0392b; font-size: 13px; font-weight: 700;
}
.fct-field.is-invalid input,
.fct-field.is-invalid textarea {
  border-color: rgba(214,69,69,.7); background: rgba(214,69,69,.05);
  box-shadow: 0 0 0 3px rgba(214,69,69,.12);
}
.fct-field.is-invalid span { color: #c0392b; }
.fct-radio-group.is-invalid legend { color: #c0392b; }
.fct-radio-group.is-invalid { box-shadow: 0 0 0 3px rgba(214,69,69,.1); border-radius: 12px; }

.fct-card h3 {
  margin: 0 0 14px; padding-bottom: 10px; color: var(--ink); font-size: 16px; letter-spacing: -.01em;
  border-bottom: 1px solid var(--line);
}
.fct-card { min-height: 0; cursor: default; }
.fct-card:hover { transform: none; box-shadow: var(--shadow-soft), var(--shadow-inset); }
.fct-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fct-field { display: grid; gap: 6px; }
.fct-field span { color: var(--ink-soft); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.fct-field-wide { grid-column: 1 / -1; }
.fct-field textarea {
  min-height: 90px; padding: 12px 15px; border: 1px solid rgba(124,151,164,.26); border-radius: 18px;
  background: rgba(255,255,255,.68); color: var(--ink); font: inherit; font-size: 14px; resize: vertical;
}
.fct-field textarea:focus { outline: none; border-color: rgba(var(--accent-rgb), .62); box-shadow: var(--ring); background: rgba(255,255,255,.92); }

.fct-radio-group {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin: 0 0 14px; padding: 0; border: 0;
}
.fct-radio-group legend { width: 100%; margin-bottom: 8px; padding: 0; color: var(--ink-soft); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.fct-radio, .fct-check {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
.fct-radio input, .fct-check input[type="checkbox"] {
  width: auto; min-height: auto; padding: 0; accent-color: var(--accent); cursor: pointer;
}

/* Chips píldora: la opción seleccionada se resalta en teal */
.fct-radio,
.fct-check:not(.fct-check-otros) {
  padding: 8px 14px; border: 1.5px solid rgba(124,151,164,.3); border-radius: 999px;
  background: rgba(255,255,255,.55); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.fct-radio:hover,
.fct-check:not(.fct-check-otros):hover {
  border-color: rgba(var(--accent-rgb), .45); background: rgba(255,255,255,.8);
}
.fct-radio:has(input:checked),
.fct-check:not(.fct-check-otros):has(input:checked) {
  border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .14);
  color: var(--ink); font-weight: 700;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), .16), inset 0 1px 0 rgba(255,255,255,.4);
}

.fct-checks { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.fct-check-otros { flex-wrap: wrap; flex-basis: 100%; }
.fct-otros-input { flex: 1; min-width: 160px; }

.fct-actions { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; }
.fct-actions button { min-width: 160px; }
#fctWordBtn {
  border-color: rgba(38,54,72,.18); background: linear-gradient(145deg, #263648, #3b4c5f); color: #ffffff;
  box-shadow: 0 16px 30px rgba(38,54,72,.18), inset 0 1px 0 rgba(255,255,255,.14);
}
#fctWordBtn:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(145deg, #1f3041, #263648); box-shadow: 0 20px 36px rgba(38,54,72,.22), 0 0 0 4px rgba(var(--accent-rgb), .1); }

.fct-nav-whatsapp {
  border-color: rgba(18,140,72,.22); background: linear-gradient(145deg, #25d366, #128c48); color: #ffffff;
  box-shadow: 0 16px 30px rgba(18,140,72,.2), inset 0 1px 0 rgba(255,255,255,.18);
}
.fct-nav-whatsapp:hover { transform: translateY(-2px); background: linear-gradient(145deg, #22c15f, #0f7a3f); box-shadow: 0 20px 36px rgba(18,140,72,.26), 0 0 0 4px rgba(37,211,102,.14); }

/* Baja del inmueble cerrado (cierres.js) */
.fct-nav-baja {
  border-color: rgba(var(--accent-rgb), .3); background: linear-gradient(145deg, var(--accent), var(--accent-dark)); color: #ffffff;
  box-shadow: 0 16px 30px rgba(var(--accent-rgb), .2), inset 0 1px 0 rgba(255,255,255,.18);
}
.fct-step-nav .fct-actions .fct-nav-baja { flex: 1 1 100%; }
.fct-nav-baja:disabled, .fct-nav-baja:disabled:hover {
  opacity: .5; cursor: not-allowed; box-shadow: none; color: #ffffff;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark)); border-color: rgba(var(--accent-rgb), .3);
}
@media (hover: hover) {
  .fct-nav-baja:not(:disabled):hover { transform: translateY(-2px); background: linear-gradient(145deg, #c41828, #8f0f1a); box-shadow: 0 20px 36px rgba(var(--accent-rgb), .26), 0 0 0 4px rgba(var(--accent-rgb), .12); }
}
.fct-mls-info { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-muted); }
.fct-mls-info.is-ok { color: #12753d; }
.fct-baja-status { flex-basis: 100%; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: rgba(38,54,72,.06); color: var(--ink); }
.fct-baja-status[data-tipo="ok"]    { background: rgba(18,140,72,.1);  color: #0f5f33; }
.fct-baja-status[data-tipo="aviso"] { background: rgba(214,140,0,.12); color: #7a4f00; }
.fct-baja-status[data-tipo="error"] { background: rgba(var(--accent-rgb), .1);  color: #a8121f; }

.fct-preview-wrap { position: sticky; top: 110px; align-self: start; }
.fct-preview {
  cursor: default; min-height: auto; padding: 28px; aspect-ratio: 210 / 297; overflow-y: auto;
  position: relative;
  background:
    linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
    radial-gradient(320px 220px at 92% 8%, rgba(var(--accent-rgb), .09), transparent 62%),
    radial-gradient(280px 210px at 0% 0%, rgba(215,232,236,.64), transparent 60%);
}
.fct-preview::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: url("IMG_LOGO/remax-balloon.png") center center / 55% no-repeat;
  opacity: .045;
  filter: saturate(0.35) brightness(1.3);
}
.fct-preview:hover { transform: none; }
.fct-doc-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid var(--ink); }
.fct-doc-logo { width: 64px; height: auto; flex-shrink: 0; }
.fct-doc-head-text { display: grid; gap: 4px; }
.fct-doc-code { color: var(--ink-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fct-doc-title { margin: 0; color: var(--ink); font-size: clamp(15px, 1.8vw, 19px); line-height: 1.2; letter-spacing: -.01em; text-transform: uppercase; }

.fct-doc-columns { display: grid; grid-template-columns: 1.9fr 1fr; gap: 0 18px; align-items: start; }
.fct-doc-side { border-left: 1px solid var(--line); padding-left: 18px; }

.fct-doc-section { margin-bottom: 16px; }
.fct-doc-section h3 {
  margin: 0 0 10px; padding-bottom: 6px; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.fct-doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.fct-doc-grid p, .fct-doc-obs { margin: 0; padding: 4px 0; color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.fct-doc-grid .fct-doc-wide { grid-column: 1 / -1; }
.fct-doc-checks { display: grid; gap: 5px; margin-bottom: 8px; }
.fct-doc-row { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13px; }
.fct-doc-row-otros { padding-top: 4px; }
.fct-checkbox-glyph { font-size: 15px; line-height: 1; color: var(--teal); }
.fct-empty { color: var(--ink-muted); font-style: italic; }

.fct-doc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 0; }
.fct-doc-opts-label { color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.fct-doc-opt { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 13px; }

.fct-doc-firma { text-align: center; margin-top: 22px; }
.fct-doc-firma-img { display: block; max-width: 170px; max-height: 70px; width: auto; height: auto; margin: 0 auto -10px; object-fit: contain; }
.fct-doc-firma-line { border-top: 1px solid var(--ink); width: 80%; margin: 28px auto 6px; }
.fct-doc-firma-label { margin: 0; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.fct-doc-firma-name { margin: 2px 0 0; color: var(--ink-soft); font-size: 12px; }

.fct-field-hint { margin: 4px 0 0; color: var(--ink-muted); font-size: 12px; }

/* Selector de estrellas (Calificación a colega): input+label como hermanos directos,
   valores en orden 5→1 con row-reverse, así ":checked ~ label" y "label:hover ~ label"
   iluminan hacia la izquierda (visualmente) con CSS puro, sin JS. */
.fcz-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.fcz-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fcz-stars label { font-size: 28px; line-height: 1; color: var(--line); cursor: pointer; transition: color .15s var(--ease-brand, ease); }
.fcz-stars label:hover,
.fcz-stars label:hover ~ label,
.fcz-stars input:checked ~ label { color: #e0a300; }
.fcz-doc-stars { margin: 4px 0 8px; font-size: 20px; letter-spacing: 3px; color: #e0a300; }

@media (max-width: 1040px) {
  .fct-layout { grid-template-columns: 1fr; }
  .fct-preview-wrap { position: static; }
  .fct-preview { aspect-ratio: auto; }
}
@media (max-width: 760px) {
  .fct-shell { padding: 18px; }
  .fct-grid { grid-template-columns: 1fr; }
  .fct-doc-columns { grid-template-columns: 1fr; }
  .fct-doc-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
  /* Stepper compacto: solo números + contador "Paso X de 5" */
  .fct-step-label { display: none; }
  .fct-step-num { width: 26px; height: 26px; font-size: 12px; }
  .fct-stepper-list { gap: 4px; }
  .fct-nav-btn { min-width: 0; flex: 1; }
  .fct-step-nav .fct-actions { width: 100%; }
  .fct-step-nav .fct-actions button { flex: 1; min-width: 0; }
}

@media print {
  body * { visibility: hidden; }
  #fctPreview, #fctPreview * { visibility: visible; }
  #fctPreview {
    position: absolute; inset: 0; width: 100%; height: auto; aspect-ratio: auto; margin: 0; padding: 0;
    border: 0; box-shadow: none; background: #fff; backdrop-filter: none;
  }
  #fctPreview::after, #fctPreview::before { display: none; }
  @page { size: A4; margin: 1.5cm; }
}

/* ── /Formulario de Captación ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal.in-view, .modal-content, .card, .prop-card { filter: none; transform: none; }
  .donut-arc { opacity: 1; }
  .db-fill, .rank-fill { width: var(--pct); }
  .hs-seg { width: var(--w); }
  .dash-kpi-accent { transform: scaleX(1); }
  .dash-hero, .rank-row { opacity: 1; transform: none; }
  .mkt-card { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MERCADO — Vista multi-inmobiliaria + ACM
   ═══════════════════════════════════════════════════════════════════════════ */

.mkt-shell { position: relative; }

.mkt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.mkt-head-text h2 { margin: 0 0 4px; font-size: 1.65rem; font-weight: 800; color: var(--ink); }
.mkt-head-text p  { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.mkt-head-counter {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 100px; padding: 14px 20px; border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.mkt-counter-num {
  font-size: 2rem; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mkt-counter-label { font-size: .75rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }

.mkt-filters {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
  padding: 18px; border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.mkt-filters input,
.mkt-filters select {
  padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--ice-3);
  font-size: .875rem; font-family: inherit; color: var(--ink);
  background: var(--ice-0);
  transition: border-color 200ms var(--ease-out-premium), box-shadow 200ms var(--ease-out-premium);
}
.mkt-filters input:focus,
.mkt-filters select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.mkt-filters button {
  padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer;
  font-weight: 600; font-size: .875rem; font-family: inherit;
  background: var(--accent); color: #fff;
  transition: transform 160ms var(--ease-out-premium), background 200ms ease;
}
.mkt-filters button:hover { background: var(--accent-dark); }
.mkt-filters button:active { transform: scale(0.97); }


/* Panel flotante de análisis de zona */
.mkt-zone-panel {
  position: absolute; bottom: 16px; left: 16px; z-index: 1000;
  background: var(--surface);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 14px 18px; min-width: 260px; max-width: 360px;
  border: 1px solid var(--border);
}
.mkt-zone-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mkt-zone-header h4 { margin: 0; font-size: .92rem; font-weight: 700; color: var(--ink); }
.mkt-zone-header button {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(var(--accent-rgb), .1); color: var(--accent); font-size: 14px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.mkt-zone-header button:hover { background: var(--accent); color: #fff; }
.mkt-zone-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mkt-zone-actions button {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.mkt-zone-actions button:first-child { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover:hover) { .mkt-zone-actions button:hover { filter: brightness(.95); } }
.mkt-zone-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mkt-zone-stat {
  text-align: center; padding: 6px 4px;
  background: var(--ice-1); border-radius: 10px;
}
.mkt-zone-stat-value { font-size: 1.05rem; font-weight: 800; color: var(--ink); display: block; }
.mkt-zone-stat-value small { font-size: .65rem; font-weight: 600; color: var(--ink-muted); }
.mkt-zone-stat-label { font-size: .65rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; display: block; }
.mkt-map {
  height: 420px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

/* Pin personalizado */
.mkt-pin { background: none; border: none; }

/* ACM */
.mkt-acm-wrap { margin-bottom: 28px; }
.mkt-acm-wrap h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; color: var(--ink); }
.mkt-acm-panel {
  padding: 20px; border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, var(--ice-1) 100%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.mkt-acm-empty { margin: 0; color: var(--ink-muted); font-size: .9rem; text-align: center; padding: 20px 0; }
.mkt-acm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px;
  margin-bottom: 16px;
}
.mkt-acm-metric {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 14px 10px; border-radius: 12px;
  background: rgba(255,255,255,.9); border: 1px solid var(--ice-3);
}
.mkt-acm-value {
  font-size: 1.35rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.mkt-acm-value small { font-size: .7rem; font-weight: 600; color: var(--ink-muted); }
.mkt-acm-label { font-size: .72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.mkt-acm-toggle {
  display: block; margin: 0 auto; padding: 8px 20px; border-radius: 8px;
  border: 1.5px solid var(--rmx-blue); background: transparent; color: var(--rmx-blue);
  font-weight: 600; font-size: .82rem; cursor: pointer; font-family: inherit;
  transition: transform 160ms var(--ease-out-premium), background 200ms ease, color 200ms ease;
}
.mkt-acm-toggle:hover { background: var(--rmx-blue); color: #fff; }
.mkt-acm-toggle:active { transform: scale(0.97); }
.mkt-acm-detail { margin-top: 16px; overflow-x: auto; }
.mkt-acm-note { margin: 0 0 8px; font-size: .8rem; color: var(--ink-muted); text-align: center; }
.mkt-acm-note--warn { color: #9a5b00; font-weight: 600; }
.mkt-acm-note:last-of-type { margin-bottom: 14px; }
/* Entrada suave al mostrar el detalle de comparables (toggle de [hidden]) */
@keyframes acmDetailIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mkt-acm-detail:not([hidden]) { animation: acmDetailIn .38s var(--ease-out) both; }
/* Escalonado solo en las primeras filas (la tabla puede tener miles): evita animar
   miles de <tr> a la vez. El resto aparece con el fundido del contenedor. */
.mkt-acm-detail:not([hidden]) .mkt-acm-table tbody tr:nth-child(-n+25) {
  opacity: 0; animation: acmDetailIn .42s var(--ease-out) forwards;
  animation-delay: calc(var(--row, 0) * 40ms + 60ms);
}
.mkt-acm-table {
  width: 100%; border-collapse: collapse; font-size: .82rem;
}
.mkt-acm-table th {
  text-align: left; padding: 8px 10px; font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--ice-3); white-space: nowrap;
}
.mkt-acm-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--ice-2); color: var(--ink-soft);
}
.mkt-acm-table tr:hover td { background: var(--ice-1); }

/* Tarjetas */
.mkt-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
  margin: 20px 0;
}

.mkt-card {
  background: var(--ice-0); border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  transition: transform 200ms var(--ease-out-premium), box-shadow 200ms var(--ease-out-premium);
  animation: mktCardIn 300ms var(--ease-out-premium) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes mktCardIn {
  from { opacity: 0; transform: translateY(8px); }
}

@media (hover: hover) and (pointer: fine) {
  .mkt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 16px 40px rgba(0,0,0,.1);
  }
  .mkt-card:hover .mkt-card-image { transform: scale(1.03); }
}
.mkt-card:active { transform: scale(0.97); }
.mkt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mkt-card-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px 20px;
  color: var(--ink-muted); font-size: .95rem;
}

/* Media */
.mkt-card-media {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: var(--ice-2);
}
.mkt-card-media-empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ice-2), var(--ice-3));
}
.mkt-card-image {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 300ms var(--ease-out-premium);
}
.mkt-inmob-badge {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Body */
.mkt-card-body { padding: 14px 16px 16px; }
.mkt-price { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1.2rem; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.mkt-currency-alert {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  font-size: .66rem; font-weight: 700; letter-spacing: .01em;
}
.mkt-specs { margin: 0 0 4px; font-size: .82rem; color: var(--ink-muted); font-weight: 500; }
.mkt-loc {
  display: flex; align-items: center; gap: 4px;
  margin: 0 0 6px; font-size: .82rem; color: var(--ink-soft);
}
.mkt-loc .prop-loc-pin { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
.mkt-desc { margin: 0 0 8px; font-size: .78rem; color: var(--ink-muted); line-height: 1.45; }

/* Agente */
.mkt-agent {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--ice-2);
}
.mkt-agent-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--rmx-blue); color: #fff;
  font-size: .72rem; font-weight: 700;
}
.mkt-agent-info { display: flex; flex-direction: column; min-width: 0; }
.mkt-agent-name {
  font-size: .82rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkt-agent-company { font-size: .7rem; font-weight: 600; }
.mkt-agent-contacts {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.mkt-agent-contact {
  font-size: .72rem; color: var(--rmx-blue); text-decoration: none;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(0,61,165,.06);
  transition: background 200ms ease, color 200ms ease;
}
.mkt-agent-contact:hover { background: var(--rmx-blue); color: #fff; }
.field-unavailable { color: var(--ink-muted); font-style: italic; font-weight: 500; }

/* Responsive */
@media (max-width: 768px) {
  .mkt-head { flex-direction: column; align-items: flex-start; }
  .mkt-filters { grid-template-columns: 1fr 1fr; }
  .mkt-map { height: 280px; }
  .mkt-cards { grid-template-columns: 1fr; }
  .mkt-acm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mkt-filters { grid-template-columns: 1fr; }
  .mkt-acm-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULTS + MAP — tarjetas (izq.) + mapa grande sticky (der.)
   Estilo portal inmobiliario. Se usa en Propiedades (#propMap) y Mercado (#mktMap).
   ═══════════════════════════════════════════════════════════════════════════ */
.results-map {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 54%); gap: 18px;
  align-items: start; margin-top: 6px;
}
.results-map-list { min-width: 0; }
/* Tarjetas más compactas al vivir en la columna izquierda */
.results-map-list .properties-cards,
.results-map-list .mkt-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 0; }

/* El mapa queda fijo (sticky) y alto mientras se scrollean las tarjetas, debajo de la barra
   de filtros (que también es sticky): --toolbar-h lo pone app.js con el alto real de la barra. */
.results-map-aside {
  --map-top: calc(var(--topbar-h) + var(--toolbar-h, 0px) + 14px);
  position: sticky; top: var(--map-top);
  height: calc(100vh - var(--map-top) - 16px); min-height: 360px;
}
.results-map-aside .properties-map,
.results-map-aside .mkt-map {
  width: 100%; height: 100%; margin: 0; border-radius: var(--radius-card);
}

@media (max-width: 1040px) {
  /* En pantallas medianas el mapa pasa arriba, a lo ancho, y deja de ser sticky */
  .results-map { grid-template-columns: 1fr; }
  .results-map-aside { position: static; height: 400px; min-height: 0; order: -1; margin-bottom: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PANEL DE DETALLE DE INMUEBLE
   Ficha compartida por Propiedades Plus, Mercado y Premium. Dos columnas en
   escritorio (galería grande + información) y apilado en pantallas angostas.
   ══════════════════════════════════════════════════════════════════════════ */

.dtl-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 180ms var(--ease-out), visibility 0s linear 180ms;
}
.dtl-modal.open {
  opacity: 1; visibility: visible;
  transition: opacity 200ms var(--ease-out);
}

.dtl-backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 20, 34, .58);
  backdrop-filter: blur(3px);
}

/* El panel entra desde una escala cercana (nunca desde 0: nada aparece de la
   nada) y se mantiene centrado, que es el origen correcto para un modal. */
.dtl-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  /* La fila debe poder encogerse por debajo del alto del contenido; si no, las
     columnas crecen y el panel las recorta en vez de dejarlas hacer scroll. */
  grid-template-rows: minmax(0, 1fr);
  width: min(1180px, 100%);
  max-height: min(88vh, 880px);
  min-height: min(520px, 80vh);
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  opacity: 0;
  /* Entrada con resorte (2026-09-09): antes era casi imperceptible (scale .965,
     10px); ahora arranca notoriamente más chica/abajo y rebota al asentarse. */
  transform: scale(.88) translateY(36px);
  transition: transform 460ms var(--ease-spring), opacity 220ms var(--ease-out);
}
.dtl-modal.open .dtl-panel { opacity: 1; transform: scale(1) translateY(0); }

.dtl-close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
  transition: transform 150ms var(--ease-out), background 150ms ease;
}
.dtl-close:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .dtl-close:hover { background: #fff; transform: rotate(90deg); }
}

/* ── Galería ───────────────────────────────────────────────────────────── */

.dtl-media {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: #0d1524;
}

.dtl-stage {
  position: relative;
  flex: 1; min-height: 0;
  display: grid; place-items: center;
  overflow: hidden;
}
.dtl-stage.is-empty::after {
  content: "Sin fotos disponibles";
  color: rgba(255, 255, 255, .5);
  font-size: .86rem; font-weight: 600;
}

/* Por defecto la foto se ve completa; al hacer click se amplía hasta llenar el marco. */
.dtl-image {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}
.dtl-stage.is-empty .dtl-image { display: none; }
.dtl-stage.is-zoomed .dtl-image { object-fit: cover; cursor: zoom-out; }

.dtl-nav {
  position: absolute; top: 50%;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 17px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  transform: translateY(-50%);
  transition: transform 160ms var(--ease-out), background 160ms ease;
}
.dtl-nav--prev { left: 14px; }
.dtl-nav--next { right: 14px; }
.dtl-nav:active { transform: translateY(-50%) scale(.93); }
@media (hover: hover) and (pointer: fine) {
  .dtl-nav:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
}

.dtl-counter {
  position: absolute; right: 14px; bottom: 14px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(11, 20, 34, .74); color: #fff;
  font-size: .73rem; font-weight: 700; letter-spacing: .02em;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.dtl-thumbs {
  display: flex; gap: 8px;
  padding: 10px 12px;
  background: #0a111d;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
.dtl-thumbs:empty { display: none; }
.dtl-thumb {
  flex: 0 0 auto;
  width: 96px; height: 70px; padding: 0;
  border: 2px solid transparent; border-radius: 9px;
  background: none; cursor: pointer; overflow: hidden;
  opacity: .5;
  transition: opacity 180ms ease, border-color 180ms ease, transform 150ms var(--ease-out);
}
.dtl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dtl-thumb.is-active { opacity: 1; border-color: var(--accent); }
.dtl-thumb:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .dtl-thumb:hover { opacity: 1; }
}

/* ── Información ───────────────────────────────────────────────────────── */

.dtl-info {
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px 28px 30px;
  min-width: 0; min-height: 0;
  overflow-y: auto;
}

.dtl-head { display: flex; flex-direction: column; }
.dtl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dtl-badge {
  padding: 4px 12px; border-radius: 999px;
  background: var(--st-captacion); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.dtl-badge--venta       { background: var(--st-venta); }
.dtl-badge--alquiler    { background: var(--st-alquiler); }
.dtl-badge--anticretico { background: var(--st-anticretico); }
.dtl-origen { font-size: .76rem; font-weight: 700; color: var(--ink-muted); }
.dtl-origen[hidden] { display: none; }

.dtl-tipo {
  margin: 12px 0 0;
  padding-right: 46px;
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.12;
  letter-spacing: -.025em; color: var(--ink);
}
.dtl-loc {
  display: flex; align-items: center; gap: 5px;
  margin: 8px 0 0;
  font-size: .9rem; color: var(--ink-soft);
}
.dtl-pin-wrap { display: inline-flex; flex-shrink: 0; }
.dtl-pin { width: 15px; height: 15px; color: var(--accent); }
.dtl-precio {
  margin-top: 14px;
  font-size: clamp(24px, 2.5vw, 32px); font-weight: 800;
  letter-spacing: -.025em; color: var(--accent);
}

/* Aviso de moneda: el aviso original de un tercero menciona una referencia de
   precio en otra moneda (ver auditar_moneda_mercado.mjs). No es un error
   confirmado, así que se muestra como advertencia a revisar, no como dato. */
.dtl-moneda-aviso {
  margin: 8px 0 0; padding: 7px 11px;
  border-radius: 9px;
  background: #fff7ed; border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: .78rem; font-weight: 600; line-height: 1.4;
}

/* Minipanel de medidas: cada dato con su unidad, en un chip propio. */
.dtl-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
}
.dtl-spec {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 13px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 13px;
  text-align: center;
  opacity: 0; transform: translateY(6px);
  animation: dtlSpecIn 300ms var(--ease-out-premium) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes dtlSpecIn { to { opacity: 1; transform: none; } }
.dtl-spec.is-empty { background: transparent; border-style: dashed; }
.dtl-spec.is-empty .dtl-spec-value,
.dtl-spec.is-empty .dtl-spec-icon { color: var(--ink-muted); }

.dtl-spec-icon { width: 21px; height: 21px; color: var(--rmx-blue); }
.dtl-spec-icon svg { width: 100%; height: 100%; display: block; }
.dtl-spec-value {
  font-size: 1.04rem; font-weight: 800; line-height: 1.1; color: var(--ink);
}
.dtl-spec-value small { font-size: .7rem; font-weight: 700; color: var(--ink-muted); }
.dtl-spec-label {
  font-size: .64rem; font-weight: 700; letter-spacing: .045em;
  text-transform: uppercase; color: var(--ink-muted);
}

.dtl-section { display: flex; flex-direction: column; gap: 9px; }
.dtl-section-title {
  margin: 0;
  font-size: .71rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.dtl-desc {
  margin: 0;
  font-size: .92rem; line-height: 1.62; color: var(--ink-soft);
  white-space: pre-line;
}
.dtl-desc.is-empty { font-style: italic; color: var(--ink-muted); }
.dtl-empty-note { margin: 10px 0 0; font-size: .82rem; font-style: italic; color: var(--ink-muted); }

/* ── Agente ────────────────────────────────────────────────────────────── */

.dtl-agent {
  padding: 15px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.dtl-agent-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dtl-agent-avatar {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
.dtl-agent-avatar--initials {
  display: grid; place-items: center;
  background: var(--rmx-blue); color: #fff;
  font-size: 1.1rem; font-weight: 800;
}
.dtl-agent-id { display: flex; flex-direction: column; min-width: 0; }
.dtl-agent-name {
  font-size: .96rem; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dtl-agent-office { font-size: .76rem; font-weight: 600; color: var(--ink-muted); }

.dtl-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.dtl-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--rmx-blue);
  font-size: .78rem; font-weight: 700; text-decoration: none;
  transition: transform 150ms var(--ease-out), background 150ms ease,
              color 150ms ease, border-color 150ms ease;
}
.dtl-action--wa { color: #1a9d4d; }
.dtl-action:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .dtl-action:hover { background: var(--rmx-blue); border-color: var(--rmx-blue); color: #fff; }
  .dtl-action--wa:hover { background: #1a9d4d; border-color: #1a9d4d; }
}

/* ── Ficha técnica ─────────────────────────────────────────────────────── */

.dtl-meta { margin: 0; }
.dtl-meta-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: .84rem;
}
.dtl-meta-row:last-child { border-bottom: 0; }
.dtl-meta-row dt { flex-shrink: 0; font-weight: 600; color: var(--ink-muted); }
.dtl-meta-row dd {
  margin: 0; min-width: 0;
  font-weight: 700; color: var(--ink); text-align: right;
  overflow-wrap: anywhere;
}

.dtl-fuente {
  align-self: flex-start;
  padding: 10px 16px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-size: .8rem; font-weight: 700; text-decoration: none;
  transition: transform 150ms var(--ease-out), background 150ms ease;
}
.dtl-fuente:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .dtl-fuente:hover { background: var(--accent-dark); }
}
.dtl-fuente[hidden] { display: none; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .dtl-modal { padding: 0; }
  .dtl-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%; max-height: 100vh; min-height: 100vh;
    border-radius: 0;
  }
  .dtl-media { max-height: 44vh; }
  .dtl-stage { min-height: 200px; }
  .dtl-info { padding: 22px 18px 28px; gap: 18px; }
  .dtl-tipo { padding-right: 44px; }
  .dtl-thumb { width: 64px; height: 47px; }
}

@media (prefers-reduced-motion: reduce) {
  .dtl-modal, .dtl-panel, .dtl-nav, .dtl-close, .dtl-action, .dtl-thumb, .dtl-fuente {
    transition-duration: 1ms;
  }
  .dtl-panel { transform: none; }
  .dtl-spec { animation: none; opacity: 1; transform: none; }
  @media (hover: hover) and (pointer: fine) {
    .dtl-close:hover { transform: none; }
    .dtl-nav:hover { transform: translateY(-50%); }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPA DE REFINAMIENTO VISUAL — 2026-07-31
   Misma paleta RE/MAX (rojo #dc1c2e, azul #003da5, blanco); lo que cambia es
   la jerarquía, la profundidad y el acabado. El ancla del rediseño es el
   sidebar en navy profundo —derivado del propio --ink— que separa la
   navegación del contenido y deja respirar al blanco del área de trabajo.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Navy de navegación: la misma familia del texto (--ink #16263d), llevada a
     superficie. No introduce un color nuevo a la marca. */
  --nav-bg: #101d30;
  --nav-bg-soft: #16273d;
  --nav-ink: #e7edf5;
  --nav-ink-muted: #8fa3bd;
  --nav-line: rgba(255, 255, 255, .09);

  /* Sombras en capas: una cercana para definir el borde y otra difusa para la
     elevación. Una sola sombra grande se ve barata. */
  --sh-1: 0 1px 2px rgba(16, 27, 45, .05), 0 1px 3px rgba(16, 27, 45, .04);
  --sh-2: 0 2px 4px rgba(16, 27, 45, .05), 0 6px 16px rgba(16, 27, 45, .07);
  --sh-3: 0 4px 8px rgba(16, 27, 45, .06), 0 14px 32px rgba(16, 27, 45, .10);
  --sh-4: 0 8px 16px rgba(16, 27, 45, .08), 0 24px 56px rgba(16, 27, 45, .14);

  /* Curva de salida más marcada que las nativas: arranca rápido y frena suave. */
  --ease-brand: cubic-bezier(.22, 1, .36, 1);
}

/* Fondo del área de trabajo: dos velos de marca muy diluidos sobre el gris
   base, para que el blanco de las tarjetas tenga contra qué recortarse. */
body {
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(0, 61, 165, .055), transparent 62%),
    radial-gradient(880px 460px at -6% 104%, rgba(var(--accent-rgb), .05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

::selection { background: rgba(var(--accent-rgb), .16); color: var(--ink); }

/* ── Sidebar en navy ──────────────────────────────────────────────────────── */

.sidebar {
  background: linear-gradient(180deg, var(--nav-bg-soft) 0%, var(--nav-bg) 34%);
  border-right: 0;
  box-shadow: 1px 0 0 rgba(16, 27, 45, .10), 6px 0 28px rgba(16, 27, 45, .06);
}

.sidebar-brand { padding: 18px 18px 16px; border-bottom: 1px solid var(--nav-line); }
.sidebar-brand .brand-mark {
  height: 44px; padding: 5px 9px; border-radius: 12px;
  background: #fff; border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.brand-copy strong { color: #fff; font-size: 17px; letter-spacing: -.035em; }
.brand-copy span { color: var(--nav-ink-muted); font-size: 11px; letter-spacing: .01em; }

.sidebar-nav { padding: 14px 12px; gap: 2px; }
.sidebar-link {
  position: relative;
  color: var(--nav-ink-muted);
  border-radius: 10px;
  font-weight: 650;
  transition: background .18s var(--ease-brand), color .18s var(--ease-brand);
}
.sidebar-link svg { opacity: .82; transition: opacity .18s var(--ease-brand); }

@media (hover: hover) and (pointer: fine) {
  .sidebar-link:hover { background: rgba(255, 255, 255, .06); color: var(--nav-ink); box-shadow: none; }
  .sidebar-link:hover svg { opacity: 1; }
}

/* Activo: fondo rojo muy diluido + barra sólida. La barra crece desde el
   centro, que se lee como "esta sección está seleccionada" y no como un borde. */
.sidebar-link.active {
  background: rgba(var(--accent-rgb), .16);
  color: #fff;
  box-shadow: none;
}
.sidebar-link.active svg { opacity: 1; color: var(--accent-soft); }
.sidebar-link::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height .22s var(--ease-brand);
}
.sidebar-link.active::before { height: 22px; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--nav-line); }
.sidebar-user { padding: 6px; border-radius: 11px; }
.sidebar-user-avatar { border-radius: 11px; box-shadow: 0 3px 10px rgba(var(--accent-rgb), .32); }
.sidebar-user-info strong { color: #fff; font-size: 13px; }
.sidebar-user-info span { color: var(--nav-ink-muted); }

.sidebar-logout {
  border: 1px solid var(--nav-line);
  background: rgba(255, 255, 255, .04);
  color: var(--nav-ink-muted);
  transition: background .18s var(--ease-brand), color .18s var(--ease-brand), border-color .18s var(--ease-brand);
}
@media (hover: hover) and (pointer: fine) {
  .sidebar-logout:hover {
    background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .42);
    color: #fff; box-shadow: none;
  }
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */

.app-topbar {
  height: 66px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.8) blur(12px);
  border-bottom: 1px solid rgba(16, 27, 45, .07);
}
.app-topbar-title {
  font-size: 19px; font-weight: 800; letter-spacing: -.035em;
}
.nav-toggle { border-radius: 11px; }
@media (hover: hover) and (pointer: fine) {
  .nav-toggle:hover { border-color: rgba(var(--accent-rgb), .34); color: var(--accent); }
}

.app-shell { padding: 30px 0 72px; }

/* ── Tipografía: más aire y jerarquía ─────────────────────────────────────── */

.inicio-hero h1 { letter-spacing: -.055em; line-height: 1.0; }
.inicio-hero p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.inicio-block h3 { font-size: 22px; letter-spacing: -.035em; }
.section-head h2, .prop-head h2, .mkt-head h2, .prem-head h2 {
  letter-spacing: -.04em;
}

/* ── Hero de Inicio: más profundidad ──────────────────────────────────────── */

.inicio-hero {
  padding: clamp(32px, 4.4vw, 52px);
  border-radius: 22px;
  box-shadow: var(--sh-2);
  background:
    radial-gradient(720px 340px at 100% -22%, rgba(var(--accent-rgb), .13), transparent 62%),
    radial-gradient(600px 340px at -12% 122%, rgba(0, 61, 165, .12), transparent 62%),
    var(--surface);
}
.inicio-hero::after { height: 3px; }
.inicio-hero-eyebrow {
  background: rgba(var(--accent-rgb), .07);
  border-color: rgba(var(--accent-rgb), .18);
  color: var(--accent);
}

.inicio-cta {
  border-radius: 13px;
  box-shadow: 0 6px 14px rgba(var(--accent-rgb), .22), 0 14px 32px rgba(var(--accent-rgb), .16);
  transition: transform .18s var(--ease-brand), box-shadow .24s var(--ease-brand), background .24s var(--ease-brand);
}
@media (hover: hover) and (pointer: fine) {
  .inicio-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(var(--accent-rgb), .26), 0 22px 44px rgba(var(--accent-rgb), .2); }
}
.inicio-cta:active { transform: translateY(0) scale(.975); }

/* ── Superficies y tarjetas ───────────────────────────────────────────────── */

.filters, .properties-filters {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--sh-1);
}

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

.card, .prop-card, .mkt-card {
  border: 1px solid var(--border);
  box-shadow: var(--sh-2);
  transition: transform .38s var(--ease-spring), box-shadow .34s var(--ease-brand), border-color .34s var(--ease-brand);
}
.card { border-radius: 20px; }
.prop-card, .mkt-card { border-radius: 18px; }

@media (hover: hover) and (pointer: fine) {
  .prop-card:hover, .mkt-card:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(var(--accent-rgb), .22);
    box-shadow: var(--sh-4);
  }
  /* La foto acompaña con un acercamiento leve: da sensación de profundidad
     sin que el recorte se note. */
  .prop-card:hover .prop-card-image,
  .mkt-card:hover .mkt-card-image { transform: scale(1.05); }
}
.prop-card:active, .mkt-card:active { transform: translateY(-2px) scale(.98); }

.prop-card-image, .mkt-card-image { transition: transform .6s var(--ease-brand); }

/* ── Campos de formulario ─────────────────────────────────────────────────── */

input, select, textarea {
  border-radius: 12px;
  border-color: var(--border);
  background: var(--surface);
  transition: border-color .2s var(--ease-brand), box-shadow .2s var(--ease-brand), background .2s var(--ease-brand);
}
input::placeholder { color: rgba(107, 124, 143, .75); }

@media (hover: hover) and (pointer: fine) {
  input:hover, select:hover, textarea:hover { border-color: var(--border-strong); box-shadow: none; background: #fff; }
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 0 0 3.5px rgba(var(--accent-rgb), .13);
  background: #fff;
}

button { border-radius: 12px; }

/* ── Paginación y chips ───────────────────────────────────────────────────── */

.pagination-btn {
  border-radius: 11px;
  transition: transform .16s var(--ease-brand), background .2s var(--ease-brand), color .2s var(--ease-brand), border-color .2s var(--ease-brand);
}
.pagination-btn.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), .26);
}

/* ── Barras de desplazamiento ─────────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: rgba(16, 27, 45, .22) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(16, 27, 45, .2);
  border: 3px solid transparent; background-clip: content-box; border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(16, 27, 45, .34); background-clip: content-box; }

/* La barra del sidebar va en claro sobre el navy. */
.sidebar-nav { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); background-clip: content-box; }

/* ── Accesibilidad de movimiento ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .prop-card, .mkt-card, .card, .inicio-cta, .sidebar-link, .sidebar-link::before {
    transition-duration: 1ms;
  }
  @media (hover: hover) and (pointer: fine) {
    .prop-card:hover, .mkt-card:hover { transform: none; }
    .prop-card:hover .prop-card-image, .mkt-card:hover .mkt-card-image { transform: none; }
    .inicio-cta:hover { transform: none; }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRA DE HERRAMIENTAS + DESPLAZAMIENTO SUAVE — 2026-07-31
   Filtros, estado y paginación dejan de ser tres bloques apilados y pasan a
   una sola barra translúcida que se ancla bajo el topbar al recorrer el
   listado. El desenfoque deja ver el contenido pasar por detrás, que es lo
   que da la sensación de capas.
   ══════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.toolbar {
  position: sticky;
  /* Justo debajo del topbar, que mide 66px y también es translúcido. */
  top: calc(var(--topbar-h) + 4px);
  z-index: 20;
  display: grid; gap: 12px;
  margin: 22px 0 24px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: saturate(1.9) blur(20px);
  -webkit-backdrop-filter: saturate(1.9) blur(20px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 2px 6px rgba(16, 27, 45, .05),
    0 16px 40px rgba(16, 27, 45, .09);
  transition: background .3s var(--ease-brand), box-shadow .3s var(--ease-brand);
}

/* Los filtros pierden su caja propia: la caja ahora es la barra. */
.toolbar .filters,
.toolbar .properties-filters,
.toolbar .mkt-filters {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* Campos semitransparentes para que el desenfoque se lea a través de ellos. */
.toolbar input,
.toolbar select {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(16, 27, 45, .1);
}
@media (hover: hover) and (pointer: fine) {
  .toolbar input:hover,
  .toolbar select:hover { background: rgba(255, 255, 255, .92); border-color: rgba(16, 27, 45, .18); }
}
.toolbar input:focus,
.toolbar select:focus { background: #fff; }

/* Fila de estado: resumen a la izquierda, paginación a la derecha. */
.toolbar-status {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding-top: 13px;
  border-top: 1px solid rgba(16, 27, 45, .09);
}
.toolbar-status:empty { display: none; }

/* El resumen deja de ser una tarjeta y pasa a ser una línea de texto. */
.toolbar-status .summary {
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
  color: var(--ink-soft); font-size: 13px; font-weight: 650;
  flex: 1 1 auto; min-width: 0;
}
.toolbar-status .summary::before { display: none; }

.toolbar-status .properties-pagination {
  margin: 0;
  flex: 0 0 auto;
}
.toolbar-status .properties-pagination:empty { display: none; }
.toolbar-status .pagination-btn { min-height: 36px; padding: 7px 12px; font-size: 13px; }

/* La paginación de abajo queda centrada y con aire. */
.results-map-list > .properties-pagination { margin-top: 20px; justify-content: center; }

/* ── Encabezados de vista más compactos ───────────────────────────────────── */

.properties-head, .mkt-head { margin-bottom: 4px; }
.properties-head h2, .mkt-head h2 { letter-spacing: -.04em; }
.properties-head p, .mkt-head p { max-width: 78ch; }

/* ── ACM: superficie translúcida al igual que la barra ────────────────────── */

.mkt-acm-wrap {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .58);
  backdrop-filter: saturate(1.7) blur(16px);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  box-shadow: 0 2px 6px rgba(16, 27, 45, .05), 0 14px 34px rgba(16, 27, 45, .07);
}

/* ── Botón para volver arriba ─────────────────────────────────────────────── */

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 25;
  display: grid; place-items: center;
  width: 46px; height: 46px; min-height: 46px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%;
  background: rgba(255, 255, 255, .74);
  backdrop-filter: saturate(1.8) blur(14px);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  color: var(--ink);
  box-shadow: 0 4px 10px rgba(16, 27, 45, .1), 0 14px 34px rgba(16, 27, 45, .14);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.94);
  transition: opacity .24s var(--ease-brand), transform .24s var(--ease-brand), visibility 0s linear .24s;
}
.to-top.is-visible {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity .26s var(--ease-brand), transform .26s var(--ease-brand);
}
.to-top svg { width: 20px; height: 20px; }
.to-top:active { transform: scale(.93); }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { background: #fff; color: var(--accent); border-color: rgba(var(--accent-rgb), .3); }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Sin sidebar fija el topbar es la única referencia; la barra se despega
     para no comerse la pantalla en pantallas cortas. */
  /* Sigue fija también en móvil: al pegarse colapsa a sólo el buscador,
     así que ocupa poco y deja el filtro siempre a mano. */
  .toolbar { padding: 13px; border-radius: 16px; }
  .toolbar-status { justify-content: flex-start; }
  .to-top { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .toolbar, .to-top { transition-duration: 1ms; }
}

/* ── Paginación en pantallas angostas ─────────────────────────────────────
   Con 20+ páginas la fila de botones supera el ancho del teléfono y estira el
   documento entero (lo que además desplazaba el velo del menú y el botón
   flotante, anclados al viewport). Se resuelve dejándola deslizar dentro de su
   propia caja en vez de empujar el layout. */

.toolbar-status .properties-pagination,
.results-map-list > .properties-pagination {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 900px) {
  .toolbar-status {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar-status .properties-pagination {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* La barra de scroll aquí sería ruido: el gesto ya es evidente. */
    scrollbar-width: none;
  }
  .toolbar-status .properties-pagination::-webkit-scrollbar { display: none; }
  .toolbar-status .pagination-btn { flex: 0 0 auto; }

  .results-map-list > .properties-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Cinturón de seguridad: ningún descendiente del área principal debería poder
   ensanchar el documento. */
.app-main { max-width: 100vw; overflow-x: clip; }

/* ── Campos que no encogen ────────────────────────────────────────────────
   Un <input> trae un ancho intrínseco (atributo `size`, 20 caracteres por
   defecto) que en un grid actúa como mínimo: con placeholders largos la
   rejilla se ensancha más que su contenedor y los campos quedan cortados.
   `min-width: 0` en la rejilla y en cada campo los deja adaptarse. */

.filters, .properties-filters, .mkt-filters { min-width: 0; }
.filters > *, .properties-filters > *, .mkt-filters > * { min-width: 0; }
.filters input, .filters select,
.properties-filters input, .properties-filters select,
.mkt-filters input, .mkt-filters select { min-width: 0; width: 100%; }

/* El área principal no debe recortar contenido útil: con los anchos ya
   contenidos, `clip` sólo actúa como red de seguridad y no oculta campos. */
.toolbar { min-width: 0; }
.toolbar > * { min-width: 0; }

/* ── Barra de filtros compacta al quedar fija ─────────────────────────────
   Fija está bien, pero a tamaño completo tapa demasiado listado. Cuando toca
   el tope se encoge: campos más bajos, menos separación y el resumen en una
   sola línea. Se sigue pudiendo filtrar sin desplazarse hacia arriba. */

.toolbar-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }

.toolbar {
  /* Sólo se anima lo barato: padding y sombra. El alto lo resuelve el contenido. */
  transition: padding .26s var(--ease-brand), box-shadow .26s var(--ease-brand),
              background .26s var(--ease-brand), border-radius .26s var(--ease-brand);
}

.toolbar.is-stuck {
  padding: 9px 13px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 2px 8px rgba(16, 27, 45, .07),
    0 14px 34px rgba(16, 27, 45, .12);
}

.toolbar.is-stuck .properties-filters,
.toolbar.is-stuck .mkt-filters,
.toolbar.is-stuck .filters { gap: 8px; }

.toolbar.is-stuck input,
.toolbar.is-stuck select,
.toolbar.is-stuck button {
  min-height: 38px;
  padding-top: 7px; padding-bottom: 7px;
  font-size: 13px;
}
.toolbar.is-stuck select { padding-right: 34px; background-position: calc(100% - 15px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px); }

.toolbar.is-stuck .toolbar-status { padding-top: 8px; }
.toolbar.is-stuck .toolbar-status .summary { font-size: 12px; }
.toolbar.is-stuck .toolbar-status .pagination-btn { min-height: 32px; padding: 5px 10px; font-size: 12px; }

/* Al saltar a una tarjeta desde el mapa, dejar aire para que la barra fija no
   la tape. */
.prop-card, .mkt-card { scroll-margin-top: calc(var(--topbar-h) + 150px); }

@media (prefers-reduced-motion: reduce) {
  .toolbar { transition-duration: 1ms; }
}

/* ── Selector de capas del mapa ───────────────────────────────────────────── */

.leaflet-control-layers {
  border: 1px solid rgba(16, 27, 45, .1) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(16, 27, 45, .08), 0 10px 24px rgba(16, 27, 45, .1) !important;
  background: rgba(255, 255, 255, .94) !important;
  backdrop-filter: saturate(1.6) blur(10px);
  overflow: hidden;
}
.leaflet-control-layers-toggle {
  width: 38px !important; height: 38px !important;
  background-size: 20px 20px !important;
}
.leaflet-control-layers-expanded { padding: 10px 12px !important; }
.leaflet-control-layers-list label {
  display: flex; align-items: center; gap: 7px;
  margin: 3px 0; padding: 4px 2px;
  font-size: 13px; font-weight: 650; color: var(--ink);
  cursor: pointer;
}
.leaflet-control-layers-list input { min-height: 0; margin: 0; accent-color: var(--accent); }

/* ── Filtros colapsados mientras la barra está fija ───────────────────────
   Pegada muestra sólo el buscador (el primer campo) y el botón "Filtros".
   Se ocultan los demás campos en vez de recortar la altura: así no hay que
   animar `max-height` ni queda contenido a medio ver. */

.toolbar.is-stuck:not(.is-expanded) .properties-filters > *:not(:first-child),
.toolbar.is-stuck:not(.is-expanded) .mkt-filters > *:not(:first-child),
.toolbar.is-stuck:not(.is-expanded) .filters > *:not(:first-child) { display: none; }

.toolbar.is-stuck:not(.is-expanded) .properties-filters,
.toolbar.is-stuck:not(.is-expanded) .mkt-filters,
.toolbar.is-stuck:not(.is-expanded) .filters { grid-template-columns: 1fr; }

/* Botón para desplegar el resto de los filtros. */
.toolbar-toggle {
  display: none;               /* sólo aparece con la barra pegada */
  align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 9px;
  background: rgba(255, 255, 255, .8); color: var(--ink-soft);
  font-size: 12px; font-weight: 700;
  flex: 0 0 auto;
  transition: background .18s var(--ease-brand), color .18s var(--ease-brand),
              border-color .18s var(--ease-brand);
}
.toolbar.is-stuck .toolbar-toggle { display: inline-flex; }
.toolbar-toggle svg { width: 14px; height: 14px; transition: transform .22s var(--ease-brand); }
.toolbar.is-expanded .toolbar-toggle svg { transform: rotate(180deg); }
.toolbar.is-expanded .toolbar-toggle {
  background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .3); color: var(--accent);
}
.toolbar-toggle:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .toolbar-toggle:hover { background: #fff; border-color: rgba(var(--accent-rgb), .32); color: var(--accent); }
}

/* El estado se reordena: resumen, luego botón y paginación. */
.toolbar.is-stuck .toolbar-status { gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .toolbar-toggle, .toolbar-toggle svg { transition-duration: 1ms; }
}

/* En pantallas angostas la barra pegada apilaba resumen, paginación y botón en
   columna, y volvía a ocupar demasiado. Pegada: resumen y botón en una línea, y
   la paginación superior se oculta (la de abajo del listado sigue estando). */
@media (max-width: 900px) {
  .toolbar.is-stuck .toolbar-status {
    flex-direction: row; align-items: center; flex-wrap: wrap;
  }
  .toolbar.is-stuck .toolbar-status .properties-pagination { display: none; }
  .toolbar.is-stuck .toolbar-status .summary { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   INTRANORTE — capa de marca RE/MAX Norte (2026-10-19)
   Parte de la base de IntraPlus pero con identidad propia, tomada del arte de
   la oficina: azul profundo en degradé, tipografía Montserrat, tarjetas blancas
   muy redondeadas y círculos numerados en navy.
   - El acento primario es AZUL (en Plus era rojo). Todo el CSS de abajo usa
     --accent / --accent-rgb; el rojo queda solo para "venta" y detalles.
   - En escritorio la navegación es una BARRA SUPERIOR (en Plus, sidebar
     lateral). En celular vuelve al menú lateral desplegable.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --accent: #0b4fe0;
  --accent-dark: #0833a6;
  --accent-soft: #3d7bff;
  --accent-rgb: 11, 79, 224;

  --nx-navy: #0a1d5c;
  --nx-navy-deep: #06123d;
  --nx-sky: #8fb4ff;

  --st-venta: #dc1c2e;
  --st-alquiler: #0b4fe0;

  --ink: #0b1638;
  --ink-soft: #3c4a6b;
  --ink-muted: #6a7796;
  --bg: #f2f5fb;
  --border: #e2e8f4;
  --border-strong: #cfd8ea;
  --line: rgba(11, 22, 56, .1);
  --ring: 0 0 0 4px rgba(11, 79, 224, .18);

  --nav-bg: var(--nx-navy);
  --nav-bg-soft: #0d2a85;
  --nav-ink: #ffffff;
  --nav-ink-muted: rgba(225, 233, 255, .72);
  --nav-line: rgba(255, 255, 255, .12);

  --radius-card: 22px;
  --font-head: "Montserrat", "DM Sans", system-ui, sans-serif;
}

body {
  font-family: "DM Sans", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(1200px 560px at 90% -10%, rgba(11, 79, 224, .08), transparent 62%),
    radial-gradient(900px 480px at -8% 108%, rgba(10, 29, 92, .06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: rgba(11, 79, 224, .18); }

h1, h2, h3, h4,
.app-topbar-title, .dash-kpi-num, .mkt-counter-num, .dtl-precio, .dtl-tipo,
.brand-copy strong, .login-brand strong, .page-header-counter strong {
  font-family: var(--font-head);
  letter-spacing: -.02em;
}
.inicio-hero h1, .properties-head h2, .fct-head h2, .page-header h2, .mkt-head-text h2 {
  letter-spacing: -.03em;
}

.container { width: min(1300px, calc(100% - 40px)); }

/* ── Botones: píldoras ─────────────────────────────────────────────────── */
.inicio-cta, #loginBtn, .fct-nav-btn, .fct-actions button, .tool-card-go { border-radius: 999px; }
.inicio-cta {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  box-shadow: 0 8px 20px rgba(11, 79, 224, .28);
}
#loginBtn {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  color: #fff; border: 0; font-family: var(--font-head); letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(11, 79, 224, .3);
}

/* ── Login: panel de marca + formulario ────────────────────────────────── */
.login-gate {
  background:
    radial-gradient(800px 520px at 0% 0%, rgba(61, 123, 255, .35), transparent 60%),
    linear-gradient(140deg, var(--nx-navy-deep) 0%, var(--nx-navy) 45%, #0b3fc0 100%);
}
.login-shell {
  width: min(980px, 100%);
  display: grid; grid-template-columns: 1.05fr 1fr;
  border-radius: 30px; overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 80px rgba(3, 10, 40, .45);
}
.login-side {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 22px;
  padding: 40px;
  color: #fff;
  background:
    radial-gradient(420px 300px at 110% 110%, rgba(61, 123, 255, .55), transparent 65%),
    linear-gradient(160deg, #0d2a85 0%, var(--nx-navy) 60%, var(--nx-navy-deep) 100%);
}
.login-side::after {
  content: ""; position: absolute; right: -90px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, .05);
}
.login-side-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.login-side-brand img { width: 40px; height: 40px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.login-side-brand b { color: var(--nx-sky); }
.login-side h2 { margin: 18px 0 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; font-weight: 800; color: #fff; }
.login-side h2 em { font-style: normal; color: var(--nx-sky); }
.login-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.login-side-list li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.88); font-size: 14px; }
.login-side-list span {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--nx-navy); font-family: var(--font-head); font-weight: 800; font-size: 12px;
}
.login-side-foot { margin: auto 0 0; color: rgba(255,255,255,.5); font-size: 12px; }

.login-card { border: 0; border-radius: 0; box-shadow: none; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.login-card::after { display: none; }
.login-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(10, 29, 92, .12);
}
.login-card h1 { font-size: clamp(30px, 3.6vw, 38px); letter-spacing: -.03em; line-height: 1.05; }
.login-form input { border-radius: 14px; }

@media (max-width: 820px) {
  .login-shell { grid-template-columns: 1fr; width: min(460px, 100%); }
  .login-side { display: none; }
  .login-card { padding: 32px 26px; }
}

/* ── Navegación: colores navy de Norte (drawer en celular) ─────────────── */
.sidebar {
  background: linear-gradient(180deg, #0d2a85 0%, var(--nx-navy) 40%, var(--nx-navy-deep) 100%);
}
.sidebar-brand .brand-mark {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.sidebar-brand .brand-logo { height: 30px; width: 30px; }
.brand-copy strong { font-weight: 800; font-size: 18px; }
.brand-copy strong b { color: var(--nx-sky); font-weight: 800; }
.sidebar-link.active { background: #fff; color: var(--nx-navy); }
.sidebar-link.active svg { color: var(--accent); }
.sidebar-link::before { display: none; }
.sidebar-user-avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  box-shadow: 0 4px 12px rgba(11, 79, 224, .4);
}
@media (hover: hover) and (pointer: fine) {
  .sidebar-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .sidebar-link.active:hover { background: #fff; color: var(--nx-navy); }
  .sidebar-logout:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
}

/* ── Escritorio: la navegación pasa a ser una barra superior ───────────── */
@media (min-width: 901px) {
  :root { --topbar-h: 68px; }

  .sidebar {
    width: 100%; height: var(--topbar-h);
    flex-direction: row; align-items: center; gap: 18px;
    padding: 0 clamp(16px, 2.4vw, 32px);
    background: linear-gradient(90deg, var(--nx-navy-deep) 0%, var(--nx-navy) 45%, #0d2f99 100%);
    box-shadow: 0 6px 24px rgba(6, 18, 61, .25);
    transform: none !important;
  }
  .sidebar-brand { padding: 0; border: 0; flex-shrink: 0; }
  .sidebar-brand .brand-mark { width: 40px; height: 40px; }
  .sidebar-brand .brand-logo { width: 27px; height: 27px; }

  .sidebar-nav {
    flex: 1; min-width: 0;
    display: flex; justify-content: center; gap: 4px;
    padding: 0; overflow: visible;
  }
  .sidebar-link {
    width: auto; min-height: 40px; padding: 8px 14px; gap: 8px;
    border-radius: 999px; font-size: 13.5px; white-space: nowrap;
  }
  .sidebar-link svg { width: 18px; height: 18px; }

  .sidebar-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 0; border: 0; flex-shrink: 0;
  }
  .sidebar-user { padding: 0; }
  .sidebar-user-avatar { width: 36px; height: 36px; }
  .sidebar-logout { min-height: 38px; padding: 0 14px; border-radius: 999px; }

  .app-main { margin-left: 0; padding-top: var(--topbar-h); }
  /* El título de cada vista ya está en su propio encabezado y en la pestaña activa. */
  .app-topbar { display: none; }
  .sidebar-overlay { display: none; }
  body.sidebar-hidden .app-main { margin-left: 0; }
}
@media (min-width: 901px) and (max-width: 1560px) {
  /* Con el botón de tema la barra no alcanza para el nombre del usuario hasta ~1560 px. */
  .sidebar-user-info { display: none; }
}
@media (min-width: 901px) and (max-width: 1360px) {
  .sidebar-logout span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sidebar-logout { width: 38px; padding: 0; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  .brand-copy { display: none; }
  .sidebar-link { padding: 8px 11px; }
  .sidebar-link span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sidebar-link.active span { position: static; width: auto; height: auto; clip: auto; }
}

/* Topbar del celular */
.app-topbar { background: rgba(255, 255, 255, .88); }
.app-topbar-title { font-weight: 800; }

/* ── Inicio ────────────────────────────────────────────────────────────── */
.nx-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; align-items: center;
  padding: clamp(28px, 4.6vw, 56px);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(560px 380px at 100% 0%, rgba(61, 123, 255, .55), transparent 62%),
    linear-gradient(135deg, var(--nx-navy-deep) 0%, var(--nx-navy) 48%, #0b3fc0 100%);
  box-shadow: 0 24px 60px rgba(6, 18, 61, .28);
}
.nx-hero::before, .nx-hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  border: 46px solid rgba(255, 255, 255, .045);
}
.nx-hero::before { width: 420px; height: 420px; right: -140px; bottom: -220px; }
.nx-hero::after { width: 220px; height: 220px; left: 38%; top: -150px; }
.nx-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.nx-hero h1 { margin: 18px 0 0; color: #fff; font-size: clamp(32px, 5vw, 56px); font-weight: 900; line-height: 1.02; letter-spacing: -.035em; }
.nx-hero h1 span { color: var(--nx-sky); }
.nx-hero p { margin: 16px 0 0; max-width: 60ch; color: rgba(235, 241, 255, .86); font-size: 16px; line-height: 1.65; }
.nx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.nx-hero .inicio-cta {
  background: #fff; color: var(--nx-navy); border: 0;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.nx-hero .inicio-cta--ghost {
  background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .nx-hero .inicio-cta:hover { background: #fff; color: var(--accent); }
  .nx-hero .inicio-cta--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
}
.nx-hero-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nx-hero-stats li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 22px; border-radius: 20px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}
.nx-hero-stats b { font-family: var(--font-head); font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.nx-hero-stats span { color: rgba(235, 241, 255, .78); font-size: 14px; }

.inicio-block h3 { font-size: 22px; font-weight: 800; }

.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1040px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 210px; padding: 24px;
  border-radius: 24px; border: 1px solid var(--border);
  background: #fff; color: var(--ink); text-align: left; font-weight: 400;
  box-shadow: 0 2px 6px rgba(10, 29, 92, .05), 0 10px 26px rgba(10, 29, 92, .06);
  transition: transform .3s var(--ease-spring), box-shadow .24s var(--ease-brand), border-color .24s var(--ease-brand);
}
.tool-card-num {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nx-navy); color: #fff;
  font-family: var(--font-head); font-size: 17px; font-weight: 800;
  box-shadow: 0 8px 18px rgba(10, 29, 92, .3);
}
.tool-card-ico { position: absolute; top: 22px; right: 22px; color: rgba(11, 79, 224, .22); }
.tool-card-ico svg { width: 44px; height: 44px; }
.tool-card strong { margin-top: 6px; font-family: var(--font-head); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.tool-card-text { color: var(--ink-soft); font-size: 14px; line-height: 1.55; padding-right: 36px; }
.tool-card-go {
  position: absolute; right: 18px; bottom: 18px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--nx-navy); font-size: 18px; font-weight: 700;
  transition: background .2s var(--ease-brand), color .2s var(--ease-brand), transform .3s var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover { transform: translateY(-5px); border-color: rgba(11, 79, 224, .3); box-shadow: 0 6px 12px rgba(10, 29, 92, .07), 0 22px 44px rgba(10, 29, 92, .12); }
  .tool-card:hover .tool-card-num { background: var(--accent); }
  .tool-card:hover .tool-card-go { background: var(--accent); color: #fff; transform: translateX(3px); }
}
.tool-card:active { transform: scale(.98); }

.about-card { border-radius: 24px; }
.about-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.about-points li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: 20px;
  border: 1px solid var(--border); background: #fff; box-shadow: var(--sh-1);
}
.about-point-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  background: rgba(11, 79, 224, .09);
}
.about-points b { display: block; font-family: var(--font-head); font-size: 15px; color: var(--ink); }
.about-points span { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }

@media (max-width: 900px) {
  .nx-hero { grid-template-columns: 1fr; border-radius: 24px; }
  .nx-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-hero-stats li { flex-direction: column; gap: 2px; padding: 14px 16px; }
}
@media (max-width: 560px) {
  .nx-hero { padding: 26px 20px; gap: 22px; }
  .nx-hero-stats { grid-template-columns: 1fr; }
  .nx-hero-stats li { flex-direction: row; align-items: baseline; gap: 12px; }
  .nx-hero-actions .inicio-cta { flex: 1 1 auto; justify-content: center; }
  .tool-card { min-height: 0; }
}

/* ── Bloques "todavía sin datos" ───────────────────────────────────────── */
.dash-pending, .prop-card-pending, .empty-pending {
  display: grid; gap: 6px; padding: 28px;
  border-radius: 22px; border: 1.5px dashed rgba(11, 79, 224, .3);
  background: rgba(11, 79, 224, .035);
  color: var(--ink-soft); font-size: 14px; line-height: 1.6;
}
.dash-pending strong, .prop-card-pending strong, .empty-pending strong { font-family: var(--font-head); color: var(--nx-navy); font-size: 17px; }
.prop-card-pending { grid-column: 1 / -1; min-height: 0; cursor: default; box-shadow: none; }
@media (hover: hover) { .prop-card-pending:hover { transform: none; box-shadow: none; } }

/* ── Tarjetas y superficies más redondeadas ────────────────────────────── */
.card, .prop-card, .mkt-card, .dash-card, .dash-kpi, .fct-card, .mkt-acm-wrap { border-radius: 22px; }
.dash-hero { border-radius: 26px; }
.dash-tag, .dash-hero-eyebrow { color: var(--accent); }
.fct-head-logo { width: 150px; }

.empty-pending { grid-column: 1 / -1; min-height: 0; box-shadow: none; }
.empty-pending::after { display: none; }
.filters[hidden], .summary[hidden] { display: none; }
.tool-card-soon {
  position: absolute; top: 26px; left: 84px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(11, 79, 224, .1); color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════════════
   VIDEO DE PROPIEDAD — reel vertical con HyperFrames (video.js + reel.js)
   ══════════════════════════════════════════════════════════════════════════ */

.dtl-video {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border: 0; border-radius: 999px;
  background: var(--nx-navy); color: #fff;
  font: 700 .84rem/1 "DM Sans", system-ui, sans-serif; cursor: pointer;
  transition: transform 150ms var(--ease-out), background 150ms ease;
}
.dtl-video svg { width: 20px; height: 20px; }
.dtl-video:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .dtl-video:hover { background: var(--accent); }
}

.vid-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 180ms var(--ease-out), visibility 0s linear 180ms;
}
.vid-modal.open { opacity: 1; visibility: visible; transition: opacity 180ms var(--ease-out); }
.vid-backdrop { position: absolute; inset: 0; background: rgba(6, 18, 61, .82); backdrop-filter: blur(6px); }
.vid-panel {
  position: relative;
  height: min(88vh, 900px); aspect-ratio: 9 / 16; max-width: 92vw;
  border-radius: 22px; overflow: hidden;
  background: var(--nx-navy-deep);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.vid-stage, .vid-stage hyperframes-player { display: block; width: 100%; height: 100%; }
.vid-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--nx-navy); cursor: pointer;
}
.vid-close svg { width: 18px; height: 18px; }
.vid-status {
  position: absolute; inset: auto 0 50% 0; margin: 0; padding: 0 24px;
  text-align: center; color: #dbe5ff; font-weight: 600;
}
@media (max-width: 900px) {
  .vid-modal { padding: 0; }
  .vid-panel { height: 100vh; max-width: 100vw; border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN POR AGENTE, USUARIOS Y COMPARTIR (2026-10-20)
   ══════════════════════════════════════════════════════════════════════════ */

/* Botón principal de la ficha: el agente comparte el inmueble con SU contacto. */
.dtl-compartir {
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 20px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent)); color: #fff;
  font: 700 .95rem/1 "DM Sans", system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 8px 20px rgba(11, 79, 224, .28);
  transition: transform 150ms var(--ease-out), box-shadow 150ms ease;
}
.dtl-compartir svg { width: 19px; height: 19px; }
.dtl-compartir:active { transform: scale(.97); }
.dtl-compartir:disabled { opacity: .6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .dtl-compartir:hover { box-shadow: 0 12px 26px rgba(11, 79, 224, .36); }
}

/* Ventanas propias (clave temporal y compartir) */
.nx-modal { position: fixed; inset: 0; z-index: 13000; display: grid; place-items: center; padding: 16px; }
.nx-modal[hidden] { display: none; }
.nx-modal::before { content: ""; position: absolute; inset: 0; background: rgba(6, 18, 61, .55); backdrop-filter: blur(4px); }
.nx-modal-fondo { position: absolute; inset: 0; }
.nx-modal-card {
  position: relative; width: min(460px, 100%);
  padding: 28px; border-radius: 24px; background: #fff;
  box-shadow: 0 30px 80px rgba(3, 10, 40, .4);
}
.nx-modal-card h3 { margin: 0; font-size: 22px; color: var(--ink); }
.nx-modal-card > p { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; }
.nx-modal-cerrar {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; min-height: 36px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); font-size: 20px; line-height: 1;
}
.nx-modal-form { display: grid; gap: 12px; margin-top: 18px; }
.nx-modal-form label { display: grid; gap: 6px; }
.nx-modal-form label span { color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.nx-modal-form button { min-height: 48px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-soft), var(--accent)); color: #fff; border: 0; }

.compartir-link { display: flex; gap: 8px; margin-top: 18px; }
.compartir-link input { flex: 1; min-width: 0; font-size: 14px; }
.compartir-link button { flex-shrink: 0; border-radius: 12px; }
.compartir-acciones { display: grid; gap: 8px; margin-top: 12px; }
.compartir-estado { min-height: 18px; margin: 10px 0 0; color: #0a8f6e; font-size: 13px; font-weight: 700; }

.usr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid transparent;
  background: var(--nx-navy); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.usr-btn--wa { background: #22c15f; }
.usr-btn--ghost { background: #fff; color: var(--nx-navy); border-color: var(--border-strong); }
.usr-btn--peligro { background: #fff; color: #c41828; border-color: rgba(196, 24, 40, .35); }
.usr-error { min-height: 18px; margin: 6px 0 0; color: #c41828; font-size: 13px; font-weight: 700; }
.usr-error[hidden] { display: none; }

/* Vista Usuarios */
.usr-resumen { padding: 8px 14px; border-radius: 999px; background: rgba(11, 79, 224, .08); color: var(--accent); font-weight: 700; font-size: 13px; }
.usr-form { padding: 22px; border-radius: 22px; border: 1px solid var(--border); background: #fff; box-shadow: var(--sh-1); }
.usr-form h3 { margin: 0 0 14px; font-size: 18px; }
.usr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.usr-grid label { display: grid; gap: 6px; min-width: 0; }
.usr-grid label > span { color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.usr-grid input { min-width: 0; }
.usr-check { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 8px !important; }
.usr-check input { width: auto; min-height: 0; }
.usr-form-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.usr-form-pie button { border-radius: 999px; background: linear-gradient(135deg, var(--accent-soft), var(--accent)); color: #fff; border: 0; padding: 0 22px; }

.usr-clave[hidden] { display: none; }
.usr-clave {
  display: grid; gap: 8px; margin-top: 16px; padding: 20px;
  border-radius: 22px; border: 1.5px solid rgba(10, 143, 110, .4); background: rgba(10, 143, 110, .06);
}
.usr-clave code {
  justify-self: start; padding: 8px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--border);
  font-size: 22px; font-weight: 700; letter-spacing: .08em; color: var(--ink);
}
.usr-clave span { color: var(--ink-soft); font-size: 13px; }
.usr-clave-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.usr-tabla-wrap { margin-top: 18px; overflow-x: auto; border-radius: 22px; border: 1px solid var(--border); background: #fff; box-shadow: var(--sh-1); }
.usr-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.usr-tabla th { text-align: left; padding: 12px 14px; color: var(--ink-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.usr-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.usr-tabla tr:last-child td { border-bottom: 0; }
.usr-tabla td strong { display: block; color: var(--ink); }
.usr-tabla td span { color: var(--ink-muted); font-size: 12px; }
.usr-tabla tr.is-baja td { opacity: .55; }
.usr-acciones { display: flex; gap: 6px; justify-content: flex-end; }
.usr-rol, .usr-estado { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px !important; font-weight: 700; }
.usr-rol--admin { background: rgba(11, 79, 224, .1); color: var(--accent) !important; }
.usr-rol--agente { background: var(--surface-3); color: var(--ink-soft) !important; }
.usr-estado--ok { background: rgba(10, 143, 110, .1); color: #0a8f6e !important; }
.usr-estado--pend { background: rgba(224, 138, 0, .12); color: #b36e00 !important; }
.usr-estado--baja { background: rgba(196, 24, 40, .08); color: #c41828 !important; }

@media (max-width: 760px) {
  .usr-grid { grid-template-columns: 1fr; }
  .nx-modal-card { padding: 22px; }
}

/* Perfil, olvidé mi clave y panel del broker (perfil.js, usuarios.js) */
.login-form button.login-olvide {
  min-height: 0; margin: 0; padding: 4px; width: auto; justify-self: center;
  background: none; border: 0; box-shadow: none; color: var(--accent); font-size: 13px; font-weight: 700;
}
.login-form button.login-olvide:hover { background: none; text-decoration: underline; transform: none; }
.login-olvide-texto { margin: 0; color: var(--ink-soft); font-size: 14px; }
.login-form[hidden] { display: none; } /* el display:grid de .login-form pisaba el hidden del form de "olvidé mi clave" */
.login-error.is-ok, .usr-error.is-ok { color: #0a8f6e; }

.sidebar-user { cursor: pointer; }
.sidebar-user:hover, .sidebar-user:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.sidebar-user-avatar.con-foto, .usr-avatar.con-foto, .perfil-foto-img.con-foto {
  background-size: cover; background-position: center; color: transparent;
}

.nx-modal-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
.perfil-foto { display: flex; align-items: center; gap: 14px; }
.perfil-foto-img {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; font-weight: 800;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
}
.nx-modal-form .perfil-foto-btn { display: inline-flex; min-height: 40px; cursor: pointer; }
.nx-modal-form .perfil-foto-btn span { color: inherit; }
.perfil-clave { padding-top: 18px; border-top: 1px solid var(--border); }
.perfil-clave h4 { margin: 0; font-size: 16px; color: var(--ink); }
.nx-modal-form .usr-check { display: flex; align-items: center; gap: 8px; }
.nx-modal-form button.usr-btn--ghost { background: #fff; color: var(--nx-navy); border: 1px solid var(--border-strong); }

.usr-seccion-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.usr-seccion-head h3 { margin: 0; font-size: 18px; }
.usr-seccion-nota { color: var(--ink-muted); font-size: 13px; }
.usr-estado-panel { margin-bottom: 18px; padding: 22px; border-radius: 22px; border: 1px solid var(--border); background: #fff; box-shadow: var(--sh-1); }
.usr-estado-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.usr-estado-card {
  display: grid; gap: 3px; padding: 14px 16px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.usr-estado-card span { color: var(--ink-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.usr-estado-card strong { color: var(--ink); font-size: 17px; }
.usr-estado-card small { color: var(--ink-soft); font-size: 12px; }
.usr-estado-card.is-ok { background: rgba(10, 143, 110, .07); border-color: rgba(10, 143, 110, .25); }
.usr-estado-card.is-ok strong { color: #0a8f6e; }
.usr-estado-card.is-mal { background: rgba(196, 24, 40, .06); border-color: rgba(196, 24, 40, .25); }
.usr-estado-card.is-mal strong { color: #c41828; }
.usr-estado-card.is-warn { background: rgba(224, 138, 0, .08); border-color: rgba(224, 138, 0, .3); }
.usr-estado-card.is-info strong { color: var(--accent); }
.usr-avisos { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.usr-avisos:empty { display: none; }
.usr-avisos li { padding: 10px 14px; border-radius: 12px; background: rgba(224, 138, 0, .1); color: #8a5300; font-size: 13px; font-weight: 600; }

.usr-agente { display: flex; align-items: center; gap: 10px; }
.usr-avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 12px !important; font-weight: 800;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
}
.usr-actividad { margin-top: 26px; }
.usr-actividad-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }
.usr-actividad-grid .usr-tabla-wrap { margin-top: 0; }
.usr-td-titulo { white-space: normal !important; min-width: 220px; }
.usr-td-titulo strong { font-weight: 600; }
@media (max-width: 1100px) { .usr-actividad-grid { grid-template-columns: 1fr; } }

/* ── Interruptor tipo iPhone (checkbox con role="switch") ─────────────────
   Las reglas generales de input (appearance:none, fondo blanco en hover/focus,
   min-height de 46px) dejaban el checkbox como un óvalo vacío: marcado o no se
   veía igual. Por eso la especificidad doble en cada estado. */
.usr-check input.nx-switch,
.usr-check input.nx-switch:hover,
.usr-check input.nx-switch:focus {
  -webkit-appearance: none; appearance: none;
  position: relative; flex: 0 0 auto;
  width: 51px; height: 31px; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 999px;
  background: var(--switch-off);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.usr-check input.nx-switch::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
  transition: transform .28s var(--ease-spring);
}
.usr-check input.nx-switch:checked,
.usr-check input.nx-switch:checked:hover,
.usr-check input.nx-switch:checked:focus { background: #34c759; box-shadow: none; }
.usr-check input.nx-switch:checked::before { transform: translateX(20px); }
.usr-check input.nx-switch:focus-visible { box-shadow: var(--ring); }
.usr-check input.nx-switch:disabled { opacity: .5; cursor: not-allowed; }
.usr-check { gap: 12px !important; cursor: pointer; }
:root { --switch-off: #e3e6ec; }

/* ── Botón de tema (junto a "Cerrar sesión") ─────────────────────────────── */
.sidebar-tema .tema-sol { display: none; }
:root[data-theme="dark"] .sidebar-tema .tema-sol { display: block; }
:root[data-theme="dark"] .sidebar-tema .tema-luna { display: none; }
@media (min-width: 901px) {
  /* En la barra superior va solo el ícono, redondo. */
  .sidebar-tema { width: 38px; padding: 0; }
  .sidebar-tema span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ── Modo oscuro ───────────────────────────────────────────────────────────
   Casi todo sale de las variables; abajo, los componentes que tenían el blanco
   escrito a mano. La vista previa del formulario (.fct-preview) queda blanca a
   propósito: es la hoja que se imprime, así que recupera la paleta clara. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #0a1020;
  --bg: #0a1020;
  --ice-0: #121a2e;
  --ice-1: #151f36;
  --ice-2: #192540;
  --ice-3: #22304f;
  --surface: #121a2e;
  --surface-2: #172139;
  --surface-3: #1d2945;
  --border: #243252;
  --border-strong: #31426a;
  --ink: #e7ecf7;
  --ink-soft: #b3bfd8;
  --ink-muted: #8592b0;
  --line: rgba(255, 255, 255, .09);
  --accent: #4d86ff;
  --accent-dark: #2f66e6;
  --accent-soft: #7aa5ff;
  --accent-rgb: 77, 134, 255;
  --st-alquiler: #4d86ff;
  --nav-bg: #0b1638;
  --nav-bg-soft: #102056;
  --switch-off: #39425a;
  --shadow-soft: 0 14px 40px rgba(0, 0, 0, .35);
  --shadow-hover: 0 22px 56px rgba(0, 0, 0, .45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 2px 4px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .3);
  --sh-3: 0 4px 8px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .35);
  --sh-4: 0 8px 16px rgba(0, 0, 0, .4), 0 24px 56px rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: rgba(179, 191, 216, .5); }

/* Superficies sólidas que eran #fff */
:root[data-theme="dark"] :is(
  .usr-form, .usr-tabla-wrap, .usr-estado-panel, .nx-modal-card, .tool-card, .about-points li,
  .login-shell, .usr-clave code, .mkt-acm-metric, #clearBtn, #propClearBtn,
  .usr-btn--ghost, .usr-btn--peligro, .nx-modal-form button.usr-btn--ghost
) { background: var(--surface); }
:root[data-theme="dark"] :is(.usr-btn--ghost, .nx-modal-form button.usr-btn--ghost) { color: var(--ink); }
:root[data-theme="dark"] .usr-btn--peligro { color: #ff6b78; border-color: rgba(255, 107, 120, .4); }

/* Campos: el hover/focus los pintaba de blanco */
:root[data-theme="dark"] :is(input, select, textarea):is(:hover, :focus, :focus-visible),
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] .toolbar :is(input, select):is(:hover, :focus) { background-color: var(--surface-2); }

/* Superficies translúcidas que eran blanco con alfa */
:root[data-theme="dark"] :is(
  .toolbar, .toolbar.is-stuck, .app-topbar, .mkt-acm-wrap, .detail-wrap, .dash-tag, .hero-pill,
  .chip, .pagination-btn, .pagination-ellipsis, .modal-close, .to-top, .toolbar-toggle, .toolbar select, .toolbar input,
  .fct-step-num, .fct-field textarea, .fct-check:not(.fct-check-otros), .prop-type-chip,
  .dtl-close, .dtl-nav, .vid-close
) { background-color: rgba(18, 26, 46, .82); border-color: var(--border); color: var(--ink); }
:root[data-theme="dark"] :is(.modal-close, .to-top, .toolbar-toggle, .dtl-close, .dtl-nav, .pagination-btn):hover,
:root[data-theme="dark"] .fct-check:not(.fct-check-otros):hover { background-color: var(--surface-3); }
:root[data-theme="dark"] .leaflet-control-layers { background: rgba(18, 26, 46, .94) !important; color: var(--ink); }
:root[data-theme="dark"] button:disabled:hover,
:root[data-theme="dark"] button[disabled]:hover { background: var(--surface-2); }

/* Detalles con color fijo pensado para fondo claro */
:root[data-theme="dark"] .usr-avisos li { background: rgba(224, 138, 0, .14); color: #ffc46b; }
:root[data-theme="dark"] .usr-estado-card.is-ok strong { color: #3dd6a8; }
:root[data-theme="dark"] .usr-estado-card.is-mal strong,
:root[data-theme="dark"] .usr-error { color: #ff6b78; }
:root[data-theme="dark"] .usr-resumen { background: rgba(77, 134, 255, .14); }
:root[data-theme="dark"] .tool-card-go { color: var(--ink); }
:root[data-theme="dark"] .tool-card-ico { color: rgba(77, 134, 255, .3); }
:root[data-theme="dark"] .about-point-ico { background: rgba(77, 134, 255, .14); }
:root[data-theme="dark"] .compartir-estado { color: #3dd6a8; }

/* ACM de Mercado */
:root[data-theme="dark"] .mkt-acm-panel { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border-color: var(--border); }
:root[data-theme="dark"] .mkt-acm-toggle { border-color: var(--accent); color: var(--accent); }
:root[data-theme="dark"] .mkt-acm-toggle:hover { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .mkt-acm-note--warn { color: #ffc46b; }

/* Vista previa de Captación y Cierre: hoja de papel, siempre clara */
:root[data-theme="dark"] .fct-preview {
  color-scheme: light;
  --ink: #0b1638; --ink-soft: #3c4a6b; --ink-muted: #6a7796;
  --surface: #ffffff; --surface-2: #f7f9fc; --border: #e2e8f4; --line: rgba(11, 22, 56, .1);
  --accent: #0b4fe0; --accent-rgb: 11, 79, 224;
  background: #fff; color: var(--ink);
}

:root[data-theme="dark"] :is(.dash-pending, .prop-card-pending, .empty-pending) strong { color: var(--accent-soft); }

/* ── Teléfono con selector de país (telefono.js) ──────────────────────────── */
.tel-campo { display: flex; gap: 6px; min-width: 0; }
.tel-campo select {
  flex: 0 0 auto; width: 118px; min-width: 0; padding-right: 30px;
  /* La misma flecha que los demás selects (algún estilo del formulario le pisaba el fondo). */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.tel-campo input { flex: 1 1 auto; min-width: 0; }