/* ════════════════════════════════════════════════════════════
   BROQUER — Design System  ·  Edición "Canon"
   REVISIÓN 2026-08-b — "Canon" (dirección oficial del rediseño):
   azul manda, blanco respira, negro precisa. Estructura #081C4E,
   acción #0A5DE0, tinta #0B0B0F. Vidrio esmerilado, hairlines 1px,
   radios continuos 22-28, sombras de luz real, Inter con tracking
   apretado. Acentos semánticos verde/naranja/rosa. La paleta de
   datos es CATEGÓRICA y VIVA (azul, verde, naranja, rosa, violeta,
   cian, amarillo): en gráficas y chats el color diferencia
   conceptos — nunca ocho azules. Regla de oro intacta: solo VALORES.

   HISTÓRICO — REVISIÓN 2026-08 — "Blanca": mundo blanco a la Zillow con un solo
   azul de acción #0D6BF0, tinta grafito #1B2733, Bricolage Grotesque
   (display) + Figtree (interfaz), semánticos verde/ámbar/cantera y
   paleta de datos contenida. Regla de oro intacta: solo VALORES.
   (Histórico: Edición "Navarro")
   Token-driven. Única fuente de verdad visual de la plataforma.

   Lenguaje: blanco dominante (70%), azul marino #00143B como
   ESTRUCTURA (nav, footer, cards oscuras, botón primario) y azul
   royal #1240A0 como ACCIÓN (links, foco, estados activos,
   acentos). Tipografía única de interfaz: Manrope. Instrument
   Serif existe como --font-serif y es EXCLUSIVA de marketing/
   landing: nunca en tablas, filtros, formularios, menús ni
   módulos densos.

   REGLA DE ORO DE ESTA HOJA: los nombres de variable NO cambian.
   Solo se reasignan sus VALORES a la piel nueva. Todo módulo que
   ya consume var(--…) se rediseña solo, sin tocar su markup.

   REVISIÓN 2026-07-b — "Lienzo blanco":
   El fondo de la app deja de ser azul pálido y pasa a BLANCO PURO.
   · --paper #F4F7FD → #FFFFFF (body de index y de todos los módulos).
   · --paper-2 #EDF2FB → #F1F5FC (inset/hover: ahora sí contrasta).
   · --shell #F4F7FE → #F7F9FE y los inputs pasan a usarlo como
     relleno: sobre blanco puro un campo blanco no se encuentra.
   · Hairlines un punto más firmes (--line, --line-2, --line-3) para
     que la card siga leyéndose como card sobre fondo blanco.
   Ningún nombre de variable cambia: los módulos se actualizan solos.

   REVISIÓN 2026-07 — "Navarro":
   Piel derivada por muestreo directo de la referencia visual
   aprobada. Cero cambios estructurales: solo se reasignan valores
   de color. Geometría, tipografía, escala, motion y componentes
   quedan idénticos a la edición Premium.

   · Navy más profundo y más azul: #071A3D → #00143B.
     Sidebar #04132F → #000D28. Navy medio #0E2E68 → #032873
     (el navy de banda de la referencia).
   · Azul de acción de brillante a royal profundo:
     #2563D9 → #1240A0. Pressed #174EA6 → #0B2E78.
     Lift #3978F6 → #3A6FD8. Canvas #EAF2FF → #E8F0FE.
   · Canvas más frío: #F8FAFC → #F4F7FD. Inset → #EDF2FB.
   · Tinta y grises al eje navy: --ink #00143B, --ink-2 #1B2C4F,
     --mute #4A5875, --mute-2 #8592AB.
   · Hairlines: --line #E6ECF6, --line-2 #D8E1EF.
   · Sombras y overlay de modal retintados de rgba(7,26,61,…) a
     rgba(0,20,59,…) para no ensuciar el navy nuevo.
   · --sky-blue-on-dark #8FBAFF → #7FA8F0 (contraste 7.53:1 sobre
     el navy nuevo).

   Contraste verificado sobre esta paleta (todos ≥ WCAG AA):
     ink/paper 16.8 · ink-2/paper 12.9 · mute/paper 6.7
     azul/blanco 9.3 · blanco/navy 18.1 · blanco/navy-mid 13.5
     on-dark/navy 7.5 · lift/navy 3.8 (no-texto)

   HISTÓRICO (edición Premium, vigente salvo lo de arriba):
   · Geometría: botón 8, input 10, card 16, card grande 22,
     modal 24. Altura de control 48. Sidebar 252, topbar 72.
   · Motion 120/180/280ms.
   · Se ELIMINÓ la capa "Premium" duplicada del final del archivo
     que peleaba con los componentes base. Un componente = una
     definición.
   · .bk-table th ya no lleva text-transform: uppercase
     (mayúscula decorativa, prohibida por DESIGN.md).
   · El alias legacy --sky apunta a var(--sky-blue): un solo azul.
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&display=swap');

:root {
  /* ── Surfaces (blanco dominante) ──────────── */
  --paper:   #FFFFFF;     /* fondo del body — BLANCO PURO (rev. 2026-07) */
  --paper-2: #F4F6FB;     /* canvas / inset / hover / chips */
  --bone:    #FFFFFF;     /* superficie de card */
  --shell:   #F5F7FC;     /* relleno de input / superficie media */

  /* ── Ink (azul marino como texto, no negro) ─ */
  --ink:     #0B0B0F;     /* texto principal — negro canon */
  --ink-2:   #2A3142;
  --ink-3:   #57607A;     /* secundario */
  --mute:    #57607A;     /* gris-azul secundario legible */
  --mute-2:  #8A93A9;
  --mute-3:  #C6CCDA;

  /* ── Hairlines (bordes del sistema) ───────── */
  --line:     #E7EBF4;    /* borde claro / disabled */
  --line-2:   #DBE1EE;    /* borde / input */
  --line-3:   #BEC7DA;

  /* ── Accents (AZUL de acción) ─────────────── */
  --forest:   #0A5DE0;    /* alias histórico → azul de acción canon */
  --forest-2: #084BB8;    /* azul pressed (hover) */
  --forest-soft: rgba(10,93,224,0.10);

  /* Marca Broquer */
  --sky-navy:       #081C4E;  /* estructura canon: nav, footer, botón primario */
  --sky-navy-mid:   #10307E;
  --sky-navy-deep:  #050F2E;  /* sidebar, fondos navy profundos */
  --sky-blue:       #0A5DE0;  /* acción canon */
  --sky-blue-press: #084BB8;
  --sky-blue-lift:  #6F9FF2;  /* azul brillante, solo estados activos */
  --sky-canvas:     #E9F0FD;

  --warn:     #B34E0B;   /* naranja canon */
  --warn-soft:rgba(243,116,13,0.14);
  --danger:   #D42A62;   /* rosa canon */
  --danger-soft:rgba(212,42,98,0.12);
  --success:  #0E9F6E;   /* verde canon */
  --success-soft:rgba(14,159,110,0.12);
  --info:     #0A5DE0;
  --info-soft:rgba(10,93,224,0.10);

  /* ── Geometry ─────────────────────────────── */
  --r-xs: 8px;     /* micro (check, tag) */
  --r-sm: 12px;    /* BOTÓN */
  --r:    14px;    /* INPUT / contenedor base */
  --r-lg: 22px;    /* CARD */
  --r-xl: 26px;    /* CARD GRANDE */
  --r-modal: 28px; /* MODAL */
  --r-pill: 999px;

  /* ── Espaciado (escala base 4px) ────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-10: 48px;
  --sp-12: 64px;
  --sp-16: 80px;
  --sp-20: 96px;
  --sp-24: 112px;   /* sección vertical desktop */

  /* ── Sombras (tinte navy, nunca negro fuerte) ── */
  --shadow-xs: 0 1px 2px rgba(8,28,78,.05);
  --shadow-sm: 0 2px 6px rgba(8,28,78,.05), 0 10px 28px rgba(8,28,78,.06);
  --shadow:    0 4px 12px rgba(8,28,78,.06), 0 18px 44px rgba(8,28,78,.09);
  --shadow-md: 0 6px 16px rgba(8,28,78,.07), 0 22px 52px rgba(8,28,78,.10);
  --shadow-lg: 0 10px 24px rgba(8,28,78,.08), 0 32px 88px rgba(8,28,78,.12);
  --shadow-xl: 0 14px 32px rgba(8,28,78,.10), 0 42px 110px rgba(8,28,78,.16);

  /* ── Contrato de layout (anchos canónicos) ── */
  --page-max: 1280px;   /* módulos de datos (tablas, cards, dashboards) */
  --form-max: 920px;    /* módulos de formulario / columna estrecha */
  --pad-x: 40px;        /* gutter lateral canónico */
  --sidebar-w: 252px;
  --topbar-h: 72px;

  /* ── Alturas de control ─────────────────── */
  --h-sm:  40px;
  --h:     48px;
  --h-lg:  56px;
  --touch-min: 44px;

  /* ── Anillo de foco ─────────────────────── */
  --focus:        0 0 0 4px rgba(10,93,224,0.20);
  --focus-forest: 0 0 0 4px rgba(10,93,224,0.20);
  --focus-danger: 0 0 0 4px rgba(212,42,98,0.16);

  /* ── Vidrio esmerilado (canon) ──────────── */
  --glass-bg:   rgba(255,255,255,0.62);  /* vidrio claro sobre canvas */
  --glass-brd:  rgba(255,255,255,0.55);
  --glass-navy: rgba(8,28,78,0.55);      /* vidrio azul sobre foto/hero */
  --glass-blur: blur(22px) saturate(170%);

  /* ── Z-index (alineado con app-shell.js) ── */
  --z-base:    1;
  --z-nav:     60;
  --z-fab:     80;
  --z-popover: 100;
  --z-overlay: 200;
  --z-drawer:  201;
  --z-modal:   240;
  --z-toast:   320;

  /* ── Tipografía ─────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; /* alias histórico → NO es monoespaciada */
  /* Serif editorial: EXCLUSIVA de landing/marketing. Prohibida en
     tablas, filtros, formularios, menús y módulos densos. */
  --font-serif: 'Inter', system-ui, sans-serif; /* la serif salió del sistema: una sola familia, Inter */

  /* Escala tipográfica.
     Hero/landing usa --fs-hero. La app arranca en --fs-h1 (32-36). */
  --fs-hero: 64px;       /* landing H1 (clamp aplicado en .bk-hero__title) */
  --fs-display: 42px;    /* landing H2 / número protagonista */
  --fs-h1: 36px;         /* app page title */
  --fs-h2: 24px;         /* app section title */
  --fs-h3: 20px;
  --fs-h5: 17px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-caption: 11px;    /* micro — tablas / UI ultra densa */

  /* Labels */
  --fs-label-1: 15px;
  --fs-label-2: 13px;
  --fs-label-3: 12px;

  --lh-hero: 0.92;
  --lh-display: 46px;
  --lh-h1: 42px;
  --lh-h2: 30px;
  --lh-h3: 26px;
  --lh-body: 24px;
  --lh-sm: 20px;
  --lh-xs: 16px;

  --lh-tight: 1.05;
  --lh-snug:  1.3;
  --lh:       1.55;
  --lh-loose: 1.65;

  /* ── Motion ─────────────────────────────── */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .12s;
  --dur: .18s;
  --dur-slow: .28s;

  /* ── Legacy aliases (NO TOCAR: el markup existente depende de
        estos. Mapean nombres viejos a los tokens actuales) ──── */
  --navy: var(--ink);
  --navy-mid: var(--ink-2);
  --navy-light: var(--ink-3);
  --teal: var(--forest);
  --teal2: var(--forest-2);
  --teal-dark: var(--forest);
  --teal-glow: rgba(13,107,240,0.12);
  --white: var(--bone);
  --gray-100: var(--paper-2);
  --gray-200: var(--line);
  --gray-400: var(--mute-2);
  --gray-600: var(--mute);
  --text: var(--ink);
  --screen-bg: var(--paper);
  --bg: var(--paper);
  --bg2: var(--bone);
  --bg3: var(--paper-2);
  --sf: var(--bone);
  --sf2: var(--paper-2);
  --bd: var(--line);
  --bd2: var(--line-2);
  --txt: var(--ink);
  --mut: var(--mute);
  --mut2: var(--mute-2);
  --r-old: var(--r);
  --r2: var(--r);
  --r3: var(--r-sm);
  --amber: var(--warn);   --amber2: var(--warn);
  --rose:  var(--danger); --rose2:  var(--danger);
  --violet:var(--forest); --violet2:var(--forest-2);
  --emerald:var(--success); --emerald2:var(--success);
  --sky:   var(--sky-blue); --sky2: var(--sky-blue-press);
  --fs-base: var(--fs-body);
  --fs-label: var(--fs-xs);
  --fs-title: var(--fs-h3);
  --warn-bg: var(--warn-soft);
  --danger-bd: var(--danger);
}

