/* OfficeLab — estética "Hermes Tinta" (Propiedades + Clientes).
   Autocontenida a propósito: no carga style.css, porque el diseño cambia la paleta
   entera (tinta sobre crema), la tipografía y quita los bordes redondeados.
   Mezclar ambas dejaría la página a medio reskin. */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:#201333; --paper:#EFEDE6;
  /* --faint era #9C93AD y daba 2.49:1 sobre --bg: reprobaba AA (4.5:1) en los 48
     lugares donde se usa, no sólo en los 3 que ve un detector de HTML estático.
     #716686 es el mismo tono y la misma saturación, bajado lo justo para dar 4.54:1. */
  --bg:#EFEDE6; --surface:#FFFFFF; --ink:#111120; --muted:#5B4A75; --faint:#716686;
  --border:rgba(32,19,51,.22); --border-2:rgba(32,19,51,.42);
  --accent:#201333; --accent-soft:rgba(32,19,51,.10); --on-accent:#EFEDE6;
  --topbar:#201333; --topbar-text:#EFEDE6;
  /* Estados del seguimiento de propiedades */
  --s-nuevo:#2B3FC4; --s-revisado:#6B3FB5; --s-contactado:#A85F14;
  --s-rentado:#1F6F4A; --s-descartado:#83808C;
  --r-nuevo:rgba(43,63,196,.10); --r-revisado:rgba(107,63,181,.10);
  --r-contactado:rgba(168,95,20,.10); --r-rentado:rgba(31,111,74,.10);
  --r-descartado:rgba(131,128,140,.10);
  /* Estados del proceso comercial (clientes) */
  --s-presentado:#2B3FC4; --s-aprobado:#1F6F4A; --s-rechazado:#A83B22;
  --r-presentado:rgba(43,63,196,.10); --r-aprobado:rgba(31,111,74,.10); --r-rechazado:rgba(168,59,34,.10);
  --font-ui:'Hanken Grotesk',system-ui,sans-serif;
  --font-display:'Bodoni Moda',Didot,Georgia,serif;
  --font-mono:'Space Mono',monospace;
  --photo-h:212px; --card-pad:18px; --gap:18px;
}

/* Tema oscuro. Se activa con data-theme="dark" en <html> (lo pone theme.js antes
   del primer paint) y sólo redefine tokens: ni una regla de componente cambia.
   --paper y --blue NO se invierten — son el par "chip crema sobre pozo oscuro"
   de las fotos, los badges de fuente y el panel del login, que en los dos temas
   se ve igual. Lo que sí cambia es --on-accent, porque el acento pasa a ser crema. */
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#201333; --surface:#2A1A42; --ink:#EFEDE6;
  /* .46 daba 4.06:1 sobre --bg y también reprobaba AA; .50 llega a 4.59:1. */
  --muted:rgba(239,237,230,.72); --faint:rgba(239,237,230,.50);
  --border:rgba(239,237,230,.24); --border-2:rgba(239,237,230,.42);
  --accent:#EFEDE6; --accent-soft:rgba(239,237,230,.14); --on-accent:#201333;
  --topbar:#160C24;
  /* --blue baja un punto: sin esto queda igual que --bg y el panel del login y el
     hueco de foto de las tarjetas se pierden contra su fondo. */
  --blue:#180E29;
  /* Los estados suben de luminosidad: los tonos de 100% saturación del tema claro
     no llegan al contraste mínimo sobre #201333. */
  --s-nuevo:#A9BEFF; --s-revisado:#D3BFF7; --s-contactado:#F5C98C;
  --s-rentado:#95DEB9; --s-descartado:#C6C4CF;
  --r-nuevo:rgba(169,190,255,.14); --r-revisado:rgba(211,191,247,.14);
  --r-contactado:rgba(245,201,140,.14); --r-rentado:rgba(149,222,185,.14);
  --r-descartado:rgba(198,196,207,.12);
  --s-presentado:#A9BEFF; --s-aprobado:#95DEB9; --s-rechazado:#F0A18E;
  --r-presentado:rgba(169,190,255,.14); --r-aprobado:rgba(149,222,185,.14);
  --r-rechazado:rgba(240,161,142,.14);
}

body {
  min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-2); }
input::placeholder, textarea::placeholder { color:var(--faint); }
a { color:var(--accent); }
a:hover { color:var(--ink); }

/* ── Topbar ───────────────────────────────────────────────────────────────
   Medidas tomadas del mock `OfficeLab.dc.html`: 66 px de alto, gap 22, padding
   lateral 26. El botón de menú lo inyecta menu.js y va con `order:-1` para caer
   a la izquierda de la marca sin repetirlo en seis archivos. */
.topbar {
  position:sticky; top:0; z-index:50; background:var(--topbar); color:var(--topbar-text);
  display:flex; align-items:center; gap:22px; padding:0 26px; height:66px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-group { display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none; color:var(--topbar-text); }
.brand-mark { display:block; flex-shrink:0; }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand {
  font-family:var(--font-display); font-size:20px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
}
.brand i { font-style:italic; }
.brand-sub {
  font-family:var(--font-mono); font-size:9px; letter-spacing:.2em;
  color:rgba(239,237,230,.42); text-transform:uppercase; margin-top:4px; white-space:nowrap;
}

/* Buscador: caja translúcida dentro de la barra, no un input con borde claro. */
.topbar-search { flex:1; min-width:0; max-width:430px; position:relative; }
.search-box {
  display:flex; align-items:center; gap:9px; height:40px; padding:0 13px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
}
.search-box > svg { flex-shrink:0; color:rgba(239,237,230,.4); }
.search-box input {
  flex:1; min-width:0; height:100%; background:transparent; border:none;
  color:var(--topbar-text); font-family:var(--font-ui); font-size:14px; outline:none;
}
.search-box input::placeholder { color:rgba(239,237,230,.38); }

/* Pestañas: la activa se marca con fondo y una línea de papel abajo, a toda altura. */
.topbar-nav { display:flex; align-items:center; flex-shrink:0; }
.topbar-nav a {
  display:inline-flex; align-items:center; gap:8px; height:66px; padding:0 15px;
  font-family:var(--font-ui); font-size:13.5px; font-weight:500;
  color:rgba(239,237,230,.62); text-decoration:none;
}
.topbar-nav a:hover { color:var(--topbar-text); }
.topbar-nav a.active {
  font-weight:700; color:var(--topbar-text);
  background:rgba(255,255,255,.1); border-bottom:2px solid var(--paper);
}

.topbar-right { margin-left:auto; display:flex; align-items:center; gap:14px; flex-shrink:0; }
/* Filete decorativo del mock: papel milimétrico, no información. */
.topbar-rule {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em;
  color:rgba(239,237,230,.2); white-space:nowrap;
}
.count-tag { font-family:var(--font-mono); font-size:12px; color:rgba(239,237,230,.5); white-space:nowrap; }
.count-tag strong { font-weight:400; color:var(--topbar-text); }
.btn-ghost {
  display:inline-flex; align-items:center; background:transparent;
  border:1px solid rgba(255,255,255,.18); color:rgba(239,237,230,.85);
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  padding:0 16px; height:36px; cursor:pointer; text-decoration:none;
}
.btn-ghost:hover { background:rgba(255,255,255,.12); color:var(--topbar-text); }


/* Interruptor de tema. Lo inyecta theme.js al principio de .topbar-right; el
   cuadro medio relleno es el ícono de contraste de siempre y encaja con la marca. */
.th-btn {
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  flex-shrink:0; padding:0; border:1px solid rgba(255,255,255,.18);
  background:transparent; color:rgba(239,237,230,.85); cursor:pointer;
}
.th-btn[aria-pressed="true"] svg { transform:rotate(180deg); }
.th-btn:hover { background:rgba(255,255,255,.12); color:var(--topbar-text); }

/* Pie de página: versión, commit y conteo. Del mock. */
.appfoot {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 26px; border-top:1px solid var(--border); background:var(--surface);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--faint);
}
.appfoot-rule { margin-left:auto; letter-spacing:.2em; }

/* ── Barra de consulta ────────────────────────────────────────────────────
   La "sentencia editable" del mock: cada filtro es un token que se quita con la ×,
   y `+ filtro` abre una paleta tipo ⌘K. Sustituye a las filas de píldoras: con
   diez filtros posibles, una fila por filtro no cabía en la barra. */
.qbar {
  position:relative; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--border); padding:14px 26px 13px;
}
.qbar-box {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:42px;
  background:var(--surface); border:1px solid var(--border-2); padding:8px 10px;
}
.qbar-label {
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); padding-left:4px; flex-shrink:0;
}
.tok { display:inline-flex; align-items:center; border:1px solid var(--accent); background:var(--accent-soft); }
.tok-edit {
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 8px 0 10px;
  border:none; background:transparent; color:var(--accent);
  font-family:var(--font-ui); font-size:13px; font-weight:600; cursor:pointer;
}
.tok-kind { font-family:var(--font-mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.6; }
.tok-del {
  height:30px; padding:0 9px; border:none; background:transparent;
  color:var(--accent); opacity:.55; font-size:15px; line-height:1; cursor:pointer;
}
.tok-del:hover { opacity:1; }
.qbar-add {
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px;
  border:1px dashed var(--border-2); background:transparent; color:var(--muted);
  font-family:var(--font-ui); font-size:13px; font-weight:600; cursor:pointer;
}
.qbar-add:hover { border-color:var(--accent); color:var(--accent); }
.qbar-kbd { font-family:var(--font-mono); font-size:10px; border:1px solid currentColor; padding:1px 4px; opacity:.5; }
.qbar-clear {
  margin-left:auto; height:30px; padding:0 11px; border:none; background:transparent;
  color:var(--accent); font-family:var(--font-ui); font-size:12.5px; font-weight:700; cursor:pointer;
}
.qbar-sentence {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:10px; padding-left:4px;
  font-family:var(--font-ui); font-size:12.5px; color:var(--muted);
}

/* Barra fija de filtros (`fb-`): Ubicación, Precio y Tipo.
   Caja recta y borde, como todo aquí: la jerarquía la da el acento del chip puesto,
   no una sombra. Bajo 760px el popover deja de colgar del chip y se vuelve hoja
   inferior, porque anclado se sale de la pantalla. */
.fb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.fb-chip { display:inline-flex; align-items:center; border:1px solid var(--border-2); background:var(--surface); }
.fb-chip.on { border-color:var(--accent); background:var(--accent-soft); }
.fb-open {
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px;
  border:none; background:transparent; color:var(--ink);
  font-family:var(--font-ui); font-size:13.5px; font-weight:600; cursor:pointer;
}
.fb-chip.on .fb-open { color:var(--accent); }
.fb-open:hover { color:var(--accent); }
.fb-k {
  font-family:var(--font-mono); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--faint);
}
.fb-chip.on .fb-k { color:var(--accent); opacity:.65; }
.fb-v { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-x {
  height:38px; padding:0 10px; border:none; background:transparent; color:var(--accent);
  opacity:.55; font-size:15px; line-height:1; cursor:pointer;
}
.fb-x:hover { opacity:1; }
.fb-x[hidden] { display:none; }

.fb-scrim { display:none; }
.fb-pop {
  position:absolute; top:calc(100% - 6px); left:26px; z-index:90; width:420px;
  background:var(--surface); border:1px solid var(--accent);
  padding:14px 16px 12px; display:flex; flex-direction:column; gap:11px;
}
.fb-pop[hidden] { display:none; }
.fb-head { display:flex; align-items:center; justify-content:space-between; }
.fb-title {
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:.1em;
}
.fb-close { border:none; background:transparent; color:var(--faint); font-size:17px; line-height:1; cursor:pointer; padding:0; }
.fb-close:hover { color:var(--accent); }
.fb-in {
  width:100%; height:38px; padding:0 12px; border:1px solid var(--border-2);
  background:var(--surface); font-family:var(--font-ui); font-size:13.5px;
  color:var(--ink); outline:none;
}
.fb-in:focus { border-color:var(--accent); }
.fb-in:disabled { color:var(--faint); background:var(--bg); }
.fb-nota { margin:0; font-size:11.5px; line-height:1.45; color:var(--faint); }

/* Ubicación */
.fb-sels { display:flex; flex-wrap:wrap; gap:6px; }
.fb-sels:empty { display:none; }
.fb-sel {
  display:inline-flex; align-items:center; gap:6px; padding:0 0 0 9px; height:28px;
  border:1px solid var(--accent); background:var(--accent-soft);
  color:var(--accent); font-size:12.5px; font-weight:600;
}
.fb-sel-e { font-family:var(--font-mono); font-size:10px; opacity:.6; }
.fb-sel-x { height:28px; padding:0 8px; border:none; background:transparent; color:var(--accent); opacity:.55; font-size:14px; line-height:1; cursor:pointer; }
.fb-sel-x:hover { opacity:1; }
.fb-sugs { display:flex; flex-direction:column; max-height:228px; overflow-y:auto; }
.fb-sugs:empty { display:none; }
.fb-sug {
  display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px;
  border:none; background:transparent; color:var(--ink); text-align:left;
  font-family:var(--font-ui); font-size:13px; cursor:pointer;
}
.fb-sug:hover { background:var(--accent-soft); }
.fb-sug-e { font-family:var(--font-mono); font-size:10px; color:var(--faint); }
.fb-sug-n { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--faint); }

/* Precio */
.fb-segs { display:flex; }
.fb-seg {
  flex:1; height:38px; border:1px solid var(--border-2); background:var(--surface);
  color:var(--ink); font-family:var(--font-ui); font-size:13px; font-weight:600; cursor:pointer;
}
.fb-seg + .fb-seg { border-left:none; }
.fb-seg.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.fb-rango { display:flex; align-items:center; gap:9px; }
.fb-num { text-align:right; font-family:var(--font-mono); font-size:13px; }
.fb-guion { color:var(--faint); }

/* Tipo */
.fb-cajas { display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; }
.fb-caja { display:flex; align-items:center; gap:9px; min-height:36px; font-size:13.5px; cursor:pointer; }
.fb-caja input { width:17px; height:17px; accent-color:var(--accent); cursor:pointer; }

.fb-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fb-limpia {
  height:34px; padding:0 4px; border:none; background:transparent; color:var(--muted);
  font-family:var(--font-ui); font-size:12.5px; font-weight:700; cursor:pointer;
}
.fb-limpia:hover { color:var(--accent); }
.fb-aplica {
  height:34px; padding:0 20px; border:1px solid var(--accent); background:var(--accent);
  color:var(--on-accent); font-family:var(--font-ui); font-size:13px; font-weight:700; cursor:pointer;
}

@media (max-width:760px) {
  /* Hoja inferior: anclada al chip se saldría de la pantalla. El fondo oscurecido
     sólo existe aquí, porque es lo que hace tocable el "cerrar" fuera de la hoja. */
  .fb-pop {
    position:fixed; inset:auto 0 0 0; width:auto; max-height:78vh; overflow-y:auto;
    border-width:1px 0 0; padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  }
  .fb-scrim { display:block; position:fixed; inset:0; z-index:85; background:rgba(17,17,32,.45); }
  .fb-scrim[hidden] { display:none; }
  .fb-v { max-width:120px; }
  .fb-cajas { grid-template-columns:1fr; }
}

/* Paleta ⌘K y editor de token: dos popovers anclados a la barra. */
.qpop {
  position:absolute; top:calc(100% - 6px); left:26px; z-index:80;
  background:var(--surface); border:1px solid var(--border-2);
  padding:11px; display:flex; flex-direction:column; gap:3px;
}
.qpop[hidden] { display:none; }
.qpop-pal { width:440px; }
.qpop-ed { width:540px; border-color:var(--accent); padding:15px 16px 13px; gap:13px; }
.qpop-in {
  width:100%; height:36px; padding:0 12px; border:1px solid var(--border-2);
  background:var(--surface); font-family:var(--font-ui); font-size:13.5px;
  color:var(--ink); outline:none;
}
.qpop-in:focus { border-color:var(--accent); }
.qpop-pal .qpop-in { margin-bottom:6px; }
.qpop-item {
  display:flex; align-items:center; gap:11px; height:36px; padding:0 10px;
  border:none; background:transparent; color:var(--ink);
  font-family:var(--font-ui); font-size:13.5px; font-weight:600; cursor:pointer; text-align:left;
}
.qpop-item:hover, .qpop-item.sel { background:var(--accent-soft); }
.qpop-group {
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--faint);
  text-transform:uppercase; letter-spacing:.08em; width:74px; flex-shrink:0;
}
.qpop-hint { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--faint); }
.qpop-empty { padding:12px 10px; font-size:13px; color:var(--muted); }
.qpop-head { display:flex; align-items:center; justify-content:space-between; }
.qpop-title { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; }
.qpop-x { border:none; background:transparent; color:var(--faint); font-size:17px; line-height:1; cursor:pointer; padding:0; }
.qpop-row { display:flex; align-items:center; gap:8px; }
.qpop-de { margin-top:8px; }
.qpop-de select { flex:1; width:auto; }
.qpop-chips { display:flex; flex-wrap:wrap; gap:6px; }
.qpop-chip {
  display:inline-flex; align-items:center; gap:6px; height:29px; padding:0 10px;
  border:1px solid var(--border-2); background:transparent; color:var(--ink);
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; cursor:pointer;
}
.qpop-chip:hover { border-color:var(--accent); }
.qpop-chip.on { border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
.qpop-chip span { font-family:var(--font-mono); font-size:10px; opacity:.6; }
.qpop-foot {
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border); padding-top:11px;
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
}
.qpop-ok {
  height:31px; padding:0 15px; border:none; background:var(--topbar); color:var(--topbar-text);
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; cursor:pointer;
}
.qpop-num {
  flex:1; min-width:0; height:36px; padding:0 12px; border:1px solid var(--border-2);
  background:var(--surface); font-family:var(--font-mono); font-size:13px; color:var(--ink); outline:none;
}
.qpop-dash { color:var(--faint); }

