:root {
  --bg: #0d0f14;
  --bg-soft: #12151c;
  --panel: #161a23;
  --panel-2: #1d222d;
  --panel-3: #262c39;
  --panel-4: #40454f;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f2f4f8;
  --muted: #9aa3b2;
  --muted-2: #646d7d;
  --accent: #eceff2;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  /* Tokens de marca/acción del sistema de diseño (ver docs/diseno/sistema-diseno-trasnego.md).
     Úsalos en lugar de hex sueltos para que cambiar el color en 1 sitio cambie todo. */
  --brand: #3b82f6;
  --brand-rgb: 59, 130, 246; /* --brand en RGB para tintes translúcidos: rgba(var(--brand-rgb), α). Mantener sincronizado con --brand. */
  --brand-contrast: #fff;    /* texto sobre fondos --brand (botones primarios). */
  --brand-strong: #2563eb;
  /* El azul corporativo #1E3F80 (docs/estado/branding/marca-trasnego.md) para la acción principal.
     El panel lo repite en admin.css bajo .cara-clara; juntarlos es el paso 5 (22-sep-2026). */
  --accion: #1e3f80;
  --accion-hover: #173268;
  --link: #7eb0ff;
  /* Azul de Qobrix para TEXTO/iconos (no rellenos). En OSCURO va claro para que se lea; en CLARO, el azul normal. */
  --brand-ink: #7eb0ff;
  --link-hover: #a9caff;
  --whatsapp: #25d366;
  /* Botón RELLENO de WhatsApp (16-oct-2026, fundador: «todos los botones que llevan al WhatsApp, en verde WhatsApp»).
     En oscuro, el verde de WhatsApp con letra oscura (7,5:1); en claro, un verde más hondo con letra blanca (5:1). */
  --wa-btn-bg: #25d366;
  --wa-btn-bg-hover: #3ee07a;
  --wa-btn-text: #052e16;
  /* Área LEGAL (Abogado): violeta. Colores SÓLIDOS que se adaptan al tema para que
     el formulario y las tarjetas se vean nítidos (no lavados) en claro y oscuro. */
  --legal-surface: #191521;
  --legal-surface-2: #221c30;
  --legal-border: #3a2d52;
  --legal-border-strong: #5c3f88;
  --legal-title: #eaddff;
  --legal-label: #cbb0f2;
  --legal-sub: #a98fd0;
  --legal-accent: #a855f7;
  --legal-field-text: #f3e8ff;
  /* Chips/botones SEMÁNTICOS (estado) que se adaptan al tema. Reutilizables en todo
     el sistema (Legal, Agenda, Meta, Qobrix). En OSCURO: fondo tenue + texto claro. */
  --ok-bg: rgba(34, 197, 94, 0.14);    --ok-text: #86efac;  --ok-border: rgba(34, 197, 94, 0.42);
  --warn-bg: rgba(251, 146, 60, 0.14); --warn-text: #fdba74; --warn-border: rgba(251, 146, 60, 0.44);
  --info-bg: rgba(59, 130, 246, 0.16); --info-text: #93c5fd; --info-border: rgba(59, 130, 246, 0.46);
  --danger-bg: rgba(220, 38, 38, 0.16); --danger-text: #fca5a5; --danger-border: rgba(220, 38, 38, 0.44);
  --table-zebra: rgba(255, 255, 255, 0.022);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  /* --radius-*: la escala ÚNICA vive en el :root SERENO (el que manda, más abajo).
     La copia que había aquí (24/18/12/9) era código muerto y confundía (tanda R). */
  --font-body: "SF Pro Text", "Aptos", "IBM Plex Sans", "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-display: "SF Pro Display", "Aptos Display", "IBM Plex Sans", "Segoe UI Variable", "Segoe UI", sans-serif;

  /* --- Shell base (Paso 3): viran a claro --- */
  /* SERENO oscuro: la barra lateral se ACLARA respecto al chat (antes era casi negra,
     #0a0c10, más oscura que todo lo demás y pesaba mucho). Ahora manda la conversación. */
  --shell-sidebar: #171d26;
  --shell-bg: #10141b;
  --shell-chat: #10141b;
  /* --- Blancos con transparencia (Paso 2): valor OSCURO = blanco --- */
  --w018: rgba(255, 255, 255, 0.018);
  --w024: rgba(255, 255, 255, 0.024);
  --w025: rgba(255, 255, 255, 0.025);
  --w026: rgba(255, 255, 255, 0.026);
  --w028: rgba(255, 255, 255, 0.028);
  --w03: rgba(255, 255, 255, 0.03);
  --w032: rgba(255, 255, 255, 0.032);
  --w035: rgba(255, 255, 255, 0.035);
  --w04: rgba(255, 255, 255, 0.04);
  --w042: rgba(255, 255, 255, 0.042);
  --w043: rgba(255, 255, 255, 0.043);
  --w045: rgba(255, 255, 255, 0.045);
  --w05: rgba(255, 255, 255, 0.05);
  --w052: rgba(255, 255, 255, 0.052);
  --w055: rgba(255, 255, 255, 0.055);
  --w06: rgba(255, 255, 255, 0.06);
  --w065: rgba(255, 255, 255, 0.065);
  --w07: rgba(255, 255, 255, 0.07);
  --w075: rgba(255, 255, 255, 0.075);
  --w08: rgba(255, 255, 255, 0.08);
  --w085: rgba(255, 255, 255, 0.085);
  --w09: rgba(255, 255, 255, 0.09);
  --w1: rgba(255, 255, 255, 0.1);
  --w105: rgba(255, 255, 255, 0.105);
  --w11: rgba(255, 255, 255, 0.11);
  --w12: rgba(255, 255, 255, 0.12);
  --w13: rgba(255, 255, 255, 0.13);
  --w14: rgba(255, 255, 255, 0.14);
  --w15: rgba(255, 255, 255, 0.15);
  --w16: rgba(255, 255, 255, 0.16);
  --w17: rgba(255, 255, 255, 0.17);
  --w18: rgba(255, 255, 255, 0.18);
  --w2: rgba(255, 255, 255, 0.2);
  --w22: rgba(255, 255, 255, 0.22);
  --w24: rgba(255, 255, 255, 0.24);
  --w28: rgba(255, 255, 255, 0.28);
  --w3: rgba(255, 255, 255, 0.3);
  --w32: rgba(255, 255, 255, 0.32);
  --w34: rgba(255, 255, 255, 0.34);
  --w35: rgba(255, 255, 255, 0.35);
  --w4: rgba(255, 255, 255, 0.4);
  --w42: rgba(255, 255, 255, 0.42);
  --w45: rgba(255, 255, 255, 0.45);
  --w46: rgba(255, 255, 255, 0.46);
  --w48: rgba(255, 255, 255, 0.48);
  --w5: rgba(255, 255, 255, 0.5);
  --w52: rgba(255, 255, 255, 0.52);
  --w54: rgba(255, 255, 255, 0.54);
  --w55: rgba(255, 255, 255, 0.55);
  --w56: rgba(255, 255, 255, 0.56);
  --w58: rgba(255, 255, 255, 0.58);
  --w6: rgba(255, 255, 255, 0.6);
  --w62: rgba(255, 255, 255, 0.62);
  --w64: rgba(255, 255, 255, 0.64);
  --w65: rgba(255, 255, 255, 0.65);
  --w66: rgba(255, 255, 255, 0.66);
  --w68: rgba(255, 255, 255, 0.68);
  --w7: rgba(255, 255, 255, 0.7);
  --w72: rgba(255, 255, 255, 0.72);
  --w76: rgba(255, 255, 255, 0.76);
  --w78: rgba(255, 255, 255, 0.78);
  --w8: rgba(255, 255, 255, 0.8);
  --w82: rgba(255, 255, 255, 0.82);
  --w84: rgba(255, 255, 255, 0.84);
  --w85: rgba(255, 255, 255, 0.85);
  --w86: rgba(255, 255, 255, 0.86);
  --w9: rgba(255, 255, 255, 0.9);
  --w92: rgba(255, 255, 255, 0.92);
  --w94: rgba(255, 255, 255, 0.94);
  --w96: rgba(255, 255, 255, 0.96);
  --w97: rgba(255, 255, 255, 0.97);
}

/* Tema claro (opt-in vía interruptor del menú de usuario). El default :root de arriba (oscuro) NO se toca. */
:root[data-theme="light"] {
  /* ═══ TEMA CLARO · estilo SERENO (elegido por el fundador, 15-ago-2026) ═══════════
     La idea: el LIENZO deja de ser blanco puro y pasa a un gris muy claro con sesgo
     azul (el azul de la marca), y las TARJETAS se quedan blancas. Así el contenido
     "flota" sobre el fondo y se distingue solo, sin necesidad de bordes fuertes.
     Antes todo era #ffffff sobre #ffffff y solo los separaba una línea al 12%.
     Es un cambio de TOKENS: se define aquí y cae en las 13 pantallas a la vez. */
  --bg: #eceff4;          /* lienzo: era #f6f7f9, demasiado sutil — no se distinguía del blanco */
  --bg-soft: #e3e8ef;     /* zonas hundidas */
  --panel: #ffffff;       /* tarjetas: blancas, ahora SÍ se recortan sobre el lienzo */
  --panel-2: #f6f7f9;
  --panel-3: #eceff3;
  --panel-4: #dfe4ea;
  --line: rgba(14, 27, 44, 0.11);        /* líneas con el tinte azul de la marca, no gris neutro */
  --line-strong: rgba(14, 27, 44, 0.20);
  --text: #141a21;        /* algo más profundo que #202124: más contraste sobre blanco */
  --muted: #5a6674;       /* texto secundario con el mismo sesgo azul */
  --muted-2: #5e6771;     /* legible sobre tarjeta Y sobre el lienzo gris (antes #80868b daba 3.6:1) */
  --accent: #202124;
  /* Azul de enlace un punto más profundo que el #2f6df6 anterior: sobre el lienzo gris
     del Sereno aquel se quedaba en 4.2:1 (por debajo del mínimo legible) y ahora pasa
     a 5.3:1. Sigue siendo el azul de la marca, solo que legible en los dos fondos. */
  --brand-ink: #1b54d4;
  --link: #1b54d4;
  /* Área LEGAL en claro: violeta sólido y legible sobre fondo claro. */
  --legal-surface: #faf5ff;
  --legal-surface-2: #ffffff;
  --legal-border: #e6d5fb;
  --legal-border-strong: #c4a2f0;
  --legal-title: #6b21a8;
  --legal-label: #7c3aed;
  --legal-sub: #8b5cf6;
  --legal-accent: #7c3aed;
  --legal-field-text: #2e1065;
  /* Chips/botones semánticos en CLARO: fondo sólido suave + texto oscuro legible. */
  --ok-bg: #dcfce7;    --ok-text: #15803d;  --ok-border: #86efac;
  --warn-bg: #ffedd5;  --warn-text: #c2410c; --warn-border: #fdba74;
  --info-bg: #dbeafe;  --info-text: #1d4ed8; --info-border: #93c5fd;
  --danger-bg: #fee2e2; --danger-text: #b91c1c; --danger-border: #fca5a5;

  /* ═══ FALTABAN EN TEMA CLARO — 3 líneas que arreglan ~27 sitios ═══════════════════
     --success/--warning/--danger estaban definidos SOLO en el :root oscuro (#34d399,
     #fbbf24, #f87171). En claro se heredaban esos verdes y ámbares pensados para fondo
     negro, y sobre blanco quedaban casi invisibles: los números de "Tu día", pastillas
     de estado, avisos, alertas… Se reutilizan los tonos que YA existen aquí arriba para
     esa misma semántica, así no se inventa color nuevo. (barrido premium, 16-ago) */
  --success: #127035;
  --warning: #9a4a08;
  --danger: #b91c1c;
  /* Verde WhatsApp legible sobre blanco (el #25d366 de oscuro pierde contraste en claro). */
  --whatsapp: #16a34a;
  --wa-btn-bg: #15803d;
  --wa-btn-bg-hover: #166534;
  --wa-btn-text: #ffffff;
  --table-zebra: rgba(0, 0, 0, 0.035);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.12);

  /* --- Shell base (Paso 3): claro --- */
  /* SERENO: la barra lateral pasa a BLANCA y el chat al lienzo gris. Antes era al
     revés (barra gris #eceef1, chat blanco), y la barra pesaba más que la
     conversación. Ahora manda el chat, que es donde se trabaja. */
  --shell-sidebar: #ffffff;
  --shell-bg: #eceff4;
  --shell-chat: #eceff4;
  /* --- Blancos -> negro equivalente (misma opacidad) --- */
  --w018: rgba(0, 0, 0, 0.018);
  --w024: rgba(0, 0, 0, 0.024);
  --w025: rgba(0, 0, 0, 0.025);
  --w026: rgba(0, 0, 0, 0.026);
  --w028: rgba(0, 0, 0, 0.028);
  --w03: rgba(0, 0, 0, 0.03);
  --w032: rgba(0, 0, 0, 0.032);
  --w035: rgba(0, 0, 0, 0.035);
  --w04: rgba(0, 0, 0, 0.04);
  --w042: rgba(0, 0, 0, 0.042);
  --w043: rgba(0, 0, 0, 0.043);
  --w045: rgba(0, 0, 0, 0.045);
  --w05: rgba(0, 0, 0, 0.05);
  --w052: rgba(0, 0, 0, 0.052);
  --w055: rgba(0, 0, 0, 0.055);
  --w06: rgba(0, 0, 0, 0.06);
  --w065: rgba(0, 0, 0, 0.065);
  --w07: rgba(0, 0, 0, 0.07);
  --w075: rgba(0, 0, 0, 0.075);
  --w08: rgba(0, 0, 0, 0.08);
  --w085: rgba(0, 0, 0, 0.085);
  --w09: rgba(0, 0, 0, 0.09);
  --w1: rgba(0, 0, 0, 0.1);
  --w105: rgba(0, 0, 0, 0.105);
  --w11: rgba(0, 0, 0, 0.11);
  --w12: rgba(0, 0, 0, 0.12);
  --w13: rgba(0, 0, 0, 0.13);
  --w14: rgba(0, 0, 0, 0.14);
  --w15: rgba(0, 0, 0, 0.15);
  --w16: rgba(0, 0, 0, 0.16);
  --w17: rgba(0, 0, 0, 0.17);
  --w18: rgba(0, 0, 0, 0.18);
  --w2: rgba(0, 0, 0, 0.2);
  --w22: rgba(0, 0, 0, 0.22);
  --w24: rgba(0, 0, 0, 0.24);
  --w28: rgba(0, 0, 0, 0.28);
  --w3: rgba(0, 0, 0, 0.3);
  --w32: rgba(0, 0, 0, 0.32);
  --w34: rgba(0, 0, 0, 0.34);
  --w35: rgba(0, 0, 0, 0.35);
  --w4: rgba(0, 0, 0, 0.4);
  --w42: rgba(0, 0, 0, 0.42);
  --w45: rgba(0, 0, 0, 0.45);
  --w46: rgba(0, 0, 0, 0.46);
  --w48: rgba(0, 0, 0, 0.48);
  --w5: rgba(0, 0, 0, 0.5);
  --w52: rgba(0, 0, 0, 0.52);
  --w54: rgba(0, 0, 0, 0.54);
  --w55: rgba(0, 0, 0, 0.55);
  --w56: rgba(0, 0, 0, 0.56);
  --w58: rgba(0, 0, 0, 0.58);
  --w6: rgba(0, 0, 0, 0.6);
  --w62: rgba(0, 0, 0, 0.62);
  --w64: rgba(0, 0, 0, 0.64);
  --w65: rgba(0, 0, 0, 0.65);
  --w66: rgba(0, 0, 0, 0.66);
  --w68: rgba(0, 0, 0, 0.68);
  --w7: rgba(0, 0, 0, 0.7);
  --w72: rgba(0, 0, 0, 0.72);
  --w76: rgba(0, 0, 0, 0.76);
  --w78: rgba(0, 0, 0, 0.78);
  --w8: rgba(0, 0, 0, 0.8);
  --w82: rgba(0, 0, 0, 0.82);
  --w84: rgba(0, 0, 0, 0.84);
  --w85: rgba(0, 0, 0, 0.85);
  --w86: rgba(0, 0, 0, 0.86);
  --w9: rgba(0, 0, 0, 0.9);
  --w92: rgba(0, 0, 0, 0.92);
  --w94: rgba(0, 0, 0, 0.94);
  --w96: rgba(0, 0, 0, 0.96);
  --w97: rgba(0, 0, 0, 0.97);
}

.operator-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 9, 11, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.operator-dialog {
  width: min(520px, 100%);
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius-xl);
  /* Era un gradiente oscuro fijo: en tema claro la tarjeta seguía negra y el texto
     que escribías no se veía. Con tokens vira sola. (tanda A, 16-ago) */
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.35);
}

.operator-dialog h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.operator-dialog-message {
  margin: 0;
  /* Era casi blanco fijo y la tarjeta ya vira con el tema (var(--panel)): en tema claro el texto de los avisos
     no se leía (lo vio Javidan en «Cómo instalar app», 24-oct-2026). Con el token vira igual que la tarjeta. */
  color: var(--text);
  font-size: var(--fs-xl);
  line-height: 1.55;
  white-space: pre-wrap;
}

.operator-dialog-input {
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--w2);
  background: var(--w065);
  color: var(--text);
  outline: none;
  resize: vertical;
}

.operator-dialog-input:focus {
  border-color: var(--w34);
  box-shadow: 0 0 0 4px var(--w06);
}

.operator-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.operator-dialog-button {
  min-width: 112px;
}

.share-dialog {
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  overflow: hidden;
}

.share-user-search {
  min-height: 46px;
}

.share-user-list {
  display: grid;
  gap: 8px;
  max-height: min(50vh, 390px);
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.share-user-empty {
  margin: -2px 0 0;
  color: rgba(203, 213, 225, 0.72);
  font-size: var(--fs-md);
  line-height: 1.4;
}

.share-user-row {
  display: grid;
  grid-template-columns: 20px 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--w1);
  background: var(--w045);
  cursor: pointer;
}

.share-user-row:hover {
  background: var(--w075);
}

.share-user-row input {
  width: 18px;
  height: 18px;
  accent-color: #38bdf8;
}

.share-user-avatar {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(59, 130, 246, 0.16));
  color: #e0f2fe;
  font-size: var(--fs-xs);
  font-weight: 850;
  letter-spacing: 0.02em;
}

.share-user-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.share-user-copy strong,
.share-user-copy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-user-copy strong {
  color: var(--text);
  font-size: var(--fs-lg);
  line-height: 1.15;
}

.share-user-copy small {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.share-dialog-actions {
  flex-wrap: wrap;
}

.internal-note-message {
  width: min(780px, 100%);
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-left: 3px solid rgba(56, 189, 248, 0.68);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(25, 34, 43, 0.94), rgba(26, 29, 35, 0.92));
  color: rgba(244, 245, 247, 0.94);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.16);
}

.internal-note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: rgba(226, 232, 240, 0.72);
  font-size: var(--fs-xs);
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.internal-note-head strong {
  color: rgba(224, 242, 254, 0.96);
  font-size: var(--fs-xs);
}

.internal-note-head time {
  margin-left: auto;
  color: rgba(163, 171, 182, 0.9);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-transform: none;
}

.internal-note-body {
  color: rgba(244, 245, 247, 0.94);
}

body.shared-conversation-view .composer-shell {
  border-color: rgba(56, 189, 248, 0.34);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.09), transparent 34%),
    rgba(37, 40, 47, 0.96);
}

body.shared-conversation-view .composer-tool-button {
  cursor: not-allowed;
  opacity: 0.45;
}

body.shared-conversation-admin-view .composer-tool-button {
  cursor: pointer;
  opacity: 1;
}

@media (max-width: 640px) {
  .operator-dialog-backdrop {
    align-items: end;
    padding: 14px;
  }

  .operator-dialog {
    border-radius: var(--radius-xl);
    padding: 20px;
  }

  .share-dialog {
    max-height: calc(100dvh - 28px);
  }

  .share-user-list {
    max-height: min(52dvh, 420px);
  }

  .operator-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .operator-dialog-button {
    width: 100%;
    min-width: 0;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(circle at top, var(--w045), transparent 28%),
    linear-gradient(180deg, #17191d 0%, #1d2025 100%);
  color: var(--text);
  font-family: var(--font-body);
  /* Base del texto del panel (diseño antiguo). +1px el 20-oct-2026 (encargo de Javidan: «subir 1px
     el tamaño de texto general»); el diseño nuevo lo sube por sus tokens --t-fs-* (tria-base.css). */
  font-size: 17px;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

body.auth-loading {
  overflow: hidden;
}

body.auth-loading .auth-screen,
body.auth-loading .app-shell {
  visibility: hidden;
}

body.auth-loading::before {
  content: "Cargando TRIA...";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, var(--w045), transparent 28%),
    linear-gradient(180deg, #17191d 0%, #1d2025 100%);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.auth-open {
  overflow: auto;
  background:
    radial-gradient(circle at top, var(--w045), transparent 28%),
    linear-gradient(180deg, #17191d 0%, #1d2025 100%);
}

button,
input,
select,
textarea {
  font: inherit;
  /* La PWA es de fondo oscuro: que los controles nativos (flecha del desplegable, menú de opciones,
     cursor) se rendericen en modo oscuro → la flecha se ve CLARA y legible, no oscura sobre fondo
     oscuro. Afecta a todos los desplegables (estado en cajas/tablas, etc.) desde un solo sitio. */
  color-scheme: dark;
}

/* ═══ TEMA CLARO · controles nativos — 1 SITIO → TODAS LAS PANTALLAS ═══════════════
   Sin esto, la regla de arriba se aplicaba TAMBIÉN en modo claro: buscadores,
   desplegables y selectores de fecha se pintaban oscuros sobre fondo blanco (una barra
   negra en mitad de la pantalla). Faltaba desde que existe el tema claro. (15-ago) */
:root[data-theme="light"] button,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  color-scheme: light;
}

h1,
h2,
h3,
.brand-copy h1,
.chat-header-brand-copy strong,
.welcome-panel h3 {
  font-family: var(--font-display);
  font-feature-settings: "kern" 1, "liga" 1;
}

.app-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  transition: grid-template-columns 0.25s ease; /* el plegado 266→76 saltaba a saco */
  gap: 0;
  height: 100vh;
  min-height: 100vh;
  padding: 0;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at top, var(--w045), transparent 28%),
    linear-gradient(180deg, #17191d 0%, #1d2025 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.auth-card {
  width: min(460px, 100%);
  display: grid;
  gap: 18px;
  padding: 28px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top left, var(--w05), transparent 34%),
    linear-gradient(180deg, rgba(38, 40, 45, 0.98), rgba(28, 30, 34, 0.98));
  border: 1px solid var(--w14);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}

.auth-card-copy {
  display: grid;
  gap: 10px;
}

.auth-card-copy h1,
.auth-card-copy p {
  margin: 0;
}

.auth-card-copy h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

/* ── Pantalla de acceso: SIEMPRE texto claro ────────────────────────────────────
   El fondo de esta pantalla y de su tarjeta es oscuro FIJO (los degradados de
   arriba), no depende del tema. Pero el texto tiraba de los tokens, y esos SÍ se
   invierten: en modo claro —que es el que tiene todo el equipo por defecto— salían
   negros sobre negro y el título y los dos botones de abajo eran invisibles
   (lo vio el fundador, 12-ago). Aquí se fija el color a mano, sin tokens. */
.auth-screen .auth-card-copy h1 {
  color: rgba(255, 255, 255, 0.96);
}

.auth-screen .auth-card-copy p,
.auth-screen .drawer-eyebrow,
.auth-screen .field > span,
.auth-screen .auth-status,
.auth-screen .muted {
  color: rgba(255, 255, 255, 0.72);
}

.auth-screen .btn.ghost {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.auth-screen .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.auth-form {
  gap: 14px;
}

.auth-secondary-button {
  width: 100%;
}

.auth-status-line {
  min-height: 1.25rem;
  margin: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  padding: 20px 12px 0 20px;
  /* CABECERA FIJA + PIE FIJO (fundador 3-ago, revierte a propósito el "scroll entero" del 7-jul):
     el panel ya NO scrollea como un bloque. La cabecera (logo/acciones/buscador/"Recientes") y el
     pie de usuario quedan fijos; SOLO la lista (.sidebar-history) scrollea por debajo. En móvil el
     drawer conserva su comportamiento propio (bloque con !important más abajo). */
  overflow: hidden;
  border-right: 1px solid var(--w08);
  background:
    radial-gradient(circle at top left, var(--w035), transparent 24%),
    linear-gradient(180deg, #171717 0%, #141414 100%);
  box-shadow: inset -1px 0 0 var(--w03);
}

.sidebar-topbar,
.sidebar-header,
.sidebar-search-panel,
.sidebar-section-head {
  flex: 0 0 auto;
}

.sidebar-topbar,
.sidebar-header,
.sidebar-search-panel {
  display: grid;
  gap: 8px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 4px 28px 4px;
}

.sidebar-brand-lockup {
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: var(--w92);
}

.brand-mark svg {
  width: 25px;
  height: 25px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-shadow: none;
}

.brand-mark.tria-mark {
  width: 38px;
  height: 38px;
}

/* El logo es el archivo original /icons/icon-source.svg (trae su propio fondo redondeado): nunca redibujado (Javidan 24-oct). */
.brand-mark.tria-mark img {
  width: 38px;
  height: 38px;
  display: block;
}

.brand-copy h1,
.brand-copy p {
  margin: 0;
}

.brand-copy h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.brand-eyebrow {
  color: var(--muted-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Panel lateral (fundador 30-jul): "Centro operativo" pequeño y EN UNA SOLA LÍNEA
   bajo el TRIA grande — menos cuerpo y menos tracking para que quepa sin partirse. */
.sidebar-brand-lockup .brand-eyebrow {
  font-size: var(--fs-3xs);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.new-chat-button,
.primary-button,
.ghost-button,
.close-button,
.starter-filter,
.starter-card,
.history-item,
.sidebar-action,
.sidebar-icon-button {
  border: 0;
  cursor: pointer;
}

.primary-button {
  padding: 12px 16px;
  border-radius: 999px;
  /* Era un gradiente gris fijo (#434852→#353a42) con color:var(--text): el HTML que
     emite el Director en el chat salía en tema claro con texto oscuro sobre gris
     oscuro (ilegible) y sin hover. A los tokens de .btn.primary. (tanda S, nº21) */
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  color: var(--brand-contrast);
  font-weight: 700;
}
.primary-button:hover:not(:disabled) { filter: brightness(1.08); }

.sidebar-action,
.sidebar-icon-button {
  background: transparent;
  color: var(--text);
}

.sidebar-action {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 42px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  text-align: left;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition:
    background 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}

.sidebar-action:hover,
.sidebar-icon-button:hover,
.history-item:hover {
  background: var(--w06);
}

.sidebar-action-label {
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: 480;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.sidebar-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
}

.sidebar-icon-button-small {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  opacity: 0.72;
}

.sidebar-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  opacity: 0.94;
}

.sidebar-icon-compose {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,128v80a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h80a8,8,0,0,1,0,16H48V208H208V128a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E");
}

.sidebar-icon-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E");
}

.sidebar-icon-panel,
.sidebar-icon-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z'/%3E%3C/svg%3E");
}

.sidebar-icon-refresh {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z'/%3E%3C/svg%3E");
}

.sidebar-search input,
.field input,
.field select,
.field textarea,
.composer-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* Era rgba(34,36,41,.92): gris oscuro fijo. En tema claro los campos de formulario
     apenas se distinguían de la tarjeta blanca — no se veía dónde escribir. Afecta a
     TODOS los .field del sistema (Cuenta, alta de contacto, valoración…). (16-ago) */
  background: var(--panel-2);
  color: var(--text);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.sidebar-search input {
  min-height: 40px;
  padding: 8px 10px 8px 44px;
  background:
    var(--w055)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23dfe1e5'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E")
    no-repeat 13px center / 20px 20px;
  border-color: transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.sidebar-search input::placeholder,
.field input::placeholder,
.field textarea::placeholder,
.composer-field textarea::placeholder {
  color: var(--muted-2);
}

.sidebar-search-panel[hidden] {
  display: none;
}

.sidebar-search input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.composer-field textarea:focus {
  outline: none;
  border-color: var(--w24);
  box-shadow: 0 0 0 3px var(--w08);
}

.sidebar-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sidebar-status[hidden] {
  display: none !important;
}

.sidebar-section-head,
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-section-head span,
.section-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 470;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--w56);
}

.sidebar-section-head {
  padding: 18px 10px 6px;
  border-top: 0;
}

.sidebar-section-head span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  opacity: 0.7;
  transform: rotate(45deg) translateY(-2px);
}

.sidebar-section-head .sidebar-icon-button-small {
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.sidebar:hover .sidebar-section-head .sidebar-icon-button-small,
.sidebar-section-head:focus-within .sidebar-icon-button-small {
  opacity: 0.66;
  pointer-events: auto;
}

.section-header h3 {
  margin: 0;
}

.sidebar-history {
  /* La lista es el ÚNICO scroller del panel (fundador 3-ago): crece para llenar el hueco entre la
     cabecera fija y el pie fijo, y scrollea su contenido. `min-height:0` es imprescindible para que
     un hijo flex con overflow pueda encogerse y scrollear (si no, empujaría el pie fuera de vista).
     overflow-y:auto EXPLÍCITO (no :visible) evita el gotcha del 7-jul (visible + overflow-x:hidden
     computaba AUTO y se tragaba la rueda). */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.drawer-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.history-list {
  display: grid;
  gap: 7px;
  align-content: start;
  width: 100%;
  padding-right: 0;
  padding-bottom: 10px;
  overscroll-behavior: contain;
}

/* Fundador 30-jul: línea SUAVE entre chats del panel para distinguir cada caja.
   Va en el hueco del grid (no toca las esquinas redondeadas de la fila) y usa el
   token --line → hereda tema claro/oscuro. Solo ENTRE filas (ni encima de la 1ª
   ni debajo de la última). */
.history-list .history-item-row + .history-item-row::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.history-group-label {
  margin: 10px 6px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.history-group-toggle {
  cursor: pointer;
  user-select: none;
}

.history-group-toggle:focus-visible {
  outline: 2px solid var(--w22);
  outline-offset: 2px;
}

.history-group-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-group-arrow {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.74;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform 140ms ease, opacity 140ms ease;
}

.history-group-toggle:hover .history-group-arrow {
  opacity: 1;
}

.history-group-toggle.is-collapsed .history-group-arrow {
  transform: rotate(-45deg) translate(-1px, 1px);
}

.qobrix-history-group-label {
  margin: 14px 0 6px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(14, 116, 144, 0.32), rgba(37, 99, 235, 0.14)),
    rgba(8, 47, 73, 0.18);
  border-left: 3px solid #38bdf8;
  color: #bfeeff;
  letter-spacing: 0.18em;
}

.rest-history-group-label {
  margin: 20px 0 6px;
  padding: 7px 10px;
  position: relative;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, var(--w11), var(--w045)),
    rgba(35, 35, 35, 0.38);
  border-left: 3px solid rgba(210, 214, 220, 0.62);
  color: rgba(232, 235, 239, 0.78);
  letter-spacing: 0.18em;
}

.rest-history-group-label::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 1px;
  background: var(--w1);
}

.history-empty {
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--w035);
  border: 1px dashed var(--w1);
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.history-item-row {
  position: relative;
  display: block;
  align-items: center;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-md);
  isolation: isolate;
  z-index: 0;
  overflow: visible;
}

/* Los skins .qobrix-history-item-row (tinte azul por "modo") se eliminaron el 16-ago:
   eran residuo de cuando había modos (chat único desde el 30-jul) y dejaban la lista de
   recientes a dos velocidades — filas con pastilla oscura y filas limpias, con colores
   fijos que no viraban de tema. Ahora TODAS las filas usan la base .history-item. */
.history-item-row.menu-open {
  z-index: 30;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  min-height: 38px;
  width: 100%;
  padding: 8px 54px 8px 10px;
  text-align: left;
  border-radius: var(--radius-md);
  background: transparent;
  border: 0;
  color: var(--text);
  box-shadow: none;
  transition:
    background 140ms ease,
    color 140ms ease;
}

.history-item:hover {
  background: var(--w055);
}

.history-item-row:hover {
  background: var(--w055);
}

.history-item.active {
  border-color: transparent;
  background: var(--w14);
  box-shadow: none;
}

.history-item-mini {
  display: none;
}

.history-item-copy {
  width: 100%;
  min-width: 0;
  display: block;
}

.history-item-title {
  display: block;
  font-size: var(--fs-md);
  font-weight: 480;
  line-height: 1.22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.015em;
}

.history-item-shared-badge,
.history-item-shared-meta {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item-shared-badge {
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.15);
  color: #bdefff;
  font-size: var(--fs-3xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.history-item-shared-meta {
  margin-top: 4px;
  color: rgba(203, 213, 225, 0.74);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

/* Esqueleto de carga HEREDABLE (tanda V, nº114): lo pinta tnSkeleton(n) en app.js.
   Tokens --w* → funciona en oscuro y claro sin variantes. Respeta reduced-motion. */
.tn-skeleton-list { display: flex; flex-direction: column; gap: 12px; padding: 6px 2px; }
.tn-skeleton-row { display: flex; flex-direction: column; gap: 6px; }
.tn-skeleton-bar {
  height: 13px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--w04) 25%, var(--w08) 50%, var(--w04) 75%);
  background-size: 200% 100%;
  animation: tn-skeleton-shimmer 1.3s ease-in-out infinite;
}
.tn-skeleton-bar-a { width: 62%; }
.tn-skeleton-bar-b { width: 38%; height: 10px; opacity: 0.7; }
@keyframes tn-skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tn-skeleton-bar { animation: none; } }

/* Segunda línea con la última actividad («hace 2 h»): tres chats titulados "calendario"
   eran indistinguibles sin abrirlos. Tokens → vira con el tema. (tanda V, nº62) */
.history-item-when {
  display: block;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: var(--fs-2xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-with-me-history-item-row .history-item {
  background:
    radial-gradient(circle at left, rgba(56, 189, 248, 0.1), transparent 44%),
    rgba(19, 30, 39, 0.92);
}

.shared-by-me-history-item-row .history-item {
  background:
    radial-gradient(circle at left, rgba(148, 163, 184, 0.1), transparent 44%),
    rgba(45, 45, 45, 0.92);
}

.history-item-date,
.history-item-meta {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.3;
}

.history-item-actions {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  z-index: 12;
  padding-right: 0;
  pointer-events: none;
}

.history-item-more {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--w82);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition:
    opacity 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.history-item-row:hover .history-item-more,
.history-item-row:focus-within .history-item-more,
.history-item-row.menu-open .history-item-more {
  opacity: 0.9;
  pointer-events: auto;
}

/* 🔴 EN UN MÓVIL NO HAY RATÓN, y estas tres condiciones lo daban por hecho (8-sep).
   Renombrar, fijar, compartir y BORRAR un chat solo aparecían al pasar el ratón por
   encima de la fila: desde el teléfono no había forma de llegar a ellas —ni pulsación
   larga, ni nada—, y tocar la fila abre el chat y cierra el panel. O sea, cuatro
   acciones existentes e inalcanzables para quien trabaja en la calle.
   En pantallas sin ratón se quedan siempre a la vista (regla de abajo). */
.history-item-row:hover .history-item-actions,
.history-item-row:focus-within .history-item-actions,
.history-item-row.menu-open .history-item-actions {
  pointer-events: auto;
}

.history-item-more:hover {
  background: var(--w09);
  color: #ffffff;
}

.history-item-more-dots {
  line-height: 1;
  letter-spacing: 0.08em;
  transform: translateY(-2px);
}

.history-item-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 218px;
  display: grid;
  gap: 2px;
  padding: 7px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--w12);
  background:
    linear-gradient(180deg, rgba(42, 44, 49, 0.98), rgba(31, 33, 37, 0.98));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  z-index: 20;
  overflow: auto;
  overscroll-behavior: contain;
}

.history-item-menu.open-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.history-item-menu[hidden] {
  display: none;
}

.history-item-menu-option {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #f0f3f6;
  text-align: left;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 140ms ease;
}

.history-item-menu-option:hover {
  background: var(--w08);
}

.history-item-menu-option.danger {
  color: #ff6b6b;
}

.history-menu-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
  opacity: 0.95;
}

.history-menu-icon-share {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f2f4f5'%3E%3Cpath d='M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z'/%3E%3C/svg%3E");
}

.history-menu-icon-rename {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f2f4f5'%3E%3Cpath d='M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z'/%3E%3C/svg%3E");
}

.history-menu-icon-pin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f2f4f5'%3E%3Cpath d='M235.32,81.37,174.63,20.69a16,16,0,0,0-22.63,0L98.37,74.49c-10.66-3.34-35-7.37-60.4,13.14a16,16,0,0,0-1.29,23.78L85,159.71,42.34,202.34a8,8,0,0,0,11.32,11.32L96.29,171l48.29,48.29A16,16,0,0,0,155.9,224c.38,0,.75,0,1.13,0a15.93,15.93,0,0,0,11.64-6.33c19.64-26.1,17.75-47.32,13.19-60L235.33,104A16,16,0,0,0,235.32,81.37ZM224,92.69h0l-57.27,57.46a8,8,0,0,0-1.49,9.22c9.46,18.93-1.8,38.59-9.34,48.62L48,100.08c12.08-9.74,23.64-12.31,32.48-12.31A40.13,40.13,0,0,1,96.81,91a8,8,0,0,0,9.25-1.51L163.32,32,224,92.68Z'/%3E%3C/svg%3E");
}

.history-menu-icon-info {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f2f4f5'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'/%3E%3C/svg%3E");
}

.history-menu-icon-delete {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ff6b6b'%3E%3Cpath d='M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E");
}

.sidebar-footer {
  display: flex;
  flex: 0 0 auto;
  /* Pie (nombre del usuario) FIJO al fondo del panel izquierdo: sticky sobre el scroll
     del sidebar → siempre visible aunque la lista de chats se desplace (fundador 27-jul).
     El fondo opaco tapa los chats que pasan por detrás; el menú de usuario (z-index 26)
     sigue quedando por encima. */
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: auto;
  margin-left: -20px;
  margin-right: -12px;
  padding: 10px 12px 12px 20px;
  border-top: 1px solid var(--w07);
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.72) 0%, #141414 42%);
}

.sidebar-footer-card {
  position: relative;
  width: 100%;
  display: grid;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sidebar-footer-card.menu-open {
  border-color: transparent;
}

.sidebar-footer-agent {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar-footer-agent:hover,
.sidebar-footer-agent[aria-expanded="true"] {
  background: var(--w045);
}

.sidebar-footer-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd34d 0%, #f3bf1b 100%);
  color: #161616;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 var(--w28);
}

.sidebar-footer-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sidebar-footer-copy strong,
.sidebar-footer-copy span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer-copy strong {
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.sidebar-footer-copy span {
  color: var(--w58);
  font-size: var(--fs-sm);
  font-weight: 480;
}

.sidebar-footer-actions {
  display: grid;
}

.sidebar-footer-actions[hidden] {
  display: none;
}

.sidebar-user-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 26;
  gap: 4px;
  padding: 16px;
  border-radius: var(--radius-xl);
  /* Era rgba(52,52,52,.98) fijo: en claro el menú seguía siendo una mancha oscura. */
  border: 1px solid var(--line-strong);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  animation: tn-menu-pop-in 0.16s ease;
}

.sidebar-user-menu-head,
.sidebar-user-menu-head + .sidebar-user-menu-divider {
  display: none !important;
}

.sidebar-user-menu-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 2px 8px;
}

.sidebar-user-menu-avatar {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  font-size: var(--fs-xs);
}

.sidebar-user-menu-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sidebar-user-menu-copy strong,
.sidebar-user-menu-copy span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-menu-copy strong {
  color: #ffffff;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sidebar-user-menu-copy span {
  color: var(--w58);
  font-size: var(--fs-sm);
  font-weight: 650;
}

.sidebar-user-menu-caret,
.sidebar-user-menu-next {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--w82);
  border-bottom: 2px solid var(--w82);
  transform: rotate(-45deg);
}

.sidebar-user-menu-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--w14);
}

.sidebar-user-menu-item {
  width: 100%;
  min-height: 45px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--w92);
  font: inherit;
  font-size: var(--fs-lg);
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sidebar-user-menu-item:hover:not(:disabled) {
  background: var(--w08);
}

.sidebar-user-menu-item:focus,
.sidebar-user-menu-item:focus-visible,
.sidebar-user-menu-item:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

@media (hover: none) {
  .sidebar-user-menu-item:hover:not(:disabled),
  .sidebar-user-menu-item:active {
    background: transparent;
  }
}

.sidebar-user-menu-item:disabled {
  color: var(--w42);
  cursor: default;
}

.sidebar-user-menu-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  opacity: 0.92;
}

.sidebar-user-menu-icon-profile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z'/%3E%3C/svg%3E");
}

.sidebar-user-menu-icon-backoffice {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V96H40V56ZM40,112H96v88H40Zm176,88H112V112H216v88Z'/%3E%3C/svg%3E");
}

.sidebar-user-menu-icon-install {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M176,16H80A24,24,0,0,0,56,40V216a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V40A24,24,0,0,0,176,16ZM72,64H184V192H72Zm8-32h96a8,8,0,0,1,8,8v8H72V40A8,8,0,0,1,80,32Zm96,192H80a8,8,0,0,1-8-8v-8H184v8A8,8,0,0,1,176,224Z'/%3E%3C/svg%3E");
}

.sidebar-user-menu-icon-update {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%237dd3fc'%3E%3Cpath d='M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z'/%3E%3C/svg%3E");
}

.sidebar-user-menu-icon-notifications {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'/%3E%3C/svg%3E");
}

.sidebar-user-menu-icon-settings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z'/%3E%3C/svg%3E");
}

.sidebar-user-menu-icon-help {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E");
}

.sidebar-user-menu-icon-logout {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'/%3E%3C/svg%3E");
}

.app-update-button.has-app-update {
  border-color: rgba(56, 189, 248, 0.46);
  background: linear-gradient(90deg, rgba(14, 116, 144, 0.36), rgba(30, 64, 175, 0.18));
  color: #e0f2fe;
}

.app-update-badge {
  margin-left: auto;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  background: rgba(56, 189, 248, 0.22);
  border: 1px solid rgba(125, 211, 252, 0.42);
  color: #bae6fd;
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 76px minmax(0, 1fr);
}

body.sidebar-collapsed .sidebar {
  padding-inline: 12px;
}

body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .sidebar-action-label,
body.sidebar-collapsed .sidebar-search-panel,
body.sidebar-collapsed .sidebar-section-head span,
body.sidebar-collapsed .sidebar-footer-copy,
body.sidebar-collapsed .sidebar-status {
  display: none;
}

body.sidebar-collapsed .sidebar-topbar,
body.sidebar-collapsed .sidebar-header,
body.sidebar-collapsed .sidebar-footer {
  justify-items: center;
}

body.sidebar-collapsed .sidebar-action,
body.sidebar-collapsed .sidebar-icon-button {
  width: 44px;
  justify-content: center;
  padding-inline: 0;
}

body.sidebar-collapsed .sidebar-section-head {
  justify-content: center;
}

body.sidebar-collapsed .sidebar-icon-button-small {
  display: none;
}

body.sidebar-collapsed .history-item {
  width: 100%;
  justify-content: center;
  padding: 8px;
}

body.sidebar-collapsed .history-item-mini {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(61, 63, 68, 0.98), rgba(43, 45, 49, 0.98));
  color: var(--text);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

body.sidebar-collapsed .history-item-copy {
  display: none;
}

body.sidebar-collapsed .history-item-actions {
  display: none;
}

body.sidebar-collapsed .sidebar-footer-card {
  background: transparent;
  padding: 0;
}

body.sidebar-collapsed .sidebar-footer-agent {
  justify-content: center;
}

body.sidebar-collapsed .sidebar-footer-actions {
  justify-content: center;
}

.chat-layout {
  position: relative; /* ancla el botón flotante "bajar al último" en escritorio */
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  max-height: 100vh;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at center, var(--w045), transparent 32%),
    #232323;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 34px;
}

.chat-header-brand-wrap {
  position: relative;
  min-width: 0;
}

.chat-header h2,
.drawer-header h2 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 22px 24px 10px;
}

/* El último turno deja hueco debajo para que tu mensaje pueda quedar arriba mientras TRIA escribe
   (la pantalla no se mueve sola: anclarTurnoArriba en app.js, 25-sep-2026). */
.messages.con-hueco-final > :last-child { min-height: var(--respuesta-hueco, 0px); }

.messages > * {
  width: min(860px, 100%);
  max-width: 100%;
  margin-inline: auto;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 100%;
  width: 100%;
}

.chat-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.chat-header-brand-copy {
  display: grid;
  gap: 2px;
}

.chat-header-brand-copy strong,
.chat-header-brand-copy small {
  display: block;
}

.chat-header-brand-copy strong {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.chat-header-brand-copy small {
  color: var(--w5);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.chat-header-brand-caret {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-right: 2px solid var(--w68);
  border-bottom: 2px solid var(--w68);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.chat-header-brand[aria-expanded="true"] .chat-header-brand-caret {
  transform: rotate(225deg) translate(-2px, -1px);
}

.chat-header-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 28;
  width: min(310px, calc(100vw - 34px));
  padding: 10px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--w13);
  background: rgba(31, 33, 37, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

.chat-header-menu[hidden] {
  display: none;
}

.chat-header-menu-section {
  display: grid;
  gap: 10px;
}

.chat-header-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 2px;
}

.chat-header-menu-head span {
  color: var(--w52);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chat-header-menu-head strong {
  color: var(--w9);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.chat-header-mode-list {
  display: grid;
  gap: 4px;
}

.chat-header-mode-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--w76);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.chat-header-mode-option:hover,
.chat-header-mode-option.active {
  background: var(--w08);
  border-color: var(--w08);
  color: #ffffff;
}

.chat-header-mode-option.active::after {
  content: "";
  width: 7px;
  height: 12px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.75;
  transform: rotate(45deg) translateY(-1px);
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Fundador 30-jul: con la marca TRIA del header retirada, las acciones (Backoffice,
     Qobrix, notificaciones) se iban a la izquierda — este auto las ancla
     SIEMPRE a la derecha, haya o no elementos delante. */
  margin-left: auto;
}

.chat-backoffice-link {
  min-height: 38px;
  padding-inline: 14px;
  text-decoration: none;
  color: var(--w82);
  background: var(--w055);
  border-color: var(--w12);
}

.chat-backoffice-link:hover {
  background: var(--w09);
  color: #ffffff;
}

.memory-header-button {
  /* Ocultado por orden del fundador (13-jun): el botón Memoria tapaba la "X" de Mi Agenda /
     Nota cliente en móvil. !important para vencer .mobile-panel-button del @media. Reversible. */
  display: none !important;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--w12);
  border-radius: 999px;
  background: var(--w055);
  color: var(--w84);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.memory-header-button:hover {
  background: var(--w09);
  border-color: var(--w2);
  color: #ffffff;
  transform: translateY(-1px);
}

.header-icon-button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--w04);
  color: #f0f3f6;
  cursor: pointer;
  transition:
    background 140ms ease,
    transform 140ms ease;
}

.header-icon-button:hover {
  background: var(--w08);
  transform: translateY(-1px);
}

.header-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.header-icon-sidebar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z'/%3E%3C/svg%3E");
}

.header-icon-panel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z'/%3E%3C/svg%3E");
}

.mobile-panel-button {
  display: inline-flex;
}

.welcome-panel {
  width: min(980px, 100%);
  display: grid;
  gap: 20px;
  padding: 12px 10px 18px;
}

.welcome-panel h3,
.welcome-panel p {
  margin: 0;
}

/* La home deja de estar centrada en el vacío: ahora arranca arriba y ordena el contenido
   a la izquierda, como una pantalla de trabajo. El padding-top de 10vh empujaba el
   titular al centro y dejaba ~600 px muertos hasta el composer. (premium, 15-ago) */
.home-stage {
  justify-items: stretch;
  text-align: left;
  padding-top: 22px;
  gap: 26px;
}

/* La home de SIEMPRE (asesores, mientras el premium está solo para admin): conserva su
   centrado original. Sin esto heredaría el layout nuevo y se les quedaría descolocada. */
.home-stage-classic {
  justify-items: center;
  text-align: center;
  padding-top: 10vh;
  gap: 20px;
}
.home-stage-classic h3 { white-space: nowrap; }

/* 18-ago-2026: el hueco era de 170 px porque el composer "flotaba por encima del scroll".
   Ya NO flota: medido en producción a 1225×623, 1440×900 y 375×812, es `position: relative` en
   los tres y el área de mensajes acaba EXACTAMENTE donde empieza el composer (no se solapan).
   Esos 170 px eran aire dentro del área con scroll y, en una ventana baja, empujaban la última
   fila de atajos fuera de la vista: se cortaba por la mitad. */
.home-stage:not(.home-stage-classic) { padding-bottom: 24px; }

/* Ventana baja (portátil sin maximizar, que es como se usa de verdad): la home se compacta
   para caber entera en vez de dejar la última fila partida. Solo afecta a la home de admin;
   los asesores usan `.home-stage-classic` y no entran aquí. */
@media (max-height: 760px) {
  .home-stage:not(.home-stage-classic) { padding-top: 10px; gap: 14px; padding-bottom: 14px; }
  .home-stage:not(.home-stage-classic) .home-greet h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
  .home-stage:not(.home-stage-classic) .home-caption { margin-top: 2px !important; }
}

/* En móvil los atajos van en UNA columna, así que la home es mucho más alta y sí necesita
   colchón al final: con 24 px la última tarjeta se quedaba 31 px por debajo del corte
   (medido en 375×812). Va después del bloque de altura para ganarle en móvil apaisado. */
@media (max-width: 760px) {
  .home-stage:not(.home-stage-classic) { padding-bottom: 96px; }
}

.home-greet h3 {
  white-space: normal;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.home-caption {
  color: var(--muted);
  font-size: var(--fs-md);
  margin-top: 6px !important;
}

/* El inicio del chat es UN mensaje (fundador, 25-sep-2026): fuera «Tu día» y los atajos. */
.home-mensaje { text-wrap: pretty; }
.home-mensaje em { font-style: normal; font-weight: 600; color: var(--text); }

.welcome-panel h3 {
  font-size: clamp(1.7rem, 4vw, 3.3rem);
  line-height: 1.04;
  max-width: none;
  white-space: nowrap;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.welcome-kicker {
  color: var(--w6);
  font-size: var(--fs-lg);
  letter-spacing: 0;
  text-transform: none;
}

.home-caption {
  max-width: 44rem;
  color: var(--w58);
  font-size: var(--fs-xl);
  line-height: 1.6;
}

.home-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.home-link-button,
.ghost-button,
.close-button,
.drawer-tab,
.mini-tag,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  /* Era rgba(38,40,45,.82): un gris oscuro fijo que en tema claro dejaba las pastillas
     y el "Cerrar" como manchas oscuras sobre blanco. Con el token vira solo. (16-ago) */
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* El "Cerrar" volvía a quedarse SIN BORDE por la regla de arriba (.close-button junto a
   .sidebar-action y compañía con `border: 0`), que va después y gana. Resultado: en 6
   ventanas el Cerrar parecía una palabra suelta, no un botón. Se le devuelve su forma
   aquí, después de esa regla, para que no dependa del orden. (barrido premium, 16-ago) */
.close-button {
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: var(--panel-2);
  cursor: pointer;
}
.close-button:hover { background: var(--panel-3); border-color: var(--brand); }

.home-link-button {
  cursor: pointer;
}

.home-mode-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--w04);
  border: 1px solid var(--w08);
  color: var(--w66);
  font-size: var(--fs-sm);
}

.home-window-button {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  text-align: left;
  background: var(--w045);
  border: 1px solid var(--w08);
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}

.home-window-button:hover {
  background: var(--w065);
  border-color: var(--w18);
  transform: translateY(-1px);
}

.home-action-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(48, 51, 58, 0.9);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

.home-action-icon-grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23eceff2'%3E%3Cpath d='M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z'/%3E%3C/svg%3E");
}

.home-action-icon-mode {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23eceff2'%3E%3Cpath d='M230.91,172A8,8,0,0,1,228,182.91l-96,56a8,8,0,0,1-8.06,0l-96-56A8,8,0,0,1,36,169.09l92,53.65,92-53.65A8,8,0,0,1,230.91,172ZM220,121.09l-92,53.65L36,121.09A8,8,0,0,0,28,134.91l96,56a8,8,0,0,0,8.06,0l96-56A8,8,0,1,0,220,121.09ZM24,80a8,8,0,0,1,4-6.91l96-56a8,8,0,0,1,8.06,0l96,56a8,8,0,0,1,0,13.82l-96,56a8,8,0,0,1-8.06,0l-96-56A8,8,0,0,1,24,80Zm23.88,0L128,126.74,208.12,80,128,33.26Z'/%3E%3C/svg%3E");
}

.home-action-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.home-action-copy strong,
.home-action-copy small {
  display: block;
}

.home-action-copy strong {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.home-action-copy small {
  color: var(--w5);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.home-action-caret {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-right: 1.8px solid var(--w64);
  border-bottom: 1.8px solid var(--w64);
  transform: rotate(45deg) translateY(-2px);
}

.home-mode-button {
  cursor: pointer;
}

.starter-filter.active,
.drawer-tab.active {
  background: linear-gradient(180deg, #434852, #353a42);
  color: var(--text);
  border-color: transparent;
}

.message {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius-xl);
}

.user-message {
  align-self: flex-end;
  background: rgba(45, 48, 54, 0.92);
  border: 1px solid var(--w1);
}
/* El texto del mensaje propio SÍ se puede seleccionar y copiar (móvil y escritorio). */
.user-message .message-body,
.user-message .message-body * { -webkit-user-select: text; user-select: text; cursor: text; }
/* Chip del nombre del cliente en las respuestas del Operador ([[Nombre]]). */
.lead-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--panel-3, var(--panel-3)); color: var(--text, var(--text)); font-weight: 600; font-size: 0.95em; line-height: 1.5; }

/* Panel de Contactos (F1): buscador de contactos/oportunidades de Qobrix. */
/* z-index por encima de otros diálogos (.agenda-dialog z-index:90) para que NINGÚN modal
   invisible se superponga e intercepte clics — causa del bug recurrente de "botón a medias". */
/* Por encima de TODO (sidebar/cabecera/backdrops llegan a ~10010 en móvil) → el modal de Contactos
   queda siempre delante y a pantalla completa, también en la app móvil. */
#contacts-dialog { z-index: 10060; }
#contacts-backdrop { z-index: 10059; }
.contacts-tabs { display: flex; gap: 8px; margin-top: 10px; }
.contacts-tab { flex: 1; padding: 8px 12px; border: 1px solid var(--line, #e4e9f1); background: transparent; color: var(--muted, var(--muted)); border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.contacts-tab.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.contacts-search-wrap { display: block; margin-top: 12px; }
.contacts-search-wrap input { width: 100%; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w12)); background: var(--panel-3, var(--w04)); color: var(--text, var(--text)); font: inherit; }
.contacts-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.contacts-filters[hidden] { display: none; }
.contacts-filter { flex: 1 1 130px; min-width: 120px; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w12)); background: var(--panel-3, var(--w04)); color: var(--text, var(--text)); font: inherit; cursor: pointer; }
.contacts-filter-clear { flex: 0 0 auto; padding: 9px 14px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w12)); background: transparent; color: var(--text, var(--text)); font: inherit; font-weight: 600; cursor: pointer; }
.contacts-filter-clear:hover { background: var(--panel-3, var(--w06)); }
.contacts-results { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 0; }
.contact-row { cursor: pointer; }
#contacts-dialog.showing-detail .contacts-tabs,
#contacts-dialog.showing-detail .contacts-search-wrap,
#contacts-dialog.showing-detail .contacts-filters,
#contacts-dialog.showing-detail #contacts-results,
#contacts-dialog.showing-detail #contacts-pager,
#contacts-dialog.showing-detail .contacts-qbx-subtitle,
#contacts-dialog.showing-detail #contacts-qbx-total,
#contacts-dialog.showing-detail #contacts-add-header,
#contacts-dialog.showing-detail #contacts-more { display: none !important; }
/* Desplegable de Estado dentro de la ficha (campo Detalles). */
#contacts-dialog.contacts-qbx .fd-status-auto,
#contacts-dialog.contacts-qbx .fd-quality-auto,
#contacts-dialog.contacts-qbx .fd-tipo-auto {
  margin-top: 2px; padding: 6px 10px; max-width: 240px;
  border: 1px solid var(--qbx-line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-lg); cursor: pointer;
}
#contacts-dialog.contacts-qbx .fd-status-auto:focus,
#contacts-dialog.contacts-qbx .fd-quality-auto:focus,
#contacts-dialog.contacts-qbx .fd-tipo-auto:focus { outline: none; border-color: var(--brand-ink); }
/* Casillas editables de criterios de matching (sección Presupuesto y necesidades). */
#contacts-dialog.contacts-qbx .fd-crit,
#contacts-dialog.contacts-qbx .fd-contract {
  margin-top: 2px; width: 100%; max-width: 280px; padding: 7px 10px;
  border: 1px solid var(--qbx-line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-lg);
}
#contacts-dialog.contacts-qbx .fd-crit::placeholder,
#contacts-dialog.contacts-qbx .fd-contract::placeholder { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .fd-crit:focus,
#contacts-dialog.contacts-qbx .fd-contract:focus { outline: none; border-color: var(--brand-ink); }
#contacts-dialog.contacts-qbx .fd-save-crit { margin-top: 8px; align-self: flex-start; }
.fd-hint { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-sm); font-style: italic; }
/* (La flecha de estos desplegables la pinta la regla ÚNICA de flecha de select,
   al final del archivo — antes era un SVG con trazo blanco incrustado que exigía
   un parche gemelo en tema claro. tanda S, nº15) */
.contacts-detail { margin-top: 12px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.contacts-detail[hidden] { display: none; }
/* Flecha de volver: vive en el HEADER, a la izquierda del título del apartado (misma caja que Cerrar).
   Oculta en la lista; solo aparece dentro de una ficha (showing-detail). Así no ocupa una fila propia. */
.contacts-detail-back { display: none; width: 32px; height: 32px; padding: 0; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line, var(--w12)); background: transparent; color: var(--text, var(--text)); font-size: var(--fs-2xl); line-height: 1; cursor: pointer; flex: 0 0 auto; }
#contacts-dialog.showing-detail .contacts-detail-back { display: inline-flex; }
#contacts-dialog.contacts-qbx .contacts-detail-back { color: var(--qbx-text, var(--text)); border-color: var(--qbx-line-strong, var(--line)); }
#contacts-dialog.contacts-qbx .contacts-detail-back:hover { background: var(--qbx-hover); }
/* Barra superior FIJA de la ficha (detalle): la flecha de volver + el nombre del contacto se quedan
   pegados arriba (justo debajo del título del apartado) aunque se scrollee el contenido. Antes la
   flecha vivía en el flujo scrolleable y desaparecía al bajar en fichas largas. El fondo opaco
   (= fondo del panel) tapa el contenido que pasa por debajo. (fundador 29-jul) */
/* Color (semáforo) de la pastilla de ESTADO del local en la ficha: verde disponible/traspasado,
   ámbar pendiente, azul reservado/oferta, gris retirado/cerrado. */
#contacts-dialog.contacts-qbx .fd-chip-estado.est-good,
#contacts-dialog.contacts-qbx .fd-chip-estado.est-done { background: rgba(46, 160, 67, 0.14); border-color: rgba(46, 160, 67, 0.4); color: #1e7e34; }
#contacts-dialog.contacts-qbx .fd-chip-estado.est-warn { background: rgba(217, 160, 42, 0.16); border-color: rgba(217, 160, 42, 0.45); color: #b9820f; }
#contacts-dialog.contacts-qbx .fd-chip-estado.est-info { background: rgba(var(--brand-rgb), 0.16); border-color: rgba(var(--brand-rgb), 0.4); color: var(--brand-ink); }
#contacts-dialog.contacts-qbx .fd-chip-estado.est-dead { background: var(--qbx-hover); border-color: var(--qbx-line); color: var(--qbx-muted); }
/* ── EL SEMÁFORO DEL ALTA: qué le falta a este local para salir a la web ──────────────────────
   Los colores salen de los tokens de estado (--danger/--warn/--ok), NO de hex sueltos: esta ficha
   se ve en tema claro y en oscuro, y un color fijo se vuelve ilegible en uno de los dos.
   Las tres listas van separadas a propósito — «no he podido comprobar» no es «no lo tiene». */
.fd-sem { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--table-zebra); }
.fd-sem-cab { display: flex; align-items: center; gap: 8px; }
.fd-sem-luz { font-size: var(--fs-lg); line-height: 1; }
.fd-sem-t { font-weight: 600; font-size: var(--fs-md); }
.fd-sem-rojo { background: var(--danger-bg); border-color: var(--danger-border); }
.fd-sem-rojo .fd-sem-t { color: var(--danger-text); }
.fd-sem-ambar { background: var(--warn-bg); border-color: var(--warn-border); }
.fd-sem-ambar .fd-sem-t { color: var(--warn-text); }
.fd-sem-verde { background: var(--ok-bg); border-color: var(--ok-border); }
.fd-sem-verde .fd-sem-t { color: var(--ok-text); }
.fd-sem-precio { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--qbx-muted, var(--muted)); }
.fd-sem-grupo { margin: 10px 0 0; }
.fd-sem-grupo-t { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--qbx-muted, var(--muted)); }
.fd-sem-grupo-t.is-impide { color: var(--danger-text); }
.fd-sem-grupo-t.is-avisa { color: var(--warn-text); }
.fd-sem-lista { margin: 4px 0 0; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.45; color: var(--qbx-text, var(--text)); }
.fd-sem-lista li { margin: 2px 0; }
.fd-sem-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
.fd-sem-freno, .fd-sem-perm { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.fd-sem-freno { color: var(--danger-text); }
.fd-sem-perm { color: var(--ok-text); }
/* El botón de saltarse el freno va DISCRETO a propósito: lo importante de la tarjeta es lo que le
   falta al local, no el atajo. Con el tamaño de acción normal era lo primero que veía el ojo, que
   es justo al revés de lo que este bloque tiene que conseguir. */
.fd-sem-pie .fd-act { margin: 0; padding: 5px 11px; font-size: var(--fs-sm); font-weight: 600; background: transparent; }
.fd-sem-pie .fd-act:hover { background: var(--panel-3, var(--w04)); }
.fd-head h3 { margin: 0 0 6px; font-size: var(--fs-2xl); }
/* Nombre del cliente + iconos llamar/WhatsApp al lado. */
.fd-head-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fd-head-name h3 { margin: 0; }
.fd-name-act { font-size: var(--fs-2xl); text-decoration: none; line-height: 1; }
.fd-share { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; padding: 0; background: none; border: none; cursor: pointer; color: inherit; }
.fd-share-ic { width: 18px; height: 18px; display: block; }
/* Iconos Phosphor (19-sep): de relleno, toman el color del texto. Norma, regla 8. */
svg.ph { fill: currentColor; stroke: none; }
/* AVATAR (19-sep, manual trasnego-crm-ux): las iniciales de la persona en un círculo GRIS, todos
   iguales (decisión del fundador, 20-sep: «no en color, en gris todos»). Colores de la norma. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  background: var(--table-zebra); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line);
  user-select: none;
}
.fd-head-quien { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fd-avatar { width: 40px; height: 40px; font-size: 15px; }
.fd-share:hover { opacity: 0.7; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-chip { padding: 3px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; background: var(--panel-3, var(--w06)); color: var(--text, var(--text)); border: 1px solid var(--line, var(--w12)); }
.fd-chip.is-won { background: rgba(46,160,67,0.18); border-color: rgba(46,160,67,0.5); }
.fd-chip.is-lost { background: rgba(180,60,60,0.16); border-color: rgba(180,60,60,0.45); }
.fd-section { display: flex; flex-direction: column; gap: 6px; }
.fd-section h4 { margin: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, var(--muted)); }
.fd-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-md); }
.fd-row span:first-child { color: var(--muted, var(--muted)); }
.fd-row span:last-child { text-align: right; color: var(--text, var(--text)); }
/* Ficha espejo de Qobrix: cabecera con fecha, secciones título+subtítulo azul, campos apilados. */
.fd-head-sub { margin: 2px 0 8px; color: var(--brand-ink); font-weight: 600; font-size: var(--fs-md); }
.fd-block { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line, var(--w12)); }
.fd-block:first-of-type { border-top: 0; padding-top: 4px; }
.fd-block-title { margin: 0; font-size: var(--fs-2xl); font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0; }
.fd-block-sub { margin: 0; color: var(--brand-ink); font-size: var(--fs-md); font-weight: 600; } /* el margen negativo era del layout apilado; en fila flex ya no toca */
.fd-field { display: flex; flex-direction: column; gap: 2px; }
.fd-field-k { color: var(--muted); font-size: var(--fs-sm); }
.fd-field-v { color: var(--text); font-size: var(--fs-lg); word-break: break-word; }
.fd-field-v a { color: var(--brand-ink); }
/* Móvil y correo en texto plano seleccionable (no tel:/mailto:): se leen y se copian sin disparar la llamada. */
.fd-copiable { color: var(--text); font-weight: 600; user-select: all; -webkit-user-select: all; cursor: text; }
/* Contacto como desplegable (details/summary nativo): al abrirlo salen las acciones. */
.fd-contacto { padding: 16px 0; }
/* La flechita ▾ estaba anclada al borde derecho (position:absolute), a más de un metro
   visual de su título: parecían dos cosas sin relación. Ahora la cabecera es una fila y
   la flecha va pegada al texto, en TODAS las secciones plegables de las fichas. (16-ago) */
.fd-contacto-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fd-contacto-summary::-webkit-details-marker { display: none; }
.fd-contacto-summary::after { content: "▾"; color: var(--muted); transition: transform 0.15s ease; }
.fd-contacto[open] .fd-contacto-summary::after { transform: rotate(180deg); }
.fd-contacto-body { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
/* Añadir nota (debajo de las notas): caja grande y bien marcada + botón azul Qobrix. */
.fd-note-add { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.fd-note-input {
  width: 100%; box-sizing: border-box; min-height: 72px; resize: vertical;
  padding: 10px 12px;
  border: 1.5px solid var(--qbx-line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-lg); line-height: 1.4;
}
.fd-note-input::placeholder { color: var(--qbx-muted); }
.fd-note-input:focus { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25); }
.fd-note-send { align-self: flex-start; }
/* Locales que le pueden interesar (sugerencias de matching): fila con nombre·ID + Cancelar/Ofrecer. */
.fd-sug-row { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: nowrap; padding: 8px 0; border-bottom: 1px solid var(--line, var(--w12)); }
.fd-sug-row:last-child { border-bottom: 0; }
/* Nombre de ANCHO FIJO → los botones ⬇ ✕ Ofrecer arrancan SIEMPRE en la misma columna (alineados),
   no al borde derecho ni escalonados. Si el nombre no cabe, se recorta con puntos suspensivos. */
.fd-sug-name { color: var(--text); font-size: var(--fs-lg); flex: 0 0 auto; width: 260px; max-width: 52%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-sug-name a { color: var(--brand-ink); }
.fd-sug-actions { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
/* Móvil, como el dibujo del paso 2 (§Qobrix «Locales que le pueden encajar»): el nombre ENTERO en su
   línea, «Encaja N %» debajo y los botones abajo a la derecha, de dedo (44 px). En una sola línea el
   nombre se cortaba a «Casa de Lulo · I…» y el «Encaja» no llegaba a verse (19-sep). */
@media (max-width: 560px) {
  .fd-sug-row { flex-wrap: wrap; gap: 6px 8px; padding: 10px 0; }
  .fd-sug-name { width: 100%; max-width: none; white-space: normal; overflow: visible; }
  .fd-sug-name .fd-sug-score,
  #contacts-dialog.contacts-qbx .fd-sug-name .fd-sug-score.fd-chip { display: table; margin: 4px 0 0; }
  .fd-sug-actions { margin-left: auto; }
  .fd-sug-dl, .fd-sug-cancel, .fd-sug-offer { min-height: 44px; min-width: 44px; }
}
.fd-sug-dl, .fd-sug-cancel, .fd-sug-offer, .fd-prop-offer { font-size: var(--fs-sm); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; border: 1px solid var(--line, var(--w12)); }
.fd-sug-dl, .fd-sug-cancel { background: transparent; color: var(--muted); padding: 5px 9px; line-height: 1; }
.fd-sug-dl:hover { color: var(--text); border-color: var(--text); }
.fd-sug-cancel:hover { color: #fff; background: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }
.fd-sug-dl:disabled, .fd-sug-cancel:disabled { opacity: 0.6; cursor: default; }
/* Abren WhatsApp: verde WhatsApp (fundador, 16-oct-2026, nota-m079 de qobrix, 13). */
.fd-sug-offer, .fd-prop-offer { background: var(--wa-btn-bg); border-color: var(--wa-btn-bg); color: var(--wa-btn-text); font-weight: 600; padding: 5px 12px; }
.fd-sug-offer:hover, .fd-prop-offer:hover { filter: brightness(1.06); }
.fd-sug-offer.is-armed { background: #b45309; border-color: #b45309; }
.fd-sug-offer:disabled { opacity: 0.7; cursor: default; }
/* Pull-to-refresh: indicador circular que asoma al tirar desde arriba. */
/* @keyframes ptr-spin: se conserva porque lo reutiliza el botón ↻ (.contacts-qbx-refresh.is-spinning).
   El resto del CSS del antiguo pull-to-refresh (.ptr-indicator / .ptr-spinner / .ptr-slide-spinner) se
   retiró el 29-jul al sustituir el gesto por el botón explícito. */
@keyframes ptr-spin { to { transform: rotate(360deg); } }
/* Popup de nota al cambiar el estado de un lead. */
.estado-note-overlay { position: fixed; inset: 0; z-index: 10140; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 18px; }
.estado-note-box { position: relative; width: 100%; max-width: 420px; background: var(--bg, #15181d); color: var(--qbx-text, var(--text)); border: 1px solid var(--qbx-line-strong, var(--panel-4, var(--w2))); border-radius: var(--radius-lg); padding: 18px 18px 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.estado-note-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; background: transparent; color: var(--qbx-muted, #8a93a3); font-size: var(--fs-xl); cursor: pointer; border-radius: var(--radius-sm); }
.estado-note-x:hover { background: var(--w06); color: var(--qbx-text, #fff); }
.estado-note-title { margin: 0 0 4px; font-size: var(--fs-xl); }
.estado-note-sub { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--qbx-muted, var(--muted)); }
.estado-note-statelabel { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 0; font-size: var(--fs-sm); color: var(--qbx-muted, var(--muted)); }
.estado-note-select { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: var(--radius-md); border: 1px solid var(--qbx-line-strong, var(--panel-4, var(--w2))); background: var(--panel-2, var(--bg, #0f1216)); color: var(--qbx-text, var(--text)); font: inherit; font-size: var(--fs-md); }
.estado-note-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb),0.25); }
.bc-state-label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); color: var(--qbx-muted, #8a93a3); }
.estado-note-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: var(--radius-md); border: 1px solid var(--qbx-line-strong, var(--panel-4, var(--w2))); background: var(--panel-2, var(--bg, #0f1216)); color: var(--qbx-text, var(--text)); font: inherit; font-size: var(--fs-md); resize: vertical; }
.estado-note-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb),0.25); }
.estado-note-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.estado-note-cancel, .estado-note-save { padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: var(--fs-md); }
.estado-note-cancel { background: transparent; border: 1px solid var(--qbx-line, var(--w18)); color: var(--qbx-text, #e8eaed); }
.estado-note-cancel:hover { background: var(--w06); }
.estado-note-save { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
.estado-note-save:hover { filter: brightness(1.07); }
.estado-note-save:disabled { opacity: 0.65; cursor: default; }
/* ─── Cerrar un traspaso: precio real + fecha + beneficio (24-ago-2026) ──────────────
   Reutiliza la caja del sistema (.estado-note-box: ✕ dentro, arriba a la derecha) y solo añade las
   filas de campos. Un modal nuevo habría vuelto a traer la ✕ descolocada de siempre. */
.cierre-box { max-width: 460px; }
/* Hueco reservado para la ✕: en móvil el título llega justo hasta ella, y basta una palabra más
   para que el texto se le meta debajo. La ✕ pisada es EL fallo que más veces ha tenido que
   señalar el fundador — aquí se cierra de raíz, no se deja al azar del largo del titular. */
.cierre-box .estado-note-title { padding-right: 34px; }
.cierre-row { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; font-size: var(--fs-sm); color: var(--qbx-muted, var(--muted)); }
.cierre-lbl { font-weight: 600; }
.cierre-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: var(--radius-md); border: 1px solid var(--qbx-line-strong, var(--panel-4, var(--w2))); background: var(--panel-2, var(--bg, #0f1216)); color: var(--qbx-text, var(--text)); font: inherit; font-size: var(--fs-md); }
.cierre-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb),0.25); }
.cierre-input:disabled { opacity: 0.55; cursor: default; }
/* Fecha + «Hoy» en la misma línea, alineados por el centro (el botón y el campo tienen alturas
   distintas por dentro: sin esto el botón queda un pelo alto). */
.cierre-fecha-wrap { display: flex; align-items: center; gap: 8px; }
.cierre-fecha-wrap .cierre-input { flex: 1 1 auto; min-width: 0; }
.cierre-hoy { flex: 0 0 auto; white-space: nowrap; }
.cierre-hint { font-size: var(--fs-xs); color: var(--qbx-muted, var(--muted)); }
.cierre-check { display: flex; align-items: center; gap: 8px; margin: -4px 0 4px; font-size: var(--fs-sm); color: var(--qbx-muted, var(--muted)); cursor: pointer; }
.cierre-check input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--brand); }
.cierre-error { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--danger, #e06c5b); }
.cierre-error[hidden] { display: none; }

/* EMPAREJAR un local con su valoración (31-ago-2026). Reutiliza la caja del cierre (.cierre-box,
   .cierre-input, .cierre-error): es la misma historia contada en dos pantallas, y un modal propio
   habría vuelto a traer la ✕ descolocada. Aquí solo van las filas de la lista. */
.il-lista { margin: 10px 0 0; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.il-fila { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line, var(--w12)); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.il-fila:hover { border-color: var(--brand); background: var(--w04, rgba(0,0,0,0.03)); }
.il-fila.is-actual { border-color: var(--brand); }
.il-nombre { font-weight: 600; font-size: var(--fs-sm); }
.il-meta { font-size: var(--fs-xs); color: var(--qbx-muted, var(--muted)); }
.il-check { font-size: var(--fs-xs); font-weight: 600; color: var(--brand); }
/* El número de informe en la ficha: es un código, se lee carácter a carácter. */
.fd-informe-num { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--fs-sm); }
.fd-informe-btn { margin-left: 8px; font-size: var(--fs-xs); font-weight: 600; color: #fff; background: var(--brand); border: 1px solid var(--brand); border-radius: var(--radius-sm); padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.fd-informe-btn:hover { filter: brightness(1.06); }
/* Paso 3 (19-sep): antes solo llevaba una fecha corta y cabía en la misma línea (nowrap). Ahora
   también dice «ofrecido desde TRIA el …» / «enlazado en Qobrix» (más largo) — display:block la
   baja a su propia línea bajo el nombre en vez de forzar una sola línea que se saldría en un
   móvil estrecho, compartiendo fila con el nombre, el ID y los tres botones de acción. */
.fd-prop-date { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); white-space: normal; }
/* Cómo conoció el local (m029, 14-oct): lo pidió él, en verde; se lo mandamos, en ámbar. */
.fd-prop-date.es-interes { color: var(--ok-text); font-weight: 600; }
.fd-prop-date.es-ofrecido { color: var(--warn-text); font-weight: 600; }
/* Fila de propiedad vinculada con su ✕ para quitarla. */
.fd-prop-row { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 8px; }
.fd-prop-row .fd-field-v { flex: 1 1 auto; }
/* Añadir manualmente un local a Propiedades (buscar + vincular) */
.fd-prop-add { margin-top: 10px; }
/* Mismo azul legible que "los otros azules" (Ofrecer/Interpretar): sólido var(--brand) + texto blanco,
   legible en claro y oscuro. Antes usaba var(--link) #7eb0ff (azul claro) que se perdía en modo claro. (punto 10) */
.fd-prop-add-toggle { font-size: var(--fs-sm); font-weight: 600; color: #fff; background: var(--brand); border: 1px solid var(--brand); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; }
.fd-prop-add-toggle:hover { filter: brightness(1.06); }
.fd-prop-add-box { margin-top: 8px; }
.fd-prop-add-filter { width: 100%; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line, var(--w12)); background: var(--bg, #fff); color: var(--text, inherit); font: inherit; font-size: var(--fs-sm); }
.fd-prop-add-list { margin-top: 6px; max-height: 260px; overflow-y: auto; }
.fd-prop-add-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line, var(--w12)); font-size: var(--fs-sm); }
.fd-prop-add-item:last-child { border-bottom: 0; }
.fd-prop-add-item-name { flex: 1 1 auto; }
.fd-prop-add-pick { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 600; color: #fff; background: var(--brand); border: 1px solid var(--brand); border-radius: var(--radius-sm); padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.fd-prop-add-pick:hover { filter: brightness(1.06); }
/* Caja "Interpretar con IA" en Presupuesto y necesidades */
.fd-interpret { margin-bottom: 10px; }
.fd-interpret-input { width: 100%; box-sizing: border-box; min-height: 72px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--qbx-line-strong); background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-lg); line-height: 1.4; resize: vertical; }
.fd-interpret-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.fd-interpret-btn { font-size: var(--fs-sm); font-weight: 600; color: #fff; background: var(--brand); border: 1px solid var(--brand); border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer; white-space: nowrap; }
.fd-interpret-btn:hover { filter: brightness(1.06); }
.fd-interpret-btn:disabled { opacity: 0.7; cursor: default; }
.fd-interpret-msg { font-size: var(--fs-sm); color: var(--muted); }
.fd-prop-x { flex: 0 0 auto; background: transparent; border: 1px solid var(--line, var(--w12)); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--fs-sm); padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.fd-prop-x:hover { color: #fff; background: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }
.fd-prop-x.is-armed { color: #fff; background: var(--danger, #c0392b); border-color: var(--danger, #c0392b); }
.fd-prop-x:disabled { opacity: 0.6; cursor: default; }
/* Azul de Qobrix sobre fondo OSCURO: usamos el tono claro (--link #6ea0ff) para que el texto se lea.
   El azul fuerte (--brand) se reserva para rellenos (botón) donde el texto va en blanco. */
.fd-sug-score { display: inline-block; margin-left: 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--brand-ink); white-space: nowrap; cursor: pointer; }
/* Paso 3 (19-sep): «Encaja N %» en vez de la estrella, con el mismo azul de marca que ya usa
   .fd-chip-estado.est-info (línea 2568) — reutiliza la familia .fd-chip, no inventa un chip nuevo.
   Con el prefijo #contacts-dialog.contacts-qbx (misma especificidad que el reajuste a tema claro
   de la línea 3775, «#contacts-dialog.contacts-qbx .fd-chip»): sin él, ESE override —posterior en
   el fichero— gana por especificidad de ID y deja el chip gris en vez de azul. */
.fd-sug-score.fd-chip.fd-chip-encaja,
#contacts-dialog.contacts-qbx .fd-sug-score.fd-chip.fd-chip-encaja {
  margin-left: 4px;
  background: rgba(var(--brand-rgb), 0.16);
  border-color: rgba(var(--brand-rgb), 0.4);
  color: var(--brand-ink);
}
.fd-score-cell { cursor: pointer; }
.fd-score-pop { position: absolute; z-index: 10070; width: min(290px, 92vw); background: var(--panel-2, #1a1d24); color: var(--text, #e8eaed); border: 1px solid var(--qbx-line-strong, var(--w2)); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: 0 14px 40px rgba(0,0,0,0.5); font-size: var(--fs-sm); line-height: 1.4; }
.fd-score-pop strong { display: block; margin-bottom: 4px; color: var(--link, var(--link)); }
.fd-score-pop p { margin: 0 0 6px; }
.fd-score-pop-sub { font-weight: 600; }
.fd-score-pop-list { margin: 4px 0 0; padding-left: 18px; }
.fd-score-pop-list li { margin: 2px 0; }
.fd-sug-refresh-wrap { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.fd-sug-refresh { font-size: var(--fs-sm); padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--brand-ink); background: transparent; color: var(--brand-ink); font-weight: 600; }
.fd-sug-refresh:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.fd-sug-refresh:disabled { opacity: 0.6; cursor: default; }
/* "Ver retirados": secundario (gris) para que no compita con Actualizar búsqueda. */
.fd-sug-retirados { font-size: var(--fs-sm); padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--line, var(--w12)); background: transparent; color: var(--muted); font-weight: 600; }
.fd-sug-retirados:hover { color: var(--text); border-color: var(--text); }
.fd-retirados-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.fd-retirado-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--line, var(--w12)); border-radius: var(--radius-sm); }
.fd-retirado-name { font-size: var(--fs-sm); color: var(--text); }
.fd-retirado-name small { color: var(--muted); }
.fd-retirado-restore { flex: 0 0 auto; font-size: var(--fs-sm); padding: 5px 11px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--brand); background: var(--brand); color: #fff; font-weight: 600; white-space: nowrap; }
.fd-retirado-restore:hover { filter: brightness(1.06); }
.fd-retirado-restore:disabled { opacity: 0.6; cursor: default; }
.fd-followup-overdue { color: var(--danger, #c56565); font-weight: 600; }
.fd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-act { padding: 9px 14px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w12)); background: var(--panel-3, var(--w04)); color: var(--text, var(--text)); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.fd-act.is-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.fd-act.is-wa, #contacts-dialog.contacts-qbx .fd-act.is-wa { background: var(--wa-btn-bg); border-color: var(--wa-btn-bg); color: var(--wa-btn-text); font-weight: 600; }
.fd-desc { font-size: var(--fs-md); color: var(--text, var(--text)); white-space: pre-wrap; }
.contacts-empty { color: var(--muted, var(--muted)); font-size: var(--fs-md); padding: 18px 4px; text-align: center; }
.contact-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, var(--w08)); border-radius: var(--radius-md); background: var(--panel-3, var(--w03)); }
.contact-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.contact-main b { font-size: var(--fs-lg); }
.contact-sub { font-size: var(--fs-sm); color: var(--muted, var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.contact-status { font-size: var(--fs-xs); padding: 3px 9px; border-radius: 999px; background: var(--panel-3, var(--panel-3)); color: var(--text, var(--text)); white-space: nowrap; }
.contact-act { text-decoration: none; font-size: var(--fs-2xl); }
.contact-row.is-clickable { cursor: pointer; }
/* Registro de reasignaciones: «de quién a quién y por qué» es lo que se lee; no se corta, baja de línea. */
.contact-row.es-reasig .contact-sub { white-space: normal; }
.contact-row.is-clickable:hover { border-color: var(--brand); }

/* Botón "Nueva" en la fila de pestañas + "Cargar más" */
.contacts-new { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--brand); background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.contacts-more { margin-top: 12px; width: 100%; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w12)); background: var(--panel-3, var(--w04)); color: var(--text, var(--text)); font: inherit; font-weight: 600; cursor: pointer; }
.contacts-more[hidden] { display: none; }

/* Controles de edición dentro de la ficha */
.fd-edit { border-top: 1px solid var(--line, var(--w1)); padding-top: 12px; }
.fd-edit-row { display: flex; flex-direction: column; gap: 6px; }
.fd-edit-label { font-size: var(--fs-sm); color: var(--muted, var(--muted)); font-weight: 600; }
.fd-edit-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.fd-edit-select { flex: 1; min-width: 120px; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w12)); background: var(--panel-3, var(--w04)); color: var(--text, var(--text)); font: inherit; }
.fd-edit-textarea { flex: 1 1 100%; min-width: 0; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w12)); background: var(--panel-3, var(--w04)); color: var(--text, var(--text)); font: inherit; resize: vertical; }
.fd-edit-status { font-size: var(--fs-sm); color: var(--muted, var(--muted)); margin: 4px 0 0; }
.fd-edit-status[hidden] { display: none; }
.fd-edit-status.is-error { color: #f08a8a; }
.fd-edit-status.is-ok { color: #6cd07f; }
.fd-comment { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--line, var(--w06)); }
.fd-comment-date { font-size: var(--fs-xs); color: var(--muted, var(--muted)); }
.fd-comment-text { font-size: var(--fs-nota); line-height: 1.45; color: var(--text, var(--text)); white-space: pre-wrap; }

/* Diálogo de confirmación (preview→confirmar) */
.contacts-confirm-overlay { position: fixed; inset: 0; z-index: 10130; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 12, 20, 0.55); }
.contacts-confirm-panel { width: 100%; max-width: 420px; background: var(--panel, #161b24); border: 1px solid var(--line, var(--w12)); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.contacts-confirm-text { margin: 0; color: var(--text, var(--text)); font-size: var(--fs-lg); line-height: 1.45; white-space: pre-wrap; }
.contacts-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* Formulario de alta */
.contacts-new-overlay { position: fixed; inset: 0; z-index: 10120; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 12, 20, 0.55); overflow-y: auto; }
.contacts-new-panel { width: 100%; max-width: 720px; background: var(--panel, #161b24); border: 1px solid var(--line, var(--w12)); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; max-height: 92vh; overflow-y: auto; }
.contacts-new-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contacts-new-head h3 { margin: 0; font-size: var(--fs-2xl); }
.contacts-new-hint { margin: 0; font-size: var(--fs-sm); color: var(--muted, var(--muted)); }
/* Caja «Añadir» (15-oct-2026, dibujo aprobado): pasos arriba y casillas en rejillas de 3 → 2 → 1 columnas. */
.contacts-new-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cn-paso { display: grid; gap: 8px; }
.cn-paso-t { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.cn-grupo-t { margin: 0 0 -8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.cn-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cn-tipo .fd-act { display: grid; gap: 2px; min-height: 44px; text-align: left; }
.cn-tipo .fd-act small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.cn-tipo .fd-act[aria-pressed="true"] { border-color: var(--accion); background: var(--info-bg); color: var(--accion); box-shadow: inset 0 0 0 1px var(--accion); }
.cn-tipo .fd-act[aria-pressed="true"] small { color: var(--accion); }
.cn-pegar { padding: 12px; border: 1px solid var(--info-border); border-radius: var(--radius-md); background: var(--info-bg); }
.cn-pegar textarea { width: 100%; box-sizing: border-box; min-height: 88px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--text); font: inherit; resize: vertical; }
.cn-pegar-pie { display: flex; justify-content: flex-end; }
.cn-resumen { margin: 0; font-size: var(--fs-sm); color: var(--text); }
.cn-resumen-tipo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cn-rej { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cn-rej[hidden] { display: none; }
.cn-field.cn-tria input, .cn-field.cn-tria select, .cn-field.cn-tria textarea { border-color: var(--info-border); background: var(--info-bg); }
.cn-field.cn-falta input, .cn-field.cn-falta select { border-color: var(--danger-border); background: var(--danger-bg); }
.cn-marca { font-style: normal; font-size: var(--fs-2xs); font-weight: 600; color: var(--info-text); }
.cn-falta .cn-marca { color: var(--danger-text); }
@media (max-width: 720px) { .cn-rej { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cn-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--muted, var(--muted)); font-weight: 600; }
.cn-field-wide { grid-column: 1 / -1; }
.cn-field input, .cn-field select, .cn-field textarea { padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w12)); background: var(--panel-3, var(--w04)); color: var(--text, var(--text)); font: inherit; font-weight: 400; }
.cn-field textarea { resize: vertical; }
.cn-dups { grid-column: 1 / -1; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w1)); background: var(--panel-3, var(--w03)); font-size: var(--fs-sm); }
.cn-dups[hidden] { display: none; }
.cn-dups-title { margin: 0 0 6px; color: #f0c87a; font-weight: 600; }
.cn-dups-ok { margin: 0; color: #6cd07f; }
.cn-dup-item { padding: 3px 0; color: var(--text, var(--text)); }
.cn-dup-meta { color: var(--muted, var(--muted)); font-size: var(--fs-sm); }
.contacts-new-form .fd-edit-status { grid-column: 1 / -1; }
.contacts-new-form .contacts-confirm-actions { grid-column: 1 / -1; }
@media (max-width: 480px) { .cn-rej { grid-template-columns: minmax(0, 1fr); } }
/* Local del alta manual (fase 4, 24-sep-2026): se escribe, sale una lista corta y se elige uno. */
.cn-local { position: relative; }
.cn-local label { color: inherit; }
.cn-local-lista { display: grid; max-height: 264px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel); }
.cn-local-lista[hidden], .cn-local-elegido[hidden], .cn-local input[hidden] { display: none; }
.cn-local-opcion { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.cn-local-opcion:last-child { border-bottom: 0; }
@media (hover: hover) { .cn-local-opcion:hover { background: var(--panel-2); } }
.cn-local-opcion:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; }
.cn-local-id { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cn-local-vacio { margin: 0; padding: 8px 12px; color: var(--muted); font-weight: 400; }
.cn-local-elegido { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 6px 6px 6px 12px; border: 1px solid var(--info-border); border-radius: var(--radius-md); background: var(--info-bg); color: var(--text); font-weight: 400; }
.cn-local-elegido strong { font-weight: 600; }
@media (max-width: 768px) {
  .cn-local-opcion, .cn-local-elegido, .cn-local-elegido .fd-act { min-height: 44px; }
  /* «Cerrar», «Cancelar» y «Guardar» medían 39-40 px (pasada como asesor, 24-sep). */
  .contacts-new-panel .contacts-confirm-actions .fd-act, .contacts-new-head .close-button { min-height: 44px; min-width: 44px; }
  .contacts-new-panel .cn-field input, .contacts-new-panel .cn-field select, .contacts-new-panel .cn-pegar .fd-act, .contacts-new-panel .cn-resumen .fd-act { min-height: 44px; }
}

/* ============================================================================
   TEMA CLARO ESTILO QOBRIX — SOLO dentro de #contacts-dialog.contacts-qbx.
   Clona la lista de Oportunidades de Qobrix (fondo blanco) sin tocar el resto
   del PWA (oscuro). Usa !important donde haga falta para ganar a las reglas
   .agenda-dialog (que llevan !important). Variables locales = paleta Qobrix.
   ============================================================================ */
#contacts-dialog.contacts-qbx {
  /* El panel sigue el tema (oscuro por defecto; blanco como Qobrix en tema claro). */
  --qbx-bg: var(--panel);
  --qbx-text: var(--text);
  --qbx-muted: var(--muted);
  --qbx-line: var(--line);
  --qbx-line-strong: var(--line-strong);
  --qbx-hover: var(--table-zebra);
  --qbx-accent: var(--brand);
  background: var(--qbx-bg) !important;
  border: 1px solid var(--qbx-line-strong) !important;
  color: var(--qbx-text) !important;
  /* PANTALLA COMPLETA: ocupa todo el viewport (también arregla el solape con el sidebar en móvil). */
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100dvh !important;
  transform: none !important;
  border-radius: 0 !important;
  /* Filas explícitas (7): cabecera, actionbar (toggle+Añadir), filtros, resultados (flexible), more,
     pager, detail. Las pestañas ahora viven DENTRO de la cabecera (ya no ocupan fila propia). */
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto !important;
  gap: 5px !important; /* compacta el espacio vertical entre cabecera/actionbar/lista */
}

/* Cabecera */
#contacts-dialog.contacts-qbx .contacts-qbx-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--qbx-line) !important;
  padding-bottom: 6px !important;
}
#contacts-dialog.contacts-qbx .contacts-qbx-heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#contacts-dialog.contacts-qbx .contacts-qbx-title-row { display: flex; align-items: center; gap: 10px; }
#contacts-dialog.contacts-qbx .contacts-qbx-title-row h2 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: var(--qbx-text) !important;
}
#contacts-dialog.contacts-qbx .contacts-qbx-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), 0.14);
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
}
#contacts-dialog.contacts-qbx .contacts-qbx-badge[hidden] { display: none; }
#contacts-dialog.contacts-qbx .contacts-qbx-subtitle {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--qbx-muted); /* era --brand-ink: parecía un ENLACE y competía con el título */
}
/* (el subtítulo es por pestaña desde JS — 17-ago; ya no hace falta esconderlo en Contactos) */
#contacts-dialog.contacts-qbx .contacts-qbx-header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Botón "Añadir" estilo .btn.primary del sistema (radio --radius-sm, no pastilla). */
/* "Añadir" MIGRADO al sistema: usa .btn.primary (color/radio/peso/hover/active). Solo queda el delta de padding. */
#contacts-dialog.contacts-qbx .contacts-qbx-add { padding: 8px 16px; }

/* "Cerrar" estilo .btn.ghost del sistema (borde, radio --radius-sm). */
/* (El "Cerrar" en pastilla propio del panel Qobrix se retiró el 16-ago: el fundador
   decidió UNA sola ✕ redonda en toda la app — la pone la regla global del final.) */

/* Botón ↻ (actualizar) junto a "Cerrar" (fundador 29-jul, sustituye al pull-to-refresh). NO usa la clase
   .close-button a propósito: así NO hereda su ✕ (::before), su font-size:0 ni su posición absoluta en
   móvil, que hacían que el ↻ se superpusiera con la X mostrando "✕↻". Estilo propio de botón-icono. */
#contacts-dialog.contacts-qbx .contacts-qbx-refresh {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--qbx-line-strong);
  color: var(--qbx-text);
  font-size: 1.2rem; line-height: 1; font-weight: 600;
  cursor: pointer;
}
#contacts-dialog.contacts-qbx .contacts-qbx-refresh:hover { background: var(--w06); }

/* El "+" de crear, hermano del ↻. En ESCRITORIO se oculta porque ahí manda el botón
   "Añadir" de la barra de acciones; en MÓVIL es el único acceso a crear (la media query
   de abajo esconde el "Añadir"). Sin él, en el móvil no había forma de crear nada. */
#contacts-dialog.contacts-qbx .contacts-qbx-add-header {
  display: none;
  align-items: center; justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--qbx-line-strong);
  color: var(--qbx-text);
  font-size: 1.2rem; line-height: 1; font-weight: 600;
  cursor: pointer;
}
#contacts-dialog.contacts-qbx .contacts-qbx-add-header:hover { background: var(--w06); }
#contacts-dialog.contacts-qbx .contacts-qbx-refresh.is-spinning { pointer-events: none; opacity: 0.75; animation: ptr-spin 0.7s linear infinite; }
/* En la ficha (showing-detail) el ↻ no aplica (ahí está el ← volver); se oculta. */
#contacts-dialog.showing-detail #refresh-contacts-dialog { display: none !important; }

/* Pestañas (Oportunidades / Contactos) como SEGMENTOS del sistema (radio --radius-sm, no pastilla).
   Activa = look .btn.primary; inactiva = look .btn.ghost. Viven en la cabecera. */
#contacts-dialog.contacts-qbx .contacts-tabs { display: flex; gap: 6px; margin-top: 0; align-items: stretch; }
#contacts-dialog.contacts-qbx .contacts-tab {
  flex: 1;
  text-align: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--qbx-line-strong);
  background: transparent;
  color: var(--qbx-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
#contacts-dialog.contacts-qbx .contacts-tab:hover { background: var(--w06); }
#contacts-dialog.contacts-qbx .contacts-tab:active { transform: translateY(1px); }
#contacts-dialog.contacts-qbx .contacts-tab.is-active {
  background: var(--qbx-accent);
  border-color: var(--brand-ink);
  color: var(--brand-contrast);
}
#contacts-dialog.contacts-qbx .contacts-tab.is-active:hover { background: var(--brand-strong); }

/* Barra de acciones: toggle de filtros a la izquierda, Añadir a la derecha. */
#contacts-dialog.contacts-qbx .contacts-actionbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
/* Agrupar la barra: izquierda lupa + "Mostrar filtros"; el orden empuja orden + "Añadir" a la derecha. */
#contacts-dialog.contacts-qbx .contacts-sort { margin-left: auto; }
#contacts-dialog.showing-detail .contacts-actionbar { display: none; }

/* Filtros como pastillas (pills) con etiqueta flotante */
#contacts-dialog.contacts-qbx .contacts-filters { gap: 12px; }
#contacts-dialog.contacts-qbx .cf-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 150px;
  min-width: 140px;
  max-width: 210px;
}
#contacts-dialog.contacts-qbx .cf-pill[hidden] { display: none; }
/* Label flotante ANIMADO de las pastillas de fecha/precio: descansa "dentro" (oculto, el placeholder
   del select/input se ve) y, al ganar valor (.cf-pill.has-value), sube suavemente al borde superior. */
#contacts-dialog.contacts-qbx .cf-pill > label {
  position: absolute;
  top: 50%;
  left: 10px;
  padding: 0 5px;
  background: var(--panel-3, var(--qbx-bg));
  color: var(--qbx-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  transition: top 0.16s ease, font-size 0.16s ease, opacity 0.16s ease;
  z-index: 1;
}
#contacts-dialog.contacts-qbx .cf-pill.has-value > label {
  top: -7px;
  font-size: var(--fs-3xs);
  opacity: 1;
  transform: translateY(0);
}
#contacts-dialog.contacts-qbx .cf-pill .contacts-filter,
#contacts-dialog.contacts-qbx .cf-pill > input {
  width: 100%;
  height: 36px;
  padding: 0 28px 0 13px;
  border-radius: var(--radius-sm);
  /* Estilo SISTEMA TRIA: input RELLENO (panel-3) con borde suave, no caja outline. */
  border: 1px solid var(--qbx-line);
  background: var(--panel-3, var(--qbx-bg));
  color: var(--qbx-text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* (chevron: lo pinta la regla ÚNICA de flecha de select del final del archivo — tanda U) */
}
#contacts-dialog.contacts-qbx .cf-pill.cf-pill-search { flex: 1 1 220px; max-width: 280px; }
/* Precio = pastilla tipo tria-ms que abre un panel con dual-range slider (ver más abajo). */
#contacts-dialog.contacts-qbx .cf-pill.cf-pill-price { display: inline-flex; align-items: center; }
#contacts-dialog.contacts-qbx .cf-pill > input {
  cursor: text;
  background-image: none;
  padding-right: 16px;
}
#contacts-dialog.contacts-qbx .cf-pill .contacts-filter:hover,
#contacts-dialog.contacts-qbx .cf-pill > input:hover {
  background: var(--panel-4, var(--qbx-bg));
}
#contacts-dialog.contacts-qbx .cf-pill .contacts-filter:focus,
#contacts-dialog.contacts-qbx .cf-pill > input:focus {
  outline: none;
  background: var(--panel-4, var(--qbx-bg));
  border-color: var(--brand, var(--qbx-accent));
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25);
}
#contacts-dialog.contacts-qbx .cf-pill > input::placeholder { color: var(--qbx-muted); }

/* ── Filtro multi-casilla "Propiedades" (pastilla + panel desplegable, tema-aware) ── */
#contacts-dialog.contacts-qbx .cf-pill.cf-pill-multi {
  display: inline-flex;
  align-items: center;
}
#contacts-dialog.contacts-qbx .contacts-multi-btn {
  width: 100%;
  height: 36px;
  padding: 0 28px 0 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--qbx-line);
  background: var(--panel-3, var(--qbx-bg));
  color: var(--qbx-text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* (chevron: lo pinta la regla ÚNICA de flecha de select del final del archivo — tanda U) */
}
#contacts-dialog.contacts-qbx .contacts-multi-btn:hover {
  background: var(--panel-4, var(--qbx-bg));
}
#contacts-dialog.contacts-qbx .contacts-multi-btn:focus {
  outline: none;
  background: var(--panel-4, var(--qbx-bg));
  border-color: var(--brand, var(--qbx-accent));
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25);
}
#contacts-dialog.contacts-qbx .contacts-multi-btn.is-active {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
}
#contacts-dialog.contacts-qbx .contacts-multi-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 300px;
  max-width: 80vw;
  padding: 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--qbx-line-strong);
  background: var(--qbx-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
#contacts-dialog.contacts-qbx .contacts-multi-panel[hidden] { display: none; }
#contacts-dialog.contacts-qbx .contacts-multi-search {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--qbx-line-strong);
  background: var(--qbx-bg);
  color: var(--qbx-text);
  font: inherit;
}
#contacts-dialog.contacts-qbx .contacts-multi-search::placeholder { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .contacts-multi-search:focus {
  outline: none;
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25);
}
#contacts-dialog.contacts-qbx .contacts-multi-list {
  max-height: 280px;
  overflow-y: auto;
}
#contacts-dialog.contacts-qbx .contacts-multi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  color: var(--qbx-text);
  font-size: var(--fs-md);
  cursor: pointer;
}
#contacts-dialog.contacts-qbx .contacts-multi-item:hover { background: var(--qbx-hover); }
#contacts-dialog.contacts-qbx .contacts-multi-item > input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brand-ink);
}
#contacts-dialog.contacts-qbx .contacts-multi-empty {
  margin: 0;
  padding: 10px 8px;
  color: var(--qbx-muted);
  font-size: var(--fs-md);
}

/* ── Componente REUTILIZABLE multi-casilla (tria-ms): botón con label flotante animado + resumen ── */
#contacts-dialog.contacts-qbx .cf-pill.cf-pill-multi { display: inline-flex; align-items: center; }
#contacts-dialog.contacts-qbx .tria-ms { position: relative; width: 100%; }
#contacts-dialog.contacts-qbx .tria-ms-btn {
  position: relative;
  width: 100%;
  height: 36px;
  padding: 0 28px 0 13px;
  border-radius: var(--radius-sm);
  /* Estilo SISTEMA TRIA: botón RELLENO (panel-3) con borde suave, no caja outline. */
  border: 1px solid var(--qbx-line);
  background: var(--panel-3, var(--qbx-bg));
  color: var(--qbx-text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* (chevron: lo pinta la regla ÚNICA de flecha de select del final del archivo — tanda U) */
}
#contacts-dialog.contacts-qbx .tria-ms-btn:hover {
  background: var(--panel-4, var(--qbx-bg));
}
#contacts-dialog.contacts-qbx .tria-ms-btn:focus {
  outline: none;
  background: var(--panel-4, var(--qbx-bg));
  border-color: var(--brand, var(--qbx-accent));
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25);
}
#contacts-dialog.contacts-qbx .tria-ms-btn.is-active {
  border-color: var(--brand, var(--qbx-accent));
}
#contacts-dialog.contacts-qbx .tria-ms-text {
  display: block;
  width: 100%;
  min-width: 0;
}
/* Label: VACÍO → dentro del botón, centrado, como placeholder (muted). Posicionado respecto al .tria-ms
   para poder flotar fuera del botón sin que se recorte. */
#contacts-dialog.contacts-qbx .tria-ms-label {
  position: absolute;
  top: 0;
  left: 13px;
  color: var(--qbx-muted);
  font-size: var(--fs-sm);
  line-height: 36px;
  pointer-events: none;
  transition: top 0.16s ease, left 0.16s ease, font-size 0.16s ease, line-height 0.16s ease;
  z-index: 1;
}
/* Resumen "1ª etiqueta +N": oculto cuando vacío; con valor ocupa el botón con elipsis. */
#contacts-dialog.contacts-qbx .tria-ms-value {
  display: none;
  color: var(--qbx-text);
  font-size: var(--fs-sm);
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
}
/* CON selección (.has-value): el label SE MUEVE al borde superior (flotante) y aparece el resumen. */
#contacts-dialog.contacts-qbx .tria-ms.has-value .tria-ms-label {
  top: -7px;
  left: 10px;
  padding: 0 5px;
  background: var(--panel-3, var(--qbx-bg));
  font-size: var(--fs-3xs);
  line-height: 1;
}
#contacts-dialog.contacts-qbx .tria-ms.has-value .tria-ms-value { display: block; }
/* ✕ gris para limpiar SOLO este filtro: dentro del botón, ANTES del chevron. Solo con selección. */
#contacts-dialog.contacts-qbx .tria-ms-clear {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--qbx-muted);
  font-size: var(--fs-2xs);
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: color 0.12s ease, background 0.12s ease;
}
#contacts-dialog.contacts-qbx .tria-ms-clear:hover { color: var(--qbx-text); background: var(--w06); }
/* Deja sitio al resumen para no solaparse con la ✕ cuando está. */
#contacts-dialog.contacts-qbx .tria-ms-btn:has(.tria-ms-clear) .tria-ms-value { padding-right: 22px; }
/* Panel: mismo estilo que el panel multi existente (reutiliza clases). */
#contacts-dialog.contacts-qbx .tria-ms-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 300px;
  max-width: 80vw;
  padding: 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--qbx-line-strong);
  background: var(--qbx-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
#contacts-dialog.contacts-qbx .tria-ms-panel[hidden] { display: none; }
#contacts-dialog.contacts-qbx .tria-ms-search {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--qbx-line-strong);
  background: var(--qbx-bg);
  color: var(--qbx-text);
  font: inherit;
}
#contacts-dialog.contacts-qbx .tria-ms-search::placeholder { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .tria-ms-search:focus {
  outline: none;
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25);
}
#contacts-dialog.contacts-qbx .tria-ms-list { max-height: 280px; overflow-y: auto; }
/* Las casillas del panel reutilizan .contacts-multi-item (definido arriba). */

/* ── Panel de PRECIO: dual-range slider (dos thumbs) 0–300.000 € ── */
#contacts-dialog.contacts-qbx .tria-ms-price-panel { width: 280px; }
#contacts-dialog.contacts-qbx .tria-range-readout {
  margin: 2px 2px 12px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--qbx-text);
  text-align: center;
}
/* Pista: contenedor relativo de 36px de alto; los dos inputs range se superponen. */
#contacts-dialog.contacts-qbx .tria-range {
  position: relative;
  height: 36px;
  margin: 0 6px;
}
/* Carril de fondo (gris) y relleno seleccionado (marca), ambos centrados verticalmente. */
#contacts-dialog.contacts-qbx .tria-range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--qbx-line-strong);
}
#contacts-dialog.contacts-qbx .tria-range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--brand, var(--qbx-accent));
}
/* Los dos inputs ocupan toda la pista; sin fondo (la pista la pintan los divs).
   pointer-events:none en la barra para que solo el thumb capture el ratón → ambos thumbs usables. */
#contacts-dialog.contacts-qbx .tria-range input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 36px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
#contacts-dialog.contacts-qbx .tria-range input[type="range"]::-webkit-slider-runnable-track {
  background: none;
  height: 36px;
}
#contacts-dialog.contacts-qbx .tria-range input[type="range"]::-moz-range-track {
  background: none;
  height: 36px;
}
#contacts-dialog.contacts-qbx .tria-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand, var(--qbx-accent));
  border: 2px solid var(--panel, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  margin-top: 9px;
}
#contacts-dialog.contacts-qbx .tria-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand, var(--qbx-accent));
  border: 2px solid var(--panel, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
#contacts-dialog.contacts-qbx .tria-range-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
#contacts-dialog.contacts-qbx .tria-range-reset {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--qbx-line);
  background: var(--panel-3, var(--qbx-bg));
  color: var(--brand, var(--qbx-accent));
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
#contacts-dialog.contacts-qbx .tria-range-reset:hover {
  background: var(--panel-4, var(--qbx-hover));
  border-color: var(--brand, var(--qbx-accent));
}

#contacts-dialog.contacts-qbx .contacts-filter-clear {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--qbx-line);
  background: var(--panel-3, var(--qbx-bg));
  color: var(--brand, var(--qbx-accent));
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background 0.14s ease, border-color 0.14s ease;
}
#contacts-dialog.contacts-qbx .contacts-filter-clear:hover {
  background: var(--panel-4, var(--qbx-hover));
  border-color: var(--brand, var(--qbx-accent));
}

/* Zona de resultados: se estira (fila 1fr del grid) para llenar el alto disponible,
   con scroll propio, de modo que NO quede hueco entre la última fila y la paginación. */
#contacts-dialog.contacts-qbx .contacts-results {
  background: var(--qbx-bg);
  min-height: 220px;
  height: 100%;
  /* Scroll 2D: el vertical (filas) y el horizontal (columnas) los hace la LISTA, para que la CABECERA
     pueda quedar sticky respecto a ella (fija arriba al scrollear). (fundador 29-jul) */
  overflow-x: auto;
  margin-top: 0;
  overflow-y: auto;
}
#contacts-dialog.contacts-qbx .contacts-empty { color: var(--qbx-muted); }

/* Tabla estilo Qobrix (Oportunidades) */
#contacts-dialog.contacts-qbx .cqx-table { display: flex; flex-direction: column; width: 100%; }
#contacts-dialog.contacts-qbx .cqx-thead,
#contacts-dialog.contacts-qbx .cqx-row {
  display: grid;
  grid-template-columns: minmax(170px, 2.1fr) 0.9fr 1.2fr 1fr 1.2fr 1.1fr 1.2fr;
  gap: 14px;
  align-items: center;
}
#contacts-dialog.contacts-qbx .cqx-table.no-advisor .cqx-thead,
#contacts-dialog.contacts-qbx .cqx-table.no-advisor .cqx-row {
  grid-template-columns: minmax(170px, 2.3fr) 0.9fr 1.2fr 1fr 1.2fr 1.2fr;
}
#contacts-dialog.contacts-qbx .cqx-table.no-advisor .cqx-c-advisor { display: none; }
/* Columna Tipo (Comprador/Vendedor) con pastilla: compradores/inquilinos azul, vendedores/propietarios ámbar. */
#contacts-dialog.contacts-qbx .cqx-c-tipo { font-size: var(--fs-sm); min-width: 0; }
.cqx-tipo-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--panel-3, var(--w06)); color: var(--qbx-text); border: 1px solid var(--qbx-line); white-space: nowrap; }
.cqx-tipo-pill.cqx-tipo-comprador, .cqx-tipo-pill.cqx-tipo-inquilino { background: rgba(var(--brand-rgb), 0.16); border-color: rgba(var(--brand-rgb), 0.4); color: var(--brand-ink); }
/* Vendedor con los colores de aviso de la casa (19-sep): el ámbar #d9a02a sobre su fondo daba 2,05:1 de
   contraste en el tema claro y casi no se leía. Con estos tokens: 5,46:1 en claro y 8,23:1 en oscuro
   (--warn-text se quedaba en 4,52, justo en el límite para una letra tan pequeña). */
.cqx-tipo-pill.cqx-tipo-vendedor, .cqx-tipo-pill.cqx-tipo-propietario { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warning); }
#contacts-dialog.contacts-qbx .cqx-thead {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Separación suave: fondo sutil + borde inferior ligero (distingue la cabecera sin recargar). */
  background: var(--panel-2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--w06);
}
#contacts-dialog.contacts-qbx .cqx-th {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--qbx-muted);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Cabeceras clicables para ordenar: botón plano que parece texto + flecha. */
#contacts-dialog.contacts-qbx .cqx-th-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--qbx-muted);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
#contacts-dialog.contacts-qbx .cqx-th-sort:hover { color: var(--qbx-text); }
#contacts-dialog.contacts-qbx .cqx-th-sort.is-sorted { color: var(--brand-ink); }
/* BUG FIX: en el ENCABEZADO la celda Nombre va en FILA (texto + ▾ en una línea); las celdas de
   DATOS .cqx-row .cqx-c-name siguen en columna. */
#contacts-dialog.contacts-qbx .cqx-thead .cqx-c-name { flex-direction: row; align-items: center; gap: 4px; }
#contacts-dialog.contacts-qbx .cqx-sort { color: var(--qbx-muted); font-size: var(--fs-2xs); flex: 0 0 auto; }
#contacts-dialog.contacts-qbx .cqx-th-sort.is-sorted .cqx-sort { color: var(--brand-ink); }
/* Separadores de columna MUY ligeros a partir de la 2ª celda (thead y filas), para marcar secciones. */
#contacts-dialog.contacts-qbx .cqx-thead > *:not(:first-child),
#contacts-dialog.contacts-qbx .cqx-row > *:not(:first-child) {
  border-left: 1px solid var(--w04);
  padding-left: 8px;
}
#contacts-dialog.contacts-qbx .cqx-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--w06);
  color: var(--qbx-text);
  cursor: default;
}
#contacts-dialog.contacts-qbx .cqx-row.is-clickable { cursor: pointer; }
#contacts-dialog.contacts-qbx .cqx-row.is-clickable:hover { background: var(--qbx-hover); }
#contacts-dialog.contacts-qbx .cqx-td {
  font-size: var(--fs-md);
  color: var(--qbx-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contacts-dialog.contacts-qbx .cqx-c-name { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
#contacts-dialog.contacts-qbx .cqx-name { font-size: var(--fs-md); font-weight: 600; color: var(--qbx-text); }
#contacts-dialog.contacts-qbx .cqx-subline {
  font-size: var(--fs-xs);
  color: var(--qbx-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#contacts-dialog.contacts-qbx .cqx-ref { color: var(--brand-ink); text-decoration: none; }
#contacts-dialog.contacts-qbx .cqx-ref:hover { text-decoration: underline; }
#contacts-dialog.contacts-qbx .cqx-act { text-decoration: none; font-size: var(--fs-xl); opacity: 0.75; }
#contacts-dialog.contacts-qbx .cqx-act:hover { opacity: 1; }
#contacts-dialog.contacts-qbx .cqx-c-date,
#contacts-dialog.contacts-qbx .cqx-c-advisor,
#contacts-dialog.contacts-qbx .cqx-c-campaign { color: var(--qbx-muted); }

/* Tarjetas (pestaña Contactos) en tema claro */
#contacts-dialog.contacts-qbx .contact-row {
  border: 1px solid var(--qbx-line) !important;
  background: var(--qbx-bg) !important;
}
#contacts-dialog.contacts-qbx .contact-row.is-clickable:hover { border-color: var(--brand-ink) !important; background: var(--qbx-hover) !important; }
#contacts-dialog.contacts-qbx .contact-main b { color: var(--qbx-text); }
#contacts-dialog.contacts-qbx .contact-sub { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .contact-status { background: var(--qbx-hover); color: var(--qbx-text); border: 1px solid var(--qbx-line); }

/* Paginación numérica estilo Qobrix */
#contacts-dialog.contacts-qbx .contacts-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 4px 2px;
  border-top: 1px solid var(--qbx-line);
}
#contacts-dialog.contacts-qbx .contacts-pager[hidden] { display: none; }
#contacts-dialog.contacts-qbx .cqx-pg-info { font-size: var(--fs-sm); color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .cqx-pg-nav { display: flex; align-items: center; gap: 4px; }
#contacts-dialog.contacts-qbx .cqx-pg-num,
#contacts-dialog.contacts-qbx .cqx-pg-arrow {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--qbx-text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
#contacts-dialog.contacts-qbx .cqx-pg-num:hover,
#contacts-dialog.contacts-qbx .cqx-pg-arrow:hover:not([disabled]) { background: var(--qbx-hover); }
#contacts-dialog.contacts-qbx .cqx-pg-num.is-current {
  background: var(--qbx-accent);
  border-color: var(--brand-ink);
  color: #fff;
  font-weight: 600;
}
#contacts-dialog.contacts-qbx .cqx-pg-arrow[disabled] { color: var(--qbx-muted); opacity: 0.6; cursor: default; }
/* La línea del móvil (opción B, elegida por el fundador el 21-sep-2026): «‹ Página 1 de 51 ›».
   En el ordenador no existe; en el móvil es lo único que sale. */
#contacts-dialog.contacts-qbx .cqx-pg-movil { display: none; }
@media (max-width: 768px) {
  /* COMPACTA (21-sep-2026, fundador: «hay mucho espacio, se puede hacer más compacto todavía»).
     Medido antes: 55 px de línea + 23 px vacíos debajo = 78 px de pantalla para decir en qué página
     estás. Ahora una sola fila de 36 px, el texto en una línea y sin hueco debajo. */
  /* Debajo del paginador ya queda el hueco de la rejilla (5 px): sin relleno extra. */
  #contacts-dialog.contacts-qbx:not(.showing-detail) { padding-bottom: 0 !important; }
  #contacts-dialog.contacts-qbx .contacts-pager { padding: 4px 0 0; gap: 0; }
  #contacts-dialog.contacts-qbx .cqx-pg-info,
  #contacts-dialog.contacts-qbx .cqx-pg-nav { display: none; }
  #contacts-dialog.contacts-qbx .cqx-pg-movil {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  }
  /* 36 px a la vista, pero 44 para el dedo: el `::after` agranda la zona que se toca sin ocupar sitio. */
  #contacts-dialog.contacts-qbx .cqx-pg-grande {
    position: relative; min-width: 36px; width: 36px; height: 36px; padding: 0;
    border-color: var(--qbx-line); border-radius: 9px; font-size: 1.25em; line-height: 1;
  }
  #contacts-dialog.contacts-qbx .cqx-pg-grande::after { content: ""; position: absolute; inset: -4px; }
  #contacts-dialog.contacts-qbx .cqx-pg-donde {
    flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--fs-sm); color: var(--qbx-muted);
  }
  #contacts-dialog.contacts-qbx .cqx-pg-donde b { display: inline; font-size: inherit; color: var(--qbx-text); }
  #contacts-dialog.contacts-qbx .cqx-pg-donde small { font-size: inherit; }
  #contacts-dialog.contacts-qbx .cqx-pg-donde small::before { content: " · "; }
}
#contacts-dialog.contacts-qbx .cqx-pg-gap { color: var(--qbx-muted); padding: 0 2px; }

/* Las piezas de la fila del móvil no existen en el ordenador: allí la tabla sigue como estaba. */
#contacts-dialog.contacts-qbx .cqx-nombre-y-estado { display: contents; }
#contacts-dialog.contacts-qbx .cqx-m-estado,
#contacts-dialog.contacts-qbx .cqx-m-linea,
#contacts-dialog.contacts-qbx .cqx-m-ultima,
#contacts-dialog.contacts-qbx .cqx-m-mas { display: none; }
/* Phosphor (19-sep): de RELLENO, sin trazo (norma, regla 8). */
#contacts-dialog.contacts-qbx .cqx-icono { width: 20px; height: 20px; fill: currentColor; stroke: none; vertical-align: middle; }

/* Móvil: Oportunidades = UNA FILA POR OPORTUNIDAD que se lee sin deslizar (19-sep-2026, dibujo aprobado
   docs/diseno/paso2-inicio-y-qobrix.html §Qobrix; sustituye a la tabla deslizable del 29-jul, que en un
   móvil de 390 px medía 1.000 y escondía estado y asesor a la derecha). Las celdas de ordenador se
   funden en la fila (display: contents) y cada pieza cae en su sitio: nombre y estado · tipo, asesor y
   campaña · seguimiento vencido · cuándo se tocó, llamar, WhatsApp y «⋯». El estado se cambia tocando
   su etiqueta (19-sep, tarde) y el «⋯» abre en la misma fila el asesor, la nota y el favorito: no se ha
   quitado ninguna función.
   Locales y Captaciones siguen deslizables hasta el paso 4: por eso todo va colgado de `.cqx-row`
   (Captaciones reutiliza `.cqx-act` en su tabla y no debe cambiar; juez, 19-sep). */
@media (max-width: 720px) {
  #contacts-dialog.contacts-qbx .cqx-table { min-width: 0; }
  #contacts-dialog.contacts-qbx .cqx-thead { display: none; }
  #contacts-dialog.contacts-qbx .cqx-row,
  #contacts-dialog.contacts-qbx .cqx-table.no-advisor .cqx-row {
    /* Disposición B, aprobada por el fundador el 20-sep («como WhatsApp»): arriba el nombre y, a su
       derecha, cuándo fue la última vez; debajo comprador/vendedor y quién lo lleva; y en la tercera
       línea el estado, que se toca, con llamar, WhatsApp y «⋯». Sin iniciales a la izquierda desde el
       25-sep (fundador, 22-sep: «quiero quitar iniciales de la lista de oportunidades»). */
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px;
    grid-template-areas:
      "nombre nombre nombre fecha"
      "linea  linea  linea  linea"
      "vence  vence  vence  vence"
      "estado llamar wa     mas"
      "asesor asesor asesor asesor"
      "nota   nota   nota   nota"
      "botones botones botones botones";
    gap: 0;
    padding: 12px 4px 4px 12px;
  }
  #contacts-dialog.contacts-qbx .cqx-row > *:not(:first-child) { border-left: 0; padding-left: 0; }
  #contacts-dialog.contacts-qbx .cqx-row .cqx-c-name,
  #contacts-dialog.contacts-qbx .cqx-row .cqx-name-row { display: contents; }
  #contacts-dialog.contacts-qbx .cqx-nombre-y-estado { display: contents; }
  #contacts-dialog.contacts-qbx .cqx-row .cqx-name { grid-area: nombre; align-self: center; padding-right: 8px; }
  /* La última vez, arriba a la derecha (como la hora de un chat). */
  #contacts-dialog.contacts-qbx .cqx-m-ultima { grid-area: fecha; justify-self: end; align-self: center; padding-right: 10px; white-space: nowrap; }
  #contacts-dialog.contacts-qbx .cqx-m-estado { grid-area: estado; justify-self: start; align-self: center; margin-top: 4px; }
  #contacts-dialog.contacts-qbx .cqx-row .cqx-name { overflow-wrap: anywhere; }
  #contacts-dialog.contacts-qbx .cqx-m-estado {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--qbx-line-strong); background: var(--qbx-hover);
    color: var(--qbx-text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  }
  /* El estado SE TOCA Y SE CAMBIA en su etiqueta (fundador 19-sep: «pinchar y cambiar, para no pinchar
     en tres puntos»). Cómo funciona, en la regla común «es-cambiable» (fuera de este bloque); aquí,
     solo el tamaño de la etiqueta de la fila. */
  #contacts-dialog.contacts-qbx .cqx-m-estado.es-cambiable { min-height: 32px; padding: 0 28px 0 12px; }
  /* El nombre y la línea de debajo tienen que PARECER tocables para Chrome. Chrome «corrige» un toque
     hacia el control más cercano y prefiere lo de dentro a la fila que lo contiene: sin esto, un toque
     en la línea justo bajo el estado se lo quedaba el desplegable y la ficha no se abría (medido el
     19-sep). Un :active basta para que cuenten, y de paso el dedo ve que ha tocado. */
  #contacts-dialog.contacts-qbx .cqx-row .cqx-name:active,
  #contacts-dialog.contacts-qbx .cqx-row .cqx-m-linea:active { opacity: 0.6; }
  /* La línea de debajo: comprador/vendedor en su etiqueta de color y, solo para admin y supervisor,
     quién lo lleva. Sin campaña en el móvil (fundador 19-sep). */
  #contacts-dialog.contacts-qbx .cqx-m-linea { grid-area: linea; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: var(--fs-sm); color: var(--qbx-muted); overflow-wrap: anywhere; padding-right: 12px; }
  #contacts-dialog.contacts-qbx .cqx-m-lleva { min-width: 0; }
  /* Dibujo B: comprador/vendedor sin recuadro — un punto de su color y la palabra, en la línea gris. */
  #contacts-dialog.contacts-qbx .cqx-m-linea .cqx-tipo-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
    font-size: var(--fs-sm); font-weight: 650;
  }
  #contacts-dialog.contacts-qbx .cqx-m-linea .cqx-tipo-pill::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
  }
  #contacts-dialog.contacts-qbx .cqx-m-linea .cqx-tipo-pill + .cqx-m-lleva::before { content: "· "; }
  #contacts-dialog.contacts-qbx .cqx-m-ultima { display: block; font-size: var(--fs-sm); color: var(--qbx-muted); }
  /* Llamar, WhatsApp y «⋯»: de dedo (44 px), abajo a la derecha. */
  #contacts-dialog.contacts-qbx .cqx-row .cqx-act,
  #contacts-dialog.contacts-qbx .cqx-m-mas {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 0; border-radius: 10px; background: transparent; color: var(--qbx-text); opacity: 1; cursor: pointer;
  }
  #contacts-dialog.contacts-qbx .cqx-row .cqx-act[data-channel="llamada"] { grid-area: llamar; }
  #contacts-dialog.contacts-qbx .cqx-row .cqx-act[data-channel="whatsapp"] { grid-area: wa; }
  #contacts-dialog.contacts-qbx .cqx-m-mas { grid-area: mas; }
  #contacts-dialog.contacts-qbx .cqx-m-mas svg { width: 22px; height: 22px; fill: currentColor; }
  #contacts-dialog.contacts-qbx .cqx-row .cqx-act .cqx-icono { width: 22px; height: 22px; }
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-m-mas { background: var(--qbx-hover); }
  /* Lo de ordenador que ya va dicho en la línea, fuera; y los controles, solo con el «⋯» abierto. */
  #contacts-dialog.contacts-qbx .cqx-row .cqx-c-tipo,
  #contacts-dialog.contacts-qbx .cqx-row .cqx-c-creado,
  #contacts-dialog.contacts-qbx .cqx-row .cqx-c-modif,
  #contacts-dialog.contacts-qbx .cqx-row .cqx-c-campaign,
  #contacts-dialog.contacts-qbx .cqx-row .cqx-c-status,
  #contacts-dialog.contacts-qbx .cqx-row:not(.is-abierta) .cqx-c-advisor,
  #contacts-dialog.contacts-qbx .cqx-row:not(.is-abierta) .cqx-comment-toggle,
  #contacts-dialog.contacts-qbx .cqx-row:not(.is-abierta) .cqx-fav-toggle,
  #contacts-dialog.contacts-qbx .cqx-row:not(.is-abierta) .cqx-comment { display: none; }
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-c-advisor { grid-area: asesor; padding-top: 8px; }
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-comment { grid-area: nota; margin-top: 4px; }
  /* Nota y Favorito, como los atajos de la ficha: dos botones iguales, medio y medio, con el icono
     arriba y la palabra debajo (opción A, elegida por el fundador el 20-sep). Antes eran dos
     palabras sueltas tiradas a los extremos y no parecían tocables. */
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-m-acciones {
    grid-area: botones; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-top: 10px; padding-right: 12px;
  }
  /* Cada control con su nombre: un desplegable que dice «Silvia Alfonso» no dice que es el asesor. */
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-c-advisor::before {
    display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--qbx-muted); margin-bottom: 2px;
    content: "Lo lleva";
  }
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-comment-toggle,
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-fav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 60px; padding: 10px 8px; width: 100%;
    border: 1px solid var(--qbx-line-strong); border-radius: 10px; background: var(--qbx-bg);
  }
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-comment-toggle .cqx-icono,
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-fav-toggle .cqx-icono,
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-comment-toggle svg,
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-fav-toggle svg { width: 20px; height: 20px; }
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-comment-toggle::after { content: "Nota"; font-size: var(--fs-sm); font-weight: 600; color: var(--qbx-text); }
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-fav-toggle::after { content: "Favorito"; font-size: var(--fs-sm); font-weight: 600; color: var(--qbx-text); }
  /* Si ya es favorito, que se note: la estrella se rellena (regla común) y la palabra lo dice. */
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-fav-toggle.is-on::after { content: "En favoritos"; }
  #contacts-dialog.contacts-qbx .cqx-row.is-abierta .cqx-advisor-select { width: 100%; min-height: 44px; }
  #contacts-dialog.contacts-qbx .cf-pill,
  #contacts-dialog.contacts-qbx .cf-pill.cf-pill-search { flex: 1 1 100%; max-width: none; }
}

/* LO QUE SE CAMBIA TOCÁNDOLO (19-sep-2026): una etiqueta o un botón que enseña el valor de ahora y
   lleva encima su desplegable, invisible, a lo ancho y de 44 px de alto para el dedo. Es UNA regla para
   todos: la etiqueta de estado de cada fila de la lista en el móvil y los botones de estado y de «Lleva»
   de la ficha. La flecha es la de todos los desplegables, para que se note que se toca. Letra de 16 px
   en el desplegable: con menos, el iPhone amplía la pantalla al tocarlo. («[class]» sube la fuerza por
   encima de la regla única de flechas del final del fichero, que pinta los mismos desplegables.) */
#contacts-dialog.contacts-qbx .es-cambiable {
  position: relative; cursor: pointer; padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-arrow, var(--muted)) 50%),
    linear-gradient(135deg, var(--select-arrow, var(--muted)) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
#contacts-dialog.contacts-qbx .es-cambiable > select[class] {
  position: absolute; left: 0; top: 50%; width: 100%; min-width: 44px; height: 44px; margin: -22px 0 0;
  padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer;
}
#contacts-dialog.contacts-qbx .es-cambiable:focus-within {
  border-color: var(--brand-ink); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25);
}
#contacts-dialog.contacts-qbx .es-cambiable:has(> select:disabled) { opacity: 0.6; }

/* LA FICHA DE UN CLIENTE (dibujo aprobado 19-sep, `docs/diseno/paso2-inicio-y-qobrix.html` §«La ficha
   de un comprador»). Arriba: nombre y compartir, las etiquetas, los dos botones que más se cambian
   (estado y quién lo lleva), los cuatro atajos y el próximo seguimiento. Debajo, las secciones. */
#contacts-dialog.contacts-qbx .fd-head-name { justify-content: space-between; flex-wrap: nowrap; align-items: center; }
#contacts-dialog.contacts-qbx .fd-head-name h3 { min-width: 0; overflow-wrap: anywhere; }
#contacts-dialog.contacts-qbx .fd-head .fd-share { flex: 0 0 44px; width: 44px; height: 44px; color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .fd-head .fd-share-ic { width: 20px; height: 20px; }
#contacts-dialog.contacts-qbx .fd-head .fd-chips { margin-top: 6px; align-items: center; }
#contacts-dialog.contacts-qbx .fd-head .cqx-tipo-pill { font-size: var(--fs-sm); padding: 3px 10px; }
#contacts-dialog.contacts-qbx .fd-cab-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#contacts-dialog.contacts-qbx .fd-cab-control {
  display: inline-flex; align-items: center; min-height: 44px; padding-left: 14px; max-width: 100%;
  border: 1px solid var(--qbx-line-strong); border-radius: var(--radius-sm); background-color: var(--qbx-bg);
  color: var(--qbx-text); font-weight: 600; font-size: var(--fs-md);
}
#contacts-dialog.contacts-qbx .fd-cab-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#contacts-dialog.contacts-qbx .fd-atajos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; padding: 14px 0 4px; max-width: 560px;
}
#contacts-dialog.contacts-qbx .fd-atajo,
#contacts-dialog.contacts-qbx .fd-atajos a.fd-atajo { /* más fuerza que «.contacts-detail a», que pinta de azul los enlaces */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 56px; padding: 6px 4px; border: 1px solid var(--qbx-line); border-radius: var(--radius-sm);
  background: var(--qbx-bg); color: var(--qbx-text); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; cursor: pointer;
}
#contacts-dialog.contacts-qbx .fd-atajo:active { background: var(--qbx-hover); }
#contacts-dialog.contacts-qbx .fd-atajo .cqx-icono { width: 22px; height: 22px; }
#contacts-dialog.contacts-qbx .fd-atajo.fd-fav.is-on { color: var(--warning); }
/* Favorito: la estrella vacía y la llena son dos dibujos de Phosphor; se enseña uno u otro. */
#contacts-dialog.contacts-qbx .fd-atajo.fd-fav .ph-on,
#contacts-dialog.contacts-qbx .fd-atajo.fd-fav.is-on .ph-off { display: none; }
#contacts-dialog.contacts-qbx .fd-atajo.fd-fav.is-on .ph-on { display: inline-block; }
#contacts-dialog.contacts-qbx .fd-atajo.fd-fav.is-on span { color: var(--qbx-text); }
#contacts-dialog.contacts-qbx .fd-seguimiento {
  display: flex; flex-direction: column; gap: 2px; margin: 10px 0 4px; padding: 12px 14px;
  border: 1px solid var(--qbx-line); border-radius: var(--radius-sm); background: var(--qbx-hover);
}
#contacts-dialog.contacts-qbx .fd-seguimiento-k { font-size: var(--fs-sm); color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .fd-seguimiento-v { font-size: var(--fs-lg); font-weight: 600; color: var(--qbx-text); }
/* Paso 3 (19-sep): «Cambiar la fecha». Sin fecha, el valor se lee apagado («Sin fecha») para que se
   note que falta, no que se cargó mal. */
#contacts-dialog.contacts-qbx .fd-seguimiento-sin { color: var(--qbx-muted); font-weight: 500; }
/* Como el dibujo: solo se ve el enlace. El calendario nativo va encima, transparente, y es lo
   que recibe el toque (así el teléfono abre SU calendario). 44 px de alto: de dedo. */
#contacts-dialog.contacts-qbx .fd-seguimiento-cambiar {
  position: relative; display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 44px; margin-top: 2px; cursor: pointer;
}
#contacts-dialog.contacts-qbx .fd-seguimiento-cambiar > span {
  font-size: var(--fs-sm); color: var(--link, var(--brand-ink)); font-weight: 600;
}
#contacts-dialog.contacts-qbx .fd-followup {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px;
}
#contacts-dialog.contacts-qbx .fd-seguimiento-cambiar:focus-within > span {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px;
}
/* La próxima tarea de Mi agenda (7-oct-2026): la MISMA caja que «Próximo seguimiento», pegada debajo.
   Vencida, en el rojo de «vencido» de la ficha. */
#contacts-dialog.contacts-qbx .fd-seguimiento.fd-proxima { margin-top: 6px; }
#contacts-dialog.contacts-qbx .fd-seguimiento-v.is-vencida { color: var(--danger-text); }
#contacts-dialog.contacts-qbx .fd-chip.fd-chip-vencido { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
#contacts-dialog.contacts-qbx .fd-pie { margin-top: 4px; }
#contacts-dialog.contacts-qbx .fd-enlace { color: var(--link, var(--brand-ink)); font-weight: 600; }

/* Ficha (detalle) en tema claro: el panel ahora es blanco, así que los .fd-* (pensados para fondo
   oscuro) necesitan texto/superficies oscuras para seguir siendo legibles. */
#contacts-dialog.contacts-qbx .contacts-detail-back {
  border: 1px solid var(--qbx-line-strong);
  background: var(--qbx-bg);
  color: var(--qbx-text);
}
#contacts-dialog.contacts-qbx .contacts-detail-back:hover { background: var(--qbx-hover); }
#contacts-dialog.contacts-qbx .fd-head h3 { color: var(--qbx-text); }
#contacts-dialog.contacts-qbx .fd-chip { background: var(--qbx-hover); color: var(--qbx-text); border: 1px solid var(--qbx-line-strong); }
#contacts-dialog.contacts-qbx .fd-chip.is-won { background: rgba(46, 160, 67, 0.14); border-color: rgba(46, 160, 67, 0.4); color: #1e7e34; }
#contacts-dialog.contacts-qbx .fd-chip.is-lost { background: rgba(180, 60, 60, 0.12); border-color: rgba(180, 60, 60, 0.35); color: #b03434; }
#contacts-dialog.contacts-qbx .fd-section h4 { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .fd-row span:first-child { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .fd-row span:last-child { color: var(--qbx-text); }
#contacts-dialog.contacts-qbx .fd-desc { color: var(--qbx-text); }
#contacts-dialog.contacts-qbx .fd-act {
  border: 1px solid var(--qbx-line-strong);
  background: var(--qbx-bg);
  color: var(--qbx-text);
}
#contacts-dialog.contacts-qbx .fd-act.is-primary { background: var(--qbx-accent); border-color: var(--brand-ink); color: #fff; }
#contacts-dialog.contacts-qbx .fd-edit { border-top: 1px solid var(--qbx-line); }
#contacts-dialog.contacts-qbx .fd-edit-label { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .fd-edit-select,
#contacts-dialog.contacts-qbx .fd-edit-textarea {
  border: 1px solid var(--qbx-line-strong);
  background: var(--qbx-bg);
  color: var(--qbx-text);
}
#contacts-dialog.contacts-qbx .fd-edit-status { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .fd-comment { border-bottom: 1px solid var(--qbx-line); }
#contacts-dialog.contacts-qbx .fd-comment-date { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .fd-comment-text { color: var(--qbx-text); }
#contacts-dialog.contacts-qbx .contacts-detail a { color: var(--brand-ink); }

.assistant-message {
  align-self: stretch;
  background: transparent;
  border: 0;
  padding-inline: 0;
}

.message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  /* La cabecera no es texto seleccionable: evita que un click un pelín
     desviado del botón Editar inicie selección de texto y muestre el cursor
     I-beam en vez de permitir pinchar (el botón cuesta más de acertar cuando
     el mensaje no está centrado). */
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  z-index: 3;
}

.message-role {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.user-message-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.user-message-edit-button {
  border: 1px solid var(--w14);
  border-radius: 999px;
  /* Zona de click más generosa para que sea fácil de acertar en cualquier
     posición de scroll (antes era un objetivo pequeño y un leve desvío caía
     en el texto de la burbuja). */
  padding: 0.5rem 0.95rem;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: rgba(244, 247, 250, 0.82);
  background: var(--w055);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
  /* Fix móvil: iOS Safari ignora taps en algunos contextos sin estos. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--w12);
  -webkit-user-select: none;
  user-select: none;
  /* Garantizar que el botón está sobre cualquier capa de texto seleccionable. */
  position: relative;
  z-index: 2;
}

.user-message-edit-button:hover {
  color: #ffffff;
  border-color: var(--w28);
  background: var(--w09);
}

.user-message.is-editing {
  width: min(720px, 100%);
  gap: 12px;
}

.user-message-edit-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--w16);
  border-radius: var(--radius-xl);
  padding: 0.9rem 1rem;
  /* Tokens: el texto casi-blanco + fondo oscuro fijos dejaban la caja gris con
     texto blanco en modo claro (bug editar mensaje 7-jul). */
  color: var(--text);
  background: var(--bg-soft);
  outline: none;
  font: inherit;
  font-size: var(--fs-xl);
  line-height: 1.55;
}

.user-message-edit-input:focus {
  border-color: var(--w32);
  box-shadow: 0 0 0 3px var(--w055);
}

.user-message-edit-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0;
  margin-left: auto;
}

.user-message-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.78rem;
  flex-wrap: wrap;
}

.user-message-edit-cancel,
.user-message-edit-submit {
  border: 1px solid var(--w14);
  border-radius: 999px;
  padding: 0.7rem 1.05rem;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.user-message-edit-cancel {
  color: color-mix(in srgb, var(--text) 82%, transparent);
  background: var(--w05);
}

/* Botón invertido: fondo w92 se invierte solo con el tema (blanco↔negro);
   el texto usa --bg (el inverso de --text) para invertirse a la par. */
.user-message-edit-submit {
  color: var(--bg);
  border-color: var(--w72);
  background: var(--w92);
}

.user-message-edit-cancel:hover {
  color: var(--text);
  background: var(--w09);
}

.user-message-edit-submit:hover {
  background: var(--w97);
}

.message-edit-note {
  margin-top: 0.55rem !important;
  color: var(--w48);
  font-size: var(--fs-xs);
  font-weight: 750;
}

.inline-edit-note {
  flex: 1 1 260px;
  margin: 0 !important;
  color: var(--w58);
}

.message-body p,
.message-body ul,
.message-body ol {
  margin: 0;
  line-height: 1.6;
}

.message-body p + p,
.message-body p + ul,
.message-body p + ol,
.message-body ul + p,
.message-body ol + p {
  margin-top: 10px;
}

.message-body ul,
.message-body ol {
  padding-left: 18px;
}

.response-summary {
  display: grid;
  gap: 8px;
}

.assistant-primary-answer {
  display: grid;
  gap: 14px;
  color: rgba(243, 246, 248, 0.94);
  font-size: var(--fs-xl);
  line-height: 1.68;
}

.assistant-primary-answer h3 {
  margin: 8px 0 -2px;
  color: var(--text);
  font-size: var(--fs-2xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.assistant-primary-answer .rich-heading {
  display: block;
  margin: 8px 0 -2px;
  color: var(--text);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.assistant-primary-answer p > .rich-heading:first-child {
  margin-top: 0;
}

.assistant-primary-answer p,
.assistant-primary-answer ul,
.assistant-primary-answer ol {
  margin: 0;
}

.assistant-primary-answer ul,
.assistant-primary-answer ol {
  padding-left: 22px;
}

.assistant-primary-answer li + li {
  margin-top: 4px;
}

.qobrix-pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

/* La acción que se va a mandar a Qobrix, como tarjeta: el cliente y «antes → después» por campo. */
.qobrix-pending-card {
  display: grid; gap: 8px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--panel-2);
}
.qobrix-pending-quien { margin: 0; color: var(--text); font-size: var(--fs-md); }
/* La línea bajo el nombre (16-oct-2026, m058 «A»): gris, una línea, pulsable para abrir la ficha; lo urgente en ámbar. */
.qobrix-pending-linea { display: block; margin: 0; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; cursor: pointer; }
button.qobrix-pending-linea:hover, button.qobrix-pending-linea:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.qobrix-pending-alerta { color: var(--warn-text); font-weight: 700; }
.qobrix-pending-cambio { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.qobrix-pending-campo { color: var(--muted); font-size: var(--fs-sm); }
.qobrix-pending-valores { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.qobrix-pending-antes { color: var(--muted); text-decoration: line-through; }
.qobrix-pending-flecha { color: var(--muted); }
.qobrix-pending-despues { color: var(--text); font-weight: 700; }
.qobrix-pending-nota { color: var(--text); overflow-wrap: anywhere; }
.qobrix-pending-aviso { margin: 0; color: var(--warn-text); font-size: var(--fs-sm); }

.qobrix-pending-field-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 0.65rem;
  width: 100%;
  margin-bottom: 0.2rem;
}

.qobrix-pending-field {
  display: grid;
  gap: 0.35rem;
  color: var(--muted); /* era blanco fijo: ilegible en claro */
  font-size: var(--fs-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qobrix-pending-field select {
  width: 100%;
  min-height: 43px;
  border: 1px solid rgba(93, 178, 255, 0.32);
  border-radius: var(--radius-lg);
  padding: 0 0.85rem;
  color: var(--text); /* era casi-blanco fijo */
  background: var(--w075);
  font: inherit;
  font-size: var(--fs-lg);
  font-weight: 760;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
}

.qobrix-pending-field select:focus {
  border-color: rgba(120, 200, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(61, 162, 255, 0.14);
}

.qobrix-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.qobrix-quick-reply-button {
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 0.68rem 0.95rem;
  color: var(--text, #f0f8ff);
  background: rgba(var(--brand-rgb), 0.16);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.qobrix-quick-reply-button:hover {
  transform: translateY(-1px);
  border-color: var(--brand-strong);
  background: rgba(var(--brand-rgb), 0.28);
}

.qobrix-whatsapp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.qobrix-whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(61, 220, 132, 0.42);
  border-radius: 999px;
  padding: 0.7rem 1.05rem;
  color: var(--text); /* era casi-blanco fijo: ilegible en claro */
  background: linear-gradient(135deg, rgba(29, 185, 84, 0.34), var(--w06));
  box-shadow: inset 0 1px 0 var(--w1);
  font: inherit;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.qobrix-whatsapp-button:hover {
  transform: translateY(-1px);
  border-color: rgba(90, 245, 160, 0.68);
  background: linear-gradient(135deg, rgba(29, 185, 84, 0.46), var(--w09));
}

.qobrix-pending-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(120, 176, 230, 0.42);
  border-radius: var(--radius-sm); /* unificar la forma con el resto de botones .btn (29-jun) */
  padding: 0.46rem 0.78rem;
  color: rgba(239, 247, 255, 0.96);
  background: linear-gradient(180deg, rgba(42, 55, 69, 0.9), rgba(25, 32, 41, 0.92));
  box-shadow:
    inset 0 1px 0 var(--w1),
    0 1px 0 rgba(0, 0, 0, 0.32);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 760;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.qobrix-pending-button:hover,
.qobrix-pending-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(135, 205, 255, 0.72);
  background: linear-gradient(180deg, rgba(50, 70, 88, 0.96), rgba(29, 39, 50, 0.98));
  box-shadow:
    inset 0 1px 0 var(--w14),
    0 0 0 3px rgba(80, 170, 255, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.24);
  outline: none;
}

.qobrix-pending-button:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.32);
}

.qobrix-pending-button.confirm {
  border-color: var(--brand-ink);
  color: var(--brand-contrast);
  background: var(--brand);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.qobrix-pending-button.cancel {
  /* Tokens semánticos: viran con el tema (el granate fijo era ilegible en claro). */
  border-color: var(--danger-border);
  color: var(--danger-text);
  background: var(--danger-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.qobrix-pending-button.confirm:hover,
.qobrix-pending-button.confirm:focus-visible {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.qobrix-pending-button.cancel:hover,
.qobrix-pending-button.cancel:focus-visible {
  border-color: rgba(255, 124, 137, 0.86);
  background: linear-gradient(180deg, rgba(111, 42, 51, 0.98), rgba(67, 28, 35, 0.99));
  box-shadow:
    inset 0 1px 0 var(--w14),
    0 0 0 3px rgba(235, 92, 106, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.24);
}

@media (max-width: 620px) {
  .qobrix-pending-field-controls {
    grid-template-columns: 1fr;
  }
}

.assistant-primary-answer .checklist-lines {
  list-style: none;
  padding-left: 0;
}

.assistant-primary-answer .checklist-lines li {
  position: relative;
  padding-left: 24px;
}

.assistant-primary-answer .checklist-lines li::before {
  content: "☐";
  position: absolute;
  left: 0;
  color: var(--muted); /* era gris-claro fijo: invisible en claro */
}

.response-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--w55);
  position: relative;
  z-index: 2;
  overflow: visible;
}

.response-feedback.feedback-menu-open {
  z-index: 100; /* banda de flotantes del chat; antes 12040, por ENCIMA de los modales (10000+) */
}

.response-feedback-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.response-feedback-button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--w76);
  font-weight: 800;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

/* Phosphor (19-sep): de relleno, sin trazo (norma, regla 8). */
.response-feedback-button svg {
  width: 23px;
  height: 23px;
  display: block;
  fill: currentColor;
  stroke: none;
}

.response-feedback-button svg circle {
  fill: currentColor;
  stroke: none;
}

.response-feedback-button:hover,
.response-feedback-button.active {
  background: var(--w075);
  border-color: var(--w08);
  color: #ffffff;
}

.response-feedback-button:hover {
  transform: translateY(-1px);
}

.response-feedback-menu-wrap {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.response-feedback.feedback-menu-open .response-feedback-menu-wrap {
  z-index: 100;
}

.response-feedback-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 101;
  min-width: 220px;
  max-width: min(260px, calc(100vw - 44px));
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--panel); /* era rgba(30,32,36,.98): negro sobre negro en claro */
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  pointer-events: auto;
}

.response-feedback-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.response-feedback-menu button span {
  pointer-events: none;
}

.response-feedback-menu button:hover {
  background: var(--panel-3);
  color: var(--text);
}

.response-feedback-menu button[data-feedback-tooltip]::before,
.response-feedback-menu button[data-feedback-tooltip]::after {
  position: absolute;
  top: 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.response-feedback-menu button[data-feedback-tooltip]::before {
  content: "";
  left: calc(100% + 2px);
  transform: translate(-4px, -50%);
  border: 7px solid transparent;
  border-right-color: rgba(15, 17, 21, 0.98);
  z-index: 21;
}

.response-feedback-menu button[data-feedback-tooltip]::after {
  content: attr(data-feedback-tooltip);
  left: calc(100% + 14px);
  transform: translate(-6px, -50%);
  width: min(285px, 72vw);
  padding: 10px 12px;
  border: 1px solid var(--w14);
  border-radius: var(--radius-lg);
  background: rgba(15, 17, 21, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  color: var(--w9);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  z-index: 20;
}

.response-feedback-menu button[data-feedback-tooltip]:hover::before,
.response-feedback-menu button[data-feedback-tooltip]:hover::after,
.response-feedback-menu button[data-feedback-tooltip]:focus-visible::before,
.response-feedback-menu button[data-feedback-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.response-feedback-status {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--w52);
}

.response-feedback-time {
  margin-left: 2px;
  color: var(--w46);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.answer-follow-ups {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.answer-follow-ups span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.answer-follow-ups div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.answer-follow-ups button {
  border: 1px solid var(--w12);
  border-radius: 999px;
  padding: 9px 12px;
  background: var(--w055);
  color: rgba(243, 246, 248, 0.9);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-md);
}

.answer-follow-ups button:hover {
  background: var(--w09);
  border-color: var(--w18);
}

.operational-answer {
  display: grid;
  gap: 12px;
}

.decision-card {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 18px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at top right, var(--w08), transparent 38%),
    linear-gradient(180deg, rgba(64, 68, 75, 0.94), rgba(42, 45, 51, 0.95));
  border: 1px solid var(--w16);
  box-shadow: inset 0 1px 0 var(--w05);
}

.decision-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(236, 239, 242, 0.38);
}

.decision-card.confidence-alto::before {
  background: rgba(151, 199, 165, 0.88);
}

.decision-card.confidence-medio::before {
  background: rgba(214, 192, 126, 0.88);
}

.decision-card.confidence-bajo,
.decision-card.confidence-escalar {
  border-color: rgba(215, 139, 139, 0.28);
}

.decision-card.confidence-bajo::before,
.decision-card.confidence-escalar::before {
  background: rgba(216, 126, 126, 0.92);
}

.decision-card span,
.action-card span,
.escalation-strip span {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.decision-card strong {
  color: var(--text);
  font-size: clamp(1.08rem, 1.7vw, 1.42rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.decision-card p {
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.action-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.action-card {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 14px;
  border-radius: var(--radius-xl);
  background: rgba(47, 51, 58, 0.9);
  border: 1px solid var(--w105);
}

.action-card p,
.escalation-strip p {
  color: rgba(238, 242, 246, 0.88);
}

.action-card-risk {
  border-color: rgba(215, 139, 139, 0.22);
  background:
    radial-gradient(circle at top right, rgba(215, 139, 139, 0.08), transparent 44%),
    rgba(47, 51, 58, 0.9);
}

.action-card-next {
  border-color: rgba(170, 190, 210, 0.22);
}

.escalation-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-xl);
  background: rgba(36, 39, 45, 0.9);
  border: 1px solid var(--w1);
}

.escalation-strip > div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.escalation-strip strong {
  color: var(--text);
  font-size: var(--fs-xl);
}

.escalation-strip.needs-escalation {
  border-color: rgba(215, 139, 139, 0.28);
  background:
    radial-gradient(circle at top left, rgba(215, 139, 139, 0.09), transparent 44%),
    rgba(36, 39, 45, 0.92);
}

.compact-summary-grid,
.response-grid,
.judge-columns,
.improvement-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.judge-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-summary-card,
.response-card,
.response-list-block,
.judge-list,
.metric-card,
.improvement-block,
.compact-panel {
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(47, 51, 58, 0.88);
  border: 1px solid var(--line);
}

.compact-summary-card span,
.response-card h3,
.response-list-block h4,
.judge-list h3,
.metric-label,
.improvement-block h3,
.field span,
.drawer-eyebrow {
  margin: 0 0 8px;
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.response-card h3,
.response-list-block h4,
.judge-list h3,
.improvement-block h3 {
  margin-bottom: 10px;
}

.message-details {
  margin-top: 2px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.message-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
}

.message-details[open] summary {
  margin-bottom: 12px;
}

.response-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.sources,
.judge-meta,
.judge-footer,
.improvement-links,
.pill-group,
.history-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-chip,
.artifact-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(48, 51, 58, 0.9);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.composer {
  display: grid;
  gap: 12px;
  width: min(948px, 100%);
  margin: 0 auto;
  padding: 10px 24px 30px;
}

.composer-shell {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 10px 12px 10px 10px;
  border-radius: 36px;
  border: 1px solid var(--w11);
  background:
    radial-gradient(circle at top, var(--w04), transparent 52%),
    linear-gradient(180deg, rgba(76, 78, 84, 0.98) 0%, rgba(58, 60, 65, 0.98) 100%);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 var(--w04);
  backdrop-filter: blur(18px);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.composer-shell:focus-within {
  border-color: var(--brand);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.24),
    0 0 0 3px rgba(59, 130, 246, 0.18),
    inset 0 1px 0 var(--w05);
}

.composer-tool-button,
.composer-send-button {
  border: 0;
  cursor: pointer;
}

.composer-tool-button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--w07);
  /* Era #edf3f9 (blanco a mano, sin token): en tema claro quedaba blanco sobre
     blanco y el "+" de adjuntar era INVISIBLE — solo se encontraba por accidente
     pasando el ratón. Con el token vira solo en los dos temas. (15-ago) */
  color: var(--text);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
}

/* Micrófono (entrada por voz): SOLO el icono, sin marco ni círculo. */
.composer-mic-button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text, var(--text));
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.composer-mic-button:hover { opacity: 0.8; }
.composer-mic-button.is-recording { color: #ef4444; animation: mic-pulse 1.1s ease-in-out infinite; }
.composer-mic-button.is-busy { opacity: 0.5; cursor: default; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.composer-tool-button:hover {
  background: var(--w11);
}

.composer-tool-button span {
  transform: translateY(-2px);
}

.composer-field {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-height: 32px;
}

.composer-field textarea {
  min-height: calc(1.35em + 6px);
  max-height: 220px;
  resize: none;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f4f7fb;
  font-size: var(--fs-xl);
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow-y: hidden;
  scrollbar-width: none;
}

.composer-field textarea:focus {
  box-shadow: none;
  border-color: transparent;
}

.composer-field textarea::-webkit-scrollbar {
  display: none;
}

.composer-field textarea.is-scrollable {
  overflow-y: auto;
  scrollbar-width: thin;
}

.composer-field textarea.is-scrollable::-webkit-scrollbar {
  display: block;
  width: 6px;
}

.composer-field textarea::placeholder {
  color: var(--w46);
}

.password-username-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.composer-trailing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 2px;
}

.composer-send-button {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  /* Era un degradado casi BLANCO fijo (#fbfcfd→#eef2f6) con texto oscuro: pensado para
     el composer oscuro. En tema claro el botón de enviar se fundía con el fondo y
     desaparecía. Con los tokens de marca se ve en los dos temas y además señala que
     es LA acción principal. (barrido premium, 16-ago) */
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  color: var(--brand-contrast);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 var(--w92);
  transition:
    transform 140ms ease,
    opacity 140ms ease,
    box-shadow 140ms ease;
}

.composer-send-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 var(--w96);
}

.composer-send-button:disabled,
.composer-tool-button:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.composer-send-glyph {
  width: 13px;
  height: 13px;
  display: inline-block;
  /* El botón de enviar es azul de marca (fondo --brand) y el glifo era negro fijo
     (#111111): sobre el azul no se veía (Javidan, 24-oct-2026). Blanco para que la
     flecha contraste, igual que el texto del botón (color: var(--brand-contrast)). */
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg) translate(-1px, 1px);
}

.composer-send-spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  /* Mismo motivo que el glifo: mientras TRIA responde, el botón sigue azul; el
     spinner negro no se veía. En blanco translúcido con la cabeza blanca sólida. */
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 700ms linear infinite;
}

.composer-tools-menu {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 14px);
  width: min(252px, calc(100vw - 48px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--w12);
  background: rgba(41, 43, 47, 0.98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  z-index: 22;
}

.composer-tools-menu[hidden] {
  display: none;
}

/* Inputs de archivo/cámara: ocultos PERO renderizados (no display:none).
   En móvil (iOS WebView y Chrome Android), input.click() sobre un input con
   display:none NO abre el selector de archivo/cámara; con visually-hidden sí. */
.composer-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
}

.context-shift-warning {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(145deg, var(--w08), var(--w035)),
    rgba(33, 34, 38, 0.96);
  border: 1px solid var(--w17);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.context-shift-warning[hidden] {
  display: none;
}

.context-shift-warning strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}

.context-shift-warning p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.context-shift-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.context-shift-actions button {
  appearance: none;
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--w13);
  color: var(--w86);
  background: var(--w055);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
}

.context-shift-actions button:hover {
  color: var(--text);
  background: var(--w1);
  border-color: var(--w22);
}

.composer-menu-section {
  display: grid;
  gap: 12px;
}

.composer-menu-label {
  margin: 0;
  color: var(--w52);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.composer-menu-hint {
  margin: 0;
  color: var(--w58);
  line-height: 1.5;
  font-size: var(--fs-md);
}

.attachment-action-list {
  display: grid;
  gap: 4px;
}

.attachment-action-button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--w055);
  color: #f4f6f8;
  text-align: left;
  cursor: pointer;
  transition:
    background 140ms ease,
    transform 140ms ease;
}

.attachment-action-button:hover {
  background: var(--w1);
  transform: translateY(-1px);
}

.attachment-action-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--w045);
  color: #f7f9fb;
  font-size: var(--fs-xl);
  line-height: 1;
  font-weight: 400;
}

.attachment-action-icon-camera {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M208,56H180.28L166.65,35.56A8,8,0,0,0,160,32H96a8,8,0,0,0-6.65,3.56L75.71,56H48A24,24,0,0,0,24,80V192a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V80A24,24,0,0,0,208,56Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H80a8,8,0,0,0,6.66-3.56L100.28,48h55.43l13.63,20.44A8,8,0,0,0,176,72h32a8,8,0,0,1,8,8ZM128,88a44,44,0,1,0,44,44A44.05,44.05,0,0,0,128,88Zm0,72a28,28,0,1,1,28-28A28,28,0,0,1,128,160Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  font-size: 0;
}

.attachment-action-icon-upload {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0ZM93.66,77.66,120,51.31V144a8,8,0,0,0,16,0V51.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,77.66Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  font-size: 0;
}

.attachment-action-label {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.muted {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  text-align: center;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-list[hidden] {
  display: none;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px 9px 9px;
  border-radius: 999px;
  background: var(--w05);
  border: 1px solid var(--w08);
}

.attachment-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--w08);
  color: var(--w7);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.attachment-chip-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.attachment-chip-copy strong,
.attachment-chip-copy small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-chip-copy strong {
  max-width: 230px;
  font-size: var(--fs-sm);
}

.attachment-chip-copy small {
  color: var(--w54);
  font-size: var(--fs-xs);
}

.attachment-chip-remove {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--w62);
  cursor: pointer;
}

.attachment-chip-remove:hover {
  background: var(--w08);
  color: #ffffff;
}

.primary-button:disabled {
  opacity: 0.72;
  cursor: wait;
}

.secondary-button {
  width: 100%;
}

.pill {
  color: var(--text);
}

.pill.subtle {
  background: var(--panel-3); /* era un gris oscuro fijo */
}

.pill.confidence-alto,
.mini-tag.judge-reutilizable {
  background: rgba(47, 143, 107, 0.18);
  color: #b7f0d8;
}

.pill.confidence-medio,
.mini-tag.judge-revisar {
  background: rgba(201, 151, 54, 0.18);
  color: #ffe1a5;
}

.pill.confidence-bajo,
.pill.confidence-escalar,
.mini-tag.judge-no_apta {
  background: rgba(197, 101, 101, 0.18);
  color: #ffc1c1;
}

:is(.pill.confidence-alto,.pill.confidence-medio,.pill.confidence-bajo,.pill.confidence-escalar)::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor;margin-right:6px;flex:0 0 auto;
}
/* Badge de confirmación visual de acción ejecutada en Qobrix */
.action-confirmation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.action-confirmation-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(47, 143, 107, 0.18);
  border: 1px solid rgba(47, 143, 107, 0.42);
  color: #b7f0d8;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
}

.action-confirmation-check {
  font-weight: 900;
  font-size: var(--fs-md);
}

.action-confirmation-time {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(183, 240, 216, 0.66);
  white-space: nowrap;
}

.action-confirmation-detail {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--w62));
  padding-left: 4px;
}

.pill.has-tooltip {
  position: relative;
  cursor: help;
  outline: none;
}

.pill.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  right: -12px;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: 330px;
  max-width: calc(100vw - 40px);
  padding: 10px 12px;
  border: 1px solid var(--w16);
  border-radius: var(--radius-lg);
  background: rgba(28, 30, 34, 0.98);
  color: var(--w9);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.pill.has-tooltip:hover::after,
.pill.has-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(3px);
}

.side-drawer {
  position: fixed;
  top: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  width: min(440px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(35, 37, 41, 0.97);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  transform: translateX(110%);
  transition: transform 180ms ease;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(8, 8, 10, 0.58);
  backdrop-filter: blur(4px);
}

.chat-info-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 49;
  width: min(680px, calc(100vw - 32px));
  max-height: min(78vh, 760px);
  overflow: auto;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: rgba(35, 37, 41, 0.98);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.mode-explorer-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 49;
  width: min(940px, calc(100vw - 40px));
  max-height: min(82vh, 860px);
  /* Antes scrolleaba el modal ENTERO (la cabecera se iba) y el contenido se cortaba a
     media palabra. Cabecera fija + cuerpo con scroll propio. Fondo por token. (16-ago) */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.mode-picker-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 49;
  width: min(336px, calc(100vw - 28px));
  max-height: min(78vh, 560px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 14px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.chat-info-dialog[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.mode-explorer-dialog[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.mode-picker-dialog[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.account-dialog,
.recovery-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 49;
  width: min(760px, calc(100vw - 36px));
  max-height: min(84vh, 860px);
  /* Antes deslizaba el diálogo ENTERO (overflow:auto): el texto se cortaba a media
     palabra sin nada que indicara que había más. Ahora cabecera y pie quedan fijos
     y solo el cuerpo (.account-dialog-body) desliza. */
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--w12);
  background:
    radial-gradient(circle at top left, var(--w05), transparent 34%),
    linear-gradient(180deg, rgba(37, 39, 43, 0.98), rgba(27, 29, 33, 0.98));
  box-shadow: 0 32px 84px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.account-dialog[aria-hidden="false"],
.recovery-dialog[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.chat-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.mode-explorer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.mode-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.account-dialog-header,
.recovery-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.account-dialog-header {
  padding-right: 48px;
}

.account-dialog .close-button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.account-dialog .close-button::before,
.account-dialog .close-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.account-dialog .close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.account-dialog .close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

body.account-dialog-open .composer,
body.account-dialog-open .chat-scroll-bottom {
  display: none !important;
}

.account-dialog-header h2,
.account-dialog-header p,
.recovery-dialog-header h2,
.recovery-dialog-header p {
  margin: 0;
}

.account-caption {
  margin-top: 10px !important;
  color: var(--w62);
  line-height: 1.6;
}

.chat-info-content {
  display: grid;
  gap: 14px;
}

.mode-explorer-content {
  display: grid;
  min-height: 0;
  overflow-y: auto;
}

.mode-picker-content {
  display: grid;
  min-height: 0;
  overflow-y: auto;
}

.account-dialog-body {
  display: grid;
  gap: 14px;
}

.account-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--w08);
  background: var(--w03);
}

.account-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.account-section-head h3,
.account-section-head p {
  margin: 0;
}

.account-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-field-span-2 {
  grid-column: span 2;
}

.account-section-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-section-actions .secondary-button {
  width: auto;
  min-width: 190px;
}

.account-hint {
  text-align: left;
}

.account-status-line {
  min-height: 1.3rem;
  margin-top: 14px;
}

.mode-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mode-picker-option {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--panel-2);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition:
    background 140ms ease,
    transform 140ms ease,
    color 140ms ease;
}

.mode-picker-option span {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mode-picker-option:hover {
  background: var(--w07);
  color: #ffffff;
  transform: translateY(-1px);
}

.mode-picker-option.active {
  background: rgba(58, 62, 70, 0.92);
  color: #ffffff;
}

.mode-explorer-shell {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.mode-explorer-sidebar,
.mode-explorer-detail {
  padding: 16px;
  border-radius: var(--radius-xl);
  /* Eran blancos-alfa (w08/w03) que en claro desaparecían y obligaban a parches. (16-ago) */
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.mode-explorer-label,
.mode-explorer-kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mode-explorer-mode-list,
.mode-explorer-starter-list {
  display: grid;
  gap: 10px;
}

.mode-explorer-mode-card,
.mode-explorer-starter {
  width: 100%;
  border: 0;
  border-radius: var(--radius-xl);
  /* Era var(--w04) + #f4f6f8 fijos: hacían falta 15 parches para el claro. Tokens. (16-ago) */
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}

.mode-explorer-mode-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid transparent;
}

.mode-explorer-mode-card:hover,
.mode-explorer-starter:hover {
  background: var(--w07);
  transform: translateY(-1px);
}

.mode-explorer-mode-card.active {
  background: var(--panel-3);
  border-color: var(--line-strong);
}

.mode-explorer-mode-name {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mode-explorer-mode-copy,
.mode-explorer-mode-card small {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.mode-explorer-detail {
  display: grid;
  gap: 14px;
  align-content: start;
}

.mode-explorer-summary {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--w12);
  background:
    radial-gradient(circle at top right, var(--w06), transparent 34%),
    var(--w03);
}

.mode-explorer-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mode-explorer-detail-head h3 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
}

.mode-explorer-description {
  margin: 0;
  max-width: 50ch;
  color: var(--w66);
  line-height: 1.6;
}

.mode-explorer-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mode-explorer-section-copy {
  margin: 4px 0 0;
  color: var(--w48);
  font-size: var(--fs-md);
  line-height: 1.45;
}

.mode-explorer-starter-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.mode-explorer-starter-list.single {
  grid-template-columns: 1fr;
}

.mode-explorer-starter {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  min-height: 132px;
  border: 1px solid var(--line);
  /* el fondo lo pone la regla compartida con .mode-explorer-mode-card (var(--panel-2)) */
}

.mode-explorer-starter span {
  display: block;
  /* El título de la tarjeta es un <span> (no <strong>): el parche de claro nunca le
     llegaba y título y texto salían del mismo gris. Color propio por token. (16-ago) */
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

.mode-explorer-starter small {
  color: var(--muted);
  line-height: 1.5;
  font-size: var(--fs-md);
}

.chat-info-section {
  padding: 16px 18px;
  border-radius: var(--radius-xl);
  background: rgba(47, 51, 58, 0.72);
  border: 1px solid var(--line);
}

.chat-info-summary {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.chat-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.chat-info-card {
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(42, 45, 51, 0.86);
  border: 1px solid var(--line);
}

.chat-info-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-info-card strong {
  display: block;
  color: var(--text);
  line-height: 1.45;
}

.admin-chat-section {
  display: grid;
  gap: 10px;
}

.admin-chat-section h3,
.admin-chat-section p {
  margin: 0;
}

.admin-action-link {
  width: fit-content;
  text-decoration: none;
}

body.drawer-open .side-drawer {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* (Esta regla re-pintaba el gris oscuro fijo sobre la base tokenizada del Cerrar,
   y en claro devolvía la mancha oscura. Ahora respeta el token.) */
.close-button {
  background: var(--panel-2);
}

.drawer-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.role-advisor .drawer-tabs {
  grid-template-columns: 1fr;
}

.drawer-body {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.drawer-panel {
  display: none;
}

.drawer-panel.active {
  display: block;
}

.drawer-stack,
.field-stack,
.improvement-summary,
.judge-result {
  display: grid;
  gap: 12px;
}

.case-context-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 17px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(64, 66, 71, 0.86), rgba(39, 40, 44, 0.94)),
    var(--w04);
  border: 1px solid var(--w2);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 var(--w05);
}

.case-context-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.case-context-card h3 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 720;
  letter-spacing: -0.03em;
}

.memory-panel-card h3 {
  max-width: 310px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-context-score {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 128px;
  padding: 7px 10px;
  border-radius: 999px;
  text-align: center;
  color: var(--w9);
  background: var(--w075);
  border: 1px solid var(--w14);
  font-size: var(--fs-2xs);
  font-weight: 850;
  line-height: 1.15;
  white-space: normal;
}

.case-context-score[data-level="ready"] {
  color: #e9f5ed;
  border-color: rgba(142, 190, 157, 0.35);
  background: rgba(82, 117, 92, 0.26);
}

.case-context-score[data-level="escalate"] {
  color: #fff1d6;
  border-color: rgba(214, 172, 88, 0.42);
  background: rgba(123, 86, 35, 0.28);
}

.case-context-score[data-level="partial"] {
  color: #f0eee7;
  border-color: rgba(198, 184, 128, 0.3);
  background: rgba(125, 111, 65, 0.18);
}

.case-context-hint {
  margin: -5px 0 0;
  max-width: 340px;
  color: rgba(211, 216, 223, 0.74);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.case-context-summary {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  overflow: visible;
}

.memory-situation-block,
.memory-section,
.memory-empty-state {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: rgba(18, 19, 22, 0.26);
  border: 1px solid var(--w085);
}

.memory-situation-block {
  background: var(--w06);
  border-color: var(--w13);
}

.memory-situation-block span,
.memory-section > span {
  color: rgba(188, 194, 204, 0.72);
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memory-situation-block p,
.memory-section p,
.memory-empty-state p {
  margin: 0;
  color: rgba(244, 246, 248, 0.9);
  font-size: var(--fs-sm);
  font-weight: 620;
  line-height: 1.42;
}

.memory-key-list {
  display: grid;
  gap: 0;
}

.memory-key-row {
  display: grid;
  grid-template-columns: minmax(82px, 31%) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--w07);
}

.memory-key-row:last-child {
  border-bottom: 0;
}

.memory-key-row small {
  color: rgba(188, 194, 204, 0.72);
  font-size: var(--fs-3xs);
  font-weight: 780;
  letter-spacing: 0.04em;
}

.memory-key-row strong {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 680;
  line-height: 1.3;
}

.memory-bullet-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.memory-bullet-list li {
  position: relative;
  padding-left: 14px;
  color: rgba(244, 246, 248, 0.9);
  font-size: var(--fs-sm);
  font-weight: 620;
  line-height: 1.35;
}

.memory-bullet-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(205, 213, 221, 0.72);
}

.memory-section.muted-section p,
.memory-empty-state p {
  color: rgba(211, 216, 223, 0.72);
  font-weight: 560;
}

.context-empty-copy {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.memory-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.memory-action-button {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--w13);
  background: var(--w055);
  color: rgba(244, 246, 248, 0.88);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 760;
  cursor: pointer;
}

.memory-action-button:hover:not(:disabled) {
  background: var(--w09);
  border-color: var(--w2);
}

.memory-action-button.danger {
  color: #ffb8b8;
}

.memory-action-button:disabled {
  color: var(--w3);
  cursor: default;
}

.accordion {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(38, 40, 45, 0.82);
  overflow: hidden;
}

.accordion summary {
  padding: 15px 16px;
  cursor: pointer;
  font-weight: 700;
  color: var(--w9);
}

.accordion[open] summary {
  border-bottom: 1px solid var(--line);
}

.accordion .field-stack {
  padding: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.field textarea {
  resize: vertical;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: rgba(38, 40, 45, 0.92);
  border: 1px solid var(--line);
}

.checkbox-field input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.checkbox-field span,
.judge-summary,
.judge-rationale,
.judge-list p,
.judge-list ul,
.improvement-block p,
.improvement-block ul,
.metric-card small {
  color: var(--muted);
  line-height: 1.45;
}

.judge-score {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.judge-score strong,
.metric-card strong {
  font-size: 1.8rem;
  line-height: 1;
}

.judge-score span {
  color: var(--muted);
  font-weight: 700;
}

.judge-card.verdict-reutilizable {
  border-color: rgba(47, 143, 107, 0.24);
}

.judge-card.verdict-revisar {
  border-color: rgba(201, 151, 54, 0.24);
}

.judge-card.verdict-no_apta {
  border-color: rgba(197, 101, 101, 0.24);
}

.judge-empty {
  padding: 14px;
  border-radius: var(--radius-lg);
  background: rgba(38, 40, 45, 0.82);
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}

.export-toolbar {
  margin-top: -4px;
}

/* Parpadeo SOLO en el texto de estado ("Preparando respuesta…", "Buscando el local…") — no en la
   burbuja entera ni en la respuesta que ya está llegando (fundador 7-ago). El cursor ▍ se quitó. */
.loading-message .assistant-primary-answer {
  animation: tria-thinking-pulse 1.1s ease-in-out infinite;
}
@keyframes tria-thinking-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
/* En cuanto llega TEXTO REAL de la respuesta (streaming), ese texto se queda fijo y legible. */
.loading-message.is-streaming-text .assistant-primary-answer {
  animation: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  /* Aun con "reducir movimiento" del sistema, mantenemos un parpadeo SUAVE: el usuario debe ver que procesa. */
  .loading-message .assistant-primary-answer { animation: tria-thinking-pulse 2.2s ease-in-out infinite; }
  .loading-message.is-streaming-text .assistant-primary-answer { animation: none; }
}

body.home-view .messages {
  padding-top: 10px;
}

body.home-view .composer {
  padding-bottom: 46px;
}

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

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(150, 154, 162, 0.28);
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .auth-screen {
    padding: 18px;
  }

  .sidebar {
    display: none;
  }

  .mobile-panel-button {
    display: inline-flex;
  }

  .chat-layout {
    min-height: 100vh;
  }

  .history-item-more {
    opacity: 1;
  }

  .account-field-grid {
    grid-template-columns: 1fr;
  }

  .account-field-span-2 {
    grid-column: span 1;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 0;
  }

  .welcome-panel,
  .message {
    width: 100%;
  }

  .starter-grid,
  .compact-summary-grid,
  .action-card-grid,
  .escalation-strip,
  .response-grid,
  .judge-columns,
  .improvement-metrics,
  .chat-info-grid {
    grid-template-columns: 1fr;
  }

  .composer-actions,
  .chat-header,
  .message-head,
  .judge-head {
    flex-direction: column;
    align-items: stretch;
  }

  .ghost-button {
    width: 100%;
  }

  .side-drawer {
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .chat-info-dialog {
    width: calc(100vw - 24px);
    padding: 14px;
  }

  .mode-explorer-dialog {
    width: calc(100vw - 24px);
    padding: 14px;
  }

  .mode-picker-dialog {
    width: calc(100vw - 24px);
    padding: 12px;
  }

  .account-dialog {
    width: calc(100vw - 24px);
    padding: 14px;
  }

  .recovery-dialog {
    width: calc(100vw - 24px);
    padding: 14px;
  }

  .chat-header,
  .messages,
  .composer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .chat-header {
    gap: 12px;
  }

  .chat-header-brand {
    gap: 8px;
  }

  .chat-header-brand-copy strong {
    font-size: var(--fs-md);
  }

  .chat-header-brand-copy small {
    font-size: var(--fs-2xs);
  }

  .mode-explorer-shell {
    grid-template-columns: 1fr;
  }

  .mode-explorer-starter-list,
  .mode-explorer-starter-list.single {
    grid-template-columns: 1fr;
  }

  .mode-picker-grid {
    grid-template-columns: 1fr;
  }

  .account-dialog-header,
  .recovery-dialog-header,
  .account-section-head,
  .account-section-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .welcome-panel h3 {
    font-size: clamp(1.5rem, 5.4vw, 2.1rem);
  }

  .composer-shell {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 64px;
    padding: 10px 10px 12px;
  }

  .context-shift-warning {
    grid-template-columns: 1fr;
  }

  .context-shift-actions {
    justify-content: flex-start;
  }

  .case-context-summary {
    grid-template-columns: 1fr;
  }

  .composer-trailing {
    justify-content: flex-end;
  }

  .composer-tools-menu {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* CRM chat layer: flatter, calmer, practical UI for desktop and mobile. */
/* ═══ TEMA OSCURO · estilo SERENO (15-ago-2026) ═══════════════════════════════════
   OJO: este es el SEGUNDO :root del archivo y es el que MANDA (pisa al de la línea 1).
   Los grises eran neutros (#171819, #202124) y planos: el panel apenas se separaba del
   fondo. Ahora llevan el sesgo azul de la marca y más separación entre capas, para que
   las tarjetas y el chat se distingan sin depender de bordes. */
:root {
  --bg: #10141b;          /* era #171819 (gris neutro) */
  --bg-soft: #151a22;
  --panel: #1b212b;       /* era #202124 — ahora se recorta sobre el fondo */
  --panel-2: #222935;
  --panel-3: #2b3340;
  --panel-4: #36383e;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f1f2f3;
  --muted: #b0b4bb;
  --muted-2: #858a92;
  --accent: #e8eaed;
  --shadow: none;
  --radius-xl: 16px;
  --radius-lg: 14px;
  --radius-md: 11px;
  --radius-sm: 8px;
  /* ═══ Escala tipográfica ÚNICA (tanda S2, nº51): 8 pasos para toda la app.
     Antes: ~40 tamaños casi continuos entre 0.56 y 1.18rem, elegidos a ojo pantalla
     por pantalla. Cambiar la densidad de TODA la app = tocar estas 8 líneas.
     Fuera de la escala A PROPÓSITO: em (relativos al padre), px/pt (anchos fijos
     del admin y print), clamp() y display ≥1.2rem (títulos únicos). */
  --fs-3xs: 0.62rem; /* micro: badges, kickers          (banda 0.56–0.66) */
  --fs-2xs: 0.7rem;  /* contadores, metadatos mínimos   (banda 0.68–0.72) */
  --fs-xs: 0.76rem;  /* labels, secundario denso        (banda 0.74–0.78) */
  --fs-sm: 0.82rem;  /* cuerpo secundario, el más usado (banda 0.80–0.86) */
  --fs-md: 0.9rem;   /* cuerpo                          (banda 0.88–0.93) */
  --fs-lg: 0.95rem;  /* cuerpo destacado                (banda 0.94–0.98) */
  --fs-nota: 0.95rem; /* TEXTO DE UNA NOTA en cualquier ficha: UN solo tamaño, venga de quien venga (8-oct-2026) */
  --fs-xl: 1rem;     /* base / títulos de bloque        (banda 1.00–1.06) */
  --fs-2xl: 1.12rem; /* subtítulos                      (banda 1.07–1.18) */
  --font-body: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body,
body.auth-loading::before {
  background: var(--shell-bg);
}

.app-shell {
  grid-template-columns: 266px minmax(0, 1fr);
}

.sidebar {
  gap: 8px;
  padding: 16px 10px 0 16px;
  background: var(--shell-sidebar);
  border-right-color: var(--line);
  box-shadow: none;
}

.sidebar-topbar {
  padding: 0 4px 20px;
}

.brand-mark {
  width: 28px;
  height: 28px;
}

.brand-mark svg {
  width: 24px;
  height: 24px;
}

.sidebar-header,
.sidebar-search-panel {
  gap: 4px;
}

.sidebar-action,
.sidebar-icon-button,
.history-item,
.history-item-more,
.sidebar-footer-agent,
.sidebar-user-menu-item {
  border-radius: var(--radius-sm);
}

.sidebar-action {
  min-height: 38px;
  padding: 7px 9px;
  gap: 12px;
}

.sidebar-action-label,
.history-item-title {
  font-size: var(--fs-md);
  font-weight: 520;
}

.sidebar-icon {
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
}

.sidebar-search input {
  min-height: 38px;
  border-radius: var(--radius-sm);
  background-color: transparent;
  border-color: transparent;
}

.sidebar-search input:hover,
.sidebar-search input:focus {
  background-color: var(--w055);
}

.sidebar-section-head {
  padding: 14px 9px 5px;
}

.sidebar-section-head span,
.section-header h3 {
  font-size: var(--fs-xs);
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.sidebar-section-head span::after {
  display: none;
}

.history-list {
  gap: 1px;
}

.history-item-row {
  gap: 0;
}

.history-item {
  min-height: 36px;
  padding: 7px 9px;
}

.history-item:hover,
.history-item-row:focus-within .history-item {
  background: var(--w055);
}

.history-item.active {
  /* Era var(--w12) (blanco-alfa): en claro el chat activo quedaba blanco sobre blanco. */
  background: var(--panel-3);
  border-color: var(--line-strong);
}

.history-item-actions {
  padding-right: 0;
}

.history-item-more {
  width: 28px;
  height: 28px;
  opacity: 0.78;
}

.history-item-menu,
.sidebar-user-menu,
.chat-header-menu,
.composer-tools-menu,
.chat-info-dialog,
.mode-explorer-dialog,
.mode-picker-dialog,
.account-dialog,
.recovery-dialog,
.side-drawer {
  background: var(--shell-chat);
  border-color: var(--line-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
}

.history-item-menu {
  border-radius: var(--radius-md);
}

.history-item-menu-option {
  min-height: 32px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.sidebar-footer {
  margin-left: -16px;
  margin-right: -10px;
  padding: 9px 10px 10px 16px;
  background: var(--shell-sidebar);
  border-top-color: var(--line);
}

.sidebar-footer-avatar,
.sidebar-user-menu-avatar {
  box-shadow: none;
}

.sidebar-footer-copy strong {
  font-size: var(--fs-md);
  font-weight: 620;
}

.chat-layout {
  background: var(--shell-bg);
}

.chat-header {
  min-height: 62px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}

.chat-header-brand {
  min-height: 38px;
  padding: 6px 22px;
  border-radius: var(--radius-md);
}

.chat-header-brand:hover,
.chat-header-brand[aria-expanded="true"] {
  background: var(--w055);
}

.chat-header-brand.qobrix-mode-locked,
.chat-header-brand.qobrix-mode-locked:hover,
.chat-header-brand.qobrix-mode-locked[aria-expanded="true"] {
  cursor: default;
  background:
    linear-gradient(135deg, rgba(14, 116, 144, 0.22), rgba(37, 99, 235, 0.1));
  border: 1px solid rgba(56, 189, 248, 0.24);
}

.chat-header-brand.qobrix-mode-locked .chat-header-brand-copy strong {
  color: #e0f7ff;
}

.chat-header-brand.qobrix-mode-locked .chat-header-brand-copy small {
  color: #8bdcff;
}

.chat-header-brand.qobrix-mode-locked .chat-header-brand-caret {
  display: none;
}

/* Modo Legal: paleta lila/violeta para distinguir de Qobrix (cyan/azul). */
.chat-header-brand.legal-mode-locked,
.chat-header-brand.legal-mode-locked:hover,
.chat-header-brand.legal-mode-locked[aria-expanded="true"] {
  cursor: default;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(168, 85, 247, 0.10));
  border: 1px solid rgba(168, 85, 247, 0.28);
}

.chat-header-brand.legal-mode-locked .chat-header-brand-copy strong {
  color: #f3e8ff;
}

.chat-header-brand.legal-mode-locked .chat-header-brand-copy small {
  color: #d8b4fe;
}

.chat-header-brand.legal-mode-locked .chat-header-brand-caret {
  display: none;
}

.chat-header-brand-copy strong {
  font-size: var(--fs-lg);
  font-weight: 720;
}

.chat-header-brand-copy small {
  color: var(--muted-2);
  font-size: var(--fs-2xs);
}

.chat-backoffice-link,
.memory-header-button,
.ghost-button,
.close-button,
.home-link-button,
.home-mode-indicator,
.drawer-tab,
.mini-tag,
.pill {
  border-radius: var(--radius-sm);
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
}

.chat-backoffice-link:hover,
.memory-header-button:hover,
.ghost-button:hover,
.close-button:hover,
.home-link-button:hover,
.home-mode-indicator:hover,
.drawer-tab:hover,
.mini-tag:hover,
.pill:hover {
  color: var(--text);
  background: var(--w075);
  border-color: var(--w1);
  transform: none;
}

.messages {
  gap: 14px;
  padding: 18px 24px 10px;
}

.messages > * {
  width: min(820px, 100%);
}

.message {
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.user-message {
  max-width: min(680px, 82%);
  /* La burbuja ocupaba SIEMPRE 680px aunque escribieras "ok": ahora mide lo que mide
     el texto. Y el fondo era #2a2b2f fijo → token (viraba mal en claro). (tanda B)
     margin-right: 0 — el margin-inline:auto de `.messages > *` dejaba AMBOS márgenes
     en auto y la burbuja salía CENTRADA; ahora se pega a la derecha, como la intención
     original (align-self: flex-end). (tanda V, nº99) */
  width: fit-content;
  min-width: 120px;
  margin-left: auto;
  margin-right: 0;
  background: var(--panel-3);
  border-color: var(--line);
}

.assistant-message {
  padding: 0 0 6px;
}

.message-role {
  color: var(--muted-2);
  font-size: var(--fs-3xs);
  letter-spacing: 0.08em;
}

.assistant-primary-answer {
  gap: 12px;
  color: rgba(241, 242, 243, 0.94);
  font-size: var(--fs-lg);
  line-height: 1.62;
}

.assistant-message .assistant-primary-answer code {
  display: inline;
  padding: 0.14em 0.38em;
  border-radius: var(--radius-sm);
  background: #303236;
  color: #d8dadd;
  border: 1px solid var(--w06);
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 0.88em;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: 0.005em;
  white-space: break-spaces;
  overflow-wrap: break-word;
  box-shadow: inset 0 1px 0 var(--w035);
}

.user-message,
.assistant-message,
.message {
  border-color: var(--w14) !important;
  box-shadow: none !important;
}

.assistant-primary-answer h3 {
  margin-top: 6px;
  font-size: var(--fs-xl);
}

.assistant-primary-answer .rich-heading {
  margin-top: 6px;
  font-size: var(--fs-xl);
}

.decision-card,
.action-card,
.escalation-strip,
.compact-summary-card,
.response-card,
.response-list-block,
.judge-list,
.metric-card,
.improvement-block,
.compact-panel,
.chat-info-section,
.chat-info-card,
.account-section,
.case-context-card,
.memory-situation-block,
.memory-section,
.memory-empty-state,
.accordion,
.checkbox-field,
.judge-empty {
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: none;
}

.decision-card {
  padding: 15px 16px;
}

.decision-card::before {
  width: 3px;
}

.decision-card p,
.action-card p,
.escalation-strip p {
  color: rgba(241, 242, 243, 0.84);
}

.action-card-grid,
.compact-summary-grid,
.response-grid,
.judge-columns,
.improvement-metrics {
  gap: 8px;
}

.response-feedback {
  gap: 8px;
  margin-top: 12px;
}

.response-feedback-button {
  width: 31px;
  height: 31px;
  border-radius: var(--radius-sm);
}

.response-feedback-button:hover,
.response-feedback-button.active {
  background: var(--w075);
  border-color: var(--w1);
  transform: none;
}

.answer-follow-ups button,
.context-shift-actions button,
.memory-action-button,
.attachment-chip {
  border-radius: var(--radius-sm);
  background: transparent;
  border-color: var(--line);
}

.answer-follow-ups button:hover,
.context-shift-actions button:hover,
.memory-action-button:hover:not(:disabled),
.attachment-chip:hover {
  background: var(--w075);
  border-color: var(--line-strong);
}

.composer {
  width: min(836px, 100%);
  gap: 8px;
  padding: 9px 24px 20px;
}

.composer-shell {
  min-height: 48px;
  padding: 6px 10px;
  border-radius: var(--radius-lg);
  background: #2a2b2f;
  border-color: var(--line-strong);
  box-shadow: none;
  backdrop-filter: none;
}

.composer-shell:focus-within {
  border-color: var(--w28);
  box-shadow: none;
}

.composer-tool-button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: transparent;
}

.composer-tool-button:hover {
  background: var(--w075);
}

.composer-field textarea {
  color: var(--text);
  font-size: var(--fs-lg);
  min-height: calc(1.35em + 6px);
  height: calc(1.35em + 6px);
}

.composer-send-button {
  width: 40px;
  height: 40px;
  box-shadow: none;
}

.composer-send-button:hover {
  box-shadow: none;
}

.composer-tools-menu {
  width: min(220px, calc(100vw - 32px));
  gap: 4px;
  padding: 8px;
  border-radius: var(--radius-md);
}

.attachment-action-button {
  border-radius: var(--radius-sm);
  background: transparent;
}

.attachment-action-button:hover {
  background: var(--w075);
  transform: none;
}

.attachment-action-icon,
.home-action-icon {
  border-radius: var(--radius-sm);
  background-color: var(--w055);
}

.composer-actions .muted,
#status-line {
  color: var(--muted-2);
  font-size: var(--fs-xs);
}

.home-stage {
  padding-top: 10vh;
}

.welcome-panel {
  gap: 16px;
}

.welcome-panel h3 {
  font-size: clamp(1.7rem, 3.5vw, 2.7rem);
  font-weight: 620;
}

.home-caption {
  color: var(--muted);
}

.home-window-button {
  min-height: 44px;
  border-radius: var(--radius-md);
  background: transparent;
  border-color: var(--line);
}

.home-window-button:hover {
  background: var(--w075);
  border-color: var(--line-strong);
}

.mode-explorer-sidebar,
.mode-explorer-detail,
.mode-explorer-summary,
.mode-explorer-mode-card,
.mode-explorer-starter,
.mode-picker-option {
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--line);
}

.mode-explorer-mode-card:hover,
.mode-explorer-starter:hover,
.mode-picker-option:hover {
  background: var(--panel-2);
  transform: none;
}

.mode-explorer-mode-card.active,
.mode-picker-option.active,
.starter-filter.active,
.drawer-tab.active {
  background: var(--panel-3);
  border-color: var(--line-strong);
}

.pill.subtle {
  /* Era transparent: "Opcional" y los contadores salían como texto suelto flotando,
     sin forma de pastilla. Con superficie y borde de token viran en ambos temas. */
  background: var(--panel-3);
  border: 1px solid var(--line);
}

.pill.confidence-alto,
.mini-tag.judge-reutilizable {
  background: rgba(47, 143, 107, 0.14);
}

.pill.confidence-medio,
.mini-tag.judge-revisar {
  background: rgba(201, 151, 54, 0.14);
}

.pill.confidence-bajo,
.pill.confidence-escalar,
.mini-tag.judge-no_apta {
  background: rgba(197, 101, 101, 0.14);
}

.new-clients-alert { border-color: var(--link, var(--link)) !important; }
.agenda-alert {
  margin: 10px clamp(14px, 3vw, 32px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: rgba(201, 151, 54, 0.13);
  border: 1px solid rgba(201, 151, 54, 0.34);
  color: var(--text);
}

.agenda-alert.is-overdue {
  background: rgba(197, 101, 101, 0.14);
  border-color: rgba(197, 101, 101, 0.42);
}

.agenda-alert > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.agenda-alert strong,
.agenda-alert span {
  display: block;
}

.agenda-alert strong {
  font-size: var(--fs-md);
  letter-spacing: -0.015em;
}

.agenda-alert span {
  color: rgba(244, 245, 247, 0.78);
  font-size: var(--fs-sm);
}

.agenda-alert .ghost-button {
  flex: 0 0 auto;
  padding: 8px 12px;
}

.sidebar-user-menu-icon-agenda {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E");
}
/* Logo Qobrix (elefante) en el menú — MISMO tono que los demás iconos del menú (#f3f5f7), vía máscara. */
.sidebar-user-menu-icon-qobrix {
  background-image: none;
  background-color: #f3f5f7;
  -webkit-mask: url("/icons/qobrix-elephant.png") center / 22px auto no-repeat;
  mask: url("/icons/qobrix-elephant.png") center / 22px auto no-repeat;
}
/* CRM (fundador, 25-sep-2026): las personitas en vez del logo de Qobrix, igual que en la cabecera. */
.sidebar-user-menu-icon-crm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z'/%3E%3C/svg%3E");
}
/* Icono de "Wesign" (pluma de firma) — entrada del menú tras Qobrix (fundador 7-ago). */
.sidebar-user-menu-icon-wesign {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M232,168H63.86c2.66-5.24,5.33-10.63,8-16.11,15,1.65,32.58-8.78,52.66-31.14,5,13.46,14.45,30.93,30.58,31.25,9.06.18,18.11-5.2,27.42-16.37C189.31,143.75,203.3,152,232,152a8,8,0,0,0,0-16c-30.43,0-39.43-10.45-40-16.11a7.67,7.67,0,0,0-5.46-7.75,8.14,8.14,0,0,0-9.25,3.49c-12.07,18.54-19.38,20.43-21.92,20.37-8.26-.16-16.66-19.52-19.54-33.42a8,8,0,0,0-14.09-3.37C101.54,124.55,88,133.08,79.57,135.29,88.06,116.42,94.4,99.85,98.46,85.9c6.82-23.44,7.32-39.83,1.51-50.1-3-5.38-9.34-11.8-22.06-11.8C61.85,24,49.18,39.18,43.14,65.65c-3.59,15.71-4.18,33.21-1.62,48s7.87,25.55,15.59,31.94c-3.73,7.72-7.53,15.26-11.23,22.41H24a8,8,0,0,0,0,16H37.41c-11.32,21-20.12,35.64-20.26,35.88a8,8,0,1,0,13.71,8.24c.15-.26,11.27-18.79,24.7-44.12H232a8,8,0,0,0,0-16ZM58.74,69.21C62.72,51.74,70.43,40,77.91,40c5.33,0,7.1,1.86,8.13,3.67,3,5.33,6.52,24.19-21.66,86.39C56.12,118.78,53.31,93,58.74,69.21Z'/%3E%3C/svg%3E");
}
/* Icono de "Correo" (sobre) — antes llevaba por error el del calendario (juez, 22-sep). */
.sidebar-user-menu-icon-mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z'/%3E%3C/svg%3E");
}
/* Icono propio de "Mis valoraciones" (clipboard con check) — distinto del de Qobrix. */
.sidebar-user-menu-icon-valoraciones {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M168,152a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,152Zm-8-40H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm56-64V216a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V48A16,16,0,0,1,56,32H92.26a47.92,47.92,0,0,1,71.48,0H200A16,16,0,0,1,216,48ZM96,64h64a32,32,0,0,0-64,0ZM200,48H173.25A47.93,47.93,0,0,1,176,64v8a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V64a47.93,47.93,0,0,1,2.75-16H56V216H200Z'/%3E%3C/svg%3E");
}

/* «Hablar con TRIA por WhatsApp» (fundador, 29-sep-2026): Phosphor whatsapp-logo, mismo tono que los demás. */
.sidebar-user-menu-icon-whatsapp-tria {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M187.58,144.84l-32-16a8,8,0,0,0-8,.5l-14.69,9.8a40.55,40.55,0,0,1-16-16l9.8-14.69a8,8,0,0,0,.5-8l-16-32A8,8,0,0,0,104,64a40,40,0,0,0-40,40,88.1,88.1,0,0,0,88,88,40,40,0,0,0,40-40A8,8,0,0,0,187.58,144.84ZM152,176a72.08,72.08,0,0,1-72-72A24,24,0,0,1,99.29,80.46l11.48,23L101,118a8,8,0,0,0-.73,7.51,56.47,56.47,0,0,0,30.15,30.15A8,8,0,0,0,138,155l14.61-9.74,23,11.48A24,24,0,0,1,152,176ZM128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z'/%3E%3C/svg%3E");
}

#agenda-button.has-agenda-pending {
  background: transparent;
}

#agenda-button.has-agenda-today {
  background: transparent;
}

#agenda-button.has-agenda-overdue {
  background: transparent;
  color: #fff;
}

.agenda-badge {
  min-width: 23px;
  height: 23px;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(47, 143, 107, 0.9);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

#agenda-button.has-agenda-today .agenda-badge {
  background: rgba(201, 151, 54, 0.95);
}

#agenda-button.has-agenda-overdue .agenda-badge {
  background: rgba(197, 101, 101, 0.96);
}

#notifications-button.has-push-active {
  background: transparent;
}

#notifications-button.has-push-denied {
  background: transparent;
  color: #fff;
}

.sidebar-user-menu #agenda-button,
.sidebar-user-menu #notifications-button {
  background: transparent !important;
}

.notification-preferences-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 9px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(125, 211, 252, 0.14);
  background: linear-gradient(135deg, rgba(18, 69, 91, 0.24), var(--w035));
}

.notification-preferences-panel[hidden] {
  display: none !important;
}

.notification-preferences-status {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: var(--fs-2xs);
  font-weight: 750;
  letter-spacing: 0.01em;
  padding: 0 4px;
}

.notification-preference-chips {
  display: grid;
  gap: 8px;
}

.notification-master-switch,
.notification-type-switch {
  width: 100%;
  border: 0;
  font: inherit;
  color: #f8fafc;
  cursor: pointer;
}

.notification-master-switch {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(20, 21, 24, 0.94);
  box-shadow: inset 0 0 0 1px var(--w08);
  font-size: var(--fs-xl);
  font-weight: 750;
  text-align: left;
}

.notification-switch {
  width: 62px;
  height: 34px;
  position: relative;
  border-radius: 999px;
  background: rgba(86, 91, 101, 0.82);
  transition: background 0.18s ease;
  flex: 0 0 auto;
}

.notification-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f8fafc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease;
}

.notification-master-switch.is-active .notification-switch {
  background: #31d158;
}

.notification-master-switch.is-active .notification-switch i {
  transform: translateX(28px);
}

.notification-type-switches {
  display: grid;
  gap: 6px;
}

.notification-type-switch {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border-radius: var(--radius-lg);
  background: var(--w045);
  box-shadow: inset 0 0 0 1px var(--w065);
  font-size: var(--fs-xs);
  font-weight: 780;
  text-align: left;
}

.notification-mini-switch {
  width: 40px;
  height: 23px;
  position: relative;
  border-radius: 999px;
  background: rgba(86, 91, 101, 0.78);
  transition: background 0.18s ease;
}

.notification-mini-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #f8fafc;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.24);
  transition: transform 0.18s ease;
}

.notification-type-switch.is-active .notification-mini-switch {
  background: rgba(49, 209, 88, 0.94);
}

.notification-type-switch.is-active .notification-mini-switch i {
  transform: translateX(17px);
}

.notification-master-switch:hover:not(:disabled),
.notification-type-switch:hover:not(:disabled) {
  filter: brightness(1.08);
}

.notification-master-switch:disabled,
.notification-type-switch:disabled {
  opacity: 0.44;
  cursor: not-allowed;
}

/* Tipos BLOQUEADOS por ahora (no disponibles): letras en gris + interruptor apagado, legibles pero
   claramente "no activos" (orden fundador 24-jun). Override del opacity 0.44 del :disabled para que
   el gris se lea bien; el cursor not-allowed lo sigue dando :disabled. */
.notification-type-switch.is-locked {
  opacity: 1;
  color: rgba(148, 163, 184, 0.6);
  background: var(--w025);
  box-shadow: inset 0 0 0 1px var(--w04);
}
.notification-type-switch.is-locked .notification-mini-switch {
  background: rgba(120, 126, 136, 0.45);
}
.notification-type-switch.is-locked .notification-mini-switch i {
  background: rgba(226, 232, 240, 0.6);
  transform: none;
}

/* Categoría "Recordatorios": cabecera desplegable que agrupa visitas, seguimiento, etc. */
.notification-group-header {
  width: 100%;
  border: 0;
  font: inherit;
  color: #f8fafc;
  cursor: pointer;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 6px;
  border-radius: var(--radius-lg);
  background: var(--w06);
  box-shadow: inset 0 0 0 1px var(--w08);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-align: left;
}
.notification-group-header:hover:not(:disabled) { filter: brightness(1.08); }
.notification-group-header:disabled { opacity: 0.44; cursor: not-allowed; }
.notification-group-header .notification-group-chevron { font-size: var(--fs-md); opacity: 0.75; }
.notification-group-body { margin-top: 6px; display: grid; gap: 6px; }

.agenda-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 90;
  width: min(1080px, calc(100vw - 28px));
  max-height: min(860px, calc(100dvh - 24px));
  transform: translate(-50%, -50%) scale(0.98);
  display: grid;
  /* Columna explícita minmax(0,1fr): SIN ella la columna implícita es `auto` (= min-content), y un
     hijo ancho —p.ej. la tabla de Oportunidades con <select> de nombres largos— EXPANDE el diálogo
     más allá de su width. Como el diálogo tiene overflow:hidden, en MÓVIL ese exceso NO scrollea:
     se sale de pantalla y se corta (selects, botón ✕, buscador, paginación). Con minmax(0,…) el
     diálogo respeta su ancho y el contenido se ajusta dentro. Blinda TODOS los .agenda-dialog contra
     este desborde, se añadan las columnas/campos que se añadan. (bug móvil Qobrix, 29-jul) */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 9px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--panel); /* era #24262b→#1f2125 fijo: el claro vivía de parches */
  border: 1px solid var(--w13);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  /* Abrían A SACO (la sonda lo midió): sin transición se siente brusco. Una línea
     cubre agenda, valoraciones y oportunidades, que comparten esta clase. */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  /* CERRADO: visibility:hidden lo saca del hit-testing de VERDAD. Con solo
     opacity:0 + pointer-events:none, hijos como #agenda-search (input) podían
     reactivar los eventos y quedaban TAPANDO el chat → no se podía seleccionar
     ni copiar el texto de los mensajes (bug 15-jun). visibility no se puede
     anular desde un hijo, así que es a prueba de balas. */
  visibility: hidden;
}

.agenda-dialog .chat-info-header {
  min-height: auto;
  padding-bottom: 0;
}

.agenda-dialog .chat-info-header h2 {
  margin: 2px 0 0;
}

.agenda-dialog.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.agenda-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.agenda-toolbar .ghost-button {
  min-height: 32px;
  padding: 6px 11px;
  border-radius: var(--radius-md);
  background: var(--w045);
  color: rgba(243, 246, 248, 0.82);
  font-size: var(--fs-xs);
  font-weight: 820;
}

.agenda-toolbar .ghost-button:hover {
  border-color: rgba(125, 211, 252, 0.28);
  background: rgba(125, 211, 252, 0.09);
  color: #e8f8ff;
}

.agenda-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}

.agenda-workday {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border-radius: var(--radius-md);
  border: 1px solid var(--w1);
  background: var(--w028);
}

.agenda-workday-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.agenda-workday-head h3 {
  margin: 2px 0 0;
  font-size: var(--fs-md);
  line-height: 1.15;
}

.agenda-workday-head span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}

.agenda-workday-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.agenda-workday-toggle {
  border: 1px solid var(--line, var(--w12));
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1;
}
.agenda-workday-toggle:hover { color: var(--brand-ink); }

.agenda-resolve-critical {
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.agenda-resolve-critical:hover { border-color: var(--danger-text); }

/* Bloque "Trabajo de hoy" plegado: oculta la rejilla de tarjetas (la cabecera queda visible). */
.agenda-workday.is-collapsed .agenda-workday-grid {
  display: none;
}

.agenda-workday-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.agenda-workday-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 8px;
  padding: 8px 9px;
  border-radius: var(--radius-md);
  border: 1px solid var(--w09);
  background: var(--w035);
}

.agenda-workday-card span {
  overflow: hidden;
  color: rgba(243, 246, 248, 0.82);
  font-size: var(--fs-xs);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-workday-card strong {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--w1);
  font-size: var(--fs-xs);
  line-height: 1;
}

.agenda-workday-card p {
  grid-column: 1 / -1;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-workday-card button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 1px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8bd5ff;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 850;
  cursor: pointer;
}

.agenda-workday-card.is-empty {
  opacity: 0.66;
}

.agenda-tabs-shell {
  min-width: 0;
  padding: 8px 9px;
  border-radius: var(--radius-md);
  border: 1px solid var(--w1);
  background: var(--w028);
}

.agenda-tabs-shell {
  display: grid;
  gap: 8px;
}

.agenda-workblocks {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 3px;
  border-radius: 0;
  background: transparent;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.agenda-workblock {
  flex: 0 0 auto;
  min-width: 112px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--w12);
  border-radius: var(--radius-md);
  padding: 6px 9px;
  background: var(--w035);
  color: rgba(243, 246, 248, 0.88);
  text-align: left;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
}

.agenda-workblock:hover,
.agenda-workblock.active {
  border-color: rgba(96, 165, 250, 0.48);
  background: rgba(37, 99, 235, 0.16);
  box-shadow: inset 0 -2px 0 rgba(96, 165, 250, 0.34);
}

.agenda-workblock span,
.agenda-workblock small {
  display: block;
}

.agenda-workblock span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 850;
  letter-spacing: 0.01em;
  text-transform: none;
}

.agenda-workblock strong {
  display: inline-grid;
  min-width: 22px;
  min-height: 22px;
  place-items: center;
  margin: 0;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--w1);
  font-size: var(--fs-xs);
  line-height: 1;
}

.agenda-workblock small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-3xs);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-filter-panel {
  display: none;
  gap: 9px;
  padding: 10px;
  border-radius: var(--radius-xl);
  background: var(--w035);
  border: 1px solid var(--w1);
}

.agenda-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agenda-filter-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--w11);
  background: var(--w045);
  color: rgba(243, 246, 248, 0.82);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
}

.agenda-filter-chip strong {
  min-width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--w1);
  color: #ffffff;
  font-size: var(--fs-2xs);
}

.agenda-filter-chip:hover,
.agenda-filter-chip.active {
  border-color: rgba(125, 211, 252, 0.42);
  background: rgba(125, 211, 252, 0.14);
  color: #e8f8ff;
}

.agenda-metric,
.agenda-card,
.agenda-empty {
  border-radius: var(--radius-md);
  background: var(--w045);
  border: 1px solid var(--w12);
}

.agenda-metric {
  padding: 8px 9px;
  display: grid;
  gap: 2px;
}

.agenda-metric span,
.agenda-kicker {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agenda-metric strong {
  font-size: var(--fs-2xl);
  line-height: 1;
}

.agenda-list {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding-right: 4px;
}

.agenda-page-info {
  padding: 7px 9px;
  border-radius: var(--radius-md);
  background: var(--w035);
  border: 1px solid var(--w08);
  color: rgba(243, 246, 248, 0.72);
  font-size: var(--fs-xs);
  font-weight: 780;
}

.agenda-section {
  display: grid;
  gap: 8px;
}

.agenda-section-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: rgba(31, 34, 39, 0.94);
  border: 1px solid var(--w1);
  backdrop-filter: blur(12px);
}

.agenda-section-head h3 {
  margin: 0;
  color: rgba(243, 246, 248, 0.94);
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
}

.agenda-section-head span {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.agenda-section-list {
  display: grid;
  gap: 8px;
}

.agenda-card {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
}

.agenda-card.priority-alta {
  border-color: rgba(197, 101, 101, 0.42);
}

.agenda-card.priority-media {
  border-color: rgba(201, 151, 54, 0.34);
}

.agenda-card.priority-baja {
  border-color: rgba(47, 143, 107, 0.34);
}

.agenda-card-overdue {
  background: linear-gradient(135deg, rgba(91, 38, 38, 0.38), var(--w04));
}

.agenda-card-today {
  background: linear-gradient(135deg, rgba(92, 72, 32, 0.32), var(--w04));
}

.agenda-card-upcoming {
  background: var(--w045);
}

.agenda-card-focused {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.28), 0 18px 42px rgba(56, 189, 248, 0.12);
}

.agenda-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.agenda-card h3,
.agenda-card p {
  margin: 0;
}

.agenda-card h3 {
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
}

.agenda-card p {
  color: rgba(243, 246, 248, 0.78);
  line-height: 1.42;
}

.agenda-card time {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 850;
  white-space: nowrap;
}

.agenda-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agenda-card-meta span,
.agenda-card-meta a,
.agenda-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--w06);
  color: rgba(243, 246, 248, 0.82);
  font-size: var(--fs-xs);
  font-weight: 750;
  text-decoration: none;
}

.agenda-link,
.agenda-contact-link {
  color: #7dd3fc;
}

.agenda-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.agenda-action-button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--w11);
  background: var(--w045);
  color: rgba(243, 246, 248, 0.82);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 820;
  cursor: pointer;
}

.agenda-action-button:hover {
  border-color: rgba(125, 211, 252, 0.34);
  background: rgba(125, 211, 252, 0.1);
  color: #dff6ff;
}

.agenda-action-primary {
  border-color: rgba(47, 143, 107, 0.34);
  background: rgba(47, 143, 107, 0.14);
  color: #d9f9ea;
}

.agenda-load-more {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

.agenda-empty {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .chat-layout {
    grid-column: 1 / -1;
    width: 100vw;
    max-width: 100vw;
   }

  body,
  .app-shell,
  .chat-layout {
    min-height: 100dvh;
    height: 100dvh;
  }

  .chat-layout {
    max-height: 100dvh;
  }

  .mobile-panel-button {
    display: inline-flex;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .app-shell,
  .chat-layout,
  .chat-header,
  .messages,
  .composer {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .chat-layout {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .chat-header {
    min-height: 56px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
  }

  .chat-header-brand {
    min-width: 0;
    padding: 5px 6px;
  }

  .chat-header-brand-copy {
    min-width: 0;
  }

  .chat-header-brand-copy strong,
  .chat-header-brand-copy small {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-header-brand-copy strong {
    font-size: var(--fs-md);
  }

  .chat-header-brand-copy small {
    font-size: var(--fs-2xs);
  }

  .chat-header-actions {
    flex: 0 0 auto;
    gap: 6px;
  }

  .chat-backoffice-link,
  .memory-header-button {
    min-height: 34px;
    padding: 7px 9px;
    font-size: var(--fs-xs);
  }

  .messages {
    gap: 12px;
    padding: 12px 12px 8px;
  }

  body.home-view .messages {
    padding-top: 8px;
  }

  .message {
    padding: 11px 12px;
  }

  .user-message {
    max-width: 92%;
  }

  .assistant-message {
    padding-inline: 0;
  }

  .message-head,
  .response-feedback,
  .composer-actions {
    flex-direction: row;
    align-items: center;
  }

  .assistant-primary-answer {
    font-size: var(--fs-lg);
    line-height: 1.58;
  }

  .decision-card,
  .action-card,
  .escalation-strip,
  .compact-summary-card,
  .response-card,
  .response-list-block,
  .judge-list,
  .metric-card,
  .improvement-block,
  .compact-panel {
    padding: 12px;
  }

  .welcome-panel {
    width: min(370px, calc(100vw - 20px));
    max-width: 100%;
    gap: 14px;
    padding: 8px 2px 12px;
    overflow: hidden;
  }

  .home-stage {
    padding-top: 11vh;
    justify-items: center;
  }

  /* La home PREMIUM en móvil: sin el centrado ni el ancho de 370px de la clásica, que le
     partían el saludo ("Buenas / noches") y le encogían las tarjetas. Va a ancho completo
     y arranca arriba, como en escritorio. La clásica (asesores) no se toca. (16-ago) */
  .home-stage:not(.home-stage-classic) {
    padding-top: 14px;
    justify-items: stretch;
    width: 100%;
  }
  .home-stage:not(.home-stage-classic) .home-greet h3 {
    max-width: none;
    margin-inline: 0;
    text-align: left;
    font-size: 1.35rem;
  }
  .home-stage:not(.home-stage-classic) .home-caption { text-align: left; }

  .welcome-panel h3 {
    max-width: 12ch;
    margin-inline: auto;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
    font-size: clamp(1.55rem, 8vw, 2.2rem);
    line-height: 1.08;
  }

  .home-caption {
    max-width: 32ch;
    margin-inline: auto;
    font-size: var(--fs-md);
    line-height: 1.45;
  }

  .home-inline-actions {
    width: min(370px, calc(100vw - 20px));
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .home-window-button {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding: 9px 11px;
  }

  .home-action-copy small {
    font-size: var(--fs-2xs);
  }

  .composer {
    width: min(370px, calc(100vw - 20px));
    padding: 7px 0 calc(9px + env(safe-area-inset-bottom));
  }

  .composer-shell {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 54px;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--radius-lg);
  }

  .composer-tool-button {
    width: 34px;
    height: 34px;
  }

  .composer-field textarea {
    max-height: 128px;
    font-size: 16px;
    line-height: 1.35;
  }

  .composer-send-button {
    width: 37px;
    height: 37px;
  }

  .composer-tools-menu {
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    width: auto;
  }

  .context-shift-warning {
    grid-template-columns: 1fr;
    border-radius: var(--radius-md);
    padding: 11px;
  }

  .context-shift-actions {
    justify-content: flex-start;
  }

  .side-drawer,
  .chat-info-dialog,
  .mode-explorer-dialog,
  .mode-picker-dialog,
  .account-dialog,
  .recovery-dialog,
  .agenda-dialog {
    width: calc(100vw - 20px);
    padding: 12px;
    border-radius: var(--radius-lg);
  }

  .agenda-dialog {
    inset: auto 10px calc(8px + env(safe-area-inset-bottom)) 10px;
    width: auto;
    max-height: calc(100dvh - 18px - env(safe-area-inset-bottom));
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    transform: translateY(10px) scale(0.98);
  }

  .agenda-dialog.active {
    transform: translateY(0) scale(1);
  }

  .agenda-dialog .chat-info-header {
    min-height: auto;
    flex-direction: row;
    align-items: center;
  }

  .agenda-dialog .chat-info-header h2 {
    font-size: 1.45rem;
    line-height: 1.05;
  }

  .agenda-toolbar {
    grid-template-columns: 1fr;
  }

  .agenda-summary {
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .agenda-metric {
    min-width: 72px;
  }

  .agenda-workday-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agenda-workday-card {
    min-height: 74px;
  }

  .agenda-tabs-shell {
    padding: 7px;
  }

  .agenda-workblock {
    min-width: 104px;
  }

  .agenda-card {
    padding: 10px;
  }

  .agenda-card-actions {
    justify-content: flex-start;
  }

  .agenda-toolbar,
  .agenda-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .agenda-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .agenda-filter-chip {
    flex: 0 0 auto;
  }

  .mode-explorer-shell {
    gap: 10px;
  }

  .mode-explorer-sidebar,
  .mode-explorer-detail,
  .mode-explorer-summary {
    padding: 12px;
  }

  .mode-explorer-starter {
    min-height: auto;
    padding: 12px;
  }
}


.chat-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--w12);
  border-radius: var(--radius-lg);
  background: var(--w035);
}

/* Tabla de compradores: scroll vertical (orden descendente por match) + "cargar más". */
.chat-table-block {
  width: 100%;
  max-width: 100%;
}

.chat-table-wrap.is-scrollable {
  max-height: 440px;
  overflow-y: auto;
}

.chat-data-table tr.buyers-row-hidden {
  display: none;
}

.chat-table-loadmore {
  display: flex;
  justify-content: center;
  padding: 8px 0 2px;
}

/* Columna Estado del local (tabla de locales): color por estado, SIN subrayado. */
.data-table.editable td.estado-disponible { color: var(--success); font-weight: 600; }
.data-table.editable td.estado-cerrado { color: var(--danger); font-weight: 600; }
.data-table.editable td.estado-otro { color: var(--warning); font-weight: 600; }
/* Color del estado en la tabla de Locales (fundador 27-jul): verde disponible, ámbar reservado, rojo cerrado. */
.prop-table td.prop-estado-verde { color: var(--success); font-weight: 600; }
.prop-table td.prop-estado-ambar { color: var(--warning, #f5a524); font-weight: 600; }
.prop-table td.prop-estado-rojo { color: var(--danger, #f87171); font-weight: 600; }
/* Cabecera "Estado" clicable para ordenar — cursor pero SIN línea/subrayado. */
.data-table.editable th.lead-estado-sort { cursor: pointer; white-space: nowrap; }
.data-table.editable th.lead-estado-sort:hover { color: var(--brand-ink); }

/* Botón "Ofrecer" de la tabla de locales (registra el local en el historial del comprador). */
/* EXACTAMENTE el mismo botón que "Ofrecer" de la ficha (.fd-sug-offer): mismo token, tamaño, radio y
   fuente. Si cambia el de la ficha, cambia este. Sin emoji. (fundador 01-jul.) */
.lead-ofrecer-btn {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.lead-ofrecer-btn:hover { filter: brightness(1.06); }
.lead-ofrecer-btn.arm { background: #b45309; border-color: #b45309; color: #fff; }
.lead-ofrecer-btn.done { background: none; color: var(--success); border-color: var(--success); cursor: default; }
.data-table.editable .lead-col-ofrecer { text-align: center; white-space: nowrap; }

/* Botón "Cargar más": gris suave para que se identifique y se vea bien (antes era ghost casi invisible). */
.chat-table-loadmore .btn,
.chat-table-loadmore .ghost-button,
.lead-table-more .btn,
.lead-table-more .ghost-button {
  background: var(--bg-soft, var(--w08));
  border: 1px solid var(--border, var(--w2));
  color: var(--text, var(--text));
  border-radius: var(--radius-sm);
  padding: 7px 18px;
  font-weight: 600;
}

.chat-table-loadmore .btn:hover,
.chat-table-loadmore .ghost-button:hover,
.lead-table-more .btn:hover,
.lead-table-more .ghost-button:hover {
  background: var(--table-zebra, var(--w16));
  border-color: var(--brand-ink);
}

/* Columna Nº (orden) y teléfono interactivo (Llamar/WhatsApp): MISMO widget que la
   tabla de leads (.lead-phone). Reusa el patrón para que ambas tablas se vean/comporten
   igual. (Pendiente refactor: desacoplar .lead-phone de .lead-table-editable y compartir
   un único selector — zona operador-live.) */
.buyers-match-table .lead-col-num {
  width: 34px;
  text-align: center;
  color: var(--muted, var(--muted));
}

.buyers-match-table .lead-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.buyers-match-table .lead-phone-trigger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brand-ink);
  font-weight: 600;
  cursor: pointer;
}

.buyers-match-table .lead-phone-trigger:hover {
  text-decoration: underline;
}

.buyers-match-table .lead-phone-actions {
  display: inline-flex;
  gap: 8px;
}

.buyers-match-table .lead-phone-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--text, var(--text));
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  background: rgba(var(--brand-rgb), 0.14);
  white-space: nowrap;
}

.buyers-match-table .lead-phone-action:hover {
  background: rgba(var(--brand-rgb), 0.26);
}

/* Nombre del lead/comprador como enlace a su ficha de oportunidad (tablas del chat). Vale para <a> y
   para <button> (la tabla editable usa botón): se resetea el aspecto de botón para que parezca enlace. */
.tria-ficha-link {
  font: inherit;            /* primero: hereda tamaño/familia de la celda… */
  font-weight: 600;         /* …y DESPUÉS fuerza la seminegrita (si no, font:inherit la anulaba) */
  color: var(--link);       /* azul legible sobre fondo oscuro (#6ea0ff) */
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.tria-ficha-link:hover { color: var(--link-hover); text-decoration: underline; }

/* Columnas extra (Match / Por qué) en la tabla de compradores cuando usa el componente
   editable (.data-table.editable con show_match). Solo aparecen ahí → no afecta a leads. */
.data-table.editable .lead-col-match {
  white-space: nowrap;
  font-weight: 600;
  color: var(--text, var(--text));
}

.data-table.editable .lead-col-reasons {
  color: var(--muted, var(--muted));
  font-size: var(--fs-sm);
  min-width: 180px;
}

/* Nivel de info del perfil escrito ("X/8") con color según completitud. */
.data-table.editable .lead-col-perfil {
  white-space: nowrap;
  font-weight: 700;
  text-align: center;
}

.data-table.editable .lead-col-perfil.perfil-alto {
  color: var(--success);
}

.data-table.editable .lead-col-perfil.perfil-medio {
  color: var(--warning);
}

.data-table.editable .lead-col-perfil.perfil-bajo {
  color: var(--danger);
}

.data-table.editable .lead-col-asesor {
  color: var(--muted, var(--muted));
  white-space: nowrap;
}

.data-table.editable .lead-col-perfil.clickable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Columna Seguimiento: botón que abre el popup de registro (mismo que tras Llamar/WhatsApp). */
.data-table.editable .lead-col-seguimiento {
  white-space: nowrap;
  text-align: center;
}

/* Botón "Ofrecer" de la tabla de compradores-para-un-local (1 clic + confirmación de 2 pasos). */
.lead-col-ofrecer { white-space: nowrap; }
.lead-offer-btn { font-size: var(--fs-sm); padding: 4px 10px; white-space: nowrap; }
/* Azul Qobrix por defecto (clase .btn.primary); al pedir confirmación pasa a ámbar para distinguirlo. */
.lead-offer-btn.is-armed { background: #b45309; border-color: #b45309; color: #fff; }
.lead-offer-btn.is-done { cursor: default; }  /* el verde vive con los modificadores de .btn */
.lead-seg-btn {
  background: none;
  border: 1px solid var(--border, var(--w18));
  color: var(--brand-ink);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.lead-seg-btn:hover {
  background: var(--table-zebra, var(--w06));
}

/* Popup de criterios de búsqueda del comprador (se abre al pinchar "X/8"). */
.buyer-criteria-offer {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e4ea);
  border-radius: var(--radius-md);
  background: var(--surface-soft, #f7f8fb);
}
.buyer-criteria-offer .bco-text {
  margin: 0 0 8px;
  font-size: 0.92em;
  color: var(--text-soft, #555);
}
.buyer-criteria-offer .bco-btn {
  width: auto;
}
.buyer-criteria-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Por encima del header de la app (que en móvil es z-index:10010 !important), si no el
     header asomaba y se solapaba con el título/X del popup. (13-jun) */
  z-index: 10020;
  padding: 16px;
}

.buyer-criteria-card {
  position: relative;
  background: var(--panel-2, #1c1f26);
  border: 1px solid var(--w12);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}

.buyer-criteria-card h3 {
  margin: 0 0 4px;
  padding-right: 32px;
}

.bc-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted, var(--muted));
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.bc-close:hover {
  color: var(--text, var(--text));
  background: var(--w08);
}

.buyer-criteria-sub {
  margin: 0 0 16px;
  color: var(--muted, var(--muted));
  font-size: var(--fs-sm);
}

.buyer-criteria-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
}

.bc-field-wide {
  grid-column: 1 / -1;
}

.bc-field > span {
  color: var(--muted, var(--muted));
  font-weight: 600;
}

.bc-input {
  background: var(--panel-3, #2a2e37);
  border: 1px solid var(--w14);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text, var(--text));
  font: inherit;
  width: 100%;
}

.bc-range {
  display: flex;
  gap: 8px;
}

.bc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--w14);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--fs-sm);
}

.bc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  justify-content: flex-end;
}

.bc-msg {
  margin-right: auto;
  color: var(--muted, var(--muted));
  font-size: var(--fs-sm);
}

.reassign-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
  max-height: 40vh;
  overflow-y: auto;
}

.reassign-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--w1);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
}

.reassign-name {
  font-weight: 600;
}

.reassign-arrow {
  color: var(--muted, var(--muted));
}

.reassign-adv {
  color: var(--brand-ink);
  font-weight: 600;
  margin-left: auto;
}

.bc-interpret {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--w1);
}

.bc-textarea {
  min-height: 64px;
  resize: vertical;
}

.bc-textarea-sm {
  min-height: 44px;
  resize: vertical;
}

.bc-followup-label {
  display: block;
  margin-top: 10px;
  font-size: 0.88em;
  opacity: 0.85;
}
.bc-followup-label .bc-input {
  margin-top: 5px;
}

.bc-interpret-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

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

.chat-data-table {
  /* Era min-width:720px SIEMPRE: una tabla de 2 columnas scrolleaba sin motivo.
     Ancho natural, nunca menos que la burbuja; solo scrollea si de verdad no cabe. */
  width: max-content;
  border-collapse: collapse;
  min-width: 100%;
  font-size: var(--fs-md);
  line-height: 1.35;
}

.chat-data-table th,
.chat-data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--w1);
  text-align: left;
  vertical-align: top;
}

.chat-data-table th {
  color: var(--text, var(--text));
  background: var(--table-head-bg, var(--bg-soft, var(--bg-soft)));
  font-weight: 600;
  white-space: nowrap;
}

.chat-data-table td {
  color: var(--text, var(--text));
}

/* Zebra unificada con .data-table (el doc: zebra SIEMPRE). */
.chat-data-table tbody tr:nth-child(even) {
  background: var(--table-zebra, var(--w03));
}

.chat-data-table th.nowrap-col,
.chat-data-table td.nowrap-col {
  white-space: nowrap;
}

.chat-data-table th.date-col,
.chat-data-table td.date-col {
  min-width: 110px;
}

.chat-data-table a {
  color: var(--brand-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Fila clickable en tabla de elección de candidato. La fila entera responde
   al click/tap (excepto los <a> de id/ref/web que mantienen su navegación). */
.chat-data-table tr.candidate-choice-row,
table tr.candidate-choice-row {
  cursor: pointer;
  transition: background 120ms ease;
}

.chat-data-table tr.candidate-choice-row:hover,
table tr.candidate-choice-row:hover,
.chat-data-table tr.candidate-choice-row:focus-visible,
table tr.candidate-choice-row:focus-visible {
  background: var(--w06);
  outline: none;
}

.chat-data-table tr.candidate-choice-row:active,
table tr.candidate-choice-row:active {
  background: var(--w1);
}

.chat-data-table a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.property-match-table {
  min-width: 1220px;
  table-layout: fixed;
}

.property-match-table th:nth-child(1),
.property-match-table td:nth-child(1) {
  width: 72px;
  white-space: nowrap;
}

.property-match-table th:nth-child(2),
.property-match-table td:nth-child(2) {
  width: 230px;
  white-space: nowrap;
}

.property-match-table th:nth-child(3),
.property-match-table td:nth-child(3) {
  width: 170px;
  text-align: center;
  white-space: nowrap;
}

.property-match-table th:nth-child(4),
.property-match-table td:nth-child(4) {
  width: 180px;
  white-space: nowrap;
}

.property-match-table th:nth-child(5),
.property-match-table td:nth-child(5) {
  width: 130px;
  white-space: nowrap;
}

.property-match-table th:nth-child(6),
.property-match-table td:nth-child(6) {
  width: 140px;
  white-space: nowrap;
}

.property-match-table th:nth-child(7),
.property-match-table td:nth-child(7) {
  width: 140px;
  white-space: nowrap;
}

.property-match-table th:nth-child(8),
.property-match-table td:nth-child(8) {
  width: 220px;
  white-space: nowrap;
}

.chat-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.chat-data-table tbody tr:hover td {
  background: var(--w04);
}

@media (max-width: 720px) {
  .chat-data-table {
    min-width: 620px;
    font-size: var(--fs-sm);
  }

  .chat-data-table th,
  .chat-data-table td {
    padding: 9px 10px;
  }
}

@media (max-width: 760px) {
  .chat-header {
    min-height: calc(56px + env(safe-area-inset-top));
    padding-top: calc(9px + env(safe-area-inset-top));
  }

  .side-drawer {
    top: calc(12px + env(safe-area-inset-top));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top));
  }
}

.mobile-sidebar-toggle,
.mobile-sidebar-backdrop {
  display: none;
}

@media (max-width: 1100px) {
  .mobile-sidebar-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--text);
    background: transparent;
    cursor: pointer;
  }

  .mobile-sidebar-toggle:hover,
  .mobile-sidebar-toggle[aria-expanded="true"] {
    background: var(--w08);
  }

  .mobile-sidebar-toggle-icon {
    width: 22px;
    height: 22px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    /* (z: la pone la capa !important de más abajo — línea muerta borrada en la tanda U, nº79) */
    background: rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(2px);
  }

  .mobile-sidebar-backdrop:not([hidden]) {
    display: block;
  }

  .sidebar {
    /* Layout de COLUMNA también en el drawer móvil (fundador 3-ago): flex column + overflow oculto para
       que la cabecera y el pie queden FIJOS y SOLO la lista (.sidebar-history) scrollee. Antes era `grid`
       (heredaba el "scroll entero" del 7-jul y la lista no scrolleaba sola → el pie caía fuera). */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, calc(100vw - 54px));
    height: 100dvh;
    padding-top: calc(12px + env(safe-area-inset-top));
    transform: translateX(-104%);
    transition: transform 180ms ease;
    border-right: 1px solid var(--w1);
    box-shadow: 18px 0 44px rgba(0, 0, 0, 0.32);
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-mobile-open .brand-copy,
  body.sidebar-mobile-open .sidebar-action-label,
  body.sidebar-mobile-open .sidebar-section-head span,
  body.sidebar-mobile-open .sidebar-footer-copy,
  body.sidebar-mobile-open .sidebar-status {
    display: block;
  }

  body.sidebar-mobile-open .sidebar-search-panel {
    display: block;
  }

  body.sidebar-mobile-open .sidebar-footer-card {
    padding: 0;
  }

  body.sidebar-mobile-open .sidebar-action,
  body.sidebar-mobile-open .sidebar-icon-button {
    width: auto;
    justify-content: flex-start;
    padding-inline: 10px;
  }

  body.sidebar-mobile-open .sidebar-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
  }

  body.sidebar-mobile-open .sidebar-header,
  body.sidebar-mobile-open .sidebar-footer {
    justify-items: stretch;
  }

  body.sidebar-mobile-open .sidebar-section-head {
    justify-content: space-between;
  }

  body.sidebar-mobile-open .sidebar-icon-button-small {
    display: inline-grid;
  }

  body.sidebar-mobile-open .history-item {
    width: 100%;
    justify-content: flex-start;
    padding: 7px 8px;
  }

  body.sidebar-mobile-open .history-item-copy {
    display: grid;
  }

  body.sidebar-mobile-open .history-item-actions {
    display: flex;
  }

  body.sidebar-mobile-open .sidebar-footer-agent {
    justify-content: flex-start;
  }
}

.history-list .history-item-row {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.history-list .history-item-row::after {
  content: none !important;
  display: none !important;
}

.history-list .history-item-row:hover::after,
.history-list .history-item-row:focus-within::after,
.history-list .history-item-row.menu-open::after {
  content: none !important;
  display: none !important;
}

.history-list .history-item-row .history-item {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 48px !important;
  overflow: hidden !important;
}

.history-list .history-item-row .history-item-copy,
.history-list .history-item-row .history-item-title {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.history-list .history-item-row .history-item-actions {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-50%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.history-list .history-item-row .history-item-more {
  display: inline-flex !important;
  width: 38px !important;
  height: 34px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  color: var(--muted) !important;
}

.history-list .history-item-row:hover .history-item-actions,
.history-list .history-item-row:focus-within .history-item-actions,
.history-list .history-item-row.menu-open .history-item-actions {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.history-list.sidebar-history {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.history-list .history-item-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  align-items: center !important;
  min-width: 0 !important;
}

.history-list .history-item-row .history-item {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.history-list .history-item-row .history-item-actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}

.history-list .history-item-row .history-item-more {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  background: var(--w055) !important; /* era rgba(15,23,42,.2): mancha oscura fija en claro */
}

.history-list .history-item-row.active {
  background:
    linear-gradient(90deg, var(--w16), var(--w07)),
    var(--w055) !important;
  box-shadow: none !important;
}

.history-list .history-item-row:not(.active) {
  box-shadow: none !important;
}

.history-list .history-item-row.active .history-item {
  background: transparent !important;
  color: var(--text) !important; /* era #ffffff fijo: blanco sobre blanco en claro */
}

.history-list .history-item-row.active .history-item-title {
  color: #ffffff !important;
}

.chat-layout {
  display: grid !important;
  grid-template-areas:
    "chat-header"
    "agenda-alert"
    "messages"
    "composer" !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.chat-header {
  grid-area: chat-header !important;
}

.agenda-alert {
  grid-area: agenda-alert !important;
}

.messages {
  grid-area: messages !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.composer {
  grid-area: composer !important;
  position: relative !important;
  bottom: auto !important;
  align-self: end !important;
  z-index: 24 !important;
  box-sizing: border-box !important;
  /* En móvil el menú de adjuntar (composer-tools-menu) abre HACIA ARRIBA
     (bottom: 100%+) saliéndose de la caja del composer. Sin esto, el composer
     lo recorta y el menú queda invisible/no tocable al pulsar "+" (el toque cae
     en .messages). overflow visible deja que el menú se vea; el scroll horizontal
     ya lo contienen .chat-layout y .app-shell (overflow:hidden). */
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(35, 35, 35, 0), #232323 22%, #232323 100%) !important;
}

.chat-layout {
  position: relative !important;
}

.chat-scroll-bottom {
  position: absolute;
  left: 50%;
  bottom: 136px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--w11);
  border-radius: 999px;
  background: rgba(18, 19, 21, 0.92);
  color: rgba(245, 247, 249, 0.9);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 var(--w035);
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 35;
}

.chat-scroll-bottom[hidden] {
  display: none !important;
}

.chat-scroll-bottom span {
  width: 13px;
  height: 13px;
  display: block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.chat-scroll-bottom:hover {
  border-color: var(--w18);
  background: rgba(28, 29, 32, 0.96);
}

@media (max-width: 760px) {
  .chat-scroll-bottom {
    bottom: 104px;
    width: 32px;
    height: 32px;
  }
}

.app-confirm-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 8, 10, 0.58);
  backdrop-filter: blur(7px);
  /* Un aviso de confirmar/cancelar SIEMPRE por encima de todo (incl. el panel de chats en móvil,
     10050, y los demás modales): antes 10060 se quedaba fuera de la lista que sube los otros
     diálogos y el popup de eliminar chat quedaba tapado por el panel. (punto 7)
     30-oct-2026 (tarea 112.1): 10160 → 10218, por encima del visor de documentos (10215, #158) y del
     cierre de la agenda (10210); por debajo de .operator-dialog-backdrop (10220). Lo vigila
     tests/test_visor_documentos_por_encima.mjs. */
  z-index: 10218;
}

.app-confirm-dialog {
  width: min(480px, calc(100vw - 32px));
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--w12);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top left, var(--w06), transparent 38%),
    var(--shell-chat);
  /* Texto por tokens: con el fondo claro, el casi-blanco fijo dejaba el título
     y el cuerpo invisibles (bug "Eliminar chat" 7-jul). */
  color: var(--text);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.44);
}

.app-confirm-dialog h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 850;
  letter-spacing: -0.025em;
}

.app-confirm-dialog p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

/* .app-confirm-button: migrado a .btn (29-jun) */

/* Confirmar con textos que repasar (showAppConfirm `bloques`, 14-oct-2026): más ancho y con scroll propio
   si no cabe, para que los botones sigan a la vista. */
.app-confirm-dialog.con-bloques { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; gap: 14px; }
.app-confirm-bloque { display: grid; gap: 6px; }
.app-confirm-bloque h3 { margin: 0; font-size: var(--fs-sm); font-weight: 650; color: var(--muted); }
.app-confirm-dialog .app-confirm-bloque p {
  padding: 10px 12px;
  border: 1px solid var(--w12);
  border-left: 3px solid var(--whatsapp);
  border-radius: 10px;
  background: var(--w06);
  font-size: var(--fs-sm);
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .chat-layout {
    background-color: var(--shell-bg) !important;
  }

  html,
  body {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
  }

  .app-shell,
  .chat-layout {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
  }

  .agenda-dialog {
    inset: calc(env(safe-area-inset-top) + 12px) 10px 0 10px !important;
    width: auto !important;
    max-height: none !important;
    height: auto !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    transform: scale(0.98) !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
  }

  .agenda-dialog.active {
    transform: scale(1) !important;
  }

  .agenda-list {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }

  .sidebar {
    height: auto !important;
    bottom: 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .composer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .chat-scroll-bottom {
    bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --mobile-bottom-fit: max(4px, calc(env(safe-area-inset-bottom) - 18px));
  }

  html,
  body,
  .auth-screen,
  .app-shell,
  .chat-layout {
    min-height: var(--app-viewport-height, 100dvh) !important;
    height: var(--app-viewport-height, 100dvh) !important;
  }

  .auth-screen {
    align-items: center !important;
    padding: max(16px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom)) !important;
  }

  .auth-card {
    max-height: calc(var(--app-viewport-height, 100dvh) - 32px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .chat-layout {
    max-height: var(--app-viewport-height, 100dvh) !important;
  }

  .composer {
    gap: 0 !important;
    padding-top: 4px !important;
    padding-bottom: var(--mobile-bottom-fit) !important;
  }

  .composer-shell {
    min-height: 52px !important;
  }

  .composer-actions {
    display: none !important;
  }

  .agenda-dialog {
    gap: 7px !important;
    padding: 10px 10px var(--mobile-bottom-fit) !important;
    grid-template-rows: auto auto auto minmax(240px, 1fr) !important;
    overflow: hidden !important;
  }

  .agenda-dialog .chat-info-header {
    min-height: auto !important;
    padding-bottom: 2px !important;
  }

  .agenda-dialog .chat-info-header h2 {
    font-size: 1.34rem !important;
    line-height: 1.05 !important;
  }

  .agenda-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 6px !important;
  }

  .agenda-toolbar .ghost-button {
    width: 100% !important;
    justify-self: stretch !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    font-size: var(--fs-2xs) !important;
  }

  .agenda-summary {
    gap: 6px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .agenda-workday {
    display: none !important;
  }

  .agenda-tabs-shell {
    padding: 7px !important;
    border-radius: var(--radius-md) !important;
  }

  .agenda-workblocks {
    gap: 5px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .agenda-workblock {
    min-width: 104px !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
  }

  .agenda-workblock small {
    display: none !important;
  }

  .agenda-metric {
    min-width: 72px !important;
    padding: 7px 8px !important;
    gap: 2px !important;
  }

  .agenda-metric span,
  .agenda-kicker {
    font-size: var(--fs-3xs) !important;
    letter-spacing: 0.06em !important;
  }

  .agenda-metric strong {
    font-size: var(--fs-xl) !important;
  }

  .agenda-filter-panel {
    max-height: 82px !important;
    overflow: hidden !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  .agenda-filter-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
  }

  .agenda-filter-chip {
    flex: 0 0 auto !important;
    min-height: 31px !important;
    padding: 6px 9px !important;
    font-size: var(--fs-xs) !important;
  }

  .agenda-list {
    min-height: 240px !important;
    gap: 7px !important;
    padding-bottom: var(--mobile-bottom-fit) !important;
  }

  .agenda-page-info,
  .agenda-section-head {
    padding: 7px 9px !important;
    border-radius: var(--radius-md) !important;
  }

  .agenda-card {
    gap: 7px !important;
    padding: 9px 10px !important;
  }

  .agenda-card h3 {
    font-size: var(--fs-md) !important;
  }

  .agenda-card p {
    line-height: 1.35 !important;
  }

  .agenda-card-actions {
    justify-content: flex-start !important;
  }

  .agenda-action-button {
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: var(--fs-2xs) !important;
  }
}


/* Canonical mobile/PWA layout: one final source of truth for installed app panels. */
@media (max-width: 1100px) {
  html,
  body {
    height: var(--app-viewport-height, 100svh) !important;
    min-height: var(--app-viewport-height, 100svh) !important;
    overflow: hidden !important;
    background: var(--shell-bg) !important;
  }

  .app-shell,
  .chat-layout {
    height: var(--app-viewport-height, 100svh) !important;
    min-height: 0 !important;
    max-height: var(--app-viewport-height, 100svh) !important;
    overflow: hidden !important;
    background: var(--shell-bg) !important;
  }

  .mobile-sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    background: rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: blur(2px) !important;
  }

  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 90 !important;
    width: min(320px, calc(100vw - 54px)) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
    padding-bottom: 0 !important;
    /* Scroll ENTERO también en modo cajón (7-jul): la columna completa se desplaza. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--shell-sidebar) !important;
    transform: translateX(-104%) !important;
    transition: transform 180ms ease !important;
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0) !important;
  }

  body.sidebar-mobile-open .mobile-sidebar-toggle {
    pointer-events: none !important;
  }

  body.sidebar-mobile-open .chat-main,
  body.sidebar-mobile-open .chat-header,
  body.sidebar-mobile-open .composer {
    pointer-events: none !important;
  }

  body.sidebar-mobile-open .sidebar,
  body.sidebar-mobile-open .mobile-sidebar-backdrop {
    pointer-events: auto !important;
  }

  body.sidebar-mobile-open #sidebar-toggle {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    justify-content: center !important;
    padding-inline: 0 !important;
    margin-right: 12px !important;
    transform: translateX(-10px) !important;
  }

  .sidebar-topbar,
  .sidebar-header,
  .sidebar-search-panel,
  .sidebar-section-head {
    flex: 0 0 auto !important;
  }

  .sidebar-history {
    /* Lista = ÚNICO scroller también en el drawer móvil (fundador 3-ago, revierte el "scroll entero"
       del 7-jul): crece (flex:1) y scrollea sola; la cabecera y el pie quedan fijos. `!important` para
       ganar a las reglas del 7-jul de este bloque; `min-height:0` deja que el hijo flex se encoja y
       scrollee (si no, empuja el pie fuera de vista). overflow-y:auto EXPLÍCITO evita el gotcha del 7-jul. */
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  .sidebar-footer {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    margin-left: -16px !important;
    margin-right: -10px !important;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) 16px !important;
    background: var(--shell-sidebar) !important;
    border-top: 1px solid var(--w08) !important;
    position: relative !important;
    z-index: 3 !important;
  }

  #sidebar-toggle,
  #sidebar-user-toggle,
  .history-item,
  .history-group-header,
  .mobile-sidebar-toggle {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #sidebar-toggle *,
  #sidebar-user-toggle * {
    pointer-events: none !important;
  }

  .messages {
    min-height: 0 !important;
    overscroll-behavior: contain !important;
  }

  .composer {
    margin-bottom: 0 !important;
    padding-bottom: 22px !important;
  }

  html.composer-keyboard-open .composer,
  body.composer-keyboard-open .composer {
    transform: none !important;
  }

  html.composer-keyboard-open .chat-scroll-bottom,
  body.composer-keyboard-open .chat-scroll-bottom {
    transform: translateX(-50%) !important;
  }

  .agenda-dialog {
    max-height: calc(var(--app-viewport-height, 100svh) - max(8px, env(safe-area-inset-top))) !important;
  }
}


/* iOS PWA sidebar must visually cover the bottom safe-area too. */
@media (max-width: 1100px) {
  body.sidebar-mobile-open .sidebar::after {
    content: "";
    position: fixed;
    left: 0;
    bottom: 0;
    width: min(320px, calc(100vw - 54px));
    height: max(20px, env(safe-area-inset-bottom));
    background: var(--shell-sidebar);
    pointer-events: none;
    z-index: -1;
  }
}


/* iOS installed-app safe-area paint while the left panel is open. */
@media (max-width: 1100px) {
  html.sidebar-mobile-open,
  html.sidebar-mobile-open body {
    background: var(--shell-sidebar) !important;
    background-color: var(--shell-sidebar) !important;
  }

  html.sidebar-mobile-open body::before {
    content: "";
    position: fixed;
    left: 0;
    bottom: 0;
    width: min(320px, calc(100vw - 54px));
    height: env(safe-area-inset-bottom);
    background: var(--shell-sidebar);
    z-index: 89;
    pointer-events: none;
  }

}


/* PWA root background: iOS safe areas use the document/manifest background, not always body content. */
html,
body {
  background: var(--shell-sidebar) !important;
  background-color: var(--shell-sidebar) !important;
}

.app-shell,
.chat-layout {
  background-color: var(--shell-bg);
}

.sidebar-user-format {
  display: block;
  margin-top: 1px;
  color: var(--w32);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.sidebar-collapsed .sidebar-user-format {
  display: none;
}

@media (max-width: 760px) {
  .chat-layout {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    transition: height 220ms cubic-bezier(0.2, 0.8, 0.2, 1), max-height 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  .messages {
    padding-bottom: 12px !important;
  }

  body.home-view .messages {
    padding-bottom: 12px !important;
  }

  .composer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(948px, 100%) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 10px max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 74 !important;
    transform: none !important;
    transition: padding-bottom 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: auto !important;
  }

  .composer-shell {
    min-height: 48px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  html.composer-keyboard-open .composer,
  body.composer-keyboard-open .composer {
    bottom: auto !important;
    transform: none !important;
  }
}

/* Campana del header: aunque esté oculta (sesión aún resolviéndose), RESERVA su hueco
   (invisible) para que al aparecer no empuje al icono de Qobrix ni a nada (7-jul). */
.chat-header-actions .notification-center-button[hidden] {
  display: inline-flex !important;
  visibility: hidden;
  pointer-events: none;
}
.notification-center-button {
  position: relative;
}

.notification-center-button.active,
.notification-center-button:hover {
  background: rgba(var(--brand-rgb), 0.16);
}

.header-icon-notifications {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z'/%3E%3C/svg%3E");
}
.header-icon-contacts {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z'/%3E%3C/svg%3E");
}
/* Logo OFICIAL Qobrix (elefante blanco sobre cuadrado azul) en la cabecera del chat. El CRM ya lleva el icono de
   personas, así que su botón tiene el MISMO círculo gris que los de al lado (fundador, 2-oct-2026): ya no se le
   quita el fondo. */
.header-icon-qobrix {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background-color: #2f6df6; /* auditor-ok: azul corporativo del logo QOBRIX, no nuestro token */
  background-image: url("/icons/qobrix-elephant.png");
  background-size: 23px auto; background-position: center; background-repeat: no-repeat;
}

.notification-center-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  /* Era #38bdf8 con texto #06131a y anillo #191a1d fijos: en claro el globo quedaba
     lavado y con un anillo negro alrededor. Ahora sale de los tokens de marca. (16-ago) */
  background: var(--brand-strong);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 900;
  line-height: 18px;
  box-shadow: 0 0 0 2px var(--panel);
}

.notification-center-panel {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 96;
  width: min(420px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  /* Era un gradiente oscuro pintado a mano (#141619) que el tema claro tapaba con un
     parche !important 6.000 líneas más abajo. Cerrado el agujero: panel por token. (16-ago) */
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.notification-center-panel[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.notification-center-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 18px 12px;
  scrollbar-width: none;
}

.notification-center-tabs::-webkit-scrollbar {
  display: none;
}

.notification-center-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--w11);
  border-radius: 999px;
  background: var(--panel-2);
  /* Era rgba(243,245,247,.78): blanco fijo. En tema claro las pestañas del filtro
     (No leídas / Todas / Leídas) quedaban blanco sobre blanco. (16-ago) */
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.notification-center-tab strong {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--panel-4);
  /* El contador de cada pestaña también era blanco fijo → invisible en claro. */
  color: var(--text);
  font-size: var(--fs-2xs);
  line-height: 22px;
  text-align: center;
}

.notification-center-tab.active {
  border-color: var(--brand);
  background: var(--brand-wash, rgba(var(--brand-rgb), 0.14));
  color: var(--brand-ink);
}

.notification-center-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 0 18px 18px;
}

.notification-center-item {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--panel-2);
  color: var(--text);
  text-decoration: none;
}

/* SIN LEER vs LEÍDO: antes se distinguían con azules fijos (rgba(56,189,248,…)) que en
   claro se perdían, y todos los avisos parecían igual de nuevos. Ahora la franja lateral
   y el fondo salen del token de marca (viran con el tema) y el leído baja de opacidad y
   pierde la franja: la diferencia se ve de un vistazo en los dos temas. (16-ago) */
.notification-center-item.is-unread {
  border-color: var(--brand);
  background: var(--brand-wash, var(--panel-3));
  box-shadow: inset 3px 0 0 var(--brand);
}

.notification-center-item.is-read {
  opacity: 0.62;
  box-shadow: none;
}

.notification-center-item:hover {
  border-color: var(--brand);
  background: var(--panel-3);
}

.notification-center-item-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Era #93c5fd fijo salvado por un parche light !important. Token directo. (16-ago) */
  color: var(--brand-ink);
  font-size: var(--fs-2xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notification-center-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.13);
}

.notification-center-item strong {
  /* Era #fff fijo con parche light !important al final del archivo. Token directo. (16-ago) */
  color: var(--text);
  font-size: var(--fs-xl);
}

.notification-center-item small {
  color: var(--muted);
  line-height: 1.35;
}

.notification-center-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-xl);
  color: var(--muted);
}

@media (max-width: 720px) {
  .notification-center-panel {
    inset: max(10px, env(safe-area-inset-top)) 10px auto 10px;
    width: auto;
    max-height: calc(100dvh - 20px);
    border-radius: var(--radius-xl);
  }
}

/* Agenda CRM compact visual pass 2026-05-21 */
.agenda-dialog {
  /* El gradiente oscuro !important de este pase pisaba el fondo por token de la regla
     base y dejaba muerto el arreglo del tema. Fuera: el fondo lo pone la base. (16-ago) */
  border-color: var(--line) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42) !important;
}

.agenda-dialog .chat-info-header {
  border-bottom: 1px solid var(--w07) !important;
  padding-bottom: 8px !important;
}

.agenda-dialog .chat-info-header h2 {
  letter-spacing: -0.035em !important;
}

.agenda-summary {
  align-items: stretch !important;
}

.agenda-metric {
  background:
    linear-gradient(180deg, var(--w055), var(--w025)) !important;
  border-color: var(--w11) !important;
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.26) !important;
}

.agenda-metric:nth-child(2) {
  box-shadow: inset 3px 0 0 rgba(248, 113, 113, 0.44) !important;
}

.agenda-metric:nth-child(3) {
  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.46) !important;
}

.agenda-metric:nth-child(4) {
  box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.46) !important;
}

.agenda-metric:nth-child(5) {
  box-shadow: inset 3px 0 0 rgba(251, 146, 60, 0.46) !important;
}

.agenda-workday,
.agenda-filter-panel,
.agenda-page-info,
.agenda-section-head {
  background: var(--w035) !important;
  border-color: var(--w09) !important;
}

.agenda-workday-card {
  background: var(--w035) !important;
  border-color: var(--w085) !important;
  box-shadow: none !important;
}

.agenda-workday-card button,
.agenda-link,
.agenda-contact-link {
  color: #7dd3fc !important;
}

.agenda-filter-chip,
.agenda-workblock {
  border-color: var(--w11) !important;
  background: var(--w045) !important;
  box-shadow: none !important;
}

.agenda-filter-chip.active,
.agenda-workblock.active {
  border-color: rgba(96, 165, 250, 0.58) !important;
  background: rgba(37, 99, 235, 0.2) !important;
  color: #f8fbff !important;
}

.agenda-card {
  position: relative !important;
  background:
    linear-gradient(90deg, var(--w035), var(--w018)) !important;
  border-color: var(--w09) !important;
  box-shadow: none !important;
}

.agenda-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: inherit;
  background: rgba(148, 163, 184, 0.5);
}

.agenda-card-overdue::before {
  background: rgba(248, 113, 113, 0.72);
}

.agenda-card-today::before {
  background: rgba(96, 165, 250, 0.78);
}

.agenda-card-upcoming::before {
  background: rgba(52, 211, 153, 0.66);
}

.agenda-card-head {
  gap: 12px !important;
}

.agenda-card h3 {
  letter-spacing: -0.02em !important;
}

.agenda-card p {
  color: rgba(244, 246, 248, 0.76) !important;
}

.agenda-card-meta span,
.agenda-card-meta a {
  background: var(--w055) !important;
  border: 1px solid var(--w045) !important;
}

.agenda-action-button {
  background: var(--w04) !important;
  border-color: var(--w13) !important;
}

.agenda-action-button:hover,
.agenda-action-button:focus-visible {
  background: var(--w075) !important;
  border-color: var(--w24) !important;
}

.agenda-action-primary {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(52, 211, 153, 0.36) !important;
  color: #d1fae5 !important;
}

@media (min-width: 761px) {
  .agenda-dialog {
    gap: 10px !important;
  }

  .agenda-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto !important;
  }

  .agenda-metric {
    min-height: 50px !important;
    padding: 9px 12px !important;
  }

  .agenda-metric strong {
    font-size: var(--fs-2xl) !important;
  }

  .agenda-workday {
    padding: 12px !important;
  }

  .agenda-workday-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .agenda-workday-card {
    min-height: 70px !important;
    padding: 10px !important;
  }

  .agenda-filter-panel {
    padding: 10px !important;
    gap: 8px !important;
  }

  .agenda-filter-row {
    gap: 7px !important;
  }

  .agenda-filter-chip,
  .agenda-workblock {
    min-height: 34px !important;
    padding: 7px 10px !important;
  }

  .agenda-card {
    padding: 12px 14px 10px 16px !important;
    gap: 9px !important;
  }

  .agenda-card-actions {
    margin-top: -2px !important;
  }
}

@media (max-width: 760px) {
  .agenda-dialog {
    border-radius: var(--radius-lg) !important;
    gap: 7px !important;
  }

  .agenda-dialog .chat-info-header {
    padding-bottom: 5px !important;
  }

  .agenda-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .agenda-metric {
    min-height: 44px !important;
    padding: 7px 8px !important;
  }

  .agenda-filter-panel {
    max-height: 94px !important;
  }

  .agenda-page-info,
  .agenda-section-head {
    font-size: var(--fs-xs) !important;
  }

  .agenda-card {
    padding: 10px 10px 10px 13px !important;
  }

  .agenda-card-head {
    align-items: flex-start !important;
  }

  .agenda-card time {
    font-size: var(--fs-xs) !important;
    white-space: nowrap !important;
  }

  .agenda-card-meta {
    gap: 5px !important;
  }

  .agenda-card-meta span,
  .agenda-card-meta a {
    max-width: 100% !important;
  }
}

/* Agenda task detail panel 2026-05-21 */
.agenda-task-detail {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 15px 16px 14px 18px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.1), var(--w028) 42%, var(--w018)),
    rgba(31, 32, 35, 0.96);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 var(--w035);
}

.agenda-task-detail::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: inherit;
  background: rgba(125, 211, 252, 0.68);
}

.agenda-task-detail.agenda-card-overdue::before {
  background: rgba(248, 113, 113, 0.76);
}

.agenda-task-detail.agenda-card-today::before {
  background: rgba(96, 165, 250, 0.78);
}

.agenda-task-detail.agenda-card-upcoming::before {
  background: rgba(52, 211, 153, 0.7);
}

.agenda-task-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.agenda-task-detail-head h3 {
  margin: 2px 0 0;
  color: #f8fafc;
  font-size: var(--fs-xl);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.agenda-task-detail-head time {
  flex: 0 0 auto;
  color: rgba(248, 250, 252, 0.88);
  font-size: var(--fs-sm);
  font-weight: 850;
  white-space: nowrap;
}

.agenda-task-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.agenda-task-detail-grid div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--w075);
  border-radius: var(--radius-md);
  background: var(--w035);
}

.agenda-task-detail-grid span {
  display: block;
  color: rgba(226, 232, 240, 0.58);
  font-size: var(--fs-3xs);
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.agenda-task-detail-grid strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #f8fafc;
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-task-detail p {
  margin: 0;
  color: rgba(248, 250, 252, 0.78);
  font-size: var(--fs-md);
  line-height: 1.45;
}

.agenda-task-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.agenda-detail-link {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.1);
  color: #7dd3fc;
  font-size: var(--fs-xs);
  font-weight: 850;
  text-decoration: none;
}

@media (max-width: 900px) {
  .agenda-task-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .agenda-task-detail {
    gap: 10px;
    padding: 11px 11px 11px 14px;
    border-radius: var(--radius-lg);
  }

  .agenda-task-detail-head {
    display: grid;
    gap: 6px;
  }

  .agenda-task-detail-head h3 {
    font-size: var(--fs-lg);
  }

  .agenda-task-detail-head time {
    font-size: var(--fs-xs);
  }

  .agenda-task-detail-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .agenda-task-detail-grid div {
    padding: 7px 8px;
  }

  .agenda-task-detail p {
    font-size: var(--fs-sm);
  }

  .agenda-task-detail-actions {
    justify-content: flex-start;
    gap: 6px;
  }

  .agenda-detail-link {
    min-height: 28px;
    padding: 5px 8px;
    font-size: var(--fs-2xs);
  }
}

/* Agenda density pass: prioritize task list viewport 2026-05-21 */
.agenda-dialog {
  gap: 7px !important;
}

.agenda-dialog .chat-info-header {
  min-height: 0 !important;
  padding-bottom: 4px !important;
}

.agenda-dialog .chat-info-header .drawer-eyebrow {
  margin-bottom: 1px !important;
  font-size: var(--fs-2xs) !important;
  letter-spacing: 0.14em !important;
}

.agenda-dialog .chat-info-header h2 {
  font-size: clamp(1.22rem, 1.8vw, 1.55rem) !important;
  line-height: 1 !important;
}

.agenda-toolbar {
  gap: 7px !important;
}

.agenda-summary {
  gap: 7px !important;
}

.agenda-metric {
  min-height: 38px !important;
  padding: 6px 10px !important;
  gap: 1px !important;
}

.agenda-metric span {
  font-size: var(--fs-3xs) !important;
  line-height: 1 !important;
}

.agenda-metric strong {
  font-size: var(--fs-xl) !important;
  line-height: 1 !important;
}

.agenda-toolbar .ghost-button,
#agenda-refresh {
  min-height: 34px !important;
  padding: 6px 11px !important;
  font-size: var(--fs-xs) !important;
}

.agenda-workday {
  padding: 8px !important;
  gap: 7px !important;
}

.agenda-workday-head {
  margin-bottom: 0 !important;
}

.agenda-workday-head .drawer-eyebrow {
  margin: 0 !important;
  font-size: var(--fs-3xs) !important;
}

.agenda-workday-head h3 {
  margin: 1px 0 0 !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.05 !important;
}

.agenda-workday-head span {
  font-size: var(--fs-xs) !important;
}

.agenda-workday-grid {
  gap: 6px !important;
}

.agenda-workday-card {
  min-height: 48px !important;
  padding: 7px 9px !important;
  gap: 3px !important;
}

.agenda-workday-card span {
  font-size: var(--fs-xs) !important;
}

.agenda-workday-card strong {
  top: 6px !important;
  right: 7px !important;
  min-width: 24px !important;
  height: 22px !important;
  font-size: var(--fs-2xs) !important;
}

.agenda-workday-card p {
  margin: 0 !important;
  max-width: calc(100% - 32px) !important;
  overflow: hidden !important;
  color: rgba(226, 232, 240, 0.58) !important;
  font-size: var(--fs-2xs) !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.agenda-workday-card button {
  min-height: auto !important;
  padding: 0 !important;
  font-size: var(--fs-2xs) !important;
  line-height: 1.1 !important;
}

.agenda-filter-panel {
  padding: 7px 8px !important;
  gap: 6px !important;
}

.agenda-filter-panel > .drawer-eyebrow,
.agenda-tabs-shell > .drawer-eyebrow {
  margin: 0 !important;
  font-size: var(--fs-3xs) !important;
  line-height: 1 !important;
}

.agenda-filter-row,
.agenda-workblocks {
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
  scrollbar-width: none !important;
}

.agenda-filter-row::-webkit-scrollbar,
.agenda-workblocks::-webkit-scrollbar {
  display: none !important;
}

.agenda-filter-chip,
.agenda-workblock {
  flex: 0 0 auto !important;
  min-height: 29px !important;
  padding: 5px 9px !important;
  font-size: var(--fs-2xs) !important;
}

.agenda-filter-chip strong,
.agenda-workblock strong {
  min-width: 22px !important;
  height: 20px !important;
  font-size: var(--fs-2xs) !important;
}

.agenda-page-info,
.agenda-section-head {
  min-height: 28px !important;
  padding: 5px 9px !important;
  font-size: var(--fs-xs) !important;
}

.agenda-section-head h3 {
  font-size: var(--fs-md) !important;
}

.agenda-list {
  gap: 6px !important;
}

.agenda-card {
  padding: 9px 12px 8px 15px !important;
  gap: 6px !important;
}

.agenda-card-head {
  gap: 10px !important;
}

.agenda-card h3 {
  font-size: var(--fs-md) !important;
  line-height: 1.15 !important;
}

.agenda-card p {
  font-size: var(--fs-sm) !important;
  line-height: 1.32 !important;
}

.agenda-card-meta {
  gap: 5px !important;
}

.agenda-card-meta span,
.agenda-card-meta a {
  padding: 4px 7px !important;
  font-size: var(--fs-2xs) !important;
}

.agenda-card-actions {
  gap: 6px !important;
}

.agenda-action-button {
  min-height: 26px !important;
  padding: 4px 8px !important;
  font-size: var(--fs-2xs) !important;
}

.agenda-task-detail {
  padding: 11px 13px 10px 16px !important;
  gap: 8px !important;
}

.agenda-task-detail-grid {
  gap: 6px !important;
}

.agenda-task-detail-grid div {
  padding: 7px 9px !important;
}

@media (min-width: 761px) {
  .agenda-dialog {
    grid-template-rows: auto auto auto auto minmax(360px, 1fr) !important;
  }

  .agenda-workday-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .agenda-dialog {
    gap: 5px !important;
    padding-top: 7px !important;
    grid-template-rows: auto auto auto minmax(330px, 1fr) !important;
  }

  .agenda-dialog .chat-info-header {
    padding-bottom: 2px !important;
  }

  .agenda-dialog .chat-info-header h2 {
    font-size: var(--fs-2xl) !important;
  }

  .agenda-summary {
    gap: 5px !important;
  }

  .agenda-metric {
    min-height: 37px !important;
    padding: 5px 7px !important;
  }

  .agenda-filter-panel {
    max-height: 78px !important;
    padding: 6px !important;
  }

  .agenda-filter-chip,
  .agenda-workblock {
    min-height: 27px !important;
    padding: 5px 8px !important;
  }

  .agenda-page-info,
  .agenda-section-head {
    min-height: 27px !important;
    padding: 5px 8px !important;
  }

  .agenda-card {
    padding: 8px 9px 8px 12px !important;
  }

  .agenda-card p {
    font-size: var(--fs-sm) !important;
    line-height: 1.3 !important;
  }
}

/* Agenda general aesthetic polish: cleaner CRM dashboard 2026-05-21 */
.agenda-dialog {
  /* Era texto #f4f6f8 + gradiente oscuro fijos con !important: el ÚLTIMO ganador de la
     cascada, que anulaba el fondo por token y obligaba al tema claro a vivir de parches.
     Tokens directos: vira solo con el tema. (16-ago) */
  color: var(--text) !important;
  background: var(--panel) !important;
}

.agenda-dialog .chat-info-header {
  position: relative !important;
}

.agenda-dialog .chat-info-header::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.28), var(--w08), transparent) !important;
}

.agenda-dialog .chat-info-header .drawer-eyebrow {
  color: rgba(186, 230, 253, 0.78) !important;
}

.agenda-dialog .chat-info-header h2 {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22) !important;
}

.agenda-summary {
  padding: 1px !important;
}

.agenda-metric {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--radius-lg) !important;
  background:
    linear-gradient(180deg, var(--w065), var(--w028)) !important;
}

.agenda-metric::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, var(--w055), transparent 40%) !important;
}

.agenda-metric span,
.agenda-workday-head .drawer-eyebrow,
.agenda-filter-panel > .drawer-eyebrow,
.agenda-tabs-shell > .drawer-eyebrow,
.agenda-kicker {
  color: rgba(203, 213, 225, 0.72) !important;
}

.agenda-metric strong {
  color: #ffffff !important;
}

.agenda-workday,
.agenda-filter-panel {
  border-radius: var(--radius-lg) !important;
  background:
    linear-gradient(180deg, var(--w043), var(--w024)) !important;
}

.agenda-workday-head h3 {
  color: var(--w94) !important;
}

.agenda-workday-card {
  border-radius: var(--radius-md) !important;
  background:
    linear-gradient(180deg, var(--w052), var(--w026)) !important;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease !important;
}

.agenda-workday-card:hover,
.agenda-workday-card:focus-within {
  border-color: rgba(125, 211, 252, 0.25) !important;
  background: rgba(14, 165, 233, 0.075) !important;
}

.agenda-workday-card span {
  color: rgba(248, 250, 252, 0.88) !important;
}

.agenda-workday-card button {
  color: #7dd3fc !important;
  text-decoration: none !important;
}

.agenda-filter-chip,
.agenda-workblock {
  color: rgba(248, 250, 252, 0.84) !important;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease !important;
}

.agenda-filter-chip:hover,
.agenda-workblock:hover {
  border-color: rgba(125, 211, 252, 0.28) !important;
  background: rgba(56, 189, 248, 0.08) !important;
}

.agenda-filter-chip.active,
.agenda-workblock.active {
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.16),
    inset 0 1px 0 var(--w08) !important;
}

.agenda-page-info {
  color: rgba(226, 232, 240, 0.78) !important;
  background: rgba(15, 23, 42, 0.22) !important;
}

.agenda-section-head {
  color: rgba(248, 250, 252, 0.9) !important;
  background: rgba(15, 23, 42, 0.28) !important;
}

.agenda-section-head h3 {
  color: #ffffff !important;
}

.agenda-section-head span {
  color: rgba(203, 213, 225, 0.72) !important;
}

.agenda-card,
.agenda-task-detail {
  border-radius: var(--radius-lg) !important;
  background:
    linear-gradient(180deg, var(--w042), var(--w018)) !important;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease !important;
}

.agenda-card:hover,
.agenda-card:focus-within {
  border-color: rgba(148, 163, 184, 0.2) !important;
  background:
    linear-gradient(180deg, var(--w055), var(--w024)) !important;
}

.agenda-card-overdue {
  border-color: rgba(248, 113, 113, 0.2) !important;
}

.agenda-card-today {
  border-color: rgba(96, 165, 250, 0.22) !important;
}

.agenda-card-upcoming {
  border-color: rgba(52, 211, 153, 0.18) !important;
}

.agenda-card h3,
.agenda-task-detail-head h3 {
  color: #ffffff !important;
}

.agenda-card time,
.agenda-task-detail-head time {
  color: rgba(248, 250, 252, 0.9) !important;
}

.agenda-card p,
.agenda-task-detail p {
  color: rgba(226, 232, 240, 0.78) !important;
}

.agenda-card-meta span,
.agenda-card-meta a,
.agenda-task-detail-grid div {
  color: rgba(248, 250, 252, 0.88) !important;
  background: rgba(15, 23, 42, 0.22) !important;
  border-color: var(--w055) !important;
}

.agenda-link,
.agenda-detail-link {
  color: #7dd3fc !important;
}

.agenda-action-button {
  color: rgba(248, 250, 252, 0.86) !important;
  border-radius: 999px !important;
}

.agenda-action-button[data-agenda-quick-action="no_response"] {
  border-color: rgba(248, 113, 113, 0.22) !important;
}

.agenda-action-button[data-agenda-quick-action="whatsapp"] {
  border-color: rgba(52, 211, 153, 0.22) !important;
}

.agenda-action-button[data-agenda-quick-action="reschedule"] {
  border-color: rgba(251, 191, 36, 0.22) !important;
}

.agenda-action-primary {
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  .agenda-dialog {
    background:
      radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.055), transparent 30%),
      linear-gradient(180deg, #242528 0%, #1f2023 52%, #1b1c1f 100%) !important;
  }

  .agenda-metric,
  .agenda-filter-panel,
  .agenda-workday,
  .agenda-card,
  .agenda-task-detail {
    border-radius: var(--radius-md) !important;
  }

  .agenda-card:hover,
  .agenda-card:focus-within {
    transform: none !important;
  }

  .agenda-action-button,
  .agenda-detail-link {
    font-weight: 850 !important;
  }
}

/* Agenda enterprise ultra-compact layout 2026-05-21 */
@media (min-width: 761px) {
  .agenda-dialog {
    gap: 5px !important;
    grid-template-rows: auto auto auto minmax(460px, 1fr) !important;
  }

  .agenda-dialog .chat-info-header {
    min-height: 0 !important;
    padding: 0 0 4px !important;
  }

  .agenda-dialog .chat-info-header .drawer-eyebrow {
    display: inline-block !important;
    margin-right: 10px !important;
    font-size: var(--fs-2xs) !important;
    vertical-align: baseline !important;
  }

  .agenda-dialog .chat-info-header h2 {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 1.24rem !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
  }

  .agenda-toolbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .agenda-summary {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .agenda-summary::-webkit-scrollbar {
    display: none !important;
  }

  .agenda-metric {
    flex: 0 0 auto !important;
    min-width: 132px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 5px 10px !important;
    border-radius: var(--radius-md) !important;
  }

  .agenda-metric span {
    font-size: var(--fs-3xs) !important;
    white-space: nowrap !important;
  }

  .agenda-metric strong {
    font-size: var(--fs-lg) !important;
  }

  #agenda-refresh,
  .agenda-toolbar .ghost-button {
    min-height: 32px !important;
    padding: 5px 12px !important;
    border-radius: var(--radius-md) !important;
    white-space: nowrap !important;
  }

  .agenda-workday {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: var(--radius-md) !important;
  }

  .agenda-workday-head {
    display: contents !important;
  }

  .agenda-workday-head .drawer-eyebrow {
    display: none !important;
  }

  .agenda-workday-head h3 {
    margin: 0 !important;
    font-size: var(--fs-sm) !important;
    white-space: nowrap !important;
  }

  .agenda-workday-head span {
    order: 3 !important;
    font-size: var(--fs-xs) !important;
    white-space: nowrap !important;
  }

  .agenda-workday-grid {
    display: flex !important;
    min-width: 0 !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .agenda-workday-grid::-webkit-scrollbar {
    display: none !important;
  }

  .agenda-workday-card {
    flex: 0 0 auto !important;
    min-width: 188px !important;
    min-height: 34px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "label count"
      "text action" !important;
    align-items: center !important;
    gap: 2px 7px !important;
    padding: 5px 8px !important;
    border-radius: var(--radius-md) !important;
  }

  .agenda-workday-card span {
    grid-area: label !important;
    font-size: var(--fs-2xs) !important;
    line-height: 1 !important;
  }

  .agenda-workday-card strong {
    position: static !important;
    grid-area: count !important;
    width: auto !important;
    min-width: 22px !important;
    height: 20px !important;
    font-size: var(--fs-2xs) !important;
    line-height: 20px !important;
  }

  .agenda-workday-card p {
    grid-area: text !important;
    max-width: 138px !important;
    font-size: var(--fs-3xs) !important;
  }

  .agenda-workday-card button {
    grid-area: action !important;
    justify-self: end !important;
    font-size: var(--fs-3xs) !important;
    white-space: nowrap !important;
  }

  .agenda-filter-panel {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 8px !important;
    border-radius: var(--radius-md) !important;
  }

  .agenda-filter-panel > .drawer-eyebrow,
  .agenda-tabs-shell > .drawer-eyebrow {
    margin: 0 !important;
    font-size: var(--fs-2xs) !important;
    white-space: nowrap !important;
  }

  .agenda-filter-row,
  .agenda-workblocks {
    min-width: 0 !important;
    gap: 5px !important;
  }

  .agenda-filter-chip,
  .agenda-workblock {
    min-height: 26px !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--fs-2xs) !important;
  }

  .agenda-filter-chip strong,
  .agenda-workblock strong {
    min-width: 20px !important;
    height: 18px !important;
    padding: 0 6px !important;
    font-size: var(--fs-3xs) !important;
    line-height: 18px !important;
  }

  .agenda-page-info,
  .agenda-section-head {
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--fs-2xs) !important;
  }

  .agenda-section-head h3 {
    font-size: var(--fs-sm) !important;
  }

  .agenda-list {
    gap: 5px !important;
  }

  .agenda-section-list {
    gap: 5px !important;
  }

  .agenda-card {
    min-height: 94px !important;
    padding: 8px 11px 7px 14px !important;
    gap: 4px !important;
    border-radius: var(--radius-md) !important;
  }

  .agenda-card-head {
    align-items: flex-start !important;
  }

  .agenda-card h3 {
    font-size: var(--fs-sm) !important;
    line-height: 1.08 !important;
  }

  .agenda-card time {
    font-size: var(--fs-xs) !important;
  }

  .agenda-card p {
    max-width: 78% !important;
    overflow: hidden !important;
    font-size: var(--fs-xs) !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .agenda-card-meta {
    max-width: 52% !important;
    overflow: hidden !important;
  }

  .agenda-card-meta span,
  .agenda-card-meta a {
    padding: 3px 6px !important;
    font-size: var(--fs-3xs) !important;
  }

  .agenda-card-actions {
    position: absolute !important;
    right: 12px !important;
    bottom: 8px !important;
    max-width: 48% !important;
    justify-content: flex-end !important;
  }

  .agenda-action-button {
    min-height: 24px !important;
    padding: 3px 7px !important;
    font-size: var(--fs-3xs) !important;
  }
}

@media (max-width: 760px) {
  .agenda-workday {
    display: none !important;
  }

  .agenda-dialog {
    grid-template-rows: auto auto auto minmax(380px, 1fr) !important;
  }
}

/* Agenda compact enterprise dashboard v13 - 2026-05-21 */
@media (min-width: 761px) {
  .agenda-dialog {
    gap: 6px !important;
    padding: 14px 18px 12px !important;
    grid-template-rows: auto auto auto minmax(460px, 1fr) !important;
  }

  .agenda-dialog .chat-info-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 0 0 4px !important;
    border-bottom: 1px solid var(--w08) !important;
  }

  .agenda-dialog .chat-info-header .drawer-eyebrow {
    grid-column: 1 !important;
    margin: 0 !important;
    font-size: var(--fs-3xs) !important;
    letter-spacing: .22em !important;
    color: rgba(150, 220, 255, .86) !important;
  }

  .agenda-dialog .chat-info-header h2 {
    grid-column: 1 !important;
    margin: -2px 0 0 !important;
    font-size: clamp(1.25rem, 1.7vw, 1.6rem) !important;
    line-height: .95 !important;
  }

  .agenda-dialog .chat-info-header .close-button,
  .agenda-dialog .chat-info-header button[id*="close"],
  .agenda-dialog .chat-info-header > button {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
  }

  .agenda-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .agenda-summary {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .agenda-metric {
    min-height: 34px !important;
    padding: 5px 11px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: var(--radius-md) !important;
  }

  .agenda-metric span {
    font-size: var(--fs-3xs) !important;
    letter-spacing: .16em !important;
    white-space: nowrap !important;
  }

  .agenda-metric strong {
    font-size: var(--fs-xl) !important;
    line-height: 1 !important;
  }

  #agenda-refresh {
    min-height: 34px !important;
    padding: 5px 14px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--fs-xs) !important;
    align-self: center !important;
  }

  .agenda-workday {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    border-radius: var(--radius-lg) !important;
    margin: 0 !important;
  }

  .agenda-workday-head {
    display: contents !important;
  }

  .agenda-workday-head .drawer-eyebrow {
    display: none !important;
  }

  .agenda-workday-head h3 {
    margin: 0 !important;
    font-size: var(--fs-sm) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .agenda-workday-head span {
    justify-self: end !important;
    font-size: var(--fs-2xs) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .agenda-workday-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .agenda-workday-card {
    min-height: 34px !important;
    padding: 5px 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: var(--radius-md) !important;
  }

  .agenda-workday-card span {
    font-size: var(--fs-2xs) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .agenda-workday-card strong {
    position: static !important;
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: var(--fs-2xs) !important;
    line-height: 20px !important;
  }

  .agenda-workday-card p {
    display: none !important;
  }

  .agenda-workday-card button {
    margin: 0 !important;
    font-size: var(--fs-3xs) !important;
    white-space: nowrap !important;
  }

  .agenda-filter-panel {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 8px !important;
    border-radius: var(--radius-lg) !important;
    margin: 0 !important;
  }

  .agenda-filter-panel > .drawer-eyebrow {
    margin: 0 !important;
    font-size: var(--fs-3xs) !important;
    letter-spacing: .16em !important;
    white-space: nowrap !important;
  }

  .agenda-filter-row {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .agenda-filter-chip,
  .agenda-workblock {
    min-height: 26px !important;
    padding: 4px 9px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--fs-2xs) !important;
    white-space: nowrap !important;
  }

  .agenda-filter-chip .count,
  .agenda-workblock .count {
    min-width: 21px !important;
    height: 20px !important;
    font-size: var(--fs-3xs) !important;
    line-height: 20px !important;
  }

  .agenda-page-info,
  .agenda-section-head {
    min-height: 25px !important;
    padding: 4px 9px !important;
    border-radius: var(--radius-md) !important;
    margin: 0 !important;
  }

  .agenda-section-head strong,
  .agenda-section-head span,
  .agenda-page-info {
    font-size: var(--fs-xs) !important;
    line-height: 1 !important;
  }

  .agenda-list {
    gap: 7px !important;
    padding-right: 4px !important;
  }

  .agenda-card {
    min-height: 98px !important;
    padding: 9px 12px 8px 16px !important;
    border-radius: var(--radius-lg) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title time"
      "body body"
      "meta actions" !important;
    column-gap: 12px !important;
    row-gap: 7px !important;
    align-items: center !important;
  }

  .agenda-card-head {
    display: contents !important;
  }

  .agenda-card-head > div {
    grid-area: title !important;
    min-width: 0 !important;
  }

  .agenda-card .drawer-eyebrow {
    font-size: var(--fs-3xs) !important;
    letter-spacing: .16em !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .agenda-card h4 {
    font-size: var(--fs-sm) !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .agenda-card time {
    grid-area: time !important;
    align-self: start !important;
    font-size: var(--fs-xs) !important;
    white-space: nowrap !important;
  }

  .agenda-card p {
    grid-area: body !important;
    margin: 0 !important;
    font-size: var(--fs-xs) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .agenda-card-meta {
    grid-area: meta !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .agenda-pill {
    min-height: 23px !important;
    padding: 3px 8px !important;
    font-size: var(--fs-3xs) !important;
    white-space: nowrap !important;
  }

  .agenda-card-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  .agenda-action-button {
    min-height: 24px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: var(--fs-3xs) !important;
    white-space: nowrap !important;
  }

  .agenda-task-detail {
    padding: 10px 12px !important;
    border-radius: var(--radius-lg) !important;
  }
}

@media (max-width: 760px) {
  .agenda-dialog {
    gap: 8px !important;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom)) !important;
  }

  .agenda-metric {
    min-height: 50px !important;
    padding: 9px 10px !important;
  }

  .agenda-filter-panel {
    padding: 9px !important;
  }

  .agenda-card {
    min-height: 132px !important;
    padding: 12px !important;
  }

  .agenda-card h4 {
    font-size: var(--fs-xl) !important;
  }

  .agenda-card p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* Agenda v13 hotfix: remove duplicated bulky tab/workblock layer */
@media (min-width: 761px) {
  .agenda-tabs-shell {
    display: grid !important;
    grid-template-rows: auto !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .agenda-tabs-shell > .drawer-eyebrow,
  .agenda-workblocks,
  #agenda-workblocks {
    display: none !important;
  }

  .agenda-filter-panel {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }

  .agenda-list {
    min-height: 450px !important;
  }
}

/* Agenda v15: give reserved tab height back to the task list */
@media (min-width: 761px) {
  .agenda-dialog {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
  }

  .agenda-tabs-shell,
  .agenda-tabs-shell * {
    display: none !important;
  }

  .agenda-filter-panel {
    grid-row: auto !important;
  }

  .agenda-list {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
  }
}

/* Agenda v17: stable desktop modal, visible tabs and usable task list */
@media (min-width: 761px) {
  .agenda-dialog {
    width: min(1120px, calc(100vw - 56px)) !important;
    height: min(820px, calc(100dvh - 56px)) !important;
    max-height: calc(100dvh - 56px) !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 16px 18px !important;
    overflow: hidden !important;
  }

  .agenda-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .agenda-summary {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .agenda-metric {
    min-width: 0 !important;
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 8px 11px !important;
  }

  .agenda-workday {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .agenda-workday-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .agenda-workday-head .drawer-eyebrow {
    display: none !important;
  }

  .agenda-workday-head h3 {
    margin: 0 !important;
    overflow: hidden !important;
    font-size: var(--fs-md) !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .agenda-workday-head span {
    flex: 0 0 auto !important;
    font-size: var(--fs-xs) !important;
    white-space: nowrap !important;
  }

  .agenda-workday-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .agenda-workday-card {
    min-width: 0 !important;
    min-height: 46px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "label count"
      "action action" !important;
    align-items: center !important;
    gap: 5px 8px !important;
    padding: 8px 10px !important;
  }

  .agenda-workday-card span {
    grid-area: label !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .agenda-workday-card strong {
    grid-area: count !important;
    position: static !important;
    justify-self: end !important;
  }

  .agenda-workday-card p {
    display: none !important;
  }

  .agenda-workday-card button {
    grid-area: action !important;
    justify-self: start !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .agenda-tabs-shell {
    display: grid !important;
    gap: 7px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: 1px solid var(--w1) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--w028) !important;
  }

  .agenda-tabs-shell > .drawer-eyebrow {
    display: block !important;
    margin: 0 !important;
    font-size: var(--fs-3xs) !important;
    letter-spacing: 0.16em !important;
  }

  .agenda-workblocks,
  #agenda-workblocks {
    display: flex !important;
    gap: 7px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 2px !important;
    scrollbar-width: thin !important;
  }

  .agenda-workblock {
    flex: 0 0 auto !important;
    min-width: 128px !important;
    min-height: 31px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 9px !important;
    padding: 5px 9px !important;
  }

  .agenda-filter-panel {
    display: none !important;
  }

  .agenda-list {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    overflow-y: auto !important;
    padding: 0 5px 2px 0 !important;
  }

  .agenda-section-list {
    display: grid !important;
    gap: 7px !important;
  }
}

@media (max-width: 760px) {
  .agenda-dialog {
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  }

  .agenda-tabs-shell {
    display: grid !important;
  }

  .agenda-workblocks,
  #agenda-workblocks {
    display: flex !important;
    overflow-x: auto !important;
  }

  .agenda-filter-panel {
    display: none !important;
  }
}

/* Agenda v18: hard override duplicated agenda layers */
#agenda-dialog.agenda-dialog {
  display: grid !important;
  overflow: hidden !important;
}

#agenda-dialog .agenda-workday {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#agenda-dialog .agenda-workday-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 8px !important;
}

#agenda-dialog .agenda-workday-head .drawer-eyebrow {
  display: none !important;
}

#agenda-dialog .agenda-workday-head h3 {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: var(--fs-md) !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-workday-head span {
  flex: 0 0 auto !important;
  font-size: var(--fs-xs) !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-workday-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#agenda-dialog .agenda-workday-card {
  min-width: 0 !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "label count"
    "action action" !important;
  align-items: center !important;
  gap: 5px 8px !important;
}

#agenda-dialog .agenda-workday-card span {
  grid-area: label !important;
}

#agenda-dialog .agenda-workday-card strong {
  grid-area: count !important;
  position: static !important;
}

#agenda-dialog .agenda-workday-card p {
  display: none !important;
}

#agenda-dialog .agenda-workday-card button {
  grid-area: action !important;
  justify-self: start !important;
}

#agenda-dialog .agenda-filter-panel,
#agenda-dialog #agenda-bucket-filters,
#agenda-dialog #agenda-type-filters {
  display: none !important;
}

#agenda-dialog .agenda-toolbar {
  display: none !important;
}

#agenda-dialog .agenda-workday[hidden],
#agenda-dialog .agenda-workday:empty {
  display: none !important;
}

#agenda-dialog .agenda-tabs-shell {
  display: grid !important;
  gap: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--w1) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--w028) !important;
}

#agenda-dialog .agenda-tabs-shell > .drawer-eyebrow {
  display: none !important;
  margin: 0 !important;
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: var(--fs-3xs) !important;
  letter-spacing: 0.16em !important;
}

#agenda-dialog #agenda-workblocks {
  display: flex !important;
  gap: 7px !important;
  min-width: 0 !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 2px !important;
}

#agenda-dialog .agenda-workblock {
  flex: 0 0 auto !important;
  min-width: 128px !important;
  min-height: 31px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 9px !important;
  padding: 5px 9px !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 360px !important;
  min-height: 31px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control-title {
  display: none !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 31px !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-arrow,
#agenda-dialog #agenda-workblocks .agenda-date-clear,
#agenda-dialog #agenda-workblocks .agenda-date-label {
  min-height: 31px !important;
  height: 31px !important;
  border-radius: var(--radius-md) !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-label {
  min-width: 174px !important;
  padding: 0 16px !important;
}

#agenda-dialog #agenda-workblocks .agenda-calendar-popover {
  left: auto !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
}

#agenda-dialog .agenda-inline-refresh,
#agenda-dialog .agenda-inline-calendario {
  flex: 0 0 auto !important;
  min-height: 31px !important;
  padding: 5px 14px !important;
  border: 1px solid var(--w12) !important;
  border-radius: var(--radius-md) !important;
  background: var(--w07) !important;
  color: rgba(243, 246, 248, 0.88) !important;
  font: inherit !important;
  font-size: var(--fs-xs) !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

#agenda-dialog .agenda-inline-refresh:hover,
#agenda-dialog .agenda-inline-calendario:hover {
  border-color: rgba(125, 211, 252, 0.42) !important;
  background: rgba(125, 211, 252, 0.12) !important;
}

#agenda-dialog .agenda-workblock span,
#agenda-dialog .agenda-workblock strong {
  display: inline-flex !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#agenda-dialog .agenda-workblock span {
  color: rgba(248, 250, 252, 0.86) !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 850 !important;
}

#agenda-dialog .agenda-workblock strong {
  justify-content: center !important;
  color: #ffffff !important;
}

@media (min-width: 761px) {
  #agenda-dialog.agenda-dialog {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  #agenda-dialog .agenda-workday {
    display: none !important;
  }
}

/* Agenda v16 final density pass */
@media (min-width: 761px) {
  .agenda-workday {
    grid-template-columns: minmax(190px, .9fr) minmax(0, 3.1fr) auto !important;
    min-height: 42px !important;
    padding: 6px 9px !important;
  }

  .agenda-workday-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .agenda-workday-card {
    min-height: 28px !important;
    padding: 4px 8px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }

  .agenda-workday-card button {
    display: none !important;
  }

  .agenda-workday-card span {
    font-size: var(--fs-2xs) !important;
  }

  .agenda-card {
    min-height: 92px !important;
    padding: 8px 11px 7px 15px !important;
    row-gap: 5px !important;
  }

  .agenda-card .drawer-eyebrow {
    font-size: var(--fs-3xs) !important;
    margin-bottom: 1px !important;
  }

  .agenda-card h4 {
    font-size: var(--fs-sm) !important;
  }

  .agenda-card p {
    font-size: var(--fs-2xs) !important;
  }

  .agenda-pill {
    min-height: 22px !important;
    padding: 3px 7px !important;
    font-size: var(--fs-3xs) !important;
  }

  .agenda-action-button {
    min-height: 23px !important;
    padding: 3px 7px !important;
    font-size: var(--fs-3xs) !important;
  }
}

/* Agenda v19: grouped reminders by client/opportunity */
#agenda-dialog .agenda-card-group-summary {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: -2px !important;
  color: rgba(203, 213, 225, 0.76) !important;
  font-size: var(--fs-2xs) !important;
}

#agenda-dialog .agenda-card-group-summary strong {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(125, 211, 252, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(14, 165, 233, 0.12) !important;
  color: rgba(224, 242, 254, 0.94) !important;
  font-size: var(--fs-3xs) !important;
  font-weight: 850 !important;
}

#agenda-dialog .agenda-card-group-summary span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-page-info {
  font-size: var(--fs-xs) !important;
}

@media (min-width: 761px) {
  #agenda-dialog .agenda-card {
    min-height: 98px !important;
  }

  #agenda-dialog .agenda-card-head {
    gap: 12px !important;
  }

  #agenda-dialog .agenda-section-head span {
    min-width: max-content !important;
  }
}

/* Agenda v20: keep grouped task badge out of action buttons */
#agenda-dialog .agenda-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "head head"
    "desc desc"
    "group group"
    "meta actions" !important;
  align-items: start !important;
}

#agenda-dialog .agenda-card-head {
  grid-area: head !important;
}

#agenda-dialog .agenda-card > p {
  grid-area: desc !important;
}

#agenda-dialog .agenda-card-group-summary {
  grid-area: group !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  position: static !important;
  z-index: 1 !important;
}

#agenda-dialog .agenda-card-meta {
  grid-area: meta !important;
  min-width: 0 !important;
  align-self: center !important;
}

#agenda-dialog .agenda-card-actions {
  grid-area: actions !important;
  justify-self: end !important;
  align-self: center !important;
  position: static !important;
  max-width: 100% !important;
  z-index: 2 !important;
}

@media (max-width: 760px) {
  #agenda-dialog .agenda-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "desc"
      "group"
      "meta"
      "actions" !important;
  }

  #agenda-dialog .agenda-card-actions {
    justify-self: stretch !important;
  }
}

/* Agenda v21: stable grouped card structure */
#agenda-dialog .agenda-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  /* Las ACCIONES van en su PROPIA fila a ancho completo (antes compartían columna estrecha con
     "meta" y, con muchos botones —Mañana/Lunes/Otra fecha/Hecho…— se amontonaban/pisaban). */
  grid-template-areas:
    "head head"
    "desc desc"
    "group group"
    "meta meta"
    "actions actions" !important;
  gap: 6px 14px !important;
  min-height: 0 !important;
  align-items: start !important;
}

#agenda-dialog .agenda-card-head {
  grid-area: head !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
  width: 100% !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-head > div {
  min-width: 0 !important;
}

#agenda-dialog .agenda-card-head time {
  flex: 0 0 auto !important;
  position: static !important;
  transform: none !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-card > p {
  grid-area: desc !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-group-summary {
  grid-area: group !important;
  min-width: 0 !important;
  width: 100% !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-meta {
  grid-area: meta !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-meta span,
#agenda-dialog .agenda-card-meta a {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 180px !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-actions {
  grid-area: actions !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--w06) !important;
  position: static !important;
  transform: none !important;
}

@media (max-width: 760px) {
  #agenda-dialog .agenda-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "desc"
      "group"
      "meta"
      "actions" !important;
  }

  #agenda-dialog .agenda-card-head {
    display: grid !important;
    gap: 4px !important;
  }

  #agenda-dialog .agenda-card-actions {
    justify-content: flex-start !important;
  }
}

/* Agenda v22: isolated agenda card markup, avoids legacy card CSS collisions */
#agenda-dialog .agenda-card.agenda-card-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 12px 14px 12px 18px !important;
  overflow: hidden !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-title {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-kicker {
  display: block !important;
  color: rgba(203, 213, 225, 0.62) !important;
  font-size: var(--fs-3xs) !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-title-text {
  display: block !important;
  color: rgba(248, 250, 252, 0.94) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-date {
  flex: 0 0 auto !important;
  color: rgba(248, 250, 252, 0.88) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-description {
  color: rgba(203, 213, 225, 0.78) !important;
  font-size: var(--fs-2xs) !important;
  line-height: 1.35 !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-group strong {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 22px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(125, 211, 252, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(14, 165, 233, 0.12) !important;
  color: rgba(224, 242, 254, 0.94) !important;
  font-size: var(--fs-3xs) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-group span {
  min-width: 0 !important;
  color: rgba(203, 213, 225, 0.68) !important;
  font-size: var(--fs-2xs) !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 46% !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-meta span,
#agenda-dialog .agenda-card-v2 .agenda-v2-meta a {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 170px !important;
  min-width: 0 !important;
  min-height: 22px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.3) !important;
  color: rgba(248, 250, 252, 0.86) !important;
  font-size: var(--fs-3xs) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  position: static !important;
  transform: none !important;
}

#agenda-dialog .agenda-card-v2 .agenda-v2-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
}

@media (max-width: 900px) {
  #agenda-dialog .agenda-card-v2 .agenda-v2-footer {
    display: grid !important;
    gap: 8px !important;
  }

  #agenda-dialog .agenda-card-v2 .agenda-v2-meta {
    max-width: 100% !important;
  }

  #agenda-dialog .agenda-card-v2 .agenda-v2-actions {
    justify-content: flex-start !important;
  }
}

/* Agenda v23: compact operational header + date picker */
#agenda-dialog .agenda-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 10px !important;
}

#agenda-dialog .agenda-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(104px, 1fr)) minmax(260px, 1.25fr) !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
}

#agenda-dialog .agenda-metric,
#agenda-dialog .agenda-date-control {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-md) !important;
  background: var(--w045) !important;
  border: 1px solid var(--w12) !important;
}

#agenda-dialog .agenda-metric span,
#agenda-dialog .agenda-date-control > span {
  overflow: hidden !important;
  color: rgba(203, 213, 225, 0.74) !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#agenda-dialog .agenda-metric strong {
  color: var(--w94) !important;
  font-size: var(--fs-2xl) !important;
  line-height: 1 !important;
}

#agenda-dialog .agenda-date-control {
  min-width: 0 !important;
}

#agenda-dialog .agenda-date-control-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#agenda-dialog .agenda-date-control button,
#agenda-dialog .agenda-date-control label {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--w12) !important;
  background: rgba(15, 23, 42, 0.25) !important;
  color: rgba(248, 250, 252, 0.9) !important;
}

#agenda-dialog .agenda-date-control button {
  min-width: 30px !important;
  padding: 4px 8px !important;
  font: inherit !important;
  font-size: var(--fs-xs) !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#agenda-dialog .agenda-date-control .agenda-date-clear {
  min-width: 48px !important;
  font-size: var(--fs-2xs) !important;
}

#agenda-dialog .agenda-date-control label {
  position: relative !important;
  min-width: 116px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
}

#agenda-dialog .agenda-date-control label strong {
  max-width: 112px !important;
  overflow: hidden !important;
  font-size: var(--fs-2xs) !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-date-control input[type="date"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

#agenda-dialog .agenda-date-control.has-date {
  border-color: rgba(96, 165, 250, 0.34) !important;
}

#agenda-dialog .agenda-workday {
  display: grid !important;
  grid-template-columns: minmax(170px, 0.72fr) minmax(0, 3.28fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 56px !important;
  padding: 9px 12px !important;
}

#agenda-dialog .agenda-workday-head {
  margin: 0 !important;
}

#agenda-dialog .agenda-workday-head h3 {
  font-size: var(--fs-lg) !important;
}

#agenda-dialog .agenda-workday-head span {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: var(--fs-2xs) !important;
}

#agenda-dialog .agenda-workday-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#agenda-dialog .agenda-workday-card {
  appearance: none !important;
  width: 100% !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 9px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--w11) !important;
  background: var(--w04) !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

#agenda-dialog .agenda-workday-card:hover,
#agenda-dialog .agenda-workday-card:focus-visible {
  border-color: rgba(125, 211, 252, 0.3) !important;
  background: rgba(125, 211, 252, 0.08) !important;
}

#agenda-dialog .agenda-workday-card span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(248, 250, 252, 0.88) !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-workday-card strong {
  min-width: 24px !important;
  min-height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: var(--w1) !important;
  color: #ffffff !important;
  font-size: var(--fs-2xs) !important;
}

#agenda-dialog .agenda-workday-card p {
  grid-column: 1 / -1 !important;
  margin: -2px 0 0 !important;
  overflow: hidden !important;
  color: rgba(203, 213, 225, 0.62) !important;
  font-size: var(--fs-3xs) !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-tabs-shell {
  padding: 8px 10px !important;
}

#agenda-dialog #agenda-workblocks {
  gap: 6px !important;
}

#agenda-dialog .agenda-workblock {
  min-width: 108px !important;
  min-height: 30px !important;
  padding: 5px 9px !important;
}

#agenda-dialog .agenda-workblock span {
  font-size: var(--fs-2xs) !important;
}

#agenda-dialog .agenda-workblock strong {
  min-width: 22px !important;
  min-height: 20px !important;
  font-size: var(--fs-3xs) !important;
}

@media (max-width: 1100px) {
  #agenda-dialog .agenda-summary {
    grid-template-columns: repeat(2, minmax(100px, 1fr)) minmax(240px, 1.2fr) !important;
  }

  #agenda-dialog .agenda-workday {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  #agenda-dialog .agenda-toolbar {
    grid-template-columns: 1fr !important;
  }

  #agenda-dialog .agenda-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #agenda-dialog .agenda-date-control {
    grid-column: 1 / -1 !important;
  }

  #agenda-dialog .agenda-workday {
    display: grid !important;
  }

  #agenda-dialog .agenda-workday-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #agenda-dialog .agenda-workday-card p {
    display: none !important;
  }

  #agenda-dialog .agenda-workblock {
    min-width: 96px !important;
  }
}

/* Agenda v24: stronger readability for compact header */
#agenda-dialog .agenda-summary,
#agenda-dialog .agenda-workday,
#agenda-dialog .agenda-tabs-shell {
  background: var(--w032) !important;
  border: 1px solid var(--w13) !important;
  border-radius: var(--radius-lg) !important;
}

#agenda-dialog .agenda-summary {
  padding: 8px !important;
}

#agenda-dialog .agenda-metric,
#agenda-dialog .agenda-date-control {
  background: var(--w075) !important;
  border-color: var(--w18) !important;
  box-shadow: inset 0 1px 0 var(--w07) !important;
}

#agenda-dialog .agenda-metric span,
#agenda-dialog .agenda-date-control > span {
  color: rgba(226, 232, 240, 0.9) !important;
}

#agenda-dialog .agenda-metric strong {
  color: #ffffff !important;
  font-size: 1.22rem !important;
}

#agenda-dialog .agenda-date-control label,
#agenda-dialog .agenda-date-control button {
  background: rgba(15, 23, 42, 0.48) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

#agenda-dialog .agenda-date-control label strong,
#agenda-dialog .agenda-date-control button {
  color: var(--w96) !important;
}

#agenda-dialog .agenda-date-control.has-date label {
  border-color: rgba(125, 211, 252, 0.45) !important;
  background: rgba(14, 165, 233, 0.14) !important;
}

#agenda-dialog .agenda-workday {
  background: var(--w04) !important;
}

#agenda-dialog .agenda-workday-head h3 {
  color: #ffffff !important;
  font-size: var(--fs-xl) !important;
}

#agenda-dialog .agenda-workday-head span {
  color: rgba(226, 232, 240, 0.84) !important;
}

#agenda-dialog .agenda-workday-card,
#agenda-dialog .agenda-workblock {
  background: var(--w07) !important;
  border-color: var(--w16) !important;
}

#agenda-dialog .agenda-workday-card span,
#agenda-dialog .agenda-workblock span {
  color: var(--w94) !important;
}

#agenda-dialog .agenda-workday-card strong,
#agenda-dialog .agenda-workblock strong {
  background: var(--w16) !important;
  color: #ffffff !important;
}

#agenda-dialog .agenda-workday-card p {
  color: rgba(226, 232, 240, 0.76) !important;
}

#agenda-dialog .agenda-workday-card:hover,
#agenda-dialog .agenda-workday-card:focus-visible,
#agenda-dialog .agenda-workblock:hover,
#agenda-dialog .agenda-workblock.active {
  border-color: rgba(125, 211, 252, 0.5) !important;
  background: rgba(14, 165, 233, 0.16) !important;
}

#agenda-dialog .agenda-tabs-shell > .drawer-eyebrow {
  color: rgba(226, 232, 240, 0.86) !important;
}

/* Agenda v25: fix date picker and toolbar buttons layout */
#agenda-dialog .agenda-toolbar {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: stretch !important;
}

#agenda-dialog .agenda-toolbar > .ghost-button {
  width: auto !important;
  min-width: 86px !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-md) !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-summary {
  grid-template-columns: repeat(4, minmax(110px, 1fr)) minmax(330px, 1.15fr) !important;
  align-items: stretch !important;
}

#agenda-dialog .agenda-date-control {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
}

#agenda-dialog .agenda-date-control > span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 44px !important;
}

#agenda-dialog .agenda-date-control-row {
  display: grid !important;
  grid-template-columns: 30px minmax(118px, 1fr) 30px auto !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#agenda-dialog .agenda-date-control .agenda-date-arrow,
#agenda-dialog .agenda-date-control .agenda-date-clear,
#agenda-dialog .agenda-date-control .agenda-date-label {
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  background: rgba(15, 23, 42, 0.5) !important;
  color: var(--w96) !important;
  box-sizing: border-box !important;
}

#agenda-dialog .agenda-date-control .agenda-date-arrow {
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  font-size: var(--fs-xl) !important;
  line-height: 1 !important;
}

#agenda-dialog .agenda-date-control .agenda-date-label {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  cursor: pointer !important;
}

#agenda-dialog .agenda-date-control .agenda-date-label strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--w96) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-date-control .agenda-date-clear {
  min-width: 52px !important;
  padding: 0 9px !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 900 !important;
}

#agenda-dialog .agenda-date-control .agenda-date-native {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  appearance: none !important;
}

#agenda-dialog .agenda-date-control.has-date .agenda-date-label {
  border-color: rgba(125, 211, 252, 0.5) !important;
  background: rgba(14, 165, 233, 0.16) !important;
}

@media (max-width: 1280px) {
  #agenda-dialog .agenda-summary {
    grid-template-columns: repeat(2, minmax(110px, 1fr)) minmax(300px, 1fr) !important;
  }
}

@media (max-width: 760px) {
  #agenda-dialog .agenda-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  #agenda-dialog .agenda-summary {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #agenda-dialog .agenda-date-control {
    grid-column: 1 / -1 !important;
  }

  #agenda-dialog .agenda-toolbar > .ghost-button {
    min-width: 0 !important;
    min-height: 38px !important;
  }
}

/* Agenda v26: compact useful header with invisible native calendar control */
#agenda-dialog .agenda-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 12px !important;
}

#agenda-dialog .agenda-toolbar > .ghost-button {
  align-self: stretch !important;
  width: auto !important;
  min-width: 104px !important;
  min-height: 58px !important;
  padding: 10px 16px !important;
  border-radius: var(--radius-lg) !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(128px, 1fr)) minmax(315px, 0.95fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#agenda-dialog .agenda-summary > article {
  box-sizing: border-box !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 10px 14px !important;
  overflow: hidden !important;
}

#agenda-dialog .agenda-summary > article:not(.agenda-date-control) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

#agenda-dialog .agenda-date-control {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#agenda-dialog .agenda-date-control-title {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 40px !important;
  color: rgba(226, 232, 240, 0.9) !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#agenda-dialog .agenda-date-control-row {
  display: grid !important;
  grid-template-columns: 30px minmax(130px, 1fr) 30px auto !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#agenda-dialog .agenda-date-picker-shell {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  height: 32px !important;
}

#agenda-dialog .agenda-date-control .agenda-date-arrow,
#agenda-dialog .agenda-date-control .agenda-date-clear,
#agenda-dialog .agenda-date-control .agenda-date-label {
  box-sizing: border-box !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(15, 23, 42, 0.54) !important;
  color: var(--w96) !important;
  font-weight: 900 !important;
}

#agenda-dialog .agenda-date-control .agenda-date-arrow {
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  font-size: var(--fs-xl) !important;
  line-height: 1 !important;
}

#agenda-dialog .agenda-date-control .agenda-date-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  pointer-events: none !important;
}

#agenda-dialog .agenda-date-control .agenda-date-label strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--w97) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#agenda-dialog .agenda-date-control .agenda-date-clear {
  min-width: 54px !important;
  padding: 0 10px !important;
  font-size: var(--fs-2xs) !important;
}

#agenda-dialog .agenda-date-control .agenda-date-native {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  opacity: 0 !important;
  cursor: pointer !important;
  color: transparent !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#agenda-dialog .agenda-date-control .agenda-date-native::-webkit-calendar-picker-indicator {
  cursor: pointer !important;
}

#agenda-dialog .agenda-date-control.has-date .agenda-date-label {
  border-color: rgba(125, 211, 252, 0.5) !important;
  background: rgba(14, 165, 233, 0.16) !important;
}

@media (max-width: 1360px) {
  #agenda-dialog .agenda-summary {
    grid-template-columns: repeat(2, minmax(138px, 1fr)) minmax(300px, 1fr) !important;
  }
}

@media (max-width: 760px) {
  #agenda-dialog .agenda-toolbar {
    grid-template-columns: 1fr !important;
  }

  #agenda-dialog .agenda-toolbar > .ghost-button {
    min-height: 42px !important;
  }

  #agenda-dialog .agenda-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #agenda-dialog .agenda-date-control {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 430px) {
  #agenda-dialog .agenda-date-control {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 6px !important;
  }

  #agenda-dialog .agenda-date-control-row {
    grid-template-columns: 28px minmax(0, 1fr) 28px auto !important;
  }
}

/* Agenda v27: keep top controls in one compact desktop row */
@media (min-width: 981px) {
  #agenda-dialog .agenda-toolbar {
    align-items: start !important;
  }

  #agenda-dialog .agenda-toolbar > .ghost-button {
    align-self: start !important;
    height: 58px !important;
    min-height: 58px !important;
  }

  #agenda-dialog .agenda-summary {
    grid-template-columns: repeat(4, minmax(112px, 1fr)) minmax(285px, 0.92fr) !important;
  }
}

@media (min-width: 981px) and (max-width: 1360px) {
  #agenda-dialog .agenda-summary {
    grid-template-columns: repeat(4, minmax(112px, 1fr)) minmax(285px, 0.92fr) !important;
  }
}

/* Agenda v28: remove redundant labels that collide in compact agenda header */
#agenda-dialog .agenda-date-control {
  grid-template-columns: minmax(0, 1fr) !important;
}

#agenda-dialog .agenda-date-control-title {
  display: none !important;
}

#agenda-dialog .agenda-workday-head span {
  display: none !important;
}

#agenda-dialog .agenda-workday-head {
  grid-template-columns: 1fr !important;
}

/* Agenda v29: custom calendar with date-range selection */
#agenda-dialog .agenda-toolbar,
#agenda-dialog .agenda-summary,
#agenda-dialog .agenda-summary > article.agenda-date-control {
  overflow: visible !important;
}

#agenda-dialog .agenda-date-control {
  position: relative !important;
  z-index: 20 !important;
}

#agenda-dialog .agenda-date-control.is-open {
  z-index: 80 !important;
}

#agenda-dialog .agenda-date-control .agenda-date-label {
  pointer-events: auto !important;
  cursor: pointer !important;
}

#agenda-dialog .agenda-calendar-popover {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  z-index: 120 !important;
  width: min(306px, calc(100vw - 36px)) !important;
  padding: 14px 14px 12px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--panel) !important; /* era #080b0f fijo: calendario negro en claro */
  color: var(--text) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34) !important;
}

#agenda-dialog .agenda-calendar-header {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 30px !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

#agenda-dialog .agenda-calendar-header strong {
  color: #ffffff !important;
  font-size: var(--fs-lg) !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-transform: lowercase !important;
}

#agenda-dialog .agenda-calendar-header button {
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

#agenda-dialog .agenda-calendar-header button:hover,
#agenda-dialog .agenda-calendar-header button:focus-visible {
  background: var(--w12) !important;
}

#agenda-dialog .agenda-calendar-weekdays,
#agenda-dialog .agenda-calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}

#agenda-dialog .agenda-calendar-weekdays {
  margin-bottom: 6px !important;
}

#agenda-dialog .agenda-calendar-weekdays span {
  color: var(--w68) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

#agenda-dialog .agenda-calendar-empty {
  min-height: 32px !important;
}

#agenda-dialog .agenda-calendar-day {
  width: 32px !important;
  height: 32px !important;
  justify-self: center !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: var(--fs-md) !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

#agenda-dialog .agenda-calendar-day:hover,
#agenda-dialog .agenda-calendar-day:focus-visible {
  background: rgba(37, 141, 192, 0.22) !important;
}

#agenda-dialog .agenda-calendar-day.is-today {
  outline: 1px solid rgba(37, 141, 192, 0.6) !important;
  outline-offset: -2px !important;
}

#agenda-dialog .agenda-calendar-day.is-range {
  border-radius: var(--radius-sm) !important;
  background: rgba(37, 141, 192, 0.28) !important;
  color: #ffffff !important;
}

#agenda-dialog .agenda-calendar-day.is-start,
#agenda-dialog .agenda-calendar-day.is-end {
  background: #258dc0 !important;
  color: #ffffff !important;
  outline: 0 !important;
}

#agenda-dialog .agenda-calendar-help {
  margin-top: 10px !important;
  color: var(--w62) !important;
  font-size: var(--fs-2xs) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  #agenda-dialog .agenda-calendar-popover {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

body.qobrix-mode-active .composer-shell {
  border-color: rgba(59, 190, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(32, 36, 43, 0.97), rgba(26, 29, 35, 0.98)),
    linear-gradient(135deg, rgba(59, 190, 255, 0.06), rgba(59, 190, 255, 0.01));
  box-shadow:
    inset 0 1px 0 var(--w08),
    0 0 0 1px rgba(59, 190, 255, 0.06),
    0 12px 34px rgba(0, 0, 0, 0.28);
}

body.qobrix-mode-active .composer-shell:focus-within {
  border-color: rgba(91, 207, 255, 0.54);
  box-shadow:
    inset 0 1px 0 var(--w1),
    0 0 0 3px rgba(59, 190, 255, 0.11),
    0 14px 36px rgba(0, 0, 0, 0.3);
}

/* Modo Legal: composer con tinte violeta (Abogado). */
body.legal-mode-active .composer-shell {
  border-color: rgba(168, 85, 247, 0.32);
  background:
    linear-gradient(180deg, rgba(32, 36, 43, 0.97), rgba(26, 29, 35, 0.98)),
    linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(168, 85, 247, 0.01));
  box-shadow:
    inset 0 1px 0 var(--w08),
    0 0 0 1px rgba(168, 85, 247, 0.06),
    0 12px 34px rgba(0, 0, 0, 0.28);
}

body.legal-mode-active .composer-shell:focus-within {
  border-color: rgba(196, 124, 255, 0.56);
  box-shadow:
    inset 0 1px 0 var(--w1),
    0 0 0 3px rgba(168, 85, 247, 0.13),
    0 14px 36px rgba(0, 0, 0, 0.3);
}
/* En tema CLARO, el composer del Abogado usa fondo claro con tinte violeta (el base
   lleva un panel oscuro fijo pensado para oscuro). */
:root[data-theme="light"] body.legal-mode-active .composer-shell {
  border-color: var(--legal-border-strong);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--legal-accent) 7%, transparent), transparent),
    var(--panel);
}

.qobrix-pending-button[data-qobrix-pending-action="confirmo"],
.assistant-primary-answer .qobrix-pending-button[data-qobrix-pending-action="confirmo"] {
  border-color: rgba(59, 190, 255, 0.72) !important;
  color: rgba(236, 249, 255, 0.98) !important;
  background: linear-gradient(180deg, rgba(22, 92, 124, 0.96), rgba(12, 54, 79, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 var(--w14),
    0 0 0 1px rgba(59, 190, 255, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

.qobrix-pending-button[data-qobrix-pending-action="cancelar"],
.assistant-primary-answer .qobrix-pending-button[data-qobrix-pending-action="cancelar"] {
  border-color: rgba(244, 83, 99, 0.78) !important;
  color: rgba(255, 240, 242, 0.98) !important;
  background: linear-gradient(180deg, rgba(108, 36, 47, 0.98), rgba(61, 24, 32, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 var(--w12),
    0 0 0 1px rgba(244, 83, 99, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

.qobrix-pending-button[data-qobrix-pending-action="cancelar"]:hover,
.qobrix-pending-button[data-qobrix-pending-action="cancelar"]:focus-visible,
.assistant-primary-answer .qobrix-pending-button[data-qobrix-pending-action="cancelar"]:hover,
.assistant-primary-answer .qobrix-pending-button[data-qobrix-pending-action="cancelar"]:focus-visible {
  border-color: rgba(255, 126, 139, 0.9) !important;
  background: linear-gradient(180deg, rgba(128, 43, 55, 0.99), rgba(72, 27, 37, 1)) !important;
  box-shadow:
    inset 0 1px 0 var(--w14),
    0 0 0 3px rgba(244, 83, 99, 0.13),
    0 2px 8px rgba(0, 0, 0, 0.24) !important;
}

.qobrix-pending-actions .qobrix-pending-button.confirm,
.qobrix-pending-actions button[data-qobrix-pending-action="confirmo"],
.assistant-primary-answer button[data-qobrix-pending-action="confirmo"] {
  border-color: rgba(59, 190, 255, 0.72) !important;
  color: rgba(236, 249, 255, 0.98) !important;
  background: linear-gradient(180deg, rgba(22, 92, 124, 0.96), rgba(12, 54, 79, 0.98)) !important;
}

.qobrix-pending-actions .qobrix-pending-button.cancel,
.qobrix-pending-actions button[data-qobrix-pending-action="cancelar"],
.assistant-primary-answer button[data-qobrix-pending-action="cancelar"] {
  border-color: rgba(244, 83, 99, 0.82) !important;
  color: rgba(255, 240, 242, 0.98) !important;
  background: linear-gradient(180deg, rgba(108, 36, 47, 0.98), rgba(61, 24, 32, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 var(--w12),
    0 0 0 1px rgba(244, 83, 99, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

/* Agenda v31: final single-row controls. Must stay at EOF to beat old agenda CSS blocks. */
#agenda-dialog .agenda-toolbar,
#agenda-dialog .agenda-toolbar *,
#agenda-dialog #agenda-summary,
#agenda-dialog #agenda-refresh {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#agenda-dialog .agenda-tabs-shell {
  display: block !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: var(--radius-lg) !important;
  overflow: visible !important;
}

#agenda-dialog .agenda-tabs-shell > .drawer-eyebrow {
  display: none !important;
}

#agenda-dialog #agenda-workblocks {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

#agenda-dialog #agenda-workblocks .agenda-workblock {
  flex: 0 0 auto !important;
  min-width: 118px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-md) !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control {
  order: 90 !important;
  position: relative !important;
  z-index: 30 !important;
  flex: 0 1 390px !important;
  width: auto !important;
  min-width: 320px !important;
  max-width: 420px !important;
  min-height: 34px !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* (.is-open y el popover de workblocks HEREDAN la escala general 20/80/120 del date-control
   — la numeración paralela 300/400 era una guerra de parches; consolidada en la tanda U, nº77) */

#agenda-dialog #agenda-workblocks .agenda-date-control-title {
  display: none !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control-row {
  display: grid !important;
  grid-template-columns: 34px minmax(160px, 1fr) 34px auto !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 34px !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-arrow,
#agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-clear,
#agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  background: rgba(15, 23, 42, 0.58) !important;
  color: var(--w96) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-arrow {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-label {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 14px !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-label strong {
  overflow: hidden !important;
  max-width: 100% !important;
  font-size: var(--fs-xs) !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-clear {
  min-width: 56px !important;
  padding: 0 10px !important;
  font-size: var(--fs-2xs) !important;
}

#agenda-dialog #agenda-workblocks .agenda-calendar-popover {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

#agenda-dialog .agenda-inline-refresh,
#agenda-dialog .agenda-inline-calendario {
  order: 100 !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  min-width: 118px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-md) !important;
}

#agenda-dialog .agenda-inline-calendario { order: 101 !important; text-decoration: none !important; }

#agenda-dialog .agenda-inline-refresh span,
#agenda-dialog .agenda-inline-calendario span {
  justify-content: center !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  #agenda-dialog #agenda-workblocks .agenda-date-control {
    flex-basis: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #agenda-dialog #agenda-workblocks .agenda-calendar-popover {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  #agenda-dialog .agenda-inline-refresh,
  #agenda-dialog .agenda-inline-calendario {
    margin-left: 0 !important;
  }

  /* Las pestañas de la agenda (y «Actualizar» y «Conectar mi calendario», que van entre ellas), de
     dedo en el móvil: 44 px (19-sep). Con 2 ids, como la regla que las ponía a 34. */
  #agenda-dialog #agenda-workblocks .agenda-workblock {
    min-height: 44px !important;
  }
}

#agenda-dialog .agenda-search {
  display: grid !important;
  gap: 6px !important;
  min-width: 220px !important;
  flex: 1 1 260px !important;
}

#agenda-dialog .agenda-search span {
  color: rgba(203, 213, 225, 0.72) !important;
  font-size: var(--fs-3xs) !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

#agenda-dialog .agenda-search input {
  width: 100% !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(9, 15, 24, 0.42) !important;
  color: rgba(248, 250, 252, 0.96) !important;
  font: inherit !important;
  font-size: var(--fs-sm) !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 var(--w035) !important;
}

#agenda-dialog .agenda-search input::placeholder {
  color: rgba(203, 213, 225, 0.46) !important;
}

#agenda-dialog .agenda-search input:focus {
  border-color: rgba(56, 189, 248, 0.54) !important;
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.1),
    inset 0 1px 0 var(--w055) !important;
}

@media (max-width: 760px) {
  #agenda-dialog .agenda-search {
    min-width: 100% !important;
    flex-basis: 100% !important;
  }

  #agenda-dialog .agenda-search span {
    display: none !important;
  }

  #agenda-dialog .agenda-search input {
    min-height: 34px !important;
    font-size: var(--fs-sm) !important;
  }
}

/* Agenda search v2 visibility override: compact agenda rules hide .agenda-tabs-shell descendants. */
#agenda-dialog .agenda-tabs-shell .agenda-search {
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 8px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#agenda-dialog .agenda-tabs-shell .agenda-search span {
  display: block !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
}

#agenda-dialog .agenda-tabs-shell .agenda-search input {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 36px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Mobile modal reliability: mode dialogs must appear above the mobile sidebar/PWA overlays. */
#mode-explorer-backdrop:not([hidden]),
#home-mode-backdrop:not([hidden]) {
  z-index: 10020 !important;
}

#mode-explorer-dialog,
#home-mode-dialog {
  z-index: 10021 !important;
}

/* Agenda action dialogs: selectable context + manual fallback. */
.agenda-action-dialog {
  width: min(520px, calc(100vw - 28px)) !important;
  gap: 14px !important;
}

.agenda-action-field {
  display: grid;
  gap: 7px;
  color: rgba(226, 232, 240, 0.9);
  font-size: var(--fs-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agenda-action-field span {
  color: rgba(203, 213, 225, 0.7);
}

.agenda-action-dialog .operator-dialog-input,
.agenda-action-dialog select.operator-dialog-input,
.agenda-action-dialog textarea.operator-dialog-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-lg);
  background: var(--panel-3); /* era un azul-negro fijo: input oscuro en claro */
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1.35;
  outline: none;
  box-shadow: inset 0 1px 0 var(--w05);
}

.agenda-action-dialog select.operator-dialog-input {
  padding: 9px 12px;
}

.agenda-action-dialog textarea.operator-dialog-input {
  min-height: 86px;
  resize: vertical;
  padding: 10px 12px;
  text-transform: none;
  letter-spacing: 0;
}

.agenda-action-dialog input.operator-dialog-input {
  padding: 9px 12px;
}

.agenda-action-dialog .operator-dialog-input:focus {
  border-color: rgba(56, 189, 248, 0.64);
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.12),
    inset 0 1px 0 var(--w05);
}

.agenda-date-time-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
}

.agenda-date-time-dialog input[type="date"],
.agenda-date-time-dialog input[type="time"] {
  color-scheme: dark;
}

@media (max-width: 560px) {
  .agenda-date-time-fields {
    grid-template-columns: 1fr;
  }

  .agenda-action-dialog {
    width: calc(100vw - 20px) !important;
  }
}

@media (max-width: 760px) {
  #mode-explorer-dialog[aria-hidden="false"],
  #home-mode-dialog[aria-hidden="false"] {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile header mode menu fix: keep mode list visible and prevent clipped carets. */
.chat-header-brand-caret,
.home-action-caret {
  flex: 0 0 auto !important;
  width: 14px !important;
  height: 14px !important;
  margin-right: 2px !important;
  transform: rotate(45deg) translateY(-1px) !important;
  transform-origin: center !important;
  overflow: visible !important;
}

.chat-header-brand[aria-expanded="true"] .chat-header-brand-caret {
  transform: rotate(225deg) translate(-1px, -1px) !important;
}

.chat-header-menu {
  z-index: 10030 !important;
}

@media (max-width: 760px) {
  .chat-header {
    position: relative !important;
    z-index: 10010 !important;
    overflow: visible !important;
  }


  .chat-header-brand-wrap {
    position: static !important;
    overflow: visible !important;
  }

  .chat-header-brand {
    max-width: calc(100vw - 136px) !important;
    overflow: visible !important;
  }

  .chat-header-brand-copy {
    min-width: 0 !important;
  }

  .chat-header-menu {
    position: fixed !important;
    top: calc(58px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
    padding: 12px !important;
    border-radius: var(--radius-xl) !important;
  }

  .chat-header-mode-list {
    display: grid !important;
    gap: 8px !important;
  }

  .chat-header-mode-option {
    min-height: 44px !important;
    padding: 11px 12px !important;
    border-radius: var(--radius-lg) !important;
  }
}

@media (max-width: 760px) {
  .mode-explorer-dialog[aria-hidden="false"],
  .mode-picker-dialog[aria-hidden="false"] {
    top: calc(12px + env(safe-area-inset-top)) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: none !important;
    transform: none !important;
    overflow: auto !important;
  }

  .mode-explorer-shell {
    display: flex !important;
    flex-direction: column !important;
  }

  .mode-explorer-sidebar {
    order: 1 !important;
  }

  .mode-explorer-detail {
    order: 2 !important;
  }

  .mode-explorer-mode-list,
  .mode-picker-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* Sidebar collapsed hardening: keep the closed rail clean and prevent history rows from leaking/clipping. */
@media (min-width: 761px) {
body.sidebar-collapsed .app-shell {
  grid-template-columns: 76px minmax(0, 1fr) !important;
}

body.sidebar-collapsed .sidebar {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding: 16px 10px 0 !important;
  align-items: center !important;
  overflow: hidden !important;
}

body.sidebar-collapsed .sidebar-topbar {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 10px !important;
  padding: 0 0 18px !important;
}

body.sidebar-collapsed .sidebar-brand-lockup,
body.sidebar-collapsed .brand-lockup {
  justify-content: center !important;
  width: 100% !important;
}

body.sidebar-collapsed .sidebar-header {
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
  gap: 12px !important;
}

body.sidebar-collapsed .sidebar-action,
body.sidebar-collapsed .sidebar-icon-button,
body.sidebar-collapsed #sidebar-toggle,
body.sidebar-collapsed #reset-session,
body.sidebar-collapsed #search-chats-toggle {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  justify-content: center !important;
  justify-items: center !important;
  margin-inline: auto !important;
  overflow: hidden !important;
}

body.sidebar-collapsed .sidebar-history,
body.sidebar-collapsed .sidebar-section-head,
body.sidebar-collapsed .history-group-label,
body.sidebar-collapsed .history-item-row,
body.sidebar-collapsed .history-empty {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.sidebar-collapsed .sidebar-footer {
  width: 100% !important;
  margin-inline: 0 !important;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom)) !important;
  display: grid !important;
  justify-items: center !important;
}

body.sidebar-collapsed .sidebar-footer-card,
body.sidebar-collapsed .sidebar-footer-agent {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
}

body.sidebar-collapsed .sidebar-footer-avatar {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
}
}

/* Mobile layer cleanup: header must not sit above active drawers/dialogs. */
@media (max-width: 1100px) {
  body.sidebar-mobile-open .mobile-sidebar-backdrop {
    z-index: 10040 !important;
  }

  body.sidebar-mobile-open .sidebar,
  html.sidebar-mobile-open .sidebar {
    z-index: 10050 !important;
  }

  html.sidebar-mobile-open body::before {
    z-index: 10049 !important;
  }
}

@media (max-width: 760px) {
  #agenda-backdrop:not([hidden]),
  #notification-center-backdrop:not([hidden]),
  #chat-info-backdrop:not([hidden]),
  #account-backdrop:not([hidden]),
  #recovery-backdrop:not([hidden]),
  #mode-explorer-backdrop:not([hidden]),
  #home-mode-backdrop:not([hidden]),
  /* Los 4 que faltaban en esta banda (tanda T, nº75): la FIRMA legal (9999), el
     modal OBLIGATORIO de registrar ofrecimiento (10000), los diálogos de acción
     del operador (10000) y el preview docx base (10000) quedaban BAJO el header
     móvil (10010!): visible y clicable sobre ellos. Llevan el diálogo como hijo
     dentro del backdrop, así que subir el backdrop sube el conjunto. */
  .operator-dialog-backdrop,
  .tn-offer-ask-backdrop,
  .tria-signature-backdrop,
  .docx-preview-backdrop:not(.doc-viewer) {
    z-index: 10070 !important;
  }

  #agenda-dialog[aria-hidden="false"],
  #notification-center-panel[aria-hidden="false"],
  #chat-info-dialog[aria-hidden="false"],
  #account-dialog[aria-hidden="false"],
  #recovery-dialog[aria-hidden="false"],
  #mode-explorer-dialog[aria-hidden="false"],
  #home-mode-dialog[aria-hidden="false"] {
    z-index: 10080 !important;
  }

  body.drawer-open #drawer-backdrop:not([hidden]) {
    z-index: 10070 !important;
  }

  body.drawer-open #side-drawer {
    z-index: 10080 !important;
  }
}

/* Agenda mobile task flow: keep search, counters and task headers from overlapping. */
@media (max-width: 760px) {
  #agenda-dialog .agenda-tabs-shell {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    /* Era 74px: un colchón fijo de la época en que algo se solapaba debajo. Hoy solo
       dejaba dos dedos de vacío entre el buscador y la lista (fundador 16-ago: quitarlo). */
    padding-bottom: 10px !important;
    overflow: visible !important;
  }

  #agenda-dialog .agenda-tabs-shell .agenda-search {
    display: grid !important;
    gap: 0 !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #agenda-dialog .agenda-tabs-shell .agenda-search span {
    display: none !important;
  }

  #agenda-dialog .agenda-tabs-shell .agenda-search input {
    min-height: 36px !important;
  }

  #agenda-dialog .agenda-page-info {
    margin-top: 2px !important;
  }

  #agenda-dialog .agenda-section-head {
    margin-top: 2px !important;
  }
}

/* ─── Agenda: acciones de contacto rápido ─── */
.agenda-link-call { color: var(--brand-strong); font-weight: 600; }
.agenda-link-wa { color: var(--whatsapp); font-weight: 600; }

/* ─── Módulo Empresa → Cuentas ─────────────────────────────────────── */
/* Migrado desde proyecto-wp/trasnego-operador-php/admin.css (Codex 4-jun). */

.admin-finance-summary { margin-bottom: 18px; }
.admin-metrics-grid-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

.admin-finance-layout {
  display: grid;
  grid-template-columns: 1fr; /* una columna: filtros arriba en barra, tabla a todo el ancho */
  gap: 16px;
  align-items: start;
}
.admin-finance-filters {
  position: static;
  max-height: none;
  overflow: visible;
}
/* Filtros como barra horizontal (antes columna lateral) */
.admin-finance-filters .field-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.admin-finance-filters .field-stack > .field {
  flex: 1 1 160px;
  min-width: 140px;
  margin: 0;
}
.admin-finance-filters .field-stack > .field:first-child {
  flex: 2 1 260px; /* el buscador, más ancho */
}
.admin-finance-filters .admin-finance-category-tools {
  flex: 1 1 240px;
  align-self: end;
}
.admin-finance-filters #finance-clear-filters {
  flex: 0 0 auto;
  align-self: end;
  margin-left: auto;
}

/* Empresa→Cuentas — clases CSP-safe (la CSP del servidor bloquea estilos inline) */
.finance-inbox {
  margin: 0 0 18px;
  border: 1px solid var(--w12);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--w035);
}
.finance-inbox > details > summary { cursor: pointer; font-weight: 600; list-style: none; }
.finance-inbox-body { margin-top: 12px; }
.finance-inbox-help { margin: 0.2rem 0 0.8rem; color: var(--w6); font-size: var(--fs-md); }
.finance-inbox-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.finance-inbox-summary { color: var(--w6); font-size: var(--fs-md); }
.finance-inbox-wrap { margin-top: 12px; }
.finance-inbox-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.finance-inbox-hint { color: var(--w6); font-size: var(--fs-sm); }
.finance-inbox-allcol { width: 34px; }
.finance-inbox-row-dup { background: rgba(212, 92, 67, 0.1); }
.finance-inbox-duptag { color: var(--warning); }
.finance-inbox-cat { width: 140px; }

.finance-view-tabs { display: flex; gap: 6px; margin: 0 0 14px; }
.finance-view-tab { font-weight: 500; }
/* La vista abierta, marcada como lo está una pestaña activa en el resto del panel. Desde el
   paso 4 estos tres son `.btn.ghost` (antes `ghost-button`, la clase vieja del chat, que no
   tenía variante de tema claro y se habría quedado ilegible al aclarar la pantalla). */
.finance-view-tab.is-active {
  background: var(--accion, var(--brand)); border-color: transparent;
  color: var(--brand-contrast, #fff); font-weight: 700;
}
.finance-view-tab.is-active:hover { background: var(--accion-hover, var(--brand-strong)); }

.finance-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 20px; }
.finance-breakdown h3 { margin: 0 0 6px; }
.finance-breakdown-row { margin: 7px 0; }
.finance-breakdown-head { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-md); }
.finance-breakdown-head strong { font-variant-numeric: tabular-nums; }
.finance-breakdown-bar { height: 7px; background: var(--w07); border-radius: 99px; overflow: hidden; margin-top: 3px; }
.finance-breakdown-fill { height: 100%; width: 0; }
.finance-breakdown-fill.income { background: var(--success); }
.finance-breakdown-fill.expense { background: var(--danger); }

.finance-cat-details { margin: 0 0 10px; border: 1px solid var(--w1); border-radius: var(--radius-lg); overflow: hidden; }
.finance-cat-details > summary { cursor: pointer; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--w035); font-weight: 700; list-style: none; }
.finance-cat-details > .finance-cat-rows { padding: 2px 8px 8px; }
.finance-cat-net { font-variant-numeric: tabular-nums; }
.finance-amount-income { color: var(--success); }
.finance-amount-expense { color: var(--danger); }
.finance-cat-rows table { width: 100%; }
.finance-cell-nowrap { white-space: nowrap; }
.finance-col-num { width: 40px; text-align: right; white-space: nowrap; color: var(--w45); font-variant-numeric: tabular-nums; }
.finance-col-tax { text-align: center; white-space: nowrap; }
.finance-col-check { text-align: center; white-space: nowrap; }
.finance-col-nombre { white-space: nowrap; max-width: 190px; }
.finance-tax-check { width: 17px; height: 17px; cursor: pointer; accent-color: var(--success); }
.finance-dl-check { width: 17px; height: 17px; cursor: pointer; accent-color: var(--link); }
.finance-toggle-all { width: 15px; height: 15px; cursor: pointer; margin-top: 3px; accent-color: var(--muted); }
.finance-cp-input,
.finance-note-input { width: 100%; min-width: 110px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 4px 6px; color: inherit; font: inherit; }
.finance-cp-input:hover,
.finance-note-input:hover { border-color: var(--w15); }
.finance-cp-input:focus,
.finance-note-input:focus { border-color: var(--w35); background: var(--w05); outline: none; }
/* La NOTA vive DEBAJO del concepto, dentro de su misma celda, no en una columna aparte.
   Con una columna propia la tabla se salía 100 px en pantallas de 1600 px y los botones
   Editar/Archivar quedaban fuera; además, fijar esa columna a la derecha habría obligado a
   repetir a mano el color de fondo de la página. Aquí no ensancha nada y la nota queda
   pegada a lo que explica. Una línea en reposo que se DESVANECE (para que se vea que sigue
   en vez de cortarse a media palabra) y se abre entera al escribir en ella. */
.finance-note-input {
  resize: none; line-height: 1.3; font-size: .82em; margin-top: 3px;
  height: 22px; overflow: hidden; transition: height .12s ease, opacity .12s ease; opacity: .75;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* Una nota escrita se marca con una barrita: se ve de un vistazo qué apuntes van explicados. */
.finance-note-input:not(:placeholder-shown) { border-left: 2px solid var(--w35); opacity: 1; }
.finance-note-input:focus {
  height: 96px; overflow: auto; opacity: 1;
  -webkit-mask-image: none; mask-image: none;
}
/* La nota plegada y el número de documento en línea: en admin.css, con `.v2-body`. */
.finance-note-input:placeholder-shown { opacity: .22; }
/* "Ocultar concepto" esconde el CONCEPTO, no la nota: si no, se perdería sin avisar. */
.admin-finance-table.finance-hide-concepto .finance-col-concepto > strong,
.admin-finance-table.finance-hide-concepto .finance-col-concepto > small { display: none; }
.finance-toggle-concepto { margin-left: auto; }
/* Pestañas Movimientos|Por categoría entre los filtros y la tabla */
.admin-finance-main > .finance-view-tabs { margin: 0 0 12px; }
.admin-finance-main { min-width: 0; display: grid; gap: 16px; }
.admin-finance-form {
  padding: 16px;
  border: 1px solid var(--w12);
  border-radius: var(--radius-xl);
  background: var(--w035);
}
.admin-finance-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.admin-finance-field-wide { grid-column: span 2; }
.admin-finance-table-wrap {
  overflow: auto;
  border: 1px solid var(--w12);
  border-radius: var(--radius-xl);
}
/* El ancho de la tabla lo fija UNA sola regla, más abajo («Empresa Cuentas v2»).
   Aquí había otra de 980px que la cascada pisaba: dos números para lo mismo. */
.admin-finance-table td strong {
  display: block;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-finance-table td small {
  display: block;
  margin-top: 4px;
  color: var(--w55);
}
.admin-table-number {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.finance-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--w12);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}
.finance-pill-income {
  color: var(--success);
  background: rgba(57, 174, 92, 0.16);
  border-color: rgba(57, 174, 92, 0.32);
}
.finance-pill-expense {
  color: var(--danger);
  background: rgba(212, 92, 67, 0.16);
  border-color: rgba(212, 92, 67, 0.32);
}
.finance-pill-status {
  color: var(--text);
  background: var(--w07);
}
.admin-finance-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}
.admin-finance-actions .ghost-button { min-height: 34px; padding: 6px 10px; }
.admin-finance-actions .danger { color: var(--danger); }

/* ─── Tesorería (resumen mensual del banco) ─── */
.finance-tes { display: grid; gap: 18px; }
.finance-tes-empty { color: var(--w6); padding: 24px 4px; margin: 0; }
/* Facturas vencidas sin cobrar (2-oct-2026): bajo las tarjetas de Cuentas, solo si hay alguna. Tabla canónica
   .data-table; aquí solo el aire, el título en rojo de aviso y las cifras alineadas a la derecha. */
.finance-vencidas { margin: 12px 0 18px; }
.finance-vencidas-titulo { margin: 0 0 4px; font-size: var(--fs-lg); color: var(--danger); }
.finance-vencidas-ayuda { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-sm); }
.finance-vencidas-tabla { overflow-x: auto; }
.finance-vencidas .data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* En el móvil la Fecha sobra (la Antigüedad dice lo mismo) y empujaba la Antigüedad fuera de la vista. */
@media (max-width: 600px) {
  .finance-vencidas .data-table th:first-child,
  .finance-vencidas .data-table td:first-child { display: none; }
}
.finance-tes-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.finance-tes-kpi-value { display: block; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.finance-tes-kpi-sub { display: block; margin-top: 4px; color: var(--w55); font-size: var(--fs-sm); }
.finance-tes-chart-card {
  border: 1px solid var(--w12);
  border-radius: var(--radius-xl);
  background: var(--w035);
  padding: 16px 16px 12px;
}
.finance-tes-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.finance-tes-chart-head h3 { margin: 0; font-size: var(--fs-lg); }
.finance-tes-chart-head small { color: var(--w55); }
.finance-tes-chart-wrap { height: 190px; width: 100%; }
.finance-tes-chart { width: 100%; height: 100%; display: block; }
.finance-tes-area { fill: rgba(var(--brand-rgb, 59, 130, 246), 0.14); stroke: none; }
.finance-tes-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.finance-tes-zero { stroke: var(--w15); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.finance-tes-xlabels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--w45); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.finance-tes-alert {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 92, 67, 0.32);
  background: rgba(212, 92, 67, 0.12);
  color: var(--danger);
  font-size: var(--fs-md);
}
.finance-tes-table { min-width: 720px; }
.finance-tes-table th { white-space: nowrap; }
.finance-tes-updated { color: var(--w45); font-size: var(--fs-xs); margin: 2px 2px 0; }

@media (max-width: 980px) {
  .admin-finance-layout { grid-template-columns: 1fr; }
  .admin-finance-filters { position: static; max-height: none; }
  .admin-finance-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-metrics-grid-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .admin-finance-form-grid { grid-template-columns: 1fr; }
  .admin-finance-field-wide { grid-column: auto; }
  .admin-metrics-grid-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Empresa Cuentas v2: categorias proyectos tags */
.admin-finance-category-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.admin-finance-category-tools input {
  min-width: 0;
}
/* La tabla de Movimientos entra en el hueco, no se sale (paso 4, 20-sep-2026).
   Medido en producción antes de tocarla: 1.206 px de tabla en un hueco de 1.088 — la columna
   «Acciones» y sus botones quedaban cortados por la derecha. El mínimo baja a lo que de verdad
   necesita, y el wrap puede encoger (`min-width: 0`), que es lo que faltaba: la regla que se lo
   da a los hijos de `.admin-pane` (admin.css:7456) solo alcanza a los hijos DIRECTOS, y este
   wrap cuelga tres niveles más abajo. */
.admin-finance-table {
  min-width: 940px;
}
.admin-finance-main,
#finance-table-wrap {
  min-width: 0;
}

/* Resultado en verde o en rojo según el signo (dibujo del paso 4): modificador de `.metric-card`,
   que es el componente que ya usan el Inicio y las demás pantallas — no una tarjeta nueva. */
.metric-card.pos strong { color: var(--success); }
.metric-card.neg strong { color: var(--danger); }

/* (lo de la fila de Cuentas vive en admin.css: el panel lo viste `.v2-body`, que gana aquí) */
.admin-finance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 220px;
}
.admin-finance-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: rgba(226, 232, 240, 0.92);
  font-size: var(--fs-2xs);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .admin-finance-category-tools {
    grid-template-columns: 1fr;
  }
}

/* ─── Modo Legal: formulario embebido de contrato ───────────────────── */
.legal-contract-form-wrapper {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--legal-border-strong);
  border-radius: var(--radius-xl);
  background: var(--legal-surface);
  box-shadow:
    inset 0 1px 0 var(--w04),
    0 4px 18px rgba(0, 0, 0, 0.18);
}
.legal-contract-form-wrapper.cancelled {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.legal-contract-form-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--legal-border);
}
.legal-contract-form-header strong {
  font-size: var(--fs-lg);
  font-weight: 720;
  color: var(--legal-title);
}
.legal-contract-form-header small {
  font-size: var(--fs-xs);
  color: var(--legal-sub);
  line-height: 1.4;
}
.legal-contract-form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
}
.legal-contract-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-contract-form-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--legal-label);
  letter-spacing: 0.01em;
}
.legal-contract-form-req {
  color: var(--danger); /* era #fca5a5 fijo: lavado en claro */
  margin-left: 3px;
  font-size: 0.85em;
}
.legal-contract-form-input {
  appearance: none;
  width: 100%;
  padding: 8px 11px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--legal-field-text);
  background: var(--legal-surface-2);
  border: 1px solid var(--legal-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
/* Desplegables (select): la flecha (morada, --legal-accent) la pinta la regla ÚNICA
   de flecha de select del final del archivo. Aquí solo el cursor. (tanda U) */
select.legal-contract-form-input {
  cursor: pointer;
}
.legal-contract-form-input:focus {
  border-color: var(--legal-accent);
  background: var(--legal-surface-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--legal-accent) 22%, transparent);
}
.legal-contract-form-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.legal-contract-form-row.required .legal-contract-form-input:placeholder-shown {
  border-color: var(--legal-border-strong);
}
/* Los nombres/campos NO se marcan en tiempo real (antes se ponían en ámbar nada más abrir, y ensuciaba). El
   único aviso visual es en ROJO y solo al pulsar "Preparar borrador" con obligatorios vacíos (.is-invalid). */
.legal-contract-form-row.is-invalid .legal-contract-form-input { border-color: var(--danger); }
.legal-contract-form-row.is-invalid .legal-contract-form-label { color: var(--danger-text); }
.legal-contract-form-row.is-invalid .legal-contract-form-input:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent);
}
.legal-contract-form-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--legal-border);
}
.legal-contract-form-cancel {
  appearance: none;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--w65);
  background: transparent;
  border: 1px solid var(--w16);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.legal-contract-form-cancel:hover:not(:disabled) {
  color: var(--danger);
  border-color: rgba(252, 165, 165, 0.45);
  background: rgba(252, 165, 165, 0.05);
}
/* El botón está SIEMPRE activo (morado): al pulsarlo se valida y se marca en rojo lo que falta. Cuando el
   formulario está completo pasa a verde (.ready). (fundador 31-jul) */
.legal-contract-form-submit {
  appearance: none;
  padding: 9px 18px;
  font-size: var(--fs-sm);
  font-weight: 760;
  color: #ffffff;
  background: var(--legal-accent);
  border: 1px solid var(--legal-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color 0.16s, background 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.legal-contract-form-submit:hover {
  background: color-mix(in srgb, var(--legal-accent) 86%, #000);
  border-color: color-mix(in srgb, var(--legal-accent) 86%, #000);
}
.legal-contract-form-submit.ready {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.96), rgba(22, 163, 74, 0.98));
  border-color: rgba(34, 197, 94, 0.7);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 var(--w18),
    0 0 0 1px rgba(34, 197, 94, 0.18),
    0 2px 10px rgba(22, 163, 74, 0.25);
}
.legal-contract-form-submit.ready:hover {
  background: linear-gradient(180deg, rgba(45, 209, 105, 0.98), rgba(26, 175, 80, 1));
  box-shadow:
    inset 0 1px 0 var(--w22),
    0 0 0 1px rgba(34, 197, 94, 0.28),
    0 4px 14px rgba(22, 163, 74, 0.35);
}
.legal-contract-form-submit.submitting {
  background: rgba(60, 60, 70, 0.6);
  color: var(--w7);
}
.legal-contract-form-submit-counter {
  font-weight: 600;
  font-size: 0.78em;
  opacity: 0.85;
}

@media (max-width: 620px) {
  .legal-contract-form-fields {
    grid-template-columns: 1fr;
  }
}

/* ─── Badge rojo de notificaciones del Abogado pendientes ──────────── */
.mobile-sidebar-toggle {
  position: relative;
}
.legal-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  border: 2px solid var(--panel); /* el anillo debe fundirse con la superficie del tema */
  color: #fff;
  font-size: var(--fs-3xs);
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 2;
  animation: legal-notif-pop 0.32s ease-out;
}
@keyframes legal-notif-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

/* Item del sidebar de conversación Legal: tinte violeta sutil + indicador */
.history-item-row.legal-history-item-row .history-item {
  border-left: 3px solid var(--legal-border-strong);
}
.history-item-row.legal-history-item-row.active .history-item,
.history-item-row.legal-history-item-row .history-item:hover {
  border-left-color: var(--legal-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--legal-accent) 12%, transparent), transparent);
}

/* ─── Modo Legal: botones de acción tras crear borrador ────────────── */
.legal-contract-actions {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--legal-border-strong);
  border-radius: var(--radius-lg);
  background: var(--legal-surface);
}
.legal-contract-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* .legal-contract-action-btn: migrado a .btn secondary (29-jun) */
.legal-contract-action-download {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok-text);
}
.legal-contract-action-download:hover {
  background: var(--ok-bg);
  border-color: var(--ok-text);
}
.legal-contract-action-wesign {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}
.legal-contract-action-wesign:hover:not(:disabled) {
  background: var(--warn-bg);
  border-color: var(--warn-text);
}
.legal-contract-action-icon {
  font-size: 0.9em;
  opacity: 0.85;
}
.legal-contract-actions-hint {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--legal-border);
  color: var(--legal-sub);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

/* ─── Modo Legal: autorelleno formulario contrato desde Qobrix ───── */
.legal-contract-form-lookup-status {
  display: block;
  margin-top: 6px;
  padding: 5px 8px;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--legal-accent) 8%, transparent);
  color: var(--legal-label);
  border: 1px solid var(--legal-border);
  line-height: 1.35;
}
.legal-contract-form-lookup-status.ok {
  background: var(--ok-bg);
  color: var(--ok-text);
  border-color: var(--ok-border);
}
.legal-contract-form-lookup-status.error {
  background: var(--danger-bg);
  color: var(--danger-text);
  border-color: var(--danger-border);
}
.legal-contract-signatures {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
}
.legal-contract-signatures-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
}
.legal-contract-signatures-refresh {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 1px 7px;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.legal-contract-signatures-loading {
  color: var(--muted);
}
.legal-contract-signature-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 3px 0;
  color: var(--text);
}
.legal-contract-signature-icon {
  flex: 0 0 auto;
  width: 1.1em;
  text-align: center;
}
.legal-contract-signature-row.signed .legal-contract-signature-icon { color: var(--ok-text); }
.legal-contract-signature-row.pending .legal-contract-signature-icon { color: var(--warning); }
.legal-contract-signature-row.declined .legal-contract-signature-icon { color: var(--danger); }
.legal-contract-signature-via {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: var(--fs-3xs);
  background: var(--panel-3);
  color: var(--muted);
  vertical-align: middle;
}
.legal-local-candidates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.legal-local-candidate {
  text-align: left;
  width: 100%;
}
.legal-contract-form-input.autofilled {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  animation: autofill-flash 0.5s ease-out;
}
@keyframes autofill-flash {
  0%   { background: var(--ok-border); }
  100% { background: var(--ok-bg); }
}
/* Casilla AUTORRELLENADA por el sistema (datos de Qobrix o leídos por IA de un documento): su NOMBRE va en
   AZUL para distinguir lo que rellenó TRIA de lo que teclea el asesor (fundador 31-jul). Al editar el campo a
   mano se le quita el azul (pasa a morado, ya es tuyo). */
.legal-contract-form-row.is-autofilled .legal-contract-form-label { color: var(--brand-ink); }
/* Aviso del autocompletado por ID del local (bajo el campo): chip con estado
   (leyendo documentos / éxito / aviso). Colores por tokens para light y dark. */
.legal-contract-form-autofill-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted, #64748b);
}
.legal-contract-form-autofill-note:empty { display: none; }

/* Estado: leyendo los documentos con IA (spinner + cronómetro). */
.legal-contract-form-autofill-note.is-loading {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--text);
}
.lcf-af-spinner {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--info-border);
  border-top-color: var(--info-text);
  animation: spin 0.7s linear infinite;
}
.lcf-af-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.lcf-af-title { font-weight: 600; color: var(--text); }
.lcf-af-hint { font-size: 11px; color: var(--muted); }
.lcf-af-timer {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  background: var(--info-border);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Estado: datos traídos con éxito. */
.legal-contract-form-autofill-note.is-ok {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok-text);
  font-weight: 500;
}
/* Estado: aviso o error. */
.legal-contract-form-autofill-note.is-warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
  font-weight: 500;
}

/* ─── Modo Legal: botón Firmar en TRIA + modal canvas ────────────────── */
.legal-contract-action-sign-tria {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}
.legal-contract-action-sign-tria:hover:not(:disabled) {
  background: var(--info-bg);
  border-color: var(--info-text);
}
.legal-contract-action-sign-tria.signed {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok-text);
}

.tria-signature-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tria-signature-modal {
  width: 100%;
  max-width: 660px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--legal-surface);
  border: 1px solid color-mix(in srgb, var(--legal-accent) 28%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
}
.tria-signature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--w08);
}
.tria-signature-header h3 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 720;
  color: var(--legal-title);
}
.tria-signature-close {
  background: transparent;
  border: 0;
  color: var(--w55);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.tria-signature-close:hover { background: var(--w08); color: var(--text); }
.tria-signature-body { padding: 18px 20px; display: grid; gap: 14px; }
.tria-signature-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tria-signature-field > span {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--legal-label);
  letter-spacing: 0.01em;
}
.tria-signature-field input,
.tria-signature-field select {
  padding: 9px 12px;
  font-size: var(--fs-md);
  color: var(--legal-field-text);
  background: var(--legal-surface-2);
  border: 1px solid color-mix(in srgb, var(--legal-accent) 22%, transparent);
  border-radius: var(--radius-md);
  outline: none;
}
.tria-signature-field input:focus,
.tria-signature-field select:focus {
  border-color: var(--legal-border-strong);
}
.tria-signature-canvas-wrap {
  position: relative;
  /* El lienzo se queda BLANCO en ambos temas: la firma se exporta como imagen sobre blanco. */
  border: 2px dashed color-mix(in srgb, var(--legal-accent) 45%, transparent);
  border-radius: var(--radius-md);
  background: #ffffff;
  height: 220px;
  overflow: hidden;
}
.tria-signature-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.tria-signature-canvas-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(80, 80, 100, 0.4);
  font-size: var(--fs-sm);
  font-weight: 600;
  pointer-events: none;
  letter-spacing: 0.5px;
}
.tria-signature-legal {
  font-size: var(--fs-xs);
  color: var(--legal-sub);
  line-height: 1.4;
  margin: 0;
}
.tria-signature-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--w08);
  flex-wrap: wrap;
}
.tria-signature-footer button {
  padding: 9px 16px;
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1px solid var(--w16);
  background: transparent;
  color: var(--w78);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tria-signature-footer button:hover:not(:disabled) {
  background: var(--w06);
  border-color: var(--w3);
  color: var(--text);
}
.tria-signature-accept {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.92), rgba(22, 163, 74, 0.96)) !important;
  border-color: rgba(34, 197, 94, 0.7) !important;
  color: #fff !important;
}
.tria-signature-accept:disabled {
  background: rgba(80, 80, 90, 0.42) !important;
  border-color: rgba(120, 120, 140, 0.28) !important;
  color: var(--w4) !important;
  cursor: not-allowed;
}

/* ─── Modo Legal: popup buscador cliente Qobrix ────────────────────── */
.tria-client-picker-modal { max-width: 580px; }
.tria-client-picker-search {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.tria-client-picker-input {
  flex: 1;
  padding: 9px 12px;
  font-size: var(--fs-md);
  color: var(--legal-field-text);
  background: var(--legal-surface-2);
  border: 1px solid color-mix(in srgb, var(--legal-accent) 22%, transparent);
  border-radius: var(--radius-md);
  outline: none;
}
/* .tria-client-picker-search-btn: migrado a .btn secondary (11-ago, OK fundador) */
.tria-client-picker-results {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tria-client-picker-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--legal-surface-2);
  border: 1px solid color-mix(in srgb, var(--legal-accent) 18%, transparent);
  border-radius: var(--radius-md);
  color: var(--legal-field-text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.tria-client-picker-row:hover {
  background: color-mix(in srgb, var(--legal-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--legal-accent) 55%, transparent);
}
.tria-client-picker-row-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.tria-client-picker-row-name strong { font-size: var(--fs-lg); }
.tria-client-picker-ref {
  font-size: var(--fs-2xs);
  background: color-mix(in srgb, var(--legal-accent) 22%, transparent);
  color: var(--legal-title);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.tria-client-picker-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--legal-label);
}
.tria-client-picker-status {
  background: var(--w08);
  padding: 1px 7px;
  border-radius: 999px;
}
.tria-client-picker-empty {
  padding: 16px;
  text-align: center;
  color: var(--legal-sub);
  font-size: var(--fs-sm);
}
.tria-client-picker-manual {
  background: var(--w06) !important;
}

/* ─── Modo Legal: popup acciones post-firma ────────────────────────── */
.tria-post-sign-action {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--legal-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--legal-accent) 22%, transparent);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--legal-field-text);
  font-size: var(--fs-sm);
}
.tria-post-sign-action:hover { background: color-mix(in srgb, var(--legal-accent) 12%, transparent); }
.tria-post-sign-action input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--legal-accent);
}
.tria-post-sign-action strong { color: var(--legal-field-text); }
.tria-post-sign-results {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--ok-bg);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--legal-label);
  display: none;
}
.tria-post-sign-results-ok { display: block; }
.tria-post-sign-results-ok > div { padding: 3px 0; }

/* ─── Modo Legal: link Qobrix en popup cliente ─────────────────────── */
.tria-client-picker-ref-link {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tria-client-picker-ref-link:hover {
  background: color-mix(in srgb, var(--legal-accent) 45%, transparent) !important;
  color: var(--legal-title) !important;
}
.tria-client-picker-row {
  /* Era <button>; al ser <div> aseguramos focus visible. */
  outline: none;
}
.tria-client-picker-row:focus-visible {
  border-color: var(--legal-border-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--legal-accent) 30%, transparent);
}

/* ─── Modo Legal: resumen post-firma con estados ────────────────────── */
.tria-post-sign-summary {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  line-height: 1.45;
  margin-bottom: 10px;
}
.tria-post-sign-summary strong { font-size: 1.04em; }
.tria-post-sign-summary.success {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
}
.tria-post-sign-summary.partial {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
}
.tria-post-sign-summary.error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
}
.tria-post-sign-line {
  padding: 5px 10px;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.tria-post-sign-line.ok {
  background: var(--ok-bg);
  color: var(--ok-text);
}
.tria-post-sign-line.fail {
  background: var(--danger-bg);
  color: var(--danger-text);
}
.tria-post-sign-line em { font-style: normal; opacity: 0.85; }
.tria-signature-accept.tria-post-sign-run-success {
  animation: post-sign-success-flash 0.6s ease-out;
}
@keyframes post-sign-success-flash {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ─── Modo Legal: tarjeta de contrato firmado en el chat ─────────────── */
.signed-contract-card {
  margin-top: 14px;
  padding: 16px 18px;
  border: 2px solid var(--ok-border);
  border-radius: var(--radius-xl);
  background: var(--ok-bg);
}
.signed-contract-card .pill.subtle {
  background: var(--ok-bg);
  color: var(--ok-text);
  border: 1px solid var(--ok-border);
}
.signed-contract-card-title {
  margin: 8px 0 4px;
  font-size: var(--fs-xl);
  color: var(--ok-text);
  font-weight: 720;
}
.signed-contract-card-sub {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  color: var(--ok-text);
  opacity: 0.82;
}
.signed-contract-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.signed-contract-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 18px;
  font-size: var(--fs-md);
  font-weight: 720;
  border-radius: var(--radius-sm);
  border: 1px solid var(--w12);
  background: var(--w04);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.08s;
}
.signed-contract-btn:hover:not(:disabled) {
  background: var(--w08);
  border-color: var(--w22);
}
.signed-contract-btn:active:not(:disabled) { transform: translateY(1px); }
.signed-contract-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--w03);
  border-color: var(--line);
  color: var(--muted);
}
.signed-contract-btn-icon { font-size: 1.6rem; line-height: 1; }
.signed-contract-btn small {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--legal-sub); /* era lila pastel fijo: invisible en claro */
  text-transform: none;
  letter-spacing: 0;
}
.signed-contract-btn-primary {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.45);
}
.signed-contract-btn-primary:hover {
  background: rgba(168, 85, 247, 0.28);
  border-color: rgba(196, 124, 255, 0.65);
}
.signed-contract-btn-whatsapp:not(:disabled) {
  background: rgba(37, 211, 102, 0.16);
  border-color: rgba(37, 211, 102, 0.5);
  color: #b8f4cf;
}
.signed-contract-btn-whatsapp:not(:disabled):hover {
  background: rgba(37, 211, 102, 0.28);
  border-color: rgba(80, 220, 130, 0.7);
}
.signed-contract-btn-whatsapp:not(:disabled) small {
  color: rgba(184, 244, 207, 0.75);
}

/* ─── Modo Legal: formulario tras submit (datos fijos) ──────────────── */
.legal-contract-form-wrapper.submitted {
  opacity: 0.85;
  pointer-events: none;
}
.legal-contract-form-wrapper.submitted .legal-contract-form-input {
  /* Era lila pastel sobre velo negro fijos: en claro el texto desaparecía. */
  background: var(--panel-3);
  border-color: var(--line);
  color: var(--legal-sub);
  cursor: not-allowed;
}
.legal-contract-form-wrapper.submitted .legal-contract-form-row.required .legal-contract-form-req {
  opacity: 0.4;
}
.legal-contract-form-wrapper.submitted .legal-contract-form-submit {
  pointer-events: auto;
  cursor: default;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.62), rgba(22, 163, 74, 0.7));
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--w85);
}

/* ─── Modo Legal: acompañantes extra del formulario ─────────────────── */
.legal-contract-form-add-acompanante-wrap {
  grid-column: 1 / -1;
  margin-top: 8px;
}
.legal-contract-form-add-acompanante {
  appearance: none;
  width: 100%;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--legal-label);
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--legal-accent) 40%, transparent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.legal-contract-form-add-acompanante:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: color-mix(in srgb, var(--legal-accent) 60%, transparent);
  color: var(--legal-title);
}
.legal-contract-form-extra-acompanante {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 12px;
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: var(--radius-md);
  display: grid;
  gap: 8px;
}
.legal-contract-form-extra-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.legal-contract-form-extra-header strong {
  color: var(--legal-title);
  font-size: var(--fs-md);
}
.legal-contract-form-extra-remove {
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: rgba(252, 165, 165, 0.85);
  background: transparent;
  border: 1px solid rgba(252, 165, 165, 0.32);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
.legal-contract-form-extra-remove:hover {
  background: rgba(252, 165, 165, 0.16);
  border-color: rgba(252, 165, 165, 0.65);
  color: #fff;
}
.legal-contract-form-wrapper.submitted .legal-contract-form-add-acompanante,
.legal-contract-form-wrapper.submitted .legal-contract-form-extra-remove {
  display: none;
}

/* ─── Modo Legal: modal de vista previa del .docx (Office Online Viewer) ── */
.docx-preview-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.docx-preview-modal {
  background: #fff;
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 920px;
  height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.docx-preview-head {
  background: #0f172a;
  color: #f3e8ff;
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--w08);
}
.docx-preview-head strong { font-size: var(--fs-lg); }
.docx-preview-head-actions { display: flex; gap: 10px; align-items: center; }
/* .docx-preview-download-btn MIGRADO al sistema (.btn.secondary); delta por si vuelve como <a>. */
.docx-preview-download-btn { text-decoration: none; white-space: nowrap; }
.docx-preview-close {
  background: rgba(252, 165, 165, 0.18);
  border: 1.5px solid rgba(252, 165, 165, 0.55);
  color: #fff;
  min-width: 90px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(252, 165, 165, 0.25);
}
.docx-preview-close:hover, .docx-preview-close:active {
  background: rgba(252, 165, 165, 0.32);
  border-color: rgba(252, 165, 165, 0.9);
}
.docx-preview-close::before {
  content: "✕";
  font-size: 1.2rem;
  font-weight: 900;
}
.docx-preview-head {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
@media (max-width: 620px) {
  .docx-preview-head {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .docx-preview-head strong {
    font-size: var(--fs-sm);
    flex: 1;
    min-width: 100%;
  }
  .docx-preview-head-actions {
    width: 100%;
    justify-content: space-between;
  }
  .docx-preview-close {
    min-width: 100px;
  }
}

/* Visor de documentos/PDF/imágenes en la app (punto 6, 5-ago; formato "vista previa" 7-ago:
   ventana casi completa, cabecera compacta, SIEMPRE por delante de la ficha/paneles). */
/* Antes 10080: EMPATE exacto con el cajón lateral (drawer 10080) desde el que se
   abre — quién pintaba encima lo decidía el orden del DOM. A 10100: propio, bajo
   contacts-match (10110). Regla de casa: ningún par de overlays fixed de pantalla
   completa comparte número. (tanda T, nº78) */
/* 27-oct-2026 (fallo de Javidan, 16:08): a 10100 el visor quedaba DEBAJO del Correo (10150), de la barra lateral
   y la hoja «Más» (10170/10180) y de la barra del móvil (10200): al pulsar un adjunto «se quedaba detrás» y su
   velo oscuro solo tapaba la barra de pestañas. Se abre desde capas que van por encima de 10100 (Correo, cierre
   de la Agenda 10210), así que va POR ENCIMA de todas ellas y por debajo solo de los avisos de confirmar (10220).
   Número propio, sin empate (test_visor_documentos_por_encima.mjs). */
.doc-viewer.docx-preview-backdrop { z-index: 10215; padding: 8px; }
.doc-viewer .docx-preview-modal { max-width: 96vw; width: 96vw; height: 96vh; }
.doc-viewer .docx-preview-head { padding: 6px 12px; }
.doc-viewer .docx-preview-head strong { font-size: var(--fs-sm); }
.doc-viewer .docx-preview-head-actions { gap: 6px; }
.doc-viewer .docx-preview-head-actions .btn {
  min-height: 30px; padding: 4px 10px; font-size: var(--fs-sm);
}
.doc-viewer .docx-preview-close { min-width: 64px; height: 30px; padding: 0 8px; font-size: var(--fs-sm); }
.doc-viewer .docx-preview-close::before { font-size: var(--fs-lg); }
/* Páginas como imagen (móvil): el documento entero con scroll vertical. */
.doc-viewer .doc-viewer-pages {
  width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px;
}
.doc-viewer .doc-viewer-page {
  width: 100%; max-width: 900px; height: auto; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); border-radius: 4px;
}
.doc-viewer .docx-preview-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: #1e2632;
  padding: 0;
}
.doc-viewer .docx-preview-status { color: #e2e8f0; text-align: center; padding: 24px; }
.doc-viewer-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.doc-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.doc-viewer-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.docx-preview-body {
  flex: 1; position: relative;
  background: #f5f5f5;
  display: flex; flex-direction: column;
}
.docx-preview-iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}
.docx-preview-fallback {
  background: #fef3c7;
  color: #92400e;
  margin: 0;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  text-align: center;
}
.docx-preview-fallback a {
  color: #7c3aed;
  text-decoration: underline;
}

/* ─── Aviso descarga app Microsoft Word (móvil) ─────────────────────── */
.legal-contract-action-wrap,
.signed-contract-btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.docx-app-hint {
  display: block;
  padding: 6px 10px;
  font-size: var(--fs-2xs);
  color: rgba(216, 180, 254, 0.85);
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: var(--radius-sm);
  line-height: 1.35;
  text-align: center;
}
.docx-app-hint a {
  color: #d8b4fe;
  font-weight: 700;
  text-decoration: underline;
}
.docx-app-hint a:hover {
  color: #fff;
}

/* ─── Botón fallback visor alternativo en modal vista previa ────────── */
/* .docx-preview-alt-viewer-btn ELIMINADO: CSS muerto, ningún sitio lo genera ya (verificado 5-ago). */
.docx-preview-alt-viewer-link {
  background: none;
  border: 0;
  color: #7c3aed;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* ─── Vista previa docx renderizada con Mammoth.js ──────────────────── */
.docx-preview-rendered {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  padding: 30px 50px;
}
.docx-preview-content {
  max-width: 720px;
  margin: 0 auto;
  font-family: "Times New Roman", Times, serif;
  font-size: 11pt;
  line-height: 1.5;
  color: #111;
}
.docx-preview-content p { margin: 0 0 12px; text-align: justify; }
.docx-preview-content h1 { font-size: 14pt; text-align: center; margin: 12px 0 24px; letter-spacing: 1px; }
.docx-preview-content h2, .docx-preview-content h3 { margin-top: 18px; }
.docx-preview-content ul, .docx-preview-content ol { margin: 0 0 14px; padding-left: 24px; }
.docx-preview-content li { margin-bottom: 8px; }
.docx-preview-content img { max-width: 100%; height: auto; display: block; margin: 14px auto; }
.docx-preview-content strong { font-weight: 700; }
@media (max-width: 620px) {
  .docx-preview-rendered { padding: 20px 16px; }
  .docx-preview-content { font-size: 10.5pt; }
}

/* ─── Vista previa docx renderizada server-side (iframe HTML) ───────── */
.docx-preview-iframe-html {
  flex: 1;
  width: 100%;
  border: 0;
  background: #f5f5f5;
}
.docx-preview-status {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  padding: 40px;
  text-align: center;
  color: #666;
  font-size: var(--fs-lg);
}

/* ─── Bloque "Introducir contacto manualmente" (universal, no requiere API) */
.tria-client-picker-manual-add {
  margin: 10px 0;
  border: 1px dashed color-mix(in srgb, var(--legal-accent) 35%, transparent);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--legal-accent) 5%, transparent);
}
.tria-client-picker-manual-add summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--legal-label);
  padding: 4px 0;
  list-style: none;
  touch-action: manipulation;
}
.tria-client-picker-manual-add summary::-webkit-details-marker { display: none; }
.tria-client-picker-manual-add[open] summary { margin-bottom: 8px; }
.tria-client-picker-manual-form {
  display: grid;
  gap: 8px;
}
.tria-client-picker-manual-form input,
.tria-client-picker-manual-form select {
  width: 100%;
  padding: 9px 12px;
  font-size: var(--fs-md);
  background: var(--legal-surface-2);
  border: 1px solid var(--w12);
  border-radius: var(--radius-sm);
  color: var(--legal-field-text);
}
.tria-client-picker-manual-form input:focus,
.tria-client-picker-manual-form select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--legal-accent) 60%, transparent);
}
/* «¿De dónde viene el cliente?» sin elegir: gris de ayuda, como el texto guía de las casillas (28-sep). */
.tria-client-picker-manual-form select:invalid { color: var(--legal-sub); }
.tria-client-picker-manual-form select option { color: var(--legal-field-text); }
.tria-client-picker-manual-help {
  font-size: var(--fs-xs);
  color: var(--legal-sub);
  padding: 2px 0;
}
/* .tria-client-picker-manual-add-btn: migrado a .btn primary (11-ago, OK fundador — fuera el morado degradado, fuera de paleta) */

/* «Mis contratos» ya no se pinta como tarjetas: es la pantalla Wesign (bloque «WESIGN», 3-oct-2026). */

/* ── Panel Director: observabilidad / alertas comerciales / coste API (Fase 2) ──
   Clases utilitarias para evitar estilos inline (la CSP del servidor es
   `style-src 'self'` sin unsafe-inline → los inline NO se aplican). */
.dobs-table { width: 100%; margin-top: 8px; }
.dobs-c { text-align: center; }
.dobs-block { margin-top: 12px; }
.dobs-block-sm { margin-top: 10px; }
.dobs-block-lg { margin-top: 14px; }
.dobs-p { margin: 0 0 4px; }
.dobs-p2 { margin: 6px 0 2px; }
.dobs-note { margin: 2px 0 4px; font-size: 0.85em; }
.dobs-note2 { margin: 2px 0 2px; }
.dobs-note-tight { margin: 0 0 6px; font-size: 0.85em; }
.dobs-fs { font-size: 0.85em; }
.dobs-list { margin: 4px 0 0; padding-left: 18px; }
.dobs-list-sm { margin: 6px 0 0; padding-left: 18px; }
.dobs-pill-warn { background: #fff4d6; }
.dobs-chip { margin: 2px 4px 2px 0; }
.dobs-sep { border-top: 1px solid var(--border, #e3e3e3); padding-top: 12px; }
.dobs-cols { display: flex; gap: 18px; flex-wrap: wrap; }
.dobs-col { flex: 1; min-width: 240px; }
.dobs-coltitle { font-size: 0.85em; margin-bottom: 2px; }
.dobs-foot { margin-top: 10px; font-size: 0.85em; }

/* ── Panel Abogado (admin.js) y firma TRIA (app.js): clases para evitar estilos
   inline que la CSP `style-src 'self'` bloquea. ── */
.abg-fullrow { grid-column: 1 / -1; }
.abg-field-mt { margin-top: 8px; }
.abg-row6 { display: flex; gap: 6px; }
.abg-flex1 { flex: 1; }
.abg-opp-btn { display: block; text-align: left; width: 100%; margin: 4px 0; padding: 6px 10px; }
.abg-field-inline { flex-direction: row; align-items: center; gap: 8px; }
.tsig-legal-sm { font-size: var(--fs-2xs); }
.tsig-hidden { display: none; }
.tsig-hint { margin-top: 14px; display: block; }

/* Tabla de leads interactiva en el chat (estado editable + WhatsApp + actualizar en lote) */
/* ===== Sistema de diseño Trasnego — tabla y botón estándar (F2/F3, chat) ===== */
/* Fuente: docs/diseno/sistema-diseno-trasnego.md. Clases base reutilizables; los */
/* componentes se migran a ellas progresivamente (tabla de leads → .data-table, etc.). */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); color: var(--text, var(--text)); }
.data-table th { background: var(--table-head-bg, var(--bg-soft, var(--bg-soft))); text-align: left; padding: 8px 10px; font-weight: 600; white-space: nowrap; }
.data-table td { padding: 8px 10px; border-top: 1px solid var(--line, var(--w1)); vertical-align: middle; }
.data-table tbody tr:nth-child(even) { background: var(--table-zebra, var(--w03)); }
.data-table tbody tr:hover { background: rgba(59,130,246,0.06); }
.data-table a { color: var(--brand-ink); text-decoration: none; }
.data-table a:hover { color: var(--link-hover); text-decoration: underline; }
.data-table .wa-link { color: var(--whatsapp); font-weight: 600; }
.data-table.editable select,
.data-table.editable input { padding: 5px 8px; border: 1px solid var(--line, var(--w15)); border-radius: var(--radius-sm); background: var(--bg, var(--bg)); color: var(--text, var(--text)); font: inherit; }
/* Flecha de despliegue VISIBLE también en móvil (el select nativo a veces no la muestra). */
/* (flecha del select editable: regla ÚNICA del final del archivo — tanda U) */
.data-table.clickable tbody tr { cursor: pointer; }

.btn { padding: 6px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: 0 1px 0 var(--w06) inset; transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.btn.primary { background: linear-gradient(180deg, var(--brand, var(--brand)), var(--brand-strong, var(--brand-strong))); color: var(--brand-contrast); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 24px -8px rgba(59,130,246,0.35); }
.btn.primary:hover { filter: brightness(1.08); }
/* El botón de WhatsApp: UNA clase para todos (`btn wa`), así que cambiar el verde aquí lo cambia en todas las pantallas. */
.btn.wa, .lint-btn-wa-grande { background: var(--wa-btn-bg); color: var(--wa-btn-text); border-color: transparent; font-weight: 600; box-shadow: none; }
.btn.wa:hover:not(:disabled), .lint-btn-wa-grande:hover:not(:disabled) { background: var(--wa-btn-bg-hover); filter: none; }
.btn.wa { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.wa svg, .lint-btn-wa-grande svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }
.btn.secondary { background: linear-gradient(180deg, var(--panel-3), var(--panel-2)); color: var(--text, var(--text)); }
.btn.danger { background: linear-gradient(180deg, #fb6f6f, #e84d4d); color: #fff; border-color: transparent; box-shadow: 0 10px 24px -10px rgba(248,113,113,0.5); }
.btn.ghost { background: transparent; color: var(--text, var(--text)); border: 1px solid var(--line, var(--w16)); }
.btn.ghost:hover { background: var(--w06); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: default; }
/* Tamaño pequeño, para botones que van DENTRO de una fila de tabla (paso 4, 20-sep-2026).
   El dibujo aprobado pedía sustituir «Editar» y «Archivar» por texto plano para que la tabla
   entrase; eso sacaría dos acciones del catálogo de botones y, en el móvil, las dejaría por
   debajo del mínimo que se toca con el dedo. Un modificador de TAMAÑO respeta las dos cosas:
   la fila adelgaza y el botón sigue siendo un botón. En el móvil no encoge. */
.btn.small { padding: 3px 10px; font-size: var(--fs-xs); font-weight: 600; }
/* En pantalla pequeña vuelve al tamaño de dedo. La consulta va SOLO por ancho a propósito:
   `hover: none` da verdadero en un navegador sin ratón (el de las pruebas, y cualquiera en un
   portátil con pantalla táctil), y con él puesto el botón se quedaba en 44 px de alto también en
   el ordenador — medido en producción: la fila no bajaba de 66 px por culpa de esto. */
@media (max-width: 900px) {
  .btn.small { padding: 10px 14px; }
}
/* La lista canónica del Director (director.php, tn_design_button_modifier_families)
   admite "danger-button", pero la clase NO existía en ningún CSS: un botón emitido
   con ella salía como botón nativo del navegador, sin estilo. Alias del look
   .btn.danger, con estados. (tanda S, nº21) */
.danger-button {
  padding: 6px 16px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; cursor: pointer;
  background: linear-gradient(180deg, #fb6f6f, #e84d4d); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(248, 113, 113, 0.5);
}
.danger-button:hover:not(:disabled) { filter: brightness(1.05); }
.danger-button:disabled { opacity: 0.6; cursor: default; }
/* OFRECIDO y confirmado por el asesor → verde. Va DESPUÉS de .btn.primary y .btn:disabled a
   propósito: con la misma especificidad gana la última regla, y este estado debe pisar el azul de
   primary y el apagado de :disabled (si no, el botón quedaba azul y medio borrado, sin distinguirse
   de uno deshabilitado — fundador 15-jul). Tokens --ok-*: se adaptan al tema claro y oscuro. */
.btn.lead-offer-btn.is-done,
.btn.lead-offer-btn.is-done:disabled,
.btn.lead-offer-btn.is-done:hover,
:root[data-theme="light"] .btn.lead-offer-btn.is-done {
  background: var(--ok-bg, rgba(34, 197, 94, 0.14));
  color: var(--ok-text, #86efac);
  border-color: var(--ok-border, rgba(34, 197, 94, 0.42));
  opacity: 1;
  cursor: default;
  box-shadow: none;
  transform: none;
  filter: none;
}

.lead-table-editable { margin-top: 12px; min-width: 0; max-width: 100%; }
/* Los items flex/grid del chat (.assistant-message/.message-body/.assistant-primary-answer)
   crecen con el contenido ancho (la tabla) en vez de limitarlo → el contenedor nunca
   desborda y no hay scroll. min-width:0 rompe esa cadena: el contenedor respeta el ancho
   disponible y .lead-table-scroll muestra el scroll horizontal. */
.assistant-message, .message-body, .assistant-primary-answer { min-width: 0; }
.lead-table-editable .lead-table-scroll { overflow: auto; max-height: 65vh; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }
/* width:max-content (no 100%) → la tabla crece con las columnas (nowrap) y el contenedor
   scrollea en horizontal para ver Creación/Modif. etc. min-width:100% para que no quede angosta. */
.lead-table-editable table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: var(--fs-sm); color: var(--text, var(--text)); }
.lead-table-editable th,
.lead-table-editable td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: middle; white-space: nowrap; }
.lead-table-editable thead th { background: var(--bg-soft, var(--bg-soft)); color: var(--text, var(--text)); font-weight: 600; position: sticky; top: 0; }
.lead-table-editable th.lead-th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.lead-table-editable th.lead-th-sortable:hover { background: var(--panel-3); }
.lead-table-editable .lead-sort-arrows { margin-left: 5px; opacity: 0.45; font-size: 0.85em; }
.lead-table-editable th.is-sorted .lead-sort-arrows { opacity: 1; color: var(--brand-ink); }
.lead-table-editable tbody tr:nth-child(even) { background: var(--table-zebra); }
.lead-table-editable tbody tr:hover { background: var(--w05); }
.lead-table-editable tr.is-changed { background: rgba(var(--brand-rgb), 0.16); box-shadow: inset 3px 0 0 var(--brand); }
/* Enlaces de la tabla (Ref→Qobrix) con el token de enlace del sistema → legible y consistente. */
.lead-table-editable td a { color: var(--brand-ink); text-decoration: none; }
.lead-table-editable td a:hover { color: var(--link-hover); text-decoration: underline; }
.lead-table-editable .lead-status-select,
.lead-table-editable .lead-advisor-select,
.lead-table-editable .lead-comment-input { padding: 5px 8px; border: 1px solid var(--w15); border-radius: var(--radius-sm); background: var(--bg, var(--bg)); color: var(--text, var(--text)); font: inherit; }
.lead-table-editable .lead-status-select,
.lead-table-editable .lead-advisor-select { width: 100%; min-width: 132px; }
.lead-table-editable .lead-comment-input { width: 150px; }
.lead-table-editable .lead-comment-input::placeholder { color: var(--muted, #8b929c); }
.lead-table-editable .lead-phone { display: inline-flex; align-items: center; gap: 8px; }
.lead-table-editable .lead-phone-trigger { background: none; border: none; padding: 0; font: inherit; color: var(--brand-ink); font-weight: 600; cursor: pointer; }
.lead-table-editable .lead-phone-trigger:hover { text-decoration: underline; }
.lead-table-editable .lead-phone-actions { display: inline-flex; gap: 8px; }
.lead-table-editable .lead-phone-action { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--brand); border-radius: var(--radius-sm); color: var(--text, var(--text)); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; background: rgba(var(--brand-rgb), 0.14); white-space: nowrap; }
.lead-table-editable .lead-phone-action:hover { background: rgba(var(--brand-rgb), 0.26); }
.lead-table-editable .lead-col-num { width: 34px; text-align: center; color: var(--muted, var(--muted)); }
.lead-table-editable .lead-col-date { color: var(--muted, var(--muted)); font-size: var(--fs-sm); }
.lead-table-editable .lead-col-tipo { color: var(--muted, var(--muted)); }
.lead-table-summary { padding: 8px 10px; font-size: var(--fs-sm); color: var(--muted, var(--muted)); border-bottom: 1px solid var(--w07); }
.lead-table-actions { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Botones Actualizar/Cargar más migrados a .btn (.primary/.ghost) del design system. */
.lead-table-status { font-size: var(--fs-sm); color: var(--muted, var(--muted)); }
.lead-table-more { margin-top: 8px; }

/* Panel Oportunidades: botón fino para desplegar/colapsar la barra de filtros (tema-aware) */
#contacts-dialog .contacts-filters-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  justify-self: start; align-self: start; min-width: 132px;
  margin: 4px 2px 6px; padding: 6px 12px;
  /* Era una pastilla azul rellena con #fff a mano: un botón SECUNDARIO vestido de
     primario que competía con "Añadir". Al look del sistema (como "Cerrar"). (16-ago) */
  border-radius: var(--radius-sm); border: 1px solid var(--qbx-line-strong, var(--line-strong));
  background: transparent; color: var(--qbx-text, var(--text));
  font: inherit; font-weight: 600; font-size: var(--fs-sm); min-height: 34px; cursor: pointer;
}
#contacts-dialog .contacts-filters-toggle:hover { background: var(--w06); }
#contacts-dialog .cft-chevron {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor; transition: transform 0.18s ease;
}
#contacts-dialog .contacts-filters-toggle[aria-expanded="true"] .cft-chevron { transform: rotate(180deg); }
#contacts-dialog .cft-count {
  min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--brand); color: #fff; font-size: var(--fs-2xs); font-weight: 700;
}
/* Colapsar SIN sacar el elemento de la rejilla (si no, se descuadran las filas y se solapa la tabla). */
#contacts-dialog .contacts-filters.is-collapsed {
  max-height: 0 !important; overflow: hidden !important;
  margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important;
}

/* ── MODO CLARO 100%: superficies que tenían colores OSCUROS fijos (no virables por variable)
   y se quedaban negras en tema claro. Overrides solo para [data-theme="light"]. ───────────── */
:root[data-theme="light"] .composer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--bg) 22%, var(--bg) 100%) !important;
}
:root[data-theme="light"] .composer-shell {
  background: var(--panel-3) !important;
  border-color: var(--line) !important;
}
:root[data-theme="light"] .shared-with-me-history-item-row .history-item {
  background: radial-gradient(circle at left, rgba(var(--brand-rgb), 0.10), transparent 44%), var(--panel-2) !important;
}
:root[data-theme="light"] .shared-by-me-history-item-row .history-item {
  background: radial-gradient(circle at left, rgba(0, 0, 0, 0.04), transparent 44%), var(--panel-2) !important;
}
:root[data-theme="light"] .chat-scroll-bottom { background: var(--panel-3) !important; color: var(--text) !important; }
:root[data-theme="light"] .context-shift-warning { background: var(--panel-2) !important; }
:root[data-theme="light"] .notification-master-switch.is-off { background: var(--panel-3) !important; }
/* Fade oscuro detrás del chat antes del composer (rgba(35,35,35)/#232323 y #141414). */
:root[data-theme="light"] .messages-fade,
:root[data-theme="light"] .chat-fade,
:root[data-theme="light"] .composer-fade { background: linear-gradient(180deg, rgba(255,255,255,0), var(--bg) 60%) !important; }

/* ── Modo claro F1 (2-jul): elementos que no viraban en claro (detectados por contraste) ── */
:root[data-theme="light"] .case-context-hint,
:root[data-theme="light"] .context-empty-copy,
:root[data-theme="light"] .context-empty-copy p { color: var(--muted) !important; }
:root[data-theme="light"] .history-item-shared-badge { color: #0369a1 !important; }
/* (Los parches del modal "explorar modos" y del selector de modo se borraron el 16-ago:
   las reglas base ya usan tokens y viran solas con el tema.) */
/* F1 tanda 2: contenedores oscuros + textos heredados que faltaban (detectados por contraste) */
:root[data-theme="light"] .sidebar-action-label { color: var(--text) !important; }
/* (Parche del diálogo de modos borrado el 16-ago: base ya por tokens.) */
/* (El parche de fondo del panel se borró el 16-ago: la base ya es var(--panel)/var(--text).) */
:root[data-theme="light"] .notification-center-panel h2,
:root[data-theme="light"] .notification-center-panel h3,
:root[data-theme="light"] .notification-center-panel h4 { color: var(--text) !important; }
/* (Los parches del título y el kicker de cada notificación se borraron el 16-ago:
   la regla base ya usa var(--text) / var(--brand-ink) y vira sola con el tema.) */
/* F1 tanda 10: tooltip del badge de confianza ("Alto: respuesta fiable…") — burbuja casi negra + texto oscuro */
:root[data-theme="light"] .pill.has-tooltip::after {
  background: var(--panel) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14) !important;
}
/* F1 tanda 11: iconos, botón Editar, chat activo y logo mal puestos en claro */
/* (a) Iconos con trazo BLANCO incrustado en el SVG (background-image) → invertir a oscuro.
   Son spans de icono puros; el filtro solo afecta al icono, no a inputs ni a fondos de botón. */
:root[data-theme="light"] .sidebar-icon,
:root[data-theme="light"] .sidebar-user-menu-icon,
:root[data-theme="light"] .header-icon,
:root[data-theme="light"] .attachment-action-icon { filter: invert(1); }
/* F1 tanda 13 (8-sep, auditoría móvil): el menú del «+» del compositor —Cámara, Subir archivo—
   tenía `color:#f4f6f8` a fuego (styles.css:4865), un blanco pensado para el modo oscuro. En claro
   quedaba en 1,06:1 sobre su propio fondo: texto blanco sobre blanco, ILEGIBLE. Para leer hacen
   falta 4,5:1. A los iconos ya se les había dado la vuelta arriba; el texto se quedó atrás.
   Es el MISMO fallo que ya se corrigió para el menú de los tres puntos, tres líneas más abajo. */
:root[data-theme="light"] .attachment-action-button { color: var(--text) !important; }

/* EXCEPCIÓN: el logo de Qobrix es un icono a COLOR (fondo azul #2f6df6 + elefante), no un trazo blanco.
   El invert lo volvía naranja → se deja tal cual (mismo azul que en oscuro). */
:root[data-theme="light"] .header-icon-qobrix { filter: none !important; }
/* F1 tanda 12: menú de los 3 puntos del chat (Cambiar nombre / Fijar chat / Ver info) — texto #f0f3f6
   e iconos de trazo blanco → invisibles en claro. */
:root[data-theme="light"] .history-item-menu-option { color: var(--text) !important; }
:root[data-theme="light"] .history-item-menu-option.danger { color: #dc2626 !important; }
:root[data-theme="light"] .history-menu-icon-rename,
:root[data-theme="light"] .history-menu-icon-pin,
:root[data-theme="light"] .history-menu-icon-info,
:root[data-theme="light"] .history-menu-icon-share { filter: invert(1); }
/* F1 tanda 13: casillas de formulario `.field` (login, modal de perfil/contraseña inicial, etc.)
   tenían fondo oscuro fijo (rgba(34,36,41,.92)) → no viraban en claro. */
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea {
  /* Era var(--panel-2): casi el mismo blanco que la tarjeta que las contiene — las
     casillas no se distinguían. El lienzo (--bg) queda un paso más hundido y el borde
     firme marca dónde se escribe. (16-ago)
     background-COLOR, no el shorthand: el shorthand reseteaba background-image y
     borraba la flecha única de los select en tema claro. (tanda S, nº15) */
  background-color: var(--bg) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .field input::placeholder,
:root[data-theme="light"] .field textarea::placeholder { color: var(--muted) !important; }
/* (b) Botón "Editar" de la burbuja del usuario (texto casi blanco → oscuro) */
:root[data-theme="light"] .user-message-edit-button,
:root[data-theme="light"] .user-message-edit-button:hover { color: var(--text) !important; }
/* (d) Label "Mi agenda": con recordatorios vencidos, #agenda-button forzaba color:#fff → invisible en claro.
   Mismo caso para el botón de notificaciones denegadas. */
:root[data-theme="light"] #agenda-button.has-agenda-overdue,
:root[data-theme="light"] #notifications-button.has-push-denied { color: var(--text) !important; }
/* (e) Logo TRIA: se deja IDÉNTICO al de modo oscuro (badge oscuro + marca cian vívida), igual que
   el logo de Qobrix mantiene su fondo en ambos temas. Sin override en claro → mismo azul EXACTO. */
:root[data-theme="light"] .case-context-card { background: var(--panel-2) !important; }
:root[data-theme="light"] .case-context-score { color: var(--text) !important; }
/* (F1 tandas 3-4 del modal de modos borradas el 16-ago: sidebar/detail/tarjetas/starter
   ya usan tokens en la base — panel-2, línea, texto y muted viran solos.) */
:root[data-theme="light"] .btn.primary { background: var(--brand) !important; color: #fff !important; }
:root[data-theme="light"] .btn.primary:hover { background: var(--brand-strong) !important; }
/* F1 tanda 5: títulos y metadatos de los chats en la lista (tenues en claro) */
:root[data-theme="light"] .history-item-title { color: var(--text) !important; }
:root[data-theme="light"] .history-item-date,
:root[data-theme="light"] .history-item-meta,
:root[data-theme="light"] .history-item-shared-meta { color: var(--muted) !important; }
/* F1 tanda 6: pills de grupo de la sidebar (fondos oscuros hardcoded) → claros */
:root[data-theme="light"] .qobrix-history-group-label {
  background: linear-gradient(90deg, rgba(14,116,144,0.10), rgba(37,99,235,0.06)), var(--panel-2) !important;
  border-left-color: var(--brand) !important;
  color: var(--brand-strong) !important;
}
:root[data-theme="light"] .rest-history-group-label,
:root[data-theme="light"] .legal-history-group-label {
  background: var(--panel-2) !important;
  border-left-color: var(--line-strong) !important;
  color: var(--muted) !important;
}
:root[data-theme="light"] .rest-history-group-label::before,
:root[data-theme="light"] .legal-history-group-label::before { background: var(--line) !important; }
/* F1 tanda 7: burbujas de la conversación (fondos/textos hardcoded oscuros) */
/* Burbuja de TU mensaje: fondo oscuro fijo (#2a2b2f / rgba(45,48,54)) → panel claro + texto oscuro legible */
:root[data-theme="light"] .user-message {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
}
:root[data-theme="light"] .user-message .message-body,
:root[data-theme="light"] .user-message .message-role { color: var(--text) !important; }
/* Respuesta de TRIA: texto casi-blanco fijo (rgba(241,242,243,.94)) → texto oscuro legible */
:root[data-theme="light"] .assistant-primary-answer { color: var(--text) !important; }
/* Código en línea dentro de las respuestas (chip gris sobre fondo oscuro) → chip claro */
:root[data-theme="light"] .assistant-message .assistant-primary-answer code {
  background: var(--panel-2) !important;
  color: var(--brand-strong) !important;
  border-color: var(--line) !important;
}
/* F1 tanda 8: modal "Mi agenda" (estaba entero hardcoded en oscuro) → claro */
/* Contenedor del diálogo */
:root[data-theme="light"] .agenda-dialog {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}
:root[data-theme="light"] .agenda-dialog .chat-info-header h2 { color: var(--text) !important; }
:root[data-theme="light"] .agenda-dialog .drawer-eyebrow,
:root[data-theme="light"] .agenda-summary { color: var(--muted) !important; }
/* Pestañas de filtro (Todo/Hoy/Vencidos/…) */
:root[data-theme="light"] .agenda-filter-chip { color: var(--text) !important; }
:root[data-theme="light"] .agenda-filter-chip strong { color: var(--text) !important; }
:root[data-theme="light"] .agenda-filter-chip.active { color: var(--brand-strong) !important; }
/* Nav de fechas + Actualizar */
:root[data-theme="light"] #agenda-dialog .agenda-date-control label,
:root[data-theme="light"] #agenda-dialog .agenda-date-control label strong,
:root[data-theme="light"] #agenda-dialog .agenda-date-control .agenda-date-clear,
:root[data-theme="light"] #agenda-refresh,
:root[data-theme="light"] .agenda-workday-toggle { color: var(--text) !important; }
:root[data-theme="light"] #agenda-dialog .agenda-workday-head span { color: var(--muted) !important; }
/* Buscador */
:root[data-theme="light"] #agenda-dialog .agenda-search span { color: var(--muted) !important; }
:root[data-theme="light"] #agenda-dialog .agenda-search input {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
:root[data-theme="light"] #agenda-dialog .agenda-search input::placeholder { color: var(--muted) !important; }
/* Cabeceras de sección (Vencidos / Hoy …) */
:root[data-theme="light"] .agenda-section-head { background: var(--panel-2) !important; }
:root[data-theme="light"] .agenda-section-head h3 { color: var(--text) !important; }
/* Tarjetas de recordatorio */
:root[data-theme="light"] .agenda-card h3 { color: var(--text) !important; }
:root[data-theme="light"] .agenda-card p { color: var(--muted) !important; }
:root[data-theme="light"] .agenda-card-meta span { color: var(--text) !important; }
/* Tarea abierta desde la lista (fundador, 22-sep-2026: «al pinchar en tarea, no se lee bien el
   contenido»). Estaba escrita solo para el tema oscuro —blancos a pelo— y en claro salía el título
   y el texto en blanco sobre blanco. Es la MISMA familia que la tarjeta: mismos tokens. */
:root[data-theme="light"] .agenda-task-detail-head h3 { color: var(--text) !important; }
:root[data-theme="light"] .agenda-task-detail-head time { color: var(--text) !important; }
:root[data-theme="light"] .agenda-task-detail .agenda-kicker { color: var(--muted) !important; }
:root[data-theme="light"] .agenda-task-detail p { color: var(--text) !important; }
:root[data-theme="light"] .agenda-task-detail-grid div {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
}
:root[data-theme="light"] .agenda-task-detail-grid span { color: var(--muted) !important; }
:root[data-theme="light"] .agenda-task-detail-grid strong { color: var(--text) !important; }
:root[data-theme="light"] .agenda-detail-link { color: var(--link) !important; }
:root[data-theme="light"] .agenda-task-detail {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}
:root[data-theme="light"] .agenda-task-detail.agenda-card-overdue {
  background: linear-gradient(135deg, rgba(197, 101, 101, 0.1), var(--panel)) !important;
}
/* Borrar: se ve que es lo que no tiene vuelta atrás, sin gritar. Lleva las dos clases en el
   selector para ganarle a la regla general de los botones de la tarjeta, que va más abajo. */
.agenda-action-button.agenda-action-borrar,
:root[data-theme="light"] .agenda-action-button.agenda-action-borrar {
  color: var(--danger-text) !important;
  border-color: var(--danger-border) !important;
}
@media (hover: hover) {
  .agenda-action-button.agenda-action-borrar:hover { background: var(--danger-bg) !important; color: var(--danger-text) !important; }
}
:root[data-theme="light"] .agenda-link { color: var(--link) !important; }
:root[data-theme="light"] .agenda-card-overdue { background: linear-gradient(135deg, rgba(197,101,101,0.12), var(--panel-2)) !important; }
:root[data-theme="light"] .agenda-card-today { background: linear-gradient(135deg, rgba(201,151,54,0.12), var(--panel-2)) !important; }
:root[data-theme="light"] .agenda-card-upcoming { background: var(--panel-2) !important; }
/* Botones de acción de la tarjeta */
:root[data-theme="light"] .agenda-action-button { color: var(--text) !important; }
:root[data-theme="light"] .agenda-action-button:hover { color: var(--brand-strong) !important; }
:root[data-theme="light"] .agenda-action-primary { color: #166534 !important; }
/* F1 tanda 8b: flecos del modal agenda que aún salían tenues (overrides !important de oscuro) */
/* Línea "Mostrando X de Y…" (tenía texto claro sobre barra oscura) */
:root[data-theme="light"] .agenda-page-info {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
/* Eyebrow de tarjeta ("PRIMER CONTACTO · ALTA · VENCIDOS") + recuento de sección */
:root[data-theme="light"] .agenda-kicker,
:root[data-theme="light"] .agenda-section-head span { color: var(--muted) !important; }
/* Chip "N tareas agrupadas" (texto casi blanco → azul de marca) + su descripción */
:root[data-theme="light"] #agenda-dialog .agenda-card-group-summary { color: var(--muted) !important; }
:root[data-theme="light"] #agenda-dialog .agenda-card-group-summary strong { color: var(--brand-strong) !important; }
/* Fecha/hora de cada tarjeta (quedaba invisible) */
:root[data-theme="light"] .agenda-card time,
:root[data-theme="light"] #agenda-dialog .agenda-card-head time { color: var(--text) !important; }
/* Botones de navegación de fecha (‹ · Todas las fechas · › · Hoy) con fondo oscuro.
   La regla ganadora en oscuro usa 2 IDs (#agenda-dialog #agenda-workblocks …) → hay que igualarla. */
:root[data-theme="light"] #agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-arrow,
:root[data-theme="light"] #agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-clear,
:root[data-theme="light"] #agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-label,
:root[data-theme="light"] #agenda-dialog .agenda-date-control .agenda-date-arrow,
:root[data-theme="light"] #agenda-dialog .agenda-date-control .agenda-date-clear,
:root[data-theme="light"] #agenda-dialog .agenda-date-control .agenda-date-label {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] #agenda-dialog #agenda-workblocks .agenda-date-control .agenda-date-label strong,
:root[data-theme="light"] #agenda-dialog .agenda-date-control .agenda-date-label strong { color: var(--text) !important; }
/* F1 tanda 9: menú de usuario — "Actualizar app ahora" (gradiente oscuro + texto casi blanco) */
:root[data-theme="light"] .app-update-button.has-app-update {
  background: linear-gradient(90deg, rgba(14,116,144,0.10), rgba(30,64,175,0.06)), var(--panel-2) !important;
  border-color: rgba(37,99,235,0.30) !important;
  color: var(--brand-strong) !important;
}
:root[data-theme="light"] .app-update-badge { color: var(--brand-strong) !important; }

/* Móvil: la cabecera del panel Contactos se ajusta (las pestañas no empujan "Cerrar" fuera). */
@media (max-width: 720px) {
  #contacts-dialog.contacts-qbx .contacts-qbx-header { flex-wrap: wrap; gap: 8px; align-items: center; }
  #contacts-dialog.contacts-qbx .contacts-qbx-heading { flex: 1 1 auto; }
  #contacts-dialog.contacts-qbx .contacts-qbx-header-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  #contacts-dialog.contacts-qbx .contacts-qbx-header-actions .contacts-tab { flex: 0 0 auto; padding: 8px 11px; }
  #contacts-dialog.contacts-qbx .contacts-qbx-header-actions #close-contacts-dialog { margin-left: auto; }
  /* Las pestañas (Oportunidades·Locales·Captaciones·👤) son UNA fila nowrap dentro de la
     cabecera: en 390px desbordaban y la de Contactos quedaba fuera de pantalla sin pista.
     Salida por scroll horizontal, como las pestañas del centro de avisos. (16-ago) */
  #contacts-dialog.contacts-qbx .contacts-tabs {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  #contacts-dialog.contacts-qbx .contacts-tabs::-webkit-scrollbar { display: none; }
  /* El placeholder del buscador se cortaba a media palabra: con letra y padding un punto
     menores cabe la frase (y la elipsis ya existente remata lo que no quepa). (16-ago) */
  #contacts-dialog.contacts-qbx .contacts-searchbar input { font-size: var(--fs-sm); padding: 9px 10px; }
  /* Filtros abiertos en móvil: que NO empujen la lista fuera ni se solapen → altura tope + scroll propio. */
  #contacts-dialog.contacts-qbx .contacts-filters:not(.is-collapsed) {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 6px;
    -webkit-overflow-scrolling: touch;
  }
}

/* Estado EDITABLE por fila en la tabla de Oportunidades (cambia y guarda solo). */
#contacts-dialog.contacts-qbx .cqx-estado-select,
#contacts-dialog.contacts-qbx .cqx-advisor-select {
  width: 100%; max-width: 100%;
  padding: 4px 22px 4px 8px;
  border: 1px solid var(--qbx-line); border-radius: var(--radius-sm);
  background: var(--qbx-bg); color: var(--qbx-text);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  /* (chevron: regla ÚNICA de flecha del final del archivo — tanda U) */
}
#contacts-dialog.contacts-qbx .cqx-estado-select:hover,
#contacts-dialog.contacts-qbx .cqx-advisor-select:hover { border-color: var(--qbx-line-strong); }
#contacts-dialog.contacts-qbx .cqx-estado-select:focus,
#contacts-dialog.contacts-qbx .cqx-advisor-select:focus { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25); }
#contacts-dialog.contacts-qbx .cqx-estado-select:disabled,
#contacts-dialog.contacts-qbx .cqx-advisor-select:disabled { opacity: 0.6; cursor: progress; }

/* Casilla de comentario por fila (Enter → lo manda a Qobrix). */
#contacts-dialog.contacts-qbx .cqx-comment {
  margin-top: 5px; width: 100%; max-width: 340px;
  padding: 5px 10px;
  border: 1px solid var(--qbx-line-strong); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--qbx-text); /* era var(--bg): agujero negro en oscuro, como el buscador */
  font: inherit; font-size: var(--fs-sm);
}
#contacts-dialog.contacts-qbx .cqx-comment::placeholder { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .cqx-comment:focus { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25); }
#contacts-dialog.contacts-qbx .cqx-comment:disabled { opacity: 0.6; }
/* Comentario BAJO DEMANDA: oculto por defecto; el ✎ junto al nombre lo despliega (menos ruido en la lista). */
#contacts-dialog.contacts-qbx .cqx-comment[hidden] { display: none; }
/* Nota y Favorito viven dentro de este envoltorio para poder ponerlos medio y medio en el móvil.
   En el ordenador el envoltorio no existe para la maquetación: los dos botones siguen colgando
   directamente de la fila, como antes. */
#contacts-dialog.contacts-qbx .cqx-m-acciones { display: contents; }
#contacts-dialog.contacts-qbx .cqx-comment-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  /* Blanco (color de texto del panel) para que se distinga sobre el fondo oscuro, no azul. */
  color: var(--qbx-text, #fff); font-size: var(--fs-2xl); cursor: pointer;
}
#contacts-dialog.contacts-qbx .cqx-comment-toggle:hover,
#contacts-dialog.contacts-qbx .cqx-comment-toggle.is-active { color: var(--qbx-text, #fff); background: var(--w06); }
/* Estrella de favorito (fila): apagada = gris, encendida = amarilla. */
#contacts-dialog.contacts-qbx .cqx-fav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--qbx-muted, #8a93a3); font-size: var(--fs-xl); cursor: pointer;
}
#contacts-dialog.contacts-qbx .cqx-fav-toggle:hover { background: var(--w06); color: var(--qbx-text, #fff); }
#contacts-dialog.contacts-qbx .cqx-fav-toggle.is-on { color: var(--warning); }
/* Phosphor (19-sep): la estrella vacía y la llena son dos dibujos; se enseña uno u otro (igual que en la ficha). */
#contacts-dialog.contacts-qbx .cqx-fav-toggle .ph-on,
#contacts-dialog.contacts-qbx .cqx-fav-toggle.is-on .ph-off { display: none; }
#contacts-dialog.contacts-qbx .cqx-fav-toggle.is-on .ph-on { display: inline-block; }
#contacts-dialog.contacts-qbx .cqx-fav-toggle .cqx-icono,
#contacts-dialog.contacts-qbx .cqx-comment-toggle .cqx-icono { width: 18px; height: 18px; }
/* Estrella de favorito (ficha) junto a los iconos del nombre. */
.fd-fav { background: transparent; border: 0; cursor: pointer; color: var(--qbx-muted, #8a93a3); line-height: 1; }
.fd-fav.is-on { color: var(--warning); }
/* Botón estrella del toolbar: filtra solo favoritos. */
.contacts-fav-filter {
  /* Borde y altura como sus hermanos del actionbar (Mostrar filtros, orden):
     misma fila, mismo peso visual. (tanda S, nº47) */
  background: transparent; border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: var(--radius-sm);
  color: var(--qbx-muted, #8a93a3); font-size: var(--fs-xl); line-height: 1; padding: 7px 11px; min-height: 34px; cursor: pointer;
}
.contacts-fav-filter:hover { color: var(--qbx-text, #fff); }
.contacts-fav-filter.is-on { color: var(--warning); border-color: var(--warning); }

/* Selector de orden (Modificado/Creado/Estado) — útil sobre todo en móvil. */
#contacts-dialog.contacts-qbx .contacts-sort {
  align-self: center;
  padding: 7px 30px 7px 14px;
  /* Era pastilla 999px: terminada la migración al radio del sistema, como sus
     hermanos del actionbar (Añadir, segmentos, Mostrar filtros). (tanda R, nº52) */
  /* Borde y letra como Mostrar filtros (línea-strong, 0.8rem); la flecha la pinta
     la regla ÚNICA de flecha de select del final del archivo. (tanda S, nº47) */
  border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; min-height: 34px; cursor: pointer;
}
#contacts-dialog.contacts-qbx .contacts-sort:hover { background-color: var(--panel-3); }

/* Nombre + iconos (llamar/WhatsApp) + botón "Buscar local" (match), todos en una línea. */
#contacts-dialog.contacts-qbx .cqx-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
/* El nombre se recorta con puntos suspensivos si no cabe, para que iconos + ✎ + ★ queden SIEMPRE en 1 línea. */
#contacts-dialog.contacts-qbx .cqx-name-row .cqx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#contacts-dialog.contacts-qbx .cqx-name-row > :not(.cqx-name) { flex: 0 0 auto; }
#contacts-dialog.contacts-qbx .cqx-match {
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--brand); background: rgba(var(--brand-rgb), 0.14); color: var(--brand-ink);
  font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
#contacts-dialog.contacts-qbx .cqx-match:hover { background: rgba(var(--brand-rgb), 0.24); }

/* Popup de match: tabla de locales compatibles, por encima del modal de Contactos. */
.contacts-match-overlay { position: fixed; inset: 0; z-index: 10110; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 0, 0, 0.55); }
.contacts-match-overlay[hidden] { display: none; }
.cmatch-box { width: min(560px, 96vw); max-height: 84vh; display: flex; flex-direction: column; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); overflow: hidden; }
.cmatch-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-xl); }
.cmatch-close { background: transparent; border: 0; color: var(--muted); font-size: var(--fs-2xl); cursor: pointer; line-height: 1; }
.cmatch-close:hover { color: var(--text); }
.cmatch-body { padding: 8px 16px 16px; overflow-y: auto; }
.cmatch-empty { color: var(--muted); padding: 16px 0; text-align: center; }
/* .cmatch-table MIGRADA al sistema (.data-table); delta: cabecera pegajosa para el scroll del modal. */
.cmatch-table th { position: sticky; top: 0; z-index: 1; }
.cmatch-pct { font-weight: 700; color: var(--brand-ink); white-space: nowrap; }

/* (La lupa plegable del actionbar se eliminó; su CSS huérfano salió en la tanda U, nº9.) */
#contacts-dialog.contacts-qbx .contacts-searchbar { flex: 1 1 100%; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
#contacts-dialog.contacts-qbx .contacts-searchbar input { flex: 1 1 auto; }
#contacts-dialog.contacts-qbx .contacts-search-ai { flex: 0 0 auto; width: 42px; height: 38px; padding: 0; border-radius: var(--radius-md); border: 1px solid var(--brand); background: var(--brand); color: #fff; font-size: var(--fs-2xl); line-height: 1; cursor: pointer; }
#contacts-dialog.contacts-qbx .contacts-search-ai:hover { filter: brightness(1.1); }
#contacts-dialog.contacts-qbx .contacts-search-ai:disabled { opacity: 0.6; cursor: default; }
#contacts-dialog.contacts-qbx .contacts-searchbar[hidden] { display: none; }
#contacts-dialog.contacts-qbx .contacts-searchbar input {
  width: 100%; padding: 9px 14px;
  border: 1px solid var(--qbx-line-strong); border-radius: var(--radius-sm);
  /* Era var(--bg) — el color del LIENZO de la app — dentro de un panel que está por
     encima: en oscuro el buscador se veía como un agujero negro recortado. --panel-2 es
     la superficie que le corresponde a un control dentro de un panel. (16-ago) */
  background: var(--panel-2); color: var(--qbx-text); font: inherit; font-size: var(--fs-md);
}
#contacts-dialog.contacts-qbx .contacts-searchbar input::placeholder { color: var(--qbx-muted); }
#contacts-dialog.contacts-qbx .contacts-searchbar input:focus { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25); }

/* "+" de la cabecera: solo móvil (en escritorio se usa "Añadir" de la actionbar). */
#contacts-dialog.contacts-qbx .contacts-add-header { display: none; }
@media (max-width: 720px) {
  #contacts-dialog.contacts-qbx .contacts-add-header {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 34px; height: 34px; padding: 0; border-radius: 999px;
    border: 1px solid var(--brand); background: var(--brand); color: #fff;
    font-size: 1.35rem; line-height: 1; font-weight: 700; cursor: pointer;
  }
  /* Cerrar → ✕ en la esquina superior derecha del modal. */
  #contacts-dialog.contacts-qbx .close-button {
    position: absolute; top: 8px; right: 10px; z-index: 6;
    width: 40px; height: 40px; padding: 0; border-radius: 999px; font-size: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* (la ✕ la dibujan las barras de la regla global de cierre; aquí solo queda la posición) */
  /* ↻ (actualizar) redondo a la IZQUIERDA de la ✕ (que está en right:10): mismo tamaño, sin solaparse. */
  #contacts-dialog.contacts-qbx .contacts-qbx-refresh {
    position: absolute; top: 8px; right: 58px; z-index: 6;
    width: 40px; height: 40px; padding: 0; border-radius: 999px;
  }
  /* En móvil, el "Añadir" largo de la actionbar se oculta (su función la hace el "+" de la
     cabecera, que desde el 16-ago EXISTE de verdad: antes se ocultaba éste confiando en un
     botón que nunca se puso en el HTML, y no había forma de crear nada desde el móvil). */
  #contacts-dialog.contacts-qbx .contacts-actionbar #contacts-new { display: none; }
  /* El título no se mete bajo los 3 botones absolutos (✕ ↻ ＋ a 40px = ~150px). */
  #contacts-dialog.contacts-qbx .contacts-qbx-heading { padding-right: 150px; }
  #contacts-dialog.contacts-qbx .contacts-qbx-add-header {
    display: inline-flex;
    position: absolute; top: 8px; right: 106px; z-index: 6;
    padding: 0; width: 40px; height: 40px; border-radius: 999px;
  }
  /* Paso 3 (19-sep, dibujo docs/diseno/paso2-inicio-y-qobrix.html §Qobrix «La lista»): en
     Oportunidades el total ya sale en el subtítulo («318 con estos filtros», app.js
     renderContactsHeader). El badge junto al título se quita SOLO en esa pestaña para no
     repetir el número dos veces; en Locales/Captaciones/Contactos se queda igual que hoy. */
  #contacts-dialog.contacts-qbx:not(.tab-contacts) .contacts-qbx-badge { display: none; }
  /* Que "Mostrar filtros · ★ · Ordenar" quepan en UNA línea: pastillas compactas. */
  #contacts-dialog.contacts-qbx .contacts-actionbar { gap: 6px; }
  #contacts-dialog.contacts-qbx .contacts-filters-toggle { padding: 6px 12px; margin: 0; font-size: var(--fs-sm); }
  #contacts-dialog.contacts-qbx .contacts-filters-toggle .cft-count { display: none; } /* más fino, sin el contador */
  #contacts-dialog.contacts-qbx .contacts-fav-filter { padding: 6px 9px; font-size: var(--fs-lg); }
  #contacts-dialog.contacts-qbx .contacts-sort { padding: 6px 26px 6px 10px; font-size: var(--fs-xs); margin-left: 0; min-width: 0; }
}

/* Toast (aviso flotante breve), por encima del modal de Contactos a pantalla completa. */
/* Los toasts son la capa de FEEDBACK: pintan por encima de TODO (12100 incluido).
   Antes 10120: el error de "no se pudo guardar la nota" nacía DETRÁS del velo del propio
   overlay que lo disparaba (estado-note 10140, contacts-confirm 10130) y con el correo
   (mail-overlay 10150, fondo opaco) era 100% invisible. pointer-events:none → no puede
   bloquear nada por estar arriba. (tanda T, nº76) */
#tn-toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 12200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.tn-toast { max-width: 90vw; padding: 10px 16px; border-radius: 999px; background: var(--panel-4, var(--panel-4)); color: var(--text, #f4f5f7); font: inherit; font-size: var(--fs-md); font-weight: 600; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; }
.tn-toast.show { opacity: 1; transform: translateY(0); }
.tn-toast.is-ok { background: var(--success, #2f8f6b); color: #fff; }
.tn-toast.is-error { background: var(--danger, #c56565); color: #fff; }
/* En el móvil el aviso abajo TAPABA la caja de escribir y los adjuntos justo cuando hay que reintentar
   (15-sep-2026, visto en la pantalla real a 375 px): va arriba, bajo la cabecera, como los avisos del
   propio teléfono. Con texto largo la píldora quedaba en un óvalo de cuatro líneas: esquinas normales. */
@media (max-width: 760px) {
  #tn-toast-host { top: calc(env(safe-area-inset-top, 0px) + 72px); bottom: auto; width: calc(100vw - 32px); }
  .tn-toast { max-width: 100%; border-radius: 14px; text-align: center; transform: translateY(-8px); }
  .tn-toast.show { transform: translateY(0); }
}

/* Pestaña PROPIEDADES (catálogo de locales) — tabla con scroll horizontal en móvil. */
.prop-table-wrap {
  /* El scroll (columnas H y filas V) lo hace #contacts-results en 2D: así la CABECERA (primera fila)
     queda FIJA (sticky) respecto a la LISTA y NO se va con el scroll. Si el wrapper scrollea (overflow-x),
     captura el sticky y la cabecera se mueve — por eso aquí NO scrollea. flex:none = crece a lo alto de
     la tabla. (fundador 29-jul: cabecera fija + PTR desacoplado) */
  overflow: visible;
  flex: none;
}
.prop-table { width: 100%; min-width: 720px; }
/* Cabecera FIJA (sticky) también en Locales/Captaciones (tablas .data-table): se queda arriba al
   scrollear las filas, respecto a #contacts-results (que scrollea en 2D). (fundador 29-jul)
   CLAVE: con border-collapse:collapse el navegador IGNORA position:sticky en <th> (WebKit/Blink).
   Hay que pasar la tabla a border-collapse:separate + border-spacing:0 para que el sticky pegue.
   Visualmente idéntico aquí: .data-table solo usa td{border-top}, no hay bordes que doblar. */
#contacts-dialog.contacts-qbx .prop-table-wrap .data-table { border-collapse: separate; border-spacing: 0; }
#contacts-dialog.contacts-qbx .prop-table-wrap .data-table thead th { position: sticky; top: 0; z-index: 3; }
.prop-table th, .prop-table td { white-space: nowrap; }
.prop-table .prop-row-off td { opacity: 0.5; }
.prop-vend-ok { color: var(--whatsapp, var(--whatsapp)); font-weight: 700; }
.prop-vend-no { color: var(--muted, #8a93a3); }

/* ───── Mis valoraciones (conector formulario web → Qobrix, vista del asesor) ───── */
.misval-dialog { max-width: 640px; }
.misval-intro { margin: 0; font-size: var(--fs-sm); color: var(--muted, #aab0bb); line-height: 1.5; }
.misval-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.misval-empty { padding: 22px 8px; text-align: center; color: var(--muted, #aab0bb); font-size: var(--fs-md); }
.misval-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, var(--w12)); border-radius: var(--radius-md); background: var(--bg-soft, var(--w03)); }
.misval-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.misval-item-main strong { font-size: var(--fs-lg); color: var(--text, #f4f5f7); }
.misval-item-sub { font-size: var(--fs-sm); color: var(--muted, #aab0bb); }
.misval-item-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.misval-asignar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.misval-asignar-txt { font-size: var(--fs-sm); color: var(--muted, #aab0bb); white-space: nowrap; }
.misval-asignar-txt strong { color: var(--text, #f4f5f7); font-weight: 600; }
.misval-asignar-antes { opacity: .75; }
.misval-asignar-sel { min-width: 0; max-width: 100%; background: var(--bg, #11151d); color: var(--text, #f4f5f7); border: 1px solid var(--line, var(--w18)); border-radius: var(--radius-sm); padding: 6px 8px; font-size: var(--fs-sm); }
.misval-asignar .btn { padding: 6px 12px; font-size: var(--fs-sm); white-space: nowrap; }
@media (max-width: 760px) { .misval-asignar { flex-wrap: wrap; } }
/* .misval-create-btn MIGRADO al sistema (.btn.primary); solo queda el delta. */
.misval-create-btn { white-space: nowrap; }
.val-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.val-badge.val-pending { background: rgba(231,168,58,0.18); color: var(--warning); }
.val-badge.val-done { background: rgba(64,180,110,0.18); color: var(--success); }
.val-modal-overlay { position: fixed; inset: 0; background: rgba(8,10,14,0.72); display: flex; align-items: center; justify-content: center; z-index: 10001; padding: 16px; }
.val-modal-panel { width: 100%; max-width: 460px; background: var(--panel, #23262b); border: 1px solid var(--line, var(--w18)); border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.val-modal-title { margin: 0 0 12px; font-size: var(--fs-xl); color: var(--text, #f4f5f7); }
.val-modal-body { font-size: var(--fs-md); color: var(--text, #f4f5f7); line-height: 1.55; }
.val-modal-body p { margin: 0 0 8px; }
.val-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.misval-modal-cancel { background: transparent; color: var(--text, #f4f5f7); border: 1px solid var(--line, var(--w2)); border-radius: var(--radius-sm); padding: 8px 16px; font-size: var(--fs-sm); cursor: pointer; }
.misval-modal-ok { background: var(--brand); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 8px 16px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
@media (max-width: 760px) { .misval-item { flex-direction: column; align-items: stretch; } .misval-item-side { justify-content: space-between; } }

/* ═══ CORREO (dibujo aprobado por el fundador el 3-oct-2026: docs/diseno/correo-dibujo-3oct.html) ═══
   Ordenador: la cabecera arriba y debajo tres columnas, carpetas · lista · correo abierto (o redactar).
   Móvil (≤ 768 px): una columna; el correo abierto tapa la lista (.mail-overlay.is-leyendo) y «←» vuelve.
   Con los colores de la app (claro y oscuro), iconos Phosphor y lo que se pulsa a 32 px (44 en el móvil).
   Antes estas reglas estaban repartidas en siete sitios del archivo; ahora viven todas aquí. */
.mail-overlay { position: fixed; inset: 0; z-index: 10150; background: var(--panel); display: flex; }
.mail-box { flex: 1; min-width: 0; height: 100%; display: grid; grid-template-columns: 200px minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); grid-template-areas: "head head head" "folders body reader"; background: var(--panel); color: var(--text); overflow: hidden; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.mail-ico { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.mail-solo-movil { display: none; }
.mail-hueco { flex: 1 1 auto; }

/* Cabecera: «Correo» y la cuenta, el buscador, Redactar y cerrar */
.mail-head { grid-area: head; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.mail-title { margin: 0; display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 17px; font-weight: 600; white-space: nowrap; }
.mail-cuenta { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mail-search { position: relative; margin-left: auto; width: 300px; max-width: 40vw; }
.mail-search .mail-ico { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); pointer-events: none; }
.mail-search-input { width: 100%; height: 32px; box-sizing: border-box; padding: 0 10px 0 32px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.mail-head-actions { display: flex; align-items: center; gap: 8px; }
/* Los .btn del Correo, a la medida de la norma (modificador, no un botón nuevo). */
.mail-box .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 500; box-shadow: none; white-space: nowrap; }
.mail-box .btn .mail-ico { width: 16px; height: 16px; }
.mail-box .btn.primary { background: var(--accion); color: #fff; }
@media (hover: hover) { .mail-box .btn.primary:hover { background: var(--accion-hover); filter: none; } }
/* El tema claro pinta TODOS los .btn.primary de --brand con !important (línea ~16209). El dibujo aprobado
   del Correo lleva el azul de la casa: aquí se respeta el dibujo, solo dentro del Correo. */
:root[data-theme="light"] .mail-box .btn.primary { background: var(--accion) !important; }
@media (hover: hover) { :root[data-theme="light"] .mail-box .btn.primary:hover { background: var(--accion-hover) !important; } }
.mail-x, .mail-ico-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
@media (hover: hover) { .mail-x:hover, .mail-ico-btn:hover { background: var(--panel-2); color: var(--text); } .mail-delete-btn:hover { color: var(--danger); } }

/* Carpetas */
.mail-folders { grid-area: folders; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: var(--bg); border-right: 1px solid var(--line); overflow-y: auto; }
.mail-folder-tab { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); text-align: left; white-space: nowrap; cursor: pointer; }
.mail-folder-tab.is-active { background: color-mix(in srgb, var(--accion) 11%, transparent); color: var(--brand-ink); font-weight: 600; }
@media (hover: hover) { .mail-folder-tab:not(.is-active):hover { background: var(--panel-2); color: var(--text); } }
.mail-folder-n { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--brand-ink); font-variant-numeric: tabular-nums; }

/* La lista: círculo con iniciales, remitente, fecha corta y asunto; lo no leído con punto y en negrita */
.mail-body { grid-area: body; min-height: 0; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--line); }
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.mail-item .mail-avatar { grid-row: 1 / span 2; }
.mail-item .mail-from { min-width: 0; font-size: var(--fs-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item .mail-date { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail-item .mail-subject { grid-column: 2 / 4; min-width: 0; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item.is-unseen .mail-from, .mail-item.is-unseen .mail-subject { font-weight: 600; color: var(--text); }
.mail-item.is-unseen::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--brand-ink); }
.mail-item.is-activa { background: color-mix(in srgb, var(--accion) 9%, transparent); }
@media (hover: hover) { .mail-item:not(.is-activa):hover { background: var(--panel-2); } }
.mail-empty, .mail-loading, .mail-loading-more { list-style: none; margin: 0; padding: 16px; color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* El correo abierto */
.mail-reader { grid-area: reader; min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.mail-reader-vacio { margin: auto; color: var(--muted); font-size: var(--fs-sm); }
.mail-msg-top { display: flex; align-items: center; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.mail-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--link); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.mail-back .mail-ico { width: 16px; height: 16px; }
/* En el ordenador la lista del CORREO sigue a la vista: «←» del lector solo hace falta en el móvil (como en el dibujo).
   Dentro del cajón de fichas NO: cada ventana (Compradores, Ofrecer, Vendedores, Historial) lleva su «← Volver a …» también
   en el ordenador (fundador, 16-oct-2026: «en cada ventana subpestaña tiene que haber para volver atrás»). */
@media (min-width: 769px) { .mail-msg-top .mail-back { visibility: hidden; } }
.mail-msg-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 8px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.mail-msg-subject { grid-column: 1 / -1; grid-row: 1; font-size: 19px; font-weight: 600; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.mail-msg-quien { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 12px; min-width: 0; }
.mail-msg-meta { display: grid; min-width: 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--muted); }
.mail-msg-meta b { font-weight: 600; color: var(--text); }
.mail-msg-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-msg-fecha { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.mail-msg-estado { grid-column: 1; grid-row: 3; }
.mail-msg-actions { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* La marca del hilo, ¿ya le he contestado? (modificador de .pill, no un componente nuevo) */
.mail-estado, .wesign-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 0; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.mail-estado.is-respondido, .wesign-chip.verde { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.mail-estado.is-esperando, .wesign-chip.ambar { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.mail-estado.is-mirando, .wesign-chip.gris { background: var(--panel-2); color: var(--muted); }
.mail-adj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 24px 0; font-size: var(--fs-sm); color: var(--muted); }
.mail-adj .mail-ico { width: 16px; height: 16px; }
.mail-adj-link { color: var(--link); text-decoration: underline; word-break: break-word; }
.mail-text { margin: 0; padding: 20px 24px; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--fs-md); }
.mail-iframe { display: block; width: calc(100% - 48px); min-height: 60vh; margin: 20px 24px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* Redactar (ocupa el sitio del correo abierto) */
.mail-compose { display: flex; flex-direction: column; min-height: 100%; }
.mail-compose-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px 8px 24px; border-bottom: 1px solid var(--line); font-size: 16px; }
.mail-field { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 24px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.mail-field > span { flex: 0 0 64px; }
.mail-field input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-md); outline: none; }
.mail-field:focus-within { box-shadow: inset 0 -2px 0 var(--accion); }
.mail-cc-toggle { flex: 0 0 auto; height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--link); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.mail-cc-field.is-hidden { display: none; }
.mail-text-input { flex: 1 1 auto; min-height: 220px; padding: 16px 24px; border: 0; resize: vertical; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-md); line-height: 1.55; outline: none; }
.mail-compose .mail-attach-list { padding: 0 24px 12px; }
.mail-dossier { display: flex; align-items: center; gap: 8px; padding: 0 24px 12px; }
.mail-dossier-id { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: inherit; }
.mail-compose-actions { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--line); }
.mail-adjuntar { position: relative; }
.mail-adjuntar-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 3; display: flex; flex-direction: column; min-width: 270px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 96%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(14, 27, 44, 0.16); }
.mail-menu-op { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; white-space: nowrap; cursor: pointer; }
.mail-menu-op .mail-ico { width: 16px; height: 16px; color: var(--muted); }
.mail-menu-op small { margin-left: auto; padding-left: 12px; color: var(--muted); font-size: var(--fs-xs); }
@media (hover: hover) { .mail-menu-op:hover { background: var(--panel-2); } }
.mail-menu-sep { height: 1px; margin: 4px 0; background: var(--line); }
.mail-compose-status { margin: 0; padding: 0 24px 12px; font-size: var(--fs-sm); color: var(--muted); text-align: right; }
.mail-compose-status:empty { display: none; }

@media (max-width: 768px) {
  .mail-solo-ord { display: none; }
  .mail-solo-movil { display: inline; }
  .mail-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head" "folders" "body"; }
  .mail-head { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px 8px 16px; border-bottom: 0; }
  .mail-title { flex: 1; flex-direction: column; align-items: flex-start; gap: 0; font-size: 18px; line-height: 1.2; }
  .mail-cuenta { font-size: var(--fs-xs); }
  .mail-search { order: 3; flex: 1 0 100%; width: 100%; max-width: none; margin: 0; }
  .mail-search-input { height: 40px; border-color: transparent; background: var(--panel-2); font-size: 16px; }
  .mail-box .btn { height: 44px; }
  .mail-box .mail-compose-btn, .mail-box .mail-refresh-btn { width: 44px; padding: 0; border-radius: 50%; }
  .mail-box .mail-compose-btn span, .mail-box .mail-refresh-btn span { display: none; }
  .mail-box .mail-compose-btn .mail-ico, .mail-box .mail-refresh-btn .mail-ico { width: 20px; height: 20px; }
  .mail-x { width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2); color: var(--text); }
  .mail-folders { flex-direction: row; gap: 6px; padding: 0 12px 8px; background: transparent; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .mail-folders::-webkit-scrollbar { display: none; }
  .mail-folder-tab { flex: 0 0 auto; gap: 6px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; }
  .mail-folder-tab .mail-ico { display: none; }
  .mail-folder-tab.is-active { background: var(--accion); border-color: var(--accion); color: #fff; }
  .mail-folder-tab.is-active .mail-folder-n { color: #fff; }
  .mail-body { border-right: 0; }
  .mail-reader { display: none; }
  .mail-overlay.is-leyendo .mail-reader { display: flex; grid-area: 1 / 1 / -1 / -1; z-index: 2; background: var(--panel); }
  .mail-msg-top { padding: 0 4px; }
  .mail-back { height: 44px; }
  .mail-ico-btn { width: 44px; height: 44px; }
  .mail-msg-head { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .mail-msg-estado { grid-column: 1; grid-row: 3; }
  .mail-msg-actions { grid-column: 1; grid-row: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mail-adj { padding: 12px 16px 0; }
  .mail-text { padding: 16px; }
  .mail-iframe { width: calc(100% - 32px); margin: 16px; }
  .mail-compose-cab, .mail-field, .mail-text-input { padding-left: 16px; padding-right: 16px; }
  .mail-compose .mail-attach-list, .mail-dossier, .mail-compose-status { padding-left: 16px; padding-right: 16px; }
  .mail-compose-actions { padding: 10px 16px; }
  .mail-adjuntar-btn { width: 44px; padding: 0; }
  .mail-adjuntar-menu { min-width: min(300px, calc(100vw - 32px)); }
  .mail-menu-op { height: 44px; }
}

/* Mis valoraciones: por encima del header de la app (z-index 10010 en móvil) — el header tapaba el dialog. */
#misval-backdrop { z-index: 10059; }
.misval-dialog { z-index: 10060; }
.misval-search { display: block; margin: 0; }
.misval-search input { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--line, var(--w18)); background: var(--bg-soft, var(--w04)); color: var(--text, #f4f5f7); font-size: var(--fs-md); }
.misval-qa-loading { padding: 16px 4px; color: var(--muted, #aab0bb); }
.val-modal-detalle { max-width: 540px; max-height: 80vh; display: flex; flex-direction: column; }
.val-modal-detalle .val-modal-body { overflow-y: auto; }
.misval-qa { margin: 0; }
.misval-qa dt { font-size: var(--fs-xs); color: var(--muted, #aab0bb); text-transform: uppercase; letter-spacing: 0.02em; margin-top: 10px; }
.misval-qa dd { margin: 2px 0 0; font-size: var(--fs-md); color: var(--text, #f4f5f7); }

/* El modal (preview/Q&A) debe ir por encima del dialog de Mis valoraciones (z-index 10060). */
.val-modal-overlay { z-index: 10070; }


/* Aviso de duplicado en Mis valoraciones (chat) */
.val-badge.val-dup { background: rgba(239,140,58,0.20); color: #ef8c3a; }
.misval-dup { margin-top: 5px; font-size: var(--fs-xs); color: #ef8c3a; line-height: 1.35; }


/* Menú de usuario: vistas principal / Configuración (subvista con flecha atrás + swipe) */
.sidebar-user-menu-view { display: flex; flex-direction: column; }
.sidebar-user-menu-chevron { margin-left: auto; opacity: 0.45; font-size: var(--fs-2xl); line-height: 1; }
.sidebar-user-menu-back { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; color: var(--text); font: inherit; font-weight: 600; padding: 10px 12px; cursor: pointer; border-radius: var(--radius-md); }
.sidebar-user-menu-back:hover { background: var(--w04, var(--w04)); }
.sidebar-user-menu-back-arrow { font-size: var(--fs-2xl); line-height: 1; }
.sidebar-user-menu-view-settings.is-entering { animation: userMenuSettingsIn 0.18s ease-out; }
@keyframes userMenuSettingsIn { from { transform: translateX(16px); opacity: 0.3; } to { transform: translateX(0); opacity: 1; } }


/* Mis valoraciones: editar antes de subir + descartar + enlace Qobrix */
.misval-edit-hint { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--muted, #aab0bb); }
.misval-edit { display: block; margin: 0 0 8px; }
.misval-edit > span { display: block; font-size: var(--fs-xs); color: var(--muted, #aab0bb); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 3px; }
.misval-edit input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line, var(--w18)); background: var(--bg-soft, var(--w04)); color: var(--text, #f4f5f7); font-size: var(--fs-md); }
.misval-edit-row { display: flex; gap: 10px; }
.misval-edit-row .misval-edit { flex: 1; }
.misval-discard-btn { background: transparent; border: 1px solid var(--line, var(--w18)); color: var(--muted, #aab0bb); border-radius: var(--radius-sm); width: 30px; height: 30px; cursor: pointer; font-size: var(--fs-md); line-height: 1; flex-shrink: 0; }
.misval-discard-btn:hover { border-color: #ef6b6b; color: #ef6b6b; }
.misval-qobrix-link { color: var(--link); font-weight: 600; text-decoration: none; }
.misval-qobrix-link:hover { text-decoration: underline; }
/* Revisión ortográfica asistida (opt-in): botón + campos corregidos en ámbar con "deshacer" */
.misval-qa-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.misval-qa-head .misval-edit-hint { margin: 0; }
.misval-ortografia-btn { flex-shrink: 0; font-size: var(--fs-xs); padding: 5px 10px; white-space: nowrap; }
.misval-ortografia-btn:disabled { opacity: 0.7; cursor: default; }
.misval-edit.misval-corregido input { border-color: #d99a2b; background: rgba(217, 154, 43, 0.12); }
.misval-corr-chip { display: block; margin-top: 4px; font-size: var(--fs-2xs); color: #d99a2b; line-height: 1.4; }
.misval-corr-chip em { font-style: normal; color: var(--muted, #aab0bb); }
.misval-corr-undo { background: transparent; border: 0; color: var(--link); font: inherit; font-size: var(--fs-2xs); padding: 0; cursor: pointer; text-decoration: underline; }



.misval-qa-edit { display: flex; flex-direction: column; }

/* Botón "Rellenar formulario" en Mis valoraciones */
.misval-toolbar { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* «Contraseña: …» del formulario de valoración junto a «Rellenar formulario» (8-oct-2026). Seleccionable de un toque. */
.misval-codigo { font-size: var(--fs-sm); color: var(--text, #f4f5f7); border: 1px dashed var(--line, var(--w18)); border-radius: var(--radius-sm); padding: 4px 10px; user-select: all; white-space: nowrap; }
/* Tapada por defecto (21-oct-2026): «••••••••» + «Mostrar» + «Copiar». Ya no se selecciona entera de un toque
   (seleccionaría los puntos); para llevársela está «Copiar». */
.misval-codigo.misval-codigo-tapado { user-select: none; display: inline-flex; align-items: center; gap: 8px; }
.misval-codigo-tapado .misval-codigo-tx { font-variant-numeric: tabular-nums; }
.misval-codigo-btn { font: inherit; font-size: var(--fs-xs, 0.8rem); background: none; border: 0; padding: 0 2px; color: var(--accent, #2f5bd3); text-decoration: underline; cursor: pointer; }
.misval-codigo-btn:focus-visible { outline: 2px solid var(--accent, #2f5bd3); outline-offset: 2px; }
/* OJO: .misval-fill-btn NO es CSS muerto — lo usan 3 enlaces del ADMIN (admin.php carga
   styles.css antes que admin.css). Solo la variante compacta; la grande era redundante
   con .btn.primary y se borró. (16-ago) */
.misval-fill-btn { padding: 5px 12px; font-size: var(--fs-xs); font-weight: 600; border-radius: var(--radius-sm); }


/* Fix layout Mis valoraciones: que la lista vaya justo bajo la búsqueda (no pegada al fondo) */
/* Mis valoraciones comparte la clase .agenda-dialog, que es un grid de 5 filas fijas
   (auto auto auto auto 1fr) pensado para la agenda. Valoraciones solo llena 4, así que
   la quinta se estiraba y dejaba ~550px de blanco muerto. Con flex + height:auto la
   ventana mide lo que mide su contenido. La AGENDA no se toca: sigue con su grid. (16-ago) */
#misval-dialog.agenda-dialog {
  display: flex !important;   /* blindado por id: los !important de .agenda-dialog no lo pisan */
  flex-direction: column;
  gap: 10px; /* el espaciado lo pone el contenedor; los hijos van con margin 0 (16-ago) */
  height: auto !important;
  max-height: min(820px, calc(100dvh - 56px));
  grid-template-rows: none !important;
}
.misval-dialog .misval-intro, .misval-dialog .misval-toolbar, .misval-dialog .misval-search { flex: 0 0 auto; }
.misval-dialog .misval-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Botón "Rellenar formulario" más fino y pequeño */

/* Pestañas Qobrix: Oportunidades/Propiedades a partes iguales, Contactos solo icono (compacto) */
.contacts-tab-icon { flex: 0 0 auto !important; padding: 8px 14px !important; display: inline-flex; align-items: center; justify-content: center; }
.contacts-tab-icon-glyph { font-size: var(--fs-xl); line-height: 1; }

/* Sección de datos comerciales en el modal de subir */
.misval-com { border: 1px solid var(--line, var(--w18)); border-radius: var(--radius-md); padding: 12px; margin: 4px 0 14px; }
.misval-com .misval-edit-hint { margin-top: 0; color: var(--text, #f4f5f7); font-weight: 600; }
.com-hide { display: none; }
.misval-edit select { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line, var(--w18)); background: var(--bg-soft, var(--w04)); color: var(--text, #f4f5f7); font-size: var(--fs-md); }

.misval-fin-calc { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text, #f4f5f7); }

/* Oportunidades: la búsqueda ocupa su fila; filtros + favorito + orden van juntos en una sola línea */
#contacts-dialog.contacts-qbx .contacts-searchbar { flex: 1 1 100%; }
/* Era flex:1 1 100%: la fila de controles acaparaba la línea entera y "Añadir" se caía
   solo a una segunda línea dejando medio actionbar vacío. Con auto comparten línea y
   el margin-left:auto de .contacts-sort empuja el orden a la derecha. (16-ago) */
#contacts-dialog.contacts-qbx .contacts-controls-row { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; flex-wrap: nowrap; }
#contacts-dialog.contacts-qbx .contacts-controls-row .contacts-filters-toggle { margin: 0; flex: 0 0 auto; }
#contacts-dialog.contacts-qbx .contacts-controls-row .contacts-fav-filter { flex: 0 0 auto; }
#contacts-dialog.contacts-qbx .contacts-controls-row .contacts-sort { margin-left: auto; min-width: 0; }
/* «Míos / Mi equipo» (28-sep-2026, solo el responsable de un equipo): pegado a la estrella, a la izquierda;
   el orden sigue a la derecha. Mismo control que el orden. */
#contacts-dialog.contacts-qbx .contacts-controls-row #contacts-vista { margin-left: 0; flex: 0 0 auto; }

/* Fin de contrato editable en la ficha del local (pestaña Propiedades) */
.fd-contract { border: 1px solid var(--line, var(--w16)); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 8px; }
.fd-contract .fd-ct-firma, .fd-contract .fd-ct-dur { padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line, var(--w18)); background: var(--bg-soft, var(--w04)); color: var(--text, #f4f5f7); font-size: var(--fs-sm); }
.fd-contract .fd-ct-save { margin-top: 10px; }

/* Empresa y socios del negocio, dentro de «Propietario del negocio». Mismo marco que el bloque de
   contrato de al lado: no es un componente nuevo, es la misma caja con otra lista dentro. */
.fd-partes { border: 1px solid var(--line, var(--w16)); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.fd-partes input, .fd-partes select { padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line, var(--w18)); background: var(--bg-soft, var(--w04)); color: var(--text, #f4f5f7); font: inherit; font-size: var(--fs-sm); min-width: 0; }
/* Empresa y CIF a todo el ancho: si no, quedan a media caja y desalineados con las filas de personas. */
.fd-partes > .fd-field .fd-field-v { display: block; }
.fd-partes > .fd-field input { width: 100%; }
.fd-pt-personas { display: flex; flex-direction: column; gap: 8px; }
/* Nombre, DNI, rol y la X en una fila; en móvil el nombre ocupa toda la línea y el resto se reparte. */
/* Nombre, DNI, rol y la X arriba; el domicilio en su propia línea, que es largo. */
.fd-pt-fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: center; }
.fd-pt-fila .fd-pt-dom { grid-column: 1 / -1; }
/* El correo, en su propia linea igual que el domicilio: en la rejilla de 4 columnas
   caeria en un hueco estrecho y descuadrado (fase 1, 1-sep-2026). */
.fd-pt-fila .fd-pt-email { grid-column: 1 / -1; }
.fd-pt-del { padding: 4px 9px; line-height: 1.2; }
@media (max-width: 560px) {
  .fd-pt-fila { grid-template-columns: 1fr 1fr auto; }
  .fd-pt-fila .fd-pt-nombre { grid-column: 1 / -1; }
  /* En móvil cada persona ocupa dos líneas: sin una raya entre ellas se leen como una lista suelta
     de campos y no se sabe qué DNI es de quién. */
  .fd-pt-fila + .fd-pt-fila { border-top: 1px solid var(--line, var(--w12)); padding-top: 8px; }
}

/* Propiedades: barra de filtros + orden */
.prop-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.prop-filter { background: var(--w04, var(--w04)); border: 1px solid var(--w12, var(--w12)); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text); font: inherit; font-size: var(--fs-sm); max-width: 100%; }

/* Propiedades: vincular vendedor desde la ficha */
.prop-link-vend { margin-top: 8px; }
.plv-row { display: flex; gap: 8px; }
.plv-q { flex: 1; min-width: 0; background: var(--w04, var(--w04)); border: 1px solid var(--w12, var(--w12)); border-radius: var(--radius-sm); padding: 7px 10px; color: var(--text); font: inherit; }
.plv-search { background: var(--brand); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 7px 12px; font: inherit; cursor: pointer; white-space: nowrap; }
.plv-results { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.plv-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-md); }
/* .plv-link MIGRADO al sistema (.btn.secondary); delta compacto para las filas de la lista. */
.plv-link { padding: 5px 10px; white-space: nowrap; }

/* Negocios (Propiedades): toggle mostrar/ocultar filtros */
.prop-filters.is-hidden { display: none; }
.prop-filters-toggle { margin: 4px 0 10px; }

/* Negocios: fila de controles (filtros + favorito + orden) y favoritos por fila */
#contacts-dialog.contacts-qbx .prop-controls-row .prop-filter { margin-left: auto; min-width: 0; }
.prop-fav-cell { background: transparent; border: 0; color: var(--muted, #8a93a3); cursor: pointer; font-size: var(--fs-xl); padding: 2px 4px; }
.prop-fav-cell.is-active { color: #f5c518; }
.contacts-fav-filter.is-active, .prop-fav-filter.is-active { color: #f5c518; border-color: #f5c518; }

/* Negocios: alinear el botón de filtros con la estrella y el orden en la misma línea */
#contacts-dialog.contacts-qbx .prop-controls-row .prop-filters-toggle { margin: 0; align-self: center; }
/* La barra de controles de Negocios hereda `flex:1 1 100%` de .contacts-controls-row (pensado para el
   actionbar horizontal). Dentro de .contacts-results (flex column) ese flex-grow la estiraba en vertical
   (~229px) → hueco vacío enorme entre "Añadir" y la tabla (bug 3-jul). Que ocupe solo su altura natural. */
#contacts-dialog.contacts-qbx .prop-controls-row { align-items: center; flex: 0 0 auto; }

/* Captaciones: qué es la pestaña, arriba (25-sep-2026). */
#contacts-dialog.contacts-qbx .caps-intro { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; flex: 0 0 auto; }
#contacts-dialog.contacts-qbx .caps-intro b { color: var(--text); font-weight: 600; }
/* En el móvil la fila no cabía: «Dossier vendedores» se salía por la derecha y «Guion de llamada»
   se partía en 4 líneas. Arriba filtros, estrella y orden; debajo los botones, repartidos. */
@media (max-width: 560px) {
  #contacts-dialog.contacts-qbx .caps-controls-row { flex-wrap: wrap; }
  #contacts-dialog.contacts-qbx .caps-controls-row .prop-filter { flex: 1 1 0; }
  #contacts-dialog.contacts-qbx .caps-controls-row .btn { flex: 1 1 0; min-height: 44px; white-space: nowrap; justify-content: center; }
}

/* Apartado de fotos del modal de valoración (subida a Qobrix) */
.misval-fotos { margin: 12px 0; }
.val-fotos-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.val-fotos-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.val-foto-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line, rgba(0,0,0,0.18)); }
.val-foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.val-foto-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.val-foto-count { font-size: var(--fs-sm); color: var(--text-soft, #888); }
.val-fotos-status { font-weight: 600; }

/* Negocios: foto de portada del local en la ficha */
.fd-photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius-md); margin: 4px 0 12px; display: block; cursor: pointer; transition: filter 0.16s ease; }
.fd-photo:hover { filter: brightness(1.06); } /* portada pinchable: abre la galería del local */

/* Listado de documentos requeridos del modal de valoración */
.misval-docs { margin: 12px 0; }
.val-docs-list { display: flex; flex-direction: column; gap: 6px; }
.val-doc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line, rgba(0,0,0,0.12)); }
.val-doc-row.has-file { border-color: var(--brand); }
.val-doc-label { flex: 1 1 auto; font-size: var(--fs-md); }
.val-doc-label em { color: var(--text-soft, #888); font-size: var(--fs-sm); font-style: normal; }
.val-doc-pick { white-space: nowrap; cursor: pointer; }
.val-doc-file { font-size: var(--fs-sm); color: var(--brand); flex-basis: 100%; }

/* Negocios: campos editables propios (clase única para no chocar con .fd-edit de otras pantallas) */
.fd-prop-edit { width: 100%; box-sizing: border-box; background: var(--w04, var(--w04)); border: 1px solid var(--w12, var(--w12)); border-radius: var(--radius-sm); padding: 6px 9px; color: var(--text); font: inherit; }
select.fd-prop-edit { cursor: pointer; }
/* Descripción del local: caja multilínea a lo ancho de toda la rejilla. */
/* La Descripción cortaba la última línea por la mitad: 130px no es múltiplo del interlineado
   y el padding no entraba en la cuenta. Con un alto en líneas (em) la caja siempre termina
   donde termina una línea, y el padding se suma en vez de comerse texto. (16-ago) */
.fd-prop-textarea { min-height: 8.7em; padding-block: 8px; resize: vertical; line-height: 1.45; }
.fd-field:has(> .fd-field-v > .fd-prop-textarea) { grid-column: 1 / -1; }
.fd-negocio-grupo-t { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--link, var(--link)); margin: 12px 0 4px; }
.fd-negocio-grupo:first-child .fd-negocio-grupo-t { margin-top: 2px; }
/* Formato REJILLA (columnas/filas) tipo Qobrix: etiqueta pequeña arriba + valor debajo, en cuadrícula
   responsive. Se usa en la ficha de NEGOCIO (.fd-negocio-grupo) y en la de OPORTUNIDAD (.fd-grid).
   Sigue siendo editable. Cambio de layout general (vale para claro y oscuro; usa tokens). */
.fd-negocio-grupo,
.fd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px 22px;
  margin-top: 10px;
}
.fd-negocio-grupo-t { grid-column: 1 / -1; margin: 18px 0 0; }
.fd-negocio-grupo:first-child .fd-negocio-grupo-t { margin-top: 2px; }
.fd-negocio-grupo .fd-field,
.fd-grid .fd-field { gap: 5px; min-width: 0; }
.fd-negocio-grupo .fd-field-k,
.fd-grid .fd-field-k { font-size: var(--fs-sm); color: var(--muted); }
.fd-negocio-grupo .fd-field-v,
.fd-grid .fd-field-v { font-size: var(--fs-xl); }
/* Casillas EDITABLES marcadas de forma fina: borde sutil de 1px + fondo tenue, para distinguirlas
   del valor de solo lectura sin recargar. Al enfocar, borde de marca. */
.fd-negocio-grupo .fd-prop-edit,
.fd-grid input,
.fd-grid select,
.fd-grid textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--w03);
  border: 1px solid var(--w12);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font: inherit;
  font-size: var(--fs-xl);
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease;
}
.fd-negocio-grupo .fd-prop-edit:hover,
.fd-grid input:hover,
.fd-grid select:hover,
.fd-grid textarea:hover { border-color: var(--w18); }
.fd-negocio-grupo .fd-prop-edit:focus,
.fd-grid input:focus,
.fd-grid select:focus,
.fd-grid textarea:focus { background: var(--panel-2); border-color: var(--brand); outline: none; }
/* Solo lectura (Zona, Total, Alquiler…): misma altura y padding que una casilla editable
   pero sin marco de entrada, para que toda la fila quede alineada y se distinga qué se
   toca y qué no. Vale para la ficha del local y la de oportunidad (misma rejilla). (16-ago) */
.fd-negocio-grupo .fd-field-v:not(:has(input, select, textarea)),
.fd-grid .fd-field-v:not(:has(input, select, textarea)) {
  padding: 6px 9px 6px 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xl);
}
/* Móvil: UNA columna a ancho completo. Con dos de 140px los desplegables cortaban
   el texto ("Bar Restaurante", "Silvia Alfonso"…); en vertical se leen enteros. (16-ago) */
@media (max-width: 560px) {
  .fd-negocio-grupo,
  .fd-grid { grid-template-columns: 1fr; gap: 12px 16px; }
  /* Paso 3 (19-sep, dibujo docs/diseno/paso2-inicio-y-qobrix.html §Qobrix «Datos del cliente»):
     filas cortas, nombre a la izquierda y valor a la derecha — no la tarjeta apilada (etiqueta
     arriba, valor debajo) que usa el resto de .fd-grid. Solo lleva el modificador
     .fd-grid-filas la sección «Datos del cliente»: «Lo que busca» y la ficha de Negocio, que
     comparten .fd-grid, no cambian. */
  .fd-grid.fd-grid-filas { gap: 0; }
  .fd-grid.fd-grid-filas .fd-field {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--w08);
  }
  .fd-grid.fd-grid-filas .fd-field:last-child { border-bottom: none; }
  .fd-grid.fd-grid-filas .fd-field-k { flex: 0 0 auto; }
  .fd-grid.fd-grid-filas .fd-field-v {
    flex: 1 1 auto; display: flex; justify-content: flex-end; text-align: right; min-width: 0;
  }
  .fd-grid.fd-grid-filas select,
  .fd-grid.fd-grid-filas input { width: auto; max-width: 62%; text-align: right; }
}
.fd-prop-edit:focus { border-color: var(--brand); outline: none; }
.fd-prop-edit-saving { opacity: 0.6; }
/* Guardado/error: antes solo cambiaba 1px de borde con verde/rojo fijos (#2ecc71/#ff6b6b),
   invisibles en claro y mudos para daltónicos. Ahora tokens del tema + anillo + fondo
   tenue: la señal tiene forma además de color. (16-ago) */
.fd-prop-edit-saved { border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); background: rgba(52, 211, 153, 0.14); }
.fd-prop-edit-error { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); background: rgba(248, 113, 113, 0.16); }

/* Negocios: compradores que encajan en la ficha */
.fd-buyers-title { font-size: var(--fs-lg); margin: 10px 0 8px; }
.fd-buyer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--w08, var(--w06)); }
.fd-buyer-info { display: flex; flex-direction: column; min-width: 0; }
.fd-buyer-meta { font-size: var(--fs-sm); color: var(--muted, #8a93a3); }
.fd-buyer-offer { flex: 0 0 auto; }
/* «Compradores que encajan» (2-oct-2026, dibujo https://claude.ai/artifact/52iwJiS4rpto1zYjVcYuqB):
   por qué encaja, si ya se le ofreció y quién lo lleva; filtros arriba; los de prueba, escondidos. */
.fdb-cuenta { font-weight: 400; color: var(--muted, #8a93a3); font-size: var(--fs-sm); margin-left: 4px; }
.fdb-local { margin: -4px 0 10px; font-size: var(--fs-sm); color: var(--muted, #8a93a3); }
.fdb-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.fd-buyer .fd-buyer-info { gap: 3px; }
.fdb-encaje { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.fdb-barra { flex: 0 0 64px; height: 5px; border-radius: 3px; background: var(--w08, rgba(127, 127, 127, 0.18)); overflow: hidden; }
.fdb-barra i { display: block; height: 100%; width: 0; background: var(--ok-text); }
.fdb-motivos { display: flex; flex-wrap: wrap; gap: 4px; }
.fdb-motivo { font-size: var(--fs-xs); padding: 1px 7px; border-radius: 6px; background: var(--ok-bg); color: var(--ok-text); }
.fdb-estado.is-ofrecido { color: var(--warn-text); font-weight: 500; }
.fdb-sintel { align-self: flex-start; font-size: var(--fs-xs); padding: 1px 7px; border-radius: 6px; background: var(--danger-bg); color: var(--danger-text); }
.fdb-prueba { font-size: var(--fs-xs); font-weight: 400; padding: 0 6px; border: 1px dashed var(--muted, #8a93a3); border-radius: 6px; color: var(--muted, #8a93a3); }
.fd-buyer.is-prueba { opacity: 0.7; }
.fdb-pie { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted, #8a93a3); }

/* Ofrecer el local por WhatsApp a varios (14-oct-2026, dibujo de m024). Reutiliza .fd-buyer, .pl-filtro y .btn;
   aquí solo lo propio: la casilla a la izquierda, el origen de cada uno y la lista de los que no se pueden. */
.fdw-abrir { margin: 0 0 10px; }
.fdw-encajes { align-items: center; }
.fdw-etiqueta { font-size: var(--fs-sm); color: var(--muted); margin-right: 2px; }
.fdw-cuenta b { color: var(--text); }
.fdw-aviso { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); font-size: var(--fs-sm); }
.fdw-todos { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; }
.fd-buyer.fdw-fila { justify-content: flex-start; align-items: flex-start; cursor: pointer; }
.fdw-fila .fd-buyer-info { flex: 1 1 auto; }
.fdw-check, .fdw-todos input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--whatsapp); }
.fdw-fila .fdw-check { margin-top: 1px; } /* a la altura del nombre, no del centro de la fila */
.fdw-encaje { flex: 0 0 auto; font-size: var(--fs-sm); }
.fdw-origen { font-size: var(--fs-sm); font-weight: 500; }
.fdw-origen.is-pregunto { color: var(--ok-text); }
.fdw-origen.is-encaja { color: var(--warn-text); }
.fdw-sin-marcar { display: block; font-size: var(--fs-sm); color: var(--muted); font-style: italic; } /* por qué sale sin marcar (m032) */
.fdw-fuera-titulo { margin: 14px 0 4px; font-size: var(--fs-sm); font-weight: 650; color: var(--muted); }
.fdw-fuera { margin: 0; padding: 0 0 0 18px; font-size: var(--fs-sm); color: var(--muted); }
.fdw-fuera li { margin: 2px 0; }
.fdw-fuera span { color: var(--text); }
/* Último contacto y últimas notas de cada comprador (fundador, 15-oct-2026, nota a m037). */
.fdw-notas { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.fdw-notas.is-cargando { font-style: italic; }
.fdw-ultimo { display: block; font-weight: 600; color: var(--text); }
.fdw-nota { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.fdw-nota.is-vacia { font-style: italic; }
.fdw-mas { margin-top: 2px; padding: 0; border: 0; background: none; color: var(--link, var(--brand)); font: inherit; font-weight: 600; cursor: pointer; }
.fdw-mas:hover { text-decoration: underline; }
.fdw-fuera-sub { margin: 8px 0 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.fdw-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--w08, var(--w06)); }
.fdw-pie .fdb-pie { margin: 0; flex: 1 1 220px; }
.fdw-tope { color: var(--danger-text); }
.fdb-abrir { color: var(--link, var(--brand)); text-decoration: none; }
@media (hover: hover) { .fdb-abrir:hover { text-decoration: underline; } }
.fdb-asesor { max-width: 100%; min-height: 32px; font: inherit; font-size: var(--fs-sm); padding: 2px 6px; border: 1px solid var(--line, var(--w12)); border-radius: 6px; background: var(--panel, transparent); color: inherit; }
.fdb-ver-pruebas { border: 0; background: none; padding: 0; font: inherit; color: var(--link, var(--brand)); cursor: pointer; text-decoration: underline; }

/* Fase 1 modal: obligatorios, contrato de intermediación, aviso de docs faltantes */
.misval-edit-sub { font-size: var(--fs-sm); color: var(--text-soft, #888); margin: 8px 0 2px; font-weight: 600; }
.val-interm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--brand); margin-bottom: 6px; }
.val-interm-firma { padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line, rgba(0,0,0,0.18)); background: var(--bg-soft, var(--w04)); color: var(--text, inherit); font-size: var(--fs-sm); }
.val-interm-file { font-size: var(--fs-sm); color: var(--brand); flex-basis: 100%; }
.misval-aviso-faltan { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255,180,0,0.12); border: 1px solid rgba(255,180,0,0.4); font-size: var(--fs-md); }
.misval-aviso-faltan p { margin: 2px 0; }

/* Fotos y documentos en la ficha del local (Qobrix vía proxy) */
.fd-media-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fd-media-foto { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line, var(--w15)); display: block; }
.fd-media-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-doc-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.fd-doc-item { color: var(--link); text-decoration: none; font-size: var(--fs-md); }
/* Peso y tipo del documento: está para avisar, no para leerse antes que el nombre. */
.fd-doc-peso { margin-left: 6px; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.fd-media-add { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin-top: 4px; }

/* Notas en la ficha: quién la dejó, en gris pequeño y fino */
.fd-comment-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fd-comment-author { display: block; margin-top: 3px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted, #8a93a3); opacity: 0.85; }
/* Eliminar, solo para admin y supervisores (24-sep-2026). Rojo y discreto: está, pero no llama. */
.fd-comment-borrar {
  margin-left: auto; min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--danger-text); font: inherit; font-size: var(--fs-xs); font-weight: 500; cursor: pointer;
}
.fd-comment-borrar:disabled, .fd-act.is-danger:disabled { opacity: .5; cursor: not-allowed; }
.fd-comment-head { align-items: center; }
.fd-act.is-danger,
#contacts-dialog.contacts-qbx .fd-act.is-danger { background: transparent; border-color: var(--danger-border); color: var(--danger-text); }
.fd-eliminar, .fd-incidencia, .fd-historial { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.fd-eliminar .fd-act, .fd-incidencia .fd-act, .fd-historial .fd-act { min-height: 32px; padding: 0 12px; }
.fd-eliminar-nota, .fd-incidencia-nota, .fd-historial-nota { font-size: var(--fs-xs); color: var(--muted); }
/* Incidencia (7-oct): la caja de escribir ocupa la fila entera y los botones van debajo, a la izquierda. */
.fd-incidencia .fd-note-add.fd-incidencia-form { flex: 1 1 100%; flex-direction: column; align-items: stretch; margin: 0; }
.fd-incidencia-botones { display: flex; flex-wrap: wrap; gap: 8px; }
/* En el local, los apartados ya acaban en su raya: sin otra encima de la incidencia (salían dos seguidas). */
.fl .fd-incidencia { margin-top: 0; border-top: 0; }
/* Historial de cambios (9-oct): va justo encima de la incidencia; la raya es la suya y la incidencia no repite. */
.fd-historial + .fd-incidencia { margin-top: 12px; border-top: 0; padding-top: 0; }
.fl .fd-historial { margin-top: 0; border-top: 0; }
.fhc-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.fhc-item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 4px 14px; padding: 12px 2px; border-bottom: 1px solid var(--w08, var(--w06)); }
.fhc-cuando { display: flex; flex-direction: column; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.fhc-cuando strong { color: var(--text); font-weight: 600; }
.fhc-que { min-width: 0; display: grid; gap: 4px; }
.fhc-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fhc-origen, .fhc-auto { font-size: var(--fs-xs); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; color: var(--muted); }
.fhc-origen.is-tria { color: var(--link); border-color: var(--link); }
.fhc-cas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
.fhc-campo { color: var(--muted); min-width: 8.5rem; }
.fhc-antes { color: var(--muted); text-decoration: line-through; }
.fhc-flecha { color: var(--muted); }
.fhc-pie { font-size: var(--fs-xs); color: var(--muted); margin: 12px 0 0; }
.fhc-ver-auto { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 520px) {
  .fhc-item { grid-template-columns: minmax(0, 1fr); }
  .fhc-cuando { flex-direction: row; gap: 8px; }
  .fhc-campo { min-width: 0; flex: 1 1 100%; }
}
@media (hover: hover) {
  .fd-comment-borrar:hover:not(:disabled), .fd-act.is-danger:hover:not(:disabled) { background: var(--danger-bg); }
}
@media (max-width: 760px) {
  .fd-comment-borrar, .fd-eliminar .fd-act, .fd-incidencia .fd-act { min-height: 44px; }
}

/* Fuente Inter servida LOCAL (CSP-safe). La usan también admin.css y admin.php (que carga este fichero). */
@font-face { font-family: "Inter Var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); }

/* Nombre del cliente EDITABLE con autoguardado (lista de oportunidades + ficha) */
.tn-name-editable { cursor: text; border-radius: var(--radius-sm); padding: 0 3px; outline: none; transition: background .15s, box-shadow .15s; }
.tn-name-editable:hover { background: rgba(95,180,255,.10); box-shadow: inset 0 0 0 1px rgba(95,180,255,.30); }
.tn-name-editable[contenteditable="true"] { background: rgba(95,180,255,.14); box-shadow: inset 0 0 0 1px var(--brand, var(--brand)); }
.tn-name-editable.tn-name-saving { opacity: .55; }
.tn-name-editable.tn-name-saved { box-shadow: inset 0 0 0 1px var(--success, var(--success)); background: rgba(52,211,153,.16); }
.tn-name-editable.tn-name-error { box-shadow: inset 0 0 0 1px var(--danger, var(--danger)); background: rgba(248,113,113,.16); }

/* "(sin nombre)" en gris/itálica (lista + ficha), consistente; al pinchar se vacía para escribir */
.tn-name-empty { color: var(--muted, var(--muted)); font-style: italic; font-weight: 400; }

/* Confirmación "¿lo enviaste?" tras pulsar Ofrecer (ver tnOfertaPintarPop en app.js).
   CENTRADO con fondo difuminado, mismo patrón que .operator-dialog-backdrop: es una decisión que
   hay que tomar, no un aviso de paso. Antes salía abajo pegado al input del chat (fundador 15-jul).
   No se cierra solo: es la ÚNICA vía de registrar el ofrecimiento. */
.tn-offer-ask-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 9, 11, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.tn-offer-ask-backdrop.show { opacity: 1; }

.tn-offer-ask {
  width: min(420px, 100%);
  padding: 26px 24px;
  border-radius: var(--radius-xl);
  background: var(--panel-2, #1d222d);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.22s ease;
}
.tn-offer-ask-backdrop.show .tn-offer-ask { transform: translateY(0) scale(1); }

.tn-offer-ask-q {
  margin: 0 0 20px;
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text, #f4f5f7);
  text-align: center;
}
.tn-offer-ask-acts { display: flex; gap: 12px; justify-content: center; }
.tn-offer-ask-acts .btn { flex: 1; max-width: 170px; min-height: 46px; }

/* Filtro "Todos / Sin ofrecer" de la tabla de compradores para un local (ver buildLeadTable en
   app.js). Los ya ofrecidos salen en verde y bloqueados; este filtro los oculta cuando estorban. */
.lead-table-filtros {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.lead-filtro-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.22));
  background: transparent;
  color: var(--text-soft, #aeb4bf);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lead-filtro-chip:hover { background: var(--w06, rgba(255, 255, 255, 0.06)); }
.lead-filtro-chip.is-on {
  background: var(--brand);
  border-color: transparent;
  color: var(--brand-contrast);
}
.lead-filtro-nota {
  font-size: var(--fs-xs);
  color: var(--ok-text, #86efac);
  margin-left: 2px;
}

/* (.qbx-chat-fab retirado el 21-sep-2026: ver app.js, «quitar el flotante del chat».) */

/* Etiqueta de operación en la lista de locales (traspaso / venta / alquiler). Badge SÓLIDO con texto blanco
   para que contraste bien tanto en tema claro como oscuro. */
.prop-op { display: inline-block; padding: 2px 10px; border-radius: var(--radius-md); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; color: #fff; letter-spacing: 0.2px; }
.prop-op-traspaso { background: #2f5aa8; }
.prop-op-venta { background: #c2610c; }
.prop-op-alquiler { background: #1a8f47; }

/* ── Pestaña Captaciones (vendedores en frío) ── reutiliza .data-table/.btn; solo añade la pastilla
   de estado del embudo y la ficha de detalle. Colores desde los tokens de estado (--ok/--warn/--danger). */
.cap-estado { display: inline-block; padding: 2px 10px; border-radius: var(--radius-md); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.cap-tone-idle { background: var(--panel-3); color: var(--muted); border-color: var(--panel-4); }
.cap-tone-warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.cap-tone-info { background: rgba(59, 130, 246, 0.14); color: var(--link); border-color: rgba(59, 130, 246, 0.42); }
.cap-tone-good { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.cap-tone-done { background: rgba(34, 197, 94, 0.28); color: #eafff0; border-color: var(--ok-border); }
.cap-tone-dead { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.cap-tel { color: var(--link); text-decoration: none; white-space: nowrap; }
.cap-call { text-decoration: none; }
.cap-table td { vertical-align: middle; }
/* Captaciones: el nombre se veía "en grande" respecto a las otras pestañas porque usa
   <b class="cqx-name"> (0.92rem + negrita 600) mientras Locales usa un enlace normal (0.85rem).
   Lo igualo a Locales: mismo tamaño/peso + ancho contenido con "…" para que la columna no se
   ensanche y quepan más columnas (se ve compacta como Locales). (fundador 29-jul) */
#contacts-dialog.contacts-qbx .cap-table .cqx-name { font-size: var(--fs-sm); font-weight: 500; max-width: 190px; }

.cap-detail { padding: 4px 2px; }
.cap-d-title { margin: 0 0 2px; font-size: var(--fs-2xl); }
.cap-d-sub, .cap-d-dir { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-sm); }
.cap-d-gmaps { display: inline-block; margin-bottom: 10px; color: var(--link); font-size: var(--fs-sm); }
.cap-d-cruce { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.cap-d-cruce .pill { padding: 5px 10px; font-size: var(--fs-xs); }
/* Contraste de los avisos en tema claro (el texto claro de .confidence-* queda flojo sobre fondo claro). Scoped a este componente. */
/* ═══ TEMA CLARO · pastillas de calidad — 1 SITIO → TODAS LAS PANTALLAS ═══════════
   Estas tres reglas vivían SOLO dentro de `.cap-d-cruce` (la pantalla de captación):
   alguien vio el problema, lo parcheó ahí y no lo subió a la clase común. En el resto
   del sistema (tabla de leads, chat, fichas, modales) las pastillas se pintaban con
   fondo de color pero SIN color de texto propio, así que en claro heredaban el gris
   del tema y no se leían. Al soltarlas del `.cap-d-cruce` cubren todo el sistema y
   las pantallas futuras las heredan solas. (zona `diseno`, 15-ago) */
:root[data-theme="light"] .pill.confidence-alto,
:root[data-theme="light"] .mini-tag.judge-reutilizable { color: #0f6b43; background: rgba(47, 143, 107, 0.16); }
:root[data-theme="light"] .pill.confidence-medio,
:root[data-theme="light"] .mini-tag.judge-revisar { color: #8a5300; background: rgba(201, 151, 54, 0.22); }
:root[data-theme="light"] .pill.confidence-bajo,
:root[data-theme="light"] .pill.confidence-escalar,
:root[data-theme="light"] .mini-tag.judge-no_apta { color: #a11f1f; background: rgba(197, 101, 101, 0.18); }

/* ═══ ESTADO CON FORMA, NO SOLO CON COLOR — 1 SITIO → TODAS LAS PANTALLAS ══════════
   Un punto del color del estado DENTRO de la pastilla. Suena decorativo y no lo es:
   quien no distingue rojo de verde (~8% de los hombres) hoy solo puede leer la
   etiqueta; con el punto hay una segunda señal, y en una captura en blanco y negro
   el estado se sigue entendiendo. Heredado: cualquier pastilla de calidad futura lo
   lleva sin tocar nada. (zona `diseno`, 15-ago) */
.pill.confidence-alto::before,
.pill.confidence-medio::before,
.pill.confidence-bajo::before,
.pill.confidence-escalar::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: baseline;
  flex-shrink: 0;
}
.cap-d-actions { margin: 10px 0; }
.cap-d-call { text-decoration: none; }
.cap-d-notel { color: var(--muted); font-style: italic; }
.cap-d-estado-row, .cap-d-admin { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.cap-d-estado-row label, .cap-d-admin label, .cap-d-notes label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.cap-d-estado, .cap-d-asesor { background: var(--panel-2); color: var(--text); border: 1px solid var(--panel-4); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; }
.cap-d-notes { margin-top: 12px; }
.cap-notas-list { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.cap-nota { background: var(--panel-2); border: 1px solid var(--panel-4); border-radius: var(--radius-sm); padding: 6px 9px; }
.cap-nota-estado { border-left: 3px solid var(--brand); }
.cap-nota-sistema { border-left: 3px solid var(--muted-2); }
.cap-nota-txt { font-size: var(--fs-nota); color: var(--text); white-space: pre-wrap; }
.cap-nota-meta { font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
.cap-nota-empty { color: var(--muted); font-style: italic; font-size: var(--fs-sm); }
.cap-d-nota-input { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--text); border: 1px solid var(--panel-4); border-radius: var(--radius-sm); padding: 8px; margin: 6px 0; resize: vertical; font: inherit; }
/* Captaciones llega por tandas: la columna «#» ya sale con el ancho de cuatro cifras (la lista tiene ~3.900 filas) y no baila al
   sumarse más. content-box: 4ch es el ancho de las cifras SIN el relleno (medido: 80 px, los mismos que con la lista entera). */
.cap-num { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; box-sizing: content-box; min-width: 4ch; }
/* Fase 2: convertir a cliente + agendar re-llamada */
.cap-d-convertido { margin: 12px 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); font-weight: 600; font-size: var(--fs-md); }
.cap-d-convertir, .cap-d-agendar { margin: 12px 0; }
.cap-d-agendar label, .cap-d-convertir label { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.cap-d-conv-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--panel-4); border-radius: var(--radius-sm); background: var(--panel-2); }
.cap-d-conv-nombre { background: var(--panel); color: var(--text); border: 1px solid var(--panel-4); border-radius: var(--radius-sm); padding: 8px; font: inherit; }
.cap-d-conv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cap-d-conv-hint { color: var(--muted); font-size: var(--fs-xs); margin: 2px 0 0; }
.cap-d-opt { color: var(--muted); font-weight: 400; }
.cap-d-proxima { color: var(--ok-text); font-size: var(--fs-sm); margin: 4px 0; }
.cap-d-agendar-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cap-d-ag-cuando { background: var(--panel-2); color: var(--text); border: 1px solid var(--panel-4); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; }
/* Fase 3: panel de métricas */
.cap-metricas { padding: 2px; }
.cap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.cap-stat { background: var(--panel-2); border: 1px solid var(--panel-4); border-radius: var(--radius-md); padding: 12px; text-align: center; }
.cap-stat-n { font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.cap-stat-l { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.cap-stat-good { border-color: var(--ok-border); }
.cap-stat-good .cap-stat-n { color: var(--ok-text); }
.cap-stat-idle .cap-stat-n { color: var(--muted); }
.cap-m-h { margin: 16px 0 6px; font-size: var(--fs-lg); color: var(--text); }
.caps-back-btn { margin-bottom: 8px; }
/* Estado editable por fila en el listado + asesor en una línea */
.cap-estado-select { background: var(--panel-2); color: var(--text); border: 1px solid var(--panel-4); border-radius: var(--radius-sm); padding: 4px 6px; font: inherit; font-size: var(--fs-sm); font-weight: 600; max-width: 150px; cursor: pointer; }
.cap-estado-select.cap-tone-idle { color: var(--muted); }
.cap-estado-select.cap-tone-warn { color: var(--warn-text); border-color: var(--warn-border); }
.cap-estado-select.cap-tone-info { color: var(--link); border-color: rgba(59, 130, 246, 0.42); }
.cap-estado-select.cap-tone-good { color: var(--ok-text); border-color: var(--ok-border); }
.cap-estado-select.cap-tone-done { color: var(--ok-text); border-color: var(--ok-border); }
.cap-estado-select.cap-tone-dead { color: var(--danger-text); border-color: var(--danger-border); }
.cap-asesor { white-space: nowrap; }
/* Datos del titular en la ficha (nombre del dueño + correo) */
.cap-d-contacto { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.cap-d-contacto label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.cap-d-dueno, .cap-d-movil, .cap-d-email { background: var(--panel-2); color: var(--text); border: 1px solid var(--panel-4); border-radius: var(--radius-sm); padding: 8px; font: inherit; box-sizing: border-box; width: 100%; }
/* Indicador sutil de auto-guardado (sin botón): "Guardado ✓" / avisos, aparece y se desvanece. */
.cap-d-saved { font-size: var(--fs-xs); font-weight: 600; margin-left: 8px; opacity: 0; transition: opacity 0.2s ease; }
.cap-d-saved.show { opacity: 1; }
.cap-d-saved.ok { color: var(--whatsapp); }
.cap-d-saved.warn { color: var(--warning, #e0a642); }
.cap-d-wa { text-decoration: none; }

/* Vista Wesign (entrada del menú tras Qobrix): el diálogo de la agenda muestra SOLO el dashboard
   de firmas — el resto de secciones se oculta y la lista de contratos scrollea sola. */
#wesign-dialog.agenda-dialog { display: grid !important; overflow: hidden !important; grid-template-rows: auto minmax(0, 1fr) !important; }
/* ═══ WESIGN (dibujo aprobado, «sí a las tres» — 3-oct-2026; docs/diseno/wesign-dibujo-3oct.html) ═══════════════
   1) En el ordenador, una TABLA (contrato · cliente · local · firmas · estado · actualizado), filas de 40 px;
   2) al pinchar un contrato, su FICHA a la derecha (360 px); en el móvil, a pantalla entera con «← Contratos»;
   3) los descartados fuera de «Todos», con su pastilla. Pastillas de filtro = las de la Agenda (`.agenda-chip`),
   pastillas de estado = las del Correo (`.mail-estado`), iconos Phosphor y círculos con iniciales (`.avatar`). */
#wesign-dialog .agenda-cabecera h2 { font-size: 1.06rem !important; font-weight: 600 !important; }
.wesign-sub { margin-left: 12px; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
#wesign-dialog .agenda-cabecera .close-button { width: 32px; height: 32px; min-width: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); }
#wesign-dialog .agenda-cabecera .close-button::before,
#wesign-dialog .agenda-cabecera .close-button::after { width: 15px; }
#wesign-dialog .agenda-my-contracts {
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  margin: 0 !important; padding: 0; min-height: 0 !important; overflow: hidden !important;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
}
.agenda-my-contracts-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.agenda-my-contracts-filters .wesign-vistas { flex: 1 1 auto; min-width: 0; margin: 0; }
.wesign-asesor { height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.agenda-my-contracts-list { min-height: 0; }
.agenda-my-contracts-empty { margin: 0; padding: 24px 16px; color: var(--muted); font-size: var(--fs-sm); text-align: center; }

.wesign-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; height: 100%; min-height: 0; }
.wesign-tabla-caja { overflow: auto; min-width: 0; }
.wesign-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-sm); }
.wesign-tabla th:nth-child(1) { width: 29%; }
.wesign-tabla th:nth-child(2) { width: 21%; }
.wesign-tabla th:nth-child(3) { width: 12%; }
.wesign-tabla th:nth-child(4) { width: 14%; }
.wesign-tabla th:nth-child(5) { width: 14%; }
.wesign-tabla th:nth-child(6) { width: 10%; }
/* Admin (3-oct-2026): una columna más, «Asesor» (con qué asesor está relacionado cada sobre; «Admin» si con ninguno). */
.wesign-tabla.con-asesor th:nth-child(1) { width: 22%; }
.wesign-tabla.con-asesor th:nth-child(2) { width: 16%; }
.wesign-tabla.con-asesor th:nth-child(3) { width: 11%; }
.wesign-tabla.con-asesor th:nth-child(4) { width: 13%; }
.wesign-tabla.con-asesor th:nth-child(5) { width: 14%; } /* «Firmas»: «3 de 4» + los puntos necesitan ~120 px (medido 6-oct: con el 11 % salía cortado) */
.wesign-tabla.con-asesor th:nth-child(6) { width: 14%; }
.wesign-tabla.con-asesor th:nth-child(7) { width: 10%; }
.wesign-tabla th { position: sticky; top: 0; z-index: 1; height: 32px; padding: 0 10px; background: var(--panel); border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); white-space: nowrap; }
.wesign-tabla td { height: 40px; padding: 0 10px; border-bottom: 1px solid var(--line); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wesign-tabla tbody tr { cursor: pointer; }
.wesign-tabla tbody tr:nth-child(even) { background: var(--table-zebra); }
.wesign-tabla tbody tr.on { background: color-mix(in srgb, var(--accion) 9%, var(--panel)); }
.wesign-tabla tbody tr:focus-visible { outline: 2px solid var(--accion); outline-offset: -2px; }
@media (hover: hover) { .wesign-tabla tbody tr:not(.on):hover { background: var(--panel-2); } }
.wesign-tabla td.wesign-c-contrato { color: var(--text); font-weight: 500; }
.wesign-c-fecha { font-variant-numeric: tabular-nums; }
.wesign-solo-movil { display: none; }
.wesign-firmas { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.wesign-puntos { display: inline-flex; gap: 3px; }
.wesign-puntos i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.wesign-puntos i.verde { background: var(--success); }
.wesign-puntos i.ambar { background: var(--warning); }
.wesign-puntos i.rojo { background: var(--danger); }
.wesign-chip.azul { background: color-mix(in srgb, var(--accion) 10%, transparent); color: var(--accion); }
.wesign-chip.rojo { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* La ficha del contrato */
.wesign-ficha { display: flex; flex-direction: column; min-height: 0; overflow: auto; border-left: 1px solid var(--line); }
.wesign-volver-fila { display: none; }
.wesign-ficha-cab { display: grid; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.wesign-ficha-fila { display: flex; align-items: flex-start; gap: 8px; }
.wesign-ficha-tit { margin: 0; font-size: 1.06rem; font-weight: 600; line-height: 1.3; color: var(--text); text-wrap: balance; }
.wesign-hueco { flex: 1; }
.wesign-ficha-meta { display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--muted); }
.wesign-ficha-meta span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wesign-ficha .mail-ico { width: 16px; height: 16px; }
.wesign-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); } /* minmax(0,1fr): sin esto la columna crece hasta lo que mide el desplegable y «Guardar» se salía de la ficha (6-oct) */
.wesign-sec h4 { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.wesign-firmante { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.wesign-quien { display: grid; min-width: 0; line-height: 1.3; }
.wesign-quien b { font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wesign-quien small { font-size: var(--fs-xs); color: var(--muted); }
.wesign-cobro { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text); }
.wesign-nota { font-size: var(--fs-xs); color: var(--muted); }
.wesign-aviso { padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--text); font-size: var(--fs-sm); }
.wesign-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; }
.wesign-acciones .btn, .wesign-volver { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; padding: 0 12px; }
.wesign-reenvio-msg { padding: 0 20px 14px; font-size: var(--fs-xs); color: var(--muted); }
.wesign-reenvio-msg:empty { display: none; }
/* Correos de los firmantes: una fila por firmante, el rol a la izquierda y el correo (o su campo) a la derecha. */
.wesign-correo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 10px; align-items: center; }
.wesign-correo-txt { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); color: var(--text); }
.wesign-correo-input { width: 100%; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.wesign-correo-input:focus-visible { outline: 2px solid var(--accion); outline-offset: 1px; }
.wesign-asignar { display: flex; gap: 8px; align-items: center; }
.wesign-asignar-sel { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.wesign-asignar-btn { flex: none; min-height: 32px; }
.wesign-asignar-sel:focus-visible { outline: 2px solid var(--accion); outline-offset: 1px; }
:root[data-theme="light"] .wesign-ficha .btn.primary { background: var(--accion) !important; }
@media (hover: hover) { :root[data-theme="light"] .wesign-ficha .btn.primary:hover { background: var(--accion-hover) !important; } }

@media (max-width: 768px) {
  #wesign-dialog .agenda-cabecera .close-button { width: 44px; height: 44px; min-width: 44px; border-radius: 999px; background: var(--panel-2); color: var(--text); }
  #wesign-dialog .agenda-my-contracts { border: 0; border-radius: 0; background: transparent; }
  .agenda-my-contracts-filters { padding: 4px 0 8px; }
  /* 24-oct-2026: en una sola fila con el desplazamiento escondido, la última pastilla se cortaba («B…») y no
     se veía que había más. Ahora bajan a una segunda fila, como en la Agenda (19122). */
  .agenda-my-contracts-filters .wesign-vistas { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
  .wesign-asesor { height: 44px; flex: 1 1 100%; font-size: 16px; }
  .wesign-cuerpo { display: block; }
  .wesign-tabla-caja { height: 100%; overflow: auto; }
  .wesign-tabla, .wesign-tabla tbody { display: block; }
  .wesign-tabla thead, .wesign-tabla td.wesign-c-local, .wesign-firmas.vacio { display: none; }
  .wesign-tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); background: transparent !important; }
  .wesign-tabla td { display: block; height: auto; padding: 0; border: 0; }
  .wesign-tabla td.wesign-c-contrato { grid-column: 1 / 3; grid-row: 1; white-space: normal; font-size: var(--fs-md, 0.95rem); line-height: 1.3; }
  .wesign-tabla td.wesign-c-estado { grid-column: 3; grid-row: 1; justify-self: end; }
  .wesign-tabla td.wesign-c-asesor { display: none; }
  .wesign-tabla td.wesign-c-cliente { grid-column: 1; grid-row: 2; }
  .wesign-tabla td.wesign-c-firmas { grid-column: 2; grid-row: 2; }
  .wesign-tabla td.wesign-c-fecha { grid-column: 3; grid-row: 2; justify-self: end; }
  .wesign-solo-movil { display: inline; }
  .wesign-ficha { display: none; }
  #wesign-dialog.wesign-leyendo .wesign-ficha { display: flex; position: absolute; inset: 0; z-index: 5; border: 0; background: var(--panel); padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
  .wesign-volver-fila { display: flex; padding: 6px 8px; border-bottom: 1px solid var(--line); }
  .wesign-volver { height: 44px; min-height: 44px; }
  #wesign-dialog .wesign-volver { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--accion) !important; }
  .wesign-acciones .btn { height: 44px; min-height: 44px; flex: 1; justify-content: center; }
  .wesign-correo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .wesign-correo-input { height: 44px; font-size: 16px; }
  .wesign-asignar-sel { height: 44px; font-size: 16px; }
  .wesign-asignar-btn { min-height: 44px; }
}


/* ═══ TANDA B PREMIUM (16-ago) — reglas heredadas del chat ══════════════════════════
   Añadidas al final a propósito: ganan la cascada sin tocar bloques históricos. */

/* Enlaces en la prosa de las respuestas: heredan el token en TODOS los mensajes,
   presentes y futuros (antes salían con el azul por defecto del navegador). */
.message-body a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.message-body a:hover { color: var(--link-hover); }

/* Listas numeradas del markdown (las pinta renderNonTableBlock desde esta tanda). */
.message-body ol { margin: 8px 0; padding-left: 1.4em; display: grid; gap: 4px; }

/* "Pensando…" se pintaba como respuesta terminada, con píldora de confianza y 👍/👎. */
.loading-message .message-pills, .loading-message .response-feedback { display: none; }

/* Menú de usuario y de adjuntar abrían a saco; su subvista interna ya animaba. */
@keyframes menu-pop-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.sidebar-user-menu:not([hidden]), .composer-tools-menu:not([hidden]) { animation: menu-pop-in 140ms ease-out; }

/* (Aquí había 76 px de hueco a la derecha de la paginación para que no la tapara el botón flotante
   del chat. El flotante se retiró el 21-sep-2026 y el hueco se quedó: descentraba la línea de páginas
   del móvil y empujaba la flecha «›» lejos del borde.) */

/* Cabeceras sticky de las tablas del chat: con border-collapse:collapse el sticky
   muere en Chrome; separate lo revive (patrón ya validado en Oportunidades). */
.lead-table-editable table, table.cmatch-table { border-collapse: separate; border-spacing: 0; }

/* ═══ TANDA E (16-ago) ═══════════════════════════════════════════════════════════ */
/* Botón ocupado (confirmaciones Qobrix y futuros): se ve que está trabajando. */
[aria-busy="true"] { opacity: 0.65; cursor: progress; }
/* Pastilla de chat compartido en el cabecero: no debe desbordar. */
.chat-shared-pill { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ TANDA F (16-ago) ═══════════════════════════════════════════════════════════ */
/* Foco VISIBLE del sistema en todo campo que no traiga el suyo propio: los que ya
   definen outline:none + halo azul conservan el suyo (su regla específica gana).
   Heredable: cualquier campo futuro nace con foco visible. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(var(--brand-rgb), 0.55);
  outline-offset: 1px;
}
/* "Descripción corta (titular web)" vivía encajonada en una celda de ~190px y se
   cortaba a media palabra: pasa a ocupar la fila entera, como la Descripción. */
.fd-field:has(> .fd-field-v > input[data-campo="descripcion_corta"]) { grid-column: 1 / -1; }

/* ═══ TANDA G (16-ago) ═══════════════════════════════════════════════════════════ */
/* El cuerpo de Cuenta/Recuperación es lo único que desliza (ver grid de arriba). */
.account-dialog .account-dialog-body,
.recovery-dialog .account-dialog-body { overflow-y: auto; min-height: 0; padding-right: 4px; }

/* El placeholder largo del buscador se corta con elipsis, no a media palabra. */
#contacts-dialog.contacts-qbx .contacts-searchbar input::placeholder { text-overflow: ellipsis; }

/* En claro, el rótulo del campo y el placeholder eran el MISMO gris: no se veía cuál
   estaba relleno. El rótulo sube a tinta plena; el placeholder queda en muted. */
:root[data-theme="light"] .field > span { color: var(--text); }

/* ── TANDA K (16-ago): UNA sola forma de cerrar en toda la app — la ✕ redonda de Cuenta,
   decisión del fundador (2A). Antes convivían dos componentes para lo mismo: círculo-✕
   en Cuenta y pastilla "Cerrar" en las otras 9 ventanas. El texto "Cerrar" sigue en el
   DOM (lo leen los lectores de pantalla); visualmente lo sustituyen las dos barras.
   El botón ↻ de Oportunidades NO usa esta clase a propósito (opt-out del 29-jul) y no
   se ve afectado. Va al FINAL del archivo para ganar a todas las capas anteriores. */
.close-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--text);
  font-size: 0;
  box-shadow: none;
  cursor: pointer;
}
.close-button::before,
.close-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}
.close-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.close-button:hover { background: var(--panel-3); border-color: var(--brand); color: var(--text); }

/* ── TANDA L (16-ago): "que todo se abra bien y se deslice bien" — transiciones que
   faltaban + remates de tema claro (hallazgos sin verificar del corpus, comprobados). */

/* El fondo oscurecido de los 9 diálogos pegaba un golpe seco al aparecer. Fundido de
   entrada; el cierre sigue instantáneo (el atributo hidden no se puede transicionar). */
@keyframes tn-backdrop-fade-in { from { opacity: 0; } }
.dialog-backdrop:not([hidden]) { animation: tn-backdrop-fade-in 0.18s ease; }

/* Entrada suave común para menús flotantes (usuario, etc.). */
@keyframes tn-menu-pop-in { from { opacity: 0; transform: translateY(4px) scale(0.98); } }

/* El antetítulo del Centro de avisos nacía pegado a la esquina redondeada del panel. */
.notification-center-panel .chat-info-header { padding: 18px 18px 10px; }

/* ── TANDA M (16-ago, cont.): los inputs nativos de fecha/hora de la agenda forzaban
   color-scheme:dark (bien en oscuro); en claro deben renderizar en claro. */
:root[data-theme="light"] .agenda-date-time-dialog input[type="date"],
:root[data-theme="light"] .agenda-date-time-dialog input[type="time"] {
  color-scheme: light;
}

/* ── TANDA P (17-ago): remates funcionales/táctiles heredados ── */
/* (4) Las listas internas con scroll ya no arrastran al contenedor padre al llegar al
   tope. Sitio único donde apuntar futuras listas internas. */
.lead-table-editable .lead-table-scroll,
.fd-prop-add-list,
#contacts-dialog.contacts-qbx .tria-ms-list {
  overscroll-behavior: contain;
}
/* (68) Táctil: el hover se queda "pegado" tras cada toque (no hay ratón que salga).
   Reset de familia para los interactivos compartidos. */
@media (hover: none) {
  .close-button:hover { background: var(--panel-2); border-color: var(--line-strong); }
  .header-icon-button:hover,
  .notification-center-button:hover { background: var(--w04); }
  .btn:hover { filter: none; transform: none; }
  .history-item:not(.active):hover { background: transparent; }
}

/* ═══ UNA flecha de select para toda la app (tanda S, nº15) ═══════════════════
   Convivían 5 sistemas: nativa (ficha local, .field, alta de contacto, firma),
   doble gradiente qbx (filtros Oportunidades), SVG blanco fijo (ficha cliente),
   SVG gris fijo (.data-table.editable) y SVG morado fijo (formulario legal) —
   dos de ellos con el color incrustado, ciegos al tema. Técnica única: el chevron
   de doble linear-gradient que ya funcionaba en los dos temas, con el color en
   --select-arrow para que un área con acento lo cambie en UNA línea. Va al FINAL
   del archivo para ganar a las definiciones históricas dispersas (mismo patrón
   que .close-button, tanda K). Los select futuros: basta con añadir su selector
   aquí (o heredar una de estas clases). */
.field select,
.cn-field select,
.fd-grid select,
select.fd-prop-edit,
.data-table.editable select,
.tria-signature-field select,
select.legal-contract-form-input,
#contacts-dialog.contacts-qbx select.fd-status-auto,
#contacts-dialog.contacts-qbx select.fd-quality-auto,
#contacts-dialog.contacts-qbx select.fd-tipo-auto,
#contacts-dialog.contacts-qbx select.fd-crit,
#contacts-dialog.contacts-qbx select.fd-edit-select,
#contacts-dialog.contacts-qbx .cf-pill .contacts-filter,
#contacts-dialog.contacts-qbx .cf-pill > input,
#contacts-dialog.contacts-qbx .contacts-multi-btn,
#contacts-dialog.contacts-qbx .cqx-estado-select,
#contacts-dialog.contacts-qbx .cqx-advisor-select,
#contacts-dialog.contacts-qbx .contacts-sort,
.correo-depto select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-arrow, var(--muted)) 50%),
    linear-gradient(135deg, var(--select-arrow, var(--muted)) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
/* Área legal: mismo chevron, acento del área (antes un SVG con el morado incrustado). */
.tria-signature-field select,
select.legal-contract-form-input { --select-arrow: var(--legal-accent); }

/* ── Visor de fotos a pantalla completa (galerías .fd-media-foto) ─────────────────────
   Antes cada foto abría suelta en otra pestaña (sin flechas, swipe ni X). Este overlay da
   imagen grande + swipe + flechas + contador + X + Esc. Tokens del sistema; X DENTRO del
   recuadro (esquina sup-der, 44px, sin solapar la foto); anima SOLO transform/opacity. */
.foto-visor-overlay {
  position: fixed; inset: 0; z-index: 10200;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  background: rgba(6, 10, 18, 0.92); /* oscuro para resaltar la foto (no #000 puro) */
  opacity: 0; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.foto-visor-overlay.is-open { opacity: 1; }
.foto-visor-img {
  max-width: 92vw; max-height: 84vh; object-fit: contain;
  border-radius: var(--radius-md); background: #0b0f16;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  transform: scale(0.96); transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.foto-visor-overlay.is-open .foto-visor-img { transform: scale(1); }
.foto-visor-x,
.foto-visor-nav {
  position: absolute; z-index: 2; /* SIEMPRE sobre la foto (el <img> crea stacking context por transform) */
  display: flex; align-items: center; justify-content: center;
  color: #f6f8fc; /* off-white, no #fff puro */
  background: rgba(14, 19, 27, 0.82); /* opaco para contraste garantizado sobre fotos claras */
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); /* despega el botón de fotos claras */
  cursor: pointer; padding: 0;
  transition: background 0.16s ease, transform 0.16s ease;
}
.foto-visor-x {
  top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 24px; line-height: 1; /* glifo mayor, círculo más ajustado: menos gris */
}
.foto-visor-nav {
  top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; /* círculo más ajustado: menos gris alrededor del glifo */
  font-size: 34px; line-height: 1; padding-bottom: 3px; /* glifo grande que llena el círculo */
}
.foto-visor-prev { left: 12px; }
.foto-visor-next { right: 12px; }
.foto-visor-x:hover,
.foto-visor-nav:hover { background: rgba(38, 46, 60, 0.9); }
.foto-visor-x:active { transform: scale(0.94); }
.foto-visor-nav:active { transform: translateY(-50%) scale(0.94); }
.foto-visor-x:focus-visible,
.foto-visor-nav:focus-visible { outline: 2px solid var(--brand, #3b82f6); outline-offset: 2px; }
.foto-visor-overlay.solo-una .foto-visor-nav { display: none; } /* una sola foto: sin flechas */
.foto-visor-count {
  position: absolute; z-index: 2; bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(20, 26, 36, 0.72); color: #f6f8fc;
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.foto-visor-overlay.solo-una .foto-visor-count { display: none; } /* una sola foto: sin contador */
@media (prefers-reduced-motion: reduce) {
  .foto-visor-overlay,
  .foto-visor-img,
  .foto-visor-x,
  .foto-visor-nav { transition: none; }
  .foto-visor-img { transform: none; }
  .foto-visor-overlay.is-open .foto-visor-img { transform: none; }
}

/* ═══ LO QUE UN DEDO NO PUEDE DESCUBRIR (8-sep-2026, auditoría móvil) ═══════════
   `hover: none` = el aparato no tiene ratón. Todo lo que solo se enseñe al pasar
   por encima es, ahí, invisible para siempre.

   ⚠️ Y va también por ANCHO, no solo por `hover`, a propósito: `hover` depende de lo
   que declare el aparato y **no se puede comprobar de forma fiable desde un navegador
   emulado** — probado el 8-sep: con el móvil emulado, la regla no entraba. Una regla
   que no se puede verificar es una regla en la que no se puede confiar. Con las dos
   condiciones, en un teléfono de verdad entra seguro, y aquí se puede medir. */
@media (hover: none), (max-width: 768px) {
  /* Los tres puntos de cada chat: renombrar · fijar · compartir · ver info · borrar.
     🔴 Con `!important` y con el mismo selector largo A PROPÓSITO: el bloque de la
     línea ~8960 los apaga con `opacity: 0 !important` y solo los enciende al pasar el
     ratón, también con `!important`. Sin igualar las dos cosas —peso Y `!important`—
     esta regla se escribe, se lee, parece puesta y no hace absolutamente nada. Es el
     tercer caso hoy del mismo fallo, y por eso se comprueba midiendo, no leyendo. */
  .history-list .history-item-row .history-item-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Y con sitio para el dedo: medían 34 px y el mínimo cómodo son 44. Se agranda la
     ZONA DE TOQUE, no el dibujo, así que se ve igual y se acierta mejor. */
  .history-item-more {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── Y lo mismo para TODO lo que se toca en los bordes ──────────────────────
     De los 19 sitios tocables de la pantalla de inicio, 9 estaban por debajo de
     44 px, y eran justo los que más se usan: «Jarvis» 26 px —el más pequeño de
     todos—, el menú 34, «Backoffice» 34, el «+» del compositor 34, el botón azul
     de ENVIAR 37, Qobrix 38, la campana 38, el altavoz y el micro 40. Las tarjetas
     grandes del centro sí estaban bien; lo pequeño era el borde, que es lo que se
     toca de pie y andando.
     🔑 Por HERENCIA, no botón a botón: se le da el mínimo a la familia y lo que se
     añada mañana lo hereda. Y se agranda la ZONA DE TOQUE con `min-height`, no el
     icono: la pantalla se ve igual y el dedo acierta. */
  #mobile-sidebar-toggle,
  #sidebar-toggle,
  #notification-center-button,
  #contacts-header-button,
  #composer-tools-toggle,
  #reset-session,
  #search-chats-toggle,
  #chat-backoffice-link,
  .header-icon-button,
  /* ⚠️ Los nombres están COMPROBADOS uno a uno contra index.php (8-sep). El primero
     que se escribió aquí —`.composer-action-button`— no existía en el marcado: cero
     apariciones. Una regla sobre una clase inventada no da error, simplemente no
     hace nada, y habría dejado el micro y el enviar igual de pequeños mientras el
     comentario decía que estaban arreglados. */
  .composer-mic-button,
  .composer-tool-button,
  .composer-send-button {
    min-width: 44px; min-height: 44px;
  }
}

/* ── «Marcar todas como leídas» (8-sep-2026) ───────────────────────────────────
   Usa `.btn.secondary`, la familia del sistema de diseño: nada de una clase de
   botón nueva. Aquí solo se coloca. */
.notification-center-acciones {
  display: flex; justify-content: flex-end;
  padding: 0 var(--sp-4, 16px) var(--sp-2, 8px);
}
.notification-center-acciones .btn { min-height: 44px; }


/* ─── Casilla «solo los que nadie ha contactado» (8-sep-2026) ───
   Va DEBAJO de la fila de botones, no dentro del desplegable de filtros: es la que se usa cada
   mañana. Con su texto al lado a propósito — un botón que pone «Nuevos» hay que pulsarlo para
   saber qué hace; esto se entiende leyéndolo. */
.contacts-check-nuevos {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--muted, #9aa3ad);
  cursor: pointer;
  user-select: none;
}
.contacts-check-nuevos input { width: 16px; height: 16px; accent-color: var(--accent, #4f8cff); cursor: pointer; }
.contacts-check-nuevos:hover { color: var(--text, #e7ebf0); }

/* ═══════════════ BARRA DE ABAJO DEL MÓVIL (17-sep-2026) ═══════════════
   Chat · Agenda · Qobrix · Correo · Más. Solo en móvil; en escritorio no existe.
   Los sitios que repetía el menú se esconden aquí (una función, un sitio). */
:root {
  --barra-movil-alto: 58px;
  /* El hueco que se deja debajo de la barra (21-sep-2026, fundador: «tiene mucho aire por debajo»).
     En el iPhone se sumaban nuestro margen y TODO el hueco que reserva el móvil para la rayita de
     inicio (unos 34 px): quedaban unos 42 px vacíos bajo los rótulos. Ahora se descuentan 20 px de
     ese hueco: bajo los rótulos quedan unos 22 px y la rayita (que ocupa los ~13 de abajo del todo)
     sigue sin tapar nada. En Android el hueco es 0 y no cambia nada. Es UNA variable: la usan la barra y todo lo que se sienta encima de ella, para
     que un panel no se quede con una rendija ni se meta debajo. */
  --barra-movil-fondo: max(0px, calc(env(safe-area-inset-bottom, 0px) - 20px));
}

.barra-movil { display: none; }

@media (max-width: 768px) {
  .barra-movil {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10200; /* por encima del correo (10150), el más alto de la casa */
    padding-bottom: var(--barra-movil-fondo);
    background: var(--panel);
    border-top: 1px solid var(--line, var(--w13));
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
  }

  .barra-movil-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px; /* + padding = 58px de alto de toque */
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    padding: 6px 2px 8px;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: var(--fs-3xs, 11px);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.14s ease, transform 0.12s ease;
  }

  /* Phosphor (19-sep): iconos de RELLENO, no de trazo (norma, regla 8). */
  .barra-movil-item svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke: none;
  }

  .barra-movil-item:hover { color: var(--text); }
  .barra-movil-item:active { color: var(--text); transform: translateY(1px); }
  .barra-movil-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; border-radius: 10px; }
  .barra-movil-item[disabled] { opacity: 0.4; pointer-events: none; }
  .barra-movil-item[hidden] { display: none; }
  .barra-movil-item.is-activa { color: var(--brand); }
  .barra-movil-item.is-activa::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--brand);
  }


  /* Una función, UN sitio: lo que ahora vive en la barra se va del menú y de la cabecera.
     🔴 `#mobile-sidebar-toggle` SE QUEDA (17-sep, tarde): es la esquina de arriba a la izquierda y
     el ÚNICO camino a las conversaciones, porque «Más» pasó a ser la cuenta. Esconderlo fue lo que
     obligó a colgar las conversaciones de «Más», que no es lo que el fundador aprobó. */
  body.tiene-barra-movil #contacts-header-button,
  body.tiene-barra-movil #agenda-button,
  body.tiene-barra-movil #contacts-button,
  body.tiene-barra-movil #mail-button,
  body.tiene-barra-movil #wesign-button { display: none !important; }

  /* ── «Más»: el cajón en modo «solo mi cuenta» ──
     No es un panel nuevo: es el lateral de siempre con la parte de conversaciones escondida, así
     que el menú del nombre se ve entero y a pantalla completa. Sin animación propia: hereda el
     deslizamiento del cajón (un sitio que se usa a diario no se adorna). */
  body.solo-menu-usuario .sidebar-topbar,
  body.solo-menu-usuario .sidebar-header,
  body.solo-menu-usuario .sidebar-search-panel,
  body.solo-menu-usuario .sidebar-section-head,
  body.solo-menu-usuario .sidebar-history { display: none !important; }

  /* A pantalla completa: lo que se abre desde abajo no se lee en una columna de 320 px.
     Se toca SOLO el ancho — las alturas del cajón las manda la regla de la barra (abajo). */
  body.solo-menu-usuario .sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    border-right: 0 !important;
  }

  /* El menú del nombre ya no es un desplegable que sale del pie: es la pantalla. */
  body.solo-menu-usuario .sidebar-footer { margin-top: 0 !important; }
  body.solo-menu-usuario .sidebar-user-menu { position: static !important; box-shadow: none !important; }

  /* Sitio para la barra: que no tape ni el escritorio del chat ni los paneles. */
  body.tiene-barra-movil .composer {
    padding-bottom: calc(30px + var(--barra-movil-alto) + var(--barra-movil-fondo)) !important;
  }
  body.tiene-barra-movil .mail-overlay {
    padding-bottom: calc(var(--barra-movil-alto) + var(--barra-movil-fondo)) !important;
  }
}

/* Sitio para la barra en las pantallas que llegaban hasta el borde de abajo.
   Se toca SOLO el `bottom`: estas pantallas ya se estiran con top+bottom (línea 9211
   para los diálogos, 9229 para el lateral), así que subir el suelo basta y el alto se
   recalcula solo. Poner `height` aquí las rompía (el diálogo se iba fuera de pantalla).
   Con ID porque las reglas que mandan ahí también lo llevan. */
@media (max-width: 768px) {
  body.tiene-barra-movil #agenda-dialog.agenda-dialog,
  body.tiene-barra-movil #contacts-dialog.agenda-dialog,
  body.tiene-barra-movil #misval-dialog.agenda-dialog,
  body.tiene-barra-movil #wesign-dialog.agenda-dialog {
    bottom: calc(var(--barra-movil-alto) + var(--barra-movil-fondo)) !important;
    /* 21-sep-2026: el `bottom` de arriba NO se miraba. Otra regla les pone `height: 100dvh` y
       con `top`, `bottom` y `height` a la vez el navegador ignora el `bottom`: medido en
       producción, Qobrix medía 844 px en una pantalla de 844 y sus últimos 58 px quedaban DEBAJO
       de la barra de abajo — justo donde están los botones de página. «Desde el móvil no hay como
       pinchar y abrir siguientes páginas» (fundador). Es la misma trampa que ya se arregló abajo
       para el lateral: se sueltan las alturas y el alto sale de `top` y `bottom`. */
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* El lateral (lo que abre «Más») se estira con `height: 100dvh !important` (línea 9464):
     hay que soltarle las tres alturas o el `bottom` no se mira — está sobrerrestringido. */
  body.tiene-barra-movil .sidebar {
    bottom: calc(var(--barra-movil-alto) + var(--barra-movil-fondo)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

}

/* ═══ «Trabajo de hoy» en forma de LISTA (18-sep, encargo confirmado por el fundador) ════════════
   Lo que vence primero: vencido (rojo) → hoy (naranja) → mañana (ámbar), como mucho 8.
   Las capas de arriba lo escondían en el móvil y lo aplastaban en una fila en el ordenador (era
   un bloque de contadores que no se llamaba desde ningún sitio): este modificador manda sobre
   ellas con más especificidad, sin tocarlas. Colores solo por tokens. */
#agenda-dialog .agenda-workday.agenda-workday--lista {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}
#agenda-dialog .agenda-workday.agenda-workday--lista[hidden] {
  display: none !important;
}
#agenda-dialog .agenda-workday--lista .agenda-workday-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
}
#agenda-dialog .agenda-workday--lista .agenda-workday-head .drawer-eyebrow {
  display: block !important;
  margin: 0 !important;
}
#agenda-dialog .agenda-workday--lista .agenda-workday-head h3 {
  color: var(--text) !important;
  margin: 2px 0 0 !important;
  font-size: var(--fs-md) !important;
  white-space: nowrap !important;
}
.agenda-workday-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, var(--w12));
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
#agenda-dialog .agenda-workday--lista .agenda-workday-head .agenda-workday-count {
  font-size: var(--fs-xs) !important;
  color: var(--muted) !important;
}
#agenda-dialog .agenda-workday--lista .agenda-workday-head .agenda-workday-count.is-overdue { color: var(--danger-text) !important; }
#agenda-dialog .agenda-workday--lista .agenda-workday-head .agenda-workday-count.is-today { color: var(--warn-text) !important; }
#agenda-dialog .agenda-workday--lista .agenda-workday-head .agenda-workday-count.is-tomorrow { color: var(--warning) !important; }
button.agenda-workday-count { cursor: pointer; }
.agenda-workday-count b { color: var(--text); font-variant-numeric: tabular-nums; }
.agenda-workday-count.is-overdue { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
.agenda-workday-count.is-today { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }
.agenda-workday-count.is-tomorrow { border-color: var(--warning); color: var(--warning); }
.agenda-workday-count.is-overdue b,
.agenda-workday-count.is-today b,
.agenda-workday-count.is-tomorrow b { color: inherit; }
.agenda-workday-count.is-zero { opacity: 0.6; background: transparent; }
.agenda-workday-all { min-height: 30px; padding: 4px 12px; font-size: var(--fs-xs); }
.agenda-workday--lista.is-collapsed .agenda-workday-body { display: none; }
.agenda-workday-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.agenda-workday-item {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "when" "title" "who";
  align-content: center;
  gap: 1px;
  padding: 6px 10px;
  border: 1px solid var(--line, var(--w12));
  border-left: 4px solid var(--c, var(--line));
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agenda-workday-item:hover { background: var(--w035); }
.agenda-workday-item:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.agenda-workday-item.is-overdue { --c: var(--danger); }
.agenda-workday-item.is-today { --c: var(--warn-text); }
.agenda-workday-item.is-tomorrow { --c: var(--warning); }
.agenda-workday-when {
  grid-area: when;
  color: var(--c);
  font-size: var(--fs-2xs);
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.agenda-workday-title {
  grid-area: title;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-workday-who {
  grid-area: who;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-workday-empty { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.agenda-card-quality { font-weight: 700; }

@media (max-width: 760px) {
  #agenda-dialog .agenda-workday.agenda-workday--lista {
    padding: 8px !important;
  }
  .agenda-workday-list { grid-template-columns: minmax(0, 1fr); }
}

/* Móvil (18-sep): con «Trabajo de hoy» a la vista, las franjas de alto fijo de la agenda dejaban
   la lista en 0 px y pisada por «Mis contratos». En el móvil la agenda se desplaza ENTERA, como
   una página, y la cabecera con la X se queda arriba. La vista de Wesign conserva su reparto. */
@media (max-width: 760px) {
  #agenda-dialog.agenda-dialog {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    grid-template-rows: none !important;
  }
  #agenda-dialog.agenda-dialog > * {
    flex: 0 0 auto !important;
  }
  #agenda-dialog.agenda-dialog > .chat-info-header {
    position: sticky !important;
    top: -12px !important;
    z-index: 2 !important;
    margin: -12px -12px 0 !important;
    padding: 12px !important;
    background: var(--panel) !important;
  }
  /* El título de cada sección («Vencidos»…) también se queda fijo: justo DEBAJO de la cabecera,
     no encima (medido: la cabecera fija ocupa 53 px del borde de la ventana). */
  #agenda-dialog.agenda-dialog .agenda-section-head {
    top: 53px !important;
    z-index: 1 !important;
  }
  #agenda-dialog.agenda-dialog #agenda-list {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* ═══════════════ «MÁS» DEL MÓVIL, COMO EL DIBUJO (18-sep-2026) ═══════════════
   docs/diseno/movil-mas-perfil-17sep.html. El menú del nombre es el de siempre: esto solo lo VISTE
   cuando está en modo «solo mi cuenta» (body.solo-menu-usuario, lo que abre «Más»). Fuera de ese
   modo nada cambia. Los rótulos, el título y el interruptor los añade vestirMenuCuentaMovil(). */
.menu-cuenta-rotulo,
.menu-cuenta-titulo,
.menu-cuenta-tema-texto,
.menu-cuenta-interruptor { display: none; }

@media (max-width: 768px) {
  /* El fondo gris del dibujo es el «lienzo» de la app (--bg): sobre él se recortan las tarjetas.
     Con `aside` y `!important` porque el cajón lleva su fondo forzado así en la regla móvil. */
  html body.solo-menu-usuario aside.sidebar { background: var(--bg) !important; }
  /* El pie del cajón lleva su propio fondo blanco, más fuerte que una regla normal: sin esto el
     contenido quedaba en un bloque blanco sobre el gris (medido con elementFromPoint, 18-sep). */
  html body.solo-menu-usuario aside.sidebar .sidebar-footer { background: transparent !important; }
  /* El cajón remata abajo con una franja blanca FIJA de 320 px (su `::after`) para tapar el final de
     la lista de conversaciones. En «Más» no hay lista, y a 390 px de ancho se veía como un parche. */
  html body.solo-menu-usuario aside.sidebar::after { display: none !important; }
  body.solo-menu-usuario .sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 16px 18px;
  }
  body.solo-menu-usuario .menu-cuenta-titulo {
    display: block;
    margin: 2px 2px 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
  }

  /* La tarjeta que envuelve ficha + menú deja de ser una caja: la ficha es la tarjeta. */
  body.solo-menu-usuario .sidebar-footer-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  body.solo-menu-usuario #sidebar-user-toggle {
    width: 100%;
    min-height: 66px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }
  body.solo-menu-usuario #sidebar-user-toggle::after {
    content: "›";
    margin-left: auto;
    padding-left: 8px;
    font-size: 24px;
    line-height: 1;
    color: var(--muted);
  }

  /* Fuera la cajita flotante: el menú es la pantalla, a lo ancho. */
  body.solo-menu-usuario .sidebar-user-menu:not([hidden]) {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: none;
  }
  /* Las dos «vistas» (la principal y «Configuración») se enseñan JUNTAS: el dibujo no tiene submenú.
     `display: contents` deja sus botones como filas del mismo menú, y `order` los coloca. */
  body.solo-menu-usuario .sidebar-user-menu-view,
  body.solo-menu-usuario .sidebar-user-menu-view[hidden] { display: contents !important; }

  /* Lo que el dibujo no tiene: la puerta a «Configuración» (su contenido ya está a la vista), su
     flecha de volver, la fila «Perfil» (la ficha de arriba ya lleva ahí), separadores e iconos. */
  body.solo-menu-usuario #settings-button,
  body.solo-menu-usuario #settings-back,
  body.solo-menu-usuario #account-button,
  body.solo-menu-usuario .sidebar-user-menu-divider,
  body.solo-menu-usuario .sidebar-user-menu-icon,
  body.solo-menu-usuario .sidebar-user-menu-chevron,
  body.solo-menu-usuario #theme-toggle-label { display: none !important; }

  body.solo-menu-usuario .menu-cuenta-rotulo {
    display: block;
    margin: 18px 2px 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* Cada fila: a lo ancho, tamaño de dedo, texto a la izquierda y «›» a la derecha. */
  body.solo-menu-usuario .sidebar-user-menu-item {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 0;
    border: 1px solid var(--line);
    border-top-width: 0;
    background: var(--panel);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
  }
  /* Tocada, la fila SIGUE siendo tarjeta. Las reglas del menú flotante le quitan el fondo al estar
     :hover/:focus/:active, y en el móvil el último botón tocado se queda así hasta tocar otra cosa:
     «Modo oscuro», que no te saca de la pantalla, se quedaba como un agujero (medido, 18-sep). Al
     PULSAR, un cambio de tono leve: se nota el dedo sin mover nada de sitio. */
  body.solo-menu-usuario .sidebar-user-menu-item:hover,
  body.solo-menu-usuario .sidebar-user-menu-item:focus,
  body.solo-menu-usuario .sidebar-user-menu-item:focus-visible { background: var(--panel); }
  body.solo-menu-usuario .sidebar-user-menu-item:active { background: var(--panel-2); }
  body.solo-menu-usuario #misval-button::after,
  body.solo-menu-usuario #install-app-menu-button::after,
  body.solo-menu-usuario #notifications-button::after {
    content: "›";
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
  }
  /* La cuenta de valoraciones, discreta como en el dibujo (no una píldora de color). */
  body.solo-menu-usuario #misval-badge {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--muted);
    font-weight: 500;
  }
  body.solo-menu-usuario #logout-button { color: var(--danger); }
  /* «Notificaciones» trae `background: transparent !important` con su ID (para el menú flotante):
     aquí dejaba ver el gris de debajo y la fila salía gris entre dos blancas. Blanca, como todas. */
  html body.solo-menu-usuario .sidebar-user-menu #notifications-button { background: var(--panel) !important; }
  /* «Actualizar» trae un degradado azul propio (y en claro, con !important): en el dibujo es una
     fila como las demás. Se queda su píldora «Nuevo», que es lo que avisa. */
  html body.solo-menu-usuario #update-app-button.has-app-update {
    background: var(--panel) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
  }

  /* El orden del dibujo: Tu trabajo · La app · Ajustes (y «Cerrar sesión» al final de Ajustes). */
  body.solo-menu-usuario .menu-cuenta-rotulo[data-seccion="trabajo"] { order: 1; }
  body.solo-menu-usuario #misval-button { order: 2; }
  body.solo-menu-usuario #wa-tria-button { order: 2; } /* 29-sep: segunda fila de «Tu trabajo» (va detrás de Mis valoraciones en el árbol) */
  body.solo-menu-usuario .menu-cuenta-rotulo[data-seccion="app"] { order: 3; }
  body.solo-menu-usuario #install-app-menu-button { order: 4; }
  body.solo-menu-usuario #update-app-button { order: 5; }
  body.solo-menu-usuario .menu-cuenta-rotulo[data-seccion="ajustes"] { order: 6; }
  body.solo-menu-usuario #theme-toggle-button { order: 7; }
  body.solo-menu-usuario #notifications-button { order: 8; }
  body.solo-menu-usuario #notification-preferences-panel { order: 9; }
  body.solo-menu-usuario #logout-button { order: 10; }

  /* Cada sección, una tarjeta: borde de arriba y esquinas en la PRIMERA fila visible, esquinas de
     abajo en la última. Con :has() porque «Actualizar» solo sale cuando hay versión nueva. */
  /* «Tu trabajo» = dos filas (Mis valoraciones + Hablar con TRIA por WhatsApp): la primera abre la tarjeta y la segunda la cierra. */
  body.solo-menu-usuario #misval-button {
    border-top-width: 1px;
    border-radius: 14px 14px 0 0;
  }
  body.solo-menu-usuario #wa-tria-button {
    border-top-width: 1px;
    border-radius: 0 0 14px 14px;
  }
  body.solo-menu-usuario #install-app-menu-button {
    border-top-width: 1px;
    border-radius: 14px 14px 0 0;
  }
  body.solo-menu-usuario #update-app-button { border-radius: 0 0 14px 14px; }
  body.solo-menu-usuario .sidebar-user-menu:has(#update-app-button[hidden]) #install-app-menu-button {
    border-radius: 14px;
  }
  /* En Ajustes el modo va el primero y siempre está: él abre la tarjeta. */
  body.solo-menu-usuario #theme-toggle-button {
    border-top-width: 1px;
    border-radius: 14px 14px 0 0;
  }
  body.solo-menu-usuario #logout-button { border-radius: 0 0 14px 14px; }

  /* El interruptor del modo: refleja el estado REAL (html[data-theme]). */
  body.solo-menu-usuario .menu-cuenta-tema-texto { display: block; }
  body.solo-menu-usuario .menu-cuenta-interruptor {
    display: block;
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--line-strong);
  }
  body.solo-menu-usuario .menu-cuenta-interruptor::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }
  /* Encendido: la pista en el azul de la casa y el botón claro, como un interruptor de verdad (con
     --accent salía blanco con el botón oscuro: parecía al revés). */
  html[data-theme="dark"] body.solo-menu-usuario .menu-cuenta-interruptor { background: var(--link); }
  html[data-theme="dark"] body.solo-menu-usuario .menu-cuenta-interruptor::after {
    transform: translateX(18px);
    background: var(--text);
  }
}

/* ═══ El pie del panel de conversaciones, SIN tu cuenta en el móvil (18-sep-2026) ═══
   pie-conversaciones-sin-cuenta · Encargo del fundador: tu nombre y tus funciones viven ahora en
   «Más» (barra de abajo), así que al pie de las conversaciones sobraban — era el mismo menú dos
   veces. SOLO en el móvil con barra: en el ordenador no hay «Más» y ese pie es el único camino a tu
   cuenta, así que ahí se queda. Y NO en modo «solo mi cuenta»: ese pie es justo lo que enseña «Más». */
@media (max-width: 768px) {
  body.tiene-barra-movil:not(.solo-menu-usuario) .sidebar-footer { display: none !important; }
}

/* ═══ Paso 6 · el panel de chats (aprobado por el fundador el 22-sep-2026) ═══════════════════
   Dibujo y revisión: docs/diseno/paso6-revision-panel-chats.html. Va AL FINAL a propósito: el
   panel tiene tres capas anteriores que se pisan (la última con !important, hacia la línea 9219)
   y estas reglas tienen que ganarles a todas. Cambiar una capa de arriba no sirve de nada. */

/* «Nuevo chat», la acción que más se usa, en el azul de la casa. */
body:not(.sidebar-collapsed) #reset-session {
  background: var(--accion);
  color: var(--brand-contrast);
  font-weight: 600;
}
/* En claro, dos reglas de arriba lo pintaban en negro sobre el azul: el texto
   (`:root[data-theme="light"] .sidebar-action-label`, con !important) y el icono, que es un SVG
   blanco que el tema claro invierte a oscuro con `filter: invert(1)`. Aquí, blanco los dos. */
body:not(.sidebar-collapsed) #reset-session .sidebar-action-label { color: var(--brand-contrast) !important; }
body:not(.sidebar-collapsed) #reset-session .sidebar-icon { filter: none; opacity: 1; }
@media (hover: hover) {
  body:not(.sidebar-collapsed) #reset-session:hover { background: var(--accion-hover); }
}

/* El buscador siempre abierto (app.js → syncSidebarState): sobra el botón que lo desplegaba.
   Plegado, ese botón SÍ se queda: es la lupa que despliega el panel. */
body:not(.sidebar-collapsed) #search-chats-toggle { display: none; }

/* Actualizar, siempre a la vista: antes solo salía al pasar el ratón y en el móvil no existía. */
.sidebar-section-head .sidebar-icon-button-small {
  opacity: 0.66;
  pointer-events: auto;
  margin-left: auto;
}
.sidebar-section-head .sidebar-history-count {
  padding: 0 7px;
  border-radius: 999px;
  background: var(--w055);
  color: var(--muted);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.sidebar-section-head .sidebar-history-count:empty { display: none; }

/* El «•••» de cada chat, siempre a la vista: es el único camino a compartir, renombrar, fijar y
   borrar, y en una pantalla táctil no hay ratón que lo haga salir. Sin fondo en reposo (con
   uno fijo, cada fila llevaba un cuadro gris); el fondo, solo al pasar el ratón. */
.history-list .history-item-row .history-item-actions {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.history-list .history-item-row .history-item-more { background: transparent !important; }
@media (hover: hover) {
  .history-list .history-item-row .history-item-more:hover { background: var(--w055) !important; }
}


/* El chat abierto: la capa de la línea ~9324 pintaba su título en #ffffff !important sobre un gris
   del 16 %: en claro, blanco sobre casi blanco (medido en producción el 22-sep). Ahora, el azul
   claro del dibujo aprobado y el texto normal, en los dos temas. */
.history-list .history-item-row.active {
  background: var(--info-bg) !important;
}
.history-list .history-item-row.active .history-item-title {
  color: var(--text) !important;
}

/* ═══ Paso 7 · la conversación (aprobado por el fundador el 22-sep-2026) ═══════════════════════
   Dibujo: docs/diseno/paso7-conversacion-chat.html. Al final, como el paso 6, para ganar a las
   capas de arriba. */

/* 1 · La cabecera dice qué chat es. */
.chat-header-titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.chat-header-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}
.chat-header-when {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
}
.chat-header-when:empty { display: none; }
.chat-header-actions { flex: none; }

/* 4 · Los botones de cada respuesta, a tamaño de dedo en el móvil (decisión del 18-sep: 44 px). */
@media (max-width: 768px) {
  .chat-header-when { display: none; } /* en el móvil el sitio es para el título (medido: se quedaba en «Da de…») */
  .response-feedback-button { width: 44px; height: 44px; }
}

/* 3 · Los locales que encajan: una tabla que cabe en el ordenador y tarjetas en el móvil. El mismo
   marcado para los dos (app.js → buildPropertyMatchTable); aquí solo cambia cómo se pinta. */
.data-table.locales-encajan { font-variant-numeric: tabular-nums; }
.data-table.locales-encajan th,
.data-table.locales-encajan td { white-space: nowrap; padding-inline: 8px; }
.data-table.locales-encajan td.loc-local { white-space: normal; min-width: 150px; }
.data-table.locales-encajan .loc-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.data-table.locales-encajan .loc-asesor .lead-phone-trigger { font-size: var(--fs-xs); }
.data-table.locales-encajan td.loc-traspaso,
.data-table.locales-encajan td.loc-alquiler { text-align: right; }
.encaje-pill {
  display: inline-block;
  min-width: 34px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--info-text);
  font-weight: 650;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 640px) {
  .chat-table-wrap:has(.locales-encajan) {
    border: 0;
    background: none;
    max-height: none;
    overflow: visible;
  }
  .data-table.locales-encajan,
  .data-table.locales-encajan tbody { display: block; width: 100%; background: none; }
  .data-table.locales-encajan thead { display: none; }
  .data-table.locales-encajan tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "ref local encaje"
      "zona zona zona"
      "traspaso alquiler alquiler"
      "estado estado ofrecer";
    gap: 4px 10px;
    align-items: center;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--panel) !important; /* sin la cebra de la tabla: cada tarjeta, igual */
  }
  .data-table.locales-encajan td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    white-space: normal;
  }
  .data-table.locales-encajan td.loc-ref { grid-area: ref; font-weight: 650; }
  .data-table.locales-encajan td.loc-local { grid-area: local; min-width: 0; font-weight: 600; }
  .data-table.locales-encajan td.loc-encaje { grid-area: encaje; }
  .data-table.locales-encajan td.loc-zona { grid-area: zona; color: var(--muted); font-size: var(--fs-sm); }
  .data-table.locales-encajan td.loc-traspaso { grid-area: traspaso; text-align: left; }
  .data-table.locales-encajan td.loc-alquiler { grid-area: alquiler; text-align: left; }
  .data-table.locales-encajan td.loc-traspaso::before,
  .data-table.locales-encajan td.loc-alquiler::before {
    content: attr(data-etiqueta) " ";
    color: var(--muted);
    font-size: var(--fs-sm);
  }
  .data-table.locales-encajan td.loc-estado { grid-area: estado; font-size: var(--fs-sm); }
  .data-table.locales-encajan td.loc-ofrecer { grid-area: ofrecer; justify-self: end; }
  .data-table.locales-encajan .lead-ofrecer-btn { min-height: 44px; padding-inline: 16px; }
  .data-table.locales-encajan .loc-sub { font-weight: 400; }
}

/* ═══ Cabecera del chat (fundador, 22-sep-2026) ════════════════════════════════════════════════
   Fuera Jarvis y los «•••». Ordenador: Agenda · Qobrix · Correo · Wesign · campana · Backoffice (admin)
   · tus iniciales. Móvil: campana · Backoffice (admin) · tus iniciales (lo demás está en la barra de
   abajo). Los dibujos de Agenda, Correo y Wesign son los MISMOS de la barra de abajo del móvil. */
/* CRM (fundador, 25-sep-2026: «quita el logo de Qobrix y pon el de personitas»): el mismo icono de
   personas de la barra del móvil, de la familia de los de al lado (agenda, correo). */
.header-icon-crm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z'/%3E%3C/svg%3E"); }
.header-icon-agenda { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E"); }
.header-icon-mail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z'/%3E%3C/svg%3E"); }
.header-icon-wesign { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M232,168H63.86c2.66-5.24,5.33-10.63,8-16.11,15,1.65,32.58-8.78,52.66-31.14,5,13.46,14.45,30.93,30.58,31.25,9.06.18,18.11-5.2,27.42-16.37C189.31,143.75,203.3,152,232,152a8,8,0,0,0,0-16c-30.43,0-39.43-10.45-40-16.11a7.67,7.67,0,0,0-5.46-7.75,8.14,8.14,0,0,0-9.25,3.49c-12.07,18.54-19.38,20.43-21.92,20.37-8.26-.16-16.66-19.52-19.54-33.42a8,8,0,0,0-14.09-3.37C101.54,124.55,88,133.08,79.57,135.29,88.06,116.42,94.4,99.85,98.46,85.9c6.82-23.44,7.32-39.83,1.51-50.1-3-5.38-9.34-11.8-22.06-11.8C61.85,24,49.18,39.18,43.14,65.65c-3.59,15.71-4.18,33.21-1.62,48s7.87,25.55,15.59,31.94c-3.73,7.72-7.53,15.26-11.23,22.41H24a8,8,0,0,0,0,16H37.41c-11.32,21-20.12,35.64-20.26,35.88a8,8,0,1,0,13.71,8.24c.15-.26,11.27-18.79,24.7-44.12H232a8,8,0,0,0,0-16ZM58.74,69.21C62.72,51.74,70.43,40,77.91,40c5.33,0,7.1,1.86,8.13,3.67,3,5.33,6.52,24.19-21.66,86.39C56.12,118.78,53.31,93,58.74,69.21Z'/%3E%3C/svg%3E"); }
.header-icon-backoffice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23f3f5f7'%3E%3Cpath d='M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z'/%3E%3C/svg%3E"); }
.chat-header-atajo { position: relative; }
/* Escritorio (fundador, 2-oct-2026): Agenda, CRM, Correo y Wesign ya están en la cabecera, así que el menú de la
   cuenta no los repite (en el móvil tampoco salen: están en la barra de abajo). Los atajos de la cabecera pulsan
   estos mismos botones, escondidos, y sus avisos tienen globo propio. Y abajo a la izquierda ya no sale tu nombre
   ni tu puesto: era lo único que quedaba de esa tarjeta (sus iniciales se fueron el 22-sep), así que se va el botón
   entero; tu cuenta se abre con tus iniciales de arriba a la derecha. */
@media (min-width: 769px) {
  #agenda-button,
  #contacts-button,
  #mail-button,
  #wesign-button { display: none !important; }
  #sidebar-user-toggle { display: none; }
}
.chat-header-backoffice { text-decoration: none; }

/* Tus iniciales: el mismo círculo del pie, hecho botón. */
.chat-header-avatar {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.chat-header-avatar:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }

/* Abierto desde las iniciales, el menú de la cuenta (el MISMO del pie, no una copia) se pinta
   pegado arriba a la derecha en vez de salir del pie. */
body.menu-cuenta-arriba .sidebar-user-menu {
  position: fixed !important;
  top: 58px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  width: 320px /* 29-sep: «Hablar con TRIA por WhatsApp» cabe en una línea */ !important;
  max-height: calc(100vh - 80px);
  overflow: auto;
  z-index: 10040 !important;
}

@media (max-width: 768px) {
  body.tiene-barra-movil .chat-header-atajo { display: none !important; }
  .chat-header-avatar { width: 44px; height: 44px; flex-basis: 44px; } /* tamaño dedo, decisión del 18-sep */
}

/* 🧾 Recibo «Hecho» encima de la respuesta de TRIA (fundador, 22-sep-2026; dibujo del paso 7:
   docs/diseno/paso7-conversacion-chat.html, clase .recibo). Colores de los tokens de estado. */
.recibo-hecho { border: 1px solid var(--ok-border); background: color-mix(in srgb, var(--ok-bg) 40%, var(--panel)); border-radius: 10px; overflow: hidden; margin: 0 0 12px; }
.recibo-hecho-cab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 600; color: var(--ok-text); border-bottom: 1px solid var(--ok-border); font-size: var(--fs-sm); }
.recibo-hecho ul { list-style: none; margin: 0; padding: 4px 0; }
.recibo-hecho li { display: grid; grid-template-columns: 18px 118px minmax(0, 1fr); gap: 8px; padding: 6px 12px; font-size: var(--fs-sm); align-items: baseline; color: var(--text); }
.recibo-hecho li b { font-weight: 600; }
.recibo-hecho-v { min-width: 0; overflow-wrap: anywhere; }
.recibo-hecho li .recibo-hecho-marca { color: var(--ok-text); font-weight: 700; }
.recibo-hecho-nota { display: block; margin-top: 2px; }
.recibo-hecho li.recibo-hecho-sin_confirmar .recibo-hecho-marca, .recibo-hecho li.recibo-hecho-sin_confirmar .recibo-hecho-nota { color: var(--warn-text); }
.recibo-hecho li.recibo-hecho-fallo .recibo-hecho-marca, .recibo-hecho li.recibo-hecho-fallo .recibo-hecho-nota { color: var(--danger-text); }
.recibo-hecho.recibo-hecho-fallo { border-color: var(--danger-border); background: color-mix(in srgb, var(--danger-bg) 40%, var(--panel)); }
.recibo-hecho.recibo-hecho-fallo .recibo-hecho-cab { color: var(--danger-text); border-bottom-color: var(--danger-border); }
@media (max-width: 768px) {
  .recibo-hecho li { grid-template-columns: 18px minmax(0, 1fr); row-gap: 0; }
  .recibo-hecho li b, .recibo-hecho li .recibo-hecho-v { grid-column: 2; }
}

/* 📅 «Mi agenda» como calendario (fundador, 22-sep-2026; dibujo del paso 8:
   docs/diseno/paso8-mi-agenda-calendario.html). Todo con los tokens de la casa. */
/* En Día/Semana, como en el dibujo: bajo el título solo el selector, los vencidos y el calendario. */
#agenda-dialog.agenda-modo-cal #agenda-workday,
#agenda-dialog.agenda-modo-cal .agenda-tabs-shell,
#agenda-dialog.agenda-modo-cal .agenda-filter-panel { display: none !important; }
.agenda-cal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.agenda-cal-vistas { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.agenda-cal-vistas button { min-height: 32px; padding: 0 14px; border: 0; border-left: 1px solid var(--line-strong); background: var(--panel); color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.agenda-cal-vistas button:first-child { border-left: 0; }
.agenda-cal-vistas button.is-on { background: var(--accion); color: #fff; }
.agenda-cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.agenda-cal-flecha, .agenda-cal-hoy { min-height: 32px; min-width: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.agenda-cal-rango { font-size: var(--fs-md, 15px); padding: 0 4px; white-space: nowrap; }
.agenda-cal-rango::first-letter { text-transform: uppercase; }
.agenda-cal-movil { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--link); white-space: nowrap; }
.agenda-cal-movil.is-ok { color: var(--ok-text); display: inline-flex; align-items: center; gap: 6px; }
.agenda-cal-movil.is-ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.agenda-cal { position: relative; display: grid; gap: 10px; }
/* La FRANJA de lo urgente, encima de Lista · Hoy · Semana (6-oct-2026; sustituye a la banda «N vencidos · Ver», que solo salía en el calendario).
   Colores: los semánticos del sistema (--danger-*, --warn-*), que ya cambian solos con el tema. */
.agenda-franja { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; }
.agenda-franja-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agenda-franja-tit { font-size: var(--fs-sm); color: var(--muted); margin-right: 4px; }
.agenda-franja-nada { font-size: var(--fs-sm); color: var(--muted); }
.agenda-franja-pildora { display: inline-flex; align-items: baseline; gap: 6px; min-height: 28px; padding: 3px 12px; border: 1px solid; border-radius: 999px; font: inherit; font-size: var(--fs-sm); line-height: 1.3; }
.agenda-franja-pildora b { font-size: 15px; font-variant-numeric: tabular-nums; }
.agenda-franja-pildora.is-danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); cursor: pointer; }
.agenda-franja-pildora.is-warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.agenda-franja-pildora.is-info { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }
.agenda-franja-pildora small { font-size: inherit; opacity: .85; }
.agenda-franja-llamar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--fs-sm); color: var(--muted); }
.agenda-franja-llamar b { color: var(--text); font-weight: 600; }
.agenda-franja-llamar span { color: var(--text); }
.agenda-franja-llamar small { color: var(--muted); font-size: inherit; }
.agenda-franja-llamar i { font-style: normal; opacity: .45; }
.agenda-cal-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-sm); color: var(--muted); }
.agenda-cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; background: none !important; border: 0 !important; padding: 0 !important; color: var(--muted) !important; }
.agenda-cal-leyenda span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.agenda-cal-llamar { --c: var(--info-text); background: var(--info-bg); border-color: var(--info-text); }
.agenda-cal-seg { --c: var(--muted); background: var(--panel-2); border-color: var(--muted); }
.agenda-cal-visita { --c: var(--ok-text); background: var(--ok-bg); border-color: var(--ok-text); }
.agenda-cal-plazo { --c: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-text); }
.agenda-cal-cab, .agenda-cal-sinhora { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.agenda-cal-cab button { border: 0; border-left: 1px solid var(--line); background: none; padding: 6px 4px; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; display: grid; justify-items: center; }
.agenda-cal-cab button b { font-size: 17px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda-cal-cab button.is-hoy { color: var(--accion); font-weight: 700; }
.agenda-cal-cab button.is-hoy b { background: var(--accion); color: #fff; border-radius: 50%; width: 30px; height: 30px; line-height: 30px; text-align: center; }
.agenda-cal-sinhora > span { font-size: 11px; color: var(--muted-2, var(--muted)); text-align: right; padding: 8px 6px 0 0; }
.agenda-cal-sinhora > div { border-left: 1px solid var(--line); padding: 3px; display: grid; gap: 2px; align-content: start; min-height: 30px; }
.agenda-cal-rejilla { display: grid; grid-template-columns: 52px repeat(var(--dias, 7), minmax(0, 1fr)); position: relative; }
.agenda-cal-vista-dia .agenda-cal-rejilla,
.agenda-cal-vista-dia .agenda-cal-sinhora { grid-template-columns: 52px minmax(0, 1fr); }
.agenda-cal-horas { position: relative; }
.agenda-cal-horas span { position: absolute; right: 6px; transform: translateY(-7px); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.agenda-cal-horas span:first-child { transform: none; }
.agenda-cal-col { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 44px; }
.agenda-cal.is-movil .agenda-cal-col { background-size: 100% 52px; }
.agenda-cal-col.is-hoy { background-color: color-mix(in srgb, var(--info-bg) 35%, transparent); }
.agenda-cal-ev { display: block; text-align: left; border: 0; border-left: 3px solid var(--c, var(--line-strong)); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12px; line-height: 1.25; color: var(--text); overflow: hidden; cursor: pointer; min-width: 0; width: 100%; }
.agenda-cal-col .agenda-cal-ev { position: absolute; }
.agenda-cal-ev b, .agenda-cal-ev span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-cal-ev b { font-weight: 650; }
.agenda-cal-ev span { color: var(--muted); }
/* Hechas: siguen en el calendario, tachadas y más tenues (fundador, 9-oct-2026). */
.agenda-cal-ev.is-hecha { opacity: .55; }
.agenda-cal-ev.is-hecha b { text-decoration: line-through; font-weight: 500; }
.agenda-cal-iphone { font-style: normal; font-weight: 700; }
.agenda-cal-ev.is-sel { outline: 2px solid var(--accion); outline-offset: 1px; z-index: 3; }
.agenda-cal-ev:focus-visible { outline: 2px solid var(--accion); outline-offset: 1px; }
.agenda-cal-ahora { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); z-index: 4; pointer-events: none; }
.agenda-cal-ahora::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.agenda-cal-tira { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.agenda-cal-tira button { min-height: 56px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 11px; display: grid; justify-items: center; align-content: center; gap: 1px; cursor: pointer; }
.agenda-cal-tira button b { font-size: 16px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda-cal-tira button i { display: flex; gap: 2px; height: 5px; }
.agenda-cal-tira button u { width: 5px; height: 5px; border-radius: 50%; background: var(--info-text); }
.agenda-cal-tira button.is-hoy { color: var(--accion); font-weight: 700; }
.agenda-cal-tira button.is-on { background: var(--accion); color: #fff; }
.agenda-cal-tira button.is-on b { color: #fff; }
.agenda-cal-tira button.is-on u { background: #fff; }
.agenda-cal-semlista section h4 { margin: 10px 0 4px; }
.agenda-cal-semlista section h4 button { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); cursor: pointer; min-height: 32px; }
.agenda-cal-semlista section.is-hoy h4 button { color: var(--accion); }
.agenda-cal-fila { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 44px; }
.agenda-cal-fila time { font-weight: 650; font-variant-numeric: tabular-nums; }
.agenda-cal-nada { margin: 4px 0; color: var(--muted); font-size: var(--fs-sm); }
.agenda-cal-ficha { position: absolute; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 26, 33, .18); padding: 6px; max-height: 70vh; overflow: auto; }
.agenda-cal-ficha .agenda-card { margin: 0; box-shadow: none; }
.agenda-cal-ficha-cerrar { position: sticky; top: 0; float: right; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); color: var(--muted); cursor: pointer; font: inherit; }
@media (hover: hover) {
  .agenda-cal-ev:hover { filter: brightness(.97); }
  .agenda-cal-vistas button:not(.is-on):hover, .agenda-cal-flecha:hover, .agenda-cal-hoy:hover { background: var(--panel-2); }
}
@media (max-width: 768px) {
  .agenda-cal-vistas { flex: 1 1 100%; }
  .agenda-cal-vistas button { flex: 1; min-height: 44px; }
  .agenda-cal-flecha, .agenda-cal-hoy { min-height: 44px; min-width: 44px; }
  .agenda-cal-movil { margin-left: 0; }
  .agenda-franja { padding: 8px 10px; }
  .agenda-franja-pildora.is-danger { min-height: 36px; }
  .agenda-cal-ev { font-size: 13px; padding: 5px 8px; }
  .agenda-cal-rejilla, .agenda-cal-vista-dia .agenda-cal-sinhora { grid-template-columns: 46px minmax(0, 1fr) !important; }
  /* Hoja pegada abajo de la lista (sticky: el diálogo lleva transform y un «fixed» se colocaría mal). */
  .agenda-cal-ficha { position: sticky; left: auto !important; top: auto !important; bottom: 0; width: auto !important; border-radius: 18px 18px 0 0; max-height: 72vh; padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* Como en el dibujo: botones grandes en tres columnas. !important porque .agenda-action-button lleva
     un min-height: 26px !important para toda la app (lo midió el juez, 22-sep). */
  .agenda-cal-ficha .agenda-card-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .agenda-cal-ficha .agenda-action-button { min-height: 44px !important; justify-content: center; }
  .agenda-cal-sinhora .agenda-cal-ev, .agenda-cal-fila .agenda-cal-ev { min-height: 44px; }
  .agenda-cal-ficha-cerrar { width: 44px; height: 44px; }
}

/* 🗓️ Paso 9, tanda 1 (22-sep-2026; dibujo en docs/diseno/paso9-mi-agenda-rehecha.html): una sola
   cabecera (título · buscar · cerrar), debajo Lista/Día/Semana y cuatro filtros que suman el total.
   Lo de antes («Trabajo de hoy», pestañas, fechas) ya no se pinta; se esconde aquí por si una capa
   vieja lo forzara a verse. Las reglas viejas del buscador llevan !important: por eso lo llevan estas. */
#agenda-dialog #agenda-workday[hidden],
#agenda-dialog .agenda-tabs-shell[hidden],
#agenda-dialog .agenda-filter-panel[hidden],
#agenda-dialog > .agenda-toolbar { display: none !important; }
#agenda-dialog .agenda-cabecera, #wesign-dialog .agenda-cabecera { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap; }
#agenda-dialog .agenda-cabecera h2, #wesign-dialog .agenda-cabecera h2 { margin: 0 !important; }
#agenda-dialog .agenda-cabecera .agenda-search { display: block !important; flex: 0 1 300px !important; min-width: 0 !important; width: auto !important; margin: 0 0 0 8px !important; }
#agenda-dialog .agenda-cabecera .agenda-search input { min-height: 32px !important; height: 32px !important; padding: 0 12px !important; border: 1px solid var(--line-strong) !important; border-radius: 8px !important; background: var(--panel) !important; color: var(--text) !important; box-shadow: none !important; font-size: var(--fs-sm) !important; }
#agenda-dialog .agenda-cabecera .agenda-search input::placeholder { color: var(--muted) !important; }
#agenda-dialog .agenda-cabecera .agenda-search input:focus-visible { border-color: var(--accion) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accion) 18%, transparent) !important; }
#agenda-dialog .agenda-cabecera .close-button, #wesign-dialog .agenda-cabecera .close-button { margin-left: auto !important; }
#agenda-dialog.agenda-modo-cal .agenda-cabecera .agenda-search { display: none !important; }


.agenda-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.agenda-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.agenda-chip b { font-weight: 650; font-variant-numeric: tabular-nums; }
.agenda-chip-overdue b { color: var(--danger-text); }
.agenda-chip.is-on { border-color: var(--accion); background: color-mix(in srgb, var(--accion) 10%, var(--panel)); color: var(--accion); }
.agenda-chip-overdue.is-on { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
.agenda-chip:focus-visible, .agenda-tipo:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.agenda-tipo { min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
#agenda-list .agenda-section-head h3::first-letter { text-transform: uppercase; }
#agenda-list .agenda-empty { display: grid; justify-items: start; gap: 10px; }
#agenda-list .agenda-empty p { margin: 0; }
@media (hover: hover) {
  .agenda-chip:not(.is-on):hover { background: var(--panel-2); }
  .agenda-tipo:hover { border-color: var(--line-strong); }
}
@media (max-width: 768px) {
  #agenda-dialog .agenda-cabecera .agenda-search { order: 3; flex: 1 1 100% !important; margin: 0 !important; }
  #agenda-dialog .agenda-cabecera .agenda-search input { min-height: 44px !important; height: 44px !important; font-size: 16px !important; }
  .agenda-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; }
  .agenda-chips::-webkit-scrollbar { display: none; }
  .agenda-chip, .agenda-tipo { min-height: 44px; flex: none; }
  #agenda-list .agenda-cal-movil { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 🗓️ Paso 9 bis (22-sep-2026, tres encargos del fundador): la agenda a pantalla completa en el
   ordenador y en el móvil; sin «Mis contratos» dentro (eso vive en Wesign); y sin las iniciales
   arriba en el móvil, donde el botón de la izquierda ya abre lo mismo. */
#agenda-dialog,
#wesign-dialog {
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}
#agenda-dialog.active, #wesign-dialog.active { transform: none !important; }
/* 🔴 POR ENCIMA DE LA CABECERA DE LA APP (5-oct-2026, Luciano mandó un pantallazo de Wesign en el móvil): estas dos
   ventanas ocupan toda la pantalla pero tenían z-index 90, y la cabecera de la app (campana, abrir panel, avatar)
   vale 10010: se quedaba ENCIMA y sus iconos tapaban la X de cerrar (medido: en el centro de la X había un
   `header-icon`). Mismo nivel que Contactos y Mis valoraciones, que ya cubren la cabecera. */
#agenda-dialog, #wesign-dialog { z-index: 10060 !important; }
/* 🔴 Y sus ventanitas, ENCIMA de ellas (7-oct-2026, el fundador: «Posponer → Elegir fecha… no me abre el
   calendario»). La regla de arriba subió la agenda a 10060 (móvil 10080) y los diálogos del operador seguían
   en 10000 (móvil 10070): «Elegir fecha», el motivo, el estado o la calidad se abrían DETRÁS, sin verse
   (medido en producción: en el centro del diálogo estaba la agenda). Por encima de todo lo de pantalla
   completa, de la barra de abajo (10200) y de la hoja «¿Cómo fue?» (10210): un diálogo es lo primero. */
.operator-dialog-backdrop { z-index: 10220 !important; }
.agenda-chip-total { color: var(--muted); font-weight: 500; }
.agenda-quitar-tipo { min-height: 32px; padding: 0 12px; border: 1px solid var(--accion); border-radius: 999px; background: color-mix(in srgb, var(--accion) 12%, var(--panel)); color: var(--accion); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.agenda-tipo.is-on { border-color: var(--accion); color: var(--accion); }
@media (max-width: 768px) {
  #chat-header-avatar { display: none !important; }
  #agenda-dialog, #wesign-dialog { padding-inline: 14px !important; }
  .agenda-quitar-tipo { min-height: 44px; }
}

/* ➕ «+ Nueva» (22-sep-2026, fundador: «añade a mi agenda la posibilidad de añadir evento
   manualmente»). El formulario se abre dentro de la propia agenda, sin otra ventana encima: mismos
   32 px en el ordenador y 44 en el móvil que el resto de la pantalla. */
#agenda-dialog .agenda-nueva-btn { min-height: 32px; padding: 0 14px; white-space: nowrap; }
.agenda-nueva { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); max-width: 720px; }
.agenda-nueva h3 { margin: 0; font-size: var(--fs-md); font-weight: 650; }
.agenda-nueva-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agenda-nueva-campo { display: grid; gap: 4px; min-width: 0; }
.agenda-nueva-campo > span { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.agenda-nueva-campo input,
.agenda-nueva-campo select,
.agenda-nueva-campo textarea { box-sizing: border-box; width: 100%; height: 32px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.agenda-nueva-campo textarea { height: auto; min-height: 56px; resize: vertical; }
/* «¿De dónde viene?» sin elegir: en gris, que no parezca una respuesta (28-sep). */
#agenda-ficha-origen:has(> option[value=""]:checked) { color: var(--muted); }
#agenda-ficha-origen option { color: var(--text); }
.agenda-nueva-campo input:focus-visible,
.agenda-nueva-campo select:focus-visible,
.agenda-nueva-campo textarea:focus-visible { outline: none; border-color: var(--accion); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accion) 18%, transparent); }
.agenda-nueva-error { margin: 0; color: var(--danger-text); font-size: var(--fs-sm); font-weight: 600; }
/* ⚠️ «Ya existe Llamada el 22 a las 14:00» (28-sep-2026). Va DENTRO del formulario, con los tonos
   de aviso de la casa: la pregunta es sobre lo que se está escribiendo y no merece otra ventana. */
.agenda-nueva-gemela { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--warn-border); border-radius: 10px; background: var(--warn-bg); }
.agenda-nueva-gemela-que { margin: 0; color: var(--warn-text); font-size: var(--fs-sm); font-weight: 600; }
.agenda-nueva-gemela-cual { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.agenda-nueva-gemela-salidas { display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-nueva-gemela-salidas .btn { min-height: 32px; }
/* 🗣️ «Díselo a TRIA» (29-sep-2026): arriba del formulario, en el tono de información de la casa, para
   que se vea que es otra forma de rellenar lo de abajo y no un campo más de la tarea. */
.agenda-nueva-dictado { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: color-mix(in srgb, var(--accion) 6%, var(--panel)); }
.agenda-nueva-dictado-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.agenda-nueva-dictado-pie .btn { min-height: 32px; }
.agenda-nueva-dictado-aviso { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.agenda-nueva-dictado textarea { min-height: 76px; }
.agenda-nueva-pie { display: flex; justify-content: flex-end; gap: 8px; }
.agenda-nueva-pie .btn { min-height: 32px; }
@media (max-width: 768px) {
  #agenda-dialog .agenda-nueva-btn { min-height: 44px; }
  .agenda-nueva-dictado-pie .btn { min-height: 44px; flex: 1 1 100%; }
  .agenda-nueva-fila { grid-template-columns: 1fr; }
  .agenda-nueva-campo input,
  .agenda-nueva-campo select { height: 44px; font-size: 16px; }
  .agenda-nueva-campo textarea { font-size: 16px; }
  .agenda-nueva-pie .btn { min-height: 44px; flex: 1 1 0; }
  .agenda-nueva-gemela-salidas .btn { min-height: 44px; flex: 1 1 0; }
}

/* 🙈 Sin las iniciales en el panel de la izquierda del chat, en el ordenador (fundador, 22-sep-2026:
   «en version de deskop quita la parte de iniciales del panel izquierda del chat»). En el móvil ese
   panel se abre como cajón y ahí se quedan como estaban. */
@media (min-width: 769px) {
  #sidebar-user-avatar,
  #sidebar-user-menu-avatar { display: none !important; }
}

/* 👤 «De:» — de quién son las tareas que veo (solo admin). Fundador, 22-sep-2026: «solo mío, pero
   quiero tener opción de ver del resto del equipo como admin, pudiendo elegir y ver de otros». */
.agenda-de { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.agenda-de > span { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.agenda-de select {
  min-height: 32px;
  max-width: 190px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.agenda-de select:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
@media (max-width: 768px) {
  .agenda-de select { min-height: 44px; max-width: 150px; }
}

/* 📅 «Ir al día» (24-sep-2026, lo tenía la agenda del backoffice): salta a un día concreto. Al lado del «De:». */
.agenda-cal-ir-dia { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.agenda-cal-ir-dia > span { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.agenda-cal-ir-dia input {
  min-height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.agenda-cal-ir-dia input:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
@media (max-width: 768px) {
  .agenda-cal-ir-dia input { min-height: 44px; font-size: 16px; }
}

/* ═══ Paso 9 · tandas 2 y 3 (dibujo aprobado, 22-sep-2026) ═══════════════════════════════════
   Una tarea = UNA línea (40 px en el ordenador, 64 en el móvil); la tarea abierta va al lado, no
   encima; y los vencidos se pueden limpiar en grupo. Antes cada tarea era una tarjeta de 145-308 px
   con siete botones y cabían dos y media en pantalla. */

/* Lista a la izquierda, tarea abierta a la derecha */
.agenda-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.agenda-columnas.tiene-panel { grid-template-columns: minmax(0, 1fr) 400px; }
.agenda-lista { min-width: 0; }
.agenda-panel { position: sticky; top: 4px; min-width: 0; }
@media (max-width: 1100px) {
  .agenda-columnas.tiene-panel { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* La fila de una tarea */
#agenda-list .agenda-fila {
  position: relative;
  display: grid;
  grid-template-columns: auto 74px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 2px 10px 2px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: var(--panel);
  cursor: pointer;
}
#agenda-list .agenda-fila.is-abierta { background: color-mix(in srgb, var(--accion) 8%, var(--panel)); border-left-color: var(--accion); }
#agenda-list .agenda-fila.is-marcada { background: color-mix(in srgb, var(--accion) 5%, var(--panel)); }
#agenda-list .agenda-fila-overdue { border-left-color: var(--danger-border); }
#agenda-list .agenda-fila-today { border-left-color: var(--accion); }
.agenda-fila-marca { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 32px; cursor: pointer; }
.agenda-fila-marca input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accion); }
.agenda-fila-cuando { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
#agenda-list .agenda-fila-overdue .agenda-fila-cuando { color: var(--danger-text); }
.agenda-fila-titulo { min-width: 0; overflow: hidden; color: var(--text); font-size: var(--fs-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.agenda-fila-juntas { color: var(--muted); font-style: normal; font-weight: 500; }
.agenda-fila-quien { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.agenda-fila-avatar {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--line);
  color: var(--text);
  font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: 0.02em;
}
.agenda-fila-quien em { font-style: normal; }
.agenda-fila-tel, .agenda-fila-mas {
  display: inline-grid; place-items: center;
  min-width: 32px; min-height: 32px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: var(--fs-sm); text-decoration: none;
  cursor: pointer;
}
.agenda-fila-menu { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 8px; }
/* Cada cosa en SU columna: sin esto, a una fila sin teléfono o sin nombre (en «Solo mías» ya no se
   repite) se le corría el «⋯» a la izquierda y dejaba de estar alineado con los de las demás. */
.agenda-fila-quien { grid-column: 4; }
.agenda-fila-tel { grid-column: 5; }
.agenda-fila-mas { grid-column: 6; }
@media (hover: hover) {
  #agenda-list .agenda-fila:hover { background: var(--panel-2); }
  .agenda-fila-tel:hover, .agenda-fila-mas:hover { background: var(--panel-2); color: var(--text); }
}
#agenda-list .agenda-fila:focus-within { outline: 2px solid var(--accion); outline-offset: -2px; }

/* La tarea abierta */
.agenda-tarea {
  display: grid; gap: 12px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--panel);
}
.agenda-tarea h3 { margin: 0; color: var(--text); font-size: var(--fs-lg); line-height: 1.2; }
.agenda-tarea .agenda-kicker { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.agenda-tarea-barra { display: none; }
.agenda-tarea-acciones, .agenda-tarea-posponer, .agenda-tarea-enlaces, .agenda-tarea-mas { display: flex; flex-wrap: wrap; gap: 8px; }
/* 🔴 Con !important a propósito: más arriba hay reglas viejas que aplastan TODOS los botones de la
   agenda a 23-24 px en el móvil, y la norma de la casa pide 32 en el ordenador y 44 en el móvil. */
.agenda-tarea .agenda-action-button,
.agenda-fila-menu .agenda-action-button,
.agenda-marcadas .agenda-action-button { min-height: 32px !important; padding: 0 12px !important; font-size: var(--fs-sm) !important; }
.agenda-tarea-acciones .agenda-action-button { padding: 0 14px !important; font-weight: 650; }
/* Posponer viendo la fecha exacta y escribiéndola a mano (propuestas aprobadas el 22-sep-2026).
   El campo es el MISMO de «+ Nueva» (.agenda-nueva-campo): 32 px en el ordenador y 44 en el móvil. */
.agenda-posponer-fecha { margin-left: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.agenda-posponer-escribir { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: end; margin: 4px 0 0; }
.agenda-tarea .agenda-posponer-vista { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.agenda-tarea .agenda-posponer-vista:empty { display: none; }
.agenda-tarea .agenda-posponer-vista.is-error { color: var(--danger-text); font-weight: 600; }
/* Atajos de reprogramación (3-oct-2026): las últimas fechas escritas vuelven como botón y las teclas
   se recuerdan en una línea. Sin movimiento: esto se usa decenas de veces al día. */
.agenda-tarea-posponer .agenda-posponer-reciente { border-style: dashed; }
/* «Hacer seguimiento» y «¿Es X?» (7-oct-2026, dibujo BdHMPBJNd5kuS7Cck8w7Zp): las piezas de Posponer y de
   la nota; lo elegido se marca con el azul de la casa, y la pregunta va en el recuadro de decisión. */
/* Con !important como el «elegido» de «Crear ficha» (.agenda-crear-ficha-tipo .is-on): la regla general de los
   botones de la tarjeta lleva !important y sin él lo elegido no se distinguía (medido el 7-oct en el móvil). */
.agenda-tarea .agenda-action-button.agenda-posponer-opcion[aria-pressed="true"] { border-color: var(--accion) !important; background: var(--info-bg) !important; color: var(--accion) !important; font-weight: 650; }
.agenda-tarea .agenda-action-button.agenda-action-seguir { border: 2px solid var(--accion) !important; color: var(--accion) !important; }
.agenda-seguir { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.agenda-seguir-tit, .agenda-seguir-k, .agenda-seguir-nota, .agenda-seguir-dia, .agenda-seguir .agenda-posponer-vista { flex: 1 1 100%; }
.agenda-seguir-k { margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.agenda-seguir-nota textarea { width: 100%; box-sizing: border-box; }
.agenda-es-quien { display: grid; gap: 8px; padding: 10px 12px; border: 2px solid var(--accion, var(--link)); border-radius: var(--radius-md); background: var(--info-bg); }
.agenda-es-quien p { margin: 0; font-size: var(--fs-sm); color: var(--text); }
/* «Viene de» e historial (7-oct-2026, dibujo EfJpN3XP2QJ6N48MZ6bJuX): la tarea anterior con cómo fue y
   su nota, y las tareas del cliente en una línea de tiempo plegada. Mismos tonos que «¿Es…?». */
.agenda-viene-de { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accion); border-radius: var(--radius-md); background: var(--info-bg); }
.agenda-viene-de-k { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.agenda-viene-de strong { color: var(--text); font-size: var(--fs-sm); line-height: 1.35; }
.agenda-viene-de-como { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); }
.agenda-viene-de-chip { padding: 1px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-text); font-style: normal; font-weight: 700; white-space: nowrap; }
.agenda-viene-de-nota { color: var(--text); font-size: var(--fs-sm); line-height: 1.4; }
.agenda-viene-de-nota b { color: var(--muted); font-weight: 600; }
.agenda-historial-volver { justify-self: start; }
.agenda-historial { border-top: 1px solid var(--line); padding-top: 8px; }
.agenda-historial > summary { display: flex; align-items: center; min-height: 32px; color: var(--accion); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; list-style: none; }
.agenda-historial > summary::-webkit-details-marker { display: none; }
.agenda-historial > summary::after { content: "▾"; margin-left: 6px; }
.agenda-historial[open] > summary::after { content: "▴"; }
.agenda-historial-mas { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-xs); }
.agenda-historial ol { margin: 0; padding: 0; list-style: none; display: grid; }
.agenda-historial li + li { border-top: 1px solid var(--line); }
.agenda-historial-paso {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 8px 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.agenda-historial-paso:disabled { cursor: default; opacity: 1; }
.agenda-historial-paso > i { width: 10px; height: 10px; margin: 5px 0 0 3px; border-radius: 50%; background: var(--line-strong); }
.agenda-historial-paso.is-hecha > i { background: var(--ok-text); }
.agenda-historial-paso.is-esta > i { background: var(--accion); box-shadow: 0 0 0 3px var(--info-bg); }
.agenda-historial-paso span { display: grid; gap: 1px; min-width: 0; }
.agenda-historial-paso strong { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.agenda-historial-paso em { color: var(--muted); font-size: var(--fs-xs); font-style: normal; }
.agenda-historial-paso.is-esta strong { color: var(--accion); }
.agenda-historial-paso:focus-visible, .agenda-historial > summary:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
@media (hover: hover) { .agenda-historial-paso:not(:disabled):hover strong { color: var(--accion); text-decoration: underline; } }
@media (max-width: 768px) { .agenda-historial > summary, .agenda-historial-paso { min-height: 44px; } .agenda-viene-de .agenda-cierre-enlace, .agenda-historial-volver { min-height: 44px; } }
.agenda-tarea .agenda-posponer-teclas { flex: 1 1 100%; margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 760px) { .agenda-tarea .agenda-posponer-teclas { display: none; } }
/* ± 30 min y ± 1 h junto a la hora (fundador, 9-oct-2026, dibujo Rp46qeWhiz97tyM2pgM1Xq): agenda entera. */
.agenda-hora-ajuste { flex: 1 1 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 6px; margin: 2px 0 4px; max-width: 460px; }
.agenda-hora-ajuste:not(:has(.agenda-hora-valor)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agenda-hora-ajuste .agenda-hora-paso { min-width: 0; padding-inline: 4px; white-space: nowrap; font-size: .85rem; justify-content: center; }
.agenda-hora-valor { min-width: 0; text-align: center; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; border: 1px solid var(--line-strong); border-radius: 10px; padding: 6px 10px; color: var(--text); background: var(--panel); }
/* «Hacer seguimiento»: su pie NO es un atajo de teclado, explica mover / crear nueva; también en el móvil (9-oct-2026). */
@media (max-width: 760px) { .agenda-tarea .agenda-posponer-teclas.agenda-seguir-pie { display: block; } }
.agenda-tarea-datos { display: grid; gap: 6px; }
.agenda-tarea-datos div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.agenda-tarea-datos span { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.agenda-tarea-datos strong { color: var(--text); font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.agenda-tarea p { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.45; }

/* Crear la ficha desde la tarea (fase 3 de Mi agenda, 24-sep-2026): el mismo formulario que
   «+ Nueva», dentro de la tarea, sin sombra propia porque ya va dentro de su recuadro. */
.agenda-tarea .agenda-crear-ficha { margin: 0; max-width: none; background: var(--panel-2); }
.agenda-tarea .agenda-crear-ficha-ayuda { color: var(--muted); font-size: var(--fs-xs); }
.agenda-crear-ficha-tipo, .agenda-crear-ficha-botones { display: flex; flex-wrap: wrap; gap: 8px; }
/* !important: los botones de la agenda llevan fondo y color con !important más arriba (y en claro). */
.agenda-crear-ficha-tipo .agenda-action-button.is-on { border-color: var(--accion) !important; background: var(--info-bg) !important; color: var(--accion) !important; font-weight: 650; }
.agenda-crear-ficha-encontrado { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--ok-border); border-radius: 8px; background: var(--ok-bg); color: var(--ok-text); font-size: var(--fs-sm); }
.agenda-crear-ficha-encontrado strong { color: var(--ok-text); }
.agenda-tarea .agenda-crear-ficha-aviso { padding: 8px 10px; border: 1px solid var(--warn-border); border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); }
@media (max-width: 768px) {
  .agenda-tarea .agenda-crear-ficha .agenda-nueva-fila { grid-template-columns: 1fr; }
  .agenda-tarea .agenda-crear-ficha input { height: 44px; }
  /* Las dos opciones, lado a lado y del mismo ancho: se eligen con el pulgar sin bajar. */
  .agenda-crear-ficha-tipo, .agenda-crear-ficha-botones { display: grid; grid-template-columns: 1fr 1fr; }
  .agenda-crear-ficha .agenda-action-button { justify-content: center; }
}

/* Las tareas ya HECHAS (fundador, 24-sep-2026): se pueden mirar, pero no piden nada.
   Se distinguen a simple vista —un visto en vez de la casilla y el texto más apagado— para que
   nadie confunda una lista de repaso con una lista de trabajo. */
.agenda-chip.agenda-chip-hechas { margin-left: auto; }
/* En el móvil la fila de filtros no cabe (614 px en 362) y se desliza de lado: «✓ Hechas» y
   «Tipo» quedaban fuera de la pantalla, así que el apartado que pidió no se encontraba. Aquí
   la fila pasa a dos líneas: se ven todos los filtros sin deslizar. */
@media (max-width: 768px) {
  .agenda-chips { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
}
/* 📏 La primera tarea, a la vista en el móvil (25-sep-2026, brief del coordinador: estaba a 507 px;
   el dibujo del paso 9 la ponía a ~190 con solo Lista/Día/Semana y los filtros encima). Desde
   entonces entraron «De:», «Ir al día», «Hechas» y el tipo, y cada uno se quedó con su fila. Sin
   quitar nada, se juntan dos: «De:» al lado de Lista/Día/Semana (su nombre lo dice la opción,
   «Solo mías»; el lector de pantalla sigue leyendo su etiqueta) y el tipo entre «Más adelante» y
   «Hechas». El desplegable del tipo mide lo que su opción más larga («Revisión de calidad»): con
   «todos» se le pone tope y, con un tipo elegido, recupera su ancho. En un móvil más estrecho
   (360) lo que no cabe baja de línea, como antes. Lo vigila scripts/mirar-agenda-movil.mjs. */
@media (max-width: 768px) {
  #agenda-list .agenda-cal-barra:has(.agenda-de) .agenda-cal-vistas { flex: 0 0 auto; }
  #agenda-list .agenda-cal-barra:has(.agenda-de) .agenda-cal-vistas button { flex: none; padding: 0 14px; }
  #agenda-list .agenda-cal-barra .agenda-de > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #agenda-list .agenda-cal-barra .agenda-de { flex: 1 1 120px; }
  #agenda-list .agenda-cal-barra .agenda-de select { width: 100%; max-width: none; }
  #agenda-list .agenda-chips .agenda-tipo { order: 1; }
  /* 120 y no 128 (6-oct-2026): con 128 «✓ Hechas» bajaba sola a una TERCERA fila en un iPhone de 390 px
     (la fila medía 350 px en 348) y la primera tarea quedaba 50 px más abajo. «Tipo: todos» sigue entero. */
  #agenda-list .agenda-chips .agenda-tipo:not(.is-on) { max-width: 120px; }
  #agenda-list .agenda-chips .agenda-chip-hechas { order: 2; }
  #agenda-list .agenda-chips .agenda-quitar-tipo { order: 3; }
}
/* 📏 Otra vez la primera tarea a la vista (19-oct-2026, brief del 14-oct, «que suba la primera tarea»;
   el tope de 420 no se toca). Volvió a bajar a 573 px: la franja «Lo urgente de hoy» (6-oct) ocupaba
   150 px y cada nombre de «Llama primero a» iba en su línea. Las cuatro filas de botones son todas
   necesarias, así que el sitio sale de otra parte, sin quitar nada:
   · el buscador es una lupa en la fila del título (como en el dibujo 2 aprobado el 19-oct) y se
     abre a lo ancho al tocarlo o mientras tenga algo escrito;
   · la franja va en dos líneas finas: las píldoras en una y «Llama primero a» en otra, que se
     desliza de lado si no cabe (el primer nombre, el más urgente, siempre se ve; la página no se
     desliza). Su título lo sigue leyendo el lector de pantalla; con «Nada urgente ahora mismo» se
     ve, que si no la frase queda sola;
   · menos aire entre bloques: los 6 px de la lista (antes 18).
   Lo vigila scripts/mirar-agenda-movil.mjs (también apunta cuánto ocupa cada bloque). */
@media (max-width: 768px) {
  #agenda-dialog .agenda-cabecera { row-gap: 8px !important; }
  #agenda-dialog .agenda-cabecera .agenda-search { position: relative; }
  #agenda-dialog .agenda-cabecera .agenda-search:has(input:placeholder-shown):not(:focus-within) {
    order: 2; flex: 0 0 44px !important; width: 44px !important; margin-left: auto !important;
  }
  #agenda-dialog .agenda-cabecera .agenda-search:has(input:placeholder-shown):not(:focus-within) input {
    width: 44px !important; padding: 0 !important; color: transparent !important; cursor: pointer;
  }
  #agenda-dialog .agenda-cabecera .agenda-search:has(input:placeholder-shown):not(:focus-within) input::placeholder { color: transparent !important; }
  #agenda-dialog .agenda-cabecera .agenda-search:has(input:placeholder-shown):not(:focus-within)::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; pointer-events: none;
    background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #agenda-dialog .agenda-cabecera .agenda-search:has(input:placeholder-shown):not(:focus-within) ~ .close-button { margin-left: 0 !important; order: 3; }
  /* En rejilla de una columna que puede encoger a 0: si no, la línea de nombres sin partir ensancha
     toda la lista por encima de la pantalla y los filtros y «Ir al día» se van a la derecha (medido). */
  .agenda-franja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 0; padding: 6px 10px; }
  .agenda-franja-fila .agenda-franja-tit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .agenda-franja-fila, .agenda-franja-llamar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .agenda-franja-fila::-webkit-scrollbar, .agenda-franja-llamar::-webkit-scrollbar { display: none; }
  .agenda-franja-fila > *, .agenda-franja-llamar > * { flex: none; }
  /* La lista ya separa sus bloques 6 px (rejilla): con el margen de 12 eran 18 de aire. */
  #agenda-list .agenda-cal-barra, #agenda-list .agenda-chips { margin-bottom: 0; }
}
/* 📏 «Mi agenda» compacta en el móvil (24-oct-2026, (b) aprobado por Javidan). La cabecera había
   crecido y la primera tarea caía a ~780 px, tapada por la barra de abajo. Sin quitar enlaces ni
   funciones, se reparte en menos filas y TODO queda a la vista (nada se desliza de lado):
   · fila 1 (barra de vistas): Lista·Hoy·Semana + «Ir al día» (solo el icono del calendario, 44 px) +
     el estado del calendario (solo el icono, 44 px: verde si está conectado);
   · fila 2 (chips): «De: Solo míos» compacto + Vencidas·Hoy·Mañana·Más adelante·Tipo·Hechas, que
     pasan a dos filas si no caben, como en main.
   «De:» se enseña en la fila de vistas en el ORDENADOR y en el CALENDARIO (como hasta ahora) y en la
   fila de los chips en el MÓVIL en modo lista. En el ordenador no cambia nada. */
@media (max-width: 768px) {
  /* Fila 1: que las vistas NO ocupen el 100% para que «Ir al día» y el estado quepan a su lado. */
  #agenda-list .agenda-cal-barra .agenda-cal-vistas { flex: 0 0 auto; }
  #agenda-list .agenda-cal-barra .agenda-cal-vistas button { flex: none; padding: 0 14px; }
  /* En modo LISTA, «De:» va con los chips (abajo), no en la fila de vistas. */
  #agenda-dialog:not(.agenda-modo-cal) #agenda-list .agenda-cal-barra .agenda-de-barra { display: none; }
  /* «Ir al día» = solo el icono del calendario (44 px). El campo de fecha va invisible y encima: sigue
     abriendo el selector al tocarlo; la etiqueta la leen el lector de pantalla (aria-label) y el title. */
  #agenda-dialog:not(.agenda-modo-cal) #agenda-list .agenda-cal-ir-dia {
    position: relative; width: 44px; min-width: 44px; height: 44px; flex: none;
  }
  #agenda-dialog:not(.agenda-modo-cal) #agenda-list .agenda-cal-ir-dia > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #agenda-dialog:not(.agenda-modo-cal) #agenda-list .agenda-cal-ir-dia::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; pointer-events: none; background: var(--text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48Zm136,160H48V96H208V208Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48Zm136,160H48V96H208V208Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #agenda-dialog:not(.agenda-modo-cal) #agenda-list .agenda-cal-ir-dia input {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  }
  /* Estado del calendario = solo el icono (44 px): verde si está conectado, apagado si no. El texto se
     oculta a la vista pero sigue en aria-label/title y en el DOM (lo lee el lector de pantalla). */
  #agenda-dialog:not(.agenda-modo-cal) #agenda-list .agenda-cal-movil {
    width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  }
  #agenda-dialog:not(.agenda-modo-cal) #agenda-list .agenda-cal-movil.is-ok { color: var(--ok-text); }
  #agenda-dialog:not(.agenda-modo-cal) #agenda-list .agenda-cal-movil .agenda-cal-movil-txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #agenda-dialog:not(.agenda-modo-cal) #agenda-list .agenda-cal-movil::before {
    content: ""; width: 22px; height: 22px; border-radius: 0; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48Zm136,160H48V96H208V208Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48Zm136,160H48V96H208V208Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Fila 2: «De:» compacto al principio de los chips; los chips siguen en dos filas si no caben.
     El hueco entre chips se aprieta un poco para que, con el admin, «Mañana» suba a la fila 1 y los
     chips queden en dos filas (no tres) — así la primera tarea no baja de 450 px. */
  #agenda-list .agenda-chips { column-gap: 4px; padding-inline: 0; }
  #agenda-list .agenda-chips .agenda-de-chips { flex: none; margin: 0; }
  #agenda-list .agenda-chips .agenda-de-chips > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* «Solo mías» cabe entero a 13 px; el resto de opciones se cortan con «…» del propio desplegable. */
  #agenda-list .agenda-chips .agenda-de-chips select { width: auto; max-width: 96px; padding: 0 4px; }
  #agenda-list .agenda-chips .agenda-chip-hechas { margin-left: 0; }
}
/* En el ordenador, «De:» va en la fila de vistas (como hasta ahora); el «De:» de los chips no se ve. */
@media (min-width: 769px) {
  #agenda-list .agenda-chips .agenda-de-chips { display: none; }
}
/* El de «Hechas» va en VERDE (fundador, 24-sep-2026: «marca hechas en verde para que el usuario
   pueda ver bien»), igual que «Vencidas» va en rojo: el color dice de qué va el filtro antes de
   leerlo, y apagado se distingue ya de los cuatro de trabajo. */
.agenda-chip.agenda-chip-hechas { border-color: var(--ok-border); color: var(--ok-text); }
.agenda-chip.agenda-chip-hechas.is-on { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-text); }
@media (hover: hover) {
  .agenda-chip.agenda-chip-hechas:not(.is-on):hover { background: var(--ok-bg); }
}
/* Y su sección, con el mismo verde: así se ve de un vistazo que esa lista no pide nada. */
/* Lleva «!important» porque el tema claro fija el color de TODAS las cabeceras con «!important»
   (línea ~16311) y, sin él, esta se quedaba en negro aunque el selector fuera más concreto. */
#agenda-list .agenda-section-hechas .agenda-section-head,
#agenda-list .agenda-section-hechas .agenda-section-head h3,
#agenda-list .agenda-section-hechas .agenda-section-head span { color: var(--ok-text) !important; }
#agenda-list .agenda-fila.is-hecha .agenda-fila-titulo,
#agenda-list .agenda-fila.is-hecha .agenda-fila-cuando { color: var(--muted); }
.agenda-fila-visto { color: var(--ok-text); font-size: var(--fs-sm); font-style: normal; font-weight: 700; }
/* Una hecha ya no está vencida: la raya roja de la izquierda decía lo contrario. */
#agenda-list .agenda-fila.is-hecha { border-left-color: transparent; }

/* Tu nota y el historial de la tarea (fundador, 24-sep-2026).
   La nota de la persona va ARRIBA y siempre a la vista; los cambios que hace el sistema van
   plegados detrás de una línea, para que no tapen lo que escribió alguien. */
.agenda-nota { display: grid; gap: 8px; }
.agenda-nota-campo { display: grid; gap: 4px; }
.agenda-nota-campo > span { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.agenda-nota-campo textarea {
  width: 100%; min-height: 72px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text);
  font: inherit; font-size: var(--fs-sm); line-height: 1.45; resize: vertical;
}
.agenda-nota-campo textarea:focus-visible { outline: 2px solid var(--accion); outline-offset: 1px; border-color: var(--accion); }
.agenda-nota-pie { display: flex; justify-content: flex-end; }
.agenda-nota-pie .agenda-action-button { min-height: 32px !important; height: auto !important; }

.agenda-cambios { display: grid; gap: 6px; }
.agenda-cambios-mas {
  justify-self: start;
  min-height: 32px !important; height: auto !important; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .agenda-cambios-mas:hover { color: var(--text); border-color: var(--accion); } }
.agenda-cambios-mas:focus-visible { outline: 2px solid var(--accion); outline-offset: 1px; }
.agenda-cambios-lista { margin: 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 6px; }
.agenda-cambios-lista li {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: baseline;
  padding-left: 10px; border-left: 2px solid var(--border);
}
.agenda-cambios-lista time { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda-cambios-lista span { color: var(--text); font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .agenda-nota-pie .agenda-action-button, .agenda-cambios-mas { min-height: 44px !important; }
  .agenda-cambios-lista li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Lo que se hace con las marcadas */
.agenda-marcadas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--accion);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accion) 10%, var(--panel));
}
.agenda-marcadas strong { color: var(--accion); font-size: var(--fs-sm); }
.agenda-marcadas select {
  min-height: 32px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}

/* Deshacer un «Hecho» (2-oct-2026): la franja que sustituye a la ventana de confirmación. Misma
   caja que «lo que se hace con las marcadas», en verde de «hecho», y el botón es el de siempre. */
.agenda-deshacer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--ok-border);
  border-radius: 10px;
  background: var(--ok-bg);
  color: var(--ok-text);
  font-size: var(--fs-sm);
}
.agenda-deshacer .agenda-action-button { min-height: 32px !important; padding: 0 12px !important; font-size: var(--fs-sm) !important; }
@media (max-width: 768px) {
  .agenda-deshacer .agenda-action-button { min-height: 44px !important; }
}

/* «¿Qué tal fue?» (7-oct-2026): las visitas que pasaron y siguen abiertas. Misma caja que la franja de
   las viejas, en el azul de información (no es un error: es una pregunta). */
.agenda-comofue {
  margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid var(--info-border); border-radius: 10px;
  background: var(--info-bg); color: var(--text); font-size: var(--fs-sm);
}
/* El título es un botón para plegar/desplegar (24-oct-2026, (a) aprobado por Javidan). En el
   ordenador se queda abierto y sin flecha; en el móvil arranca plegado y la flecha gira al abrir. */
.agenda-comofue-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0 0 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.agenda-comofue-tit-txt { min-width: 0; overflow-wrap: anywhere; }
.agenda-comofue-flecha { flex: none; color: var(--muted); transition: transform .15s ease; }
.agenda-comofue.is-abierto .agenda-comofue-flecha { transform: rotate(180deg); }
.agenda-comofue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.agenda-comofue-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.agenda-comofue-que { display: flex; flex-direction: column; min-width: 0; }
.agenda-comofue-que b { font-weight: 600; overflow-wrap: anywhere; }
.agenda-comofue-que span { color: var(--muted); }
.agenda-comofue-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.agenda-comofue-nota, .agenda-comofue-mas { margin: 8px 0 0; color: var(--muted); }
/* En el ordenador, siempre abierto y sin flecha (no se pliega). */
@media (min-width: 769px) {
  .agenda-comofue-tit { cursor: default; margin-bottom: 6px; }
  .agenda-comofue-flecha { display: none; }
  .agenda-comofue-cuerpo { display: block; }
}
@media (max-width: 768px) {
  .agenda-comofue-botones { width: 100%; }
  .agenda-comofue-botones .btn { flex: 1 1 0; min-height: 44px; }
  /* Plegado = una sola línea; el botón, de dedo (≥44 px). Abierto, recupera su aire. */
  .agenda-comofue { padding: 2px 10px; }
  .agenda-comofue.is-abierto { padding: 10px 12px; }
  .agenda-comofue-tit { min-height: 44px; margin: 0; }
  .agenda-comofue.is-abierto .agenda-comofue-tit { margin-bottom: 6px; }
  .agenda-comofue-cuerpo { display: none; }
  .agenda-comofue.is-abierto .agenda-comofue-cuerpo { display: block; }
}

/* La franja de las que llevan más de dos semanas */
.agenda-viejas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--danger-border);
  border-radius: 10px;
  background: var(--danger-bg);
  color: var(--text);
  font-size: var(--fs-sm);
}
.agenda-viejas b { color: var(--danger-text); }

@media (max-width: 768px) {
  /* En el móvil la tarea abierta ocupa la pantalla: la lista se aparta, no se pierde. */
  .agenda-columnas.tiene-panel { grid-template-columns: 1fr; }
  .agenda-columnas.tiene-panel .agenda-lista { display: none; }
  .agenda-tarea-barra { display: flex; }
  .agenda-tarea-volver { min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--accion); font: inherit; font-weight: 600; cursor: pointer; }
  .agenda-tarea-acciones { position: sticky; bottom: 0; padding: 8px 0 calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--panel); }
  .agenda-tarea-acciones .agenda-action-button { flex: 1 1 0; min-height: 48px !important; }
  #agenda-list .agenda-fila {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "marca titulo titulo tel mas"
      "marca cuando quien  tel mas";
    align-items: center;
    gap: 2px 8px;
    min-height: 64px;
    padding: 8px 6px;
  }
  .agenda-fila-marca { grid-area: marca; min-height: 44px; }
  .agenda-fila-titulo { grid-area: titulo; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .agenda-fila-cuando { grid-area: cuando; }
  .agenda-fila-quien { grid-area: quien; }
  .agenda-fila-quien::before { content: "·"; color: var(--muted); }
  .agenda-fila-avatar { display: none; }
  .agenda-fila-tel, .agenda-fila-mas { grid-area: tel; min-width: 44px; min-height: 44px; }
  .agenda-fila-mas { grid-area: mas; }
  .agenda-tarea .agenda-action-button,
  .agenda-fila-menu .agenda-action-button { min-height: 44px !important; }
  .agenda-marcadas .agenda-action-button { min-height: 44px !important; }
  .agenda-marcadas select { min-height: 44px; }
  .agenda-viejas { padding: 8px 10px; font-size: var(--fs-xs); }
  .agenda-viejas .btn { min-height: 44px; }
  /* Hecho y Posponer, al alcance del pulgar: abajo del todo y siempre a la vista. */
  .agenda-tarea-acciones { order: 9; }
  .agenda-tarea-posponer { order: 10; }
}

/* Deslizar una fila en el móvil: derecha = hecha, izquierda = a mañana (dibujo del paso 9). */
#agenda-list .agenda-fila { transition: transform 140ms ease, background 140ms ease; touch-action: pan-y; }
#agenda-list .agenda-fila.is-deslizando-hecho { background: color-mix(in srgb, var(--ok-bg, #dcfce7) 70%, var(--panel)); }
#agenda-list .agenda-fila.is-deslizando-posponer { background: color-mix(in srgb, var(--warn-bg, #fef3c7) 70%, var(--panel)); }
@media (prefers-reduced-motion: reduce) {
  #agenda-list .agenda-fila { transition: none; }
}

/* Móvil: el panel de Qobrix con el margen de 16 px, las cuatro pestañas a la vista y todo lo que se
   pulsa a 44 px (tamaño del dedo, decisión del fundador del 18-sep). Medido en producción el 24-sep:
   la fila de pestañas pedía 409 px en un hueco de 364 y la del muñeco quedaba cortada sin pista; el
   título iba a 13 px del borde y 15 de los botones a la vista medían menos de 44. */
@media (max-width: 720px) {
  #contacts-dialog.contacts-qbx { padding-left: 16px !important; padding-right: 16px !important; }
  #contacts-dialog.contacts-qbx .contacts-tabs { gap: 4px; flex: 1 1 100%; }
  /* Caben también a 360 px (muchos Android): poco relleno lateral y, si aun así no, «…» antes que salirse. */
  #contacts-dialog.contacts-qbx .contacts-tabs .contacts-tab { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 4px; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #contacts-dialog.contacts-qbx .contacts-tabs .contacts-tab.contacts-tab-icon { flex: 0 0 44px !important; padding: 0 !important; }
  #contacts-dialog.contacts-qbx #contacts-add-header,
  #contacts-dialog.contacts-qbx #refresh-contacts-dialog,
  #contacts-dialog.contacts-qbx #close-contacts-dialog { width: 44px; height: 44px; min-width: 44px; min-height: 44px; top: 0; }
  /* Al pasar de 40 a 44 px, los tres redondos (a 8 px del borde) bajaban 4 px encima de las pestañas
     (lo vio el fundador el 25-sep). Suben a la altura del título y el título reserva sus 44 px: quedan
     8 px de aire hasta las pestañas. Lo vigila scripts/mirar-cabecera-crm-movil.mjs. */
  #contacts-dialog.contacts-qbx .contacts-qbx-heading { min-height: 44px; }
  #contacts-dialog.contacts-qbx #contacts-search { min-height: 44px; }
  #contacts-dialog.contacts-qbx #contacts-search-ai { min-width: 44px; min-height: 44px; }
  #contacts-dialog.contacts-qbx #contacts-filters-toggle,
  #contacts-dialog.contacts-qbx #contacts-sort { min-height: 44px; }
  #contacts-dialog.contacts-qbx #contacts-fav-filter { min-width: 44px; min-height: 44px; }
  /* La fila «Mostrar filtros · ★ · orden» ya se pasaba 9 px del margen: que el orden encoja (con «…»). */
  #contacts-dialog.contacts-qbx .contacts-controls-row { min-width: 0; max-width: 100%; }
  #contacts-dialog.contacts-qbx .contacts-controls-row .contacts-sort { flex: 1 1 auto; text-overflow: ellipsis; }
  /* Con «Míos / Mi equipo» no caben cuatro controles en una fila: la vista ocupa lo que queda junto a la
     estrella y el orden baja a su propia línea, entero (sin «…»). Solo le pasa al responsable. */
  #contacts-dialog.contacts-qbx .contacts-controls-row:has(#contacts-vista:not([hidden])) { flex-wrap: wrap; }
  #contacts-dialog.contacts-qbx .contacts-controls-row #contacts-vista { flex: 1 1 auto; min-height: 44px; }
  #contacts-dialog.contacts-qbx .contacts-controls-row:has(#contacts-vista:not([hidden])) #contacts-sort { flex: 1 1 100%; margin-left: 0; }
  #contacts-dialog.contacts-qbx .contacts-check-nuevos { min-height: 44px; display: inline-flex; align-items: center; }
  #contacts-dialog.contacts-qbx .cqx-pg-arrow.cqx-pg-grande { width: 44px; height: 44px; min-width: 44px; }
}

/* Móvil: lo que quedaba de la auditoría del 8-sep, re-medido en producción el 24-sep. En el menú
   lateral «Actualizar» medía 26 px y el buscador 38; en avisos «Cerrar» 40 y las pestañas 38. Y el
   nombre de cada chat se cortaba a una línea («¿Qué recordatorios tengo vencid…»): ahora, dos. */
@media (max-width: 760px) {
  #refresh-history { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  #history-query { min-height: 44px; }
  #notification-center-close { min-width: 44px; min-height: 44px; }
  .notification-center-tabs .notification-center-tab { min-height: 44px; }
  .history-list .history-item-row .history-item-title {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
  }
}

/* ═══ INTERESADOS de la ficha del local · fase 6A (25-sep-2026) ═══════════════════════════════════════
   Medido contra el dibujo aprobado docs/diseno/ficha-local-interesados-v2.html: secciones separadas por
   una línea, rótulo pequeño en mayúsculas, frase grande, cifras en rejilla de 4 (2 en el móvil), tareas con
   su etiqueta de color, «Cómo van» en tres columnas, la tabla de portales con su total y los compradores
   con pestañas. El color de cada estado u origen va SIEMPRE con su palabra al lado. */
.lint, .lint-filas {
  --lint-nuevo: var(--warn-text);
  --lint-hablando: var(--brand);
  --lint-sin-respuesta: var(--warn-border);
  --lint-sigue: var(--info-border);
  --lint-visita: var(--ok-text);
  --lint-cerrado: var(--line-strong);
  --lint-idealista: var(--brand);
  --lint-otro: var(--info-border);
  --lint-sin: var(--line-strong);
}
/* El dibujo es de 760 px: en la ficha ancha del ordenador (1.240 px) no se estira más, o el gráfico y la tabla
   se deforman. */
.lint { display: flex; flex-direction: column; max-width: 820px; }
.lint-cuando { margin: 0 0 4px; font-size: var(--fs-xs); color: var(--muted); }
/* Fase 6E: la cabecera del apartado, con «Informe para el vendedor» a la derecha (dibujo v2, decisión 2-A). */
.lint-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 4px 0; }
.lint-cab .lint-cuando { margin: 0; }
.lint-informe { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; font-size: var(--fs-sm); font-weight: 600; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.lint-informe:active { transform: scale(0.97); }
.lint-informe svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 auto; }
.lint-sec { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.lint-sec:first-of-type { padding-top: 8px; }
.lint-rotulo { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lint-rotulo-fino { font-size: var(--fs-xs); color: var(--muted); }
.lint-frase { margin: 0; max-width: 60ch; font-size: var(--fs-lg); line-height: 1.45; color: var(--text); }
.lint-frase b { font-weight: 600; }
.lint-num { font-variant-numeric: tabular-nums; }
.lint-nota { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.lint-nota b { color: var(--text); font-weight: 600; }
/* Envíos de «Ofrecer por WhatsApp» dentro de «Ofertas enviadas» (15-oct-2026, m038 punto 9). */
.lint-ofrecer-wa { margin-top: 10px; }
.lint-ofrecer-wa-t { margin-top: 2px; }
.lint-aviso { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--info-bg); }
.lint-ir { align-self: flex-start; min-height: 32px; padding: 4px 0; border: 0; background: none; color: var(--link); font: inherit; font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.lint-ir:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { .lint-ir:hover { text-decoration: underline; } }
.lint-ir[hidden] { display: none; }

/* Cifras: 4 en fila, separadas por una línea; en el móvil, de dos en dos. */
.lint-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lint-cifra { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; border-left: 1px solid var(--line); }
.lint-cifra:first-child { border-left: 0; }
.lint-cifra span { font-size: var(--fs-xs); color: var(--muted); }
.lint-cifra b { font-size: var(--fs-xl); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.lint-cifra small { font-size: var(--fs-2xs); color: var(--muted); }

/* Qué toca hacer: etiqueta · qué hacer y por qué · botón. */
.lint-tareas { display: flex; flex-direction: column; }
.lint-tarea { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.lint-tarea:first-child { padding-top: 4px; border-top: 0; }
.lint-tarea b { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.lint-tarea small { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); }
.lint-chip { justify-self: start; margin-top: 2px; padding: 2px 10px; border: 1px solid; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }
.lint-chip-urgente { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); }
.lint-chip-aviso { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }
.lint-chip-oportunidad, .lint-chip-bien { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-text); }
.lint-chip-dato { border-color: var(--info-border); background: var(--info-bg); color: var(--info-text); }

/* Cómo van: tres columnas con su frase, su barra y su leyenda con total. */
.lint-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lint-mini { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lint-mini-f { font-weight: 600; color: var(--text); }
.lint-mini-s { margin-top: -4px; font-size: var(--fs-sm); color: var(--muted); }
.lint-barra { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: 999px; background: var(--panel-3); }
.lint-barra > i { display: block; flex: 0 1 0; min-width: 4px; background: var(--c); }
.lint-leyenda { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.lint-leyenda > div { display: flex; align-items: center; gap: 8px; }
.lint-leyenda span { flex: 1; color: var(--muted); }
.lint-leyenda b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.lint-punto, .lint-suma > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.lint-suma { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.lint-suma > i { background: none; }
.lint-leyenda .lint-suma span { color: var(--text); font-weight: 500; }
.lint-leyenda .lint-suma b { font-weight: 600; }
.lint-t-nuevo { --c: var(--lint-nuevo); }
.lint-t-hablando { --c: var(--lint-hablando); }
.lint-t-sin-respuesta { --c: var(--lint-sin-respuesta); }
.lint-t-sigue { --c: var(--lint-sigue); }
.lint-t-visita { --c: var(--lint-visita); }
.lint-t-cerrado { --c: var(--lint-cerrado); }
.lint-t-encaja { --c: var(--ok-text); }
.lint-o-idealista { --c: var(--lint-idealista); }
.lint-o-otro { --c: var(--lint-otro); }
.lint-o-sin { --c: var(--lint-sin); }
.lint-v-wa { --c: var(--ok-text); }
.lint-v-correo { --c: var(--brand); }

/* Dónde se anuncia: una fila por sitio y la de total. Las columnas de los lunes, en azul. */
.lint-portales { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.lint-pt-cab, .lint-pt { display: grid; grid-template-columns: 1.2fr 0.9fr 0.8fr 0.9fr 0.9fr 168px; gap: 12px; align-items: center; padding: 8px 12px; }
.lint-pt-cab { background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.lint-pt { min-height: 40px; border-top: 1px solid var(--line); color: var(--text); }
.lint-pt b { font-weight: 600; }
.lint-pt-total { background: var(--panel-2); font-weight: 600; }
.lint-col-lunes { color: var(--info-text); }
.lint-sin { color: var(--muted); }
.lint-no { color: var(--muted); font-size: var(--fs-xs); text-align: right; white-space: nowrap; }
.lint-pt a { color: var(--link); font-weight: 500; text-align: right; text-decoration: none; white-space: nowrap; }

/* En nuestra web: el gráfico de 30 días. */
.lint-graf { display: flex; flex-direction: column; gap: 8px; }
.lint-grafico { display: block; width: 100%; height: auto; }
.lint-g-b { fill: var(--brand); }
.lint-g-b0 { fill: var(--line-strong); }
.lint-g-t { fill: var(--muted); font-family: inherit; font-size: 11px; }
.lint-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Compradores: pestañas y filas. */
/* Las pestañas bajan de línea si no caben (dibujo m061-caja): en el móvil, «Encajan y aún no lo tienen» se ve entera. */
.lint-pestanas { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 4px; max-width: 100%; padding: 4px; border-radius: var(--radius-sm); background: var(--panel-3); }
.lint-pestanas button { min-height: 32px; padding: 4px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer; }
.lint-pestanas button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(14, 27, 44, 0.12); }
.lint-pestanas button:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.lint-filas { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* Cada comprador (15-oct-2026, dibujo de m041): la fila que abre su ficha, y a su derecha «Ofrecer» (y, para admin y
   supervisor, la casilla y «para comerciales»). Son dos botones: uno no puede ir dentro del otro. */
.lint-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 4px 12px 4px 0; border-top: 1px solid var(--line); }
.lint-fila.is-primera { border-top: 0; }
.lint-fila[hidden], .lint-vacio[hidden], .lint-solo-estado[hidden], .lint-que-es[hidden] { display: none; }
/* La caja «Compradores» ordenada (fundador 16-oct-2026, m061-caja; dibujo docs/estado/ia-mensajeria/dibujo-caja-compradores.html):
   título con su número, una línea de quiénes son, tres pestañas con su línea de qué cuentan, filas de nombre · estado · de dónde y
   su última acción · Ofrecer, y el aviso «Ya le llamaron…» a lo ancho, debajo de su fila. */
.lint-comp-cab { display: flex; flex-direction: column; gap: 4px; }
.lint-comp-t { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.lint-quienes { margin: 0; max-width: 64ch; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.lint-que-es { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
/* El estado, en su columna y a la izquierda: los de todas las filas quedan alineados. */
.lint-fila-abre > .lint-estado { justify-self: start; }
.lint-fila-u { display: flex; flex-direction: column; min-width: 0; color: var(--muted); line-height: 1.35; }
.lint-fila-u > span, .lint-fila-u small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lint-fila-u small { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.lint-fila-aviso { flex: 1 0 100%; margin: 0 0 8px 12px; padding: 7px 10px; border: 1px solid var(--warn-border); border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-xs); line-height: 1.4; }
.lint-baja { flex: none; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.lint-como summary { color: var(--link); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.lint-como .lint-nota { margin-top: 8px; line-height: 1.5; }
.lint-fila-abre { display: grid; flex: 1; grid-template-columns: minmax(0, 1.3fr) 124px minmax(0, 1.4fr); gap: 12px; align-items: center; min-width: 0; min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.lint-fila-abre:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
@media (hover: hover) { .lint-fila-abre:hover { background: var(--panel-2); } }
.lint-of { display: inline-flex; flex: none; align-items: center; gap: 10px; }
.lint-marca { width: 18px; height: 18px; margin: 0; accent-color: var(--link); cursor: pointer; }
.lint-of-b, .fdb-of { display: flex; flex: none; flex-direction: column; align-items: center; gap: 2px; }
.lint-of-b small, .fdb-of small, .fdb-varios-pie small, .lint-marcados-n { color: var(--muted); font-size: var(--fs-2xs); white-space: nowrap; }
.lint-of-btn { min-width: 76px; }
.lint-marcados { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; }
.lint-solo-estado { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.fdb-varios-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 14px 0 0; }
/* 16-oct-2026 (fundador, nota a m072 de qobrix, 6a): arriba, encima del primer contacto. */
.fdb-varios-pie.fdb-varios-arriba { margin: 4px 0 12px; }
/* 16-oct (fundador, nota-m079 de qobrix, 12): «Ofrecer por WhatsApp a varios» en verde WhatsApp y un poco más grande. */
.fdb-varios-arriba .fdb-wa-varios { min-height: 40px; padding: 8px 16px; font-size: var(--fs-base, 15px); }
/* Caja «Compradores de la agencia que encajan»: botón verde arriba; cifras y asesores se pulsan (abren la ventana). */
.lint-varios-arriba { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.lint-varios-arriba small { color: var(--muted); font-size: var(--fs-sm); }
/* Con dos clases: `.lint-btn-wa` (pastilla verde clara, más abajo) pisaría el verde WhatsApp de `.lint-btn-wa-grande`. */
.lint-btn-wa.lint-btn-wa-grande { min-height: 40px; padding: 8px 16px; font-size: var(--fs-base, 15px); font-weight: 600; background: var(--wa-btn-bg); color: var(--wa-btn-text); border-color: transparent; }
.lint-btn-wa.lint-btn-wa-grande:hover:not(:disabled) { background: var(--wa-btn-bg-hover); }
/* Como botón, sin el gris ni el borde del navegador: igual que «Ya lo tienen», que no se pulsa. */
button.lint-cifra { margin: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.lint-cifra:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
button.lint-cifra:hover b { text-decoration: underline; text-underline-offset: 3px; }
button.lint-as-n { padding: 0; border: 0; background: none; font: inherit; color: var(--brand-ink, var(--link)); text-align: left; cursor: pointer; }
button.lint-as-n:hover { text-decoration: underline; text-underline-offset: 3px; }
.fdw-asesor { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.fdw-asesor-sel { font: inherit; font-size: var(--fs-sm); padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface, transparent); color: inherit; max-width: 100%; }
/* «Cómo van»: cada estado de la leyenda es un botón que filtra la lista de compradores (nota a m041, 6). */
.lint-ley-estado { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lint-ley-estado:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { .lint-ley-estado:hover span { color: var(--link); text-decoration: underline; } }
.lint-fila-n { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.lint-fila-o { color: var(--muted); text-align: right; }
/* «Última acción» de cada interesado: reloj + «Hace 18 días · Propuesta», en la última columna. */
.lint-fila-a { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 132px; max-width: 210px; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
/* El nombre del cliente es lo que más importa: si la acción es larga, se corta ella (entera en el título). */
.lint-fila-a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lint-ico-a { flex: 0 0 auto; width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lint-estado { padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-2xs); font-weight: 500; color: var(--muted); white-space: nowrap; }
.lint-estado.lint-t-nuevo { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); }
.lint-estado.lint-t-hablando, .lint-estado.lint-t-sigue, .lint-estado.lint-t-visita { border-color: var(--info-border); background: var(--info-bg); color: var(--info-text); }
.lint-estado.lint-t-encaja { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-text); }
.lint-vacio { margin: 0; padding: 12px; font-size: var(--fs-sm); color: var(--muted); }

.lint-pie { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--panel-2); font-size: var(--fs-xs); color: var(--muted); }
.lint-pie summary { color: var(--link); font-weight: 500; cursor: pointer; }
.lint-pie ul { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding-left: 18px; }

/* Fase 6F · compradores de la agencia que encajan (dirección) y tus clientes que encajan (asesor). */
.lint-nivel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--muted); }
.lint-cifras-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lint-asesores { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.lint-as-cab, .lint-as { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 190px; gap: 12px; align-items: center; padding: 8px 12px; }
.lint-as-cab { background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.lint-as { min-height: 48px; border-top: 1px solid var(--line); color: var(--text); }
.lint-as-n { font-weight: 500; }
.lint-as-total { background: var(--panel-2); font-weight: 600; }
.lint-as-nadie > span { grid-column: 1 / -1; color: var(--muted); }
.lint-as-msg { display: flex; flex-direction: column; gap: 8px; margin: 0 12px 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.lint-burbuja { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--text); line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.lint-fila-btn { display: flex; flex-wrap: wrap; gap: 8px; }
.lint-btn-wa { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 32px; padding: 4px 12px; border: 1px solid var(--ok-border); border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok-text); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.lint-btn-wa:active { transform: scale(0.97); }
.lint-btn-wa:disabled { opacity: 0.5; cursor: not-allowed; }
.lint-btn-wa.is-hecho:disabled { opacity: 1; }
.lint-btn-wa:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.lint-btn-wa svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.lint-mis-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); }
.lint-todos-check { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; color: var(--text); }
.lint-todos-check input, .lint-mia-check { width: 16px; height: 16px; accent-color: var(--brand); }
.lint-mia { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.lint-mia.is-primera { border-top: 0; }
.lint-mia[hidden] { display: none; }
.lint-mia-n { overflow: hidden; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 500; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
@media (hover: hover) { .lint-mia-n:hover { color: var(--link); text-decoration: underline; } }
.lint-mia-n:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.lint-mia-ya { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.lint-mia .lint-btn-wa { justify-self: end; white-space: nowrap; }

/* La ficha es un panel lateral: se decide por su ancho, no por el de la pantalla. */
.fd-contacto-body:has(> .lint) { container-type: inline-size; }
@container (max-width: 640px) {
  .lint-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lint-cifra:nth-child(3) { border-left: 0; }
  .lint-cifra:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lint-tres { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lint-tarea { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lint-tarea .lint-ir { justify-self: start; }
  .lint-pt-cab { display: none; }
  .lint-pt { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 2px; }
  .lint-pt > :nth-child(2):not(.lint-sin)::before { content: "Visitas: "; color: var(--muted); font-weight: 400; }
  .lint-pt > :nth-child(5):not(.lint-sin)::before { content: "Interesados: "; color: var(--muted); font-weight: 400; }
  .lint-pt > :nth-child(3), .lint-pt > :nth-child(4), .lint-pt > .lint-sin { display: none; }
  .lint-pt > :last-child { grid-column: 1 / -1; text-align: left; }
  .lint-dos { grid-template-columns: minmax(0, 1fr); }
  .lint-fila-abre { grid-template-columns: minmax(0, 1fr) auto; padding-right: 4px; }
  .lint-fila-o { display: none; }
  /* En estrecho (dibujo m061-caja): de dónde y la última acción bajan a su línea, y «Ofrecer» a la suya, a la izquierda. */
  .lint-fila-u { grid-column: 1 / -1; }
  .lint-fila > .lint-of, .lint-fila > .lint-baja { flex: 1 0 100%; margin: 0 0 8px 12px; }
  .lint-ley-estado { min-height: 36px; }
  /* En estrecho, el origen se va y la última acción baja a su propia línea, alineada con el nombre. */
  .lint-fila-a { grid-column: 1 / -1; min-width: 0; max-width: none; justify-content: flex-start; }
  .lint-ir { min-height: 44px; }
  .lint-pestanas button { min-height: 40px; }
  .lint-cifras-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lint-cifras-3 .lint-cifra { padding: 8px 10px; border-top: 0; border-left: 1px solid var(--line); }
  .lint-cifras-3 .lint-cifra:first-child { border-left: 0; }
  .lint-as-cab { display: none; }
  .lint-as { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .lint-as-todos::before { content: "Encajan "; color: var(--muted); }
  .lint-as-sin::before { content: "Sin tenerlo "; color: var(--muted); }
  .lint-as-todos, .lint-as-sin { grid-column: 1 / 2; }
  .lint-as-accion { grid-column: 1 / -1; }
  .lint-as-total > :last-child, .lint-as > span:empty { display: none; }
  .lint-btn-wa { min-height: 44px; }
  .lint-informe { min-height: 44px; }
  .lint-mia { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 4px; }
  .lint-mia .lint-estado, .lint-mia .lint-mia-ya { grid-column: 2 / 3; justify-self: start; }
  .lint-mia .lint-btn-wa { grid-column: 2 / -1; justify-self: start; }
}

/* ───── «¿Cómo fue?» al dar una tarea por hecha (dibujo paso9-hecho-con-resultado, 24-sep-2026) ─────
   En el ordenador ocupa el sitio de «✓ Hecho / Posponer» dentro de la tarea abierta; en el móvil sale
   como hoja desde abajo, con el fondo oscurecido y todo a 44 px. */
.agenda-cierre-fondo { display: none; }
.agenda-cierre { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel-2); }
.agenda-cierre-cabeza { display: flex; align-items: flex-start; gap: 10px; }
.agenda-cierre-cabeza > div { flex: 1 1 auto; min-width: 0; }
.agenda-cierre h3 { margin: 0; color: var(--text); font-size: var(--fs-md, 16px); font-weight: 700; }
.agenda-cierre-de { display: none; color: var(--muted); font-size: var(--fs-xs); }
.agenda-cierre-x {
  flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--panel); color: var(--muted);
  font: inherit; cursor: pointer;
}
/* De dos en dos, como el dibujo: la tarea abierta del ordenador es un panel estrecho. */
.agenda-cierre-resultados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.agenda-cierre-ancho { grid-column: span 2; }
/* La calidad, a la vista con cualquier resultado; y la caja «Poner siguiente recordatorio» (7-oct-2026,
   dibujo V8nssFDW9vv3PAm2ohTLM2). Los chips son el mismo botón de las opciones, en pequeño. */
.agenda-cierre-calidad, .agenda-cierre-bloque { display: grid; gap: 8px; }
.agenda-cierre-cab { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.agenda-cierre-cab strong { color: var(--text); font-size: var(--fs-sm); }
.agenda-cierre-k { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.agenda-cierre-ahora { color: var(--muted); font-size: var(--fs-xs); }
.agenda-cierre-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.agenda-cierre-opcion.agenda-cierre-chip { min-height: 34px; padding: 0 12px; border-radius: 999px; font-weight: 500; }
.agenda-cierre-opcion.agenda-cierre-chip.is-on { border-width: 1px; font-weight: 700; }
.agenda-cierre-opcion {
  min-height: 36px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.agenda-cierre-opcion.is-on { border: 2px solid var(--accion); background: var(--info-bg); color: var(--accion); font-weight: 700; }
.agenda-cierre-siguiente { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.agenda-cierre-siguiente.is-ninguno { gap: 8px; }
.agenda-cierre-ideas { display: grid; gap: 6px; }
.agenda-cierre-idea {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 40px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--text);
  font: inherit; font-size: var(--fs-sm); line-height: 1.4; text-align: left; cursor: pointer;
}
.agenda-cierre-idea.is-on { padding: 8px 11px; border: 2px solid var(--accion); background: var(--info-bg); }
.agenda-cierre-pto { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; box-sizing: border-box; border: 2px solid var(--line-strong); border-radius: 50%; }
.agenda-cierre-idea.is-on .agenda-cierre-pto { border-color: var(--accion); background: radial-gradient(circle, var(--accion) 0 40%, transparent 46%); }
.agenda-cierre-idea-mia { font-weight: 600; }
.agenda-cierre-hab { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-text); font-size: 11px; font-weight: 700; white-space: nowrap; }
.agenda-cierre-quedara { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--ok-bg); color: var(--ok-text); font-size: var(--fs-sm); line-height: 1.45; }
.agenda-cierre-quedara.is-falta, .agenda-cierre-quedara.is-nada { background: var(--warn-bg); color: var(--warn-text); }
.agenda-cierre-enlace { min-height: 32px; padding: 0 6px; border: 0; background: none; color: var(--accion); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; justify-self: start; }
.agenda-cierre-ficha { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--text); font-size: var(--fs-sm); line-height: 1.4; cursor: pointer; }
.agenda-cierre-ficha input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accion); }
.agenda-cierre-nota textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.agenda-tarea .agenda-cierre-error { padding: 8px 10px; border: 1px solid var(--danger-border, var(--line-strong)); border-radius: 8px; background: var(--danger-bg, var(--panel)); color: var(--danger-text); }
.agenda-cierre-botones { display: flex; justify-content: flex-end; gap: 8px; }
.agenda-cierre-guardar {
  min-height: 36px; padding: 0 18px; border: 0; border-radius: 10px;
  background: var(--accion); color: var(--brand-contrast); font: inherit; font-weight: 700; cursor: pointer;
}
.agenda-cierre-guardar:disabled { opacity: .5; cursor: not-allowed; }
.agenda-cierre-sin-mas { min-height: 36px; padding: 0 12px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.agenda-cierre button:focus-visible, .agenda-cierre input:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
@media (hover: hover) {
  .agenda-cierre-opcion:not(.is-on):hover, .agenda-cierre-idea:not(.is-on):hover { background: var(--panel-2); }
  .agenda-cierre-sin-mas:hover { color: var(--text); }
}
@media (max-width: 768px) {
  /* La barra de abajo (Chat, Agenda…) va a 10200 y la agenda a 10080: mientras la hoja está abierta,
     la agenda sube por encima para que la hoja y su fondo lo tapen todo, barra incluida. */
  /* !important: más arriba, todos los diálogos abiertos van a 10080 con !important. */
  #agenda-dialog[aria-hidden="false"]:has(.agenda-cierre-capa) { z-index: 10210 !important; }
  /* La tarea abierta va en un bloque pegajoso (sticky), que encierra la hoja en su propia capa:
     sin subirlo, la cabecera «Mi agenda» quedaba por encima del fondo oscuro. */
  #agenda-dialog .agenda-panel:has(.agenda-cierre-capa) { z-index: 600; }
  .agenda-cierre-capa { position: fixed; inset: 0; z-index: 500; }
  .agenda-cierre-fondo { display: block; position: absolute; inset: 0; background: rgba(20, 26, 33, 0.45); }
  .agenda-cierre {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border: 0; border-radius: 18px 18px 0 0; background: var(--panel);
    box-shadow: 0 -8px 24px rgba(20, 26, 33, 0.18);
  }
  .agenda-cierre h3 { font-size: 18px; }
  .agenda-cierre-de { display: block; }
  .agenda-cierre-x { width: 44px; height: 44px; }
  .agenda-cierre-opcion, .agenda-cierre-opcion.agenda-cierre-chip, .agenda-cierre-idea, .agenda-cierre-enlace, .agenda-cierre-sin-mas { min-height: 44px; }
  .agenda-cierre-siguiente { background: var(--panel-2); }
  .agenda-cierre-ficha { min-height: 44px; }
  .agenda-cierre-ficha input { width: 20px; height: 20px; }
  .agenda-cierre-nota textarea { font-size: 16px; }
  .agenda-cierre-botones { flex-direction: column-reverse; align-items: stretch; }
  .agenda-cierre-guardar { min-height: 48px; border-radius: 12px; font-size: 16px; }
}

/* El botón «Bajar al último mensaje», siempre justo encima de la barra de escribir: la altura la
   calcula app.js (setupScrollBottomButton). Con las alturas fijas de arriba, en el móvil quedaba
   escondido detrás de la barra (25-sep-2026). */
.chat-scroll-bottom.sobre-composer { bottom: var(--bajar-sobre) !important; }

/* ── LA FICHA DEL LOCAL POR DENTRO (fase 11.4 de diseño; dibujo aprobado el 25-sep-2026,
   docs/diseno/ficha-local-por-dentro.html) ─────────────────────────────────────────────────────
   Cabecera con portada pequeña y acciones, 6 cifras, aviso de publicar en una línea, fotos en una
   tira, y los datos en apartados que se pliegan. Se mide contra el dibujo con
   scripts/mirar-ficha-local-por-dentro.mjs. El ancho lo decide el PANEL (no la pantalla): en el
   ordenador el panel de la ficha puede ser estrecho. */
.fl { container-type: inline-size; display: flex; flex-direction: column; color: var(--qbx-text, var(--text)); }
.fl-cab { display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "foto txt" "foto acc"; column-gap: 16px; row-gap: 12px; padding: 4px 0 16px; align-items: start; }
.fl-cab.sin-portada { grid-template-columns: 1fr; grid-template-areas: "txt" "acc"; }
.fl .fd-photo.fl-portada { grid-area: foto; width: 96px; height: 72px; max-height: none; margin: 0; object-fit: cover; border-radius: var(--radius-sm); }
.fl-cab-txt { grid-area: txt; min-width: 0; }
.fl-nombre { margin: 0; font-size: var(--fs-xl); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fl-sub { margin: 2px 0 0; color: var(--qbx-muted, var(--muted)); font-size: var(--fs-sm); }
.fl-acciones { grid-area: acc; display: flex; flex-wrap: wrap; gap: 8px; }
.fl .fl-btn { min-height: 32px; padding: 6px 12px; font-size: var(--fs-sm); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
.fl-cifras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--qbx-line, var(--line)); border-bottom: 1px solid var(--qbx-line, var(--line)); }
.fl-cifra { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 1px solid var(--qbx-line, var(--line)); min-width: 0; }
.fl-cifra:first-child { border-left: 0; padding-left: 0; }
.fl-cifra span { font-size: var(--fs-xs); color: var(--qbx-muted, var(--muted)); }
/* La cifra sin lápiz («Entrada total») mide lo mismo que las que lo llevan: su cifra queda a la misma altura. */
.fl-cifra > span { min-height: 16px; line-height: 16px; }
.fl-cifra b { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El esbozo de la ficha de un local (lo que ya sabe la fila de la lista) deja barras de espera donde aún no hay cifra. */
.fl-cifra b .tn-skeleton-bar { display: inline-block; width: 64%; height: 1em; vertical-align: middle; }   /* en la línea de la cifra: mide lo mismo que ella */
/* La cifra que se pulsa lleva a su dato (29-sep-2026): botón sin aspecto de botón, con el lápiz al lado
   del nombre para que se vea que se toca también en el móvil, donde no hay ratón. */
.fl-cifra-ir { font: inherit; color: inherit; text-align: left; background: none; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; margin: 0; cursor: pointer; }
.fl-cifra-ir > span { display: inline-flex; align-items: center; gap: 4px; }
.fl-cifra-ir .cqx-icono, #contacts-dialog.contacts-qbx .fl-cifra-ir .cqx-icono { width: 16px; height: 16px; fill: currentColor; flex: none; }
@media (hover: hover) { .fl-cifra-ir:hover b, .fl-cifra-ir:hover > span { color: var(--brand); } }
.fl-cifra-ir:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* El estado de arriba es un desplegable con aspecto de pastilla (29-sep-2026, fundador: «lo veo solo
   pastilla verde que no se despliega»). Los colores de .fd-chip-estado usan el atajo background, que
   borra la flecha dibujada de los desplegables: aquí se vuelve a dibujar, en el color del texto. */
#contacts-dialog.contacts-qbx select.fl-estado-sel.fd-chip-estado,
select.fl-estado-sel.fd-chip-estado {
  width: auto; max-width: 100%; display: inline-block; vertical-align: middle; margin: 0;
  min-height: 32px; padding: 3px 28px 3px 12px; border-radius: 999px; border-width: 1px; border-style: solid;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
@media (hover: hover) { select.fl-estado-sel.fd-chip-estado:hover { filter: brightness(0.97); } }
select.fl-estado-sel.fd-chip-estado:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (pointer: coarse) { #contacts-dialog.contacts-qbx select.fl-estado-sel.fd-chip-estado, select.fl-estado-sel.fd-chip-estado { min-height: 44px; font-size: 16px; } }
/* El aviso de publicar: una línea que se abre (antes, la lista entera en cada ficha). */
.fl .fl-aviso { margin: 12px 0 0; padding: 0; }
.fl .fl-aviso > .fd-sem-cab { padding: 10px 14px; min-height: 44px; }
.fl details.fl-aviso > summary { cursor: pointer; list-style: none; }
.fl details.fl-aviso > summary::-webkit-details-marker { display: none; }
.fl .fl-aviso .fd-sem-t { font-size: var(--fs-sm); flex: 1 1 auto; min-width: 0; }
.fl-aviso-n { font-weight: 400; }
.fl-aviso-ir { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.fl-aviso-ir::after { content: " ▸"; }
.fl details.fl-aviso[open] .fl-aviso-ir::after { content: " ▾"; }
.fl-aviso-dentro { padding: 0 14px 12px; }
/* Barra «Papeles» (cruce de papeles, dibujo del 3-oct-2026, opción A): la misma pieza que el semáforo, con
   el «quién es quién» dentro sobre fondo de panel, como en el dibujo. */
.fl .fd-pap { margin-top: 8px; }
.fl .fd-pap[open] > .fl-aviso-dentro { background: var(--panel); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); padding-top: 10px; }
.fd-pap-qq { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 4px 10px; font-size: var(--fs-sm); line-height: 1.4; }
.fd-pap-k { color: var(--muted); }
.fd-pap-v { color: var(--text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.fd-pap-nota { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.fd-pap-ok { color: var(--ok-text); white-space: nowrap; }
.fd-pap-no { color: var(--danger-text); }
.fd-pap-nose { color: var(--muted); font-weight: 400; }
.fd-pap-claus { display: block; }
.fd-pap-claus + .fd-pap-claus { margin-top: 6px; }
.fd-pap-sub { margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
/* Fotos: una sola fila que se desliza de lado, con «Añadir fotos» al final. */
.fl-fotos { display: flex; align-items: center; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--qbx-line, var(--line)); min-width: 0; }
.fl-fotos .fd-media-grid { flex: 0 1 auto; flex-wrap: nowrap; overflow-x: auto; margin: 0; min-width: 0; scrollbar-width: thin; }
.fl-fotos .fd-media-foto { flex: 0 0 64px; width: 64px; height: 64px; }
.fl-fotos .fd-hint { margin: 0; }
.fl-fotos-mas { flex: 0 0 auto; white-space: nowrap; cursor: pointer; }
/* Fotos en DOS FILAS (tarea 159, 30-oct-2026; Javidan 29-oct 21:47): «Hechas con IA» y «Originales», cada una se desliza
   de lado con el dedo (con imán: cada foto queda entera) y, con ratón, con la rueda o la barra. Las ocultas, plegadas.
   «Ordenar y editar»: las fotos se ponen en varias líneas (sin deslizar) para poder arrastrarlas y tocar sus botones. */
.fl-fotos { flex-wrap: wrap; }
.fl-fotos .fd-fotos-filas { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fd-fotos-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); }
.fd-fotos-ver { color: var(--muted); margin-right: 2px; }
.fd-fotos-vista, .fd-fotos-editar { min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line, var(--w15)); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.fd-fotos-vista.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fd-fotos-editar { margin-left: auto; }
.fd-fotos-editar.is-on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.fd-fotos-fila { min-width: 0; }
.fd-fotos-fila-t { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.fd-fotos-n { font-weight: 400; }
.fl-fotos .fd-fotos-fila .fd-media-grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px; touch-action: pan-x pan-y; }
.fl-fotos .fd-media-grid.is-editando { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
.fd-foto-celda { position: relative; flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; }
.fd-foto-celda.is-privada .fd-media-foto, .fd-foto-celda.is-oculta .fd-media-foto { opacity: 0.45; }
.fd-foto-num { position: absolute; top: 3px; left: 3px; min-width: 18px; padding: 0 4px; border-radius: 9px; background: rgba(14, 19, 27, 0.75); color: #f6f8fc; font-size: 11px; line-height: 18px; text-align: center; pointer-events: none; font-variant-numeric: tabular-nums; }
.fd-foto-marca { position: absolute; top: 3px; right: 3px; padding: 0 4px; border-radius: 9px; background: rgba(14, 19, 27, 0.75); color: #f6f8fc; font-size: 11px; line-height: 18px; pointer-events: none; }
.fd-foto-marca.is-version { top: auto; bottom: 3px; right: 3px; }
.fd-foto-marca.is-privada + .fd-foto-marca.is-version { right: 3px; }
.fd-media-grid.is-editando .fd-foto-celda { width: 156px; }
.fd-media-grid.is-editando .fd-media-foto { width: 100%; height: 100px; flex: 0 0 auto; touch-action: none; cursor: grab; }
.fd-media-grid.is-editando .fd-foto-marca.is-version { bottom: auto; top: 78px; }
@media (max-width: 480px) {
  .fd-media-grid.is-editando .fd-foto-celda { width: calc(50% - 4px); }
}
.fd-foto-ctr { display: flex; flex-wrap: wrap; gap: 3px; }
.fd-foto-b { min-width: 32px; min-height: 32px; padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--line, var(--w15)); background: var(--bg-soft, transparent); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.fd-foto-b:disabled { opacity: 0.35; cursor: default; }
.fd-foto-b.is-on { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.fd-foto-version, .fd-foto-b[data-fa="origen"] { flex: 1 1 100%; }
.fd-foto-celda.is-arrastrando { z-index: 5; opacity: 0.85; transition: none; cursor: grabbing; }
.fd-foto-celda.is-arrastrando .fd-media-foto { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.fd-foto-celda.is-destino .fd-media-foto { outline: 2px dashed var(--brand); outline-offset: 2px; }
.fd-fotos-ocultas > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); min-height: 32px; display: flex; align-items: center; }
.fd-fotos-ocultas .fd-media-grid { margin-top: 4px; }
/* El visor: la foto es del gesto (ni la página ni el navegador se lo quedan) y con ratón se arrastra. */
.foto-visor-img { touch-action: none; cursor: grab; }
.foto-visor-img:active { cursor: grabbing; }
/* Los apartados que se pliegan. */
.fl-apartado { border-bottom: 1px solid var(--qbx-line, var(--line)); }
.fl-tit { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 0; cursor: pointer; list-style: none; }
.fl-tit::-webkit-details-marker { display: none; }
.fl-tit b { font-weight: 600; font-size: var(--fs-md); }
.fl-flecha { width: 8px; height: 8px; border-right: 2px solid var(--qbx-muted, var(--muted)); border-bottom: 2px solid var(--qbx-muted, var(--muted)); transform: rotate(-45deg); flex: 0 0 auto; transition: transform 0.15s ease-out; }
.fl-apartado[open] > .fl-tit .fl-flecha { transform: rotate(45deg); margin-top: -4px; }
.fl-resumen { margin-left: auto; color: var(--qbx-muted, var(--muted)); font-size: var(--fs-sm); text-align: right; }
.fl-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px 22px; min-width: 0; }
.fl-datos { display: grid; grid-template-columns: 1fr; column-gap: 32px; }
.fl-dato { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 36px; padding: 2px 0; border-top: 1px solid var(--qbx-line, var(--line)); font-size: var(--fs-sm); }
.fl-dato[hidden] { display: none; }
.fl-dato.fl-ancho { grid-column: 1 / -1; }
.fl-k { color: var(--qbx-muted, var(--muted)); }
.fl-v { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fl-ro { padding: 6px 8px; font-weight: 500; }
/* Lo que se puede cambiar va en su CAJA a la vista (29-sep-2026, fundador: «no hay como cambiar»). El
   dibujo del 25-sep lo dejaba como texto con el borde solo al pasar el ratón, y en el móvil —sin ratón—
   no se veía que precio, estado y números se cambian pinchando. Mismo borde y fondo que el móvil y el
   correo de la ficha del cliente (28-sep). Lo que NO se puede cambiar (.fl-ro) sigue como texto: la
   caja es justo lo que dice «esto lo puedes tocar». */
.fl .fl-v .fd-prop-edit { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 5px 8px; background-color: var(--qbx-bg, var(--bg)); border-color: var(--qbx-line-strong, var(--line-strong)); font-size: var(--fs-sm); font-weight: 500; color: inherit; }
/* background-color y no background: el atajo borraba la flecha dibujada de todos los desplegables (juez, 29-sep). */
.fl .fl-v select.fd-prop-edit { cursor: pointer; padding-right: 30px; }
@media (hover: hover) { .fl .fl-v .fd-prop-edit:hover { border-color: var(--brand); } }
.fl .fl-v .fd-prop-edit:focus { border-color: var(--brand); background-color: var(--panel, transparent); }
.fl .fl-v .fd-prop-textarea { font-weight: 400; line-height: 1.5; resize: vertical; }
.fl .fl-v .fd-prop-textarea.fl-recortada { resize: none; overflow: hidden; cursor: pointer; }
.fl-dato:has(textarea) { align-items: start; }
.fl-dato:has(textarea) > .fl-k { padding-top: 6px; }
/* El «para revisar» va pegado a su dato, no al otro lado de la fila. */
.fl .fl-v:has(.fl-ojo) > .fd-prop-edit { flex: 0 1 auto; width: auto; field-sizing: content; min-width: 4ch; }
.fl-ojo { flex: 0 0 auto; color: var(--warn-text, var(--qbx-muted)); font-size: var(--fs-xs); font-style: normal; font-weight: 600; }
.fl-leer { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
@media (hover: hover) { .fl-leer:hover { text-decoration: underline; } }
.fl-vacios { margin: 0; padding: 8px 12px; border: 1px dashed var(--qbx-line-strong, var(--line-strong)); border-radius: var(--radius-sm); color: var(--qbx-muted, var(--muted)); font-size: var(--fs-sm); }
.fl-vacios b { color: var(--qbx-text, var(--text)); font-weight: 600; }
.fl-equipo { flex-wrap: wrap; padding: 6px 0; }
.fl-chip { min-height: 28px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--qbx-line-strong, var(--line-strong)); background: transparent; color: var(--qbx-muted, var(--muted)); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.fl-chip.is-no { color: var(--qbx-muted, var(--muted)); }   /* el botón dice «: No» (1-oct-2026): el tachado ya no hace falta y confundía */
.fl-chip.is-si { color: var(--ok-text); border-color: var(--ok-border); background: var(--ok-bg); }
.fl-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.fl-oculto { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--panel-2, var(--w04)); color: var(--qbx-muted, var(--muted)); }
.fl-llaves { flex: 1 1 auto; display: flex; min-width: 0; }
.fl-cuerpo > .fd-contract, .fl-cuerpo > .fd-field { margin: 0; }
.fl-solo-movil { display: none; }
/* Panel ancho (ordenador): los datos en dos columnas, como el dibujo. */
@container (min-width: 720px) {
  .fl-datos { grid-template-columns: 1fr 1fr; }
}
/* Panel estrecho (móvil): cifras de 3 en 3, acciones a lo ancho de 44 px, etiqueta encima del dato. */
@container (max-width: 600px) {
  .fl-cab { grid-template-columns: 72px 1fr; grid-template-areas: "foto txt" "acc acc"; }
  .fl .fd-photo.fl-portada { width: 72px; height: 56px; }
  .fl .fl-btn { min-height: 44px; flex: 1 1 auto; }
  .fl-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fl-cifra { padding: 10px 12px; }
  .fl-cifra:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .fl-cifra:nth-child(n+4) { border-top: 1px solid var(--qbx-line, var(--line)); }
  .fl-cifra b { font-size: var(--fs-md); }
  .fl-solo-ancho { display: none; }
  .fl-solo-movil { display: inline; }
  .fl-resumen { display: none; }
  .fl-tit { min-height: 52px; }
  .fl-cuerpo { padding-left: 0; }
  .fl-dato { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 0; }
  .fl-k { font-size: var(--fs-xs); }
  .fl .fl-v .fd-prop-edit { min-height: 44px; font-size: 16px; }
  .fl-chip { min-height: 36px; }
}

/* ── LA LISTA DE LOCALES (fase 11.6 de diseño; dibujo aprobado el 25-sep-2026,
   docs/diseno/locales-lista.html) ──────────────────────────────────────────────────────────────
   Pestañas En cartera / Traspasados / Retirados / Todos, filtros siempre a la vista, foto pequeña en
   cada fila y las acciones detrás de «⋯». En el móvil, una fila por local (sin cabecera de columnas),
   igual que Oportunidades. Se mide con scripts/mirar-lista-locales.mjs. */
#contacts-dialog.contacts-qbx .pl-vistas { display: flex; gap: 4px; border-bottom: 1px solid var(--qbx-line, var(--line)); overflow-x: auto; scrollbar-width: none; flex: none; }
#contacts-dialog.contacts-qbx .pl-vista { min-height: 36px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--qbx-muted, var(--muted)); font: inherit; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; }
#contacts-dialog.contacts-qbx .pl-vista b { margin-left: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
#contacts-dialog.contacts-qbx .pl-vista.is-on { color: var(--qbx-text, var(--text)); border-bottom-color: var(--brand); font-weight: 600; }
@media (hover: hover) { #contacts-dialog.contacts-qbx .pl-vista:hover { color: var(--qbx-text, var(--text)); } }
#contacts-dialog.contacts-qbx .pl-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; flex: none; }
/* Cada filtro es una pastilla: el desplegable de verdad va encima, invisible, para que el toque abra
   el del sistema (en el móvil, la ruleta). La pastilla dice el valor elegido cuando lo hay. */
#contacts-dialog.contacts-qbx .pl-filtro { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px dashed var(--qbx-line-strong, var(--line-strong)); border-radius: 999px; background: none; color: var(--qbx-muted, var(--muted)); font: inherit; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; }
#contacts-dialog.contacts-qbx .pl-filtro .pl-filtro-t::after { content: " ▾"; font-size: var(--fs-xs); }
#contacts-dialog.contacts-qbx .pl-filtro select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
#contacts-dialog.contacts-qbx .pl-filtro.is-puesto { border-style: solid; border-color: var(--brand); color: var(--qbx-text, var(--text)); background: var(--panel-2, var(--w04)); font-weight: 500; }
#contacts-dialog.contacts-qbx .pl-resumen { margin-left: auto; color: var(--qbx-muted, var(--muted)); font-size: var(--fs-sm); }
#contacts-dialog.contacts-qbx .pl-resumen b { color: var(--qbx-text, var(--text)); font-weight: 600; font-variant-numeric: tabular-nums; }
#contacts-dialog.contacts-qbx .pl-solo-movil { display: none; }
#contacts-dialog.contacts-qbx .pl-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#contacts-dialog.contacts-qbx .pl-vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 0; color: var(--qbx-muted, var(--muted)); }
/* La tabla (ordenador). */
#contacts-dialog.contacts-qbx .pl-tabla { min-width: 960px; }
#contacts-dialog.contacts-qbx .pl-tabla th { font-size: var(--fs-xs); font-weight: 500; color: var(--qbx-muted, var(--muted)); height: 32px; padding: 0 12px; }
#contacts-dialog.contacts-qbx .pl-orden { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
#contacts-dialog.contacts-qbx .pl-orden.is-on { color: var(--qbx-text, var(--text)); font-weight: 600; }
#contacts-dialog.contacts-qbx .pl-fila td { height: 44px; padding: 6px 12px; font-size: var(--fs-sm); vertical-align: middle; }
#contacts-dialog.contacts-qbx .pl-fila { cursor: pointer; }
#contacts-dialog.contacts-qbx .pl-fila td.pl-c-foto { width: 40px; padding-right: 0; }
#contacts-dialog.contacts-qbx .pl-foto { display: block; width: 40px; height: 30px; object-fit: cover; border-radius: 5px; background: var(--panel-3, var(--w06)); }
#contacts-dialog.contacts-qbx .pl-nom { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
#contacts-dialog.contacts-qbx .pl-nom b { font-weight: 600; color: var(--qbx-text, var(--text)); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#contacts-dialog.contacts-qbx .pl-nom small { font-size: var(--fs-xs); color: var(--qbx-muted, var(--muted)); }
#contacts-dialog.contacts-qbx .pl-apagado { color: var(--qbx-muted, var(--muted)); }
#contacts-dialog.contacts-qbx .pl-c-precio, #contacts-dialog.contacts-qbx .pl-c-renta { font-variant-numeric: tabular-nums; }
#contacts-dialog.contacts-qbx .pl-c-precio { font-weight: 500; }
#contacts-dialog.contacts-qbx .pl-op { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-2xs); font-weight: 600; }
#contacts-dialog.contacts-qbx .pl-falta { color: var(--warn-text); font-size: var(--fs-xs); font-weight: 600; }
#contacts-dialog.contacts-qbx .pl-alta { font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; }
#contacts-dialog.contacts-qbx .pl-alta-ambar { color: var(--warn-text); }
#contacts-dialog.contacts-qbx .pl-alta-rojo { color: var(--danger-text); }
#contacts-dialog.contacts-qbx .pl-c-mas { position: relative; width: 40px; text-align: center; }
#contacts-dialog.contacts-qbx .pl-mas { width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--qbx-muted, var(--muted)); font-size: var(--fs-lg); font-weight: 700; cursor: pointer; }
@media (hover: hover) { #contacts-dialog.contacts-qbx .pl-mas:hover { background: var(--qbx-hover, var(--w06)); color: var(--qbx-text, var(--text)); } }
/* «⋯»: las acciones salen flotando junto al botón, dentro de su fila. */
#contacts-dialog.contacts-qbx .pl-acciones { display: none; }
#contacts-dialog.contacts-qbx .pl-fila.is-abierta .pl-acciones { display: flex; flex-direction: column; position: absolute; right: 44px; top: 50%; transform: translateY(-50%); z-index: 4; min-width: 200px; padding: 4px; border: 1px solid var(--qbx-line, var(--line)); border-radius: var(--radius-md); background: var(--panel, #fff); box-shadow: var(--sombra-flota, 0 8px 24px rgba(14,27,44,.14)); text-align: left; }
#contacts-dialog.contacts-qbx .pl-accion { display: flex; align-items: center; min-height: 32px; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--qbx-text, var(--text)); font: inherit; font-size: var(--fs-sm); text-decoration: none; text-align: left; white-space: nowrap; cursor: pointer; }
@media (hover: hover) { #contacts-dialog.contacts-qbx .pl-accion:hover { background: var(--qbx-hover, var(--w06)); } }
#contacts-dialog.contacts-qbx .pl-accion.is-active { color: var(--warn-text); }
/* Móvil: una fila por local, sin cabecera: foto · nombre (Nº · zona) · estado · «⋯», y debajo el
   precio, la renta y lo que falta. Las acciones se abren debajo, en la misma fila. */
@media (max-width: 720px) {
  #contacts-dialog.contacts-qbx .pl-tabla { min-width: 0; width: 100%; }
  #contacts-dialog.contacts-qbx .pl-tabla thead { display: none; }
  #contacts-dialog.contacts-qbx .pl-tabla, #contacts-dialog.contacts-qbx .pl-tabla tbody { display: block; }
  #contacts-dialog.contacts-qbx .pl-fila { display: grid; grid-template-columns: 56px minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr) auto 32px; grid-template-areas: "foto nom nom nom estado mas" "foto precio renta falta falta mas" "acc acc acc acc acc acc"; column-gap: 8px; row-gap: 2px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--qbx-line, var(--line)); }
  #contacts-dialog.contacts-qbx .pl-fila td { display: block; height: auto; padding: 0; border: 0; background: none; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-foto { grid-area: foto; width: auto; align-self: start; }
  #contacts-dialog.contacts-qbx .pl-foto { width: 56px; height: 44px; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-local { grid-area: nom; min-width: 0; overflow: hidden; }
  #contacts-dialog.contacts-qbx .pl-nom b { max-width: none; white-space: nowrap; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-estado { grid-area: estado; justify-self: end; }
  /* Estado y exclusiva, una debajo de otra en el móvil: lado a lado se comían el nombre del local (19-oct). */
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-precio { grid-area: precio; font-weight: 600; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-renta { grid-area: renta; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-falta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-renta::before { content: "· "; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-renta.is-vacia { display: none; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-falta { grid-area: falta; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-mas { grid-area: mas; width: auto; position: static; }
  #contacts-dialog.contacts-qbx .pl-mas { width: 32px; height: 44px; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-zona, #contacts-dialog.contacts-qbx .pl-fila td.pl-c-tipo, #contacts-dialog.contacts-qbx .pl-fila td.pl-c-asesor { display: none; }
  #contacts-dialog.contacts-qbx .pl-solo-movil { display: inline; }
  #contacts-dialog.contacts-qbx .pl-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #contacts-dialog.contacts-qbx .pl-filtro { min-height: 36px; }
  #contacts-dialog.contacts-qbx .pl-resumen { display: none; }
  #contacts-dialog.contacts-qbx .pl-fila.is-abierta .pl-acciones { grid-area: acc; position: static; transform: none; flex-direction: row; flex-wrap: wrap; min-width: 0; margin-top: 8px; box-shadow: none; }
  #contacts-dialog.contacts-qbx .pl-fila.is-abierta td.pl-c-mas { display: contents; }
  #contacts-dialog.contacts-qbx .pl-fila.is-abierta .pl-mas { grid-area: mas; }
  #contacts-dialog.contacts-qbx .pl-accion { min-height: 44px; }
}

/* ── Ficha de la OPORTUNIDAD por dentro (dibujo docs/diseno/ficha-oportunidad-por-dentro.html, «3A» del
   25-sep-2026). Usa las MISMAS piezas que la ficha del local (fl-apartado, fl-tit, fl-vacios, fl-leer);
   aquí va solo lo suyo: las dos columnas, las notas, las cajitas de «Lo que busca» y los locales en filas.
   Lo vigila scripts/mirar-ficha-oportunidad-por-dentro.mjs. */
.fo { container-type: inline-size; display: flex; flex-direction: column; min-width: 0; }
.fo-cuerpo { display: flex; flex-direction: column; min-width: 0; margin-top: 8px; border-top: 1px solid var(--qbx-line, var(--line)); }
.fo-main, .fo-notas { min-width: 0; }
.fo-tit { font-weight: 600; font-size: var(--fs-md); }
.fo-n { font-size: var(--fs-2xs); font-weight: 600; color: var(--brand-ink); background: rgba(var(--brand-rgb), 0.12); border-radius: 999px; padding: 1px 8px; }
.fo .fl-resumen { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-solo-ancho { display: contents; }
.fo-solo-estrecho { display: none; }
.fo .fd-eliminar, .fo .fd-incidencia { padding: 16px 0; }
/* Notas: la caja para escribir arriba, de una línea que crece; las de TRIA sola, en una línea gris. */
.fo .fd-note-add, .fl-notas .fd-note-add { margin: 0; flex-direction: row; align-items: flex-end; gap: 8px; }
.fo .fd-note-input, .fl-notas .fd-note-input { flex: 1 1 auto; min-height: 40px; resize: none; field-sizing: content; max-height: 200px; }
.fo .fd-note-send, .fl-notas .fd-note-send { flex: 0 0 auto; align-self: auto; min-height: 40px; }
.fo-notas-lista { display: flex; flex-direction: column; }
.fo .fd-comment, .fl-notas .fd-comment { padding: 10px 0; border-bottom: 0; border-top: 1px solid var(--qbx-line, var(--line)); }
/* Todas enteras; pulsar el texto la reduce a una línea (fundador, 26-sep). Las de TRIA sola, en gris y pequeñas. */
.fo .fd-comment-text { cursor: pointer; min-width: 0; }
.fo .fd-comment.is-reducida .fd-comment-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo .fd-comment.is-tria { padding: 6px 0; }
/* Las que escribe TRIA sola van en gris, pero del MISMO tamaño que las demás (fundador, 8-oct-2026). */
.fo .fd-comment.is-tria .fd-comment-text { color: var(--qbx-muted, var(--muted)); }
.fo-ver-notas { align-self: flex-start; }
/* Lo que busca: lo que tiene valor, en cajitas que se editan ahí mismo. */
.fo-busca { display: flex; flex-wrap: wrap; gap: 8px; }
.fo-busca:not(:has(.fo-val:not([hidden]))) { display: none; }
.fo-val { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 128px; padding: 4px 10px 6px; border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: var(--radius-sm); cursor: text; }
.fo-val > span { font-size: var(--fs-2xs); color: var(--qbx-muted, var(--muted)); }
/* El campo va DENTRO de la cajita: sin su recuadro propio (las reglas generales de .fd-crit van con
   #contacts-dialog, por eso esta también). */
#contacts-dialog.contacts-qbx .fo .fo-val .fd-crit { width: 100%; max-width: none; min-height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; color: var(--qbx-text, var(--text)); font: inherit; font-size: var(--fs-sm); font-weight: 600; box-shadow: none; }
#contacts-dialog.contacts-qbx .fo .fo-val select.fd-crit { padding-right: 18px; background-position: calc(100% - 5px) 50%, 100% 50%; }
#contacts-dialog.contacts-qbx .fo .fo-val .fd-crit:focus { outline: none; border: 0; }
.fo-val:focus-within { border-color: var(--brand); }
/* Móvil y correo del cliente (28-sep-2026): una CAJA a la vista, con su lápiz a la derecha, para que se
   entienda que se puede cambiar pinchando (fundador: «que se vea la casilla»). Mismo borde y fondo que el
   desplegable «Permiso para correos» de al lado. */
#contacts-dialog.contacts-qbx .fo .fd-contacto-caja { position: relative; display: block; width: 100%; max-width: 320px; }
#contacts-dialog.contacts-qbx .fo .fd-contacto { display: block; width: 100%; min-height: 36px; margin: 0; padding: 6px 36px 6px 12px; border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: var(--radius-sm); background-color: var(--qbx-bg, var(--bg)); color: var(--qbx-text, var(--text)); font: inherit; font-size: var(--fs-sm); font-weight: 600; box-shadow: none; cursor: text; }
#contacts-dialog.contacts-qbx .fo .fd-contacto-caja > svg { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: currentColor; color: var(--qbx-muted, var(--muted)); pointer-events: none; }
#contacts-dialog.contacts-qbx .fo .fd-contacto::placeholder { color: var(--qbx-muted, var(--muted)); font-weight: 400; }
/* El ejemplo de una caja vacía, en gris y sin negrita: si no, parece un dato ya puesto. */
#contacts-dialog.contacts-qbx .fo .fo-val .fd-crit::placeholder { color: var(--qbx-muted, var(--muted)); font-weight: 400; }
#contacts-dialog.contacts-qbx .fo .fd-contacto:focus { outline: none; border-color: var(--brand); }
#contacts-dialog.contacts-qbx .fo .fd-contacto-caja:focus-within > svg { color: var(--brand); }
#contacts-dialog.contacts-qbx .fo .fd-contacto:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) { #contacts-dialog.contacts-qbx .fo .fd-contacto:hover { border-color: var(--brand); } }
/* En el móvil, 16 px y 44 de alto: con menos, el iPhone hace zoom al tocar la casilla. */
@media (max-width: 720px) {
  #contacts-dialog.contacts-qbx .fo .fd-contacto-caja { max-width: none; }
  #contacts-dialog.contacts-qbx .fo .fd-contacto { min-height: 44px; font-size: 16px; }
  #contacts-dialog.contacts-qbx .fo .fo-val .fd-vend { font-size: 16px; }
}
.fo-ia { margin: 0; font-size: var(--fs-xs); color: var(--qbx-muted, var(--muted)); }
.fo-ia .fl-leer { font-size: var(--fs-xs); font-weight: 600; }
.fo .fd-interpret { margin: 0; }
/* Locales: una fila por local, como la lista de Locales; pinchar la fila abre su ficha. */
.fo .fo-loc { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "abrir acc" "otras otras"; align-items: center; gap: 4px 12px; padding: 6px 0; border-bottom: 0; border-top: 1px solid var(--qbx-line, var(--line)); flex-wrap: nowrap; }
.fo .fo-loc:first-child { border-top: 0; }
.fo-loc-abrir { grid-area: abrir; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fo-loc-foto { flex: 0 0 48px; width: 48px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--panel-2, var(--w06)); }
.fo-loc-txt { display: flex; flex-direction: column; min-width: 0; }
.fo-loc-nom { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-loc-sub { font-size: var(--fs-xs); color: var(--qbx-muted, var(--muted)); }
.fo .fo-loc-sub .fd-prop-date { display: inline; margin: 0; font-size: inherit; }
@media (hover: hover) { .fo-loc-abrir:hover .fo-loc-nom { text-decoration: underline; } }
.fo-loc-acc { grid-area: acc; display: flex; align-items: center; gap: 6px; }
.fo-loc-otras { grid-area: otras; display: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-bottom: 4px; }
.fo-loc.is-abierta .fo-loc-otras { display: flex; }
.fo .fo-loc button, .fo-loc-web { min-height: 32px; font-size: var(--fs-xs); }
.fo-loc-web { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: var(--radius-sm); color: var(--link); font-weight: 600; text-decoration: none; }
.fo-loc-mas { width: 32px; padding: 0; border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: var(--radius-sm); background: transparent; color: var(--qbx-text, var(--text)); font: inherit; font-weight: 700; line-height: 1; cursor: pointer; }
.fo-loc.is-abierta .fo-loc-mas { background: var(--panel-2, var(--w06)); }
/* Ordenador: lo que busca y los locales a la izquierda; las notas a la derecha, siempre a la vista. */
@container (min-width: 760px) {
  .fo-cuerpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); column-gap: 24px; align-items: start; }
  .fo-main { grid-column: 1; grid-row: 1; }
  .fo-notas { grid-column: 2; grid-row: 1; padding-left: 20px; border-left: 1px solid var(--qbx-line, var(--line)); }
  .fo-notas .fl-apartado { border-bottom: 0; }
  .fo-ver-notas { display: none; }
}
/* Móvil: solo la nota más nueva (y «Ver las anteriores»); los plegados enseñan su resumen. */
@container (max-width: 759px) {
  .fo-solo-ancho { display: none; }
  .fo-solo-estrecho { display: contents; }
  .fo-notas:not(.is-todas) .fd-comment ~ .fd-comment { display: none; }
  .fo .fl-apartado[open] > .fl-tit .fl-resumen { display: none; }
  .fo .fl-apartado:not([open]) > .fl-tit .fl-resumen { display: block; font-size: var(--fs-xs); }
  .fo .fl-cuerpo { padding-left: 0; }
  .fo .fo-loc button, .fo-loc-web { min-height: 44px; }
  .fo-loc-mas { width: 44px; }
  .fo .fd-note-input, .fo .fd-note-send, .fl-notas .fd-note-input, .fl-notas .fd-note-send { min-height: 44px; }
  .fo-val { flex: 1 1 40%; min-width: 0; }
  /* El nombre del local, entero (en dos líneas si hace falta), como pedía el paso 3. */
  .fo-loc-nom { white-space: normal; overflow-wrap: anywhere; }
}

/* ── PANTALLA SOLA: CRM, AGENDA, CORREO Y WESIGN DENTRO DEL BACKOFFICE (26-sep-2026, zona `diseno`) ──
   El backoffice abre estas pantallas en un marco con `?pantalla=…` (menú del 26-sep, dibujo
   `docs/diseno/menu-backoffice-pestanas.html`). Es la misma app: aquí solo se esconde lo de alrededor.
   · El chat, sus barras y los fondos oscuros de detrás no se ven: la pantalla ocupa el marco entero.
   · Sin «Cerrar»: dentro del backoffice no hay chat al que volver (y si algo la cierra, app.js la
     vuelve a abrir: maybeAbrirPantallaPedida).
   · Sin el borde de la ventana: ya lo pone el marco del backoffice. */
html.pantalla-sola #app-shell,
html.pantalla-sola #side-drawer,
html.pantalla-sola #drawer-backdrop,
html.pantalla-sola .dialog-backdrop { visibility: hidden !important; }
html.pantalla-sola #close-contacts-dialog,
html.pantalla-sola #close-agenda-dialog,
html.pantalla-sola .mail-overlay .mail-x { display: none !important; }
html.pantalla-sola #contacts-dialog.contacts-qbx,
html.pantalla-sola #agenda-dialog.agenda-dialog { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

/* ── «NADIE HA LLAMADO» Y «POR MOVER» DENTRO DEL CRM (26-sep-2026; dibujo aprobado «A, A, A»:
   docs/diseno/filtros-crm-nadie-ha-llamado-por-mover.html) ──────────────────────────────────────
   Oportunidades: la casilla lleva su número y, marcada, la línea azul con cifras que se tocan; en la
   fila, cuánto lleva esperando y «Sin teléfono». Locales: el botón «Por mover» y la columna «Falta»
   con lo que le falta a cada local. 32 px en el ordenador, 44 en el móvil; el color, siempre con palabra. */
#contacts-dialog.contacts-qbx .contacts-check-num { margin-left: 2px; padding: 0 8px; border-radius: 999px; background: var(--qbx-hover, var(--w06)); color: var(--qbx-text, var(--text)); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 20px; }
#contacts-dialog.contacts-qbx .contacts-check-nuevos:has(input:checked) { color: var(--qbx-text, var(--text)); font-weight: 500; }
#contacts-dialog.contacts-qbx .nadie-linea { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; padding: 12px; border: 1px solid rgba(var(--brand-rgb), 0.28); border-radius: var(--radius-md); background: rgba(var(--brand-rgb), 0.06); flex: none; }
/* 🔴 El diálogo es una REJILLA de filas fijas (cabecera, barra, filtros, lista…): la línea necesita SU
   fila, siempre ocupada (vacía mide 0) para que la lista no cambie de fila al marcar la casilla. Sin
   esto la línea caía en la fila de la lista y quedaba debajo de la tabla (medido en producción). */
#contacts-dialog.contacts-qbx { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto !important; }
/* 🔴 Con !important: la regla general `[hidden] { display: none !important }` la sacaba de la rejilla, la
   lista caía en SU fila (auto) y en el móvil competía con «Mostrar filtros», que se quedaba en 116 px con
   los filtros montados (visto por el fundador el 28-sep). Oculta, sigue ocupando su fila con 0 de alto. */
#contacts-dialog.contacts-qbx #contacts-nadie[hidden] { display: block !important; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; visibility: hidden; }
#contacts-dialog.showing-detail #contacts-nadie,
#contacts-dialog.contacts-qbx.showing-detail #contacts-nadie[hidden] { display: none !important; }
#contacts-dialog.contacts-qbx .nadie-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#contacts-dialog.contacts-qbx .nadie-t { min-width: 72px; color: var(--qbx-muted, var(--muted)); font-size: var(--fs-xs); font-weight: 500; }
#contacts-dialog.contacts-qbx .nadie-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: 999px; background: var(--panel, transparent); color: var(--qbx-text, var(--text)); font: inherit; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; }
#contacts-dialog.contacts-qbx .nadie-chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
#contacts-dialog.contacts-qbx .nadie-chip.nadie-total { font-weight: 600; }
#contacts-dialog.contacts-qbx .nadie-chip.is-on { border-color: var(--brand); background: rgba(var(--brand-rgb), 0.16); }
#contacts-dialog.contacts-qbx .nadie-chip.nadie-ambar { border-color: var(--warn-border, var(--warn-text)); background: var(--warn-bg); color: var(--warn-text); }
#contacts-dialog.contacts-qbx .nadie-chip.nadie-ambar.is-on { border-color: var(--warn-text); }
@media (hover: hover) { #contacts-dialog.contacts-qbx .nadie-chip:hover { border-color: var(--brand); } }
#contacts-dialog.contacts-qbx .nadie-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#contacts-dialog.contacts-qbx .nadie-solo-movil { display: none; }
#contacts-dialog.contacts-qbx .nadie-parcial { margin: 0; color: var(--warn-text); font-size: var(--fs-xs); }
/* Cuánto lleva esperando (columna «Creado» y línea del móvil): negrita esta semana, ámbar de 7 a 30 días,
   gris a partir de ahí. No en rojo: si todo está en rojo, nada destaca (hoy 388 de 419 pasan del mes). */
#contacts-dialog.contacts-qbx .nadie-hace { font-weight: 600; color: var(--qbx-text, var(--text)); }
#contacts-dialog.contacts-qbx .nadie-hace.es-ambar { color: var(--warn-text); }
#contacts-dialog.contacts-qbx .nadie-hace.es-gris { font-weight: 500; color: var(--qbx-muted, var(--muted)); }
#contacts-dialog.contacts-qbx .cqx-c-creado .nadie-hace { display: block; }
#contacts-dialog.contacts-qbx .cqx-c-creado .nadie-fecha { display: block; color: var(--qbx-muted, var(--muted)); font-size: var(--fs-xs); }
#contacts-dialog.contacts-qbx .cqx-sintel { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-2xs, var(--fs-xs)); font-weight: 600; white-space: nowrap; }
#contacts-dialog.contacts-qbx .cqx-m-entro b { font-weight: 600; }
@media (max-width: 720px) {
  /* Cada renglón, en UNA línea que se desliza de lado (como los filtros de Locales): con la fila «Por
     asesor» la línea medía 638 px y echaba la lista fuera de la pantalla (medido en producción). */
  #contacts-dialog.contacts-qbx .nadie-linea { padding: 10px 0 10px 10px; gap: 6px; }
  #contacts-dialog.contacts-qbx .nadie-fila { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 10px; }
  #contacts-dialog.contacts-qbx .nadie-fila::-webkit-scrollbar { display: none; }
  #contacts-dialog.contacts-qbx .nadie-chip { flex: none; }
  /* Con «Mostrar filtros» abierto la lista cede su alto mínimo (220 px): si no, se montaba encima de la
     paginación (visto el 28-sep). Se lee al cerrar los filtros; mientras, desliza en su hueco. */
  #contacts-dialog.contacts-qbx:has(#contacts-filters:not(.is-collapsed)) .contacts-results { min-height: 0; }
  #contacts-dialog.contacts-qbx .nadie-t { display: none; }
  #contacts-dialog.contacts-qbx .nadie-chip { min-height: 44px; padding: 0 14px; }
  #contacts-dialog.contacts-qbx .nadie-solo-pc { display: none; }
  #contacts-dialog.contacts-qbx .nadie-solo-movil { display: inline-flex; }
  /* En la fila del móvil «Sin teléfono» va en la línea de debajo, no donde iban llamar y WhatsApp. */
  #contacts-dialog.contacts-qbx .cqx-row .cqx-name-row > .cqx-sintel { display: none; }
}

/* ── «Nuevos»: la TIRA y la lista a la vista (8-oct-2026, dibujo https://claude.ai/artifact/2c1beGaneq5F1mua6oytw8,
   opción B + los tres arreglos comunes, elegidos por el fundador). Medido antes en producción: a 470 px de alto y
   con «Nuevos» la lista medía 5 px; a 720 px se veían 4 filas.
   La tira es UNA línea (el total y lo elegido); el panel de cifras, el de siempre, se abre ENCIMA de la lista. */
#contacts-dialog.contacts-qbx .nadie-linea { display: block; position: relative; z-index: 6; margin: 2px 0 6px; padding: 0; border: 0; background: none; }
#contacts-dialog.contacts-qbx .nadie-tira { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 6px 5px 12px; border: 1px solid rgba(var(--brand-rgb), 0.28); border-radius: var(--radius-md); background: rgba(var(--brand-rgb), 0.06); }
#contacts-dialog.contacts-qbx .nadie-tira-sel { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#contacts-dialog.contacts-qbx .nadie-tira-sel::-webkit-scrollbar { display: none; }
#contacts-dialog.contacts-qbx .nadie-tira-total { flex: none; font-size: var(--fs-sm); white-space: nowrap; }
#contacts-dialog.contacts-qbx .nadie-tira-total b { font-weight: 700; font-variant-numeric: tabular-nums; }
#contacts-dialog.contacts-qbx .nadie-tira-todos { flex: none; color: var(--qbx-muted, var(--muted)); font-size: var(--fs-sm); }
#contacts-dialog.contacts-qbx .nadie-quita { flex: none; }
#contacts-dialog.contacts-qbx .nadie-abre { flex: none; min-height: 32px; padding: 0 12px; font-size: var(--fs-sm); white-space: nowrap; }
#contacts-dialog.contacts-qbx .nadie-cuerpo { position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid rgba(var(--brand-rgb), 0.28); border-radius: var(--radius-md); background: linear-gradient(rgba(var(--brand-rgb), 0.06), rgba(var(--brand-rgb), 0.06)), var(--qbx-bg); box-shadow: var(--sombra-flota, 0 12px 32px rgba(14, 27, 44, 0.18)); max-height: min(60vh, 420px); overflow-y: auto; }
@media (max-width: 720px) {
  #contacts-dialog.contacts-qbx .nadie-linea { padding: 0; }
  #contacts-dialog.contacts-qbx .nadie-tira { padding: 4px 6px 4px 10px; }
  #contacts-dialog.contacts-qbx .nadie-abre { min-height: 44px; }
  #contacts-dialog.contacts-qbx .nadie-cuerpo { padding: 10px 0 10px 10px; }
}
/* Arreglo común 1 · la barra de arriba en UNA fila (buscador, ✨, filtros, ★, orden, Añadir y «Nuevos»): hoy eran dos.
   Si en algún ancho no cabe, baja sola a la segunda fila como antes (flex-wrap). */
@media (min-width: 900px) {
  #contacts-dialog.contacts-qbx .contacts-actionbar { flex-wrap: wrap; row-gap: 8px; }
  #contacts-dialog.contacts-qbx .contacts-searchbar { flex: 1 1 240px; margin: 0; min-width: 0; }
  #contacts-dialog.contacts-qbx .contacts-controls-row { flex: 0 1 auto; min-width: 0; }
  #contacts-dialog.contacts-qbx .contacts-controls-row .contacts-sort { margin-left: 0; max-width: 210px; }
}
/* Arreglo común 2 · el pie más fino en el ordenador (en el móvil ya lo era desde el 21-sep): una línea de páginas
   y menos aire debajo. */
@media (min-width: 769px) {
  #contacts-dialog.contacts-qbx:not(.showing-detail) { padding-bottom: 6px !important; }
  #contacts-dialog.contacts-qbx .contacts-pager { padding: 3px 4px 0; }
  #contacts-dialog.contacts-qbx .cqx-pg-num,
  #contacts-dialog.contacts-qbx .cqx-pg-arrow { height: 28px; min-width: 28px; }
}
/* Arreglo común 3 · ventana muy baja: la lista no se aplasta. Su fila guarda sitio para unas 4 filas y es el
   DIÁLOGO entero el que se desplaza (lo de arriba se va al bajar). Antes la lista desbordaba su fila y el pie
   se montaba encima de las filas. */
@media (max-height: 560px) and (min-width: 721px) {
  #contacts-dialog.contacts-qbx:not(.showing-detail) { overflow-y: auto !important; grid-template-rows: auto auto auto auto minmax(260px, 1fr) auto auto auto !important; }
}

/* Locales: «Por mover» es un filtro más; la columna «Falta» apila lo que le falta a cada local. */
#contacts-dialog.contacts-qbx .pl-falta-pila { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 180px; line-height: 1.3; }
#contacts-dialog.contacts-qbx .pl-ofrecer { display: inline-flex; align-items: baseline; gap: 6px; color: var(--warn-text); font-size: var(--fs-xs); }
#contacts-dialog.contacts-qbx .pl-ofrecer b { font-weight: 600; }
#contacts-dialog.contacts-qbx .pl-ofrecer small { color: var(--qbx-muted, var(--muted)); font-size: var(--fs-2xs, var(--fs-xs)); }
#contacts-dialog.contacts-qbx .pl-ir { padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-xs); font-weight: 600; text-align: left; cursor: pointer; }
#contacts-dialog.contacts-qbx .pl-encaja { color: var(--link, var(--brand-ink)); }
#contacts-dialog.contacts-qbx .pl-sinllamar { color: var(--danger-text); }
@media (hover: hover) { #contacts-dialog.contacts-qbx .pl-ir:hover { text-decoration: underline; } }
#contacts-dialog.contacts-qbx .pl-ir:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#contacts-dialog.contacts-qbx .pl-otros,
#contacts-dialog.contacts-qbx .pl-deotro { color: var(--qbx-muted, var(--muted)); font-size: var(--fs-2xs, var(--fs-xs)); }
#contacts-dialog.contacts-qbx .pl-deotro { color: var(--danger-text); font-weight: 500; }
/* Cada aviso de «Falta», en UNA línea y cortado con «…» (dibujo C del 3-oct: «Alta: 5 avisos, el primero sin
   licencia definitiva»); el texto entero sale al pasar el ratón y en la ficha. Medido el 7-oct a 1280 px: con
   `.prop-table td { white-space: nowrap }` la frase entera estiraba la tabla 471 px y «⋯» quedaba fuera. */
#contacts-dialog.contacts-qbx .pl-falta-pila { width: 240px; min-width: 0; }
#contacts-dialog.contacts-qbx .pl-falta-pila > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#contacts-dialog.contacts-qbx .pl-alta { display: block; }
/* «Ofrecerlo» era inline-flex y el «…» no actúa dentro de un flex (lo vio el juez): en bloque, con su hueco a mano. */
#contacts-dialog.contacts-qbx .pl-falta-pila > .pl-ofrecer { display: block; }
#contacts-dialog.contacts-qbx .pl-falta-pila > .pl-ofrecer small { margin-left: 6px; }
/* Y la tabla entera a la vista, con «⋯» (el dibujo del 26-sep la pone en ~1.140 px): Zona y Asesor ceden su
   sitio con «…» cuando no cabe todo (`max-width: 0` deja que la tabla los encoja; a 1.440 px salen enteros). */
@media (min-width: 721px) {
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-zona,
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-asesor { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Sin un ancho propio la tabla les dejaba solo las sobras (medido: 59 y 71 px, «Mad…»). */
  #contacts-dialog.contacts-qbx .pl-tabla th.pl-c-zona { width: 11%; }
  #contacts-dialog.contacts-qbx .pl-tabla th.pl-c-asesor { width: 13%; }
}
@media (max-width: 720px) {
  #contacts-dialog.contacts-qbx .pl-falta-pila { width: auto; }
  #contacts-dialog.contacts-qbx .pl-alta { flex-basis: 100%; }
  /* La pila de «Falta» ocupa su propio renglón bajo el precio, entera (antes cabía una palabra y se cortaba). */
  #contacts-dialog.contacts-qbx .pl-fila { grid-template-areas: "foto nom nom nom estado mas" "foto precio renta renta renta mas" "foto falta falta falta falta mas" "acc acc acc acc acc acc"; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-falta { overflow: visible; white-space: normal; text-overflow: clip; }
  #contacts-dialog.contacts-qbx .pl-fila td.pl-c-falta:empty { display: none; }
  #contacts-dialog.contacts-qbx .pl-falta-pila { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 10px; min-width: 0; margin-top: 4px; }
  #contacts-dialog.contacts-qbx .pl-ir { min-height: 44px; }
  #contacts-dialog.contacts-qbx .pl-otros { display: none; }
}

/* ───── CAMBIOS MASIVOS en Oportunidades (14-oct-2026, dibujo aprobado docs/estado/qobrix/dibujos/cambios-masivos) ─────
   Casilla por fila (y la de la página en la cabecera), la fila elegida con fondo azul suave, una línea encima
   («Has elegido 3 de esta página · Elegir los 50 · Como mucho 100») y una barra que flota abajo con las
   acciones. Sin animación: es una lista de uso diario (emil-design-eng). En el móvil las casillas solo salen
   con «Elegir» pulsado y la barra lleva las palabras cortas. */
#contacts-dialog.contacts-qbx .cqx-table.con-eleccion .cqx-thead,
#contacts-dialog.contacts-qbx .cqx-table.con-eleccion .cqx-row {
  grid-template-columns: 24px minmax(170px, 2.1fr) 0.9fr 1.2fr 1fr 1.2fr 1.1fr 1.2fr;
}
#contacts-dialog.contacts-qbx .cqx-table.con-eleccion.no-advisor .cqx-thead,
#contacts-dialog.contacts-qbx .cqx-table.con-eleccion.no-advisor .cqx-row {
  grid-template-columns: 24px minmax(170px, 2.3fr) 0.9fr 1.2fr 1fr 1.2fr 1.2fr;
}
#contacts-dialog.contacts-qbx .cqx-c-elegir { display: flex; align-items: center; justify-content: center; overflow: visible; }
#contacts-dialog.contacts-qbx .cqx-thead > .cqx-c-elegir + *,
#contacts-dialog.contacts-qbx .cqx-row > .cqx-c-elegir + * { border-left: 0; padding-left: 0; }
#contacts-dialog.contacts-qbx .cqx-elegir,
#contacts-dialog.contacts-qbx .cqx-elegir-todos { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
#contacts-dialog.contacts-qbx .cqx-row.is-elegida,
#contacts-dialog.contacts-qbx .cqx-row.is-elegida:hover { background: rgba(var(--brand-rgb), 0.08); }
#contacts-dialog.contacts-qbx .cqx-lote-aviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 8px; padding: 8px 12px;
  border: 1px solid rgba(var(--brand-rgb), 0.28); border-radius: var(--radius-md); background: rgba(var(--brand-rgb), 0.06);
  font-size: var(--fs-sm); color: var(--qbx-text);
}
#contacts-dialog.contacts-qbx .cqx-lote-aviso[hidden] { display: none; }
#contacts-dialog.contacts-qbx .cqx-lote-pagina { border: 0; padding: 0; background: none; font: inherit; color: var(--brand-ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
#contacts-dialog.contacts-qbx .cqx-lote-tope { color: var(--qbx-muted); }
/* La barra (dibujo «Main»): oscura y a lo ancho abajo, por encima de la lista (no ocupa fila en la rejilla del
   diálogo). Es la INVERSA del panel: fondo del color del texto y letra del color del fondo, así en el tema claro
   sale oscura como en el dibujo y en el oscuro se distingue igual. «Cambiar asesor» en azul, estado y calidad
   en botón de la barra, y «Quitar la selección» empujado a la derecha. */
#contacts-dialog .cqx-lote-barra {
  --lote-fondo: var(--text);
  --lote-letra: var(--panel);
  position: fixed; left: 24px; right: 24px; bottom: 20px; z-index: 10070;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 20px;
  border-radius: var(--radius-lg, 14px); background: var(--lote-fondo); color: var(--lote-letra);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
#contacts-dialog .cqx-lote-barra .btn { min-height: 44px; padding: 0 16px; white-space: nowrap; font-weight: 600; }
#contacts-dialog .cqx-lote-barra .btn.ghost {
  background: color-mix(in srgb, var(--lote-letra) 10%, var(--lote-fondo));
  border: 1px solid color-mix(in srgb, var(--lote-letra) 28%, var(--lote-fondo)); color: var(--lote-letra);
}
#contacts-dialog .cqx-lote-barra .btn.ghost:hover { background: color-mix(in srgb, var(--lote-letra) 18%, var(--lote-fondo)); }
#contacts-dialog .cqx-lote-barra .cqx-lote-quitar.btn.ghost { background: transparent; border-color: transparent; color: color-mix(in srgb, var(--lote-letra) 80%, var(--lote-fondo)); }
#contacts-dialog .cqx-lote-barra .cqx-lote-hueco { flex: 1 1 auto; }
#contacts-dialog .cqx-lote-barra .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* El menú del responsable (dibujo «Equipo»): sale encima de la barra, sobre «Cambiar asesor». */
#contacts-dialog .cqx-lote-menu {
  position: absolute; bottom: calc(100% + 8px); left: 120px; min-width: 260px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: 12px;
  background: var(--panel); color: var(--qbx-text, var(--text)); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
#contacts-dialog .cqx-lote-menu[hidden] { display: none; }
#contacts-dialog .cqx-lote-menu-t { padding: 6px 10px; font-size: var(--fs-sm); font-weight: 650; color: var(--qbx-muted, var(--muted)); }
#contacts-dialog .cqx-lote-menu button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#contacts-dialog .cqx-lote-menu button:hover, #contacts-dialog .cqx-lote-menu button:focus-visible { background: var(--qbx-hover, var(--w06)); outline: none; }
#contacts-dialog .cqx-lote-menu-pie { margin-top: 4px; padding: 8px 10px; border-top: 1px solid var(--w06); font-size: var(--fs-sm); color: var(--qbx-muted, var(--muted)); }
/* «Elegir los N de esta página» y «N elegidos» de la línea de arriba: así en el móvil (dibujo «Movil»). */
#contacts-dialog.contacts-qbx .cqx-lote-pagina-m,
#contacts-dialog.contacts-qbx .cqx-lote-n-m { display: none; }
#contacts-dialog .cqx-lote-barra[hidden],
#contacts-dialog.showing-detail .cqx-lote-barra { display: none; }
#contacts-dialog .cqx-lote-barra .cqx-lote-n { margin-right: 8px; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
#contacts-dialog .cqx-lote-barra .lote-corto { display: none; }
/* Con la barra a la vista, el diálogo le deja sitio abajo: ni la última fila ni los botones de página quedan
   debajo de ella (medido: sin esto, «Página 1 de 53» quedaba tapado). */
#contacts-dialog.contacts-qbx.hay-elegidos { padding-bottom: 92px !important; }
/* Ventana de repasar (showAppConfirm `tabla` y `pie`). */
.app-confirm-dialog.con-tabla { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; gap: 14px; }
.app-confirm-tabla { max-height: 240px; overflow: auto; border: 1px solid var(--w12); border-radius: 10px; }
.app-confirm-tabla table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.app-confirm-tabla th { position: sticky; top: 0; background: var(--panel-2, var(--panel)); color: var(--muted); font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--w12); }
.app-confirm-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--w06); overflow-wrap: break-word; }
/* «Pasa a» no se parte por la mitad de una palabra («Nuev / o», medido a 390 px): se queda entera. */
.app-confirm-tabla th:last-child, .app-confirm-tabla td:last-child { white-space: nowrap; }
.app-confirm-tabla tr:last-child td { border-bottom: 0; }
.app-confirm-tabla td:last-child { font-weight: 600; }
.app-confirm-dialog .app-confirm-pie { font-size: var(--fs-sm); color: var(--muted); }
/* La «×» de cerrar arriba a la derecha (showAppConfirm `cerrarX`; dibujo «Revisar»). */
.app-confirm-dialog.con-x { position: relative; }
.app-confirm-dialog.con-x > h2 { padding-right: 52px; }
.app-confirm-x { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--w12); background: transparent; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.app-confirm-x:hover { background: var(--w06); }
.app-confirm-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* «Elegir» / «Listo»: solo en el móvil (en el ordenador las casillas se ven siempre). */
#contacts-dialog .contacts-elegir { display: none; }
@media (max-width: 720px) {
  #contacts-dialog .contacts-elegir:not([hidden]) {
    display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: 999px; background: transparent;
    color: var(--brand-ink); font: inherit; font-size: var(--fs-sm); font-weight: 650; cursor: pointer;
  }
  #contacts-dialog .contacts-elegir[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
  #contacts-dialog.contacts-qbx .cqx-table.con-eleccion .cqx-row .cqx-c-elegir { display: none; }
  /* Sin «Elegir» pulsado, la fila del móvil de siempre (16-oct, fundador: «pestaña oportunidades móvil que está
     desordenada»): las columnas de ordenador con la casilla (arriba, fuera del @media) pisaban las del móvil y el
     icono de llamar caía encima del estado. */
  #contacts-dialog.contacts-qbx .cqx-table.con-eleccion .cqx-row,
  #contacts-dialog.contacts-qbx .cqx-table.con-eleccion.no-advisor .cqx-row { grid-template-columns: minmax(0, 1fr) 44px 44px 44px; }
  #contacts-dialog.contacts-qbx .cqx-table.con-eleccion.eligiendo .cqx-row {
    grid-template-columns: 40px minmax(0, 1fr) 44px 44px 44px;
    grid-template-areas:
      "elegir nombre  nombre nombre fecha"
      "elegir linea   linea  linea  linea"
      ".      vence   vence  vence  vence"
      ".      estado  llamar wa     mas"
      ".      asesor  asesor asesor asesor"
      ".      nota    nota   nota   nota"
      ".      botones botones botones botones";
    padding-left: 4px;
  }
  #contacts-dialog.contacts-qbx .cqx-table.con-eleccion.eligiendo .cqx-row .cqx-c-elegir { display: flex; grid-area: elegir; align-self: center; }
  #contacts-dialog.contacts-qbx .cqx-table.eligiendo .cqx-elegir { width: 22px; height: 22px; }
  /* Eligiendo, la fila entera es UN blanco: sus controles (estado, llamar, WhatsApp, «⋯», el nombre que se
     edita) no se quedan el toque. Chrome «corrige» el toque hacia el control más cercano y sin esto tocar
     la línea de debajo abría el desplegable del estado en vez de elegir la fila. */
  #contacts-dialog.contacts-qbx .cqx-table.eligiendo .cqx-row a,
  #contacts-dialog.contacts-qbx .cqx-table.eligiendo .cqx-row button,
  #contacts-dialog.contacts-qbx .cqx-table.eligiendo .cqx-row select,
  #contacts-dialog.contacts-qbx .cqx-table.eligiendo .cqx-row .tn-name-editable { pointer-events: none; }
  /* Móvil (dibujo «Movil»): «N elegidos» arriba y debajo los tres botones iguales, «Asesor» en azul. */
  #contacts-dialog .cqx-lote-barra { left: 10px; right: 10px; bottom: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: 16px; }
  #contacts-dialog .cqx-lote-barra .cqx-lote-n { grid-column: 1 / -1; margin: 0; padding-left: 4px; font-size: var(--fs-md); }
  #contacts-dialog .cqx-lote-barra .cqx-lote-hueco { display: none; }
  #contacts-dialog .cqx-lote-menu { left: 0; right: 0; min-width: 0; }
  /* Encima de la barra de abajo de la app (Chat, Agenda, CRM…), no debajo: medido en el móvil, quedaba tapada. */
  body.tiene-barra-movil #contacts-dialog .cqx-lote-barra { bottom: calc(var(--barra-movil-alto) + var(--barra-movil-fondo) + 8px); }
  #contacts-dialog.contacts-qbx.hay-elegidos { padding-bottom: 124px !important; }
  #contacts-dialog .cqx-lote-barra .btn { min-height: 44px; padding: 0 8px; }
  /* La línea de arriba: la casilla «Elegir los N de esta página» a la izquierda y «N elegidos» a la derecha. */
  /* Fija arriba al bajar por la lista (juez, 14-oct): «Elegir los N» y «N elegidos» siempre a la vista. */
  #contacts-dialog.contacts-qbx .cqx-lote-aviso { justify-content: space-between; border: 0; border-radius: 0; background: var(--qbx-bg, var(--panel)); padding: 0 4px; margin: 0; position: sticky; top: 0; z-index: 3; border-bottom: 1px solid var(--w06); }
  #contacts-dialog.contacts-qbx .cqx-lote-aviso > span:first-child,
  #contacts-dialog.contacts-qbx .cqx-lote-aviso .cqx-lote-pagina,
  #contacts-dialog.contacts-qbx .cqx-lote-aviso .cqx-lote-tope { display: none; }
  #contacts-dialog.contacts-qbx .cqx-lote-pagina-m { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-sm); color: var(--qbx-text); }
  #contacts-dialog.contacts-qbx .cqx-lote-pagina-m input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); }
  #contacts-dialog.contacts-qbx .cqx-lote-n-m { display: inline; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-ink); }
  #contacts-dialog .cqx-lote-barra .lote-largo,
  #contacts-dialog .cqx-lote-barra .cqx-lote-quitar { display: none; }
  #contacts-dialog .cqx-lote-barra .lote-corto { display: inline; }
}

/* ── Buscar dentro de la ficha (15-oct-2026, fundador: «una barra de búsqueda en la ficha de oportunidad y de local,
   que marque la palabra y, si hay más de una, con flechas»). Una pieza para las dos fichas (tnFichaBuscarMontar en
   app.js). Mismo aspecto que el buscador de la lista; se queda pegada arriba al bajar por la ficha. Sin animación:
   se usa muchas veces al día. Marcas: amarillo suave en todas y amarillo lleno en la que estás mirando. */
:root { --fbusca-hit: rgba(251, 191, 36, 0.28); --fbusca-actual: #fbbf24; --fbusca-actual-text: #10141b; }
:root[data-theme="light"] { --fbusca-hit: #fef08a; --fbusca-actual: #facc15; --fbusca-actual-text: #141a21; }
#contacts-detail-body > .tn-fbusca {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 8px 0;
  background: var(--qbx-bg, var(--panel));
}
.tn-fbusca .tn-fbusca-q {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 12px;
  border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--qbx-text, var(--text)); font: inherit; font-size: var(--fs-md);
}
.tn-fbusca .tn-fbusca-q::placeholder { color: var(--qbx-muted, var(--muted)); }
.tn-fbusca .tn-fbusca-q:focus { outline: none; border-color: var(--brand-ink); }
.tn-fbusca .tn-fbusca-q:focus-visible { box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.25); }
.tn-fbusca .tn-fbusca-n { flex: 0 0 auto; min-width: 48px; text-align: right; font-size: var(--fs-sm); color: var(--qbx-muted, var(--muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tn-fbusca .tn-fbusca-n:empty { display: none; }
.tn-fbusca .tn-fbusca-n.is-cero { color: var(--warn-text); }
.tn-fbusca .tn-fbusca-ir {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--qbx-line-strong, var(--line-strong)); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--qbx-text, var(--text)); font: inherit; font-size: var(--fs-md); line-height: 1; cursor: pointer;
}
.tn-fbusca .tn-fbusca-ir:disabled { opacity: 0.5; cursor: not-allowed; }
.tn-fbusca .tn-fbusca-ir:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 1px; }
@media (hover: hover) { .tn-fbusca .tn-fbusca-ir:not(:disabled):hover { border-color: var(--brand-ink); } }
mark.tn-fbusca-hit { background: var(--fbusca-hit); color: inherit; border-radius: 2px; padding: 0; }
mark.tn-fbusca-hit.is-fbusca-actual { background: var(--fbusca-actual); color: var(--fbusca-actual-text); }
.is-fbusca-campo { box-shadow: 0 0 0 2px var(--fbusca-hit) !important; }
.is-fbusca-campo.is-fbusca-actual { box-shadow: 0 0 0 2px var(--fbusca-actual) !important; }
@media (max-width: 720px) {
  .tn-fbusca .tn-fbusca-q, .tn-fbusca .tn-fbusca-ir { height: 44px; }
  .tn-fbusca .tn-fbusca-ir { width: 44px; }
  .tn-fbusca .tn-fbusca-q { font-size: 16px; } /* menos de 16 px hace que el iPhone amplíe la pantalla al tocar */
}

/* Tarea 166 · cuenta «prueba» (solo_lectura): lo ve todo como dirección, pero SIN botones de escribir ni la contraseña
   del formulario (además, el servidor ya no se la manda: codigo_formulario va en tn_solo_lectura_campo_prohibido).
   Solo con body.tn-cuenta-solo-lectura (app.js / admin.js): dirección y Javidan lo ven igual que antes.
   Va también en tria-base.css (colgando de html[data-diseno="nuevo"]) para el contenedor. */
body.tn-cuenta-solo-lectura .misval-codigo,
body.tn-cuenta-solo-lectura .val-codigo,
body.tn-cuenta-solo-lectura .misval-create-btn,
body.tn-cuenta-solo-lectura .misval-discard-btn,
body.tn-cuenta-solo-lectura .misval-reabrir-btn,
body.tn-cuenta-solo-lectura .misval-asignar-sel,
body.tn-cuenta-solo-lectura .misval-asignar-btn,
body.tn-cuenta-solo-lectura [data-accion-crm],
body.tn-cuenta-solo-lectura .t-cv-botones,
body.tn-cuenta-solo-lectura [data-t-cv-resp],
body.tn-cuenta-solo-lectura [data-t-cv-escribir],
/* 166 (30-oct, juez en vivo): decisiones de Inicio («Ya se lo he mandado», «No mandarlo», respuestas, «Ya está hecho»),
   mejoras («Confirmar para construir», «Descartar») y el chat de dirección («Guardar como propuesta», «Borrar la conversación»). */
body.tn-cuenta-solo-lectura [data-inicio-listado],
body.tn-cuenta-solo-lectura [data-inicio-responder],
body.tn-cuenta-solo-lectura [data-inicio-hecho],
body.tn-cuenta-solo-lectura [data-improve-confirm],
body.tn-cuenta-solo-lectura [data-improve-dismiss],
body.tn-cuenta-solo-lectura #admin-director-chat-capture,
body.tn-cuenta-solo-lectura #admin-director-chat-clear,
/* 166 bis (30-oct, juez en vivo): «Enviar» de Captación y «Confirmar»/«Descartar» de pendientes de dirección. */
body.tn-cuenta-solo-lectura [data-cap2-dec],
body.tn-cuenta-solo-lectura [data-pending-confirm],
body.tn-cuenta-solo-lectura [data-pending-dismiss],
body.tn-cuenta-solo-lectura [data-t-te-nueva] { display: none !important; }

/* «Actualizar» de cada pestaña (tria-armazon.js) solo en el diseño nuevo. Vivía en tria-base.css, pero allí toda regla
   tiene que colgar de html[data-diseno="nuevo"] (test_tria_base_solo_con_interruptor; tarea 174). */
html:not([data-diseno="nuevo"]) .t-actualizar { display: none; }