/* ════════════════════════════════════════════════════════════
   RESET / BASE
   ════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.014em;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 1024px) { :root { --pad-x: 24px; } }
@media (max-width: 720px)  { :root { --pad-x: 16px; } }
::selection { background: var(--sky-blue); color: #FFFFFF !important; }

h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.14;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.026em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p { line-height: var(--lh); color: var(--ink-2); font-weight: 400; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--forest); }

input, select, textarea, button {
  font-family: inherit;
  font-size: var(--fs-body);
  letter-spacing: inherit;
}

/* Foco visible accesible y consistente para todo componente del sistema */
.bk-btn:focus-visible,
.bk-chip:focus-visible,
.bk-input:focus-visible,
.bk-textarea:focus-visible,
.bk-select:focus-visible,
.bk-icon-btn:focus-visible,
.bk-tab:focus-visible,
.bk-seg__btn:focus-visible,
.bk-menu__item:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Respeta a quien reduce movimiento — quality floor */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* iOS input zoom guard */
@media (max-width: 768px) {
  input, select, textarea { font-size: max(16px, var(--fs-body)) !important; }
}

/* ────────────────────────────────────────────────────────────
   GUARDAS MOVIL / iOS
   En WKWebView (la app de iPhone) no hay barra de navegador, asi que
   cualquier ampliacion accidental se queda pegada: el usuario no tiene
   como volver al tamano normal. Estas reglas evitan las tres causas:
   1) el autoinflado de texto de iOS cuando un contenedor desborda,
   2) el zoom por doble tap,
   3) el desborde horizontal que dispara (1).
   ──────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 768px) {
  /* clip en vez de hidden: hidden rompe position:sticky en los
     encabezados de tabla y en las barras de filtros. */
  html, body { overflow-x: clip; }
  body { touch-action: manipulation; }
  iframe, video, canvas { max-width: 100%; }
}

/* ── Pantalla fija al tacto ──────────────────────────────────
   En cualquier dispositivo táctil (teléfono o tableta):
   1) sin rebote elástico en los bordes ni jalón para recargar,
   2) el cuerpo solo se desplaza en vertical — nada de arrastres
      laterales que muevan la pantalla completa.
   Los contenedores con scroll horizontal propio (tablas, chips
   de filtros) no se afectan: definen su propio touch-action.
   El escritorio queda intacto. */
@media (pointer: coarse) {
  html, body { overscroll-behavior: none; }
  body { touch-action: pan-y; }
}

/* ════════════════════════════════════════════════════════════
   PRIMITIVAS DE SUPERFICIE
   ════════════════════════════════════════════════════════════ */
.bk-paper { background: var(--paper); }
.bk-bone  { background: var(--bone); }
.bk-hairline { border: 1px solid var(--line); }
.bk-divider { height: 1px; background: var(--line); border: 0; margin: var(--sp-5) 0; }

/* Card: blanco, borde suave, radio 16, padding 24.
   La sombra NO es el default — solo donde agregue jerarquía. */