/* ── Fila de estado ─────────────────────────────────────────────────────── */
.statebar {
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:11px 26px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.statebar-label {
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--faint);
  text-transform:uppercase; letter-spacing:.1em; margin-right:2px;
}
.pill {
  display:inline-flex; align-items:center; gap:6px; height:29px; padding:0 11px;
  border:1px solid transparent; background:transparent; color:var(--muted);
  font-family:var(--font-ui); font-size:12.5px; font-weight:500; white-space:nowrap; cursor:pointer;
}
.pill:hover { color:var(--ink); }
.pill.active { font-weight:700; border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
.pill-count { font-family:var(--font-mono); font-size:10px; opacity:.65; }
.pill-dot { width:7px; height:7px; flex-shrink:0; }
.statebar-sep { width:1px; height:20px; background:var(--border-2); margin:0 5px; }
.statebar .btn-clear { margin-left:auto; }

/* Aviso de inventario viejo (app.js, avisarFrescura). Ámbar, como "Contactado":
   pide atención, no es un error. */
.frescura {
  padding:9px 26px; border-bottom:1px solid var(--border);
  background:var(--r-contactado); color:var(--ink); font-size:13px; line-height:1.45;
}
.frescura b { color:var(--s-contactado); font-weight:700; }
@media (max-width: 900px) { .frescura { padding:8px 12px; font-size:12.5px; } }

/* ── Resumen global ─────────────────────────────────────────────────────── */
.statsbar { display:flex; align-items:stretch; padding:20px 26px 6px; flex-wrap:wrap; }
.stat { display:flex; flex-direction:column; padding-right:24px; }
.stat-main { padding-right:26px; margin-right:26px; border-right:1px solid var(--border); }
.stat-num {
  font-family:var(--font-display); font-weight:500; line-height:1;
  font-size:24px; font-feature-settings:'tnum';
}
.stat-main .stat-num { font-size:32px; color:var(--ink); }
.stat-label { font-size:12px; color:var(--muted); margin-top:6px; }
.stat-main .stat-label { margin-top:5px; }

/* ── Página con encabezado editorial ────────────────────────────────────────
   El patrón del mock para Clientes y Scrapers: cintillo mono, título Bodoni, y
   los KPI a la derecha separados por filete vertical. */
.pg { max-width:1280px; margin:0 auto; padding:30px 30px 60px; }
.pg-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.pg-eyebrow {
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--faint);
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:8px;
}
.pg-title { font-family:var(--font-display); font-size:34px; font-weight:500; line-height:1; color:var(--ink); }
.pg-title.versal { text-transform:uppercase; letter-spacing:.01em; }
.pg-kpis { display:flex; align-items:stretch; }
.pg-kpi { padding:0 22px; border-left:1px solid var(--border); display:flex; flex-direction:column; justify-content:center; }
.pg-kpi-n { font-family:var(--font-display); font-size:26px; font-weight:500; line-height:1; font-feature-settings:'tnum'; }
.pg-kpi-l { font-size:12px; color:var(--muted); margin-top:5px; }
.pg-filters { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.pg-filters .btn-solid { margin-left:auto; }
.pg-empty {
  border:1px dashed var(--border-2); padding:40px; text-align:center;
  font-size:13px; color:var(--faint);
}
/* Píldora con borde permanente: la del mock para filtros de etapa. */
.pill-line {
  height:30px; padding:0 13px; border:1px solid var(--border-2); background:transparent;
  color:var(--ink); font-family:var(--font-ui); font-size:12.5px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.pill-line:hover { border-color:var(--accent); }
.pill-line.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* ── Tarjeta de cliente ─────────────────────────────────────────────────── */
.clientes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.cliente-card {
  background:var(--surface); border:1px solid var(--border); padding:18px;
  display:flex; flex-direction:column; gap:13px;
}
.cliente-head { display:flex; align-items:center; gap:12px; }
.cliente-ava {
  width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-mono); font-size:14px; font-weight:700;
}
.cliente-id { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.cliente-nombre {
  font-family:var(--font-display); font-size:18px; font-weight:500; color:var(--ink); line-height:1.2;
}
.cliente-sub { font-size:12px; color:var(--muted); }
.cliente-del {
  flex-shrink:0; width:24px; height:24px; border:none; background:transparent;
  color:var(--faint); font-size:17px; line-height:1; cursor:pointer;
}
.cliente-del:hover { color:var(--s-rechazado); }
.cliente-field { display:flex; align-items:center; gap:9px; font-size:12px; }
.cliente-field > span {
  width:74px; flex-shrink:0; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}
.cliente-foot { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; }
.cliente-chip { background:var(--accent-soft); color:var(--muted); padding:3px 8px; }
.cliente-pend { margin-left:auto; color:var(--s-contactado); }
.cliente-pend.cero { color:var(--faint); }
.cliente-procs { display:flex; flex-direction:column; gap:7px; }
/* Procesos: una línea por propiedad propuesta, con su estatus editable. */
.proc-row { display:flex; align-items:center; gap:9px; }
.proc-ficha {
  flex:1; min-width:0; font-size:12.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.proc-status {
  flex-shrink:0; height:26px; padding:0 8px; cursor:pointer; outline:none;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.proc-status option { color:var(--ink); background:var(--surface); font-weight:500; }
.proc-status { border:1px solid var(--e); color:var(--e); background:var(--er); }
.proc-del {
  flex-shrink:0; width:22px; height:22px; border:none; background:transparent;
  color:var(--faint); font-size:15px; line-height:1; cursor:pointer;
}
.proc-del:hover { color:var(--s-rechazado); }
.proc-empty { font-size:12px; color:var(--faint); font-style:italic; }
.proc-count {
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  padding:2px 7px; background:var(--accent-soft); color:var(--accent);
}
.proc-add { display:flex; align-items:center; gap:8px; }
.proc-tasks { display:flex; flex-direction:column; gap:8px; }
/* `tag` es la clase base de las etiquetas de la ficha; las variantes están arriba. */
.tag { display:inline-flex; align-items:center; }

/* Los campos del cliente se editan en sitio: se ven como texto y sólo muestran
   la caja al pasar el cursor o al enfocar. El mock los pinta como texto plano;
   convertirlos en lectura pura habría costado la edición que ya funcionaba. */
.cliente-card .cli-in {
  border-color:transparent; background:transparent; height:auto; padding:2px 6px; margin-left:-6px;
}
.cliente-card .cli-in:hover { border-color:var(--border); }
.cliente-card .cli-in:focus { border-color:var(--accent); background:var(--surface); }
.cliente-field .cli-in { font-size:12px; color:var(--muted); }

/* ══ Tablero de propiedades ══════════════════════════════════════════════ */

/* Buscador dentro de la topbar */
/* Chip de ubicación fijada y autocompletado, dentro del buscador de la topbar. */
.street-chip {
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  background:var(--paper); color:var(--blue); padding:3px 7px;
  font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.06em;
  max-width:190px; white-space:nowrap; overflow:hidden;
}
.street-chip-close { cursor:pointer; font-size:12px; line-height:1; opacity:.6; }
.street-chip-close:hover { opacity:1; }
.search-suggestions {
  display:none; position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:60;
  background:var(--surface); border:1px solid var(--border-2); max-height:340px; overflow-y:auto;
}
.search-suggestions.open { display:block; }
.suggestions-header {
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); padding:9px 12px; border-bottom:1px solid var(--border);
}
.suggestion-row {
  display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer;
  border-bottom:1px solid var(--border);
}
.suggestion-row:hover { background:var(--accent-soft); }
.suggestion-icon { flex-shrink:0; color:var(--faint); }
.suggestion-text { flex:1; min-width:0; font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggestion-count { font-family:var(--font-mono); font-size:10px; color:var(--faint); }

/* ── Rejilla de propiedades ─────────────────────────────────────────────────
   Todas las medidas salen del mock: foto de var(--photo-h) con trama diagonal,
   precio en Bodoni 27, y las etiquetas en tres pesos distintos (mono para tipo,
   texto para la operación, mono con borde para el código). */
.grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:var(--gap); padding:18px 26px 56px;
}
.card {
  background:var(--surface); border:1px solid var(--border); overflow:hidden;
  display:flex; flex-direction:column;
}
.card.starred { border-color:var(--accent); }
.card.status-descartado { opacity:.55; }

.card-img { position:relative; height:var(--photo-h); background:var(--blue); overflow:hidden; flex-shrink:0; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; }
/* Sin foto: rayado diagonal sobre tinta, nunca un gris plano ni una imagen falsa. */
.card-img-blueprint {
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.16) 1px,transparent 1px,transparent 11px);
}
.card-img-icon {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55);
}
.badge {
  position:absolute; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.05em; padding:4px 8px; background:var(--paper); color:var(--blue);
}
.badge-src  { top:11px; left:11px; text-transform:uppercase; }
.badge-foto {
  bottom:11px; left:11px; background:rgba(0,0,0,.35); color:var(--paper);
  padding:3px 8px; font-size:10px; font-weight:400; letter-spacing:.08em;
}
.badge-size { bottom:11px; right:11px; font-size:11px; padding:4px 9px; letter-spacing:0; }
.btn-star {
  position:absolute; top:9px; right:9px; width:34px; height:34px; background:var(--paper);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:17px; color:rgba(32,19,51,.38); line-height:1; padding:0;
}
.btn-star:hover { color:var(--blue); }
.card.starred .btn-star { color:var(--blue); }

.card-body { padding:var(--card-pad); display:flex; flex-direction:column; gap:11px; flex:1; }
.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-price { display:flex; align-items:baseline; gap:5px; }
.card-price strong {
  font-family:var(--font-display); font-size:27px; font-weight:500; line-height:1;
  color:var(--ink); font-feature-settings:'tnum';
}
.card-price .no-price { font-style:italic; color:var(--faint); }
.currency { font-family:var(--font-mono); font-size:10px; color:var(--muted); }
.price-note { display:block; font-family:var(--font-mono); font-size:10px; color:var(--muted); margin-top:5px; }
.price-alt { font-family:var(--font-mono); font-size:10px; color:var(--muted); }
.card-ppm { font-family:var(--font-mono); font-size:11px; color:var(--accent); margin-top:5px; }
.card-ver {
  font-size:11.5px; font-weight:500; color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap; flex-shrink:0;
}
.card-ver:hover { color:var(--accent); }
.card-title {
  font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.42; text-wrap:pretty;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-dir { display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); }
.card-dir svg { flex-shrink:0; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag-tipo {
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.04em;
  padding:3px 9px; text-transform:uppercase; background:var(--accent-soft); color:var(--accent);
}
.tag-txn { font-size:11.5px; font-weight:500; padding:3px 9px; background:var(--accent-soft); color:var(--muted); }
.tag-cod {
  font-family:var(--font-mono); font-size:10.5px; padding:3px 9px;
  background:transparent; color:var(--faint); border:1px solid var(--border);
}
.card-sep { height:1px; background:var(--border); margin:2px 0; }
.card-status { display:flex; gap:8px; align-items:center; }
.status-dot { width:9px; height:9px; flex-shrink:0; }
.status-select {
  flex:1; height:37px; padding:0 12px; font-family:var(--font-ui); font-size:13px;
  font-weight:600; cursor:pointer; outline:none; -webkit-appearance:none; appearance:none;
}
.status-select option { color:var(--ink); background:var(--surface); font-weight:500; }
.s-Nuevo      { border:1px solid var(--s-nuevo);      color:var(--s-nuevo);      background:var(--r-nuevo); }
.s-Revisado   { border:1px solid var(--s-revisado);   color:var(--s-revisado);   background:var(--r-revisado); }
.s-Contactado { border:1px solid var(--s-contactado); color:var(--s-contactado); background:var(--r-contactado); }
.s-Rentado    { border:1px solid var(--s-rentado);    color:var(--s-rentado);    background:var(--r-rentado); }
.s-Descartado { border:1px solid var(--s-descartado); color:var(--s-descartado); background:var(--r-descartado); }

/* Vacío: caja punteada con salida, no un ícono gigante en el aire. */
.empty {
  margin:8px 26px 56px; padding:44px 26px; background:var(--surface);
  border:1px dashed var(--border-2); display:flex; flex-direction:column;
  align-items:center; gap:12px; text-align:center;
}
.empty h2 { font-family:var(--font-display); font-size:21px; font-weight:500; color:var(--ink); }
.empty p { font-size:13.5px; color:var(--muted); max-width:420px; text-wrap:pretty; }
.empty svg { color:var(--faint); }
.btn-solid {
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 18px;
  border:none; background:var(--accent); color:var(--on-accent);
  font-family:var(--font-ui); font-size:13.5px; font-weight:600; cursor:pointer;
}
.btn-solid:hover { opacity:.88; }
.btn-clear {
  height:32px; padding:0 14px; border:1px solid var(--border-2); background:transparent;
  color:var(--muted); font-family:var(--font-ui); font-size:12.5px; font-weight:600; cursor:pointer;
}
.btn-clear:hover { border-color:var(--accent); color:var(--accent); }
.btn-clear:disabled { opacity:.35; cursor:not-allowed; }

.pagination {
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:0 26px 40px; font-family:var(--font-mono); font-size:11px; color:var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reglas base que faltaban aquí y vivían en login.css. `[hidden]` no es
   cosmético: el flujo de contraseña muestra y esconde vistas con ese atributo.
   ═══════════════════════════════════════════════════════════════════════════ */
button, input, textarea, select { font: inherit; }
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESO Y CONTRASEÑAS — login.html, reset-request.html, update-password.html
   Traducido de `OfficeLab - Login.dc.html` (Claude Design, proyecto "Hermes
   Agent aesthetic"). El canvas escribe todo en atributos style=; aquí vive como
   clases porque la CSP no permite estilos de documento y porque las tres
   páginas comparten la misma composición.
   ═══════════════════════════════════════════════════════════════════════════ */
.login-shell {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh;
  background: var(--bg); color: var(--ink);
}

/* Panel de marca. Dos tramas superpuestas sobre la tinta: puntos de 14px y
   rayas de 4px — es lo que le da el aire de papel técnico impreso. */
.login-intro {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px; background: var(--blue); color: var(--paper);
}
.login-intro::before, .login-intro::after { content: ''; position: absolute; inset: 0; }
.login-intro::before {
  background-image:
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 34px),
    repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 34px);
}
.login-intro::after { display: none; }
.login-intro > * { position: relative; z-index: 1; }

.login-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--paper); }
.login-brand .brand-mark { width: 32px; height: 32px; flex: 0 0 auto; display: block; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1; }
.brand-lockup strong {
  font-family: var(--font-display); font-size: 24px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}
.brand-lockup strong i { font-style: italic; }
.brand-lockup small {
  margin-top: 5px; white-space: nowrap; opacity: .6;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
}

.intro-copy { max-width: 460px; }
.intro-kicker {
  margin-bottom: 20px; opacity: .65;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
}
.intro-copy h1 {
  font-family: var(--font-display); font-size: 32px; font-weight: 500;
  line-height: 1.28; max-width: 420px;
}
.intro-text {
  margin-top: 16px; max-width: 420px;
  color: rgba(239,237,230,.55); font-size: 14.5px; line-height: 1.6;
}
.intro-footer {
  color: rgba(239,237,230,.35);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
}

/* Columna del formulario */
.login-main { display: flex; align-items: center; justify-content: center; padding: 44px; }
.login-card { display: flex; flex-direction: column; gap: 26px; width: 100%; max-width: 380px; }
.login-card h2 {
  font-family: var(--font-display); font-size: 27px; font-weight: 500;
  line-height: 1.15; color: var(--ink);
}
.login-description {
  margin-top: 8px; color: var(--muted); font-size: 14px;
}
/* El canvas no lleva eyebrow en el login; se conserva para las otras dos
   páginas, que sí necesitan nombrar en qué paso está el usuario. */