.bk-card {
  background: var(--bone);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
}
.bk-card--pad   { padding: var(--sp-6); }
.bk-card--pad-sm{ padding: var(--sp-4); }
.bk-card--raise { box-shadow: var(--shadow-sm); }
.bk-card--lg    { border-radius: var(--r-xl); }
.bk-card--hover { transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.bk-card--hover:hover { box-shadow: var(--shadow); border-color: var(--line-3); transform: translateY(-1px); }

/* Card navy — menos del 15% de los módulos deben usarla */
.bk-card--navy {
  background: var(--sky-navy);
  border-color: rgba(255,255,255,0.10);
  color: var(--bone);
}
.bk-card--navy h1, .bk-card--navy h2, .bk-card--navy h3 { color: var(--bone); }
.bk-card--navy p { color: rgba(255,255,255,0.72); }

/* ════════════════════════════════════════════════════════════
   BOTÓN
   Primario = navy sólido. Secundario = blanco con borde.
   Máximo un primario dominante por zona.
   ════════════════════════════════════════════════════════════ */
.bk-btn {
  appearance: none;
  border: 1px solid transparent;
  background: var(--sky-navy);
  color: var(--bone);
  height: var(--h);
  padding: 0 var(--sp-6);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.bk-btn:hover  { background: var(--sky-navy-mid); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.bk-btn:active { transform: none; box-shadow: none; }
.bk-btn:disabled,
.bk-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none;
}
.bk-btn svg { flex-shrink: 0; }

/* Azul de acción — CTA de conversión, no el default de la app */
.bk-btn--forest { background: var(--forest); }
.bk-btn--forest:hover { background: var(--forest-2); }

/* Secundario */
.bk-btn--ghost { background: var(--bone); color: var(--ink); border-color: var(--line-2); font-weight: 600; }
.bk-btn--ghost:hover { background: var(--bone); border-color: var(--line-3); color: var(--ink); }

/* Texto — sin caja */
.bk-btn--quiet { background: transparent; color: var(--forest-2); border-color: transparent; font-weight: 600; }
.bk-btn--quiet:hover { background: var(--sky-canvas); box-shadow: none; }

.bk-btn--danger { background: transparent; color: var(--danger); border-color: var(--danger-soft); }
.bk-btn--danger:hover { background: var(--danger-soft); box-shadow: none; }

.bk-btn--sm  { height: var(--h-sm); padding: 0 var(--sp-4); font-size: var(--fs-xs); }
.bk-btn--lg  { height: var(--h-lg); padding: 0 var(--sp-7); font-size: var(--fs-body); }
.bk-btn--block { width: 100%; }

/* Botón en estado cargando */
.bk-btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.bk-btn.is-loading::after {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--bone);
  animation: bk-spin .7s linear infinite;
}
.bk-btn--ghost.is-loading::after,
.bk-btn--quiet.is-loading::after { color: var(--ink); }

@keyframes bk-spin { to { transform: rotate(360deg); } }

/* Botón de icono */
.bk-icon-btn {
  width: var(--touch-min); height: var(--touch-min);
  border-radius: var(--r-sm);
  background: var(--bone);
  border: 1px solid var(--line-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bk-icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.bk-icon-btn--sm { width: 32px; height: 32px; }

/* ════════════════════════════════════════════════════════════
   FORMULARIO — campo, input, textarea, select, check, switch
   Altura mínima 48. Etiquetas SIEMPRE visibles.
   ════════════════════════════════════════════════════════════ */
.bk-field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.bk-field:last-child { margin-bottom: 0; }
.bk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.bk-field-row.is-one  { grid-template-columns: 1fr; }
.bk-field-row.is-three{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) { .bk-field-row, .bk-field-row.is-three { grid-template-columns: 1fr; } }

.bk-label {
  font-size: var(--fs-label-2);
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-bottom: var(--sp-1);
  display: block;
}
.bk-hint { font-size: var(--fs-xs); color: var(--mute); margin-top: var(--sp-1); }

.bk-input,
.bk-textarea,
.bk-select {
  width: 100%;
  background: var(--shell);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bk-input  { height: var(--h); padding: 0 var(--sp-4); }
.bk-textarea { padding: var(--sp-3) var(--sp-4); min-height: 112px; line-height: var(--lh); resize: vertical; }
.bk-select {
  height: var(--h); padding: 0 var(--sp-8) 0 var(--sp-4);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23526078' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  cursor: pointer;
}
.bk-input:hover,
.bk-textarea:hover,
.bk-select:hover { background: var(--bone); }
.bk-input:focus,
.bk-textarea:focus,
.bk-select:focus { background: var(--bone); border-color: var(--forest); box-shadow: var(--focus); }
.bk-input::placeholder,
.bk-textarea::placeholder { color: var(--mute-2); }
.bk-input:disabled,
.bk-textarea:disabled,
.bk-select:disabled { background: var(--paper-2); color: var(--mute); cursor: not-allowed; }
.bk-input.is-error,
.bk-textarea.is-error,
.bk-select.is-error { border-color: var(--danger); }
.bk-input.is-error:focus,
.bk-textarea.is-error:focus { box-shadow: var(--focus-danger); }

/* Input con prefijo/sufijo (ej. $) */
.bk-input-affix { position: relative; }
.bk-input-affix__prefix,
.bk-input-affix__suffix {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-sm); color: var(--mute); pointer-events: none;
}
.bk-input-affix__prefix { left: var(--sp-4); }
.bk-input-affix__suffix { right: var(--sp-4); }
.bk-input-affix__prefix ~ .bk-input { padding-left: calc(var(--sp-4) + 14px); }

/* Checkbox */
.bk-check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); }
.bk-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.bk-check__box {
  width: 20px; height: 20px; border-radius: var(--r-xs);
  border: 1px solid var(--line-3); background: var(--bone);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.bk-check__box svg { opacity: 0; color: var(--bone); transition: opacity var(--dur-fast) var(--ease); }
.bk-check input:checked + .bk-check__box { background: var(--forest); border-color: var(--forest); }
.bk-check input:checked + .bk-check__box svg { opacity: 1; }
.bk-check input:focus-visible + .bk-check__box { box-shadow: var(--focus); }

/* Switch */
.bk-switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.bk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bk-switch__track {
  width: 44px; height: 26px; border-radius: var(--r-pill);
  background: var(--mute-3); position: relative; flex-shrink: 0;
  transition: background var(--dur) var(--ease);
}
.bk-switch__track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bone);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease);
}
.bk-switch input:checked + .bk-switch__track { background: var(--forest); }
.bk-switch input:checked + .bk-switch__track::after { transform: translateX(18px); }
.bk-switch input:focus-visible + .bk-switch__track { box-shadow: var(--focus); }

/* ════════════════════════════════════════════════════════════
   CHIP / BADGE
   chip = filtro / selección (interactivo)   badge = estado (estático)
   El badge NUNCA debe parecer botón.
   ════════════════════════════════════════════════════════════ */
.bk-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 34px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--bone); color: var(--ink-2);
  border: 1px solid var(--line-2);
  font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bk-chip:hover { border-color: var(--line-3); background: var(--paper-2); }
.bk-chip--forest { background: var(--forest); color: var(--bone); border-color: var(--forest); }
.bk-chip--forest:hover { background: var(--forest-2); border-color: var(--forest-2); }
.bk-chip--warn   { background: var(--warn-soft);   color: var(--warn);   border-color: transparent; }
.bk-chip--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.bk-chip--success{ background: var(--success-soft);color: var(--success);border-color: transparent; }
.bk-chip--info   { background: var(--info-soft);   color: var(--info);   border-color: transparent; }

.bk-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 26px; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption); line-height: var(--lh-xs); font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--paper-2); color: var(--mute);
}
.bk-badge--forest { background: var(--forest-soft); color: var(--forest-2); }
.bk-badge--warn   { background: var(--warn-soft);   color: var(--warn); }
.bk-badge--danger { background: var(--danger-soft); color: var(--danger); }
.bk-badge--success{ background: var(--success-soft);color: var(--success); }
.bk-badge--info   { background: var(--info-soft);   color: var(--info); }
.bk-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ════════════════════════════════════════════════════════════
   EYEBROW / ETIQUETAS / NÚMEROS
   ════════════════════════════════════════════════════════════ */
.bk-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-label-3);
  line-height: var(--lh-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--forest);
}
.bk-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.bk-mono { font-variant-numeric: tabular-nums; }
.bk-muted { color: var(--mute); }
/* Serif editorial — SOLO marketing/landing */
.bk-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.bk-serif em, .bk-em { font-family: var(--font-serif); font-style: italic; color: var(--forest); }

/* ════════════════════════════════════════════════════════════
   PAGE HEADER / SECTION HEADER
   ════════════════════════════════════════════════════════════ */
.bk-page-header { margin-bottom: var(--sp-7); }
.bk-page-header__eyebrow {
  font-family: var(--font-sans); font-size: var(--fs-label-3);
  line-height: var(--lh-xs); font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--forest); margin-bottom: var(--sp-2);
}
.bk-page-header__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.03em; line-height: var(--lh-h1); }
.bk-page-header__sub { font-size: var(--fs-sm); color: var(--mute); margin-top: var(--sp-2); line-height: var(--lh); max-width: 70ch; }

.bk-section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.bk-section-header h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-h2); letter-spacing: -0.026em; }
.bk-section-header a { font-size: var(--fs-sm); color: var(--forest-2); font-weight: 600; display: inline-flex; align-items: center; gap: var(--sp-1); }
.bk-section-header a:hover { color: var(--forest); }

/* ════════════════════════════════════════════════════════════
   TABS (subrayado)  /  SEGMENTED CONTROL (cápsula)
   ════════════════════════════════════════════════════════════ */
.bk-tabs { display: flex; gap: var(--sp-6); border-bottom: 1px solid var(--line-2); }
.bk-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--mute);
  padding: 0 0 var(--sp-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bk-tab:hover { color: var(--ink-2); }
.bk-tab.is-active { color: var(--ink); border-bottom-color: var(--forest); }

.bk-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); }
.bk-seg__btn {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); font-weight: 600; color: var(--mute);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bk-seg__btn:hover { color: var(--ink-2); }
.bk-seg__btn.is-active { background: var(--bone); color: var(--ink); box-shadow: var(--shadow-xs); }

/* ════════════════════════════════════════════════════════════
   DROPDOWN / MENU / TOOLTIP
   ════════════════════════════════════════════════════════════ */
.bk-menu {
  background: var(--bone); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: var(--sp-2); min-width: 220px;
  z-index: var(--z-popover);
}
.bk-menu__item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left; height: 40px;
  padding: 0 var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink-2);
  background: none; border: none; cursor: pointer; font-family: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.bk-menu__item:hover { background: var(--sky-canvas); color: var(--ink); }
.bk-menu__item--danger { color: var(--danger); }
.bk-menu__item--danger:hover { background: var(--danger-soft); }
.bk-menu__sep { height: 1px; background: var(--line); margin: var(--sp-1) 0; }

.bk-tooltip {
  background: var(--sky-navy); color: var(--bone);
  border-radius: var(--r); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-label-3); line-height: var(--lh-xs);
  max-width: 260px; box-shadow: var(--shadow);
  z-index: var(--z-popover);
}

/* ════════════════════════════════════════════════════════════
   TABLA
   Filas altas, encabezado discreto, números a la derecha.
   Sin mayúsculas decorativas (DESIGN.md).
   ════════════════════════════════════════════════════════════ */
.bk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bk-table th {
  text-align: left; font-family: var(--font-sans);
  font-size: var(--fs-caption); line-height: var(--lh-xs); font-weight: 700; letter-spacing: 0.03em;
  color: var(--mute); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
  background: var(--bone);
}
.bk-table--sticky th { position: sticky; top: 0; z-index: var(--z-base); }
.bk-table td { padding: var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.bk-table tr:last-child td { border-bottom: none; }
.bk-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.bk-table tbody tr:hover { background: var(--paper-2); }
.bk-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════
   MODAL / DIALOG
   ════════════════════════════════════════════════════════════ */
.bk-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(27,39,51,0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.bk-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.bk-modal {
  z-index: var(--z-modal);
  width: min(560px, 100%);
  max-height: calc(100dvh - 2 * var(--sp-8));
  background: var(--bone);
  border: 1px solid var(--line-2);
  border-radius: var(--r-modal);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(12px) scale(.98); opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.bk-overlay.is-open .bk-modal { transform: none; opacity: 1; }
.bk-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.bk-modal__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; letter-spacing: -0.02em; }
.bk-modal__body { padding: var(--sp-6) var(--sp-7); overflow-y: auto; }
.bk-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-7); border-top: 1px solid var(--line); flex-shrink: 0;
}
/* Variante hoja inferior (mobile sheet) */
@media (max-width: 640px) {
  .bk-overlay--sheet { align-items: flex-end; padding: 0; }
  .bk-overlay--sheet .bk-modal { width: 100%; max-width: 100%; border-radius: var(--r-modal) var(--r-modal) 0 0; transform: translateY(100%); }
  .bk-overlay--sheet.is-open .bk-modal { transform: none; }
  .bk-overlay--full .bk-modal { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   Ícono simple, título claro, texto corto, UNA acción primaria.
   ════════════════════════════════════════════════════════════ */
.bk-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--sp-12) var(--sp-6); gap: var(--sp-3);
}
.bk-empty__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sky-canvas); color: var(--forest);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-1);
}
.bk-empty__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; color: var(--ink); }
.bk-empty__text { font-size: var(--fs-sm); color: var(--mute); max-width: 44ch; line-height: var(--lh); }
.bk-empty__action { margin-top: var(--sp-3); }

/* ════════════════════════════════════════════════════════════
   ALERT / FEEDBACK INLINE
   ════════════════════════════════════════════════════════════ */
.bk-alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r);
  font-size: var(--fs-sm); line-height: var(--lh);
}
.bk-alert svg { flex-shrink: 0; margin-top: 1px; }
.bk-alert--error   { background: var(--danger-soft);  color: var(--danger); }
.bk-alert--warn    { background: var(--warn-soft);    color: var(--warn); }
.bk-alert--success { background: var(--success-soft); color: var(--success); }
.bk-alert--info    { background: var(--info-soft);    color: var(--info); }

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.bk-toast-stack {
  position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2);
  align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 2 * var(--sp-4));
}
.bk-toast {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill);
  background: var(--sky-navy); color: var(--bone);
  font-size: var(--fs-sm); font-weight: 500;
  box-shadow: var(--shadow-lg); pointer-events: auto;
  animation: bk-toast-in var(--dur-slow) var(--ease-out);
}
.bk-toast--success { background: var(--success); }
.bk-toast--error   { background: var(--danger); }
@keyframes bk-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════════════════════════
   SKELETON / SPINNER
   Skeletons sutiles en vez de spinners grandes.
   ════════════════════════════════════════════════════════════ */
.bk-skeleton {
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--line) 37%, var(--paper-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--r-sm);
  animation: bk-shimmer 1.4s ease infinite;
}
.bk-skeleton--text { height: 12px; margin: 6px 0; }
.bk-skeleton--title { height: 22px; width: 40%; }
.bk-skeleton--line { height: 12px; }
@keyframes bk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.bk-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--line-2); border-top-color: var(--forest);
  border-radius: 50%; animation: bk-spin .7s linear infinite;
}
.bk-spinner--forest { border-top-color: var(--forest); }
.bk-loading-row { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--mute); font-size: var(--fs-sm); }

/* ════════════════════════════════════════════════════════════
   MÉTRICAS / KPI
   Valor protagonista, etiqueta discreta. Mínimo 138px de alto.
   ════════════════════════════════════════════════════════════ */
.bk-metric {
  background: var(--bone); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: var(--sp-6);
  min-height: 138px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3);
}
.bk-metric__label { font-size: var(--fs-label-3); font-weight: 600; color: var(--mute); letter-spacing: 0.02em; }
.bk-metric__value { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-metric__delta { font-size: var(--fs-xs); font-weight: 600; display: inline-flex; align-items: center; gap: var(--sp-1); }
.bk-metric__delta--up { color: var(--success); }
.bk-metric__delta--down { color: var(--danger); }
.bk-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }

/* ════════════════════════════════════════════════════════════
   PROPERTY CARD / LEAD CARD
   ════════════════════════════════════════════════════════════ */
.bk-prop-card {
  background: var(--bone); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bk-prop-card:hover { box-shadow: var(--shadow); border-color: var(--line-3); transform: translateY(-1px); }
.bk-prop-card__media { aspect-ratio: 4 / 3; background: var(--paper-2); position: relative; overflow: hidden; }
.bk-prop-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.88) contrast(1.03) brightness(1.02); }
.bk-prop-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
.bk-prop-card__price { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-prop-card__title { font-size: var(--fs-sm); color: var(--ink-2); }
.bk-prop-card__meta  { font-size: var(--fs-xs); color: var(--mute); display: flex; gap: var(--sp-3); margin-top: var(--sp-1); }

.bk-lead-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bone); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur) var(--ease);
}
.bk-lead-card:hover { background: var(--paper-2); border-color: var(--line-3); }
.bk-lead-card__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--sky-canvas); color: var(--forest-2);
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: -0.01em;
}
.bk-lead-card__info { flex: 1; min-width: 0; }
.bk-lead-card__name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-lead-card__sub  { font-size: var(--fs-xs); color: var(--mute); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════
   SHELL — sidebar, topbar
   ════════════════════════════════════════════════════════════ */
.bk-sidebar {
  width: var(--sidebar-w);
  background: var(--sky-navy-deep);
  padding: var(--sp-5) var(--sp-3);
}
.bk-sb-link {
  height: var(--touch-min);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0 var(--sp-3);
  border-radius: var(--r);
  color: rgba(255,255,255,0.68);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bk-sb-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.bk-sb-link:hover { background: rgba(255,255,255,0.06); color: var(--bone); }
.bk-sb-link.is-active { background: rgba(255,255,255,0.11); color: var(--bone); font-weight: 600; }

.bk-topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--pad-x);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.bk-mobile-head { padding: var(--sp-4) var(--sp-5) var(--sp-3); }

/* ════════════════════════════════════════════════════════════
   UTILIDADES DE SCROLL / LAYOUT
   ════════════════════════════════════════════════════════════ */
.bk-scroll::-webkit-scrollbar { display: none; }
.bk-scroll { scrollbar-width: none; }
.bk-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.bk-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* ════════════════════════════════════════════════════════════
   BROQUER LOADER — aleta + ola minimalista
   Uso:
     <div class="bk-shark-loader" role="status" aria-label="Cargando">
       <svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
         <path class="bk-wave" d="M0,30 Q12,22 25,30 T50,30 T75,30 T100,30"/>
         <path class="bk-fin"  d="M0,28 C2,12 12,18 14,28 C10,24 5,26 0,28 Z"/>
       </svg>
     </div>
   ──────────────────────────────────────────────────────────── */
.bk-shark-loader {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--forest);
  width: 140px; height: 48px; margin: 0 auto;
}
.bk-shark-loader svg { width: 100%; height: 100%; overflow: visible; }
.bk-shark-loader .bk-wave {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; opacity: 0.32;
}
.bk-shark-loader .bk-fin {
  fill: currentColor;
  transform-origin: 8px 28px;
  animation: bk-shark-swim 2.4s ease-in-out infinite;
}
@keyframes bk-shark-swim {
  0%   { transform: translateX(0)   translateY(0)  rotate(0deg); }
  25%  { transform: translateX(28px) translateY(-3px) rotate(-4deg); }
  50%  { transform: translateX(56px) translateY(0)  rotate(0deg); }
  75%  { transform: translateX(28px) translateY(-3px) rotate(4deg); }
  100% { transform: translateX(0)   translateY(0)  rotate(0deg); }
}
.bk-shark-loader__text {
  display: block; margin-top: 6px;
  font-size: var(--fs-caption); color: var(--mute);
  font-family: var(--font-sans);
  letter-spacing: 0.01em; text-align: center;
}
.bk-shark-loader--col { flex-direction: column; height: auto; }