.eyebrow {
  margin-bottom: 10px; color: var(--faint);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

.login-fields { display: flex; flex-direction: column; gap: 16px; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.login-card label, .field-head span {
  display: block; color: var(--faint);
  font-family: var(--font-mono); font-size:10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.login-card label { margin-bottom: 8px; }
.field-head label { margin-bottom: 0; }
.login-card input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; outline: none;
  transition: border-color .15s;
}
.login-card input:focus { border-color: var(--accent); }
.login-card input::placeholder { color: var(--faint); }

/* El error del canvas: caja sólida, no una línea de texto suelta. */
.field-error {
  display: flex; align-items: center; gap: 9px; padding: 12px 13px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.field-error::before {
  content: '!'; flex-shrink: 0;
  display: grid; place-items: center; width: 14px; height: 14px;
  border: 2px solid currentColor; font-size: 9px; line-height: 1;
}

.submit-button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 46px; border: none;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.submit-button:hover:not(:disabled) { background: var(--ink); }
.submit-button:disabled { opacity: .55; cursor: default; }

.login-sep { display: flex; align-items: center; gap: 12px; }
.login-sep::before, .login-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-sep span {
  color: var(--faint);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
}

.login-foot {
  text-align: center; color: var(--muted); font-size: 12.5px;
}
.text-button {
  color: var(--accent); font-size: 12px; font-weight: 500; text-decoration: none;
}
.text-button:hover { color: var(--ink); text-decoration: underline; }
.login-foot .text-button { font-size: inherit; letter-spacing: inherit; }

/* Vista de confirmación: misma retícula que el formulario. */
.success-view { display: flex; flex-direction: column; gap: 18px; }
.success-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--border-2); color: var(--accent);
}
.success-view h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 500;
  line-height: 1.1; text-transform: uppercase;
}
.success-view p {
  color: var(--muted);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.9; letter-spacing: .06em;
}

@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-intro { padding: 30px; min-height: 0; gap: 26px; }
  .intro-copy h1 { font-size: 27px; }
  .intro-text { font-size: 13.5px; }
  .login-main { padding: 34px 26px 54px; }
}
@media (max-width: 420px) {
  .login-intro { padding: 24px; }
  .intro-copy h1 { font-size: 24px; }
  .login-card h2 { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DE PROPIEDAD — listing.html
   Traducido de `OfficeLab - Listing.dc.html` (Claude Design). Las 29 clases que
   comparte con el tablero —topbar, badges, tags, notas, selector de estado— ya
   están arriba y no se duplican.
   ═══════════════════════════════════════════════════════════════════════════ */
.detail {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start;
  max-width: 1120px; margin: 0 auto; padding: 28px 26px 64px;
}
.detail-content { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.detail-crumb {
  display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px;
}
.back-link { text-decoration: none; gap: 7px; }
.back-link svg { flex-shrink: 0; }
.detail-crumb a { color: var(--muted); text-decoration: none; }
.detail-crumb a:hover { color: var(--ink); }
.detail-crumb strong { color: var(--ink); font-weight: 500; }

/* Galería. La foto vacía usa la misma trama de plano que las tarjetas. */
.detail-photo {
  position: relative; height: 380px; overflow: hidden; background: var(--blue);
}
.detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-photo-empty::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.16) 1px,transparent 1px,transparent 12px);
}
.detail-photo-empty svg {
  position: absolute; inset: 0; margin: auto; width: 70px; height: 70px;
  stroke: rgba(255,255,255,.55); stroke-width: 1.2;
}
.detail-photo .badge-src {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  padding: 5px 10px; text-transform: uppercase; background: var(--paper); color: var(--blue);
}
.detail-photo .badge-size {
  position: absolute; bottom: 14px; right: 14px; top: auto; left: auto;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 5px 11px; background: var(--paper); color: var(--blue);
}
.detail-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.thumb {
  flex: 1; height: 64px; padding: 0; overflow: hidden; cursor: pointer; position: relative;
  border: 2px solid transparent; background: var(--blue);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.active { border-color: var(--accent); }

/* Encabezado: los tags van ARRIBA del título, no debajo. */
.detail-heading .card-tags { margin-bottom: 10px; }
.detail-title {
  font-family: var(--font-ui); font-size: 22px; font-weight: 600;
  line-height: 1.32; color: var(--ink); text-wrap: pretty;
}
.detail-location {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  color: var(--muted); font-size: 14px;
}
.detail-location svg { flex-shrink: 0; }

/* Paneles: la unidad de composición de toda la página. */
.detail-panel { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); }
.detail-panel-label {
  margin-bottom: 14px; color: var(--faint);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.detail-panel p { font-size: 14.5px; line-height: 1.65; color: var(--ink); text-wrap: pretty; }

/* Ficha técnica: rejilla de tres, valor en monoespaciada — es una ficha de
   catálogo, no una fila de cifras destacadas. */
.detail-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.detail-facts dt { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.detail-facts dd {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--ink); font-feature-settings: 'tnum';
}
.detail-features { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.detail-features li {
  padding: 4px 10px; border: 1px solid var(--border); color: var(--muted);
  font-family: var(--font-mono); font-size:10px; letter-spacing: .1em; text-transform: uppercase;
}

/* Columna derecha */
.detail-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.detail-sidebar-card { padding: 22px; background: var(--surface); border: 1px solid var(--border); }
.detail-price {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-display); font-size: 34px; font-weight: 500; line-height: 1;
  color: var(--ink); font-feature-settings: 'tnum';
}
.detail-price .currency, .detail-price .price-note {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--muted);
}
/* La estrella va al extremo del renglón del precio, como en el mock. */
.detail-star {
  margin-left: auto; align-self: center; width: 34px; height: 34px; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); background: transparent; color: var(--faint); cursor: pointer;
}
.detail-star.on { border-color: var(--accent); color: var(--accent); }
.detail-sidebar .card-ppm { margin-top: 6px; color: var(--accent); font-family: var(--font-mono); font-size: 12px; }
.detail-sidebar-divider { height: 1px; margin: 18px 0; background: var(--border); }
.card-status-row { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.card-status-row .status-dot { width: 9px; height: 9px; flex-shrink: 0; }
.card-status-row .status-select { flex: 1; height: 40px; padding: 0 12px; font-size: 13.5px; }

/* La estrella deja de ser un icono suelto: es un botón de ancho completo. */
.detail-links { display: flex; flex-direction: column; gap: 8px; }
.detail-links a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; text-decoration: none;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
}
.detail-links .btn-solid { background: var(--accent); color: var(--on-accent); border: none; }
.detail-links .btn-solid:hover { background: var(--ink); color: var(--on-accent); }
.detail-links .btn-outline {
  border: 1px solid var(--border-2); background: transparent; color: var(--ink);
}
.detail-links .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.detail-section { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); }
.detail-tracking h2, .detail-section h2 {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--faint);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.detail-sidebar .notes-area {
  width: 100%; min-height: 110px; resize: vertical; padding: 11px 13px;
  border: 1px solid var(--border); background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; line-height: 1.6;
  outline: none;
}

@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px 48px; }
  .detail-sidebar { position: static; }
  .detail-facts { grid-template-columns: repeat(2,1fr); }
  .detail-title { font-size: 27px; }
  .detail-photo { height: 260px; }
}

.ficha-hint { font-size: 13px; color: var(--muted); }
.ficha-badge {
  font-family: var(--font-mono); font-size:10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px;
  background: var(--accent-soft); color: var(--accent); vertical-align: middle; margin-left: 6px;
}
.ficha-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ficha-head h2 { margin-bottom: 0; }
.ficha-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ficha-row { display: flex; gap: 10px; }
.ficha-row .ficha-field { flex: 1; }
.ficha-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; }
.ficha-in {
  height: 37px; padding: 0 12px; border: 1.5px solid var(--border);
  font-family: var(--font-ui); font-size: 14px; color: var(--ink); background: var(--surface); outline: none;
  transition: border-color .15s;
}
.ficha-in:focus { border-color: var(--accent); } 