/* ════════════════════════════════════════════════════════════
   CAPA DE COMPATIBILIDAD + MARCA EXTERNA
   ─────────────────────────────────────────────────────────────
   Varios módulos legacy referencian nombres de token que NUNCA
   se definieron en esta hoja (--silver, --wh, --green, --bdr,
   --sh-1/2, --font, etc.). Al no existir, sus var() no resolvían
   y los bordes/fondos/sombras caían a "initial" → módulos con
   apariencia rota. Aquí se definen esos nombres como ALIAS hacia
   el token correcto del sistema, de modo que los módulos quedan
   visualmente unificados SIN tocar su markup. NO inventar colores
   nuevos: todo apunta a un token real.

   Regla para el futuro: si un módulo necesita un nombre nuevo,
   se agrega aquí como alias — nunca se hardcodea un hex.
   ════════════════════════════════════════════════════════════ */
:root {
  /* Familia (alias corto usado por propiedades.html) */
  --font: var(--font-sans);

  /* Fondo navy tenue — para chips/badges "navy" (contactos/leads roles) */
  --navy-soft: rgba(8, 65, 154, 0.06);

  /* Superficies / bordes legacy (verificador, contratos, otros) */
  --wh:      var(--bone);      /* superficie blanca de card   */
  --silver:  var(--paper-2);   /* canvas / inset / fondo suave */
  --silver2: var(--line-2);    /* borde de card / input        */
  --bdr:     var(--line-2);    /* borde genérico               */
  --navy3:   var(--sky-blue-press); /* hover oscuro de botón azul */

  /* Sombras legacy (contactos, leads) */
  --sh-1: var(--shadow-sm);
  --sh-2: var(--shadow);

  /* Estados legacy pale/bold → tokens semánticos del sistema.
     (Los sufijos p = pale/fondo, b = bold/borde-texto.) */
  --green:  var(--success);      --greenp: var(--success-soft);  --greenb: var(--success);
  --red:    var(--danger);       --redp:   var(--danger-soft);   --redb:   var(--danger);
  --amberp: var(--warn-soft);    --amberb: var(--warn);
  --bluep:  var(--forest-soft);  --blueb:  var(--forest);
  --tealp:  var(--forest-soft);  /* teal → azul de acción para no salir del sistema */

  /* ── MARCA EXTERNA (única excepción a la paleta navy+azul) ──
     Usar EXCLUSIVAMENTE en el botón/icono de la integración
     correspondiente (conectar WhatsApp, conectar Facebook).
     Prohibido usarlos como acento general del módulo. */
  --brand-whatsapp:       #25D366;
  --brand-whatsapp-press: #1EB855;
  --brand-whatsapp-soft:  rgba(37, 211, 102, 0.10);
  --brand-facebook:       #1877F2;
  --brand-facebook-press: #145FCC;

  /* ── Sidebar (los consume app-shell.js) ────────────────────
     Decision de Chava: el drawer usa el azul BRILLANTE de accion
     (--sky-blue) con destello blanco arriba. Contrasta contra el
     hero navy del inicio y contra el canvas blanco.
     Los módulos van en blanco y en negritas, agrupados en bloques
     translúcidos: la separación se hace con aire y con paneles,
     nunca con líneas. */
  --sb-bg:      var(--sky-blue);
  --sb-panel:   rgba(255,255,255,0.09);
  --sb-hover:   rgba(255,255,255,0.14);
  --sb-active:  rgba(255,255,255,0.22);
  --sb-edge:    rgba(255,255,255,0.16);
  --sb-txt:     #FFFFFF;
  --sb-txt-dim: rgba(255,255,255,0.66);
  --sb-glow:    0 8px 24px rgba(4,12,40,0.35);

  /* Acento azul claro para texto sobre superficies navy (heros oscuros).
     El azul de acción #1240A0 no contrasta sobre --sky-navy. */
  --sky-blue-on-dark: #8FB0F5;

  /* ════════════════════════════════════════════════════════════
     CANVAS DE APLICACION
     --paper sigue siendo BLANCO porque lo consumen superficies
     flotantes (topbar, dropdowns, popovers, menus): si se tine,
     se tinen ellas. El lienzo de la app es su propio token.
     Decision de Chava (canon): el fondo de la app es BLANCO PURO
     en todas partes. Las cards se leen por su hairline de 1px y
     su sombra de luz real, no por tinte del fondo.
     ════════════════════════════════════════════════════════════ */
  --canvas: #FFFFFF;

  /* ════════════════════════════════════════════════════════════
     PALETA DE DATOS  (--data-1 … --data-8)
     NO es paleta de interfaz. Prohibida en botones, links, foco,
     bordes, fondos de card y headings: ahi el azul de accion debe
     seguir siendo el unico azul de accion.
     Se usa SOLO donde el color ES el dato: series de graficas,
     etapas de pipeline, origenes de lead, categorias y tags.
     Ordenada por distinguibilidad: los primeros cuatro son los
     mas separados entre si porque casi toda grafica usa 2-4 series.
     Decision de Chava: la paleta es VIVA y variada — una grafica
     jamas debe verse como ocho tonos de azul.
     ════════════════════════════════════════════════════════════ */
  --data-1: #0A5DE0;   /* azul     — serie principal (= azul de accion) */
  --data-2: #12A150;   /* verde */
  --data-3: #F7740D;   /* naranja */
  --data-4: #ED4C86;   /* rosa */
  --data-5: #7A4DF0;   /* violeta */
  --data-6: #0AA6C8;   /* cian */
  --data-7: #D9A406;   /* amarillo */
  --data-8: #64708C;   /* gris azulado — "otros" */

  /* Rellenos translucidos de la misma rampa (areas, heatmaps, fondos
     de badge). Mismo indice = mismo color, solo que al 12%. */
  --data-1-soft: rgba(10, 93, 224, 0.12);
  --data-2-soft: rgba(18, 161, 80, 0.13);
  --data-3-soft: rgba(247, 116, 13, 0.13);
  --data-4-soft: rgba(237, 76, 134, 0.13);
  --data-5-soft: rgba(122, 77, 240, 0.12);
  --data-6-soft: rgba(10, 166, 200, 0.13);
  --data-7-soft: rgba(217, 164, 6, 0.15);
  --data-8-soft: rgba(100, 112, 140, 0.12);

  /* ── Etapas de pipeline ────────────────────────────────────
     No es una rampa categorica: es ORDINAL. Va de frio a
     comprometido, cierra en verde (ganado) y descarta en gris
     (muerto). El color dice en que parte del embudo estas sin
     que tengas que leer la etiqueta. */
  --etapa-nuevo:      #0AA6C8;
  --etapa-activo:     #0A5DE0;
  --etapa-contactado: #7A4DF0;
  --etapa-cerrado:    #12A150;
  --etapa-descartado: #8A93A9;
  --etapa-nuevo-soft:      rgba(10, 166, 200, 0.13);
  --etapa-activo-soft:     rgba(10, 93, 224, 0.12);
  --etapa-contactado-soft: rgba(122, 77, 240, 0.12);
  --etapa-cerrado-soft:    rgba(18, 161, 80, 0.13);
  --etapa-descartado-soft: rgba(138, 147, 169, 0.13);

  /* ── Modulo WhatsApp ───────────────────────────────────────
     Unico modulo donde el verde de marca deja de ser solo el
     boton de conectar y pasa a ser el acento del modulo: ahi el
     verde ES el contexto. El punto critico es que la burbuja del
     AGENTE y la de BROQ no se confundan — antes eran dos azules.
     Ahora: verde = lo mandaste tu, violeta = lo mando Broq. */
  --wa-canvas:   #EEF3FB;   /* lienzo del hilo: frio, hermano del --canvas */
  --wa-out:      #CFEEDD;   /* burbuja del agente: verde CLARO, texto oscuro
                               (el verde solido #1EA65A con blanco daba 2.8:1) */
  --wa-out-ink:  #0B4A2F;   /* texto sobre la burbuja verde (8.4:1) */
  --wa-out-meta: #2F5F45;   /* hora/estado sobre la burbuja verde (5.9:1) */
  --wa-ia:       #6D28D9;   /* violeta Broq: texto/acentos de sus burbujas */
  --wa-ia-soft:  #F0EAFB;   /* burbuja de Broq: violeta claro, texto en tinta */
}

/* ════════════════════════════════════════════════════════════════
   BROQUER — WhatsApp domain rules · Canon
   Reglas de dominio del chat; consumen exclusivamente tokens Canon.
   No definen paleta, tipografía, geometría ni chrome alternativos.
   ════════════════════════════════════════════════════════════════ */
/* WhatsApp-specific semantic surfaces composed from Canon. */
body[data-app="whatsapp"],
body[data-app="whatsapp2"] {
  --wa-canvas: var(--paper-2);
  --wa-out: var(--sky-canvas);
  --wa-out-ink: var(--ink);
  --wa-out-meta: var(--mute);
  --wa-ia: var(--sky-blue);
  --wa-ia-soft: var(--paper);
}

/* Dense conversation UI: only domain-specific adjustments. */
body[data-app="whatsapp"] .w2-row--out .w2-bubble,
body[data-app="whatsapp2"] .w2-row--out .w2-bubble {
  border-color: var(--line-2);
}

body[data-app="whatsapp"] .w2-row--out.is-ia .w2-bubble,
body[data-app="whatsapp2"] .w2-row--out.is-ia .w2-bubble {
  border-color: var(--sky-blue-lift);
}

body[data-app="whatsapp"] .w2-conv__unread,
body[data-app="whatsapp"] .w2-conv__ia,
body[data-app="whatsapp2"] .w2-conv__unread,
body[data-app="whatsapp2"] .w2-conv__ia {
  background: var(--sky-blue);
}

body[data-app="whatsapp"] .w2-app,
body[data-app="whatsapp2"] .w2-app {
  border-color: var(--line-2);
  box-shadow: var(--shadow-xs);
}

body[data-app="whatsapp"] .w2-tab,
body[data-app="whatsapp"] .w2-chip,
body[data-app="whatsapp2"] .w2-tab,
body[data-app="whatsapp2"] .w2-chip {
  font-weight: 600;
}

body[data-app="whatsapp"] .w2-tab.is-active,
body[data-app="whatsapp2"] .w2-tab.is-active {
  color: var(--sky-blue);
  border-bottom-width: 2px;
}

body[data-app="whatsapp"] .w2-numero-row__dot.is-on,
body[data-app="whatsapp2"] .w2-numero-row__dot.is-on {
  background: var(--success);
}

/* BROQUER-PREMIUM-PROPERTIES-CONTACTS
   Product-composition pass: Propiedades + Contactos.
   Scoped by data-app; no business logic or markup ownership changes. */

/* ── Propiedades: operational real-estate catalog ─────────── */
body[data-app="propiedades"] .props-head {
  padding: var(--sp-7) var(--pad-x) var(--sp-5);
  background: var(--paper);
  border-bottom: 0;
}
body[data-app="propiedades"] .props-head__top {
  align-items: center;
  margin-bottom: var(--sp-5);
}
body[data-app="propiedades"] .props-head__eyebrow {
  color: var(--sky-blue);
  font-weight: 700;
  letter-spacing: 0.04em;
}
body[data-app="propiedades"] .props-head__title h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
body[data-app="propiedades"] .props-head__count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--sp-3);
  margin-left: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--mute);
}
body[data-app="propiedades"] .btn-new-prop,
body[data-app="propiedades"] .btn-import-eb {
  height: var(--h);
  border-radius: var(--r-sm);
  font-weight: 700;
}
body[data-app="propiedades"] .btn-new-prop {
  background: var(--sky-blue);
  box-shadow: var(--shadow-xs);
}
body[data-app="propiedades"] .btn-new-prop:hover { background: var(--sky-blue-press); }
body[data-app="propiedades"] .btn-import-eb {
  background: var(--bone);
  border: 1px solid var(--line-2);
  margin-right: 0;
}
body[data-app="propiedades"] .props-toolbar {
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
body[data-app="propiedades"] .props-search-wrap,
body[data-app="propiedades"] .props-toolbar select,
body[data-app="propiedades"] .props-filter-est-btn,
body[data-app="propiedades"] .props-price-wrap {
  height: var(--h);
  border-radius: var(--r);
  border-color: var(--line-2);
  background-color: var(--bone);
  box-shadow: none;
}
body[data-app="propiedades"] .props-search-wrap { min-width: 300px; }
body[data-app="propiedades"] .props-search-wrap:focus-within,
body[data-app="propiedades"] .props-price-wrap:focus-within {
  border-color: var(--sky-blue);
  box-shadow: var(--focus);
}
body[data-app="propiedades"] .props-grid {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--pad-x) var(--sp-12);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-5);
}
body[data-app="propiedades"] .prop-card {
  border-color: var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  background: var(--bone);
}
body[data-app="propiedades"] .prop-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-3);
  box-shadow: var(--shadow);
}
body[data-app="propiedades"] .prop-card-img { aspect-ratio: 16 / 10; }
body[data-app="propiedades"] .prop-card-img img {
  filter: saturate(.92) contrast(1.02);
}
body[data-app="propiedades"] .prop-card:hover .prop-card-img img { transform: scale(1.015); }
body[data-app="propiedades"] .prop-card-body { padding: var(--sp-5); }
body[data-app="propiedades"] .prop-card-loc {
  margin-bottom: var(--sp-2);
  color: var(--mute);
  font-weight: 600;
}
body[data-app="propiedades"] .prop-card-title {
  min-height: 0;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
}
body[data-app="propiedades"] .prop-card-price-row { margin-bottom: var(--sp-4); }
body[data-app="propiedades"] .prop-card-price {
  font-size: var(--fs-h2);
  font-weight: 800;
}
body[data-app="propiedades"] .prop-card-specs {
  gap: var(--sp-4);
  padding-top: var(--sp-3);
  color: var(--mute);
}
body[data-app="propiedades"] .prop-card-actions {
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  background: var(--paper-2);
  border-top-color: var(--line);
}
body[data-app="propiedades"] .prop-act-btn {
  height: var(--h-sm);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-weight: 600;
}
body[data-app="propiedades"] .prop-act-btn:hover {
  background: var(--bone);
  box-shadow: var(--shadow-xs);
}
body[data-app="propiedades"] .props-empty {
  margin: var(--sp-6) auto;
  max-width: 620px;
  padding: var(--sp-12) var(--sp-7);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-xl);
  background: var(--paper-2);
}

/* ── Contactos: dense CRM list, not a stack of floating cards ─ */
body[data-app="contactos"] .page-head {
  position: relative;
  top: auto;
  z-index: auto;
  padding: var(--sp-7) var(--pad-x) 0;
  border-bottom: 0;
  background: var(--paper);
}
body[data-app="contactos"] .page-head__crumbs {
  margin-bottom: var(--sp-2);
  color: var(--sky-blue);
  font-weight: 700;
}
body[data-app="contactos"] .page-head__row { margin-bottom: var(--sp-5); }
body[data-app="contactos"] .page-head h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
body[data-app="contactos"] .page-head__count {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  background: var(--paper-2);
  border: 0;
  letter-spacing: 0;
}
body[data-app="contactos"] .head-search {
  width: 100%;
  max-width: none;
  height: var(--h);
  margin-bottom: var(--sp-2);
  border-radius: var(--r);
  border-color: var(--line-2);
  background: var(--paper-2);
}
body[data-app="contactos"] .head-search:focus-within {
  background: var(--bone);
  border-color: var(--sky-blue);
  box-shadow: var(--focus);
}
body[data-app="contactos"] .filters-row {
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-2);
}
body[data-app="contactos"] .filtro-select,
body[data-app="contactos"] .contacts-select-all {
  height: var(--h-sm);
  border-radius: var(--r-sm);
  background-color: var(--bone);
  border-color: var(--line-2);
  font-weight: 600;
}
body[data-app="contactos"] .tabs {
  gap: var(--sp-6);
  border-bottom-color: var(--line-2);
}
body[data-app="contactos"] .ftab {
  padding: var(--sp-3) 0;
  font-weight: 600;
}
body[data-app="contactos"] .ftab.active {
  color: var(--ink);
  border-bottom-color: var(--sky-blue);
  font-weight: 700;
}
body[data-app="contactos"] .list {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--pad-x) var(--sp-20);
}
body[data-app="contactos"] .contact-card {
  min-height: 72px;
  margin-bottom: 0;
  padding: var(--sp-3) var(--sp-2);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  transform: none;
}
body[data-app="contactos"] .contact-card:first-child {
  border-top: 1px solid var(--line);
}
body[data-app="contactos"] .contact-card:hover {
  transform: none;
  background: var(--paper-2);
  border-color: var(--line);
}
body[data-app="contactos"] .contact-card.is-selected {
  background: var(--sky-canvas);
  border-color: var(--line);
}
body[data-app="contactos"] .avatar {
  width: 40px;
  height: 40px;
  font-weight: 700;
}
body[data-app="contactos"] .contact-name {
  font-weight: 650;
  font-size: var(--fs-sm);
}
body[data-app="contactos"] .contact-meta { margin-top: var(--sp-1); }
body[data-app="contactos"] .role-badge,
body[data-app="contactos"] .tag-chip {
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
}
body[data-app="contactos"] .quick-acts { gap: var(--sp-1); }
body[data-app="contactos"] .qa {
  width: var(--h-sm);
  height: var(--h-sm);
  border-radius: var(--r-sm);
  border-color: transparent;
  background: transparent;
}
body[data-app="contactos"] .qa:hover {
  border-color: var(--line-2);
  background: var(--bone);
  box-shadow: var(--shadow-xs);
  color: var(--sky-blue);
}
body[data-app="contactos"] .empty {
  margin: var(--sp-6) auto;
  max-width: 620px;
  padding: var(--sp-12) var(--sp-7);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-xl);
  background: var(--paper-2);
}