textarea.ficha-in { height: auto; min-height: 60px; padding: 9px 11px; resize: vertical; }
.ficha-fotos { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-fotos img { width: 84px; height: 62px; object-fit: cover; }
.proc-del {
  width: 28px; height: 28px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.proc-del:hover { border-color: var(--accent); color: var(--accent); }
.proc-add { display: flex; gap: 8px; margin-top: 12px; }
.proc-add .ficha-in { flex: 1; } 

/* DOCUMENTOS de la propiedad (checklist en la ficha) */
.proc-tasks { padding: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.tarea-del { width: 24px; height: 24px; border: 1.5px solid var(--border); background: var(--surface); color: var(--faint); font-size: 14px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.tarea-del:hover { border-color: var(--accent); color: var(--accent); }
.tarea-add { display: flex; gap: 6px; margin-top: 4px; }
.tarea-add .tarea-input { flex: 1; }
@media print {
  body > * { display: none !important; }
  #ficha-print { display: block !important; }
  @page { margin: 16mm; }
  .print-sheet {
    font-family: var(--font-ui); color: var(--ink);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
  .print-brand { font-size: 20px; font-weight: 700; }
  .print-brand span { color: var(--accent); }
  .print-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .print-sheet h1 { font-family: var(--font-display); font-size: 26px; font-weight: 500; margin: 20px 0 4px; }
  .print-loc { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
  .print-facts { display: flex; gap: 40px; margin-bottom: 20px; }
  .print-facts span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
  .print-facts strong { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
  .print-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
  .print-fotos img { width: 100%; height: 200px; object-fit: cover; }
  .print-notes h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
  .print-notes p { font-size: 13px; line-height: 1.6; white-space: pre-line; }
}

/* Botón secundario sobre el panel oscuro de la ficha. Se quedó fuera del
   traslado de style.css y dejaba los enlaces del anuncio sin estilo. */
.btn-outline {
  background: transparent; border: 1.5px solid rgba(255,255,255,.18);
  color: rgba(239,237,230,.85);
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  padding: 0 16px; height: 36px; cursor: pointer; transition: border-color .15s;
}
.btn-outline:hover { border-color: rgba(255,255,255,.4); }

/* Documentos de la ficha: el marcado existía sin una sola regla que lo pintara. */
.doc-input {
  flex:1; min-width:0; padding:8px 10px; border:1.5px solid var(--border-2);
  background:var(--surface); color:var(--ink); font-size:13px; outline:none;
}
.doc-input:focus { border-color:var(--accent); }
.doc-add {
  padding:8px 12px; border:1.5px solid var(--accent); background:var(--accent);
  color:var(--on-accent); font-size:12px; font-weight:600; cursor:pointer;
}
.doc-chk { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.doc-del {
  width:24px; height:24px; border:1.5px solid var(--border); background:var(--surface);
  color:var(--faint); font-size:14px; line-height:1; cursor:pointer; flex-shrink:0;
}
.doc-del:hover { border-color:var(--s-rechazado); color:var(--s-rechazado); }

/* Campos editables de la tarjeta de cliente. El marcado los usaba desde el
   principio sin una sola regla: se veían como inputs crudos del navegador. */
.cli-in {
  width:100%; height:34px; padding:0 10px; border:1.5px solid var(--border);
  font-family:var(--font-ui); font-size:13.5px; color:var(--ink);
  background:var(--surface); outline:none; transition:border-color .15s;
}
.cli-in:focus { border-color:var(--accent); }


/* Se quedaron fuera del traslado: el filtro que separó las reglas de la ficha
   exigía un guión en el nombre, y estas dos no lo llevan. */
.btn-pdf {
  flex-shrink: 0; height: 34px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.btn-pdf:hover { border-color: var(--accent); color: var(--accent); }

.tarea { display: flex; align-items: center; gap: 8px; }
.tarea label { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.tarea input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--s-rentado); cursor: pointer; flex-shrink: 0; }
.detail-gallery { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   TAREAS — tareas.html
   Traducido de `OfficeLab - Panel.dc.html` (Claude Design). El canvas venía en
   la paleta terracota y con radios y sombras; aquí se re-tematiza a Hermes y se
   quitan las dos cosas, que el sistema no usa. La jerarquía la dan el filete de
   prioridad a la izquierda de cada tarjeta y el peso tipográfico.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --p-alta:#A83B22; --p-media:#A85F14; --p-baja:#6B7D6E;
  --r-alta:rgba(168,59,34,.10); --r-media:rgba(168,95,20,.10); --r-baja:rgba(107,125,110,.10);
  --c-pendiente:#83808C; --c-asignado:#2B3FC4; --c-encurso:#A85F14; --c-completado:#1F6F4A;
  /* Tintes de avatar: `tareas.js` deriva uno del id de la persona. Son tokens y no
     hexes en el JS porque en oscuro tienen que subir de luminosidad como cualquier
     otro color del sistema; con los hexes puestos a mano no lo hacían. No son
     colores de estado y no deben reutilizarse como tales. */
  --tono-0:#2B3FC4; --tono-1:#1F6F4A; --tono-2:#A85F14; --tono-3:#6B3FB5;
  --tono-4:#A83B22; --tono-5:#6B7D6E; --tono-6:#83808C;
}
:root[data-theme="dark"] {
  --p-alta:#F0A18E; --p-media:#F5C98C; --p-baja:#A8C0AC;
  --r-alta:rgba(240,161,142,.14); --r-media:rgba(245,201,140,.14); --r-baja:rgba(168,192,172,.14);
  --c-pendiente:#C6C4CF; --c-asignado:#A9BEFF; --c-encurso:#F5C98C; --c-completado:#95DEB9;
  --tono-0:#A9BEFF; --tono-1:#95DEB9; --tono-2:#F5C98C; --tono-3:#D3BFF7;
  --tono-4:#F0A18E; --tono-5:#A8C0AC; --tono-6:#C6C4CF;
}

/* ── Tablero de tareas ──────────────────────────────────────────────────────
   Del mock `OfficeLab - Panel.dc.html`: la página no scrollea, scrollea cada
   columna. Por eso el body es una columna de altura fija y el tablero es una
   rejilla de cuatro con divisores, no cuatro tarjetas sueltas. */
.tk-page { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.tk-shell { flex:1; min-height:0; display:flex; align-items:stretch; }
.tk-board { flex:1; min-width:0; display:flex; flex-direction:column; }

.tk-bar {
  flex-shrink:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--border); background:var(--surface);
}
.tk-bar .btn-solid { height:33px; padding:0 14px; font-size:13px; }
.tk-bar-sep { width:1px; height:20px; background:var(--border); margin:0 6px; }
.tk-bar-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.tk-bar-hint { font-size:12px; color:var(--faint); font-style:italic; }
.tk-bar-count { font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.tk-bar-count strong { color:var(--ink); font-weight:400; }

#vista { flex:1; min-height:0; display:flex; flex-direction:column; }

.kb { flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); }
.kb-col { display:flex; flex-direction:column; min-width:0; min-height:0; border-right:1px solid var(--border); }
.kb-col:last-child { border-right:none; }
.kb-head {
  flex-shrink:0; display:flex; align-items:center; gap:8px; padding:14px 15px 11px;
  font-size:13px; font-weight:700; color:var(--ink);
}
.kb-dot { width:9px; height:9px; flex-shrink:0; }
.kb-head .kb-n {
  font-family:var(--font-mono); font-size:11px; font-weight:400; color:var(--muted);
  background:var(--accent-soft); padding:2px 7px;
}
.kb-list {
  flex:1; min-height:0; overflow-y:auto; padding:4px 12px 16px;
  display:flex; flex-direction:column; gap:10px;
}
.kb-col.over .kb-list { background:var(--accent-soft); }
.kb-empty { border:1px dashed var(--border-2); padding:18px; text-align:center; font-size:12px; color:var(--faint); }

/* ── Tarjeta de tarea ────────────────────────────────────────────────────── */
.tk {
  display:flex; flex-direction:column; padding:12px 13px; cursor:grab;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border-2);
}
.tk:hover { border-color:var(--border-2); }
.tk.dragging { opacity:.45; }
.tk.p-alta  { border-left-color:var(--p-alta); }
.tk.p-media { border-left-color:var(--p-media); }
.tk.p-baja  { border-left-color:var(--p-baja); }
.tk-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.tk-prio {
  padding:3px 8px; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.tk-prio.p-alta  { color:var(--p-alta);  background:var(--r-alta); }
.tk-prio.p-media { color:var(--p-media); background:var(--r-media); }
.tk-prio.p-baja  { color:var(--p-baja);  background:var(--r-baja); }
.tk-tipo { font-family:var(--font-mono); font-size:10px; color:var(--muted); }
.tk-titulo {
  font-size:13.5px; font-weight:500; line-height:1.4; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tk-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
.tk-cod {
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  font-family:var(--font-mono); font-size:10px; color:var(--muted); background:var(--accent-soft);
}
.tk-vence { font-family:var(--font-mono); font-size:10px; color:var(--muted); }
.tk-vence.tarde { color:var(--p-alta); font-weight:700; }
.tk-sep { height:1px; background:var(--border); margin:11px 0 10px; }
.tk-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tk-marks { display:flex; align-items:center; gap:11px; }
.tk-chk { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.tk-chk.full { color:var(--c-completado); }

/* Avatar: iniciales sobre un tono derivado del id, sin foto ni emoji. */
.tk-ava {
  display:grid; place-items:center; width:26px; height:26px; flex-shrink:0;
  color:var(--on-accent); font-family:var(--font-mono); font-size:10px; font-weight:700;
}
.tk-ava.sin { background:transparent; border:1px dashed var(--border-2); color:var(--faint); }

/* ── Panel derecho fijo: equipo, alta y detalle ─────────────────────────── */
.tk-aside {
  width:336px; flex-shrink:0; min-height:0; overflow-y:auto;
  border-left:1px solid var(--border-2); background:var(--surface);
  display:flex; flex-direction:column;
}
.tk-aside-head {
  flex-shrink:0; display:flex; align-items:center; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--border);
  font-size:13.5px; font-weight:700; color:var(--ink);
}
.tk-aside-head .tk-x, .tk-aside-head .tk-todo {
  margin-left:auto; border:none; background:transparent; cursor:pointer;
  color:var(--muted); font-size:12.5px; font-weight:600;
}
.tk-aside-body { padding:18px; display:flex; flex-direction:column; gap:15px; }
.tk-mini { display:flex; align-items:center; gap:11px; padding:12px 18px; border-bottom:1px solid var(--border); }
.tk-mini .tk-ava { width:34px; height:34px; font-size:11px; }
.tk-mini-n { flex:1; min-width:0; }
.tk-mini-n strong { display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.tk-mini-n small { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.tk-mini-k { text-align:right; flex-shrink:0; }
.tk-mini-k b { font-family:var(--font-display); font-size:18px; font-weight:500; line-height:1; }
.tk-mini-k span { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:3px; }

/* ── Vista de equipo: matriz persona × columna ───────────────────────────── */
.tk-matrix { padding: 18px 24px 56px; overflow-x: auto; }
.tk-matrix table { width: 100%; border-collapse: collapse; min-width: 860px; }
.tk-matrix th, .tk-matrix td { border: 1px solid var(--border); vertical-align: top; }
.tk-matrix th {
  padding: 11px 14px; background: var(--surface); text-align: left;
  font-family: var(--font-mono); font-size:10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.tk-matrix td { padding: 10px; background: var(--surface); }
.tk-matrix td.over { background: var(--accent-soft); }
.tk-cell { display: flex; flex-direction: column; gap: 8px; min-height: 56px; }
.tk-persona { display: flex; align-items: center; gap: 10px; }
.tk-persona .tk-ava { margin-left: 0; width: 28px; height: 28px; }
.tk-persona-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-persona-n strong { font-family: var(--font-ui); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }
.tk-persona-n span { font-family: var(--font-mono); font-size:10px; letter-spacing: .12em; color: var(--faint); }

/* ── Panel lateral ───────────────────────────────────────────────────────── */
.tk-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(17,17,32,.35); }
.tk-side {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(440px, 100vw);
  display: flex; flex-direction: column; gap: 16px; padding: 22px; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--border-2);
}
.tk-side h2, .tk-aside-body h2 {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  line-height: 1.15; color: var(--ink);
}
.tk-side label, .tk-aside-body label {
  display: block; margin-bottom: 7px; color: var(--faint);
  font-family: var(--font-mono); font-size:10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.tk-side input, .tk-side select, .tk-side textarea,
.tk-aside-body input, .tk-aside-body select, .tk-aside-body textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-2);
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 13.5px; outline: none;
}
.tk-side textarea, .tk-aside-body textarea { min-height: 150px; resize: vertical; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; }
.tk-side input:focus, .tk-side select:focus, .tk-side textarea:focus,
.tk-aside-body input:focus, .tk-aside-body select:focus, .tk-aside-body textarea:focus { border-color: var(--accent); }
.tk-side-head { display: flex; align-items: flex-start; gap: 12px; }
.tk-close {
  flex-shrink: 0; width: 28px; height: 28px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1;
}
.tk-close:hover { border-color: var(--p-alta); color: var(--p-alta); }
.tk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-actions { display: flex; gap: 8px; margin-top: 4px; }
.tk-actions .btn-solid { flex: 1; }
.tk-del { border: 1px solid var(--border-2); background: transparent; color: var(--muted); cursor: pointer; padding: 0 14px; }
.tk-del:hover { border-color: var(--p-alta); color: var(--p-alta); }

/* Checklist en markdown: se dibuja desde `- [ ]` / `- [x]` de la descripción. */
.tk-check { display: flex; flex-direction: column; gap: 7px; }
.tk-check label {
  display: flex; align-items: flex-start; gap: 9px; margin: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.tk-check input { width: 15px; height: 15px; margin-top: 1px; flex-shrink: 0; accent-color: var(--c-completado); }
.tk-check .listo { color: var(--faint); text-decoration: line-through; }

/* ── Pipeline comercial ──────────────────────────────────────────────────────
   Vista de tareas.html que sustituye al Google Sheet del equipo: una columna por
   etapa de `proceso.status` y una tarjeta por cliente × propiedad. Mismo kanban y
   mismo filete izquierdo que las tareas; el color del filete es la etapa, no la
   prioridad. Las etapas son estado, así que tienen su propio juego de tokens:
   `--e-<etapa>` para tinta y `--er-<etapa>` para fondo, y la clase `.e-<etapa>`
   los baja a `--e` / `--er` para que ninguna regla repita el color. */
:root {
  --e-prospecto:#83808C; --e-por_presentar:#6B3FB5; --e-presentado:var(--s-presentado);
  --e-evaluacion:#0F6E7A; --er-evaluacion:rgba(15,110,122,.10);
  --e-aprobado:var(--s-aprobado); --e-negociacion:#A85F14; --e-cerrado:#0E4A30;
  --e-pausa:#6B7D6E; --e-rechazado:var(--s-rechazado);
  --er-prospecto:rgba(131,128,140,.10); --er-por_presentar:rgba(107,63,181,.10);
  --er-presentado:var(--r-presentado); --er-aprobado:var(--r-aprobado);
  --er-negociacion:rgba(168,95,20,.10); --er-cerrado:rgba(14,74,48,.12);
  --er-pausa:rgba(107,125,110,.10); --er-rechazado:var(--r-rechazado);
}
:root[data-theme="dark"] {
  --e-prospecto:#C6C4CF; --e-por_presentar:#D3BFF7; --e-negociacion:#F5C98C;
  --e-evaluacion:#9FDDE6; --er-evaluacion:rgba(159,221,230,.14);
  --e-cerrado:#C3F2D8; --e-pausa:#A8C0AC;
  --er-prospecto:rgba(198,196,207,.12); --er-por_presentar:rgba(211,191,247,.14);
  --er-negociacion:rgba(245,201,140,.14); --er-cerrado:rgba(195,242,216,.14);
  --er-pausa:rgba(168,192,172,.14);
}
.e-prospecto     { --e:var(--e-prospecto);     --er:var(--er-prospecto); }
.e-por_presentar { --e:var(--e-por_presentar); --er:var(--er-por_presentar); }
.e-presentado    { --e:var(--e-presentado);    --er:var(--er-presentado); }
.e-evaluacion    { --e:var(--e-evaluacion);    --er:var(--er-evaluacion); }
.e-aprobado      { --e:var(--e-aprobado);      --er:var(--er-aprobado); }
.e-negociacion   { --e:var(--e-negociacion);   --er:var(--er-negociacion); }
.e-cerrado       { --e:var(--e-cerrado);       --er:var(--er-cerrado); }
.e-pausa         { --e:var(--e-pausa);         --er:var(--er-pausa); }
.e-rechazado     { --e:var(--e-rechazado);     --er:var(--er-rechazado); }

/* Seis u ocho columnas no caben en 4fr: cada una tiene un ancho mínimo y el tablero
   se desplaza de lado dentro de su propia caja, nunca la página. */
.kb.kb-pipe {
  grid-template-columns:none; grid-auto-flow:column;
  grid-auto-columns:minmax(252px,1fr); overflow-x:auto; padding:0;
}
.kb-pipe .kb-dot { background:var(--e); }
.kb-sum { margin-left:auto; font-family:var(--font-mono); font-size:11px; font-weight:400; color:var(--muted); }
.kb-ayuda { flex-shrink:0; padding:0 15px 10px; font-size:12px; line-height:1.4; color:var(--faint); }

.tk.pp { border-left-color:var(--e); cursor:pointer; }
.pp-cliente {
  padding:3px 8px; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--accent-soft);
}
.pp-mun { margin-top:3px; font-size:12px; color:var(--muted); }
.pp-cifras { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:9px; }
.pp-m2 { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); }
.pp-monto {
  font-family:var(--font-display); font-size:15px; font-weight:500; color:var(--ink);
  font-feature-settings:'tnum'; white-space:nowrap;
}
.pp-monto.pend { font-family:var(--font-ui); font-size:11.5px; font-style:italic; color:var(--faint); }
.pp-seg {
  margin-top:9px; font-size:12px; line-height:1.45; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pp-trae { display:flex; align-items:center; gap:7px; min-width:0; font-size:12px; color:var(--muted); }
.pp-trae .tk-ava { width:22px; height:22px; }
.pp-comp { font-family:var(--font-mono); font-size:10px; color:var(--muted); white-space:nowrap; }

/* Filtros del pipeline en la barra de tareas. */
.tk-bar-group { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tk-bar-group[hidden] { display:none; }
.tk-bar-select {
  height:33px; max-width:200px; padding:0 8px; border:1px solid var(--border-2);
  background:var(--surface); color:var(--ink); font-family:var(--font-ui); font-size:12.5px;
}
.tk-bar-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); cursor:pointer; }
.tk-bar-toggle input { width:15px; height:15px; accent-color:var(--accent); }

/* Detalle de un proceso en el panel derecho. */
.pp-sub { margin-top:-8px; font-size:12.5px; color:var(--muted); }
.pp-etapa {
  align-self:flex-start; padding:3px 9px; font-family:var(--font-mono); font-size:10px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--e); background:var(--er);
}
.tk-aside-body textarea.pp-corto { min-height:88px; font-family:var(--font-ui); font-size:13px; line-height:1.5; }
.pp-grupo { display:flex; flex-direction:column; gap:12px; padding-top:14px; border-top:1px solid var(--border); }
.pp-grupo-t {
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink);
}
.pp-nota { font-size:11.5px; line-height:1.45; color:var(--faint); }
.pp-mapa { display:inline-block; margin-top:7px; font-size:12.5px; font-weight:600; color:var(--ink); }
.pp-otro {
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:9px 0; border:0; border-bottom:1px solid var(--border); background:transparent;
  font-family:var(--font-ui); font-size:13px; color:var(--ink); text-align:left; cursor:pointer;
}
.pp-otro:hover { color:var(--muted); }
.pp-nueva {
  align-self:flex-start; height:32px; padding:0 14px; cursor:pointer;
  border:1px solid var(--border-2); background:transparent; color:var(--ink);
  font-family:var(--font-ui); font-size:12.5px; font-weight:600;
}
.pp-nueva:hover { border-color:var(--accent); background:var(--accent-soft); }
.pp-col { flex-shrink:0; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pp-abrir {
  margin-top:7px; padding:0; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--ink); text-decoration:underline;
}

@media (max-width: 1100px) { .kb { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px)  { .kb { grid-template-columns: 1fr; padding: 14px 16px 40px; } }

/* ── Menú lateral (menu.js) ──────────────────────────────────────────────────
   El cajón vive sobre la tinta, como la topbar, y usa el mismo vocabulario:
   mono en mayúsculas para las etiquetas, cajas rectas, sin sombra. */
.mn-btn {
  order:-1; margin-right:-8px;   /* a la izquierda de la marca, pegado a ella */
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(239,237,230,.85);
}
.mn-btn:hover { background: rgba(255,255,255,.12); }
.mn { position: fixed; inset: 0; z-index: 80; }
.mn-scrim { position: absolute; inset: 0; background: rgba(17,17,32,.45); }
.mn-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(310px, 86vw);
  display: flex; flex-direction: column;
  background: var(--topbar); color: var(--topbar-text);
  border-right: 1px solid rgba(0,0,0,.35);
}
.mn-head { display: flex; align-items: center; gap: 12px; padding: 20px; }
.mn-brand { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1; }
.mn-brand strong { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.mn-brand strong i { font-style: italic; }
.mn-brand small { margin-top: 5px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .45; }
.mn-x {
  width: 28px; height: 28px; flex-shrink: 0; cursor: pointer; font-size: 16px; line-height: 1;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: var(--topbar-text);
}
.mn-x:hover { background: rgba(255,255,255,.12); }
.mn-label {
  padding: 14px 20px 9px; opacity: .35;
  font-family: var(--font-mono); font-size:10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.mn-nav { display: flex; flex-direction: column; }
.mn-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  color: var(--topbar-text); text-decoration: none; border-left: 3px solid transparent;
}
.mn-item:hover { background: rgba(255,255,255,.07); color: var(--topbar-text); }
.mn-item.active { background: rgba(255,255,255,.12); border-left-color: var(--paper); }
.mn-item.soon { opacity: .4; cursor: default; }
.mn-item.soon:hover { background: transparent; }
.mn-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.mn-txt strong { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; }
.mn-txt small { margin-top: 2px; font-size: 11px; opacity: .45; }
.mn-soon {
  flex-shrink: 0; padding: 3px 6px; background: rgba(255,255,255,.09); opacity: .7;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.mn-foot {
  display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.09);
}
.mn-ava {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  background: var(--paper); color: var(--topbar);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}

/* ── Editor markdown del panel de tarea ──────────────────────────────────── */
.md-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.md-b {
  min-width: 26px; height: 26px; padding: 0 7px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.md-b:hover { border-color: var(--accent); color: var(--accent); }
.md-prev { margin-left: auto; }
.md-b.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.md-out {
  padding: 12px 13px; border: 1px solid var(--border-2); background: var(--bg);
  font-size: 13.5px; line-height: 1.65; color: var(--ink);
}
.md-out h1, .md-out h2, .md-out h3 {
  margin: 10px 0 6px; font-family: var(--font-display); font-weight: 500; line-height: 1.2;
}
.md-out h1 { font-size: 21px; } .md-out h2 { font-size: 18px; } .md-out h3 { font-size: 15px; }
.md-out p { margin: 6px 0; }
.md-out ul, .md-out ol { margin: 6px 0 6px 18px; }
.md-out ul.md-chk { list-style: none; margin-left: 0; }
.md-out code { padding: 1px 5px; background: var(--accent-soft); font-family: var(--font-mono); font-size: 11.5px; }
.md-out a { color: var(--accent); }
.md-out .listo { color: var(--faint); text-decoration: line-through; }
.md-vacio { color: var(--faint); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.md-adj { min-height: 60px !important; }
.tk-adj { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.tk-adj a { color: var(--accent); font-family: var(--font-mono); font-size: 10.5px; word-break: break-all; }

/* ── Comentarios ─────────────────────────────────────────────────────────── */
.tk-com { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.tk-com-row { display: flex; gap: 10px; }
.tk-com-row .tk-ava { margin-left: 0; }
.tk-com-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-com-h { display: flex; align-items: baseline; gap: 8px; }
.tk-com-h strong { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.tk-com-h small { font-family: var(--font-mono); font-size:10px; color: var(--faint); }
.tk-com-t { font-size: 13px; line-height: 1.5; color: var(--muted); }
.tk-com-new { display: flex; gap: 8px; }
.tk-com-new input { flex: 1; }
.tk-com-new .btn-solid { flex-shrink: 0; padding: 0 14px; height: auto; }

/* ── Vista de persona y directorio ───────────────────────────────────────── */
.tk-persona-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 26px;
  padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.tk-persona-stats { display: flex; gap: 26px; margin-left: auto; }
.tk-persona-head .tk-ava { width: 38px; height: 38px; font-size: 12px; margin-left: 0; }
.tk-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tk-dir-card {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--border); background: var(--surface);
}
.tk-dir-card:hover { border-color: var(--accent); }
.tk-dir-card .tk-ava { margin-left: 0; width: 30px; height: 30px; }
.tk-dir-n {
  display: flex; flex-direction: column; align-items: flex-end; margin-left: auto;
  font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1;
  color: var(--ink); font-feature-settings: 'tnum';
}
.tk-dir-n small { font-family: var(--font-mono); font-size:10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }

/* ── Scrapers ───────────────────────────────────────────────────────────────
   Del mock `OfficeLab - Scrapers.dc.html`: una tarjeta por fuente con el borde
   superior del color de su frescura, un bloque de cifras y una tabla de filas
   etiqueta/valor. Todo lo propio lleva prefijo `sc-`. */
.sc-main { padding: 26px 26px 60px; display: flex; flex-direction: column; gap: 26px; max-width: 1560px; }

.sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sc-sub {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-top: 10px;
}
.sc-nota {
  max-width: 46ch; font-size: 12.5px; line-height: 1.6; color: var(--muted);
  border-left: 1.5px solid var(--border-2); padding-left: 14px;
}
.sc-nota code, .sc-h2-nota code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }

.sc-sec { display: flex; flex-direction: column; gap: 13px; }
.sc-h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.sc-h2-nota { font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 70ch; margin-top: -4px; }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.sc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--sc-color); display: flex; flex-direction: column;
}
/* Un solo token de color por tarjeta: lo usan el borde, el punto y el badge. */
.sc-card.e-rentado    { --sc-color: var(--s-rentado);    --sc-ring: var(--r-rentado); }
.sc-card.e-contactado { --sc-color: var(--s-contactado); --sc-ring: var(--r-contactado); }
.sc-card.e-descartado { --sc-color: var(--s-descartado); --sc-ring: var(--r-descartado); }

.sc-card-head { display: flex; align-items: center; gap: 9px; padding: 16px 17px 0; }
.sc-card-dot { width: 9px; height: 9px; flex-shrink: 0; background: var(--sc-color); }
.sc-card-title { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.sc-card-key {
  padding: 6px 17px 0; font-family: var(--font-mono); font-size:10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.sc-state {
  flex-shrink: 0; white-space: nowrap; padding: 4px 8px;
  background: var(--sc-ring); color: var(--sc-color);
  font-family: var(--font-mono); font-size:10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

.sc-figs { display: flex; gap: 22px; padding: 14px 17px 16px; }
.sc-fig { display: flex; flex-direction: column; gap: 4px; }
.sc-fig b {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  line-height: 1; font-feature-settings: 'tnum';
}
.sc-fig small {
  font-family: var(--font-mono); font-size:10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}

/* Filas etiqueta/valor: monoespaciadas y alineadas a la derecha, como una salida
   de terminal. Una fila en ámbar es una cobertura bajo el 90 %. */
.sc-rows { display: flex; flex-direction: column; }
.sc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 17px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.sc-row b { margin-left: auto; color: var(--ink); font-weight: 700; font-feature-settings: 'tnum'; }
.sc-row.alerta b { color: var(--s-contactado); }

.sc-card-foot {
  margin-top: auto; padding: 11px 17px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-family: var(--font-mono); font-size:10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}

.sc-hist { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); }
.sc-hist th {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border-2);
  font-family: var(--font-mono); font-size:10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.sc-hist td { padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--border); }
/* La primera fila de cada día lleva la fecha y una línea más marcada: el bloque
   se lee como una carga, no como filas sueltas. */
.sc-hist-nuevo td { border-top: 1px solid var(--border-2); }
.sc-hist tr:first-child td { border-top: none; }
.sc-hist-n { font-family: var(--font-mono); font-feature-settings: 'tnum'; text-align: right; }

.sc-error { padding: 40px 26px; color: var(--s-rechazado); font-size: 14px; }

/* ── La topbar en pantalla chica ─────────────────────────────────────────────
   La fila de la topbar mide entre 815 y 1141 px: `.topbar-nav` (324) y
   `.topbar-right` llevan `flex-shrink:0` y nunca ceden, así que empujaban el
   documento entero. El contenido de las páginas sí reflowea; esto era lo único
   que desbordaba.

   El corte está donde se rompe el contenido, no en un tamaño de aparato:
   324 de navegación + ~210 de marca + ~160 de la derecha + los huecos ≈ 760.

   La navegación no se encoge: desaparece. `menu.js` ya inyecta un cajón con las
   mismas cuatro entradas y su botón vive en la topbar desde siempre — repetirlas
   en una fila horizontal era la versión de escritorio de algo que ya tenía su
   versión de teléfono. Y el buscador pasa a su propio renglón: con `flex:1` y
   `min-width:0` se encogía hasta 0 px de ancho, o sea que en el teléfono no
   estaba estrecho, estaba inutilizable. Sólo lo tienen index, clientes y tareas;
   en las demás la topbar sigue siendo una sola fila. */
@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap; height: auto; min-height: 58px;
    gap: 12px; padding: 0 14px;
  }
  .topbar-nav { display: none; }            /* el cajón de menu.js hace este trabajo */
  .topbar-rule { display: none; }           /* filete decorativo, no información */
  .topbar-right { gap: 10px; min-width: 0; }
  .brand-group { gap: 10px; }
  /* Para que la marca, el botón del cajón y los controles quepan en un renglón:
     235 + 38 + 239 no entran en 390. Se va el subtítulo de la marca —el cajón lo
     sigue mostrando— y el contador, que el tablero ya repite en su propia barra.
     Si se quedaran, `.topbar-right` se iría a un renglón propio y la barra
     pegajosa pasaría de 58 a 176 px: una quinta parte de la pantalla, siempre. */
  .brand-sub { display: none; }
  .count-tag { display: none; }

  .topbar-search {
    order: 10; flex: 0 0 100%; max-width: none;
    margin: 0 -14px; padding: 0 14px 12px;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .topbar-search .search-box { margin-top: 12px; }
  /* El desplegable de sugerencias colgaba de una caja de 430 px como máximo;
     a ancho completo tiene que alinearse con el renglón nuevo, no con la caja. */
  .search-suggestions { left: 14px; right: 14px; width: auto; }

  /* Los KPI de clientes son una fila de celdas con `padding:0 22px`: 401 px, que
     en un teléfono no desbordan la página sino que **ensanchan el viewport** a
     431 y encogen todo lo demás. En dos columnas se leen mejor que apretados en
     una fila, y el filete de separación sigue siendo el borde de 1px del sistema. */
  /* `1fr` es `minmax(auto,1fr)` y ese `auto` es el min-content de la celda: una
     etiqueta larga como "Tasa de aceptación" no deja encoger la columna. Con
     `minmax(0,1fr)` sí. */
  .pg-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .pg-kpi { padding: 12px 16px; }
  .pg-kpi:nth-child(odd) { border-left: 0; }
  .pg-kpi:nth-child(n+3) { border-top: 1px solid var(--border); }

  /* Las cifras del tablero eran una fila que se partía en 2-3-1, con el filete
     vertical de `.stat-main` colgando a media altura. En dos columnas el total
     manda —ocupa el renglón entero— y las cinco cifras de estado se leen como
     una tabla y no como una fila rota. */
  .statsbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 4px 0; padding: 18px 16px 8px; }
  .stat { padding-right: 0; }
  .stat-main { grid-column: 1 / -1; padding: 0 0 12px; margin: 0 0 8px;
               border-right: 0; border-bottom: 1px solid var(--border); }

  /* El tablero de tareas: `.tk-page` es 100vh con `overflow:hidden`, y `.tk-shell`
     pone la columna de filtros, el kanban y un panel fijo de 336 px en una sola
     fila. En 390 px al kanban le quedaban 54: la barra de filtros se plegaba en
     una tira vertical y el panel se encimaba encima de ella. En el teléfono la
     página deja de ser una cáscara de altura fija y vuelve a ser una página que
     se desplaza, con el panel debajo del tablero en vez de a un lado. */
  .tk-page { height: auto; min-height: 100vh; overflow: visible; }
  .tk-shell { flex-direction: column; }
  .tk-aside { width: auto; overflow-y: visible;
              border-left: 0; border-top: 1px solid var(--border-2); }
  .tk-bar { padding: 10px 14px; }
}

}

/* ═══════════════════════════════════════════════════════════════════════════
   REDISEÑO v0.5 — pantallas aprobadas en "OfficeLab Final.dc.html".
   Todo lo de abajo sobrescribe reglas anteriores; se deja al final a propósito
   para que el diff sea legible y reversible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Topbar compacta con pestañas (sin hamburguesa) ─────────────────────── */
.topbar { height:52px; gap:20px; padding:0 20px; }
.brand { font-size:17px; }
.brand-sub, .topbar-rule, .mn-btn { display:none; }
.brand-mark { width:22px; height:22px; }
.topbar-nav a { height:52px; padding:0 14px; font-size:13px; white-space:nowrap; }
.topbar-nav a.active { border-bottom:none; box-shadow:inset 0 -2px 0 var(--paper); }
.tb-badge {
  font-family:var(--font-mono); font-size:10px; font-weight:700; line-height:1;
  padding:2px 5px; background:#F0A18E; color:#201333;
}
.topbar-search { max-width:360px; }
.search-box { height:32px; }
.btn-ghost { height:32px; padding:0 12px; font-size:12.5px; }
.th-btn { width:32px; height:32px; }
#userBox:not([hidden]) { display:inline-flex; align-items:center; gap:8px; }
.tb-ava { cursor:pointer;
  width:28px; height:28px; display:grid; place-items:center; flex-shrink:0;
  background:var(--paper); color:var(--topbar);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
}
.appfoot, .statsbar { display:none; }

/* ── Inmuebles: página a pantalla completa, sólo la lista scrollea ──────── */
body.inm-page { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.inm-page .topbar, .inm-page .qbar, .inm-page .statebar { flex-shrink:0; }

.qbar { padding:9px 20px; }
.qbar-box { min-height:36px; padding:3px 6px 3px 10px; gap:6px; }
.qbar-search {
  position:relative; display:flex; align-items:center; gap:7px;
  flex:1 1 240px; min-width:180px; height:28px; color:var(--faint);
}
.qbar-search > svg { flex-shrink:0; }
.qbar-search input {
  flex:1; min-width:0; height:100%; border:none; background:transparent; outline:none;
  font-family:var(--font-ui); font-size:13px; color:var(--ink);
}
.qbar-search .search-suggestions { top:calc(100% + 8px); left:-10px; right:auto; width:min(440px,90vw); }
.qbar .street-chip { background:var(--accent); color:var(--on-accent); }
.qbar-search { order:0; } #tokens { order:1; display:contents; } .qbar-add { order:2; } .qbar-clear { order:3; }
.tok-edit, .tok-del, .qbar-add, .qbar-clear { height:26px; font-size:12.5px; }
.qbar-sentence { display:none; }

.statebar { padding:7px 20px; gap:6px; flex-wrap:wrap; }
.statebar #statusPills { display:contents; }
.pill { height:26px; padding:0 9px; border:1px solid var(--border-2); font-size:12px; font-weight:600; color:var(--ink); }
.pill.active { border-color:var(--accent); }
.statebar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.statebar-right .btn-clear { height:28px; padding:0 10px; font-size:12px; }
.statebar .count-tag { color:var(--muted); }
.statebar .count-tag strong { color:var(--ink); }
.seg { display:flex; border:1px solid var(--border-2); }
.seg button {
  height:26px; padding:0 10px; border:none; background:transparent; cursor:pointer;
  font-family:var(--font-ui); font-size:12px; font-weight:600; color:var(--muted);
}
.seg button.on { background:var(--accent); color:var(--on-accent); }

.inm { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); }
.inm.split { grid-template-columns:minmax(0,1fr) minmax(360px,44%); }
.inm-list { position:relative; min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; }
.inm.grid-only .inm-map { display:none; }
.inm-map { position:relative; min-width:0; border-left:1px solid var(--border); background:var(--bg); }
#map { position:absolute; inset:0; }
.map-follow {
  position:absolute; top:12px; left:12px; z-index:2; display:flex; align-items:center; gap:7px;
  height:32px; padding:0 11px; background:var(--surface); border:1px solid var(--border-2);
  font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer;
}
.map-follow input { accent-color:var(--accent); }
.map-note {
  position:absolute; left:12px; bottom:12px; z-index:2; padding:5px 9px;
  background:var(--surface); border:1px solid var(--border);
  font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
}
.map-pin {
  padding:3px 7px; border:1px solid var(--accent); background:var(--surface); color:var(--ink);
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; white-space:nowrap; cursor:pointer;
}
.map-pin:hover, .map-pin.on { background:var(--accent); color:var(--on-accent); z-index:3; }

/* Rejilla compacta */
.grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; padding:12px 20px 16px; }
.inm.split .grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.card { cursor:pointer; position:relative; }
.card:hover { border-color:var(--border-2); }
.card.on { border-color:var(--accent); box-shadow:3px 3px 0 var(--accent); }
.card.sel { border-color:var(--accent); }
.card-img { height:120px; }
.card .badge-src { top:auto; bottom:8px; left:8px; font-size:9px; padding:2px 6px; }
.card .badge-size { bottom:8px; right:8px; font-size:10px; padding:2px 6px; }
.card .badge-foto { display:none; }
.btn-star { top:6px; right:6px; width:28px; height:28px; font-size:15px; }
.card-chk {
  position:absolute; top:6px; left:6px; width:24px; height:24px; padding:0; z-index:2;
  display:grid; place-items:center; cursor:pointer;
  background:var(--paper); color:var(--blue); border:1px solid rgba(32,19,51,.35);
  font-size:13px; font-weight:700; opacity:0; transition:opacity .12s;
}
.card:hover .card-chk, .card.sel .card-chk, .inm.selecting .card-chk, .card-chk:focus-visible { opacity:1; }
.card.sel .card-chk { background:var(--blue); color:var(--paper); border-color:var(--paper); }
.card-body { padding:9px 11px 10px; gap:4px; }
.card-price strong { font-size:19px; }
.card-ppm, .price-note { margin-top:2px; font-size:9.5px; }
.card-ver, .card-sep, .card-tags { display:none; }
.card-title { font-size:12.5px; font-weight:600; -webkit-line-clamp:1; }
.card-dir { font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-dir svg { display:none; }
.card-status { margin-top:3px; }
.card-status .status-dot { display:none; }
.status-select {
  flex:0 0 auto; height:24px; padding:0 8px; font-family:var(--font-mono);
  font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.pagination { padding:0 20px 24px; }
body.has-tray .inm-list { padding-bottom:70px; }

/* Bandeja de selección / comparación */
.tray {
  position:fixed; left:0; right:0; bottom:0; z-index:45; min-height:66px;
  display:flex; align-items:center; gap:10px; padding:9px 20px; flex-wrap:wrap;
  background:var(--topbar); color:var(--paper);
}
.tray[hidden] { display:none; }
.tray-count { font-size:13px; font-weight:700; margin-right:4px; }
.tray-items { display:flex; gap:8px; min-width:0; }
.tray-item {
  width:190px; height:46px; display:flex; align-items:center; gap:8px; padding-right:4px;
  background:rgba(255,255,255,.07); border:1px solid rgba(239,237,230,.18);
}
.tray-item img, .tray-thumb {
  width:46px; height:44px; object-fit:cover; flex-shrink:0; display:block;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 1px,transparent 1px 7px),#140a22;
}
.tray-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.tray-txt b { font-family:var(--font-display); font-size:15px; font-weight:500; }
.tray-txt small { font-size:10.5px; opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tray-x { width:22px; height:22px; border:none; background:transparent; color:var(--paper); opacity:.55; font-size:15px; cursor:pointer; }
.tray-x:hover { opacity:1; }
.tray-more { align-self:center; font-family:var(--font-mono); font-size:11px; opacity:.7; }
.tray-actions { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.tray-btn {
  height:34px; padding:0 12px; border:1px solid rgba(239,237,230,.28);
  background:transparent; color:var(--paper); font-family:var(--font-ui); font-size:12.5px; cursor:pointer;
}
.tray-btn option { color:var(--ink); background:var(--surface); }
.tray-btn:hover { background:rgba(255,255,255,.1); }
.tray-btn.solid { background:var(--paper); color:var(--blue); border-color:var(--paper); font-weight:700; }
.tray-btn:disabled { opacity:.4; cursor:not-allowed; }

.toast {
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:90;
  display:flex; align-items:center; gap:14px; padding:10px 10px 10px 16px;
  background:var(--ink); color:var(--bg); font-size:13px; max-width:92vw;
}
.toast[hidden] { display:none; }
.toast button {
  height:30px; padding:0 12px; border:1px solid currentColor; background:transparent;
  color:inherit; font-weight:700; cursor:pointer;
}

/* ── Comparar ─────────────────────────────────────────────────────────────── */
.cmp { padding:14px 20px 40px; }
.cmp-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.cmp-back { font-size:12.5px; color:var(--muted); text-decoration:none; }
.cmp-title { font-family:var(--font-display); font-size:22px; font-weight:500; }
.cmp-tools { margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; font-weight:600; }
.cmp-tools label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.cmp-tools input { accent-color:var(--accent); }
.cmp-scroll { overflow-x:auto; }
.cmp-table {
  width:100%; min-width:720px; border-collapse:collapse; table-layout:fixed;
  background:var(--surface); border:1px solid var(--border);
}
.cmp-table th, .cmp-table td { border:1px solid var(--border); vertical-align:middle; }
.cmp-table thead td { padding:10px; vertical-align:top; }
.cmp-k {
  width:170px; padding:0 14px; height:40px; text-align:left;
  font-family:var(--font-mono); font-size:9.5px; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.cmp-v { padding:8px 12px; font-size:13px; }
.cmp-v.mono { font-family:var(--font-mono); font-size:12px; }
.cmp-v.precio { font-family:var(--font-display); font-size:18px; }
.cmp-v.mejor { background:var(--r-rentado); }
.cmp-v.mejor::after {
  content:'MEJOR'; float:right; margin-top:2px; padding:1px 5px; background:var(--s-rentado); color:#fff;
  font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.06em;
}
.cmp-foto { position:relative; height:130px; background:var(--blue); overflow:hidden; }
.cmp-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.cmp-foto .badge-src { top:6px; left:6px; }
.cmp-quitar {
  position:absolute; top:6px; right:6px; width:26px; height:26px; border:none; cursor:pointer;
  background:var(--paper); color:var(--blue); font-size:14px;
}
.cmp-nombre { margin-top:8px; font-size:13px; font-weight:600; line-height:1.3; }
.cmp-acc { display:flex; gap:6px; padding:10px; }
.cmp-acc a { flex:1; height:34px; display:grid; place-items:center; text-decoration:none; font-size:12.5px; font-weight:600; }
.cmp-acc .btn-outline { border:1px solid var(--border-2); color:var(--ink); }
.cmp-acc .btn-solid { background:var(--accent); color:var(--on-accent); }
.cmp-add { width:150px; padding:10px; }
.cmp-add a {
  height:130px; display:grid; place-items:center; text-align:center; text-decoration:none;
  border:1px dashed var(--border-2); color:var(--muted); font-size:12px; font-weight:600;
}
tr.igual.ocultar { display:none; }
.cmp-table tbody td:empty { background:var(--bg); }

@media print {
  body.cmp-page > .cmp { display:block !important; }
  .cmp-tools, .cmp-quitar, .cmp-acc, .cmp-add, .cmp-back { display:none !important; }
}

/* ── Móvil ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .topbar { gap:10px; padding:0 12px; }
  /* El bloque de ≤760 px de arriba escondía la navegación porque la hacía el cajón
     de menu.js; el rediseño quitó el cajón, así que las pestañas se quedan y se
     desplazan de lado. La topbar vuelve a ser una sola fila de 52 px. */
  .topbar { flex-wrap:nowrap; height:52px; min-height:0; }
  .topbar-nav { display:flex; overflow-x:auto; min-width:0; flex:1 1 auto; }
  .topbar-nav a { padding:0 10px; }
  .topbar-search { display:none; }
  .inm.split { grid-template-columns:minmax(0,1fr); grid-template-rows:34vh minmax(0,1fr); }
  .inm.split .inm-map { order:-1; border-left:none; border-bottom:1px solid var(--border-2); }
  .grid, .inm.split .grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px 12px; gap:8px; }
  .card-img { height:92px; }
  .card-chk { opacity:1; width:30px; height:30px; }
  .statebar { flex-wrap:nowrap; overflow-x:auto; }
  .statebar-right .btn-clear, .statebar .count-tag { display:none; }
  .qbar { padding:8px 12px; }
  .qbar-search { flex-basis:100%; }
  .tray { padding:8px 12px; }
  .tray-items { display:none; }
  .tray-actions { margin-left:auto; }
  #trayClear { display:none; }
}
@media (max-width: 560px) {
  .brand-text { display:none; }
  .tb-ava + .btn-ghost { display:none; }
}


/* ── Ficha de propiedad (1b) ──────────────────────────────────────────────── */
.fx { display:block; max-width:none; padding:0; }
.fx-mosaic {
  position:relative; height:clamp(220px,34vh,340px); display:grid; gap:3px;
  grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; background:var(--blue);
}
.fx-mosaic.uno { grid-template-columns:1fr; grid-template-rows:1fr; }
.fx-ph { position:relative; padding:0; border:none; overflow:hidden; cursor:zoom-in; background:var(--blue); }
.fx-ph.grande { grid-row:span 2; }
.fx-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.fx-ph.vacio, .fx-mosaic.uno .fx-ph.vacio {
  cursor:default;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 1px,transparent 1px 11px),var(--blue);
}
.fx-mas {
  position:absolute; inset:0; display:grid; place-items:center; background:rgba(17,17,32,.45);
  color:var(--paper); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
}
.fx-over {
  position:absolute; top:12px; display:flex; align-items:center; gap:4px;
  background:var(--paper); color:var(--blue); font-size:12.5px; font-weight:600; text-decoration:none;
}
.fx-back { left:20px; padding:6px 11px; }
.fx-back:hover { color:var(--blue); background:#fff; }
.fx-nav { right:20px; gap:0; }
.fx-nav span { padding:0 10px; font-family:var(--font-mono); font-size:11px; }
.fx-nav button { width:32px; height:30px; border:none; background:transparent; color:inherit; font-size:14px; cursor:pointer; }
.fx-nav button:disabled { opacity:.3; cursor:default; }

.fx-band {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 24px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.fx-band-t { flex:1 1 320px; min-width:0; }
.fx-band-t h1 { font-size:19px; font-weight:600; line-height:1.3; color:var(--ink); }
.fx-band-t p { font-size:12.5px; color:var(--muted); margin-top:3px; }
.fx-band-p { text-align:right; }
.fx-band-p b { display:block; font-family:var(--font-display); font-size:30px; font-weight:500; line-height:1; font-feature-settings:'tnum'; }
.fx-band-p span { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); }
.fx-status { height:38px; padding:0 12px; font-size:13px; font-weight:700; cursor:pointer; outline:none; }
.fx-star {
  width:38px; height:38px; border:1px solid var(--border-2); background:transparent;
  color:var(--faint); font-size:17px; cursor:pointer;
}
.fx-star.on { border-color:var(--accent); color:var(--accent); }
.fx-btn {
  height:38px; display:inline-flex; align-items:center; gap:6px; padding:0 14px;
  border:1px solid var(--border-2); background:transparent; color:var(--ink);
  font-family:var(--font-ui); font-size:13px; font-weight:600; text-decoration:none; cursor:pointer;
}
.fx-btn:hover { border-color:var(--accent); color:var(--accent); }
.fx-btn.solid { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.fx-btn.solid:hover { color:var(--on-accent); opacity:.9; }

.fx-cols {
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:14px; padding:14px 24px 40px; align-items:start;
}
.fx-stack { display:flex; flex-direction:column; gap:14px; }
/* Modo presentación (listing.js, PRESENTA_A): sin la columna de clientes y notas. */
.fx-cols.pres { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
.fx-card { background:var(--surface); border:1px solid var(--border); padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.fx-card h2 {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.fx-n { font-weight:400; color:var(--muted); }
.fx-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fx-facts dt { font-size:10.5px; color:var(--muted); }
.fx-facts dd { font-family:var(--font-mono); font-size:13px; font-weight:700; margin-top:2px; }
.fx-desc { font-size:13px; line-height:1.6; color:var(--ink); white-space:pre-line; }
.fx-feat { display:flex; flex-wrap:wrap; gap:5px; list-style:none; }
.fx-feat li { padding:3px 8px; border:1px solid var(--border); font-family:var(--font-mono); font-size:9.5px; color:var(--muted); }
.fx-pdfdata { border-top:1px solid var(--border); padding-top:10px; display:flex; flex-direction:column; gap:8px; }
.fx-pdfdata summary { cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted); }
.fx-pdfdata[open] summary { margin-bottom:8px; }
.fx-pdfdata label { display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--muted); margin-bottom:8px; }
.fx-row { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:8px; }
.fx-pdfdata input, .fx-pdfdata select, .fx-pdfdata textarea, .fx-add input, .fx-asignar, .fx-notas textarea {
  width:100%; padding:7px 9px; border:1px solid var(--border-2); background:var(--surface);
  color:var(--ink); font-family:var(--font-ui); font-size:13px; outline:none;
}
.fx-pdfdata input:focus, .fx-pdfdata textarea:focus, .fx-add input:focus, .fx-notas textarea:focus { border-color:var(--accent); }
.fx-prog { height:4px; background:var(--accent-soft); }
.fx-prog span { display:block; height:4px; background:var(--s-rentado); }
.fx-docs { display:flex; flex-direction:column; gap:6px; }
.fx-doc { display:flex; align-items:center; gap:8px; }
.fx-doc label { flex:1; display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer; }
.fx-doc input { width:15px; height:15px; accent-color:var(--s-rentado); }
.fx-doc.done span { color:var(--faint); text-decoration:line-through; }
.fx-doc .doc-del, .fx-proc .proc-del { width:24px; height:24px; border:none; background:transparent; color:var(--faint); font-size:15px; cursor:pointer; }
.fx-doc .doc-del:hover, .fx-proc .proc-del:hover { color:var(--s-rechazado); }
.fx-add { display:flex; gap:6px; }
.fx-add button { padding:0 12px; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); font-size:12.5px; font-weight:600; cursor:pointer; }
/* Archivos de un documento: cuelgan debajo de su renglón, sangrados a la altura del
   nombre. "Adjuntar" y "Archivos…" son botones de línea, no de acción principal. */
.fx-doc .doc-clip, .fx-add .doc-file, .fx-add .foto-sube {
  height:24px; padding:0 8px; border:1px solid var(--border-2); background:transparent; color:var(--muted);
  font-family:var(--font-ui); font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.fx-add .doc-file, .fx-add .foto-sube { height:auto; }
.fx-add .foto-url { min-width:0; }
.fx-doc .doc-clip:hover, .fx-add .doc-file:hover, .fx-add .foto-sube:hover { border-color:var(--accent); color:var(--ink); }
.fx-file { display:flex; align-items:center; gap:8px; margin:-2px 0 0 24px; padding-left:9px; border-left:2px solid var(--border); font-size:12.5px; }
.fx-file a { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--accent); }
.fx-file small { font-family:var(--font-mono); font-size:9.5px; color:var(--faint); flex-shrink:0; }
.fx-file .file-del, .fx-thumb button { border:none; cursor:pointer; }
.fx-file .file-del { width:24px; height:22px; background:transparent; color:var(--faint); font-size:14px; }
.fx-file .file-del:hover { color:var(--s-rechazado); }
.fx-card.soltar, .fx-fotos.soltar { outline:2px dashed var(--accent); outline-offset:-2px; }
/* Fotos de una propiedad propia: miniaturas con quitar y "de portada". */
.fx-fotos { display:flex; flex-direction:column; gap:8px; }
.fx-lab { font-size:11px; color:var(--muted); }
.fx-lab small { color:var(--faint); }
.fx-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:6px; }
.fx-thumb { position:relative; aspect-ratio:4 / 3; background:var(--accent-soft); }
.fx-thumb.portada { outline:2px solid var(--accent); outline-offset:-2px; }
.fx-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fx-thumb button { position:absolute; top:2px; width:20px; height:20px; background:var(--ink); color:var(--surface); font-size:12px; line-height:1; }
.fx-thumb .foto-del { right:2px; }
.fx-thumb .foto-top { left:2px; }
.fx-thumb button:hover { background:var(--accent); color:var(--on-accent); }
.fx-proc { display:flex; align-items:center; gap:8px; font-size:13px; }
.fx-proc > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-hint { font-size:12.5px; color:var(--faint); }
.fx-notas textarea { min-height:110px; resize:vertical; font-family:var(--font-mono); font-size:11px; line-height:1.7; }

.fx-lb { position:fixed; inset:0; z-index:100; background:rgba(10,6,18,.92); display:grid; place-items:center; }
.fx-lb[hidden] { display:none; }
.fx-lb img { max-width:90vw; max-height:86vh; object-fit:contain; }
.fx-lb-x, .fx-lb-nav {
  position:absolute; width:44px; height:44px; border:1px solid rgba(239,237,230,.3);
  background:transparent; color:var(--paper); font-size:18px; cursor:pointer;
}
.fx-lb-x { top:16px; right:16px; }
.fx-lb-nav.prev { left:16px; top:50%; } .fx-lb-nav.next { right:16px; top:50%; }
.fx-lb-n { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:var(--paper); font-family:var(--font-mono); font-size:11px; }

@media (max-width: 1000px) {
  .fx-cols { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .fx-cols > .fx-card:first-child { grid-column:1 / -1; }
}
@media (max-width: 700px) {
  .fx-mosaic { grid-template-columns:1fr; grid-template-rows:1fr; height:240px; }
  .fx-mosaic .fx-ph:not(.grande) { display:none; }
  .fx-band { padding:12px 14px; }
  .fx-band-p { text-align:left; flex:1; }
  .fx-cols, .fx-cols.pres { grid-template-columns:1fr; padding:12px 12px 90px; }
  .fx-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fx-btn, .fx-status, .fx-star { height:44px; }
}

/* ── Ficha técnica PDF · formato Pro Realtors ─────────────────────────────── */
#ficha-print { display:none; }
@media print {
  @page { size:letter; margin:0.35in 0.45in; }
  .pr-sheet {
    font-family:'Montserrat',Arial,sans-serif; color:#111; background:#fff;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
    page-break-after:always; break-after:page; display:flex; flex-direction:column;
  }
  .pr-sheet:last-child { page-break-after:auto; break-after:auto; }
  .pr-head { display:flex; justify-content:space-between; align-items:flex-start; padding-left:10px; }
  .pr-asesor { display:flex; flex-direction:column; gap:3px; font-size:10.5pt; }
  .pr-asesor b { font-size:15pt; font-weight:700; }
  .pr-logo { width:1.45in; height:auto; margin-top:12px; }
  .pr-mini { font-size:12pt; font-weight:700; align-self:center; }
  .pr-rule { height:1px; background:#111; margin-top:16px; }
  .pr-precio { display:flex; justify-content:flex-end; align-items:baseline; gap:6px; margin-top:16px; }
  .pr-precio b { font-size:18pt; font-weight:700; }
  .pr-precio span { font-size:10.5pt; font-weight:600; }
  .pr-colonia { font-size:12pt; margin-top:14px; }
  .pr-titulo { font-family:'Montserrat',Arial,sans-serif; font-size:17pt; font-weight:700; margin:8px 0 0; }
  .pr-foto { width:92%; height:3.05in; object-fit:cover; margin:12px auto 0; display:block; }
  .pr-datos {
    width:92%; margin:10px auto 0; display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid #111; border-bottom:1px solid #111;
  }
  .pr-datos.cuatro { grid-template-columns:repeat(4,1fr); }
  .pr-datos.cuatro b { font-size:13pt; }
  .pr-datos div { display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 6px; }
  .pr-datos div + div { border-left:1px solid #D0D0D0; }
  .pr-datos span { font-size:7.5pt; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#555; }
  .pr-datos b { font-size:15pt; font-weight:700; white-space:nowrap; }
  .pr-h2 { font-family:'Montserrat',Arial,sans-serif; font-size:13pt; font-weight:700; margin-top:22px; }
  .pr-desc { font-size:10.5pt; line-height:1.45; margin-top:10px; display:flex; flex-direction:column; gap:12px; }
  .pr-maps { color:#1a0dab; text-decoration:underline; font-size:11pt; word-break:break-all; }
  .pr-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
  .pr-grid img { width:100%; height:2.9in; object-fit:cover; display:block; }
}


/* ── Clientes (1a): maestro-detalle ───────────────────────────────────────── */
.cl { display:grid; grid-template-columns:340px minmax(0,1fr); height:calc(100vh - 52px); }
/* Modo presentación (clientes.js): en pantalla sólo el cliente abierto. */
.cl.presenta { grid-template-columns:minmax(0,1fr); }
.cl.presenta .cl-list, .cl.presenta .cl-busca, .cl.presenta .cl-back, .cl.presenta #clDel { display:none; }
.cl-list { display:flex; flex-direction:column; min-height:0; background:var(--surface); border-right:1px solid var(--border); }
.cl-list-head { display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--border); }
.cl-list-head .pill-line { height:26px; padding:0 8px; font-size:11.5px; }
.cl-new {
  margin-left:auto; width:28px; height:28px; border:none; cursor:pointer;
  background:var(--accent); color:var(--on-accent); font-size:17px; line-height:1;
}
.cl-items { flex:1; min-height:0; overflow-y:auto; }
.cl-item {
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; text-align:left;
  border:none; border-bottom:1px solid var(--border); background:transparent; color:var(--ink); cursor:pointer;
  font-family:var(--font-ui);
}
.cl-item:hover { background:var(--accent-soft); }
.cl-item.on { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.cl-ava {
  width:32px; height:32px; flex-shrink:0; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); font-family:var(--font-mono); font-size:11px; font-weight:700;
}
.cl-ava.lg { width:44px; height:44px; font-size:14px; }
.cl-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.cl-txt b { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-txt small { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.cl-meta small { font-family:var(--font-mono); font-size:9.5px; color:var(--muted); }
.cl-bars { display:flex; gap:2px; }
.cl-bars i { display:block; height:6px; }
.cl-empty { padding:24px 14px; font-size:13px; color:var(--faint); }
.cl-empty.pad { margin:0 22px; border:1px dashed var(--border-2); text-align:center; }

.cl-detail { min-width:0; min-height:0; overflow-y:auto; }
.cl-none { display:grid; place-items:center; height:100%; color:var(--faint); font-size:13px; }
.cl-head { padding:16px 22px 14px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:12px; }
.cl-back { display:none; }
.cl-title { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cl-names { display:flex; flex-direction:column; min-width:0; flex:1; }
.cl .cli-in { border-color:transparent; background:transparent; height:auto; padding:2px 6px; margin-left:-6px; }
.cl .cli-in:hover { border-color:var(--border); }
.cl .cli-in:focus { border-color:var(--accent); background:var(--surface); }
.cl-nombre { font-family:var(--font-display) !important; font-size:24px !important; font-weight:500; }
.cl-empresa { font-size:12.5px !important; color:var(--muted) !important; }
.cl-acts { display:flex; gap:6px; }
.cl-acts .fx-btn { height:32px; font-size:12.5px; }
.cl-fields { display:grid; grid-template-columns:1fr 1fr 2fr; border:1px solid var(--border); }
.cl-f { display:flex; flex-direction:column; gap:2px; padding:7px 10px 6px; }
.cl-f + .cl-f { border-left:1px solid var(--border); }
.cl-f > span { font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.cl-f .cli-in { font-size:13px; }
/* Cuenta: selector del equipo, con la misma presencia que los campos de texto. */
.cl-sel { height:26px; border:none; background:transparent; padding:0; font-family:var(--font-ui); font-size:13px; color:var(--ink); cursor:pointer; }
.cl-sel:focus { outline:1px solid var(--accent); outline-offset:2px; }
.tb-ava, .cl-sel { cursor:pointer; }

/* Qué busca: píldoras de criterios + menú fijo. Ocupa el renglón entero. */
/* Contacto: el desplegable elige a la persona y abajo van sus datos, editables. */
#clWhats { display:contents; }
#clWhats:empty { display:none; }
.cl-cto { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:6px; }
.cl-cto .cl-ef { flex:1 1 130px; }
.cl-cto-x { width:30px; height:30px; flex-shrink:0; border:1px solid var(--border-2); background:transparent; color:var(--muted); font-size:15px; cursor:pointer; }
.cl-cto-x:hover { border-color:var(--s-rechazado); color:var(--s-rechazado); }
.cl-f.wide { grid-column:1 / -1; border-left:none; border-top:1px solid var(--border); }
.crit-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:4px 0 2px; }
.cl-f .crit-pill { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 4px 0 10px;
  border:1px solid var(--accent); background:var(--accent-soft); color:var(--ink);
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; }
.crit-pill b { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.crit-x { width:20px; height:20px; border:none; background:transparent; color:var(--muted); font-size:15px; line-height:1; cursor:pointer; }
.crit-x:hover { color:var(--ink); }
.cl-f .crit-wrap { position:relative; font-family:var(--font-ui); font-size:inherit; letter-spacing:0; text-transform:none; color:inherit; }
.crit-add { height:28px; padding:0 11px; border:1px dashed var(--border-2); background:transparent; color:var(--muted);
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; cursor:pointer; }
.crit-add:hover { border-color:var(--accent); color:var(--ink); }
.crit-buscar { margin-left:auto; height:28px; display:inline-flex; align-items:center; padding:0 12px;
  background:var(--accent); color:var(--on-accent); font-size:12.5px; font-weight:600; text-decoration:none; }
.crit-nota { margin-top:4px; }
.crit-pop { position:absolute; top:calc(100% + 4px); left:0; z-index:70; min-width:230px;
  display:flex; flex-direction:column; gap:8px; padding:10px;
  background:var(--surface); border:1px solid var(--accent); box-shadow:3px 3px 0 var(--accent); }
.crit-pop[role=menu] { gap:0; padding:4px; }
.crit-opt { height:32px; padding:0 10px; border:none; background:transparent; text-align:left;
  font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; }
.crit-opt:hover { background:var(--accent-soft); }
.crit-pop-t { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.crit-chips { display:flex; flex-wrap:wrap; gap:6px 12px; }
.crit-chips label { display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
.crit-rango { display:flex; align-items:center; gap:6px; }
.crit-in { width:100%; height:32px; padding:0 9px; border:1px solid var(--border-2); background:var(--surface);
  font-family:var(--font-ui); font-size:13px; color:var(--ink); outline:none; }
.crit-rango .crit-in { width:100px; }
.crit-in:focus { border-color:var(--accent); }
.crit-sugs { display:flex; flex-direction:column; max-height:220px; overflow-y:auto; }
.crit-sug { display:flex; flex-direction:column; align-items:flex-start; padding:6px 8px; border:none; background:transparent;
  font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer; }
.crit-sug small { font-size:11px; font-weight:400; color:var(--muted); }
.crit-sug:hover { background:var(--accent-soft); }
.crit-vacio { font-size:12px; color:var(--muted); margin:4px 0; }
.crit-pop-f { display:flex; justify-content:flex-end; gap:6px; }
.crit-cancel, .crit-ok { height:30px; padding:0 12px; font-family:var(--font-ui); font-size:12.5px; font-weight:600; cursor:pointer; }
.crit-cancel { border:1px solid var(--border-2); background:transparent; color:var(--ink); }
.crit-ok { border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); }
.cl-props-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:14px 22px 8px; }
.cl-props-head h2 { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-right:8px; }
.cl-chip { padding:3px 8px; font-size:11.5px; font-weight:600; }
.cl-chip.status-presentado { background:var(--r-presentado); color:var(--s-presentado); }
.cl-chip.status-aprobado { background:var(--r-aprobado); color:var(--s-aprobado); }
.cl-chip.status-rechazado { background:var(--r-rechazado); color:var(--s-rechazado); }
.cl-proponer-2 { margin-left:14px !important; }
/* Filtro "Presentada a" en Inmobiliaria: la lista de clientes puede ser larga. */
.fb-cajas-lista { grid-template-columns:1fr; max-height:320px; overflow-y:auto; }
.cl-proponer { margin-left:auto; font-size:12.5px; font-weight:600; color:var(--muted); text-decoration:none; }
/* "+ Proponer desde Catálogo": el mismo enlace, pero abre un buscador en su sitio. */
.cl-catwrap { position:relative; margin-left:auto; }
button.cl-proponer { padding:0; border:none; background:transparent; font-family:var(--font-ui); cursor:pointer; }
.cl-proponer:hover, .cl-proponer[aria-expanded=true] { color:var(--ink); }
.cl-catpop { left:auto; right:0; width:340px; max-width:calc(100vw - 28px); }
.cl-catpop input { height:34px; padding:0 10px; border:1px solid var(--border-2); background:var(--surface); color:var(--ink); font-family:var(--font-ui); font-size:13px; }
.cl-catpop input:focus { outline:none; border-color:var(--accent); }
.cl-catlist { display:flex; flex-direction:column; max-height:320px; overflow-y:auto; }
.cl-catopt { height:auto; padding:7px 10px; display:flex; flex-direction:column; gap:2px; }
.cl-catopt b { font-weight:600; overflow-wrap:anywhere; }
.cl-catopt small { font-size:11.5px; font-weight:400; color:var(--muted); }
.cl-catopt:disabled { cursor:default; opacity:.55; }
.cl-catopt:disabled:hover { background:transparent; }
.cl-catnota { padding:7px 10px; font-size:12.5px; color:var(--muted); }
/* La rejilla de la fila la arma clientes.js (rejilla()) con las columnas prendidas y la
   pasa en --cl-cols; --cl-min es su ancho mínimo, para que con muchas columnas la tabla
   se recorra de lado en vez de aplastar el nombre del inmueble. */
.cl-table { margin:0 22px 30px; background:var(--surface); border:1px solid var(--border); overflow-x:auto; }
.cl-tr {
  display:grid; grid-template-columns:var(--cl-cols); gap:10px; min-width:var(--cl-min);
  align-items:center; padding:6px 12px; min-height:48px; border-bottom:1px solid var(--border);
}
.cl-tr[data-proc] { cursor:pointer; }
.cl-tr[data-proc]:hover { background:var(--accent-soft); }
.cl-tr.open { background:var(--accent-soft); border-bottom-color:transparent; }
.cl-tr.dragging { opacity:.4; }
.cl-tr.drop-a { border-top:2px solid var(--accent); }
.cl-tr.drop-b { border-bottom:2px solid var(--accent); }
.cl-grip { font-size:12px; letter-spacing:-3px; color:var(--faint); cursor:grab; user-select:none; text-align:center; }
.cl-grip:hover { color:var(--ink); }
.cl-grip.off { opacity:.3; cursor:not-allowed; }
.cl-num { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--muted); text-align:right; }
.cl-c { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; }
.cl-tn { font-family:var(--font-mono); font-size:10px; font-weight:700; text-align:center; color:var(--faint); }
.cl-tn.on { padding:2px 0; background:var(--accent); color:var(--on-accent); }
/* Columna "Tareas": el mismo contador, seguido de la tarea que toca primero. */
.cl-tcount { display:inline-block; min-width:18px; margin-right:7px; padding:2px 5px; background:var(--accent); color:var(--on-accent); font-family:var(--font-mono); font-size:10px; font-weight:700; text-align:center; }
.cl-c[data-c=tareas] small { font-size:11.5px; color:var(--muted); }
.cl-colspop label small { margin-left:auto; padding-left:10px; font-size:11px; color:var(--muted); }

/* El panel que se despliega bajo la fila: la propiedad completa, editable, y sus tareas. */
.cl-exp { min-width:var(--cl-min); padding:14px 16px 16px 46px; border-bottom:1px solid var(--border); background:var(--bg); display:flex; flex-direction:column; gap:12px; cursor:default; }
.cl-exp-main { display:flex; gap:14px; align-items:flex-start; }
.cl-exp-foto { width:200px; height:140px; object-fit:cover; flex-shrink:0; border:1px solid var(--border); }
/* Fotos editables de una propiedad propia: la portada y, debajo, las miniaturas y el
   alta, con las mismas piezas (.fx-fotos) que la ficha. */
.cl-exp-fotos { width:200px; flex-shrink:0; }
.cl-exp-fotos .foto-url { flex:1; height:28px; padding:0 8px; border:1px solid var(--border-2); background:var(--surface); color:var(--ink); font-family:var(--font-ui); font-size:12px; }
.cl-exp-grid { flex:1; min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 10px; }
.cl-ef { display:flex; flex-direction:column; gap:3px; min-width:0; }
.cl-ef.wide { grid-column:1 / -1; }
.cl-ef-row { display:flex; gap:6px; align-items:stretch; }
.cl-ef-row .cl-ein { flex:1; min-width:0; }
.cl-map-ir { height:auto; display:inline-flex; align-items:center; white-space:nowrap; text-decoration:none; color:var(--ink); }
.cl-ef > span, .cl-exp-tareas h3 { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:700; }
.cl-ein, .cl-tadd input, .cl-tadd select, .cl-addrow input {
  width:100%; min-height:32px; padding:5px 9px; border:1px solid var(--border-2); background:var(--surface);
  color:var(--ink); font-family:var(--font-ui); font-size:13px; outline:none;
}
textarea.cl-ein { resize:vertical; line-height:1.5; }
.cl-ein:focus, .cl-tadd input:focus, .cl-tadd select:focus, .cl-addrow input:focus { border-color:var(--accent); }
.cl-exp-links { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:12.5px; }
.cl-exp-links a { font-weight:600; color:var(--accent); text-decoration:none; }
.cl-exp-links a:hover { text-decoration:underline; }
.cl-exp-links span { color:var(--faint); font-size:11.5px; }
/* Modo presentación: el panel es la lámina de la propiedad, no un formulario. */
.cl-pv { gap:18px; padding:22px 24px 20px 46px; }
.cl-pv-main { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px; align-items:start; }
.cl-pv-gal { display:flex; flex-direction:column; gap:6px; min-width:0; }
.cl-pv-portada { width:100%; aspect-ratio:4/3; }
.cl-pv-portada img, .cl-pv-mini img { width:100%; height:100%; object-fit:cover; display:block; }
.cl-pv-portada.vacio { display:block; background:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 1px,transparent 1px 7px),var(--blue); }
.cl-pv-mini { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.cl-pv-mini .cl-th-ver { position:relative; aspect-ratio:4/3; width:100%; }
.cl-pv-mini span { position:absolute; inset:0; display:grid; place-items:center; background:rgba(10,6,18,.55); color:var(--paper); font-family:var(--font-mono); font-size:13px; }
.cl-pv-info { display:flex; flex-direction:column; gap:12px; min-width:0; }
.cl-pv-sub { margin:0; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cl-pv-tit { margin:0; font-family:var(--font-display); font-size:32px; font-weight:500; line-height:1.1; color:var(--ink); }
.cl-pv-precio { margin:0; font-family:var(--font-display); font-size:30px; color:var(--ink); }
.cl-pv-precio small { margin-left:6px; font-family:var(--font-ui); font-size:14px; color:var(--muted); }
.cl-pv-datos { margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cl-pv-datos div { padding:10px 12px 10px 0; }
.cl-pv-datos dt { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:700; }
.cl-pv-datos dd { margin:4px 0 0; font-size:17px; color:var(--ink); }
.cl-pv-desc { margin:0; font-size:15px; line-height:1.6; color:var(--ink); white-space:pre-line; }
.cl-pv-mapa { align-self:flex-start; font-weight:600; font-size:13px; color:var(--accent); text-decoration:none; }
.cl-pv-mapa:hover { text-decoration:underline; }
.cl-pv-notas { padding-top:14px; border-top:1px solid var(--border); }
.cl-exp-tareas { display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--border); }

/* Tareas: las de una propiedad (dentro del panel) y las del cliente (bajo la tabla). */
.cl-tareas { margin:0 22px 40px; padding:10px 12px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
.cl-tareas .cl-empty { padding:6px 0; }
.cl-tarea { display:flex; align-items:center; gap:9px; min-height:28px; font-size:13px; }
.cl-tchk { width:15px; height:15px; flex-shrink:0; accent-color:var(--s-rentado); cursor:pointer; }
.cl-tt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-tarea.done .cl-tt { color:var(--faint); text-decoration:line-through; }
.cl-tprop { max-width:220px; padding:2px 7px; border:1px solid var(--border); font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-tmeta { flex-shrink:0; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); }
.cl-tadd, .cl-addrow { display:flex; gap:6px; }
.cl-tadd { margin-top:4px; }
.cl-tadd input[data-t=titulo], .cl-addrow input { flex:1; min-width:120px; }
.cl-tadd select { width:auto; max-width:190px; }
.cl-tadd input[type=date] { width:140px; }
.cl-tadd button, .cl-addrow button { padding:0 12px; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); font-family:var(--font-ui); font-size:12.5px; font-weight:600; cursor:pointer; }
.cl-addrow { padding:8px 12px; min-width:var(--cl-min); }
.cl-addrow input { border-style:dashed; }

/* Filtros: quién lleva la cuenta (lista) y quién presentó (tabla); el botón de columnas. */
.cl-fsel, .cl-btn {
  height:26px; padding:0 8px; border:1px solid var(--border-2); background:transparent; color:var(--muted);
  font-family:var(--font-ui); font-size:11.5px; font-weight:600; cursor:pointer;
}
.cl-fsel option { color:var(--ink); background:var(--surface); }
.cl-fsel:hover, .cl-btn:hover { border-color:var(--accent); color:var(--ink); }
.cl-fsel.on { border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
/* Cuenta comparte renglón con "Todos" y "+"; los dos estatus van a lo ancho, uno por
   renglón, para que su nombre se lea entero en los 340px de la lista. */
.cl-list-head .cl-fsel { flex:1 1 130px; min-width:0; }
.cl-list-head .cl-fsel.ancho { flex-basis:100%; }
.cl-colswrap { position:relative; }
.cl-colspop { left:auto; right:0; min-width:170px; gap:6px; }
.cl-colspop label { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.cl-colchk { accent-color:var(--accent); }
button.cl-chip { border:1px solid transparent; font-family:var(--font-ui); cursor:pointer; }
button.cl-chip.on { border-color:currentColor; }
.cl-resp { width:22px; height:22px; font-size:9px; }
/* Estatus del cliente (activo, contactando…): un color por estatus, en la lista y en
   el selector de su ficha. Y el asa para reordenar la lista, que sólo se ve al pasar. */
.est-activo { --est:var(--s-aprobado); }
.est-contactando { --est:var(--s-presentado); }
.est-por_contactar { --est:var(--tono-2); }
.est-inactivo { --est:var(--s-descartado); }
.cl-est { font-style:normal; font-weight:600; color:var(--est); }
.cl-est::after { content:" · "; color:var(--faint); font-weight:400; }
.cl-sel[class*="est-"] { color:var(--est); font-weight:600; }
.cl-sel option { color:var(--ink); background:var(--surface); font-weight:400; }
.cl-item > .cl-grip { width:10px; margin:0 -4px 0 -6px; opacity:0; }
.cl-item:hover > .cl-grip, .cl-item:focus-visible > .cl-grip { opacity:1; }
.cl-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.cl-item.dragging { opacity:.4; }
.cl-item.drop-a { border-top:2px solid var(--accent); }
.cl-item.drop-b { border-bottom:2px solid var(--accent); }
.cl-th { min-height:28px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.cl-th-img { width:52px; height:36px; object-fit:cover; display:block; }
.cl-th-ver { padding:0; border:none; background:none; cursor:zoom-in; display:block; flex-shrink:0; }
.cl-th-img.vacio { background:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 1px,transparent 1px 7px),var(--blue); }
.cl-inm { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-inm a { color:var(--ink); text-decoration:none; }
.cl-inm a:hover { text-decoration:underline; }
.cl-precio { font-family:var(--font-display); font-size:16px; }
.cl-mono { font-family:var(--font-mono); font-size:11px; color:var(--muted); }
/* Quién presentó: avatar de tono (el mismo del pipeline) + nombre. */
.cl-trae { display:flex; align-items:center; gap:8px; min-width:0; }
.cl-trae .tk-ava { width:24px; height:24px; font-size:9.5px; }
.cl-trae-n { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-trae-n.sin { font-weight:400; color:var(--faint); }
.cl-x { width:24px; height:24px; border:none; background:transparent; color:var(--faint); font-size:16px; cursor:pointer; }
.cl-x:hover { color:var(--s-rechazado); }
@media (max-width: 800px) {
  /* minmax(0,1fr): con `1fr` a secas las píldoras de etapa empujaban la lista 8 px
     más allá de la pantalla. */
  .cl { grid-template-columns:minmax(0,1fr); height:auto; min-height:calc(100vh - 52px); }
  .cl.has-sel .cl-list { display:none; }
  .cl:not(.has-sel) .cl-detail { display:none; }
  .cl-back { display:inline-flex; align-self:flex-start; border:none; background:transparent; padding:6px 0; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
  .cl-item { min-height:56px; }
  .cl-item > .cl-grip { display:none; }
  .cl-fields { grid-template-columns:1fr; }
  .cl-f + .cl-f { border-left:none; border-top:1px solid var(--border); }
  /* En el teléfono la fila es número, foto, nombre y etapa; lo demás está en el panel
     que se despliega al tocarla. Sin asa: arrastrar con el dedo no funciona aquí. */
  .cl-tr { grid-template-columns:20px 44px minmax(0,1fr) 22px; min-width:0; }
  .cl-th, .cl-tr > .cl-grip, .cl-tr > .cl-tn, .cl-tr > .cl-c { display:none; }
  .cl-tr > .cl-c[data-c=estatus] { display:block; grid-column:3; overflow:visible; }
  .cl-tr > .cl-x { grid-column:4; grid-row:1; }
  .cl-exp { min-width:0; padding:12px; }
  .cl-exp-main { flex-direction:column; }
  .cl-exp-foto { width:100%; height:160px; }
  .cl-exp-main > .cl-th-ver, .cl-exp-fotos > .cl-th-ver { width:100%; }
  .cl-pv { padding:14px 12px; }
  .cl-pv-main { grid-template-columns:minmax(0,1fr); gap:16px; }
  .cl-pv-tit { font-size:26px; } .cl-pv-precio { font-size:24px; }
  .cl-exp-fotos { width:100%; }
  .cl-exp-grid { grid-template-columns:1fr 1fr; width:100%; }
  .cl-addrow { min-width:0; }
  .cl-tadd { flex-wrap:wrap; }
  .cl-tadd select, .cl-tadd input[type=date] { flex:1; max-width:none; width:auto; }
  .cl-tarea { flex-wrap:wrap; }
  .cl-tareas { margin:0 12px 90px; }
  .cl-table, .cl-empty.pad { margin:0 12px 24px; }
  .cl-head, .cl-props-head { padding-left:14px; padding-right:14px; }
}

/* ── Tareas (1c): panel sólo con tarea abierta ────────────────────────────── */
.tk-aside { display:none; width:420px; }
.tk-aside.open { display:flex; }
@media (max-width: 900px) {
  .tk-aside.open { position:fixed; inset:52px 0 0 0; width:auto; z-index:60; }
}

/* ── Scrapers (1a): tabla comparativa ─────────────────────────────────────── */
.sc-kpis { display:flex; gap:0; margin-bottom:12px; }
.sc-kpis div { padding:0 22px; border-left:1px solid var(--border); display:flex; flex-direction:column; }
.sc-kpis div:first-child { padding-left:0; border-left:none; }
.sc-kpis b { font-family:var(--font-display); font-size:24px; font-weight:500; line-height:1; font-feature-settings:'tnum'; }
.sc-kpis b.warn { color:var(--s-contactado); }
.sc-kpis span { font-size:11.5px; color:var(--muted); margin-top:4px; }
/* En el teléfono las cuatro cifras no caben en una fila: se parten en dos. */
@media (max-width: 700px) {
  .sc-kpis { flex-wrap:wrap; row-gap:12px; }
  .sc-kpis div { flex:1 1 40%; }
  .sc-kpis div:nth-child(odd) { padding-left:0; border-left:none; }
}
.sc-tab { background:var(--surface); border:1px solid var(--border); overflow-x:auto; }
.sc-tr {
  display:grid; grid-template-columns:200px 100px 90px 80px 80px repeat(5,minmax(70px,1fr)); gap:12px;
  align-items:center; padding:0 16px; min-height:54px; border-bottom:1px solid var(--border); min-width:980px;
}
.sc-tr:last-child { border-bottom:none; }
.sc-th { min-height:32px; border-bottom-color:var(--border-2); font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.sc-tr.e-rentado { --sc-color:var(--s-rentado); } .sc-tr.e-contactado { --sc-color:var(--s-contactado); } .sc-tr.e-descartado { --sc-color:var(--s-descartado); }
.sc-src { display:flex; align-items:center; gap:9px; min-width:0; }
.sc-src > i { width:9px; height:9px; flex-shrink:0; background:var(--sc-color); }
.sc-src b { display:block; font-size:13.5px; }
.sc-src small { font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--sc-color); }
.sc-ago { font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.sc-tr.e-contactado .sc-ago, .sc-tr.e-descartado .sc-ago { color:var(--sc-color); }
.sc-big { font-family:var(--font-display); font-size:18px; font-feature-settings:'tnum'; }
.sc-mono { font-family:var(--font-mono); font-size:11.5px; }
.sc-mono.dim { color:var(--muted); }
.sc-cov { display:flex; flex-direction:column; gap:4px; color:var(--ink); text-decoration:none; }
.sc-cov b { font-family:var(--font-mono); font-size:10.5px; }
.sc-cov i { display:block; height:4px; background:var(--accent-soft); }
.sc-cov em { display:block; height:4px; background:var(--ink); }
.sc-cov.bajo b { color:var(--s-contactado); }
.sc-cov.bajo em { background:var(--s-contactado); }
.sc-cov:hover b { text-decoration:underline; }
.sc-alert { list-style:none; background:var(--surface); border:1px solid var(--border); padding:6px 16px; }
.sc-alert li { padding:7px 0; font-size:13px; border-bottom:1px solid var(--border); display:flex; gap:8px; }
.sc-alert li:last-child { border-bottom:none; }
.sc-alert li::before { content:'▲'; color:var(--s-contactado); font-size:10px; margin-top:3px; }
.sc-alert li.off::before { content:'■'; color:var(--s-descartado); }

/* ── Acceso (1b): tarjeta centrada sobre trama de tinta ───────────────────── */
.login-shell {
  display:grid; grid-template-columns:1fr; place-items:center; position:relative; padding:80px 16px 40px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 28px),var(--blue);
}
.login-intro { position:absolute; top:24px; left:28px; padding:0; background:none; overflow:visible; }
.login-intro::before, .intro-copy, .intro-footer { display:none; }
.login-brand .brand-mark { width:24px; height:24px; }
.brand-lockup strong { font-size:18px; }
.brand-lockup small { display:none; }
.login-main { padding:0; width:100%; }
.login-main > .login-card {
  max-width:420px; margin:0 auto; padding:36px; background:var(--surface); gap:20px;
}
.login-main > .login-card .login-card { max-width:none; }
.login-foot { font-size:12px; }
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:84px !important; }
.pw-toggle {
  position:absolute; top:50%; right:6px; transform:translateY(-50%); height:32px; padding:0 10px;
  border:none; background:transparent; color:var(--muted); font-family:var(--font-ui); font-size:12px; font-weight:600; cursor:pointer;
}
.pw-caps {
  margin-top:7px; padding:6px 9px; background:var(--r-contactado); color:var(--s-contactado);
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.pw-caps::before { content:'▲ '; }
@media (max-width: 860px) {
  .login-shell { grid-template-columns:1fr; padding:72px 16px 32px; }
  .login-intro { top:22px; left:20px; }
  .login-main > .login-card { padding:28px 22px; }
  .login-card input, .submit-button { height:50px; }
}

/* El detalle de tarea vive en el panel lateral: mismos campos que .tk-side. */
.tk-aside-body h2 { font-family:var(--font-display); font-size:22px; font-weight:500; line-height:1.2; color:var(--ink); }
.tk-aside-body label {
  display:block; margin-bottom:6px; color:var(--faint);
  font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.tk-aside-body input, .tk-aside-body select, .tk-aside-body textarea {
  width:100%; padding:8px 10px; border:1px solid var(--border-2); background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:13px; outline:none;
}
.tk-aside-body textarea { min-height:120px; resize:vertical; font-family:var(--font-mono); font-size:11.5px; line-height:1.7; }
.tk-aside-body input:focus, .tk-aside-body select:focus, .tk-aside-body textarea:focus { border-color:var(--accent); }
.tk-aside-body .tk-check label { display:flex; font-family:var(--font-ui); font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); }
.tk-aside-body .tk-check input { width:15px; height:15px; padding:0; }

/* Mercado comparable en la ficha (listing.js, cargarMercado). Fuera de .fx-cols
   porque vive fuera de #detail; el padding repite el de .fx-cols para alinear. */
/* El margen negativo se come el padding inferior de .fx-cols (40px; 90px en
   móvil, que es el hueco de la barra fija) para dejar el mismo gap de 14px. */
.mk { padding:0 24px 40px; margin-top:-26px; }
.mk-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px; }
.mk-datos { display:flex; flex-direction:column; gap:10px; min-width:0; }
.mk-mapa { position:relative; min-height:280px; border:1px solid var(--border); background:var(--bg); }
#mkMap { position:absolute; inset:0; }
@media (max-width: 700px) {
  .mk { padding:0 12px 90px; margin-top:-78px; }
  .mk-grid { grid-template-columns:1fr; }
}

/* Ubicación de la ficha (ubicacion.js): MapLibre sin su hoja de estilos. Estas cuatro
   reglas `maplibregl-*` son lo único que el motor necesita para acomodar el lienzo y el
   marcador; el resto de su CSS son controles que aquí no se usan. */
.ub-mapa { position:relative; height:340px; border:1px solid var(--border); background:var(--bg); }
#ubMap { position:absolute; inset:0; }
.maplibregl-map { overflow:hidden; -webkit-tap-highlight-color:transparent; }
.maplibregl-canvas { position:absolute; left:0; top:0; outline:none; }
.maplibregl-canvas-container.maplibregl-interactive { cursor:grab; }
.maplibregl-marker { position:absolute; top:0; left:0; will-change:transform; }
/* MapLibre mide este elemento para saber si "su" CSS cargó; sin la regla avisa en
   consola en cada mapa. No se ve nunca: es un canario, no un color del sistema. */
.maplibregl-canary { background-color:salmon; }
/* El aviso de "usa ctrl + rueda" de cooperativeGestures. */
.maplibregl-cooperative-gesture-screen {
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  padding:16px; background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .4s;
}
.maplibregl-cooperative-gesture-screen.maplibregl-show { opacity:.9; }
.maplibregl-mobile-message { display:none; }
@media (hover:none) { .maplibregl-desktop-message { display:none; } .maplibregl-mobile-message { display:block; } }
.maplibregl-control-container { display:none; }
.ub-cruz { cursor:crosshair; }
/* El rombo va en ::after: MapLibre coloca el marcador con `transform` sobre el propio
   elemento, y girarlo ahí giraría también su traslación (el pin caía fuera del mapa). */
.ub-pin { width:18px; height:18px; }
.ub-pin::after { content:''; position:absolute; inset:0; background:var(--accent); border:3px solid var(--surface); outline:1px solid var(--accent); rotate:45deg; }
.ub-zoom { position:absolute; top:12px; right:12px; z-index:2; display:flex; flex-direction:column; border:1px solid var(--border-2); background:var(--surface); }
.ub-zoom button { width:32px; height:32px; border:none; background:transparent; color:var(--ink); font-size:17px; line-height:1; cursor:pointer; }
.ub-zoom button + button { border-top:1px solid var(--border-2); }
.ub-zoom button:hover { background:var(--accent-soft); }
/* La atribución del mapa de comparables, que no tiene pie propio. */
.ub-attr { position:absolute; right:0; bottom:0; z-index:2; padding:2px 6px; background:var(--surface); font-size:10px; color:var(--muted); }
.ub-attr a { color:var(--muted); }
.ub-pie { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:11.5px; color:var(--faint); }
.ub-pie .fx-btn { height:30px; font-size:12.5px; }
.ub-pie .fx-btn.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ub-pie span { margin-left:auto; }
.ub-pie span a { color:var(--muted); }

/* Fichas PDF guardadas (listing.js): la General y una por cliente o por nombre. */
.fx-vers { border-top:1px solid var(--border); padding-top:10px; display:flex; flex-direction:column; gap:4px; }
.fx-vers h2 { margin-bottom:4px; }
.fx-ver { display:flex; align-items:center; gap:8px; min-height:30px; padding:0 6px; border:1px solid transparent; }
.fx-ver.on { border-color:var(--accent); background:var(--accent-soft); }
.fx-ver-n { border:none; background:transparent; padding:0; color:var(--ink); font-family:var(--font-mono); font-size:11.5px; font-weight:700; cursor:pointer; text-align:left; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-ver-n:hover { color:var(--accent); }
.fx-ver small { flex:1; min-width:0; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-ver-pdf { height:22px; padding:0 8px; border:1px solid var(--border-2); background:var(--surface); color:var(--ink); font-family:var(--font-mono); font-size:10px; font-weight:700; cursor:pointer; }
.fx-ver-pdf:hover { border-color:var(--accent); color:var(--accent); }
.fx-ver-del { width:22px; height:22px; border:none; background:transparent; color:var(--faint); font-size:15px; cursor:pointer; }
.fx-ver-del:hover { color:var(--s-rechazado); }
.fx-vers .fx-asignar { margin-top:4px; }
textarea.base-in { resize:vertical; }
.fx-tag { display:inline-flex; align-items:center; height:36px; padding:0 10px; border:1px dashed var(--border-2); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
/* Quién lleva la cuenta de cada cliente al que se propuso la propiedad. */
.fx-resp { width:22px; height:22px; font-size:9px; font-style:normal; }
.fx-proc > span small { display:block; font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }

/* ── Dedos, no cursor ────────────────────────────────────────────────────────
   El mínimo de 44 px no depende del ancho de la pantalla: una laptop con
   pantalla táctil también lo necesita, y por eso esto va por `pointer`, no por
   `max-width`. Tiene que ser lo ÚLTIMO del archivo: a igual especificidad gana
   el que va después, y el rediseño v0.5 se agregó abajo de este bloque y lo dejó
   sin efecto (botones de 32 px en el teléfono) hasta el 2026-10-08. Lo que se
   agregue a este archivo va ARRIBA de aquí. Las pestañas no están: ya miden 52 px
   de alto y su relleno lo decide el bloque de ≤900 px. */
/* Clientes: lo anotado durante una presentación, dentro de la celda de notas. */
.cl-nota-pres { font-weight:700; color:var(--ink); }

/* Contacto del inmueble en la ficha: rol y nombre arriba, teléfono y correo abajo. */
.fx-cto { display:grid; grid-template-columns:128px minmax(0,1fr) 28px; gap:6px; padding:8px 0; border-top:1px solid var(--border); }
.fx-cto .cto-in {
  width:100%; min-width:0; padding:7px 9px; border:1px solid var(--border-2); background:var(--surface);
  color:var(--ink); font-family:var(--font-ui); font-size:13px; outline:none;
}
.fx-cto .cto-in:focus { border-color:var(--accent); }
.fx-cto [data-k="correo"] { grid-column:2 / -1; }
.fx-cto .cto-del { border:none; background:transparent; color:var(--faint); font-size:15px; cursor:pointer; }
.fx-cto .cto-del:hover { color:var(--s-rechazado); }
.fx-cto .cto-wa { grid-column:1 / -1; }
.fx-cto .cto-wa:empty { display:none; }
.fx-add .cto-add { padding:7px 12px; }

/* ── Propiedad: anuncios fusionados y posibles duplicados ─────────────────────
   La tarjeta del tablero (rango de precio y cuántos anuncios junta), la sección de la
   ficha y la página duplicados.html. El renglón `.dp-fila` lo pinta propiedad.js. */
.card-price.rango { flex-wrap:wrap; row-gap:0; }
.card-price.rango strong { font-size:16px; }
.card-a { font-family:var(--font-mono); font-size:10px; color:var(--muted); }
.card-dup {
  display:inline-block; margin-top:6px; padding:2px 6px; border:1px solid var(--border-2);
  font-family:var(--font-mono); font-size:10px; color:var(--ink); letter-spacing:.02em;
}
.dp-fila {
  display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:10px 0; border-top:1px solid var(--border);
}
.dp-fila.baja { opacity:.6; }
.dp-foto { width:84px; height:62px; object-fit:cover; background:var(--bg); border:1px solid var(--border); display:block; }
.dp-txt { min-width:0; display:flex; flex-direction:column; gap:3px; }
.dp-precio b { font-family:var(--font-display); font-size:18px; font-weight:500; font-feature-settings:'tnum'; }
.dp-precio span { font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-left:6px; }
.dp-tit { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-meta { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-meta b { color:var(--ink); font-weight:700; }
.dp-meta i { font-style:normal; color:var(--ink); }
.dp-acc { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.dp-main { max-width:1100px; gap:14px; }
.dp-main .pg-head { margin-bottom:0; }
.dp-sep { width:1px; height:20px; background:var(--border-2); margin:0 6px; }
.dp-par { background:var(--surface); border:1px solid var(--border); padding:12px 16px 4px; margin-bottom:14px; }
.dp-par.hecho { opacity:.55; }
.dp-par-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:10px; }
.dp-par-acc { display:flex; gap:6px; }
.dp-senal { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.dp-pag { font-family:var(--font-mono); font-size:11px; color:var(--muted); }
#dpPaginas { display:flex; align-items:center; justify-content:center; gap:12px; }
#dpPaginas:empty { display:none; }
@media (max-width: 640px) {
  .dp-fila { grid-template-columns:64px minmax(0,1fr); }
  .dp-foto { width:64px; height:48px; }
  .dp-acc { grid-column:1 / -1; justify-content:flex-start; }
  .dp-tit, .dp-meta { white-space:normal; }
}

@media (pointer: coarse) {
  .th-btn { width: 44px; height: 44px; }
  .btn-ghost { height: 44px; padding: 0 18px; }
  .topbar-search .search-box { height: 44px; }
}