@media (max-width: 720px) {
  body[data-app="propiedades"] .props-head,
  body[data-app="contactos"] .page-head { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  body[data-app="propiedades"] .props-toolbar { padding: var(--sp-2); }
  body[data-app="propiedades"] .props-search-wrap { min-width: 100%; }
  body[data-app="propiedades"] .props-grid { padding: var(--sp-4); grid-template-columns: 1fr; }
  body[data-app="propiedades"] .prop-card-img { aspect-ratio: 16 / 9; }
  body[data-app="contactos"] .list { padding: var(--sp-2) var(--sp-4) var(--sp-20); }
  body[data-app="contactos"] .contact-card {
    margin-bottom: var(--sp-2);
    padding: var(--sp-4);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: var(--bone);
  }
  body[data-app="contactos"] .contact-card:first-child { border-top: 1px solid var(--line-2); }
}

/* BROQUER-PREMIUM-UX-COMPLETION */
/* Final product-composition pass. These are visual-only overrides scoped to
   active modules. They do not own markup, navigation, IDs, APIs or behavior. */

/* ── Leads · dense CRM + calm pipeline ─────────────────────── */
body[data-app="leads"] .page-head {
  position: relative;
  top: auto;
  z-index: auto;
  padding: var(--sp-7) var(--pad-x) 0;
  background: var(--paper);
  border-bottom: 0;
}
body[data-app="leads"] .page-head__row { margin-bottom: var(--sp-5); }
body[data-app="leads"] .page-head h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
body[data-app="leads"] .page-head__count {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  background: var(--paper-2);
  border: 0;
  letter-spacing: 0;
}
body[data-app="leads"] .head-search {
  width: 100%;
  max-width: none;
  height: var(--h);
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-4);
  border-radius: var(--r);
  border-color: var(--line-2);
  background: var(--paper-2);
}
body[data-app="leads"] .head-search:focus-within {
  background: var(--bone);
  border-color: var(--sky-blue);
  box-shadow: var(--focus);
}
body[data-app="leads"] .view-seg {
  min-height: var(--h-sm);
  border-color: var(--line-2);
}
body[data-app="leads"] .view-seg button { min-height: 32px; }
body[data-app="leads"] .filters-row {
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
body[data-app="leads"] .filtro-select {
  height: var(--h-sm);
  border-radius: var(--r-sm);
  border-color: var(--line-2);
  background-color: var(--bone);
  font-weight: 600;
}
body[data-app="leads"] .tabs {
  gap: var(--sp-6);
  border-bottom-color: var(--line-2);
}
body[data-app="leads"] .ftab {
  padding: var(--sp-3) 0;
  font-weight: 600;
}
body[data-app="leads"] .ftab.active {
  color: var(--ink);
  border-bottom-color: var(--sky-blue);
  font-weight: 700;
}
body[data-app="leads"] .add-btn,
body[data-app="leads"] .import-btn {
  height: var(--h);
  border-radius: var(--r-sm);
  font-weight: 700;
}
body[data-app="leads"] .add-btn { background: var(--sky-blue); }
body[data-app="leads"] .add-btn:hover { background: var(--sky-blue-press); opacity: 1; }
body[data-app="leads"] .import-btn { border-color: var(--line-2); }
body[data-app="leads"] .kanban {
  gap: var(--sp-3);
  padding: var(--sp-4) var(--pad-x) var(--sp-20);
}
body[data-app="leads"] .kb-col {
  border-color: var(--line-2);
  background: var(--paper-2);
  box-shadow: none;
}
body[data-app="leads"] .kb-col__head { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
body[data-app="leads"] .kb-card {
  border-color: var(--line-2);
  box-shadow: var(--shadow-xs);
}
body[data-app="leads"] .kb-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-3);
  box-shadow: var(--shadow-sm);
}
body[data-app="leads"] .list {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--pad-x) var(--sp-20);
}
@media (min-width: 721px) {
  body[data-app="leads"] .list .contact-card {
    min-height: 72px;
    margin-bottom: 0;
    padding: var(--sp-3) var(--sp-2);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    transform: none;
  }
  body[data-app="leads"] .list .contact-card:first-child { border-top: 1px solid var(--line); }
  body[data-app="leads"] .list .contact-card:hover {
    transform: none;
    background: var(--paper-2);
  }
}
body[data-app="leads"] .det-tab.active {
  color: var(--ink);
  border-bottom-color: var(--sky-blue);
}
body[data-app="leads"] .det-tab.active .n {
  background: var(--sky-blue);
  color: var(--bone);
}
body[data-app="leads"] .btn-primary,
body[data-app="leads"] .vinculo-form button,
body[data-app="leads"] .fab { background: var(--sky-blue); }
body[data-app="leads"] .empty {
  max-width: 620px;
  margin: var(--sp-6) auto;
  padding: var(--sp-12) var(--sp-7);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-xl);
  background: var(--paper-2);
}

/* ── Contratos · professional document workflow ───────────── */
body[data-app="contratos"] #wrap {
  max-width: var(--form-max);
  padding: var(--sp-7) var(--pad-x) var(--sp-16);
}
body[data-app="contratos"] .doc-picker {
  gap: var(--sp-2);
  padding: var(--sp-2);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
body[data-app="contratos"] .doc-picker-btn,
body[data-app="contratos"] .doc-new-btn {
  min-height: var(--h);
  padding-top: 0;
  padding-bottom: 0;
  border-radius: var(--r-sm);
}
body[data-app="contratos"] .doc-picker-btn {
  border-color: var(--line-2);
  background: var(--bone);
}
body[data-app="contratos"] .doc-new-btn {
  border-color: var(--sky-blue);
  background: var(--sky-blue);
}
body[data-app="contratos"] .doc-new-btn:hover { background: var(--sky-blue-press); filter: none; }
body[data-app="contratos"] .doc-menu {
  border-color: var(--line-2);
  border-radius: var(--r-lg);
}
body[data-app="contratos"] .doc-menu-item:hover { background: var(--paper-2); }
body[data-app="contratos"] .card {
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
  border-color: var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: none;
}
body[data-app="contratos"] .card-title {
  color: var(--ink-2);
  border-bottom-color: var(--line);
  letter-spacing: 0;
}
body[data-app="contratos"] .f input,
body[data-app="contratos"] .f select,
body[data-app="contratos"] .f textarea {
  background: var(--shell);
  border-color: var(--line-2);
}
body[data-app="contratos"] .f input:focus,
body[data-app="contratos"] .f select:focus,
body[data-app="contratos"] .f textarea:focus {
  background: var(--bone);
  border-color: var(--sky-blue);
  box-shadow: var(--focus);
}
body[data-app="contratos"] .gen-btn {
  min-height: var(--h-lg);
  padding: 0 var(--sp-6);
  border-radius: var(--r-sm);
  background: var(--sky-blue);
  font-weight: 700;
}
body[data-app="contratos"] .gen-btn:hover { background: var(--sky-blue-press); }
body[data-app="contratos"] .pick-btn {
  min-height: var(--h-sm);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bone);
  color: var(--sky-blue);
  letter-spacing: 0;
}
body[data-app="contratos"] .pick-btn:hover {
  border-color: var(--sky-blue);
  background: var(--sky-canvas);
  color: var(--sky-blue-press);
}
body[data-app="contratos"] .clausulas-section {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
body[data-app="contratos"] .btn-add-clausula {
  border-color: var(--line-3);
  color: var(--sky-blue);
}

/* ── ISR · calm, high-trust form ──────────────────────────── */
body[data-app="isr"] .page-scroll {
  max-width: var(--form-max);
  padding: var(--sp-6) var(--pad-x) var(--sp-20);
}
body[data-app="isr"] .card {
  padding: var(--sp-6) !important;
  margin-bottom: var(--sp-4) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-lg) !important;
  background: var(--bone) !important;
  box-shadow: none !important;
}
body[data-app="isr"] .card-label {
  margin-bottom: var(--sp-4);
  color: var(--ink-2) !important;
  font-size: var(--fs-label-2) !important;
  letter-spacing: 0;
}
body[data-app="isr"] .field input,
body[data-app="isr"] .field select,
body[data-app="isr"] .field textarea {
  min-height: var(--h);
  background: var(--shell) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r) !important;
}
body[data-app="isr"] .field input:focus,
body[data-app="isr"] .field select:focus,
body[data-app="isr"] .field textarea:focus {
  background: var(--bone) !important;
  border-color: var(--sky-blue) !important;
  box-shadow: var(--focus) !important;
}
body[data-app="isr"] .terreno-help-btn {
  border-color: var(--line-2);
  border-style: solid;
  border-radius: var(--r-sm);
  color: var(--sky-blue);
}
body[data-app="isr"] .terreno-help {
  border-left-color: var(--sky-blue);
  background: var(--paper-2);
}
body[data-app="isr"] .isr-calc-btn,
body[data-app="isr"] .btn-calc,
body[data-app="isr"] .calc-btn {
  min-height: var(--h-lg) !important;
  border-radius: var(--r-sm) !important;
  background: var(--sky-blue) !important;
  color: var(--bone) !important;
  font-weight: 700 !important;
}

/* ── Bandeja · keep the three-lane model, refine density ─── */
body[data-app="bandeja"] .bx-list { width: 340px; }
body[data-app="bandeja"] .bx-search input {
  border-color: var(--line-2);
  border-radius: var(--r);
  background: var(--paper-2);
}
body[data-app="bandeja"] .bx-conv.is-active::before { background: var(--sky-blue); }
body[data-app="bandeja"] .bx-th-head { min-height: var(--h-lg); }
body[data-app="bandeja"] .bx-score {
  box-shadow: var(--shadow-xs);
}

/* ── Finanzas · toolbar + data surfaces ───────────────────── */
body[data-app="finanzas"] .fin-scroll {
  max-width: var(--page-max);
  padding: var(--sp-6) var(--pad-x) var(--sp-16);
}
body[data-app="finanzas"] .fin-acciones-head {
  gap: var(--sp-2);
  padding: var(--sp-2);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
body[data-app="finanzas"] .fin-acciones-head .bk-btn { min-height: var(--h); }
body[data-app="finanzas"] .bk-card--raise {
  box-shadow: none;
  border-color: var(--line-2);
}
body[data-app="finanzas"] .fin-kpis .bk-card { min-height: 124px; }
body[data-app="finanzas"] .fin-periodo {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

/* ── Cumplimiento · legal context, not a navy hero ───────── */
body[data-app="cumplimiento"] .cp-scroll {
  max-width: var(--page-max);
  padding: var(--sp-6) var(--pad-x) var(--sp-16);
}
body[data-app="cumplimiento"] .cp-ley {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: none;
}
body[data-app="cumplimiento"] .cp-ley__tile {
  background: var(--sky-canvas);
  color: var(--sky-blue);
}
body[data-app="cumplimiento"] .cp-ley__eyebrow,
body[data-app="cumplimiento"] .cp-ley strong {
  color: var(--sky-blue);
}
body[data-app="cumplimiento"] .cp-ley p { color: var(--ink-2); }
body[data-app="cumplimiento"] .cp-ley__pie {
  border-top-color: var(--line);
  color: var(--mute);
}
body[data-app="cumplimiento"] .cp-ley__link {
  color: var(--ink);
  border-color: var(--line-2);
  border-radius: var(--r-sm);
}
body[data-app="cumplimiento"] .cp-ley__link:hover { background: var(--paper-2); }
body[data-app="cumplimiento"] .cp-kpi {
  border-color: var(--line-2);
  box-shadow: none;
}

/* ── Facebook Ads · product tool, not a marketing landing ── */
.fa-wrap {
  max-width: var(--page-max);
  padding: var(--sp-7) var(--pad-x) var(--sp-20);
}
.fa-wrap .fa-hero {
  padding: 0 0 var(--sp-6);
  margin-bottom: var(--sp-5);
  overflow: visible;
  background: var(--paper);
  border: 0;
  border-radius: 0;
}
.fa-wrap .fa-hero::after { display: none; }
.fa-wrap .fa-eyebrow {
  color: var(--sky-blue);
  font-weight: 700;
}
.fa-wrap .fa-hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  max-width: 760px;
}
.fa-wrap .fa-hero h1 span { color: var(--ink); }
.fa-wrap .fa-tabs {
  gap: var(--sp-6);
  padding: 0;
  margin-bottom: var(--sp-5);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
}
.fa-wrap .fa-tab {
  flex: 0 0 auto;
  padding: 0 0 var(--sp-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.fa-wrap .fa-tab.active {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--sky-blue);
  box-shadow: none;
}
.fa-wrap .fa-card,
.fa-wrap .fa-conn-card,
.fa-wrap .fa-banner {
  border-color: var(--line-2);
  box-shadow: none;
}
.fa-wrap .fa-card { padding: var(--sp-6); }
.fa-wrap .fa-field input,
.fa-wrap .fa-field textarea {
  min-height: var(--h);
  background: var(--shell);
  border-color: var(--line-2);
}
.fa-wrap .fa-field input:focus,
.fa-wrap .fa-field textarea:focus {
  background: var(--bone);
  border-color: var(--sky-blue);
  box-shadow: var(--focus);
}
.fa-wrap .fa-btn {
  min-height: var(--h);
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
}
.fa-wrap .fa-btn-primary { background: var(--sky-blue); }
.fa-wrap .fa-btn-primary:hover { background: var(--sky-blue-press); }

/* ── Video · creation workspace ───────────────────────────── */
body[data-app="video"] .vid-scroll {
  max-width: var(--page-max);
  padding: var(--sp-6) var(--pad-x) var(--sp-16);
}
body[data-app="video"] .vid-buscar { max-width: 760px; }
body[data-app="video"] .bk-card--raise {
  box-shadow: none;
  border-color: var(--line-2);
}
body[data-app="video"] .vid-ed-card,
body[data-app="video"] .vid-fmt {
  border-color: var(--line-2);
  border-radius: var(--r-lg);
}
body[data-app="video"] .vid-ed-card.is-sel,
body[data-app="video"] .vid-fmt.is-sel {
  border-color: var(--sky-blue);
  box-shadow: var(--focus);
}

/* ── Mi sitio · configuration, not a card gallery ─────────── */
body[data-app="mi-sitio"] .ms-body {
  max-width: var(--form-max);
  padding: var(--sp-6) var(--pad-x) var(--sp-20);
}
body[data-app="mi-sitio"] .ms-activar {
  padding: var(--sp-5) var(--sp-6);
  border-color: var(--line-2);
  background: var(--paper-2);
}
body[data-app="mi-sitio"] .ms-section { margin-bottom: var(--sp-8); }
body[data-app="mi-sitio"] .ms-plantillas { gap: var(--sp-4); }
body[data-app="mi-sitio"] .ms-plantilla {
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-xs);
}
body[data-app="mi-sitio"] .ms-plantilla:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
body[data-app="mi-sitio"] .ms-plantilla.is-active {
  border-color: var(--sky-blue);
  box-shadow: var(--focus);
}
body[data-app="mi-sitio"] .ms-testi-item { border-color: var(--line-2); }

/* ── Equipo · permissions as a calm admin list ────────────── */
body[data-app="equipo"] .eq-scroll {
  max-width: var(--page-max);
  padding: var(--sp-6) var(--pad-x) var(--sp-16);
}
body[data-app="equipo"] .bk-card--raise {
  box-shadow: none;
  border-color: var(--line-2);
}
body[data-app="equipo"] .eq-lista > .bk-card {
  border-color: var(--line-2);
  box-shadow: none;
}
body[data-app="equipo"] .eq-perm { padding: var(--sp-3) 0; }

/* ── Admin · internal console without an independent navy skin ─ */
.ac-root .ac-top {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.ac-root .ac-top__brand,
.ac-root .ac-top__back { color: var(--ink); }
.ac-root .ac-top__brand svg { opacity: 1; color: var(--sky-blue); }
.ac-root .ac-top__back {
  border: 1px solid var(--line-2);
  box-shadow: none;
  border-radius: var(--r-sm);
}
.ac-root .ac-top__back:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.ac-root .ac-range {
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.ac-root .ac-range__btn { color: var(--mute); }
.ac-root .ac-range__btn:hover { color: var(--ink); }
.ac-root .ac-range__btn.is-on {
  background: var(--bone);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.ac-root .ac-card,
.ac-root .ac-kpi,
.ac-root .ac-tablewrap { border-color: var(--line-2); }
.ac-root .ac-wrap { padding-top: var(--sp-7); }

@media (max-width: 720px) {
  body[data-app="leads"] .page-head,
  body[data-app="contratos"] #wrap,
  body[data-app="isr"] .page-scroll,
  body[data-app="finanzas"] .fin-scroll,
  body[data-app="cumplimiento"] .cp-scroll,
  .fa-wrap,
  body[data-app="video"] .vid-scroll,
  body[data-app="mi-sitio"] .ms-body,
  body[data-app="equipo"] .eq-scroll {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  body[data-app="leads"] .kanban,
  body[data-app="leads"] .list { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  body[data-app="contratos"] .card,
  body[data-app="isr"] .card { padding: var(--sp-5) !important; }
  body[data-app="finanzas"] .fin-acciones-head {
    background: transparent;
    border: 0;
    padding: 0;
  }
  .fa-wrap .fa-layout { grid-template-columns: 1fr; }
}