/* ═══════════════════════════════════════════════════════════════════
   UI v2 — tokens, tema y acento por workspace (Fase 2)
   Se carga DESPUÉS de main.css y del <style> inline de index.html.
   data-theme ("light" | "dark") y data-tenant los pone el script de <head> antes de pintar.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens: claro (default) ───────────────────────────────────────── */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --bg:            #efeee6;
  --surface:       #ffffff;
  --surface-2:     #f7f6f1;
  --surface-3:     #ecebe4;
  --border:        #e3e1d8;
  --border-strong: #cfccc1;
  --text:          #1d1b16;
  --text-muted:    #5f5c54;
  --text-subtle:   #8f8b80;

  --chrome:        #1d1b16;   /* sidebar y barra superior (oscuras en los dos temas) */
  --chrome-2:      #2a2721;
  --chrome-border: #34302a;
  --on-chrome:     #efeee6;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(29,27,22,.06);
  --shadow:    0 4px 16px rgba(29,27,22,.07);
  --shadow-lg: 0 12px 32px rgba(29,27,22,.10);

  /* Acento (Malvec por defecto) */
  --accent:        #8B1A4A;
  --accent-h:      #70133b;
  --on-accent:     #ffffff;
  --accent-soft:   #f6e8ee;
  --accent-soft-2: #ecc9d8;
  --accent-text:   #8B1A4A;   /* acento usado como color de texto */

  --success: #166534; --success-bg: #DCFCE7; --success-br: #BBF7D0;
  --warn:    #92400E; --warn-bg:    #FEF3C7; --warn-br:    #FDE68A;
  --danger:  #991B1B; --danger-bg:  #FEE2E2; --danger-br:  #FECACA;
  --info:    #1E40AF; --info-bg:    #DBEAFE; --info-br:    #BFDBFE;

  color-scheme: light;
}

:root[data-tenant="shyfts"] {
  --accent:        #2073c3;
  --accent-h:      color-mix(in srgb, #2073c3 85%, black);
  --accent-soft:   #eaf2fb;
  --accent-soft-2: #cfe1f5;
  --accent-text:   #2073c3;
}

/* ── Tokens: oscuro cálido (marrón/oliva, no navy) ─────────────────── */
:root[data-theme="dark"] {
  --bg:            #1a1814;
  --surface:       #24211c;
  --surface-2:     #2b2822;
  --surface-3:     #333029;
  --border:        #3b372f;
  --border-strong: #4d483e;
  --text:          #ece8df;
  --text-muted:    #bdb6a7;
  --text-subtle:   #8f897c;

  --chrome:        #12110e;
  --chrome-2:      #1f1d19;
  --chrome-border: #2c2924;
  --on-chrome:     #ece8df;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow:    0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.45);

  --accent-soft:   color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-soft-2: color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-text:   color-mix(in srgb, var(--accent) 45%, white);

  --success: #6ee7a0; --success-bg: rgba(34,197,94,.16);  --success-br: rgba(34,197,94,.35);
  --warn:    #fcd34d; --warn-bg:    rgba(245,158,11,.16); --warn-br:    rgba(245,158,11,.35);
  --danger:  #fca5a5; --danger-bg:  rgba(239,68,68,.16);  --danger-br:  rgba(239,68,68,.35);
  --info:    #93c5fd; --info-bg:    rgba(59,130,246,.16); --info-br:    rgba(59,130,246,.35);

  color-scheme: dark;
}

/* ── Tokens propios (prefijo --mc-): navegación mobile y Chats, solo lo que no tiene equivalente arriba ── */
:root {
  --mc-amber:   #f59e0b;   /* punto de "Para vos" y badges de la barra inferior */
  --mc-wa:      #179c4f;   /* badge de WhatsApp sobre el avatar */
  --mc-nav-ink: color-mix(in srgb, var(--on-chrome) 70%, var(--chrome)); /* ítems inactivos de la barra (fondo --chrome) */
}
:root[data-theme="dark"] {
  --mc-amber:   #fbbf24;
  --mc-wa:      #23a55a;
  --mc-nav-ink: color-mix(in srgb, var(--on-chrome) 64%, var(--chrome));
}

/* ── Variables viejas → tokens nuevos (lo existente hereda sin reescribir) ── */
:root {
  --sidebar-bg:     var(--chrome);
  --sidebar-hover:  var(--chrome-2);
  --sidebar-active: var(--accent);
  --bg-main:        var(--bg);
  --bg-card:        var(--surface);
  --text-primary:   var(--text);
  --text-sidebar:   var(--on-chrome);
  --gradient:       linear-gradient(135deg, var(--chrome), color-mix(in srgb, var(--accent) 80%, var(--chrome)));

  --navy:       var(--text);
  --navy-800:   var(--chrome-border);
  --navy-700:   var(--text);
  --slate-600:  var(--text-muted);
  --slate-500:  var(--text-muted);
  --slate-400:  var(--text-subtle);
  --slate-300:  var(--border-strong);
  --slate-200:  var(--border);
  --slate-100:  var(--surface-3);
  --slate-50:   var(--bg);
  --blue:       var(--accent);
  --blue-h:     var(--accent-h);
  --blue-100:   var(--accent-soft);
  --blue-200:   var(--accent-soft-2);

  /* Usadas en el código y nunca definidas hasta ahora */
  --wine:       var(--accent);
  --primary:    var(--accent);
  --slate-700:  var(--text);
  --slate-900:  var(--text);
}
/* --accent / --accent-h ya se definen arriba (y por tenant): pisan a los de main.css y del inline porque este archivo carga último. */

/* ── Shell (Fase 3): barra superior con píldoras + riel de íconos (barra inferior en mobile) ── */
html, body { background: var(--bg); color: var(--text); font-family: var(--font-sans); }
#page-loader { background: var(--gradient); }
:root { --ui-rail-w: 56px; }

/* Barra superior. */
.topbar.ui-topbar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  height: auto !important; min-height: 64px;
  padding: max(10px, env(safe-area-inset-top)) 20px 10px !important;
  background: var(--bg); color: var(--text);
  border-bottom: 1px solid var(--border); box-shadow: none;
}
.ui-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ui-brand-mark {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font: 700 15px/1 var(--font-sans);
}
.ui-brand-mark::after { content: "M"; }
.ui-brand-name { font: 700 16px/1 var(--font-sans); letter-spacing: -.3px; color: var(--text); white-space: nowrap; }
.ui-brand-name::after { content: "Malvec"; }
:root[data-tenant="shyfts"] .ui-brand-mark::after { content: "S"; }
:root[data-tenant="shyfts"] .ui-brand-name::after { content: "Shyfts"; }

/* Píldoras (pisan las reglas viejas de .nav-item del sidebar) */
.ui-pills { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.ui-pills .ui-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-muted);
  font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ui-pills .nav-item.ui-pill.active { background: var(--text); color: var(--bg); }
/* Regla aparte: si el navegador no soporta :has(), no se invalida la de arriba. */
.ui-more:has(.nav-item.active) > .ui-more-btn { background: var(--text); color: var(--bg); }
.ui-pill:focus-visible, .ui-rail-btn:focus-visible, .ui-menu-item:focus-visible, .ui-user-btn:focus-visible, .ui-icon-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.ui-caret { font-size: 10px; opacity: .7; }

/* Menús desplegables: Más, usuario, crear */
.ui-more, .ui-user, .ui-create { position: relative; }
.ui-more-menu, .ui-user-menu, .ui-create-menu {
  display: none; position: absolute; z-index: 60; min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.ui-more.open .ui-more-menu, .ui-user.open .ui-user-menu, .ui-create.open .ui-create-menu { display: flex; flex-direction: column; gap: 2px; }
.ui-more-menu { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.ui-user-menu { top: calc(100% + 8px); right: 0; min-width: 220px; }
.ui-create-menu { top: 0; left: calc(100% + 12px); }
.ui-menu-item,
.ui-pills .ui-more-menu .ui-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: auto; margin: 0; padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: 500 13px/1.2 var(--font-sans); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-pills .ui-more-menu .nav-item.ui-pill.active { background: var(--accent-soft); color: var(--accent-text); }
.ui-menu-item.ui-danger { color: var(--danger); }

/* Derecha: búsqueda, sync, tema, usuario */
.ui-topbar-right { display: flex; align-items: center; gap: 10px; justify-self: end; min-width: 0; }
.ui-topbar .gs-root { width: 240px; }
.ui-topbar .sync-bar { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); white-space: nowrap; }
.ui-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit;
}
.ui-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Lupa de mobile: oculta en escritorio (.ui-icon-btn la mostraría). Especificidad 0,2,0: los .gs-open de main.css (0,3,0) la siguen ocultando. */
.gs-toggle.ui-icon-btn { display: none; }
.ui-user-btn {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.ui-user .sidebar-user { padding: 0; border: 0; gap: 0; }
.ui-user .sidebar-user-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ui-user-info { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); min-width: 0; }
.ui-user-info .sidebar-user-name { color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-user-info .sidebar-user-email { color: var(--text-subtle); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Riel flotante de íconos (escritorio) */
.ui-rail {
  position: fixed; z-index: 80; left: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow);
}
.ui-rail .ui-rail-btn, .ui-icon-btn { -webkit-tap-highlight-color: transparent; }
.ui-rail .ui-rail-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s;
}
.ui-rail .nav-item.ui-rail-btn.active { background: var(--text); color: var(--bg); }
.ui-rail .ui-rail-create { background: var(--accent); color: var(--on-accent); }
.ui-rail-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-rail .ui-rail-badge {
  position: absolute; top: 1px; right: 1px; margin: 0; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #dc2626; color: #fff; font: 700 10px/17px var(--font-sans); text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.ui-rail .ui-rail-badge:empty { display: none !important; }
/* Solo mobile (≤767 px): ítems de la barra inferior, sus labels, el punto de "Más" y el título de la sección. */
.ui-rail .ui-rail-m, .ui-rail-lbl, .ui-rail-dot, .ui-brand-sec { display: none; }
.ui-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hover solo con puntero real (píldoras, menús, riel, botones redondos): en iPhone el :hover queda pegado después del tap y parece activo. */
@media (hover: hover) and (pointer: fine) {
  .ui-pills .ui-pill:hover { background: var(--surface-3); color: var(--text); }
  .ui-menu-item:hover, .ui-pills .ui-more-menu .ui-menu-item:hover { background: var(--surface-3); color: var(--text); }
  .ui-icon-btn:hover { background: var(--surface-3); }
  .ui-rail .ui-rail-btn:hover { background: var(--surface-3); color: var(--text); }
  .ui-rail .ui-rail-create:hover { background: var(--accent-h); color: var(--on-accent); }
}

/* Pipeline: "Ver N más" al pie de cada columna (pipeline.js, máx. 50 tarjetas por tanda) */
.stage-more-btn {
  display: block; width: 100%; margin-top: 8px; padding: 8px 10px;
  border: 1px dashed var(--border-strong); border-radius: 9px; background: transparent;
  color: var(--text-muted); font: 600 12px/1.2 var(--font-sans); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .stage-more-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--surface); }
}
.stage-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Contenido: lugar para el riel */
.ui-shell .content { padding-left: calc(var(--ui-rail-w) + 40px); }

/* Header de página reutilizable: uiPageHeader(title, kpis) */
.ui-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; margin: 4px 0 20px; }
.ui-ph-title { margin: 0; display: flex; flex-direction: column; font: 600 34px/1.05 var(--font-sans); letter-spacing: -1px; color: var(--text); }
.ui-ph-title span + span { color: var(--text-muted); }
.ui-ph-kpis { display: flex; gap: 12px; flex-wrap: wrap; }
.ui-ph-kpi {
  display: flex; align-items: center; gap: 12px; min-width: 170px; padding: 12px 18px 12px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ui-ph-kpi-ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--accent-soft); font-size: 18px;
}
.ui-ph-kpi-val { font: 700 20px/1.1 var(--font-sans); color: var(--text); }
.ui-ph-kpi-lbl { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.ui-ph-kpi-sub { font-size: 11px; color: var(--text-subtle); }

/* Escritorio angosto */
@media (max-width: 1100px) {
  .ui-pills .ui-pill { padding: 0 12px; }
  .ui-topbar .gs-root { width: 180px; }
}
@media (max-width: 900px) and (min-width: 768px) {
  .ui-brand-name { display: none; }
  .ui-topbar .sync-bar #sync-label { display: none; }
}

/* Mobile (≤767 px, PWA iPhone). Arriba: workspace chico y título grande de la sección (uiNavSync), sync y avatar a la
   derecha; sin píldoras (sus secciones están en "Más"). Abajo: barra de navegación flotante (el mismo .ui-rail):
   Inicio · Contactos · Chats (o Agenda si el workspace no tiene Chats) · Pipeline · Más (uiNavMore → uiDrawer). */
@media (max-width: 767px) {
  .topbar.ui-topbar {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand right"; align-items: end;
    gap: 8px 12px; min-height: 0; padding: calc(env(safe-area-inset-top) + 12px) 16px 4px !important; border-bottom: 0;
  }
  .ui-topbar .ui-brand { grid-area: brand; flex-direction: column; align-items: flex-start; gap: 0; }
  .ui-topbar .ui-brand-mark { display: none; }
  .ui-topbar .ui-brand-name { font: 600 13px/1.3 var(--font-sans); letter-spacing: 0; color: var(--text-muted); }
  .ui-topbar .ui-brand-sec {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 700 30px/1.15 var(--font-sans); letter-spacing: -.02em; color: var(--text);
  }
  .ui-pills { display: none; }
  .ui-topbar-right { grid-area: right; gap: 8px; padding-bottom: 4px; }
  .ui-topbar .gs-root { display: none; }
  .gs-toggle.ui-icon-btn { display: inline-flex; } /* lupa de la ficha y del trabajo de secuencia */
  .ui-topbar .sync-bar { padding: 5px 8px; }
  .ui-topbar .sync-bar #sync-label { display: none; }
  /* Buscador global abierto (Más → Buscar): ocupa toda la fila. */
  .topbar.ui-topbar.gs-open { grid-template-columns: minmax(0, 1fr); grid-template-areas: "right"; }
  .ui-topbar.gs-open .ui-brand { display: none; }
  .ui-topbar.gs-open .ui-topbar-right { width: 100%; }
  .ui-topbar.gs-open .ui-topbar-right > :not(.gs-root) { display: none; }
  .ui-topbar.gs-open .gs-root { display: flex; flex: 1; }

  /* Barra inferior: 68 px de alto, fondo --chrome (oscuro en los dos temas), ítems de 62 × 52. */
  .ui-rail {
    top: auto; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); transform: none;
    flex-direction: row; justify-content: space-between; gap: 0; height: 68px; padding: 0 8px;
    background: var(--chrome); border: 0; border-radius: 24px;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--chrome) 28%, transparent);
  }
  .ui-rail .ui-rail-d, .ui-rail.ui-rail--chats .ui-rail-agenda { display: none; }
  .ui-rail .ui-rail-m { display: flex; }
  .ui-rail .ui-rail-btn {
    flex-direction: column; gap: 3px; width: 62px; height: 52px; flex-shrink: 0;
    border-radius: 16px; color: var(--mc-nav-ink);
  }
  .ui-rail .ui-rail-btn svg { width: 21px; height: 21px; }
  .ui-rail-lbl { display: block; font: 500 11px/1.1 var(--font-sans); white-space: nowrap; }
  .ui-rail .nav-item.ui-rail-btn.active, .ui-rail .ui-rail-more.is-current { background: var(--accent); color: var(--on-accent); }
  .ui-rail .active .ui-rail-lbl, .ui-rail .is-current .ui-rail-lbl { font-weight: 600; }
  .ui-rail .ui-rail-badge {
    top: 3px; right: 9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--mc-amber); color: var(--chrome); font: 700 10px/18px var(--font-sans); box-shadow: 0 0 0 2px var(--chrome);
  }
  .ui-rail .active .ui-rail-badge { box-shadow: 0 0 0 2px var(--accent); }
  .ui-rail-dot:not([hidden]) {
    display: block; position: absolute; top: 7px; right: 17px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--mc-amber); box-shadow: 0 0 0 2px var(--chrome);
  }
  .ui-rail .is-current .ui-rail-dot { box-shadow: 0 0 0 2px var(--accent); }
  .ui-rail .ui-rail-btn:focus-visible { outline-color: var(--on-chrome); outline-offset: -2px; }

  .ui-shell .content { padding: 12px 12px calc(116px + env(safe-area-inset-bottom)); }
  .ui-shell .chat-layout { height: calc(100dvh - 210px - env(safe-area-inset-bottom)); }

  /* El título de la sección va en la barra de arriba: el de dos líneas de uiPageHeader se oculta (quedan los KPIs). */
  .ui-ph { margin: 0 0 14px; }
  .ui-ph-title { display: none; }
  .ui-ph-kpis { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .ui-ph-kpi { min-width: 0; padding: 10px 12px 10px 10px; gap: 10px; }
  .ui-ph-kpi-ico { width: 34px; height: 34px; font-size: 15px; }
  .ui-ph-kpi-val { font-size: 17px; }
}
@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
  .ui-rail .ui-rail-btn:hover { background: var(--chrome-2); color: var(--on-chrome); }
  .ui-rail .nav-item.ui-rail-btn.active:hover, .ui-rail .ui-rail-more.is-current:hover { background: var(--accent-h); color: var(--on-accent); }
}

/* "Más" (mobile): drawer con las demás secciones, Crear y Buscar / Ajustes / Tema. Ítems en dos columnas. */
.ui-mnav { display: flex; flex-direction: column; gap: 18px; }
.ui-mnav-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-mnav-h { margin: 0; font: 600 11px/1.2 var(--font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--text-subtle); }
.ui-mnav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ui-mnav-item {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; margin: 0; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font: 500 14px/1.2 var(--font-sans); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ui-mnav-item:active { background: var(--surface-2); }
.ui-mnav-item[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-text); font-weight: 600; }
.ui-mnav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-mnav-ico { display: inline-flex; flex-shrink: 0; color: var(--text-muted); }
.ui-mnav-item[aria-current="page"] .ui-mnav-ico { color: inherit; }
.ui-mnav-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-mnav-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mnav-badge {
  flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; box-sizing: border-box;
  background: var(--surface-3); color: var(--text-muted); font: 700 12px/22px var(--font-sans); text-align: center;
}
.ui-mnav-badge--alert { background: var(--mc-amber); color: var(--chrome); }
.ui-mnav-switch {
  position: relative; flex-shrink: 0; width: 36px; height: 22px; border-radius: 999px; background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-strong); transition: background .15s;
}
.ui-mnav-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .15s;
}
.ui-mnav-item[role="switch"] { grid-column: 1 / -1; }
.ui-mnav-item[aria-checked="true"] .ui-mnav-switch { background: var(--accent); box-shadow: none; }
.ui-mnav-item[aria-checked="true"] .ui-mnav-switch::after { transform: translateX(14px); }
@media (hover: hover) and (pointer: fine) { .ui-mnav-item:not([aria-current="page"]):hover { background: var(--surface-2); } }
@media (prefers-reduced-motion: reduce) { .ui-mnav-switch, .ui-mnav-switch::after { transition: none; } }

/* Páginas a pantalla completa (detalle de contacto, trabajo de secuencia): en oscuro la PWA usa
   black-translucent, así que su barra también cubre la franja de la barra de estado. */
.cdp-topbar, .wfp-topbar { padding-top: max(12px, env(safe-area-inset-top)); }

/* ── Buscadores: lupa SVG dentro del campo (mismo ícono que .gs-root), sin emoji en el placeholder ── */
.ui-search { position: relative; display: flex; align-items: center; min-width: 0; }
.ui-search > .ui-search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%); z-index: 1;
  color: var(--text-subtle); pointer-events: none;
}
.ui-search:focus-within > .ui-search-ico { color: var(--text-muted); }
.ui-search > input { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; padding-left: 32px; background-image: none; }
.pipe-search-wrap { flex: 1; max-width: 340px; }
.cv-search-wrap, .comp-search-wrap, .enroll-search-wrap { flex: 1; }
.seq-flt-q-wrap { flex: 1; min-width: 180px; }
@media (max-width: 768px) {
  .cv-search-row .cv-search-wrap { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 767px) {
  .seq-flt-q-wrap { min-width: 0; width: 100%; flex-basis: 100%; }
}

/* Botón "Stages" con engranaje SVG */
.cv-stages-config-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.cv-stages-config-btn .ui-ico-gear { flex-shrink: 0; }

/* ── Componentes (Fase 4) · API en docs/ui-v2-plan.md, JS en public/js/ui-components.js ── */
.ui-card {
  min-width: 0; padding: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.ui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ui-card-title {
  margin: 0; min-width: 0; font: 600 14px/1.3 var(--font-sans); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

.ui-circle-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  font: 600 14px/1 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.ui-circle-btn svg { width: 16px; height: 16px; }

.ui-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted);
  font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.ui-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }

.ui-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
}
.ui-seg-btn {
  height: 30px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  color: var(--text-muted); font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s;
}
.ui-seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* Hover solo con puntero real (en iPhone el hover queda pegado). */
@media (hover: hover) {
  .ui-circle-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
  .ui-chip:not([aria-pressed="true"]):hover { background: var(--surface-2); color: var(--text); }
  .ui-seg-btn:not([aria-pressed="true"]):hover { color: var(--text); }
}
.ui-circle-btn:focus-visible, .ui-chip:focus-visible, .ui-seg-btn:focus-visible, .ui-toast-undo:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Toast: uno a la vez, abajo al centro */
.ui-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 99990;
  display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 32px));
  padding: 10px 18px; border-radius: 999px; background: var(--text); color: var(--bg);
  font: 500 13px/1.35 var(--font-sans); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 12px);
  transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
.ui-toast.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition: opacity .2s, transform .2s;
}
.ui-toast.has-undo { padding-right: 6px; }
.ui-toast-ico { display: inline-flex; flex-shrink: 0; }
.ui-toast-ico[hidden] { display: none; }
.ui-toast-ico img { width: 16px; height: 16px; display: block; }
.ui-toast-msg { min-width: 0; overflow-wrap: anywhere; }
.ui-toast-undo {
  flex-shrink: 0; margin: 0; padding: 7px 12px; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; font: 600 12px/1 var(--font-sans); cursor: pointer;
}
.ui-toast-undo[hidden] { display: none; }

/* Modal y drawer */
.ui-overlay { position: fixed; inset: 0; z-index: 9600; display: flex; background: rgba(15, 12, 10, .45); }
.ui-overlay--modal { align-items: center; justify-content: center; padding: 16px; }
.ui-overlay--drawer { justify-content: flex-end; }
.ui-modal, .ui-drawer {
  display: flex; flex-direction: column; min-width: 0; outline: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.ui-modal {
  width: min(var(--ui-w, 520px), 100%); max-height: min(85vh, 100%);
  border-radius: var(--radius-xl); animation: ui-pop .16s ease-out;
}
.ui-drawer {
  width: min(var(--ui-w, 440px), 100%); height: 100%; padding-top: env(safe-area-inset-top);
  border-width: 0 0 0 1px; border-radius: var(--radius-xl) 0 0 var(--radius-xl); animation: ui-slide-x .2s ease-out;
}
.ui-layer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.ui-layer-title { margin: 0; min-width: 0; font: 700 16px/1.3 var(--font-sans); color: var(--text); }
.ui-layer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ui-layer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
@keyframes ui-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ui-slide-x { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ui-slide-y { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 767px) {
  .ui-toast { bottom: calc(104px + env(safe-area-inset-bottom)); } /* arriba de la barra inferior (24 + 68 + 12) */
  .ui-overlay--drawer { align-items: flex-end; justify-content: stretch; }
  .ui-drawer {
    width: 100%; height: auto; max-height: calc(100% - 40px - env(safe-area-inset-top));
    padding-top: 0; padding-bottom: env(safe-area-inset-bottom);
    border-width: 1px 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation-name: ui-slide-y;
  }
  /* Empresas: buscador en su fila, vista y "Nueva empresa" abajo */
  .comp-toolbar { flex-wrap: wrap; }
  .comp-toolbar .comp-search-wrap { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-modal, .ui-drawer { animation: none; }
  .ui-toast, .ui-toast.is-open { transition: none; }
}

/* Modal "Duplicados detectados" (Configuración) */
.dup-summary { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--warn); }
.dup-empty { padding: 24px; text-align: center; font-size: 15px; color: var(--success); }
.dup-group { margin-bottom: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.dup-group-head { margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--accent-text); text-transform: uppercase; }
.dup-group-head span { font-weight: 400; color: var(--text-muted); text-transform: none; overflow-wrap: anywhere; }
.dup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.dup-row:last-child { border-bottom: 0; }
.dup-row-name { font-size: 13px; font-weight: 600; color: var(--text); }
.dup-row-sub { font-size: 11px; color: var(--text-muted); }
.dup-row .btn { flex-shrink: 0; font-size: 11px; padding: 3px 10px; }

/* ── Oscuro: superficies base que no dependen de variables ─────────── */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--text-subtle); }
:root[data-theme="dark"] option { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] table { color: var(--text); }
:root[data-theme="dark"] a { color: var(--accent-text); }
:root[data-theme="dark"] .login-card { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] .login-google-btn { background: var(--surface-2); color: var(--text); border-color: var(--border); }

/* ── Píldoras seleccionadas: fondo de acento y texto que contrasta, también con :hover
   (en iPhone el hover queda pegado después del tap). Con :hover pesan más que los :hover generados abajo. ── */
.mtg-type-pill.sel, .mtg-type-pill.sel:hover,
.call-outcome-pill.selected, .call-outcome-pill.selected:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ═══ Generado (no editar a mano): reglas con neutros y acento fijos → tokens ═══ */
/* estilos inline (atributo style) → tokens */
:root[data-theme="dark"] [style^="background:#fff;"],
:root[data-theme="dark"] [style="background:#fff"],
:root[data-theme="dark"] [style*=";background:#fff;"],
:root[data-theme="dark"] [style$=";background:#fff"],
:root[data-theme="dark"] [style*="; background:#fff;"],
:root[data-theme="dark"] [style$="; background:#fff"],
:root[data-theme="dark"] [style^="background: #fff;"],
:root[data-theme="dark"] [style="background: #fff"],
:root[data-theme="dark"] [style*=";background: #fff;"],
:root[data-theme="dark"] [style$=";background: #fff"],
:root[data-theme="dark"] [style*="; background: #fff;"],
:root[data-theme="dark"] [style$="; background: #fff"],
:root[data-theme="dark"] [style^="background:#ffffff;"],
:root[data-theme="dark"] [style="background:#ffffff"],
:root[data-theme="dark"] [style*=";background:#ffffff;"],
:root[data-theme="dark"] [style$=";background:#ffffff"],
:root[data-theme="dark"] [style*="; background:#ffffff;"],
:root[data-theme="dark"] [style$="; background:#ffffff"],
:root[data-theme="dark"] [style^="background: #ffffff;"],
:root[data-theme="dark"] [style="background: #ffffff"],
:root[data-theme="dark"] [style*=";background: #ffffff;"],
:root[data-theme="dark"] [style$=";background: #ffffff"],
:root[data-theme="dark"] [style*="; background: #ffffff;"],
:root[data-theme="dark"] [style$="; background: #ffffff"],
:root[data-theme="dark"] [style^="background:white;"],
:root[data-theme="dark"] [style="background:white"],
:root[data-theme="dark"] [style*=";background:white;"],
:root[data-theme="dark"] [style$=";background:white"],
:root[data-theme="dark"] [style*="; background:white;"],
:root[data-theme="dark"] [style$="; background:white"],
:root[data-theme="dark"] [style^="background: white;"],
:root[data-theme="dark"] [style="background: white"],
:root[data-theme="dark"] [style*=";background: white;"],
:root[data-theme="dark"] [style$=";background: white"],
:root[data-theme="dark"] [style*="; background: white;"],
:root[data-theme="dark"] [style$="; background: white"],
:root[data-theme="dark"] [style^="background:#fafafa;"],
:root[data-theme="dark"] [style="background:#fafafa"],
:root[data-theme="dark"] [style*=";background:#fafafa;"],
:root[data-theme="dark"] [style$=";background:#fafafa"],
:root[data-theme="dark"] [style*="; background:#fafafa;"],
:root[data-theme="dark"] [style$="; background:#fafafa"],
:root[data-theme="dark"] [style^="background: #fafafa;"],
:root[data-theme="dark"] [style="background: #fafafa"],
:root[data-theme="dark"] [style*=";background: #fafafa;"],
:root[data-theme="dark"] [style$=";background: #fafafa"],
:root[data-theme="dark"] [style*="; background: #fafafa;"],
:root[data-theme="dark"] [style$="; background: #fafafa"],
:root[data-theme="dark"] [style^="background:#f8f8f7;"],
:root[data-theme="dark"] [style="background:#f8f8f7"],
:root[data-theme="dark"] [style*=";background:#f8f8f7;"],
:root[data-theme="dark"] [style$=";background:#f8f8f7"],
:root[data-theme="dark"] [style*="; background:#f8f8f7;"],
:root[data-theme="dark"] [style$="; background:#f8f8f7"],
:root[data-theme="dark"] [style^="background: #f8f8f7;"],
:root[data-theme="dark"] [style="background: #f8f8f7"],
:root[data-theme="dark"] [style*=";background: #f8f8f7;"],
:root[data-theme="dark"] [style$=";background: #f8f8f7"],
:root[data-theme="dark"] [style*="; background: #f8f8f7;"],
:root[data-theme="dark"] [style$="; background: #f8f8f7"],
:root[data-theme="dark"] [style^="background:#f5f5f4;"],
:root[data-theme="dark"] [style="background:#f5f5f4"],
:root[data-theme="dark"] [style*=";background:#f5f5f4;"],
:root[data-theme="dark"] [style$=";background:#f5f5f4"],
:root[data-theme="dark"] [style*="; background:#f5f5f4;"],
:root[data-theme="dark"] [style$="; background:#f5f5f4"],
:root[data-theme="dark"] [style^="background: #f5f5f4;"],
:root[data-theme="dark"] [style="background: #f5f5f4"],
:root[data-theme="dark"] [style*=";background: #f5f5f4;"],
:root[data-theme="dark"] [style$=";background: #f5f5f4"],
:root[data-theme="dark"] [style*="; background: #f5f5f4;"],
:root[data-theme="dark"] [style$="; background: #f5f5f4"],
:root[data-theme="dark"] [style^="background:#f1f5f9;"],
:root[data-theme="dark"] [style="background:#f1f5f9"],
:root[data-theme="dark"] [style*=";background:#f1f5f9;"],
:root[data-theme="dark"] [style$=";background:#f1f5f9"],
:root[data-theme="dark"] [style*="; background:#f1f5f9;"],
:root[data-theme="dark"] [style$="; background:#f1f5f9"],
:root[data-theme="dark"] [style^="background: #f1f5f9;"],
:root[data-theme="dark"] [style="background: #f1f5f9"],
:root[data-theme="dark"] [style*=";background: #f1f5f9;"],
:root[data-theme="dark"] [style$=";background: #f1f5f9"],
:root[data-theme="dark"] [style*="; background: #f1f5f9;"],
:root[data-theme="dark"] [style$="; background: #f1f5f9"],
:root[data-theme="dark"] [style^="background:#f8f7ff;"],
:root[data-theme="dark"] [style="background:#f8f7ff"],
:root[data-theme="dark"] [style*=";background:#f8f7ff;"],
:root[data-theme="dark"] [style$=";background:#f8f7ff"],
:root[data-theme="dark"] [style*="; background:#f8f7ff;"],
:root[data-theme="dark"] [style$="; background:#f8f7ff"],
:root[data-theme="dark"] [style^="background: #f8f7ff;"],
:root[data-theme="dark"] [style="background: #f8f7ff"],
:root[data-theme="dark"] [style*=";background: #f8f7ff;"],
:root[data-theme="dark"] [style$=";background: #f8f7ff"],
:root[data-theme="dark"] [style*="; background: #f8f7ff;"],
:root[data-theme="dark"] [style$="; background: #f8f7ff"],
:root[data-theme="dark"] [style^="background:#f9fafb;"],
:root[data-theme="dark"] [style="background:#f9fafb"],
:root[data-theme="dark"] [style*=";background:#f9fafb;"],
:root[data-theme="dark"] [style$=";background:#f9fafb"],
:root[data-theme="dark"] [style*="; background:#f9fafb;"],
:root[data-theme="dark"] [style$="; background:#f9fafb"],
:root[data-theme="dark"] [style^="background: #f9fafb;"],
:root[data-theme="dark"] [style="background: #f9fafb"],
:root[data-theme="dark"] [style*=";background: #f9fafb;"],
:root[data-theme="dark"] [style$=";background: #f9fafb"],
:root[data-theme="dark"] [style*="; background: #f9fafb;"],
:root[data-theme="dark"] [style$="; background: #f9fafb"],
:root[data-theme="dark"] [style^="background:#f3f4f6;"],
:root[data-theme="dark"] [style="background:#f3f4f6"],
:root[data-theme="dark"] [style*=";background:#f3f4f6;"],
:root[data-theme="dark"] [style$=";background:#f3f4f6"],
:root[data-theme="dark"] [style*="; background:#f3f4f6;"],
:root[data-theme="dark"] [style$="; background:#f3f4f6"],
:root[data-theme="dark"] [style^="background: #f3f4f6;"],
:root[data-theme="dark"] [style="background: #f3f4f6"],
:root[data-theme="dark"] [style*=";background: #f3f4f6;"],
:root[data-theme="dark"] [style$=";background: #f3f4f6"],
:root[data-theme="dark"] [style*="; background: #f3f4f6;"],
:root[data-theme="dark"] [style$="; background: #f3f4f6"],
:root[data-theme="dark"] [style^="background:#f0f0eb;"],
:root[data-theme="dark"] [style="background:#f0f0eb"],
:root[data-theme="dark"] [style*=";background:#f0f0eb;"],
:root[data-theme="dark"] [style$=";background:#f0f0eb"],
:root[data-theme="dark"] [style*="; background:#f0f0eb;"],
:root[data-theme="dark"] [style$="; background:#f0f0eb"],
:root[data-theme="dark"] [style^="background: #f0f0eb;"],
:root[data-theme="dark"] [style="background: #f0f0eb"],
:root[data-theme="dark"] [style*=";background: #f0f0eb;"],
:root[data-theme="dark"] [style$=";background: #f0f0eb"],
:root[data-theme="dark"] [style*="; background: #f0f0eb;"],
:root[data-theme="dark"] [style$="; background: #f0f0eb"],
:root[data-theme="dark"] [style^="background:#efefef;"],
:root[data-theme="dark"] [style="background:#efefef"],
:root[data-theme="dark"] [style*=";background:#efefef;"],
:root[data-theme="dark"] [style$=";background:#efefef"],
:root[data-theme="dark"] [style*="; background:#efefef;"],
:root[data-theme="dark"] [style$="; background:#efefef"],
:root[data-theme="dark"] [style^="background: #efefef;"],
:root[data-theme="dark"] [style="background: #efefef"],
:root[data-theme="dark"] [style*=";background: #efefef;"],
:root[data-theme="dark"] [style$=";background: #efefef"],
:root[data-theme="dark"] [style*="; background: #efefef;"],
:root[data-theme="dark"] [style$="; background: #efefef"],
:root[data-theme="dark"] [style^="background:#e5e7eb;"],
:root[data-theme="dark"] [style="background:#e5e7eb"],
:root[data-theme="dark"] [style*=";background:#e5e7eb;"],
:root[data-theme="dark"] [style$=";background:#e5e7eb"],
:root[data-theme="dark"] [style*="; background:#e5e7eb;"],
:root[data-theme="dark"] [style$="; background:#e5e7eb"],
:root[data-theme="dark"] [style^="background: #e5e7eb;"],
:root[data-theme="dark"] [style="background: #e5e7eb"],
:root[data-theme="dark"] [style*=";background: #e5e7eb;"],
:root[data-theme="dark"] [style$=";background: #e5e7eb"],
:root[data-theme="dark"] [style*="; background: #e5e7eb;"],
:root[data-theme="dark"] [style$="; background: #e5e7eb"],
:root[data-theme="dark"] [style^="background:#e8e7e2;"],
:root[data-theme="dark"] [style="background:#e8e7e2"],
:root[data-theme="dark"] [style*=";background:#e8e7e2;"],
:root[data-theme="dark"] [style$=";background:#e8e7e2"],
:root[data-theme="dark"] [style*="; background:#e8e7e2;"],
:root[data-theme="dark"] [style$="; background:#e8e7e2"],
:root[data-theme="dark"] [style^="background: #e8e7e2;"],
:root[data-theme="dark"] [style="background: #e8e7e2"],
:root[data-theme="dark"] [style*=";background: #e8e7e2;"],
:root[data-theme="dark"] [style$=";background: #e8e7e2"],
:root[data-theme="dark"] [style*="; background: #e8e7e2;"],
:root[data-theme="dark"] [style$="; background: #e8e7e2"] { background-color: var(--surface-2) !important; }
:root[data-theme="dark"] [style^="color:#333;"],
:root[data-theme="dark"] [style="color:#333"],
:root[data-theme="dark"] [style*=";color:#333;"],
:root[data-theme="dark"] [style$=";color:#333"],
:root[data-theme="dark"] [style*="; color:#333;"],
:root[data-theme="dark"] [style$="; color:#333"],
:root[data-theme="dark"] [style^="color: #333;"],
:root[data-theme="dark"] [style="color: #333"],
:root[data-theme="dark"] [style*=";color: #333;"],
:root[data-theme="dark"] [style$=";color: #333"],
:root[data-theme="dark"] [style*="; color: #333;"],
:root[data-theme="dark"] [style$="; color: #333"],
:root[data-theme="dark"] [style^="color:#374151;"],
:root[data-theme="dark"] [style="color:#374151"],
:root[data-theme="dark"] [style*=";color:#374151;"],
:root[data-theme="dark"] [style$=";color:#374151"],
:root[data-theme="dark"] [style*="; color:#374151;"],
:root[data-theme="dark"] [style$="; color:#374151"],
:root[data-theme="dark"] [style^="color: #374151;"],
:root[data-theme="dark"] [style="color: #374151"],
:root[data-theme="dark"] [style*=";color: #374151;"],
:root[data-theme="dark"] [style$=";color: #374151"],
:root[data-theme="dark"] [style*="; color: #374151;"],
:root[data-theme="dark"] [style$="; color: #374151"],
:root[data-theme="dark"] [style^="color:#334155;"],
:root[data-theme="dark"] [style="color:#334155"],
:root[data-theme="dark"] [style*=";color:#334155;"],
:root[data-theme="dark"] [style$=";color:#334155"],
:root[data-theme="dark"] [style*="; color:#334155;"],
:root[data-theme="dark"] [style$="; color:#334155"],
:root[data-theme="dark"] [style^="color: #334155;"],
:root[data-theme="dark"] [style="color: #334155"],
:root[data-theme="dark"] [style*=";color: #334155;"],
:root[data-theme="dark"] [style$=";color: #334155"],
:root[data-theme="dark"] [style*="; color: #334155;"],
:root[data-theme="dark"] [style$="; color: #334155"],
:root[data-theme="dark"] [style^="color:#160028;"],
:root[data-theme="dark"] [style="color:#160028"],
:root[data-theme="dark"] [style*=";color:#160028;"],
:root[data-theme="dark"] [style$=";color:#160028"],
:root[data-theme="dark"] [style*="; color:#160028;"],
:root[data-theme="dark"] [style$="; color:#160028"],
:root[data-theme="dark"] [style^="color: #160028;"],
:root[data-theme="dark"] [style="color: #160028"],
:root[data-theme="dark"] [style*=";color: #160028;"],
:root[data-theme="dark"] [style$=";color: #160028"],
:root[data-theme="dark"] [style*="; color: #160028;"],
:root[data-theme="dark"] [style$="; color: #160028"],
:root[data-theme="dark"] [style^="color:#1f2937;"],
:root[data-theme="dark"] [style="color:#1f2937"],
:root[data-theme="dark"] [style*=";color:#1f2937;"],
:root[data-theme="dark"] [style$=";color:#1f2937"],
:root[data-theme="dark"] [style*="; color:#1f2937;"],
:root[data-theme="dark"] [style$="; color:#1f2937"],
:root[data-theme="dark"] [style^="color: #1f2937;"],
:root[data-theme="dark"] [style="color: #1f2937"],
:root[data-theme="dark"] [style*=";color: #1f2937;"],
:root[data-theme="dark"] [style$=";color: #1f2937"],
:root[data-theme="dark"] [style*="; color: #1f2937;"],
:root[data-theme="dark"] [style$="; color: #1f2937"],
:root[data-theme="dark"] [style^="color:#111;"],
:root[data-theme="dark"] [style="color:#111"],
:root[data-theme="dark"] [style*=";color:#111;"],
:root[data-theme="dark"] [style$=";color:#111"],
:root[data-theme="dark"] [style*="; color:#111;"],
:root[data-theme="dark"] [style$="; color:#111"],
:root[data-theme="dark"] [style^="color: #111;"],
:root[data-theme="dark"] [style="color: #111"],
:root[data-theme="dark"] [style*=";color: #111;"],
:root[data-theme="dark"] [style$=";color: #111"],
:root[data-theme="dark"] [style*="; color: #111;"],
:root[data-theme="dark"] [style$="; color: #111"],
:root[data-theme="dark"] [style^="color:#1a1a1c;"],
:root[data-theme="dark"] [style="color:#1a1a1c"],
:root[data-theme="dark"] [style*=";color:#1a1a1c;"],
:root[data-theme="dark"] [style$=";color:#1a1a1c"],
:root[data-theme="dark"] [style*="; color:#1a1a1c;"],
:root[data-theme="dark"] [style$="; color:#1a1a1c"],
:root[data-theme="dark"] [style^="color: #1a1a1c;"],
:root[data-theme="dark"] [style="color: #1a1a1c"],
:root[data-theme="dark"] [style*=";color: #1a1a1c;"],
:root[data-theme="dark"] [style$=";color: #1a1a1c"],
:root[data-theme="dark"] [style*="; color: #1a1a1c;"],
:root[data-theme="dark"] [style$="; color: #1a1a1c"],
:root[data-theme="dark"] [style^="color:#2c2c2a;"],
:root[data-theme="dark"] [style="color:#2c2c2a"],
:root[data-theme="dark"] [style*=";color:#2c2c2a;"],
:root[data-theme="dark"] [style$=";color:#2c2c2a"],
:root[data-theme="dark"] [style*="; color:#2c2c2a;"],
:root[data-theme="dark"] [style$="; color:#2c2c2a"],
:root[data-theme="dark"] [style^="color: #2c2c2a;"],
:root[data-theme="dark"] [style="color: #2c2c2a"],
:root[data-theme="dark"] [style*=";color: #2c2c2a;"],
:root[data-theme="dark"] [style$=";color: #2c2c2a"],
:root[data-theme="dark"] [style*="; color: #2c2c2a;"],
:root[data-theme="dark"] [style$="; color: #2c2c2a"],
:root[data-theme="dark"] [style^="color:#444;"],
:root[data-theme="dark"] [style="color:#444"],
:root[data-theme="dark"] [style*=";color:#444;"],
:root[data-theme="dark"] [style$=";color:#444"],
:root[data-theme="dark"] [style*="; color:#444;"],
:root[data-theme="dark"] [style$="; color:#444"],
:root[data-theme="dark"] [style^="color: #444;"],
:root[data-theme="dark"] [style="color: #444"],
:root[data-theme="dark"] [style*=";color: #444;"],
:root[data-theme="dark"] [style$=";color: #444"],
:root[data-theme="dark"] [style*="; color: #444;"],
:root[data-theme="dark"] [style$="; color: #444"],
:root[data-theme="dark"] [style^="color:#1e293b;"],
:root[data-theme="dark"] [style="color:#1e293b"],
:root[data-theme="dark"] [style*=";color:#1e293b;"],
:root[data-theme="dark"] [style$=";color:#1e293b"],
:root[data-theme="dark"] [style*="; color:#1e293b;"],
:root[data-theme="dark"] [style$="; color:#1e293b"],
:root[data-theme="dark"] [style^="color: #1e293b;"],
:root[data-theme="dark"] [style="color: #1e293b"],
:root[data-theme="dark"] [style*=";color: #1e293b;"],
:root[data-theme="dark"] [style$=";color: #1e293b"],
:root[data-theme="dark"] [style*="; color: #1e293b;"],
:root[data-theme="dark"] [style$="; color: #1e293b"],
:root[data-theme="dark"] [style^="color:#0f172a;"],
:root[data-theme="dark"] [style="color:#0f172a"],
:root[data-theme="dark"] [style*=";color:#0f172a;"],
:root[data-theme="dark"] [style$=";color:#0f172a"],
:root[data-theme="dark"] [style*="; color:#0f172a;"],
:root[data-theme="dark"] [style$="; color:#0f172a"],
:root[data-theme="dark"] [style^="color: #0f172a;"],
:root[data-theme="dark"] [style="color: #0f172a"],
:root[data-theme="dark"] [style*=";color: #0f172a;"],
:root[data-theme="dark"] [style$=";color: #0f172a"],
:root[data-theme="dark"] [style*="; color: #0f172a;"],
:root[data-theme="dark"] [style$="; color: #0f172a"],
:root[data-theme="dark"] [style^="color:#111827;"],
:root[data-theme="dark"] [style="color:#111827"],
:root[data-theme="dark"] [style*=";color:#111827;"],
:root[data-theme="dark"] [style$=";color:#111827"],
:root[data-theme="dark"] [style*="; color:#111827;"],
:root[data-theme="dark"] [style$="; color:#111827"],
:root[data-theme="dark"] [style^="color: #111827;"],
:root[data-theme="dark"] [style="color: #111827"],
:root[data-theme="dark"] [style*=";color: #111827;"],
:root[data-theme="dark"] [style$=";color: #111827"],
:root[data-theme="dark"] [style*="; color: #111827;"],
:root[data-theme="dark"] [style$="; color: #111827"] { color: var(--text) !important; }
:root[data-theme="dark"] [style^="color:#555;"],
:root[data-theme="dark"] [style="color:#555"],
:root[data-theme="dark"] [style*=";color:#555;"],
:root[data-theme="dark"] [style$=";color:#555"],
:root[data-theme="dark"] [style*="; color:#555;"],
:root[data-theme="dark"] [style$="; color:#555"],
:root[data-theme="dark"] [style^="color: #555;"],
:root[data-theme="dark"] [style="color: #555"],
:root[data-theme="dark"] [style*=";color: #555;"],
:root[data-theme="dark"] [style$=";color: #555"],
:root[data-theme="dark"] [style*="; color: #555;"],
:root[data-theme="dark"] [style$="; color: #555"],
:root[data-theme="dark"] [style^="color:#666;"],
:root[data-theme="dark"] [style="color:#666"],
:root[data-theme="dark"] [style*=";color:#666;"],
:root[data-theme="dark"] [style$=";color:#666"],
:root[data-theme="dark"] [style*="; color:#666;"],
:root[data-theme="dark"] [style$="; color:#666"],
:root[data-theme="dark"] [style^="color: #666;"],
:root[data-theme="dark"] [style="color: #666"],
:root[data-theme="dark"] [style*=";color: #666;"],
:root[data-theme="dark"] [style$=";color: #666"],
:root[data-theme="dark"] [style*="; color: #666;"],
:root[data-theme="dark"] [style$="; color: #666"],
:root[data-theme="dark"] [style^="color:#5f5e5a;"],
:root[data-theme="dark"] [style="color:#5f5e5a"],
:root[data-theme="dark"] [style*=";color:#5f5e5a;"],
:root[data-theme="dark"] [style$=";color:#5f5e5a"],
:root[data-theme="dark"] [style*="; color:#5f5e5a;"],
:root[data-theme="dark"] [style$="; color:#5f5e5a"],
:root[data-theme="dark"] [style^="color: #5f5e5a;"],
:root[data-theme="dark"] [style="color: #5f5e5a"],
:root[data-theme="dark"] [style*=";color: #5f5e5a;"],
:root[data-theme="dark"] [style$=";color: #5f5e5a"],
:root[data-theme="dark"] [style*="; color: #5f5e5a;"],
:root[data-theme="dark"] [style$="; color: #5f5e5a"],
:root[data-theme="dark"] [style^="color:#64748b;"],
:root[data-theme="dark"] [style="color:#64748b"],
:root[data-theme="dark"] [style*=";color:#64748b;"],
:root[data-theme="dark"] [style$=";color:#64748b"],
:root[data-theme="dark"] [style*="; color:#64748b;"],
:root[data-theme="dark"] [style$="; color:#64748b"],
:root[data-theme="dark"] [style^="color: #64748b;"],
:root[data-theme="dark"] [style="color: #64748b"],
:root[data-theme="dark"] [style*=";color: #64748b;"],
:root[data-theme="dark"] [style$=";color: #64748b"],
:root[data-theme="dark"] [style*="; color: #64748b;"],
:root[data-theme="dark"] [style$="; color: #64748b"],
:root[data-theme="dark"] [style^="color:#475569;"],
:root[data-theme="dark"] [style="color:#475569"],
:root[data-theme="dark"] [style*=";color:#475569;"],
:root[data-theme="dark"] [style$=";color:#475569"],
:root[data-theme="dark"] [style*="; color:#475569;"],
:root[data-theme="dark"] [style$="; color:#475569"],
:root[data-theme="dark"] [style^="color: #475569;"],
:root[data-theme="dark"] [style="color: #475569"],
:root[data-theme="dark"] [style*=";color: #475569;"],
:root[data-theme="dark"] [style$=";color: #475569"],
:root[data-theme="dark"] [style*="; color: #475569;"],
:root[data-theme="dark"] [style$="; color: #475569"],
:root[data-theme="dark"] [style^="color:#4a4a4a;"],
:root[data-theme="dark"] [style="color:#4a4a4a"],
:root[data-theme="dark"] [style*=";color:#4a4a4a;"],
:root[data-theme="dark"] [style$=";color:#4a4a4a"],
:root[data-theme="dark"] [style*="; color:#4a4a4a;"],
:root[data-theme="dark"] [style$="; color:#4a4a4a"],
:root[data-theme="dark"] [style^="color: #4a4a4a;"],
:root[data-theme="dark"] [style="color: #4a4a4a"],
:root[data-theme="dark"] [style*=";color: #4a4a4a;"],
:root[data-theme="dark"] [style$=";color: #4a4a4a"],
:root[data-theme="dark"] [style*="; color: #4a4a4a;"],
:root[data-theme="dark"] [style$="; color: #4a4a4a"],
:root[data-theme="dark"] [style^="color:#6b7280;"],
:root[data-theme="dark"] [style="color:#6b7280"],
:root[data-theme="dark"] [style*=";color:#6b7280;"],
:root[data-theme="dark"] [style$=";color:#6b7280"],
:root[data-theme="dark"] [style*="; color:#6b7280;"],
:root[data-theme="dark"] [style$="; color:#6b7280"],
:root[data-theme="dark"] [style^="color: #6b7280;"],
:root[data-theme="dark"] [style="color: #6b7280"],
:root[data-theme="dark"] [style*=";color: #6b7280;"],
:root[data-theme="dark"] [style$=";color: #6b7280"],
:root[data-theme="dark"] [style*="; color: #6b7280;"],
:root[data-theme="dark"] [style$="; color: #6b7280"],
:root[data-theme="dark"] [style^="color:#4b5563;"],
:root[data-theme="dark"] [style="color:#4b5563"],
:root[data-theme="dark"] [style*=";color:#4b5563;"],
:root[data-theme="dark"] [style$=";color:#4b5563"],
:root[data-theme="dark"] [style*="; color:#4b5563;"],
:root[data-theme="dark"] [style$="; color:#4b5563"],
:root[data-theme="dark"] [style^="color: #4b5563;"],
:root[data-theme="dark"] [style="color: #4b5563"],
:root[data-theme="dark"] [style*=";color: #4b5563;"],
:root[data-theme="dark"] [style$=";color: #4b5563"],
:root[data-theme="dark"] [style*="; color: #4b5563;"],
:root[data-theme="dark"] [style$="; color: #4b5563"] { color: var(--text-muted) !important; }
:root[data-theme="dark"] [style^="color:#888780;"],
:root[data-theme="dark"] [style="color:#888780"],
:root[data-theme="dark"] [style*=";color:#888780;"],
:root[data-theme="dark"] [style$=";color:#888780"],
:root[data-theme="dark"] [style*="; color:#888780;"],
:root[data-theme="dark"] [style$="; color:#888780"],
:root[data-theme="dark"] [style^="color: #888780;"],
:root[data-theme="dark"] [style="color: #888780"],
:root[data-theme="dark"] [style*=";color: #888780;"],
:root[data-theme="dark"] [style$=";color: #888780"],
:root[data-theme="dark"] [style*="; color: #888780;"],
:root[data-theme="dark"] [style$="; color: #888780"],
:root[data-theme="dark"] [style^="color:#888;"],
:root[data-theme="dark"] [style="color:#888"],
:root[data-theme="dark"] [style*=";color:#888;"],
:root[data-theme="dark"] [style$=";color:#888"],
:root[data-theme="dark"] [style*="; color:#888;"],
:root[data-theme="dark"] [style$="; color:#888"],
:root[data-theme="dark"] [style^="color: #888;"],
:root[data-theme="dark"] [style="color: #888"],
:root[data-theme="dark"] [style*=";color: #888;"],
:root[data-theme="dark"] [style$=";color: #888"],
:root[data-theme="dark"] [style*="; color: #888;"],
:root[data-theme="dark"] [style$="; color: #888"],
:root[data-theme="dark"] [style^="color:#9ca3af;"],
:root[data-theme="dark"] [style="color:#9ca3af"],
:root[data-theme="dark"] [style*=";color:#9ca3af;"],
:root[data-theme="dark"] [style$=";color:#9ca3af"],
:root[data-theme="dark"] [style*="; color:#9ca3af;"],
:root[data-theme="dark"] [style$="; color:#9ca3af"],
:root[data-theme="dark"] [style^="color: #9ca3af;"],
:root[data-theme="dark"] [style="color: #9ca3af"],
:root[data-theme="dark"] [style*=";color: #9ca3af;"],
:root[data-theme="dark"] [style$=";color: #9ca3af"],
:root[data-theme="dark"] [style*="; color: #9ca3af;"],
:root[data-theme="dark"] [style$="; color: #9ca3af"],
:root[data-theme="dark"] [style^="color:#94a3b8;"],
:root[data-theme="dark"] [style="color:#94a3b8"],
:root[data-theme="dark"] [style*=";color:#94a3b8;"],
:root[data-theme="dark"] [style$=";color:#94a3b8"],
:root[data-theme="dark"] [style*="; color:#94a3b8;"],
:root[data-theme="dark"] [style$="; color:#94a3b8"],
:root[data-theme="dark"] [style^="color: #94a3b8;"],
:root[data-theme="dark"] [style="color: #94a3b8"],
:root[data-theme="dark"] [style*=";color: #94a3b8;"],
:root[data-theme="dark"] [style$=";color: #94a3b8"],
:root[data-theme="dark"] [style*="; color: #94a3b8;"],
:root[data-theme="dark"] [style$="; color: #94a3b8"],
:root[data-theme="dark"] [style^="color:#b4b2a9;"],
:root[data-theme="dark"] [style="color:#b4b2a9"],
:root[data-theme="dark"] [style*=";color:#b4b2a9;"],
:root[data-theme="dark"] [style$=";color:#b4b2a9"],
:root[data-theme="dark"] [style*="; color:#b4b2a9;"],
:root[data-theme="dark"] [style$="; color:#b4b2a9"],
:root[data-theme="dark"] [style^="color: #b4b2a9;"],
:root[data-theme="dark"] [style="color: #b4b2a9"],
:root[data-theme="dark"] [style*=";color: #b4b2a9;"],
:root[data-theme="dark"] [style$=";color: #b4b2a9"],
:root[data-theme="dark"] [style*="; color: #b4b2a9;"],
:root[data-theme="dark"] [style$="; color: #b4b2a9"],
:root[data-theme="dark"] [style^="color:#c0c0bb;"],
:root[data-theme="dark"] [style="color:#c0c0bb"],
:root[data-theme="dark"] [style*=";color:#c0c0bb;"],
:root[data-theme="dark"] [style$=";color:#c0c0bb"],
:root[data-theme="dark"] [style*="; color:#c0c0bb;"],
:root[data-theme="dark"] [style$="; color:#c0c0bb"],
:root[data-theme="dark"] [style^="color: #c0c0bb;"],
:root[data-theme="dark"] [style="color: #c0c0bb"],
:root[data-theme="dark"] [style*=";color: #c0c0bb;"],
:root[data-theme="dark"] [style$=";color: #c0c0bb"],
:root[data-theme="dark"] [style*="; color: #c0c0bb;"],
:root[data-theme="dark"] [style$="; color: #c0c0bb"],
:root[data-theme="dark"] [style^="color:#d4d3ce;"],
:root[data-theme="dark"] [style="color:#d4d3ce"],
:root[data-theme="dark"] [style*=";color:#d4d3ce;"],
:root[data-theme="dark"] [style$=";color:#d4d3ce"],
:root[data-theme="dark"] [style*="; color:#d4d3ce;"],
:root[data-theme="dark"] [style$="; color:#d4d3ce"],
:root[data-theme="dark"] [style^="color: #d4d3ce;"],
:root[data-theme="dark"] [style="color: #d4d3ce"],
:root[data-theme="dark"] [style*=";color: #d4d3ce;"],
:root[data-theme="dark"] [style$=";color: #d4d3ce"],
:root[data-theme="dark"] [style*="; color: #d4d3ce;"],
:root[data-theme="dark"] [style$="; color: #d4d3ce"],
:root[data-theme="dark"] [style^="color:#aaa;"],
:root[data-theme="dark"] [style="color:#aaa"],
:root[data-theme="dark"] [style*=";color:#aaa;"],
:root[data-theme="dark"] [style$=";color:#aaa"],
:root[data-theme="dark"] [style*="; color:#aaa;"],
:root[data-theme="dark"] [style$="; color:#aaa"],
:root[data-theme="dark"] [style^="color: #aaa;"],
:root[data-theme="dark"] [style="color: #aaa"],
:root[data-theme="dark"] [style*=";color: #aaa;"],
:root[data-theme="dark"] [style$=";color: #aaa"],
:root[data-theme="dark"] [style*="; color: #aaa;"],
:root[data-theme="dark"] [style$="; color: #aaa"],
:root[data-theme="dark"] [style^="color:#999;"],
:root[data-theme="dark"] [style="color:#999"],
:root[data-theme="dark"] [style*=";color:#999;"],
:root[data-theme="dark"] [style$=";color:#999"],
:root[data-theme="dark"] [style*="; color:#999;"],
:root[data-theme="dark"] [style$="; color:#999"],
:root[data-theme="dark"] [style^="color: #999;"],
:root[data-theme="dark"] [style="color: #999"],
:root[data-theme="dark"] [style*=";color: #999;"],
:root[data-theme="dark"] [style$=";color: #999"],
:root[data-theme="dark"] [style*="; color: #999;"],
:root[data-theme="dark"] [style$="; color: #999"] { color: var(--text-subtle) !important; }
:root[data-theme="dark"] [style*="solid #ddd"],
:root[data-theme="dark"] [style*="solid #e5e7eb"],
:root[data-theme="dark"] [style*="solid #e2e8f0"],
:root[data-theme="dark"] [style*="solid #e5e4e2"],
:root[data-theme="dark"] [style*="solid #d4d4ca"],
:root[data-theme="dark"] [style*="solid #e0e0e0"],
:root[data-theme="dark"] [style*="solid #efefef"],
:root[data-theme="dark"] [style*="solid #e2e2e2"],
:root[data-theme="dark"] [style*="solid #e8e7e2"],
:root[data-theme="dark"] [style*="solid #eee"] { border-color: var(--border) !important; }
/* acento fijo en atributo style → acento del workspace (claro y oscuro) */
:root [style^="color:#8B1A4A;"],
:root [style="color:#8B1A4A"],
:root [style*=";color:#8B1A4A;"],
:root [style$=";color:#8B1A4A"],
:root [style*="; color:#8B1A4A;"],
:root [style$="; color:#8B1A4A"],
:root [style^="color: #8B1A4A;"],
:root [style="color: #8B1A4A"],
:root [style*=";color: #8B1A4A;"],
:root [style$=";color: #8B1A4A"],
:root [style*="; color: #8B1A4A;"],
:root [style$="; color: #8B1A4A"],
:root [style^="color:#8b1a4a;"],
:root [style="color:#8b1a4a"],
:root [style*=";color:#8b1a4a;"],
:root [style$=";color:#8b1a4a"],
:root [style*="; color:#8b1a4a;"],
:root [style$="; color:#8b1a4a"],
:root [style^="color: #8b1a4a;"],
:root [style="color: #8b1a4a"],
:root [style*=";color: #8b1a4a;"],
:root [style$=";color: #8b1a4a"],
:root [style*="; color: #8b1a4a;"],
:root [style$="; color: #8b1a4a"],
:root [style^="color:#9f004a;"],
:root [style="color:#9f004a"],
:root [style*=";color:#9f004a;"],
:root [style$=";color:#9f004a"],
:root [style*="; color:#9f004a;"],
:root [style$="; color:#9f004a"],
:root [style^="color: #9f004a;"],
:root [style="color: #9f004a"],
:root [style*=";color: #9f004a;"],
:root [style$=";color: #9f004a"],
:root [style*="; color: #9f004a;"],
:root [style$="; color: #9f004a"] { color: var(--accent-text) !important; }
:root [style^="background:#8B1A4A;"],
:root [style="background:#8B1A4A"],
:root [style*=";background:#8B1A4A;"],
:root [style$=";background:#8B1A4A"],
:root [style*="; background:#8B1A4A;"],
:root [style$="; background:#8B1A4A"],
:root [style^="background: #8B1A4A;"],
:root [style="background: #8B1A4A"],
:root [style*=";background: #8B1A4A;"],
:root [style$=";background: #8B1A4A"],
:root [style*="; background: #8B1A4A;"],
:root [style$="; background: #8B1A4A"],
:root [style^="background:#8b1a4a;"],
:root [style="background:#8b1a4a"],
:root [style*=";background:#8b1a4a;"],
:root [style$=";background:#8b1a4a"],
:root [style*="; background:#8b1a4a;"],
:root [style$="; background:#8b1a4a"],
:root [style^="background: #8b1a4a;"],
:root [style="background: #8b1a4a"],
:root [style*=";background: #8b1a4a;"],
:root [style$=";background: #8b1a4a"],
:root [style*="; background: #8b1a4a;"],
:root [style$="; background: #8b1a4a"],
:root [style^="background:#9f004a;"],
:root [style="background:#9f004a"],
:root [style*=";background:#9f004a;"],
:root [style$=";background:#9f004a"],
:root [style*="; background:#9f004a;"],
:root [style$="; background:#9f004a"],
:root [style^="background: #9f004a;"],
:root [style="background: #9f004a"],
:root [style*=";background: #9f004a;"],
:root [style$=";background: #9f004a"],
:root [style*="; background: #9f004a;"],
:root [style$="; background: #9f004a"] { background: var(--accent) !important; }
:root [style*="border-color:#8B1A4A"],
:root [style*="solid #8B1A4A"],
:root [style*="solid #8b1a4a"],
:root [style*="border-color: #8B1A4A"] { border-color: var(--accent) !important; }
/* acento fijo → acento del workspace (claro y oscuro) */
:where(:root) .mtg-type-pill:hover{border-color:var(--accent);color:var(--accent-text)}
:where(:root) .mtg-type-pill.sel{background:var(--accent);border-color:var(--accent)}
:where(:root) .mtg-cal-day.today{outline:1.5px solid var(--accent);color:var(--accent-text)}
:where(:root) .mtg-cal-day.sel{background:var(--accent)}
:where(:root) .mtg-input:focus{border-color:var(--accent)}
:where(:root) .mtg-dur-pill:hover{border-color:var(--accent);color:var(--accent-text)}
:where(:root) .mtg-dur-pill.sel{border-color:var(--accent);color:var(--accent-text)}
:where(:root) .mtg-collapsible-btn{color:var(--accent-text)}
:where(:root) .mtg-toggle input:checked + .mtg-toggle-track{background:var(--accent)}
:where(:root) .mtg-btn-confirm{background:var(--accent)}
:where(:root) .cv-btn.primary{background:var(--accent);border-color:var(--accent)}
:where(:root) .cv-view-btn.active{background:var(--accent)}
:where(:root) .cv-search:focus{border-color:var(--accent)}
:where(:root) .cv-sort-select:focus{border-color:var(--accent)}
:where(:root) .cv-chip.active{background:var(--accent);border-color:var(--accent)}
:where(:root) .cv-adv-toggle.active{border-color:var(--accent);color:var(--accent-text)}
:where(:root) .cv-adv-select:focus{border-color:var(--accent)}
:where(:root) .cv-clear-all{color:var(--accent-text)}
:where(:root) .cv-bulk-count{color:var(--accent-text)}
:where(:root) .cv-table thead th.sorted{color:var(--accent-text)}
:where(:root) .cv-table tbody tr:hover td{background:var(--accent-soft)}
:where(:root) .cv-list-row:hover{background:var(--accent-soft)}
:where(:root) .cv-page-btn.active{background:var(--accent);border-color:var(--accent)}
:where(:root) .cv-af-chip{color:var(--accent-text)}
:where(:root) .cv-af-chip button{color:var(--accent-text)}
:where(:root) .cv-sort-sel:focus{border-color:var(--accent)}
:where(:root) .cv-bulk-bar{background:var(--accent-soft)}
:where(:root) .cv-row:hover td{background:var(--accent-soft)}
:where(:root) .home-section-link{color:var(--accent-text)}
:where(:root) .opp-card{border-left:3px solid var(--accent)}
:where(:root) .opp-btn.primary{background:var(--accent);border-color:var(--accent)}
:where(:root) .pipe-bar-fill{background:var(--accent)}
:where(:root) .home-seq-block{background:var(--accent-soft)}
:where(:root) .home-seq-name{color:var(--accent-text)}
:where(:root) .home-seq-btn{background:var(--accent)}
:where(:root) .deal-value{color:var(--accent-text)}
:where(:root) .nc-stage-pill.selected{background:var(--accent);border-color:var(--accent)}
:where(:root) .pipe-search:focus{border-color:var(--accent)}
:where(:root) .pipe-search.active{border-color:var(--accent);background:var(--accent-soft)}
:where(:root) .seq-enroll-btn{border:1px solid var(--accent);color:var(--accent-text)}
:where(:root) .seq-enroll-btn:hover{background:var(--accent)}
:where(:root) .seq-enrolled-more{color:var(--accent-text)}
:where(:root) .enroll-search:focus{border-color:var(--accent)}
:where(:root) .enroll-selectall-btn{color:var(--accent-text);border:1px solid var(--accent)}
:where(:root) .enroll-selectall-btn:hover{background:var(--accent)}
:where(:root) .enroll-contact-item.selected{background:var(--accent-soft)}
:where(:root) .enroll-clear-btn:hover{color:var(--accent-text)}
:where(:root) .enroll-add-btn{background:var(--accent);border:1px solid var(--accent)}
:where(:root) .call-outcome-pill:hover{border-color:var(--accent);color:var(--accent-text)}
:where(:root) .call-outcome-pill.selected{background:var(--accent);border-color:var(--accent)}
:where(:root) .call-outcome-followup input[type="datetime-local"]:focus{border-color:var(--accent)}
:where(:root) .call-outcome-confirm{background:var(--accent)}
:where(:root) .call-outcome-confirm:hover{background:var(--accent-h)}
:where(:root) .call-outcome-notes-ta:focus{border-color:var(--accent)}
:where(:root) .call-log-followup{color:var(--accent-text)}
:where(:root) .act-add-btn:hover{border-color:var(--accent);color:var(--accent-text)}
:where(:root) .act-note-ta:focus{border-color:var(--accent)}
:where(:root) .act-note-save{background:var(--accent)}
:where(:root) .act-note-save:hover{background:var(--accent-h)}
:where(:root) .act-followup{color:var(--accent-text)}
:where(:root) .act-see-more{color:var(--accent-text)}
:where(:root) .rem-add-btn{color:var(--accent-text)}
:where(:root) .rem-add-btn:hover{background:var(--accent-soft)}
:where(:root) .rem-type-pill.selected{background:var(--accent);border-color:var(--accent)}
:where(:root) .rem-date-input:focus,:where(:root) .rem-time-input:focus{border-color:var(--accent)}
:where(:root) .rem-note-ta:focus{border-color:var(--accent)}
:where(:root) .rem-save-btn{background:var(--accent)}
:where(:root) .rem-save-btn:hover{background:var(--accent)}
:where(:root) .rem-cancel-btn{color:var(--accent-text)}
:where(:root) .rem-cancel-btn:hover{background:var(--accent-soft)}
:where(:root) .rem-row-del:hover{color:var(--accent-text)}
:where(:root) .rem-row-edit:hover{color:var(--accent-text)}
:where(:root) .seq-action-btn.primary{background:var(--accent);border-color:var(--accent)}
:where(:root) .seq-action-btn.primary:disabled:hover{background:var(--accent)}
:where(:root) .seq-flt-chip.on{background:var(--accent);border-color:var(--accent)}
:where(:root) .seq-flt-dd.on > summary{border-color:var(--accent);color:var(--accent-text)}
:where(:root) .seq-flt-badge{background:var(--accent)}
:where(:root) .seq-flt-q:focus{border-color:var(--accent)}
:where(:root) .seq-contact-link{color:var(--accent-text)}
:where(:root) .seq-metric.hl b{color:var(--accent-text)}
:where(:root) .seq-funnel-bar span{background:var(--accent)}
:where(:root) .wfp-progress-bar{background:var(--accent)}
:where(:root) .swp-tab.active{color:var(--accent-text);border-bottom-color:var(--accent)}
:where(:root) .wfp-seq-step-indicator{color:var(--accent-text)}
:where(:root) .wfp-stepper-line.done{background:var(--accent)}
:where(:root) .wfp-stepper-dot.done{background:var(--accent);border-color:var(--accent)}
:where(:root) .wfp-stepper-dot.current{background:var(--accent);border-color:var(--accent)}
:where(:root) .wfp-action-btn.primary{background:var(--accent);border-color:var(--accent)}
:where(:root) .wfp-action-btn.primary:hover{background:var(--accent-h)}
:where(:root) .cop-edit-link:hover{border-color:var(--accent);color:var(--accent-text)}
:where(:root) .cdp-sb-action-btn.primary{background:var(--accent);border-color:var(--accent)}
:where(:root) .cdp-sb-action-btn.primary:hover{background:var(--accent-h);border-color:var(--accent)}
:where(:root) .cdp-sb-split-main.primary{background:var(--accent)}
:where(:root) .cdp-sb-split-main.primary:hover{background:var(--accent-h) !important}
:where(:root) .cdp-feed-btn.primary{background:var(--accent);border-color:var(--accent)}
:where(:root) .cdp-feed-btn.primary:hover{background:var(--accent-h);border-color:var(--accent)}
:where(:root) .cdp-rem-complete{background:var(--accent)}
:where(:root) .cdp-rem-complete:hover{background:var(--accent-h)}
:where(:root) .cdp-seq-select:focus{border-color:var(--accent)}
:where(:root) .cdp-seq-add-btn{background:var(--accent)}
:where(:root) .act-chat-log{border-left:3px solid var(--accent)}
:where(:root) .act-chat-log .act-platform{color:var(--accent-text)}
:where(:root) .cv-dropdown-item:hover{color:var(--accent-text)}
:where(:root) .imp-dropzone.over,:where(:root) .imp-dropzone:hover{border-color:var(--accent)}
:where(:root) .cv-af-chip button:hover{background:var(--accent)}
:where(:root) .cv-adv-opts label:has(input:checked){border-color:var(--accent);color:var(--accent-text)}
:where(:root) .ddp-upload-btn:hover{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
:where(:root) .wfp-nav-search input:focus{border-color:var(--accent)}
:where(:root) .wfp-nav-item.current .wfp-nav-item-num{color:var(--accent-text)}
:where(:root) .wfp-nav-item.current .wfp-nav-item-name{color:var(--accent-text)}
:where(:root) .wfp-nav-item.current .wfp-nav-item-step{color:var(--accent-text)}
:where(:root) .cdp-eam-pill.selected{border-color:var(--accent);background:var(--accent)}
:where(:root) .cdp-eam-ta:focus{border-color:var(--accent)}
:where(:root) .fin-tab:hover{border-color:var(--accent);color:var(--accent-text)}
:where(:root) .fin-tab.active{background:var(--accent);border-color:var(--accent)}
:where(:root) .fin-btn-primary{background:var(--accent)}
:where(:root) .fin-btn-primary:hover{background:var(--accent-h)}
:where(:root) .fin-modal-close:hover{color:var(--accent-text)}
:where(:root) .fin-input:focus{border-color:var(--accent)}
@media (min-width: 769px){
  :where(:root) #cv-body .cv-table tbody tr.cv-row:hover td.cv-td-check,:where(:root) #cv-body .cv-table tbody tr.cv-row:hover td.cv-td-name{background:var(--accent-soft)}
}
@media (max-width:768px){
  :where(:root) .cv-mobile-dropdown button:first-child{color:var(--accent-text)}
}
/* neutros fijos → tokens (solo oscuro) */
:where(:root[data-theme="dark"]) .login-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .login-google-btn{background:var(--surface);border:1.5px solid var(--border);color:var(--text)}
:where(:root[data-theme="dark"]) .login-google-btn:hover{border-color:var(--border)}
:where(:root[data-theme="dark"]) .login-error{color:var(--danger)}
:where(:root[data-theme="dark"]) #mtg-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .mtg-header{border-bottom:1px solid var(--border)}
:where(:root[data-theme="dark"]) .mtg-header-title{color:var(--text)}
:where(:root[data-theme="dark"]) .mtg-close:hover{background:var(--surface);color:var(--text)}
:where(:root[data-theme="dark"]) .mtg-section{border-bottom:1px solid var(--border)}
:where(:root[data-theme="dark"]) .mtg-type-pill{border:1.5px solid var(--border);background:var(--surface);color:var(--text)}
:where(:root[data-theme="dark"]) .mtg-cal-nav button:hover{background:var(--surface);color:var(--text)}
:where(:root[data-theme="dark"]) .mtg-cal-month{color:var(--text)}
:where(:root[data-theme="dark"]) .mtg-cal-day:hover{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .mtg-cal-day.other{color:var(--text-subtle)}
:where(:root[data-theme="dark"]) .mtg-input{border:1.5px solid var(--border)}
:where(:root[data-theme="dark"]) .mtg-dur-pill{border:1.5px solid var(--border);background:var(--surface);color:var(--text)}
:where(:root[data-theme="dark"]) .mtg-dur-pill.sel{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .mtg-toggle-track{background:var(--surface-3)}
:where(:root[data-theme="dark"]) .mtg-toggle-thumb{background:var(--surface)}
:where(:root[data-theme="dark"]) .mtg-footer{border-top:1px solid var(--border)}
:where(:root[data-theme="dark"]) .mtg-btn-cancel:hover{background:var(--surface);color:var(--text)}
:where(:root[data-theme="dark"]) .rpt-kpi-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .rpt-kpi-trend.down{color:var(--danger)}
:where(:root[data-theme="dark"]) .rpt-kpi-card.red .rpt-kpi-val{color:var(--danger)}
:where(:root[data-theme="dark"]) .trash-row{background:var(--surface)}
:where(:root[data-theme="dark"]) .trash-restore-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .trash-perm-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .trash-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .trash-modal-cancel{background:var(--surface)}
:where(:root[data-theme="dark"]) .cli-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .cli-tag{background:var(--surface);color:var(--info)}
:where(:root[data-theme="dark"]) .btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .metric{background:var(--surface)}
:where(:root[data-theme="dark"]) .table-wrap{background:var(--surface)}
:where(:root[data-theme="dark"]) .search-input:focus{background:var(--surface)}
:where(:root[data-theme="dark"]) .filter-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-wrap{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-kpi-card:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-view-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-stat-value.danger{color:var(--danger)}
:where(:root[data-theme="dark"]) .cv-search:focus{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-chip{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-result-count{color:var(--text)}
:where(:root[data-theme="dark"]) .cv-adv-select{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-active-chip button:hover{color:var(--danger)}
:where(:root[data-theme="dark"]) .cv-table thead th{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-table thead th:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-table tbody tr:nth-child(even) td{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-table tbody tr.selected td{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .cv-ind-chip{background:var(--surface-2);color:var(--text-muted)}
:where(:root[data-theme="dark"]) .cv-last-contact.never{color:var(--danger)}
:where(:root[data-theme="dark"]) .cv-action-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-kanbancol-count{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-kanban-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-list-row.selected{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .cv-page-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-af-chip{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .cv-row-selected td{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .tag.en-comunicacion{background:var(--surface);color:var(--success)}
:where(:root[data-theme="dark"]) .tag.propuesta{background:var(--surface-2);color:var(--accent-text)}
:where(:root[data-theme="dark"]) .home-header{background:var(--surface)}
:where(:root[data-theme="dark"]) .home-subtitle .hs-chip.hot{background:var(--surface);color:var(--danger)}
:where(:root[data-theme="dark"]) .home-subtitle .hs-chip.tasks{background:var(--surface);color:var(--success)}
:where(:root[data-theme="dark"]) .home-subtitle .hs-chip.rems{background:var(--surface);color:var(--info)}
:where(:root[data-theme="dark"]) .home-section{background:var(--surface)}
:where(:root[data-theme="dark"]) .opp-reminder{color:var(--info);background:var(--surface)}
:where(:root[data-theme="dark"]) .call-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .wf-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .toggle::after{background:var(--surface)}
:where(:root[data-theme="dark"]) .stage.drag-over{background:var(--surface)}
:where(:root[data-theme="dark"]) .stage.hot-lead-stage{background:var(--surface)}
:where(:root[data-theme="dark"]) .stage-count{background:var(--surface)}
:where(:root[data-theme="dark"]) .deal-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .deal-card.drag-placeholder{background:var(--surface)}
:where(:root[data-theme="dark"]) .outreach-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .form-input{background:var(--surface)}
:where(:root[data-theme="dark"]) .dup-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .dup-reason.social{background:var(--surface-2);color:var(--accent-text)}
:where(:root[data-theme="dark"]) .detail-panel{background:var(--surface)}
:where(:root[data-theme="dark"]) .dp-close{background:var(--surface)}
:where(:root[data-theme="dark"]) .dp-edit-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .dp-inline-input{background:var(--surface)}
:where(:root[data-theme="dark"]) .dp-cancel-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .dp-action-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .deal-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .nc-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .nc-stage-pill{background:var(--surface)}
:where(:root[data-theme="dark"]) .nc-hot-row{background:var(--surface)}
:where(:root[data-theme="dark"]) .nc-multi-row button{background:var(--surface)}
:where(:root[data-theme="dark"]) .deal-detail-panel{background:var(--surface)}
:where(:root[data-theme="dark"]) .pipe-search{background:var(--surface)}
:where(:root[data-theme="dark"]) .pipeline-stats-bar{background:var(--surface)}
:where(:root[data-theme="dark"]) .call-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .cf-rec-btn{background:var(--surface);color:var(--danger)}
:where(:root[data-theme="dark"]) .cf-rec-btn:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .call-voice-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .ai-result{background:var(--surface)}
:where(:root[data-theme="dark"]) .callh-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-enroll-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-complete-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .enroll-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .enroll-selectall-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .enroll-footer{background:var(--surface)}
:where(:root[data-theme="dark"]) .enroll-cancel-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .work-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .work-progress-bar{background:var(--surface)}
:where(:root[data-theme="dark"]) .work-link-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .call-outcome-panel{background:var(--surface);border:1px solid var(--border)}
:where(:root[data-theme="dark"]) .call-outcome-pill{border:1.5px solid var(--border);background:var(--surface);color:var(--text)}
:where(:root[data-theme="dark"]) .call-outcome-pill:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .call-outcome-step2{border-top:1px dashed var(--border)}
:where(:root[data-theme="dark"]) .call-outcome-followup input[type="datetime-local"]{background:var(--surface);border:1.5px solid var(--border);color:var(--text)}
:where(:root[data-theme="dark"]) .call-outcome-notes-ta{background:var(--surface);border:1.5px solid var(--border);color:var(--text)}
:where(:root[data-theme="dark"]) .wm-stage-select.s-en-comunicacion{background-color:var(--surface-2);color:var(--accent-text)}
:where(:root[data-theme="dark"]) .wm-stage-select.s-demo{background-color:var(--surface-2);color:var(--info)}
:where(:root[data-theme="dark"]) .wm-stage-select.s-propuesta{background-color:var(--surface-2);color:var(--success)}
:where(:root[data-theme="dark"]) .wm-stage-select.s-default{background-color:var(--surface-2);color:var(--text)}
:where(:root[data-theme="dark"]) .work-notes-box{background:var(--surface)}
:where(:root[data-theme="dark"]) .work-field-input{background:var(--surface)}
:where(:root[data-theme="dark"]) .wm-multi-remove-btn:hover{color:var(--danger);background:var(--surface)}
:where(:root[data-theme="dark"]) .wm-phone-picker{background:var(--surface)}
:where(:root[data-theme="dark"]) .call-log-section{background:var(--surface)}
:where(:root[data-theme="dark"]) .act-add-btn:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .act-note-ta{background:var(--surface)}
:where(:root[data-theme="dark"]) .act-entry{border-left:2px solid var(--border)}
:where(:root[data-theme="dark"]) .act-type-label.wa{background:var(--surface);color:var(--success)}
:where(:root[data-theme="dark"]) .act-type-label.note{background:var(--surface);color:var(--warn)}
:where(:root[data-theme="dark"]) .rem-add-btn{border:1.5px solid var(--border)}
:where(:root[data-theme="dark"]) .rem-form{background:var(--surface);border:1px solid var(--border)}
:where(:root[data-theme="dark"]) .rem-type-pill{border:1.5px solid var(--border);background:var(--surface);color:var(--text)}
:where(:root[data-theme="dark"]) .rem-date-input,:where(:root[data-theme="dark"]) .rem-time-input{border:1.5px solid var(--border);color:var(--text);background:var(--surface)}
:where(:root[data-theme="dark"]) .rem-note-ta{border:1.5px solid var(--border);color:var(--text);background:var(--surface)}
:where(:root[data-theme="dark"]) .rem-cancel-btn{background:var(--surface);border:1.5px solid var(--border)}
:where(:root[data-theme="dark"]) .rem-row{background:var(--surface);border:1px solid var(--border)}
:where(:root[data-theme="dark"]) .rem-row-date{color:var(--text)}
:where(:root[data-theme="dark"]) .rem-edit-form{background:var(--surface);border:1.5px solid var(--border)}
:where(:root[data-theme="dark"]) .seq-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-step-chip{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-action-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-flt-chip{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-flt-dd > summary{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-flt-dd-menu{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-flt-q{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-mdetail{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-toggle-slider:before{background:var(--surface)}
:where(:root[data-theme="dark"]) .seq-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .step-type-select{background:var(--surface)}
:where(:root[data-theme="dark"]) .step-note-input{background:var(--surface)}
:where(:root[data-theme="dark"]) .email-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-topbar{background:var(--surface)}
:where(:root[data-theme="dark"]) .swp-tab-bar{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-left{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-right{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-stepper-dot{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-action-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-action-btn.danger{color:var(--danger)}
:where(:root[data-theme="dark"]) .wfp-action-btn.danger:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-cop-wrap{background:var(--surface)}
:where(:root[data-theme="dark"]) .cop-inline{background:var(--surface);border:1px solid var(--border)}
:where(:root[data-theme="dark"]) .cop-edit-link:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-contact-header{background:var(--surface)}
:where(:root[data-theme="dark"]) .hot-lead-btn{border:1.5px solid var(--border);background:var(--surface);color:var(--text-subtle)}
:where(:root[data-theme="dark"]) .stage.hot-lead-stage .stage-header{color:var(--warn)}
:where(:root[data-theme="dark"]) .cdp-topbar{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-sidebar{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-main{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-sb-action-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-sb-split{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-feed-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-inline-form{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-feed-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-icon-email{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-icon-instagram{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .cdp-icon-meeting{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-icon-stage{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-rem-time{color:var(--warn)}
:where(:root[data-theme="dark"]) .cdp-notes-section{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-header-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-service-tag{background:var(--surface-2);color:var(--text-muted)}
:where(:root[data-theme="dark"]) .cdp-svc-tag{border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted)}
:where(:root[data-theme="dark"]) .cdp-svc-tag:hover{color:var(--accent-text)}
:where(:root[data-theme="dark"]) .cdp-svc-tag.active{color:var(--accent-text)}
:where(:root[data-theme="dark"]) .cdp-svc-add-btn{color:var(--accent-text)}
:where(:root[data-theme="dark"]) .cdp-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .cl-plat-btn{border:0.5px solid var(--border)}
:where(:root[data-theme="dark"]) .cl-plat-btn.whatsapp.active{background:var(--surface)}
:where(:root[data-theme="dark"]) .cl-plat-btn.linkedin.active{background:var(--surface);color:var(--info)}
:where(:root[data-theme="dark"]) .cl-plat-btn.instagram.active{background:var(--surface-2);color:var(--accent-text)}
:where(:root[data-theme="dark"]) .cl-plat-btn.email.active{background:var(--surface);color:var(--text)}
:where(:root[data-theme="dark"]) .comp-edit-input:focus{background:var(--surface)}
:where(:root[data-theme="dark"]) .gs-input{background:var(--surface)}
:where(:root[data-theme="dark"]) .gs-dd{background:var(--surface)}
:where(:root[data-theme="dark"]) .chat-search:focus{background:var(--surface)}
:where(:root[data-theme="dark"]) .chat-push.chat-push--on .chat-push-text{color:var(--success)}
:where(:root[data-theme="dark"]) .chat-push.chat-push--error .chat-push-text{color:var(--danger)}
:where(:root[data-theme="dark"]) .chat-main{background:var(--surface)}
:where(:root[data-theme="dark"]) .chat-row.chat-row--unread .chat-row-time{color:var(--success)}
:where(:root[data-theme="dark"]) .chat-day{background:var(--surface)}
:where(:root[data-theme="dark"]) .chat-msg{color:var(--text)}
:where(:root[data-theme="dark"]) .chat-msg.chat-msg--in{background:var(--surface)}
:where(:root[data-theme="dark"]) .chat-msg.chat-msg--out{background:var(--success-bg)}
:where(:root[data-theme="dark"]) .chat-msg.chat-msg--failed{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .chat-tick.chat-tick--failed{color:var(--danger)}
:where(:root[data-theme="dark"]) .chat-msg-error{color:var(--danger)}
:where(:root[data-theme="dark"]) .chat-composer-status.chat-composer-status--error{color:var(--danger)}
:where(:root[data-theme="dark"]) .chat-input{background:var(--surface)}
:where(:root[data-theme="dark"]) .mtg-avail-wrap{border-top:1px solid var(--border)}
:where(:root[data-theme="dark"]) .mtg-avail-label{color:var(--text-muted)}
:where(:root[data-theme="dark"]) .mtg-avail-slot.free{background:var(--surface)}
:where(:root[data-theme="dark"]) .mtg-avail-slot.busy{background:var(--surface)}
:where(:root[data-theme="dark"]) .mtg-avail-slot-time{color:var(--text)}
:where(:root[data-theme="dark"]) .mtg-avail-slot-title{color:var(--text-muted)}
:where(:root[data-theme="dark"]) .mtg-avail-loading{color:var(--text-subtle)}
:where(:root[data-theme="dark"]) .mtg-avail-warn{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-dropdown-menu{background:var(--surface);border:1px solid var(--border)}
:where(:root[data-theme="dark"]) .cv-dropdown-item{color:var(--text)}
:where(:root[data-theme="dark"]) .cv-dropdown-item:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-dropdown-sep{background:var(--surface)}
:where(:root[data-theme="dark"]) .imp-dropzone{border:2px dashed var(--border)}
:where(:root[data-theme="dark"]) .imp-dropzone.over,:where(:root[data-theme="dark"]) .imp-dropzone:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .imp-file-chip{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-adv-panel .cv-sort-sel{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-adv-opts label{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-adv-opts label:has(input:checked){background:var(--surface-2)}
:where(:root[data-theme="dark"]) .ddp-proposal-row:hover{background:var(--surface);border-color:var(--border)}
:where(:root[data-theme="dark"]) #ddp-doc-viewer-box{background:var(--surface)}
:where(:root[data-theme="dark"]) #ddp-doc-viewer-header{background:var(--surface)}
:where(:root[data-theme="dark"]) .co-box{background:var(--surface)}
:where(:root[data-theme="dark"]) .co-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .co-select{background:var(--surface)}
:where(:root[data-theme="dark"]) .co-blk-amber{background:var(--surface)}
:where(:root[data-theme="dark"]) .co-blk-amber .co-blk-age{color:var(--warn)}
:where(:root[data-theme="dark"]) .act-entry:hover{background:var(--surface);border-color:var(--border)}
:where(:root[data-theme="dark"]) .ev-inline-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .ev-compose-ta{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-nav-panel{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-nav-search input{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-nav-search input:focus{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-nav-item.current{background:var(--surface)}
:where(:root[data-theme="dark"]) .wfp-commercial{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-deal-card:hover{background:var(--surface);border-color:var(--border)}
:where(:root[data-theme="dark"]) .cdp-feed-card.cdp-feed-card--editable:hover{background:var(--surface);border-color:var(--border)}
:where(:root[data-theme="dark"]) .cdp-act-edit-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-act-edit-btn:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-act-del-btn{background:var(--surface);color:var(--danger)}
:where(:root[data-theme="dark"]) #cdp-edit-act-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .cdp-eam-pill{background:var(--surface)}
:where(:root[data-theme="dark"]) .comp-search{background:var(--surface)}
:where(:root[data-theme="dark"]) .comp-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .comp-detail-topbar{background:var(--surface)}
:where(:root[data-theme="dark"]) .comp-info-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .comp-view-toggle{background:var(--surface)}
:where(:root[data-theme="dark"]) .comp-list-table{background:var(--surface)}
:where(:root[data-theme="dark"]) .comp-pipeline-card{background:var(--surface)}
:where(:root[data-theme="dark"]) .cv-stages-config-btn{background:var(--surface)}
:where(:root[data-theme="dark"]) .stages-row{background:var(--surface)}
:where(:root[data-theme="dark"]) .stages-key-input{border:1px solid var(--border);color:var(--text-muted)}
:where(:root[data-theme="dark"]) .stages-delete-btn{color:var(--danger)}
:where(:root[data-theme="dark"]) .stages-drag-handle{color:var(--text-subtle)}
:where(:root[data-theme="dark"]) .fin-tab{border:1.5px solid var(--border);background:var(--surface);color:var(--text)}
:where(:root[data-theme="dark"]) .fin-btn-secondary{background:var(--surface);color:var(--text);border:1.5px solid var(--border)}
:where(:root[data-theme="dark"]) .fin-table{background:var(--surface)}
:where(:root[data-theme="dark"]) .fin-table tbody td{color:var(--text)}
:where(:root[data-theme="dark"]) .fin-modal{background:var(--surface)}
:where(:root[data-theme="dark"]) .fin-modal-header{border-bottom:1px solid var(--border);color:var(--info)}
:where(:root[data-theme="dark"]) .fin-modal-close{color:var(--text-subtle)}
:where(:root[data-theme="dark"]) .fin-modal-footer{border-top:1px solid var(--border)}
:where(:root[data-theme="dark"]) .fin-label{color:var(--text-muted)}
:where(:root[data-theme="dark"]) .fin-input{border:1.5px solid var(--border);color:var(--text)}
:where(:root[data-theme="dark"]) .pl-ring{border-top-color:var(--border)}
@media (min-width: 769px){
  :where(:root[data-theme="dark"]) #cv-body .cv-table thead th:nth-child(1),:where(:root[data-theme="dark"]) #cv-body .cv-table thead th:nth-child(2){background:var(--surface)}
  :where(:root[data-theme="dark"]) #cv-body .cv-table tbody td.cv-td-check,:where(:root[data-theme="dark"]) #cv-body .cv-table tbody td.cv-td-name{background:var(--surface)}
  :where(:root[data-theme="dark"]) #cv-body .cv-table tbody tr:nth-child(even) td.cv-td-check,:where(:root[data-theme="dark"]) #cv-body .cv-table tbody tr:nth-child(even) td.cv-td-name{background:var(--surface)}
  :where(:root[data-theme="dark"]) #cv-body .cv-table tbody tr.cv-row-selected td.cv-td-check,:where(:root[data-theme="dark"]) #cv-body .cv-table tbody tr.cv-row-selected td.cv-td-name{background:var(--surface-2)}
  :where(:root[data-theme="dark"]) #cv-body .cv-table thead th:nth-child(1):hover,:where(:root[data-theme="dark"]) #cv-body .cv-table thead th:nth-child(2):hover{background:var(--surface)}
}
@media (max-width: 768px){
  :where(:root[data-theme="dark"]) .swp-tab-bar{background:var(--surface)}
}
@media (max-width:768px){
  :where(:root[data-theme="dark"]) .cv-mobile-dropdown{background:var(--surface)}
}

/* ── Contactos · directorio (Fase 5A): barra de acciones, vistas Grid/Tabla/Kanban/Lista con tokens ── */
#cv-wrap.cv-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Barra: vista (segmentado) a la izquierda; Importar / Exportar / Agregar a la derecha (en mobile, un botón con menú) */
.cv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cv-actions { display: flex; align-items: center; gap: 8px; }
.cv-actions-mobile { display: none; }
.cv-act-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}
.cv-act-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cv-act-btn:focus-visible, .cv-gcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#cv-wrap .cv-dropdown-menu { padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
#cv-wrap .cv-dropdown-item { padding: 9px 12px; border-radius: 8px; color: var(--text); }
#cv-wrap .cv-dropdown-sep { margin: 4px 2px; background: var(--border); }
#cv-wrap .cv-btn { background: var(--surface); border-color: var(--border); color: var(--text); }
#cv-wrap .cv-filter-bar, #cv-wrap .cv-bulk-bar { border-bottom-color: var(--border); }
#cv-wrap .cv-af-chip { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-text); }

/* Chips de stage y Hot (.ui-chip); el activo toma el color de su stage */
.cv-chip-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cv-chip-row .cv-stage-chips { flex: 1; min-width: 0; gap: 6px; }
.cv-stage-chips .ui-chip { height: 30px; padding: 0 12px; font-size: 12px; }
.cv-stage-chip[aria-pressed="true"] { background: var(--chip-bg, var(--text)); color: var(--chip-fg, var(--bg)); border-color: var(--chip-fg, var(--text)); }
.cv-hot-chip[aria-pressed="true"] { background: #FF6B35; border-color: #FF6B35; color: #fff; }

/* Piezas comunes: avatar con el color del contacto, pill de stage, guiones, footer */
.cv-av { background: color-mix(in srgb, var(--av) 14%, transparent); color: var(--av); }
:root[data-theme="dark"] .cv-av { background: color-mix(in srgb, var(--av) 30%, transparent); color: color-mix(in srgb, var(--av) 45%, white); }
.cv-av-sm { width: 28px; height: 28px; font-size: 10px; }
.cv-stage-pill { background: var(--st-bg); color: var(--st-fg); }
.cv-dash { color: var(--text-subtle); }
.cv-foot { padding: 8px 18px 10px; font-size: 12px; color: var(--text-subtle); }

/* Tabla: mismo scroll y columnas sticky; fondos opacos por tokens (base < par < hover < seleccionada) */
#cv-body { --cv-row-hover: color-mix(in srgb, var(--accent) 7%, var(--surface)); --cv-row-sel: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
#cv-body .cv-table thead tr > th:nth-child(n) { background: var(--surface-2); color: var(--text-muted); border-bottom: 1px solid var(--border); }
#cv-body .cv-table tbody tr.cv-row > td:nth-child(n) { background: var(--surface); color: var(--text); border-bottom-color: var(--border); }
#cv-body .cv-table tbody tr.cv-row:nth-child(even) > td:nth-child(n) { background: var(--surface-2); }
#cv-body .cv-table tbody tr.cv-row.cv-row-selected > td:nth-child(n) { background: var(--cv-row-sel); }
#cv-body .cv-name { color: var(--text); }
#cv-body .cv-company { color: var(--text-subtle); }
#cv-body .cv-ind-chip { background: var(--surface-3); color: var(--text-muted); }
.cv-td-sm { font-size: 12px; }
.cv-td-center { text-align: center; }
#cv-body .cv-td-muted { color: var(--text-muted); }
#cv-body .cv-td-email { color: var(--info); }
#cv-body .cv-score-wrap { min-width: 70px; }
#cv-body .cv-score-bar { background: var(--surface-3); }
.cv-score-ok .cv-score-fill { background: var(--success); } .cv-score-ok .cv-score-num { color: var(--success); }
.cv-score-mid .cv-score-fill { background: var(--warn); }   .cv-score-mid .cv-score-num { color: var(--warn); }
.cv-score-low .cv-score-fill { background: var(--danger); } .cv-score-low .cv-score-num { color: var(--danger); }

/* Kanban */
#cv-body .cv-kanban-col { background: var(--surface-2); border: 1px solid var(--border); }
#cv-body .cv-kanban-col-head { background: var(--st-bg); color: var(--st-fg); }
.cv-kanban-col-count { padding: 1px 6px; border-radius: 10px; background: var(--st-fg); color: #fff; font-size: 10px; }
#cv-body .cv-kanban-card { background: var(--surface); border-color: var(--border); }
.cv-kanban-card-id { flex: 1; min-width: 0; }
#cv-body .cv-kanban-card-name { color: var(--text); }
#cv-body .cv-kanban-card-meta { color: var(--text-subtle); font-size: 10px; }
.cv-kanban-card-line { font-size: 11px; color: var(--text-muted); }
.cv-kanban-card-last { margin-top: 2px; font-size: 10px; color: var(--text-subtle); }
.cv-kanban-empty { padding: 16px 0; font-size: 12px; text-align: center; color: var(--text-subtle); }
.cv-kanban-placeholder { height: 60px; margin: 4px 0; border: 2px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); pointer-events: none; }
#cv-body .cv-kanban-load-more { border-color: var(--border-strong); color: var(--text-muted); }

/* Lista */
#cv-body .cv-list-row { border-bottom-color: var(--border); }
.cv-list-stage { min-width: 80px; }
.cv-list-btns { display: flex; gap: 4px; flex-shrink: 0; }

/* Grid: tarjetas (4-5 columnas en escritorio, 1 en mobile) */
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 16px 18px; }
.cv-gcard {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent; transition: box-shadow .15s, border-color .15s;
}
.cv-gcard-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cv-gav { width: 44px; height: 44px; font-size: 15px; }
.cv-gcard-id { flex: 1; min-width: 0; }
.cv-gcard-name { font: 600 14px/1.3 var(--font-sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-gcard-sub { margin-top: 2px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-gcard-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 22px; }
.cv-gcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.cv-gcard-last { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11px; color: var(--text-subtle); }
.cv-gcard-last-val { font-size: 12px; font-weight: 600; color: var(--text); }
.cv-gcard-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cv-gcard-actions img { width: 16px; height: 16px; display: block; }

/* Paginación */
#cv-pagination .cv-pagination { justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top-color: var(--border); }
.cv-page-size { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.cv-page-size select { padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer; }
.cv-page-nav { display: flex; align-items: center; gap: 8px; }
#cv-pagination .cv-page-info { font-size: 13px; color: var(--text-muted); }

/* Hover solo con puntero real */
@media (hover: hover) {
  .cv-act-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
  .cv-act-btn.primary:hover { background: var(--accent-h); border-color: var(--accent-h); }
  #cv-wrap .cv-dropdown-item:hover { background: var(--surface-2); color: var(--text); }
  #cv-wrap .cv-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
  #cv-body .cv-table thead tr > th:nth-child(n):hover { background: var(--surface-3); color: var(--text); }
  #cv-body .cv-table tbody tr.cv-row:hover > td:nth-child(n) { background: var(--cv-row-hover); }
  #cv-body .cv-table tbody tr.cv-row.cv-row-selected:hover > td:nth-child(n) { background: var(--cv-row-sel); }
  #cv-body .cv-kanban-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
  #cv-body .cv-list-row:hover { background: var(--cv-row-hover); }
  .cv-gcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
}

@media (max-width: 767px) {
  /* Segmentado y "+ Agregar" en la misma fila; si falta lugar, el segmentado scrollea por dentro */
  .cv-toolbar { padding: 12px; flex-wrap: nowrap; }
  .cv-actions { display: none; }
  .cv-actions-mobile { display: inline-flex; flex-shrink: 0; margin-left: auto; }
  .cv-view-seg { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .cv-view-seg::-webkit-scrollbar { display: none; }
  .cv-view-seg .ui-seg-btn { padding: 0 11px; }
  .cv-grid { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .cv-foot { padding: 8px 12px 10px; }

  /* Kanban: una columna (~85%) por vez con scroll-snap, espiando la siguiente.
     Sin touch-action ni scroll vertical propio: el gesto vertical scrollea la página. */
  #cv-body .cv-kanban {
    flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 10px; padding: 12px;
    overflow-x: auto !important; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: 12px;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #cv-body .cv-kanban::-webkit-scrollbar { display: none; }
  #cv-body .cv-kanban-col {
    flex: 0 0 85% !important; width: 85% !important; min-width: 0 !important;
    max-height: none; overflow: visible; scroll-snap-align: start; scroll-snap-stop: always;
  }
}
/* Teléfonos angostos: "+ Agregar ▾" no entra junto al segmentado → solo "+" (aria-label en el botón) */
@media (max-width: 479px) {
  .cv-add-btn { justify-content: center; width: 36px; padding: 0; font-size: 20px; font-weight: 400; }
  .cv-add-btn .cv-add-txt, .cv-add-btn .ui-caret { display: none; }
}

/* ── Contactos · ficha v2 (Fase 5C) ───────────────────────────────────────────
   Header (identidad + KPIs + acciones rápidas) y perfil | historial | agenda en .ui-card.
   3 columnas ≥1200px, 2 entre 768 y 1199, 1 en mobile (header, historial, el resto). Solo tokens.
   Markup en contacts-page.js (_cdpHeadHTML, _cdpLeftHTML, _buildCdpMainHTML, _cdpRightHTML). */

/* Piezas compartidas con la página de trabajo de secuencias (antes con estilos inline) */
.cdp-sec-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.cdp-sb-meta .work-save-toast { font-size: 11px; font-weight: 700; color: var(--success); }
.cdp-sb-score-lbl { font-size: 10px; font-weight: 700; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .4px; }
.cdp-score-ok .cdp-sb-score-fill { background: var(--success); }
.cdp-score-mid .cdp-sb-score-fill { background: var(--warn); }
.cdp-score-low .cdp-sb-score-fill { background: var(--danger); }
.cdp-field-action.cdp-field-action--btn { padding: 0; border: 0; background: none; cursor: pointer; }
.cdp-field-action--web { font-size: 18px; }
.cdp-field-action img.cdp-field-ico-sm { width: 18px; height: 18px; object-fit: contain; }
.cdp-co-row { display: flex; align-items: center; gap: 6px; }
.cdp-co-row .cdp-sb-field-input { flex: 1; min-width: 0; }
.cdp-co-link { padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--accent-text); font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s; }
.cdp-co-assign { margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.cdp-courts-other { width: 90px; margin-top: 6px; }
.cdp-ai-section { margin-top: 16px; }
.cdp-ai-ta {
  width: 100%; min-height: 80px; margin-top: 8px; padding: 10px; box-sizing: border-box; resize: vertical;
  font-size: 12.5px; line-height: 1.5; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px;
}
.cdp-ai-ta:focus { padding: 10px; border-color: var(--accent); border-radius: 10px; background: var(--surface); }
.cdp-meet-btn { width: 100%; justify-content: flex-start; padding: 8px 12px; border-radius: 8px; font-size: 12px; }
.cdp-trash-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.cdp-trash-btn { width: 100%; justify-content: center; color: var(--danger); border-color: var(--danger-br); }
.cdp-deal-empty { margin-bottom: 8px; font-size: 12px; color: var(--text-subtle); }
.cdp-deal-new { width: 100%; margin-bottom: 6px; }
.cdp-feed-btn.cdp-feed-btn--meet, .cdp-feed-btn.cdp-feed-btn--chatlog { color: var(--accent-text); border-color: var(--accent-soft-2); }
.cdp-inline-ta { width: 100%; box-sizing: border-box; }
.cdp-inline-dirs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cdp-inline-btns { display: flex; gap: 8px; margin-top: 8px; }
.cdp-inline-field { margin-bottom: 8px; }
.cdp-inline-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.cdp-inline-input {
  width: 100%; height: 34px; box-sizing: border-box; padding: 6px 10px; outline: none;
  font: 12px var(--font-sans); color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px;
}
.cdp-inline-input:focus { border-color: var(--accent); }
.cdp-copy-link-btn { margin-left: 8px; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--accent-text); font-size: 15px; line-height: 1; opacity: .7; cursor: pointer; }

/* Historial: una tarjeta por evento (ficha y página de trabajo) */
.cdp-ev-list { display: flex; flex-direction: column; gap: 10px; }
.cdp-ev-err { margin: 4px 0 8px; font-size: 11px; color: var(--text-subtle); }
.cdp-ev {
  position: relative; display: flex; gap: 12px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.cdp-ev-ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px;
  overflow: hidden; border-radius: 50%; font-size: 14px; background: var(--surface-2);
}
.cdp-ev-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cdp-ev--call .cdp-ev-ico { background: var(--info-bg); }
.cdp-ev--note .cdp-ev-ico { background: var(--warn-bg); }
.cdp-ev--rem-done .cdp-ev-ico { background: var(--success-bg); }
.cdp-ev--stage .cdp-ev-ico { background: var(--surface-3); }
.cdp-ev--whatsapp .cdp-ev-ico, .cdp-ev--email .cdp-ev-ico, .cdp-ev--instagram .cdp-ev-ico,
.cdp-ev--linkedin .cdp-ev-ico, .cdp-ev--meeting .cdp-ev-ico, .cdp-ev--rem .cdp-ev-ico { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.cdp-ev-body { flex: 1; min-width: 0; }
.cdp-ev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cdp-ev-title { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.cdp-ev-date { flex-shrink: 0; padding-top: 2px; font-size: 11px; color: var(--text-subtle); white-space: nowrap; }
.cdp-ev-actions { display: none; flex-shrink: 0; gap: 2px; margin: -4px -6px 0 0; }
.cdp-ev-act { padding: 4px; border: 0; border-radius: 6px; background: none; color: var(--text-muted); font-size: 12px; line-height: 1; cursor: pointer; }
.cdp-ev-act--del { color: var(--danger); }
.cdp-ev-text { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.cdp-ev-text--inline { margin-top: 0; }
.cdp-ev-subject { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.cdp-ev-sub { margin-top: 2px; font-size: 12px; color: var(--text-subtle); overflow-wrap: anywhere; }
.cdp-ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.cdp-ev-meta .cdp-ev-sub { margin-top: 0; }
.cdp-ev-chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); color: var(--text-muted); font-weight: 500; }
.cdp-ev-note {
  margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--warn); border-radius: 4px;
  background: var(--warn-bg); color: var(--text); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere;
}
.cdp-ev-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.cdp-ev-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text);
  font: 500 12px/1.4 var(--font-sans); box-shadow: var(--shadow-sm);
}
.cdp-ev-arrow { color: var(--accent-text); }
.cdp-ev-rem-btn { padding: 3px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-muted); font: 500 11px/1.4 var(--font-sans); cursor: pointer; }
.cdp-ev-rem-btn--done { border-color: var(--warn-br); background: var(--warn-bg); color: var(--warn); }
@media (hover: none) { .cdp-ev-actions { display: flex; } }
@media (hover: hover) {
  .cdp-ev:hover .cdp-ev-actions, .cdp-ev:focus-within .cdp-ev-actions { display: flex; }
  .cdp-ev-act:hover { background: var(--surface-2); }
  .cdp-ev-btn:hover, .cdp-ev-rem-btn:hover { border-color: var(--border-strong); }
  .cdp-co-link:hover { background: var(--accent-soft); }
}

/* Layout de la ficha: la barra superior queda fija y scrollea .cdp-body entero */
#contact-detail-page { background: var(--bg); }
#contact-detail-page .cdp-topbar { background: var(--surface); border-bottom-color: var(--border); box-shadow: none; }
#contact-detail-page .cdp-body {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px;
  grid-template-areas: "head head head" "left main right";
  align-items: start; align-content: start; gap: 16px; min-height: 0;
  padding: 20px 24px 40px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#contact-detail-page .cdp-head { grid-area: head; min-width: 0; }
#contact-detail-page #cdp-left { grid-area: left; }
#contact-detail-page #cdp-main { grid-area: main; }
#contact-detail-page #cdp-right-commercial { grid-area: right; }
#contact-detail-page .cdp-sidebar, #contact-detail-page .cdp-main {
  display: flex; flex-direction: column; gap: 16px; min-width: 0; max-height: none;
  padding: 0; overflow: visible; background: none; border: 0;
}

/* Header */
.cdp-head-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 20px; }
.cdp-head-id { display: flex; align-items: center; gap: 16px; flex: 1 1 320px; min-width: 0; }
#contact-detail-page .cdp-head-av {
  flex-shrink: 0; width: 72px; height: 72px; margin: 0; font-size: 24px;
  background: color-mix(in srgb, var(--av) 16%, transparent); color: var(--av);
}
:root[data-theme="dark"] #contact-detail-page .cdp-head-av { background: color-mix(in srgb, var(--av) 30%, transparent); color: color-mix(in srgb, var(--av) 45%, white); }
.cdp-head-info { flex: 1; min-width: 0; }
#contact-detail-page .cdp-head-name { margin-bottom: 2px; font: 600 24px/1.15 var(--font-sans); letter-spacing: -.4px; color: var(--text); overflow-wrap: anywhere; }
#contact-detail-page .cdp-head .cdp-name-input { font: 600 22px/1.15 var(--font-sans); color: var(--text); border-bottom-color: var(--accent); }
.cdp-head-sub { margin-bottom: 8px; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
#contact-detail-page .cdp-head-meta { margin-bottom: 0; }
#contact-detail-page .cdp-head .wm-stage-select { background-color: var(--st-bg, var(--surface-2)); color: var(--st-fg, var(--text)); }
#contact-detail-page .cdp-head .cdp-sb-score { margin-top: 8px; }
.cdp-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 0; }
.cdp-kpis.ui-ph-kpis { justify-content: flex-end; }
.cdp-kpis .ui-ph-kpi { min-width: 150px; gap: 10px; padding: 10px 16px 10px 10px; }
.cdp-kpis .ui-ph-kpi-ico { width: 36px; height: 36px; font-size: 16px; }
.cdp-kpis .ui-ph-kpi-val { font-size: 18px; }
.cdp-head-actions { display: flex; align-items: center; gap: 8px; }
.cdp-head-actions .ui-circle-btn { width: 40px; height: 40px; text-decoration: none; }
.cdp-head-actions .ui-circle-btn svg { width: 18px; height: 18px; }
.cdp-head-actions .ui-circle-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.cdp-qa-img { width: 22px; height: 22px; object-fit: contain; }
.cdp-more .cv-dropdown-menu { min-width: 240px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.cdp-more .cv-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.cdp-more .cv-dropdown-item svg { flex-shrink: 0; }
.cdp-more .cv-dropdown-sep { margin: 4px 2px; background: var(--border); }
.cdp-more .cv-dropdown-item.cdp-dd-danger { color: var(--danger); }

/* Tarjetas de las columnas */
#contact-detail-page .cdp-card .ui-card-head { margin-bottom: 8px; }
#contact-detail-page .cdp-card .cdp-sb-fields { padding: 0; border: 0; }
#contact-detail-page .cdp-card .cdp-sb-field { border-bottom-color: var(--border); }
#contact-detail-page .cdp-sb-field-label { color: var(--text-subtle); }
#contact-detail-page .cdp-sb-field-input { color: var(--text); }
.cdp-ai { margin-top: 10px; }
#contact-detail-page .cdp-rem-card .rem-section { margin-bottom: 0; }
#contact-detail-page .cdp-rem-card .rem-title,
#contact-detail-page .cdp-deal-card-wrap .cdp-deal-section-title,
#contact-detail-page .cdp-seq-card .cdp-sec-label { font: 600 14px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text); }
#contact-detail-page .cdp-deal-card-wrap .cdp-deal-section, #contact-detail-page .cdp-seq-card .cdp-sb-seq-section { padding: 0; border: 0; }
#contact-detail-page .cdp-deal-card-wrap .cdp-deal-section-title { margin-bottom: 12px; }
#contact-detail-page .cdp-deal-card { background: var(--surface-2); border-color: var(--border); }
#contact-detail-page .cdp-seq-card .cdp-sb-seq-header { margin-bottom: 12px; }
#contact-detail-page .cdp-seq-row { background: var(--surface-2); }
.cdp-mtg-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cdp-mtg-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.cdp-mtg-title { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.cdp-mtg-date { margin-top: 2px; font-size: 11px; color: var(--text-subtle); }
.cdp-mtg-row .cdp-ev-btn { margin-top: 8px; }
.cdp-empty { font-size: 12px; color: var(--text-subtle); }

/* Columna central */
#contact-detail-page .cdp-feed-header { margin-bottom: 0; }
#contact-detail-page .cdp-feed-title { margin: 0; font: 600 16px/1.3 var(--font-sans); color: var(--text); }
#contact-detail-page .cdp-feed-btn:not(.primary) { background: var(--surface); border-color: var(--border); color: var(--text); }
#contact-detail-page .cdp-feed-btn.cdp-feed-btn--meet, #contact-detail-page .cdp-feed-btn.cdp-feed-btn--chatlog { color: var(--accent-text); border-color: var(--accent-soft-2); }
#contact-detail-page .cdp-log-card .cdp-inline-form { margin: 12px 0 0; background: var(--surface-2); border-color: var(--border); box-shadow: none; }
#contact-detail-page .cdp-log-card .cdp-inline-form-title { color: var(--text-muted); }
#contact-detail-page .cdp-notes-section { margin-top: 0; padding: 16px; background: var(--surface); border-color: var(--border); border-radius: var(--radius-lg); }
#contact-detail-page .cdp-notes-title { color: var(--text-muted); }
#contact-detail-page .work-notes-textarea { min-height: 100px; background: var(--surface); border-color: var(--border); color: var(--text); }
.cdp-trash-note { max-width: 480px; margin: 16px auto; padding: 24px 28px; text-align: center; background: var(--warn-bg); border-color: var(--warn-br); }
.cdp-trash-note-ico { margin-bottom: 10px; font-size: 28px; }
.cdp-trash-note-title { margin-bottom: 6px; font-size: 15px; font-weight: 700; color: var(--warn); }
.cdp-trash-note-text { margin-bottom: 18px; font-size: 13px; color: var(--text-muted); }
.cdp-trash-note-btn { padding: 10px 22px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: 700 14px var(--font-sans); cursor: pointer; }

@media (hover: hover) {
  #contact-detail-page .cdp-feed-btn:not(.primary):hover { background: var(--surface-2); border-color: var(--border-strong); }
  #contact-detail-page .cdp-deal-card:hover { background: var(--surface-3); border-color: var(--border-strong); }
  .cdp-more .cv-dropdown-item:hover { background: var(--surface-2); color: var(--text); }
  .cdp-more .cv-dropdown-item.cdp-dd-danger:hover { background: var(--danger-bg); color: var(--danger); }
  .cdp-trash-note-btn:hover { background: var(--accent-h); }
}

/* Escritorio angosto / tablet: 2 columnas (perfil y agenda a la izquierda, historial a la derecha) */
@media (min-width: 768px) and (max-width: 1199px) {
  #contact-detail-page .cdp-body {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas: "head head" "left main" "right main";
    grid-template-rows: auto auto 1fr;
  }
}

/* Mobile: una columna en orden header (con acciones) → historial → el resto */
@media (max-width: 767px) {
  /* align-items: stretch (no el start del escritorio): con start cada hijo tomaba el ancho de su contenido sin cortes
     (la barra de etapas, la fila de botones del historial) y la ficha quedaba más ancha que la pantalla. */
  #contact-detail-page .cdp-body { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 12px calc(32px + env(safe-area-inset-bottom)); }
  #contact-detail-page .cdp-head { order: 0; }
  #contact-detail-page #cdp-main { order: 1; }
  #contact-detail-page #cdp-left { order: 2; }
  #contact-detail-page #cdp-right-commercial { order: 3; }
  #contact-detail-page .cdp-sidebar, #contact-detail-page .cdp-main { gap: 12px; }
  .cdp-head-card { gap: 14px; padding: 16px; }
  .cdp-head-id { flex-basis: 100%; align-items: flex-start; gap: 12px; }
  #contact-detail-page .cdp-head-av { width: 56px; height: 56px; font-size: 19px; }
  #contact-detail-page .cdp-head-name { font-size: 20px; }
  .cdp-head-side { width: 100%; align-items: stretch; }
  .cdp-kpis.ui-ph-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .cdp-kpis .ui-ph-kpi { min-width: 0; padding: 8px 10px; }
  .cdp-kpis .ui-ph-kpi-ico { display: none; }
  .cdp-kpis .ui-ph-kpi-val { font-size: 15px; overflow-wrap: anywhere; }
  .cdp-kpis .ui-ph-kpi-lbl { font-size: 11px; }
  .cdp-head-actions { justify-content: flex-start; }
  .cdp-more .cv-dropdown-menu { left: 0; right: auto; }
  #contact-detail-page .cdp-feed-header { flex-wrap: wrap; }
  #contact-detail-page .cdp-feed-actions { flex-wrap: nowrap; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  #contact-detail-page .cdp-feed-actions::-webkit-scrollbar { display: none; }
  #contact-detail-page .cdp-feed-btn { flex-shrink: 0; }
  .cdp-ev { gap: 10px; padding: 12px; }
}

/* ── Ficha v2 (Fase 5C-2): barra de progreso de stages y próxima tarea ── */
.cdp-stage-wrap { margin: 10px 0 8px; min-width: 0; }
.cdp-stage-bar {
  position: relative; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cdp-stage-bar::-webkit-scrollbar { display: none; }
.cdp-stage-item { flex: 1 1 0; min-width: 0; }
.cdp-stage-seg {
  display: block; width: 100%; height: 30px; margin: 0; padding: 0 10px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 11.5px/30px var(--font-sans); text-align: center;
  color: var(--text-subtle); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, color .15s;
}
.cdp-stage-item:first-child .cdp-stage-seg { border-radius: 999px 8px 8px 999px; }
.cdp-stage-item:last-child .cdp-stage-seg { border-radius: 8px 999px 999px 8px; }
.cdp-stage-seg.is-done { color: var(--text-muted); background: var(--surface-3); border-color: var(--surface-3); }
.cdp-stage-seg.is-done::before { content: '✓ '; }
.cdp-stage-seg.is-current { color: var(--st-fg, var(--text)); background: var(--st-bg, var(--surface-2)); border-color: var(--st-fg, var(--border-strong)); cursor: default; }
.cdp-stage-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* En escritorio la barra reemplaza al selector de stage del header (el select sigue en el DOM) */
@media (min-width: 768px) {
  #cdp-head .cdp-stage-wrap ~ .cdp-head-meta .wm-stage-select { display: none; }
}
/* Mobile: la etapa se elige solo con el select del header; la barra de píldoras no se muestra. */
@media (max-width: 767px) {
  #cdp-head .cdp-stage-wrap { display: none; }
}

.cdp-next-wrap { margin-top: 8px; }
.cdp-next-wrap[hidden] { display: none; }
.cdp-next-task {
  display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; margin: 0; padding: 6px 12px 6px 8px; cursor: pointer;
  text-align: left; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  font: 400 12px/1.35 var(--font-sans); -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s;
}
.cdp-next-ico { flex-shrink: 0; font-size: 14px; line-height: 1.35; }
.cdp-next-body { display: flex; flex-direction: column; min-width: 0; }
.cdp-next-lbl { font-weight: 600; color: var(--text); }
.cdp-next-when { font-weight: 500; color: var(--text-muted); }
.cdp-next-task.is-late .cdp-next-when { color: var(--danger); }
.cdp-next-note { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdp-next-task:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#contact-detail-page .cdp-rem-card.is-flash { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transition: box-shadow .2s, border-color .2s; }

@media (hover: hover) {
  .cdp-stage-seg:not(.is-current):hover { color: var(--text); border-color: var(--border-strong); }
  .cdp-next-task:hover { background: var(--surface-3); border-color: var(--border-strong); }
}

/* ── Equipo y responsable (Fase 5B) ── */
.ui-owner-av {
  --av-size: 24px; --av: var(--text-subtle);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--av-size); height: var(--av-size); border-radius: 50%;
  font: 700 calc(var(--av-size) * .4)/1 var(--font-sans); letter-spacing: 0;
  color: var(--av); background: color-mix(in srgb, var(--av) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av) 30%, transparent);
}
:root[data-theme="dark"] .ui-owner-av { color: color-mix(in srgb, var(--av) 45%, white); background: color-mix(in srgb, var(--av) 30%, transparent); }
.ui-owner-av.is-unknown { color: var(--text-subtle); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.cdp-sb-field-icon.cdp-owner-av { width: auto; height: auto; margin-top: 2px; }

#members-settings-body .mb-hint { margin: 8px 0 10px; font-size: 12px; color: var(--text-subtle); }
.mb-list { display: flex; flex-direction: column; }
.mb-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mb-fields { flex: 1; min-width: 0; }
.mb-row .mb-name { width: 100%; margin: 0; }
.mb-email { margin-top: 3px; font-size: 11px; color: var(--text-subtle); overflow-wrap: anywhere; }
.mb-row .mb-ini { width: 64px; margin: 0; text-align: center; text-transform: uppercase; }
.mb-color { width: 36px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.mb-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.mb-add .form-input { flex: 1 1 160px; margin: 0; }
.mb-del:disabled { opacity: .45; cursor: not-allowed; }
.cv-bulk-owner-foot { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 767px) {
  .mb-row { flex-wrap: wrap; }
  .mb-fields { flex-basis: calc(100% - 42px); }
}

/* ── Pipeline: columna Otros, "Mover a…" y arrastre táctil (Fase 6A) ── */
.pipe-otros-stage { border-style: dashed; }
.pipe-off-stage { font-style: italic; }
/* "Mover a…": solo en pantallas táctiles; en escritorio el tablero queda igual (drag HTML5). */
.pipe-move-btn {
  display: block; margin: 8px 0 0 auto; padding: 4px 10px; min-height: 28px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-muted); font: 600 11px/1 var(--font-sans); cursor: pointer;
}
.pipe-move-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pipe-move-btn { display: none; } }
@media (hover: none) and (pointer: coarse) {
  #pipeline-board .deal-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
.pipe-touch-ghost {
  position: fixed; left: 0; top: 0; z-index: 9700; pointer-events: none; margin: 0;
  opacity: .92; box-shadow: var(--shadow-lg); transform-origin: 30px 20px; will-change: transform;
}
.pipe-move-list { display: flex; flex-direction: column; gap: 8px; }
.pipe-move-deal { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; overflow-wrap: anywhere; }
.pipe-move-opt {
  width: 100%; min-height: 44px; padding: 10px 14px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: 600 14px/1.2 var(--font-sans); cursor: pointer;
}
.pipe-move-opt.is-current, .pipe-move-opt:disabled { background: var(--surface-2); color: var(--text-subtle); cursor: default; }
.pipe-move-opt.is-current::after { content: ' · actual'; font-weight: 400; }
@media (hover: hover) { .pipe-move-opt:not(:disabled):hover { border-color: var(--accent); color: var(--accent-text); } }

/* ── Ajustes → Limpiar deals viejos (Fase 6A) ── */
.dclean { display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: var(--text); }
.dclean-lead { margin: 0; color: var(--text-muted); }
.dclean-err { margin: 0; color: var(--danger); }
.dclean-sec { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.dclean-sec-title { font-weight: 700; }
.dclean-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dclean-chip { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 11px; }
.dclean-rows { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dclean-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; cursor: pointer; }
.dclean-rows .dclean-row + .dclean-row { border-top: 1px solid var(--border); }
.dclean-row input { margin-top: 2px; flex-shrink: 0; }
.dclean-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dclean-name { font-weight: 600; overflow-wrap: anywhere; }
.dclean-meta { font-size: 11px; color: var(--text-subtle); overflow-wrap: anywhere; }
.dclean-why { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; }
.dclean-sample summary { cursor: pointer; color: var(--text-muted); font-size: 12px; }
.dclean-sample ul { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow-y: auto; }
.dclean-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ── Pipeline v2 (Fase 6B): header, toolbar y filtro de responsable ── */
#panel-pipeline .pipe-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
#panel-pipeline .pipe-tools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
#panel-pipeline .pipe-owner-sel { width: auto; min-width: 0; max-width: 200px; margin: 0; padding-top: 7px; padding-bottom: 7px; background-color: var(--surface); color: var(--text); border-color: var(--border); }
#panel-pipeline .pipe-new-btn { white-space: nowrap; }
@media (max-width: 767px) {
  #panel-pipeline .pipe-tools { order: 1; width: 100%; }
  #panel-pipeline .pipe-search-wrap { order: 2; flex: 1 1 100%; max-width: none; }
  #panel-pipeline .pipe-owner-sel { flex: 1 1 auto; max-width: none; }
  #panel-pipeline .pipe-tools .pipe-btn-txt { display: none; }
  #panel-pipeline .pipe-stages-btn, #panel-pipeline .pipe-new-btn { flex: 0 0 auto; min-width: 40px; justify-content: center; }
  #panel-pipeline .pipe-new-btn { font-size: 18px; line-height: 1; padding: 6px 12px; }
}

/* ── Pipeline v2 (Fase 6B): columnas y tarjetas. Pisa main.css y el <style> inline (incluido el oscuro). ── */
#pipeline-board { gap: 12px; padding-bottom: 12px; }
#pipeline-board .stage {
  width: 264px; min-height: 0; padding: 12px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none;
}
#pipeline-board .stage.hot-lead-stage { background: var(--surface-2); border-color: color-mix(in srgb, #FF6B35 40%, var(--border)); }
#pipeline-board .stage.pipe-otros-stage { border-style: dashed; }
#pipeline-board .stage.drag-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
#pipeline-board .pipe-col-head {
  display: flex; align-items: center; gap: 8px; margin: 0 2px 2px;
  font: 600 13px/1.25 var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--text);
}
#pipeline-board .stage.hot-lead-stage .pipe-col-head { color: var(--text); }
.pipe-col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--dot, var(--text-subtle)); }
.pipe-col-dot.is-hot { --dot: #FF6B35; }
.pipe-col-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pipeline-board .stage-count {
  padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 11px; font-weight: 600;
}
.pipe-col-total { margin: 0 2px 10px 20px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pipe-col-empty { padding: 12px; font-size: 12px; text-align: center; color: var(--text-subtle); }
#pipeline-board .stage-cards { gap: 8px; }
#pipeline-board .deal-card {
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transform: none; transition: box-shadow .15s, opacity .15s;
}
#pipeline-board .deal-card:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow-sm); }
@media (hover: hover) { #pipeline-board .deal-card:hover { box-shadow: var(--shadow); } }
#pipeline-board .deal-card.dragging { opacity: .4; transform: none; }
#pipeline-board .deal-card.drag-placeholder { height: 56px; background: var(--accent-soft); border: 1.5px dashed var(--accent); box-shadow: none; }
#pipeline-board .deal-card.hot-lead { border-left: 3px solid #FF6B35; }
.pipe-card-top { display: flex; align-items: flex-start; gap: 8px; }
#pipeline-board .deal-name {
  flex: 1; min-width: 0; margin: 0; font: 600 13px/1.3 var(--font-sans); color: var(--text);
  white-space: normal; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pipe-card .deal-card-avatar { width: 22px; height: 22px; font-size: 9px; }
.pipe-card-company { margin-top: 2px; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
#pipeline-board .deal-value { font: 700 13px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.pipe-card-date { font-size: 11px; color: var(--text-subtle); white-space: nowrap; }
.pipe-card-date.is-overdue { color: var(--danger); font-weight: 600; }
.pipe-card-date.is-won { color: var(--success); }
#pipeline-board .pipe-off-stage { margin-top: 4px; font-size: 11px; font-style: italic; color: var(--text-subtle); }
/* Mobile: una columna (~85 %) por vez con scroll-snap, como el kanban de Contactos. Sin scroll vertical
   propio ni touch-action: el gesto vertical scrollea la página. Mientras se arrastra, sin snap. */
@media (max-width: 767px) {
  #pipeline-board {
    flex-wrap: nowrap; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #pipeline-board::-webkit-scrollbar { display: none; }
  #pipeline-board .stage {
    flex: 0 0 85%; width: 85%; min-width: 0; max-height: none; overflow: visible;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  #pipeline-board.pipe-touch-dragging { scroll-snap-type: none; }
}

/* ── Pipeline v2 (Fase 6B): detalle de deal en uiDrawer ── */
.pipe-dd { display: flex; flex-direction: column; gap: 16px; color: var(--text); font-size: 13px; }
.pipe-dd-head { display: flex; flex-direction: column; gap: 10px; }
.pipe-dd-value { font: 700 26px/1.1 var(--font-sans); letter-spacing: -.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.pipe-dd-owner { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pipe-dd-owner-lbl, .pipe-dd-h { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-subtle); margin: 0; }
.pipe-dd-owner-row { display: flex; align-items: center; gap: 8px; }
.pipe-dd-owner-row .form-input { flex: 1; min-width: 0; margin: 0; background: var(--surface); color: var(--text); border-color: var(--border); }
.pipe-dd-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pipe-dd-link {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-muted); font: 600 12px/1.2 var(--font-sans); cursor: pointer;
}
.pipe-dd-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.pipe-dd-progress { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.pipe-dd-progress::-webkit-scrollbar { display: none; }
.pipe-dd-step { flex: 1 1 0; min-width: 72px; }
.pipe-dd-seg {
  --st: var(--accent);
  width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-muted); font: 600 11px/1.2 var(--font-sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.pipe-dd-seg.is-done { background: color-mix(in srgb, var(--st) 14%, var(--surface)); border-color: color-mix(in srgb, var(--st) 30%, var(--border)); color: var(--text); }
.pipe-dd-seg.is-current { background: var(--st); border-color: var(--st); color: #fff; }
.pipe-dd-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pipe-dd-off { margin: 0; font-size: 12px; font-style: italic; color: var(--text-subtle); }
.pipe-dd-next { align-self: flex-start; }
.pipe-dd-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.pipe-dd-field dt { font-size: 11px; color: var(--text-subtle); }
.pipe-dd-field dd { margin: 2px 0 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.pipe-dd-field.is-overdue dd { color: var(--danger); }
.pipe-dd-src { font-weight: 400; font-size: 11px; color: var(--text-subtle); }
.pipe-dd-contact {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; font: inherit;
}
.pipe-dd-contact-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pipe-dd-contact-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-dd-contact-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-dd-chev { font-size: 18px; color: var(--text-subtle); }
.pipe-dd-quick { display: flex; gap: 8px; }
.pipe-dd-quick .btn { flex: 1; justify-content: center; font-size: 12px; padding: 6px 8px; }
.pipe-dd-empty { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); color: var(--text-muted); }
.pipe-dd-empty .btn { margin-left: auto; font-size: 12px; padding: 4px 10px; }
.pipe-dd .pipe-dd-notes { width: 100%; min-height: 72px; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.pipe-dd .ddp-proposal-row { background: var(--surface-2); border-color: var(--border); }
.pipe-dd .ddp-proposal-name { color: var(--text); }
.pipe-dd .ddp-upload-btn { border-color: var(--border-strong); color: var(--text-muted); background: transparent; }
.pipe-dd-actions { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.pipe-dd-actions .btn { flex: 1; justify-content: center; }
@media (hover: hover) {
  .pipe-dd-link:hover, .pipe-dd-contact:hover { border-color: var(--border-strong); background: var(--surface-3); }
  .pipe-dd-seg:not(.is-current):hover { border-color: var(--st); color: var(--text); }
  .pipe-dd .ddp-upload-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
}
@media (max-width: 767px) {
  .pipe-dd-fields { grid-template-columns: minmax(0, 1fr); }
  .pipe-dd-next { align-self: stretch; }
}
/* El modal de deal se abre desde la ficha (z-index 850) y desde el drawer: va arriba de ambas pantallas
   y debajo de los uiModal/uiDrawer (9600). */
#deal-modal-overlay { z-index: 9500; }

/* ── Pipeline v2 (Fase 6B): vista Lista. En ≤767 px cada fila es una tarjeta. ── */
#pipeline-board[hidden], #pipeline-list[hidden] { display: none; }
.pipe-list-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pipe-list-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pipe-list-count { font-size: 12px; color: var(--text-muted); }
.pipe-list-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pipe-list-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.pipe-list-table th {
  padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-subtle); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.pipe-list-sort { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.pipe-list-sort:focus-visible, .pipe-list-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pipe-list-row { cursor: pointer; }
.pipe-list-row td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pipe-list-row:last-child td { border-bottom: 0; }
@media (hover: hover) { .pipe-list-row:hover td { background: var(--surface-2); } .pipe-list-sort:hover { color: var(--text); } }
.pipe-list-name { font-weight: 600; overflow-wrap: anywhere; }
.pipe-list-contact, .pipe-list-company { display: block; overflow-wrap: anywhere; }
.pipe-list-company, .pipe-list-muted { font-size: 12px; color: var(--text-muted); }
.pipe-list-stage {
  --st: var(--text-subtle);
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--st) 14%, var(--surface)); color: color-mix(in srgb, var(--st) 75%, var(--text));
  border: 1px solid color-mix(in srgb, var(--st) 30%, var(--border));
}
.pipe-list-stage.is-off { font-style: italic; }
.pipe-list-c-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pipe-list-date { white-space: nowrap; color: var(--text-muted); }
.pipe-list-date.is-overdue { color: var(--danger); font-weight: 600; }
.pipe-list-date.is-won { color: var(--success); }
.pipe-list-owner { display: inline-flex; align-items: center; gap: 6px; }
.pipe-list-owner-name { font-size: 12px; color: var(--text-muted); }
.pipe-list-empty { padding: 24px; text-align: center; color: var(--text-subtle); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pipe-list-more { margin-top: 10px; }
@media (max-width: 767px) {
  .pipe-list-wrap { overflow: visible; background: none; border: 0; }
  .pipe-list-table, .pipe-list-table tbody { display: block; }
  .pipe-list-table thead { display: none; }
  .pipe-list-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin-bottom: 8px; padding: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  }
  .pipe-list-row td { display: block; padding: 0; border: 0; min-width: 0; }
  .pipe-list-c-deal { grid-column: 1; }
  .pipe-list-c-value { grid-column: 2; text-align: right; }
  .pipe-list-c-contact { grid-column: 1 / -1; }
  .pipe-list-c-stage { grid-column: 1; }
  .pipe-list-c-close { grid-column: 2; text-align: right; }
  .pipe-list-c-owner { grid-column: 1 / -1; }
}
/* Mobile: el segmentado entra en la fila de herramientas */
@media (max-width: 767px) {
  #panel-pipeline .pipe-view-seg { flex: 0 0 auto; }
  #panel-pipeline .pipe-view-seg .ui-seg-btn { padding-left: 10px; padding-right: 10px; }
}

/* ── Modal de deal v2 (Fase 6B): solo estilo con tokens; mismos ids, saveDeal y _dmSetStageOptions.
   Los !important pisan estilos inline del markup y de dmFilterContacts/dmShowCreateForm (Fase 9 los saca). ── */
#deal-modal-overlay { padding: 16px; background: rgba(15, 12, 10, .45); backdrop-filter: none; }
#deal-modal-overlay .deal-modal {
  width: 560px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
#deal-modal-overlay .deal-modal-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
#deal-modal-overlay .deal-modal-title { font: 600 18px/1.2 var(--font-sans); letter-spacing: -.3px; color: var(--text); }
#deal-modal-overlay .deal-modal-close {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted);
}
#deal-modal-overlay .form-label { color: var(--text-muted); }
#deal-modal-overlay .form-input { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: var(--radius-sm); }
#deal-modal-overlay .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#deal-modal-overlay .modal-footer { border-top: 1px solid var(--border); }
#dm-contact-results { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; }
#dm-contact-results > div { background: transparent !important; border-color: var(--border) !important; color: var(--text); }
#dm-contact-results > div:last-child { color: var(--accent-text) !important; }
#dm-contact-selected { background: var(--accent-soft) !important; color: var(--text); }
#dm-contact-selected button { color: var(--text-muted) !important; }
#dm-contact-mini-form { background: var(--surface-2) !important; border-color: var(--border) !important; }
#dm-contact-mini-form label { color: var(--text-muted) !important; }
#dm-contact-mini-form > div:first-child { color: var(--accent-text) !important; }
@media (hover: hover) {
  #deal-modal-overlay .deal-modal-close:hover { background: var(--surface-2); color: var(--text); }
  #dm-contact-results > div:hover { background: var(--surface-2) !important; }
}
@media (max-width: 767px) {
  #deal-modal-overlay { padding: 0; align-items: flex-end; }
  #deal-modal-overlay .deal-modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  #deal-modal-overlay .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* ── Inicio · Sales overview (Fase 7). Prefijo ini-: .home-*, .opp-* y .pipe-bar-* son del Inicio viejo (Fase 9). ── */
/* Escritorio: Revenue (2/5) y Pipeline (3/5) arriba, la lista abajo a todo el ancho. */
.ini-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
.ini-list { grid-column: 1 / -1; }
.ini-card { padding: 18px 20px; }
.ini-unit { margin-left: 4px; font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--text-subtle); }
.ini-big { font: 700 32px/1.1 var(--font-sans); letter-spacing: -.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.ini-sub { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.ini-muted { font-weight: 400; font-size: 12px; color: var(--text-subtle); }

/* Revenue: objetivo, barra y variación */
.ini-goal-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ini-goal-bar { height: 10px; margin-top: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ini-goal-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s; }
.ini-goal-status { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.ini-goal-status.is-done { color: var(--success); font-weight: 600; }
.ini-goal-empty {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  font-size: 13px; color: var(--text-muted);
}
.ini-rev-prev {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted);
}
.ini-chg { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ini-chg.is-up { background: var(--success-bg); color: var(--success); }
.ini-chg.is-down { background: var(--danger-bg); color: var(--danger); }
.ini-chg.is-flat { background: var(--surface-2); color: var(--text-muted); }

/* Pipeline abierto: barra segmentada y una fila por columna */
.ini-segbar { display: flex; gap: 2px; height: 10px; margin: 16px 0 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ini-seg { display: block; min-width: 4px; background: var(--seg, var(--text-subtle)); }
.ini-stages, .ini-deals { list-style: none; margin: 0; padding: 0; }
.ini-stage {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto minmax(72px, auto); align-items: center; gap: 10px;
  padding: 8px 2px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text);
}
.ini-stage:first-child { border-top: 0; }
.ini-stage.is-empty { color: var(--text-subtle); }
.ini-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--text-subtle)); }
.ini-stage-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-stage-n {
  min-width: 26px; padding: 1px 8px; border-radius: 999px; text-align: center; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.ini-stage-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ini-stage.is-empty .ini-stage-val { font-weight: 400; }

/* Cierran pronto y vencidos */
.ini-tabs { max-width: 100%; margin-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
.ini-tabs::-webkit-scrollbar { display: none; }
.ini-seg-n { margin-left: 4px; font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.ini-deal {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 8px;
  border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ini-deals li:first-child .ini-deal { border-top: 0; }
.ini-deal-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ini-deal-name { font: 600 13px/1.3 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-deal-co { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-deal-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.ini-deal-val { font: 700 13px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.ini-deal-date { font-size: 11px; color: var(--text-subtle); white-space: nowrap; }
.ini-deal-date.is-overdue { color: var(--danger); font-weight: 600; }
.ini-more {
  display: block; margin: 8px 0 0 auto; padding: 6px 10px; border: 0; background: transparent;
  color: var(--accent-text); font: 600 12px/1 var(--font-sans); cursor: pointer;
}
.ini-empty { padding: 20px 8px; text-align: center; font-size: 13px; color: var(--text-muted); }
.ini-empty p { margin: 0 0 12px; }
.ini-empty p:last-child { margin: 0; }
.ini-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; margin: 0; padding: 0 14px;
  border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: 600 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ini-btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
@media (hover: hover) {
  .ini-deal:hover { background: var(--surface-2); }
  .ini-more:hover { text-decoration: underline; }
  .ini-btn:hover { background: var(--accent-h); border-color: var(--accent-h); }
  .ini-btn--ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
}
.ini-deal:focus-visible, .ini-more:focus-visible, .ini-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tablet: Revenue y Pipeline mitad y mitad. Mobile: una columna (header → Revenue → Pipeline → lista). */
@media (max-width: 1199px) {
  .ini-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ini-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ini-card { padding: 16px; }
  .ini-big { font-size: 28px; }
  .ini-deal { padding: 12px 4px; min-height: 52px; }
  .ini-tabs .ui-seg-btn { padding: 0 12px; }
}
/* Inicio: modal del objetivo mensual */
.ini-goal-form .form-label { display: block; margin: 0 0 6px; }
.ini-goal-form .form-input { width: 100%; margin: 0 0 14px; background: var(--surface); color: var(--text); border-color: var(--border); }
.ini-goal-hint { margin: -4px 0 0; font-size: 12px; color: var(--text-muted); }
.ini-goal-err { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--danger); }
.ini-goal-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; width: 100%; }
.ini-goal-foot .ini-goal-clear { margin-right: auto; color: var(--danger); }
.ini-goal-foot .ini-goal-clear[hidden] { display: none; }

/* ── Reportes v2 (Fase 8C-UI). Prefijo rpt2-: .rpt-* es la pantalla vieja (quedan .rpt-kpi-* y .rpt-empty
   para Forecast y Clientes). Gráficos SVG de public/js/charts.js. Paleta por canal validada (orden fijo
   LinkedIn → WhatsApp → Email → Instagram, pares vecinos CVD ΔE ≥ 9 en claro y oscuro). ── */
:root {
  --rpt2-linkedin:  #2a78d6;
  --rpt2-whatsapp:  #1baf7a;
  --rpt2-email:     #eb6834;
  --rpt2-instagram: #6250d6;
  --rpt2-s1: #2a78d6; --rpt2-s2: #1baf7a; --rpt2-s3: #eb6834; --rpt2-s4: #6250d6;
  --rpt2-neutral: var(--text-subtle);
}
:root[data-theme="dark"] {
  --rpt2-linkedin:  #3987e5;
  --rpt2-whatsapp:  #199e70;
  --rpt2-email:     #d95926;
  --rpt2-instagram: #9085e9;
  --rpt2-s1: #3987e5; --rpt2-s2: #199e70; --rpt2-s3: #d95926; --rpt2-s4: #9085e9;
}
.rpt2-svg { display: block; overflow: visible; font-family: var(--font-sans); }
.rpt2-grid { stroke: var(--border); stroke-width: 1; }
.rpt2-axis { fill: var(--text-subtle); font-size: 11px; }
.rpt2-label { fill: var(--text); font-size: 13px; font-weight: 500; }
.rpt2-value { fill: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rpt2-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rpt2-dot { stroke: var(--surface); stroke-width: 2; }
.rpt2-hit { fill: transparent; }
.rpt2-track { fill: var(--surface-3); }
.rpt2-funnel-bar { fill: var(--accent); }
.rpt2-cell { stroke: none; }
.rpt2-heat-0 { fill: var(--surface-3); background: var(--surface-3); }
.rpt2-heat-1 { fill: color-mix(in srgb, var(--accent) 18%, var(--surface)); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.rpt2-heat-2 { fill: color-mix(in srgb, var(--accent) 36%, var(--surface)); background: color-mix(in srgb, var(--accent) 36%, var(--surface)); }
.rpt2-heat-3 { fill: color-mix(in srgb, var(--accent) 55%, var(--surface)); background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.rpt2-heat-4 { fill: color-mix(in srgb, var(--accent) 75%, var(--surface)); background: color-mix(in srgb, var(--accent) 75%, var(--surface)); }
.rpt2-heat-5 { fill: var(--accent); background: var(--accent); }
.rpt2-heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; color: var(--text-subtle); }
.rpt2-heat-key { width: 14px; height: 10px; border-radius: 3px; }
.rpt2-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 12px; color: var(--text-muted); }
.rpt2-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rpt2-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rpt2-empty { padding: 28px 12px; text-align: center; font-size: 13px; color: var(--text-subtle); }
.rpt2-tip {
  position: fixed; z-index: 9700; max-width: 260px; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--chrome); color: var(--on-chrome); font: 500 12px/1.35 var(--font-sans);
  box-shadow: var(--shadow); pointer-events: none;
}
.rpt2-tip[hidden] { display: none; }
@media (hover: hover) {
  .rpt2-hit:hover { fill: color-mix(in srgb, var(--text) 5%, transparent); }
  .rpt2-cell:hover, .rpt2-bar:hover { opacity: .85; }
}
.rpt2-page { display: flex; flex-direction: column; gap: 16px; }
.rpt2-page .ui-ph { margin-bottom: 0; }
.rpt2-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 12px; }
.rpt2-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.rpt2-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rpt2-field-lbl { font-size: 11px; font-weight: 600; color: var(--text-subtle); }
.rpt2-select.form-input { width: auto; min-width: 150px; max-width: 220px; margin: 0; padding-top: 7px; padding-bottom: 7px;
  background-color: var(--surface); color: var(--text); border-color: var(--border); }
.rpt2-filters-btn {
  display: none; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--surface); color: var(--text); font: 600 13px/1 var(--font-sans); cursor: pointer;
}
.rpt2-filters-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 11px; line-height: 18px; text-align: center; }
.rpt2-filters-n[hidden] { display: none; }
.rpt2-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.rpt2-status[hidden] { display: none; }
.rpt2-section { padding: 18px 20px; }
.rpt2-body:empty { min-height: 72px; border-radius: var(--radius-sm); background: var(--surface-2); }
.rpt2-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: 600 13px/1 var(--font-sans); cursor: pointer;
}
.rpt2-btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.rpt2-drawer-filters { display: flex; flex-direction: column; gap: 14px; }
.rpt2-drawer-filters .rpt2-select.form-input { width: 100%; max-width: none; }
.ui-drawer .ui-layer-foot:has(.rpt2-btn) { display: flex; justify-content: flex-end; gap: 8px; }
@media (hover: hover) {
  .rpt2-filters-btn:hover, .rpt2-btn--ghost:hover { background: var(--surface-2); }
  .rpt2-btn:not(.rpt2-btn--ghost):hover { background: var(--accent-h); border-color: var(--accent-h); }
}
.rpt2-filters-btn:focus-visible, .rpt2-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 767px) {
  .rpt2-page { gap: 12px; }
  .rpt2-toolbar { flex-wrap: nowrap; align-items: center; }
  .rpt2-period { flex: 1 1 auto; min-width: 0; }
  .rpt2-period .ui-seg-btn { flex: 1 1 0; padding: 0 6px; }
  .rpt2-filters { display: none; }
  .rpt2-filters-btn { display: inline-flex; flex: 0 0 auto; }
  .rpt2-section { padding: 16px; }
}
.rpt2-field-note { font-size: 11px; color: var(--text-subtle); }
.rpt2-field-note[hidden] { display: none; }
/* Reportes v2 · secciones */
.rpt2-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rpt2-sec-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.rpt2-chart { min-width: 0; }
.rpt2-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.rpt2-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rpt2-stat dt { font-size: 11px; font-weight: 600; color: var(--text-subtle); }
.rpt2-stat dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rpt2-h3 { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--text); }
.rpt2-hint { margin: -6px 0 0; font-size: 12px; color: var(--text-subtle); }
.rpt2-heat-text { margin: 0; font-size: 13px; color: var(--text-muted); }
.rpt2-heat-text[hidden] { display: none; }
@media (max-width: 767px) {
  .rpt2-sec-tools .ui-seg { flex: 1 1 auto; }
  .rpt2-sec-tools .ui-seg-btn { flex: 1 1 0; padding: 0 8px; }
  .rpt2-stat dd { font-size: 16px; }
}
/* Reportes v2 · tablas (Canales, Mensajes) */
.rpt2-table-wrap { min-width: 0; overflow-x: auto; }
.rpt2-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; color: var(--text); }
/* Pisa el table/th/td global de main.css y del <style> inline (mayúsculas, fondo y hover). */
.rpt2-table th, .rpt2-table td { background: transparent; text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--text); }
.rpt2-table tr:hover td { background: transparent; }
.rpt2-table th, .rpt2-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rpt2-table thead th { font-size: 11px; font-weight: 600; color: var(--text-subtle); white-space: nowrap; }
.rpt2-table .rpt2-row-invite > * { background: var(--surface-2); }
.rpt2-table tbody th { font-weight: 600; }
.rpt2-table .rpt2-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt2-table tbody tr:last-child > * { border-bottom: none; }
.rpt2-ch { white-space: nowrap; }
.rpt2-ch .rpt2-swatch { display: inline-block; margin-right: 8px; vertical-align: -1px; }
.rpt2-muted { color: var(--text-subtle); }
@media (max-width: 767px) {
  .rpt2-table, .rpt2-table tbody, .rpt2-table tr, .rpt2-table th, .rpt2-table td { display: block; }
  .rpt2-table thead { display: none; }
  .rpt2-table tbody { display: flex; flex-direction: column; gap: 10px; }
  .rpt2-table tr { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }
  .rpt2-table tr.rpt2-row-invite { background: var(--surface-2); }
  .rpt2-table tr > * { border-bottom: none; padding: 4px 0; background: transparent; }
  .rpt2-table tbody th { padding-bottom: 8px; white-space: normal; }
  .rpt2-table td { display: flex; justify-content: space-between; gap: 12px; }
  .rpt2-table td::before { content: attr(data-label); color: var(--text-muted); font-weight: 500; text-align: left; }
}
/* Reportes v2 · ranking de mensajes */
.rpt2-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rpt2-rank-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rpt2-rank-item:last-child { border-bottom: none; }
.rpt2-rank-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rpt2-rank-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rpt2-rank-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.rpt2-rank-meta { margin: 0; font-size: 12px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.rpt2-rank-rate { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Agenda (Fase 8A) · panel-tasks ──────────────────────────────────────────────────────────
   Pensada primero para el iPhone: objetivos de 44 px, hover solo como extra (@media hover), tokens
   en claro y oscuro. El padding inferior con safe-area ya lo da .ui-shell .content en mobile. */
.ag-page { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.ag-page .ui-ph { margin-bottom: 0; }
.ag-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ag-page .ag-sel { width: auto; min-width: 0; flex: 0 1 200px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; }
.ag-page .ag-new { margin-left: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; white-space: nowrap; }

.ag-list { display: flex; flex-direction: column; gap: 18px; }
.ag-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; min-height: 28px; }
.ag-group-h { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); }
.ag-group--overdue .ag-group-h { color: var(--danger); }
.ag-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ag-group--overdue .ag-count { background: var(--danger-bg); color: var(--danger); }
.ag-empty-group { margin: 0 2px; font-size: 13px; color: var(--text-subtle); }
/* Reuniones pasadas: plegado, solo lectura */
.ag-past-sum { cursor: pointer; list-style: none; min-height: 44px; margin-bottom: 0; border-radius: 10px; justify-content: flex-start; gap: 8px; }
.ag-past-sum::-webkit-details-marker { display: none; }
.ag-past-sum::before { content: '▸'; color: var(--text-subtle); font-size: 12px; transition: transform .15s ease; }
.ag-group--past[open] > .ag-past-sum::before { transform: rotate(90deg); }
.ag-group--past[open] > .ag-past-sum { margin-bottom: 8px; }
.ag-past-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-card.is-past .ag-when { color: var(--text-subtle); }
.ag-card.is-past .ag-actions:empty { display: none; }

.ag-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ag-card { display: flex; align-items: stretch; gap: 4px; min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.ag-card.is-overdue { border-left: 3px solid var(--danger); }
.ag-card-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 12px 6px 12px 14px; min-height: 64px;
  background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ag-card-main:active { background: var(--surface-2); }
.ag-card-main:focus-visible, .ag-btn:focus-visible, .ag-more:focus-visible, .ag-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ag-ico { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--surface-2); font-size: 17px; line-height: 1; }
.ag-card.is-meeting .ag-ico { background: var(--accent-soft); }
.ag-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ag-name { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-company { font-weight: 400; color: var(--text-subtle); }
.ag-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ag-card.is-overdue .ag-when { color: var(--danger); font-weight: 600; }
.ag-dot { color: var(--text-subtle); }
.ag-note { font-size: 13px; color: var(--text-muted); line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0; }
.ag-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 17px;
  line-height: 1; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ag-btn .brand-ico { width: 20px; height: 20px; margin: 0; }
.ag-btn:active { background: var(--surface-3); }
.ag-btn--done { border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.ag-btn--done:active { background: var(--accent); color: var(--on-accent); }
.ag-btn--ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.ag-more { align-self: flex-start; margin-top: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ag-empty { padding: 40px 16px; text-align: center; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }
.ag-empty p { margin: 6px 0 0; font-size: 14px; }
.ag-empty-ico { font-size: 30px; }
@media (hover: hover) {
  .ag-card-main:hover { background: var(--surface-2); }
  .ag-btn:hover, .ag-more:hover { border-color: var(--border-strong); background: var(--surface-2); }
  .ag-btn--done:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
}

/* Formulario "Nueva tarea" */
.ag-page .ag-form { margin: 0; background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
.ag-page .ag-form .cdp-inline-form-title { color: var(--text-muted); }
.ag-page .ag-form .form-input { min-height: 44px; background: var(--surface); color: var(--text); border-color: var(--border); }
.ag-page .ag-form textarea.form-input { min-height: 64px; resize: none; }
.ag-page .ag-form .rem-type-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-page .ag-form .rem-type-pill { min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; }
.ag-page .ag-form .rem-type-pill.selected { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ag-form-contact { position: relative; }
.ag-form-when { margin-bottom: 4px; }
.ag-optional { font-weight: 400; color: var(--text-subtle); }
.ag-form-btns { display: flex; justify-content: flex-end; gap: 8px; }
.ag-form-btns .btn { min-height: 44px; padding: 0 18px; }
.ag-pick-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 200; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.ag-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0;
  border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ag-pick:last-child { border-bottom: 0; }
.ag-pick:active { background: var(--surface-2); }
.ag-pick--new { color: var(--accent-text); font-weight: 600; }
.ag-pick-av { --av: var(--text-subtle); flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600; color: var(--av); background: color-mix(in srgb, var(--av) 16%, transparent); }
.ag-pick-av--new { --av: var(--accent); font-size: 16px; }
.ag-pick-body { min-width: 0; display: flex; flex-direction: column; }
.ag-pick-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-pick-sub { font-size: 12px; color: var(--text-subtle); }
.ag-picked { align-items: center; gap: 10px; margin-top: 6px; padding: 4px 4px 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.ag-picked-name { flex: 1 1 auto; min-width: 0; font-size: 14px; }
@media (hover: hover) { .ag-pick:hover { background: var(--surface-2); } }

@media (max-width: 767px) {
  .ag-page { gap: 12px; }
  .ag-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ag-page .ag-sel { flex: none; width: 100%; }
  .ag-page .ag-new { grid-column: 1 / -1; margin-left: 0; width: 100%; }
  /* Mobile: el contenido ocupa todo el ancho y los botones van en una fila abajo, alineados a la derecha. */
  .ag-card { flex-wrap: wrap; gap: 0; }
  .ag-card-main { flex-basis: 100%; padding: 12px 12px 4px; gap: 10px; min-height: 0; }
  .ag-ico { width: 32px; height: 32px; font-size: 15px; }
  .ag-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ag-actions { width: 100%; justify-content: flex-end; gap: 6px; padding: 0 10px 10px; }
  .ag-actions:empty { display: none; }
  .ag-card-main:has(+ .ag-actions:empty) { padding-bottom: 12px; }
  .ag-page .ag-form { padding: 14px; }
  .ag-page .ag-form .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ag-form-btns .btn { flex: 1 1 0; }
}
/* Agenda · posponer (hoja), descartar en bloque */
.ag-btn--snooze { font-size: 18px; }
.ag-bulk { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--danger-br); background: var(--danger-bg);
  color: var(--danger); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ag-group--overdue .ag-group-head { flex-wrap: wrap; }
.ag-sheet { display: flex; flex-direction: column; gap: 14px; padding-bottom: env(safe-area-inset-bottom); }
.ag-sheet-sub { margin: 0; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.ag-opts { display: flex; flex-direction: column; gap: 8px; }
.ag-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit;
  font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ag-opt:active { background: var(--surface-2); }
.ag-opt:focus-visible, .ag-bulk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-opt-when { font-size: 13px; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-opt--danger { color: var(--danger); border-color: var(--danger-br); }
.ag-pickdate { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.ag-pickdate-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ag-pickdate .form-input { min-height: 44px; background: var(--surface); color: var(--text); border-color: var(--border); }
.ag-pickdate-btn { min-height: 44px; }
.ag-pickdate-err { margin: 0; font-size: 12px; color: var(--danger); }
@media (hover: hover) {
  .ag-opt:hover { background: var(--surface-2); border-color: var(--border-strong); }
  .ag-bulk:hover { border-color: var(--danger); }
}

/* ── Finanzas (Fase 8B). Prefijo fin2-: las .fin-* viejas quedan para las listas hasta el commit de estilos. ── */
#panel-finances { background: transparent; padding: 0; min-height: 0; }
#panel-finances .fin-page { max-width: 1200px; padding: 0; }
.fin2-card { margin-bottom: 16px; padding: 18px 20px; }
.fin2-unit { margin-left: 4px; font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--text-subtle); }
.fin2-chart { min-height: 220px; }
.fin2-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; }
.fin2-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin2-stats dt { font-size: 11px; font-weight: 600; color: var(--text-subtle); }
.fin2-stats dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.fin2-muted { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.fin2-warn { margin: -8px 0 16px; padding: 8px 12px; border: 1px solid var(--warn-br); border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); font-size: 12px; }
.fin2-kpi-link { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fin2-kpi-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fin2-empty { text-align: center; }
.fin2-empty .ui-card-title { white-space: normal; margin-bottom: 6px; }
.fin2-empty p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.fin2-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fin2-empty .ini-btn[disabled] { opacity: .45; cursor: not-allowed; }
.fin2-rec-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-muted); }
.fin2-rec-total strong { font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.fin2-rec-list { list-style: none; margin: 12px 0 0; padding: 0; }
.fin2-rec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.fin2-rec-main { min-width: 0; }
.fin2-rec-name { font-weight: 600; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.fin2-rec-sub { margin-top: 2px; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.fin2-rec-amt { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.fin2-rec-list--done .fin2-rec-amt { color: var(--text-subtle); font-weight: 500; }
.fin2-h3 { margin: 18px 0 0; font-size: 12px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .4px; }
@media (hover: hover) {
  .fin2-kpi-link:hover { border-color: var(--border-strong); }
}
/* Listas (Pagos · Gastos · Cuentas) y formularios en drawer */
.fin2-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.fin2-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fin2-actions .ini-btn[disabled] { opacity: .45; cursor: not-allowed; }
.fin2-seg-n { margin-left: 4px; font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.fin2-filter { display: flex; gap: 6px; margin: 0 0 8px; }
.fin2-none { margin: 8px 0; padding: 16px 0; font-size: 13px; color: var(--text-muted); }
.fin2-rows { list-style: none; margin: 0; padding: 0; }
.fin2-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(90px, auto) 36px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.fin2-row:first-child { border-top: 0; }
.fin2-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fin2-row-main.is-static { cursor: default; }
.fin2-row-title { font-weight: 600; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.fin2-row-who { font-weight: 400; color: var(--text-muted); }
.fin2-row-sub { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.fin2-row-amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.fin2-row-amt.is-neg { color: var(--danger); }
.fin2-row-amt.is-pos { color: var(--success); }
.fin2-row-unit { margin-left: 2px; font-size: 11px; font-weight: 500; color: var(--text-subtle); }
.fin2-row-act { display: flex; justify-content: flex-end; }
.fin2-row-act .ui-circle-btn { width: 30px; height: 30px; }
.fin2-norate { color: var(--warn); font-weight: 600; }
.fin2-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; font-size: 11px; font-weight: 600; white-space: nowrap; }
.fin2-badge--cobrado { background: var(--success-bg); border-color: var(--success-br); color: var(--success); }
.fin2-badge--pendiente { background: var(--warn-bg); border-color: var(--warn-br); color: var(--warn); }
.fin2-badge--vencido { background: var(--danger-bg); border-color: var(--danger-br); color: var(--danger); }
.fin2-badge--none { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
.fin2-lists .fin2-stats { padding-top: 12px; border-top: 1px solid var(--border); }
.fin2-lists .fin2-h3 { margin: 22px 0 6px; }
.fin2-h3row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fin2-link { margin: 0; padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.fin2-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; }
.fin2-person { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--text); }
.fin2-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); font-size: 11px; cursor: pointer; }
.fin2-form { display: flex; flex-direction: column; gap: 12px; }
.fin2-field[hidden] { display: none; }
.fin2-form .form-label { display: block; margin: 0 0 6px; }
.fin2-form .form-input { width: 100%; margin: 0; background: var(--surface); color: var(--text); border-color: var(--border); }
.fin2-hint { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.fin2-err { margin: 0; font-size: 12px; font-weight: 600; color: var(--danger); }
.fin2-foot { display: flex; align-items: center; gap: 8px; width: 100%; }
.fin2-foot .fin2-del { margin-right: auto; color: var(--danger); }
.fin2-drawer .ui-layer-body .fin2-rows { margin-top: 12px; }
@media (hover: hover) {
  .fin2-row-main:not(.is-static):hover .fin2-row-title { text-decoration: underline; }
  .fin2-x:hover { color: var(--danger); }
  .fin2-link:hover { text-decoration: underline; }
}

/* Finanzas en mobile (≤767 px): una columna, filas como tarjetas, objetivos de toque de 40–44 px, sin scroll horizontal. */
@media (max-width: 767px) {
  #fin-head .ui-ph-kpis { grid-template-columns: minmax(0, 1fr); }
  #fin-head .ui-ph-kpi-sub { overflow-wrap: anywhere; }
  .fin2-card { padding: 14px; margin-bottom: 12px; }
  .fin2-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .fin2-toolbar { flex-direction: column; align-items: stretch; }
  .fin2-toolbar .ui-seg { display: flex; }
  .fin2-toolbar .ui-seg-btn { flex: 1; height: 40px; padding: 0 8px; }
  .fin2-form .form-input { min-height: 44px; font-size: 16px; }
  .fin2-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .fin2-actions .ini-btn, .fin2-empty-actions .ini-btn { height: 44px; }
  .fin2-filter .ui-chip { height: 40px; }
  .fin2-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "main main main" "badge amt act"; gap: 6px 10px; padding: 10px 0; }
  .fin2-row-main { grid-area: main; }
  .fin2-row > .fin2-badge { grid-area: badge; justify-self: start; }
  .fin2-row-amt { grid-area: amt; font-size: 15px; }
  .fin2-row-act { grid-area: act; }
  .fin2-row:not(:has(.fin2-badge)) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main amt act"; }
  .fin2-row-act .ui-circle-btn { width: 40px; height: 40px; }
  .fin2-x { width: 32px; height: 32px; }
  .fin2-person { height: 40px; }
  .fin2-link { padding: 8px 0; }
  .fin2-foot .btn { min-height: 44px; }
}

/* ── Chats (Fase 8D) · inbox: lista con pestañas por etapa, chat y panel del contacto. Pisa las .chat-* de
   main.css (Fase 9). Hover solo con @media (hover: hover). ── */
#panel-chats .chat-sidebar { background: var(--surface); border-right-color: var(--border); }
.chat-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 2px; }
.chat-list-title { margin: 0; min-width: 0; font: 700 17px/1.25 var(--font-sans); letter-spacing: -.2px; color: var(--text); }
#panel-chats .chat-search-wrap { padding: 8px 14px 4px; border-bottom: 0; }

/* Pestañas por etapa: fila deslizable (scroll-snap); el contador no depende de la búsqueda. */
.chat-tabs {
  position: relative; display: flex; gap: 6px; flex-shrink: 0; min-width: 0;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-inline: 14px; scrollbar-width: none;
  padding: 6px 14px 10px; border-bottom: 1px solid var(--border);
}
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tabs[hidden] { display: none; }
.chat-tab.ui-chip, .chat-unread-chip.ui-chip, .chat-list-empty-btn.ui-chip { position: relative; height: 32px; padding: 0 12px; gap: 6px; font-size: 12.5px; }
.chat-tab.ui-chip { flex-shrink: 0; scroll-snap-align: start; }
.chat-unread-chip.ui-chip { flex-shrink: 0; }
.chat-tab-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--st-fg, var(--text-subtle)); }
.chat-tab-n, .chat-unread-n {
  min-width: 18px; padding: 0 5px; border-radius: 999px; text-align: center;
  font: 600 11px/18px var(--font-sans); background: var(--surface-3); color: var(--text-muted);
}
.chat-unread-n { background: var(--accent); color: var(--on-accent); }
.chat-unread-n[hidden] { display: none; }
.chat-tab[aria-pressed="true"] .chat-tab-n { background: color-mix(in srgb, var(--bg) 24%, transparent); color: var(--bg); }
#panel-chats .chat-list-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; color: var(--text-muted); }
.chat-list-empty-text { margin: 0; font-size: 13px; line-height: 1.45; text-align: center; }
/* Objetivo de 44 px en táctil sin agrandar la píldora: el área de toque se extiende con ::after. */
@media (max-width: 767px), (pointer: coarse) {
  .chat-tab.ui-chip::after, .chat-unread-chip.ui-chip::after, .chat-list-empty-btn.ui-chip::after { content: ''; position: absolute; inset: -6px -3px; }
}

/* Lista: ítem con avatar (badge de WhatsApp), nombre y hora, preview con ✓✓ si es saliente, no leídos con el
   acento del workspace y pill de stage. Seleccionado = --accent-soft. */
.chat-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#panel-chats .chat-list { padding: 4px 0 8px; }
#panel-chats .chat-row {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 12px); margin: 1px 6px; padding: 10px;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--text); text-align: left;
  -webkit-tap-highlight-color: transparent;
}
#panel-chats .chat-row.chat-row--active { background: var(--accent-soft); } /* con #panel-chats pisa también el hover de main.css */
#panel-chats .chat-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { #panel-chats .chat-row:not(.chat-row--active):hover { background: var(--surface-2); } }
.chat-row-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
#panel-chats .chat-row-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
#panel-chats .chat-row-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }
#panel-chats .chat-row-time { flex-shrink: 0; font-size: 11.5px; color: var(--text-subtle); }
#panel-chats .chat-row--unread .chat-row-name { font-weight: 700; }
#panel-chats .chat-row--unread .chat-row-time { color: var(--accent-text); font-weight: 600; }
#panel-chats .chat-row-bottom { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 0; }
#panel-chats .chat-row-preview { flex: 1; min-width: 0; font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-chats .chat-row--unread .chat-row-preview { color: var(--text); font-weight: 500; }
.chat-row-tick { margin-right: 4px; letter-spacing: -2px; padding-right: 2px; color: var(--text-subtle); }
#panel-chats .chat-row-unread {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; box-sizing: border-box;
  background: var(--accent); color: var(--on-accent); font: 700 11px/20px var(--font-sans); text-align: center;
}
#panel-chats .chat-stage {
  flex-shrink: 0; max-width: 104px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-muted); font-size: 10.5px; font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Avatar: iniciales con el color del contacto (o neutro) y el mini-badge de WhatsApp. */
.chat-av {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--av, var(--text-subtle)) 16%, var(--surface)); color: var(--av, var(--text-muted));
  font: 600 14px/1 var(--font-sans); letter-spacing: .2px; user-select: none;
}
:root[data-theme="dark"] .chat-av {
  background: color-mix(in srgb, var(--av, var(--text-subtle)) 30%, var(--surface));
  color: color-mix(in srgb, var(--av, var(--text-muted)) 45%, white);
}
.chat-av-txt { overflow: hidden; max-width: 100%; }
.chat-av-person { width: 60%; height: 60%; opacity: .75; }
.chat-av-wa { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.chat-av--sm { width: 36px; height: 36px; font-size: 12.5px; }
.chat-av--sm .chat-av-wa { width: 14px; height: 14px; }
.chat-av--lg { width: 72px; height: 72px; font-size: 22px; }
.chat-av--lg .chat-av-wa { width: 22px; height: 22px; right: 0; bottom: 0; }

/* Header del chat: avatar, nombre, teléfono y stage; acciones a la derecha. */
#panel-chats .chat-main { background: var(--surface-2); }
:root[data-theme="dark"] #panel-chats .chat-main { background: var(--bg); }
#panel-chats .chat-empty { color: var(--text-muted); }
#panel-chats .chat-head { gap: 10px; min-height: 64px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.chat-head-av { display: inline-flex; flex-shrink: 0; }
.chat-head-av:empty { display: none; }
#panel-chats .chat-head-name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); }
#panel-chats .chat-head-sub { flex-wrap: nowrap; gap: 8px; margin-top: 2px; }
#panel-chats .chat-head-number { flex-shrink: 6; min-width: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } /* cede antes que la pill */
#panel-chats .chat-back {
  display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin: 0 -6px 0 -10px;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer;
}
#panel-chats .chat-back:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 767px) { #panel-chats .chat-back { display: inline-flex; } }
@media (hover: hover) { #panel-chats .chat-back:hover { background: var(--surface-2); } }

/* Mensajes: separadores Ayer/Hoy, burbujas con más aire (máx. ~70 %), radios de los tokens. La saliente
   (también la del bot) en verde suave (--success-bg). */
#panel-chats .chat-msgs { padding: 16px clamp(12px, 4%, 32px) 18px; gap: 6px; }
#panel-chats .chat-msgs-note { color: var(--text-muted); }
#panel-chats .chat-day {
  margin: 12px 0 6px; padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--text-muted);
  box-shadow: var(--shadow-sm); font-size: 11.5px; font-weight: 600;
}
#panel-chats .chat-msg {
  max-width: min(70%, 640px); padding: 8px 12px 6px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-size: 14px; line-height: 1.45;
}
#panel-chats .chat-msg.chat-msg--in { border-top-left-radius: var(--radius-sm); }
#panel-chats .chat-msg.chat-msg--out { background: var(--success-bg); border-color: var(--success-br); border-top-right-radius: var(--radius-sm); }
:root[data-theme="dark"] #panel-chats .chat-msg.chat-msg--in { background: var(--surface-2); }
#panel-chats .chat-msg.chat-msg--failed { background: var(--danger-bg); border-color: var(--danger-br); }
#panel-chats .chat-msg-tag { margin-bottom: 3px; font-size: 11px; color: var(--success); }
#panel-chats .chat-msg-text.chat-msg-text--media { color: var(--text-muted); }
#panel-chats .chat-msg-meta { gap: 4px; margin-top: 3px; font-size: 11px; color: var(--text-subtle); }
#panel-chats .chat-tick.chat-tick--read { color: var(--info); }
#panel-chats .chat-tick.chat-tick--failed { color: var(--danger); }
#panel-chats .chat-msg-error { color: var(--danger); }
#panel-chats .chat-bot-notice, #panel-chats .chat-window-note { border-radius: var(--radius); }
#panel-chats .chat-bot-notice { margin: 10px 14px 0; }
#panel-chats .chat-window-note { margin: 0 14px 8px; }
#panel-chats .chat-composer-status { margin: 0 16px 6px; color: var(--text-muted); }
#panel-chats .chat-composer-status.chat-composer-status--error { color: var(--danger); }
@media (max-width: 767px) { #panel-chats .chat-msg { max-width: 82%; } }

/* Composer: input redondeado y botón enviar circular (spinner mientras envía). */
#panel-chats .chat-composer { align-items: flex-end; gap: 10px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--border); }
#panel-chats .chat-input {
  min-height: 44px; padding: 11px 16px; border: 1px solid var(--border); border-radius: 22px;
  background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 1.4;
}
#panel-chats .chat-input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
#panel-chats .chat-input:disabled { background: var(--surface-3); color: var(--text-subtle); }
#panel-chats .chat-send {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#panel-chats .chat-send:disabled { background: var(--surface-3); color: var(--text-subtle); cursor: not-allowed; }
#panel-chats .chat-send.is-sending:disabled { background: var(--accent); color: var(--on-accent); cursor: progress; }
#panel-chats .chat-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-send-ico { margin-left: 2px; }
.chat-send.is-sending .chat-send-ico { opacity: 0; }
.chat-send.is-sending::after {
  content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: chat-spin .8s linear infinite;
}
@keyframes chat-spin { to { transform: rotate(360deg); } }
@media (hover: hover) { #panel-chats .chat-send:not(:disabled):hover { background: var(--accent-h); } }
@media (prefers-reduced-motion: reduce) { .chat-send.is-sending::after { animation: none; border-right-color: currentColor; opacity: .6; } }
@media (max-width: 767px) { #panel-chats .chat-input { font-size: 16px; } }

/* Header: llamar (tel:) y abrir/cerrar el panel del contacto; pill de stage. */
.chat-head-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-muted);
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.chat-head-btn[hidden] { display: none; }
.chat-head-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-text); }
.chat-head-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-theme="dark"] #panel-chats .chat-head-btn { color: var(--text-muted); }
:root[data-theme="dark"] #panel-chats .chat-head-btn[aria-expanded="true"] { color: var(--accent-text); }
@media (hover: hover) {
  .chat-head-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
  .chat-head-btn[aria-expanded="true"]:hover { background: var(--accent-soft-2); color: var(--accent-text); }
}
.chat-head-stage { display: inline-flex; min-width: 0; }
.chat-stage-pill { position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; color: var(--st-fg, var(--text-muted)); }
.chat-stage-pill-sel, .chat-stage-pill-btn {
  max-width: 200px; height: 22px; margin: 0; padding: 0 20px 0 9px; border: 0; border-radius: 999px;
  background-color: var(--st-bg, var(--surface-3)); color: inherit; font: 600 11px/22px var(--font-sans);
  white-space: nowrap; text-overflow: ellipsis; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.chat-stage-pill-sel { appearance: none; -webkit-appearance: none; overflow: hidden; min-width: 0; } /* un select mide lo que su opción más larga: así se achica en headers angostos */
.chat-stage-pill::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 5px; height: 5px; margin-top: -4px; pointer-events: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.chat-stage-pill-btn { display: none; position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.chat-stage-pill-txt { display: block; overflow: hidden; text-overflow: ellipsis; }
.chat-stage-pill-sel:focus-visible, .chat-stage-pill-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* En táctil, botón que abre el panel en el selector de etapa (un <select> de 11 px hace zoom en el iPhone);
   área de toque de 44 px con ::after. */
@media (max-width: 767px), (pointer: coarse) {
  .chat-stage-pill-sel { display: none; }
  .chat-stage-pill-btn { display: inline-block; height: 24px; line-height: 24px; }
  .chat-stage-pill-btn::after { content: ''; position: absolute; inset: -10px -4px; }
  .chat-head-btn { width: 44px; height: 44px; }
}
@media (max-width: 767px) {
  #panel-chats .chat-head { gap: 6px; padding: 8px 10px; }
  #panel-chats .chat-head-number { display: none; } /* en el panel; la fila queda para la pill */
}

/* Tres columnas en ≥1200 px: lista · chat · panel del contacto. */
#panel-chats .chat-panel { display: none; }
@media (min-width: 1200px) {
  #panel-chats .chat-layout--panel .chat-panel:not([hidden]) { display: flex; }
}
.chat-panel {
  flex-direction: column; flex-shrink: 0; width: 340px; min-width: 0; min-height: 0;
  background: var(--surface); border-left: 1px solid var(--border);
}
.chat-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; padding: 12px 12px 2px 18px; }
.chat-panel-title { margin: 0; font: 700 15px/1.3 var(--font-sans); color: var(--text); }
.chat-panel .chat-panel-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 20px; }
.chat-drawer .chat-panel-body { padding: 0 0 8px; }
@media (pointer: coarse) { .chat-panel-x.ui-circle-btn { width: 44px; height: 44px; } }

/* Pestaña Contacto */
.chat-pc-hero { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 16px; text-align: center; border-bottom: 1px solid var(--border); }
.chat-pc-hero .chat-av--lg { margin-bottom: 8px; }
.chat-pc-name { max-width: 100%; font: 700 16px/1.3 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.chat-pc-phone { font-size: 13px; color: var(--text-muted); }
.chat-pc-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chat-pc-act {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 76px; min-height: 56px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: 600 12px/1.2 var(--font-sans); text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] #panel-chats .chat-pc-act, :root[data-theme="dark"] .chat-drawer .chat-pc-act { color: var(--text); }
.chat-pc-act svg { color: var(--accent-text); }
.chat-pc-act[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent-soft-2); }
.chat-pc-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .chat-pc-act:hover { background: var(--surface-2); border-color: var(--border-strong); } }
.chat-pc-agenda { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.chat-pc-agenda[hidden] { display: none; }
.chat-pc-agenda-btn.ui-chip { position: relative; height: 36px; }
.chat-pc-field { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.chat-pc-sec { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.chat-pc-label { font: 600 11px/1.2 var(--font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--text-subtle); }
.chat-pc-select {
  width: 100%; min-height: 40px; margin: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background-color: var(--surface); color: var(--text); font: 500 14px/1.3 var(--font-sans);
}
.chat-pc-select.chat-pc-stage { background-color: var(--st-bg, var(--surface)); color: var(--st-fg, var(--text)); border-color: transparent; font-weight: 600; }
.chat-pc-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-pc-owner { display: flex; align-items: center; gap: 10px; }
.chat-pc-owner .chat-pc-select { flex: 1; min-width: 0; }
.chat-pc-meta { font-size: 12px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.chat-pc-info { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.chat-pc-info-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.4; }
.chat-pc-info dt { color: var(--text-subtle); }
.chat-pc-info dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.chat-pc-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0; text-align: center; }
.chat-pc-empty .chat-av--lg { margin-bottom: 8px; }
.chat-pc-empty-text { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 767px), (pointer: coarse) {
  .chat-pc-select { min-height: 44px; font-size: 16px; }
  .chat-pc-agenda-btn.ui-chip { height: 44px; }
}

/* Pestañas del panel (Contacto · Actividad · Notas) */
.chat-panel-tabs.ui-seg { display: flex; flex-shrink: 0; margin: 6px 18px 4px; }
.chat-drawer .chat-panel-tabs.ui-seg { margin: 0 0 4px; }
.chat-panel-tabs .ui-seg-btn { flex: 1; min-width: 0; }
@media (max-width: 767px), (pointer: coarse) { .chat-panel-tabs .ui-seg-btn { height: 38px; } }

/* Actividad: feed de la ficha en solo lectura (sin editar, borrar ni completar). */
.chat-pa { padding-top: 10px; }
.chat-pa-note { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.chat-pa-link { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.chat-pa-feed .cdp-ev-actions, .chat-pa-feed .cdp-ev-rem-btn, .chat-pa-feed [data-ev-btn], .chat-pa-feed [data-ev-panel] { display: none !important; }
.chat-pa-feed .ev-inline-summary { cursor: default; }

/* Notas */
.chat-pn-text, .chat-pn-new {
  display: block; width: 100%; box-sizing: border-box; min-height: 96px; margin: 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font: 400 14px/1.45 var(--font-sans); resize: vertical;
}
.chat-pn-new { min-height: 64px; }
.chat-pc-sec > .chat-pc-field { padding-top: 0; }
.chat-pn-text:focus, .chat-pn-new:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-pn-add {
  align-self: flex-end; height: 36px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font: 600 13px/1 var(--font-sans); cursor: pointer;
}
.chat-pn-add:disabled { background: var(--surface-3); color: var(--text-subtle); cursor: default; }
.chat-pn-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .chat-pn-add:not(:disabled):hover { background: var(--accent-h); } }
.chat-pn-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.chat-pn-item { padding: 10px 12px; border-left: 3px solid var(--warn); border-radius: 4px; background: var(--warn-bg); }
.chat-pn-date { display: block; margin-bottom: 4px; font-size: 11px; color: var(--text-muted); }
.chat-pn-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-pn-empty { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
@media (max-width: 767px), (pointer: coarse) {
  .chat-pn-text, .chat-pn-new { font-size: 16px; }
  .chat-pn-add { height: 44px; }
}
/* En oscuro, :root[data-theme="dark"] select pisa el fondo: los selectores de etapa conservan el color del stage. */
:root[data-theme="dark"] .chat-stage-pill-sel { background-color: var(--st-bg, var(--surface-3)); color: inherit; }
:root[data-theme="dark"] .chat-pc-select.chat-pc-stage { background-color: var(--st-bg, var(--surface-2)); color: var(--st-fg, var(--text)); }

/* Chat sin ficha: "Crear contacto" en el panel y pill neutra en el header que lleva ahí. */
.chat-pc-create.chat-pn-add { align-self: center; margin-top: 14px; height: 40px; padding: 0 20px; }
.chat-stage-pill--nofile { color: var(--text-muted); }
.chat-stage-pill--nofile::after { display: none; }
.chat-stage-pill--nofile .chat-stage-pill-btn { display: inline-block; padding: 0 9px; background-color: var(--surface-3); border: 1px dashed var(--border-strong); }
@media (max-width: 767px), (pointer: coarse) { .chat-pc-create.chat-pn-add { height: 44px; } }

/* ── Chats · área completa. body.chats-on (panel de Chats activo) y body.chats-conv-open (≤767 px con un chat
   abierto) los pone chats.js y los saca al salir de Chats. Escritorio: sin tarjeta, al lado del riel (su ancho
   + 12 px), pegado a la derecha y hasta el borde de abajo; solo separadores de 1 px entre columnas. ── */
body.chats-on .ui-shell .content { display: flex; flex-direction: column; overflow: hidden; padding: 0 0 0 calc(var(--ui-rail-w) + 30px); }
body.chats-on #panel-chats.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.chats-on #panel-chats .chat-layout { flex: 1; min-height: 0; height: auto; border: 0; border-radius: 0; box-shadow: none; }
#panel-chats .chat-sidebar { width: clamp(320px, 25vw, 360px); border-right: 1px solid var(--border); }
/* El panel lateral viejo (#detail-panel) espera fuera de la pantalla y su sombra entra ~28 px por la derecha:
   con Chats pegado al borde se veía sobre el panel del contacto. Solo mientras está cerrado. */
body.chats-on .detail-panel:not(.open) { box-shadow: none; }
/* main.css trata 768 px como mobile (lista o chat): en 768 van las dos columnas, como en el resto del escritorio. */
@media (min-width: 768px) and (max-width: 768px) {
  #panel-chats .chat-sidebar, #panel-chats .chat-layout.chat-layout--open .chat-sidebar { display: flex; width: 320px; border-right: 1px solid var(--border); }
  #panel-chats .chat-main { display: flex; }
}

/* Mobile: la lista de borde a borde y hasta el fondo (pasa por debajo de la barra inferior flotante). */
@media (max-width: 767px) {
  body.chats-on .app.ui-shell { height: 100vh; height: 100dvh; }
  body.chats-on .ui-shell .content { padding: 0; }
  #panel-chats .chat-sidebar { width: 100%; border-right: 0; }
  body.chats-on #panel-chats .chat-list { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }

  /* Chat abierto: pantalla completa (sin barra superior ni inferior), header y composer con safe-area y, con el
     teclado abierto, el alto y la posición del visualViewport (--chat-vvh / --chat-vvt, desde chats.js). */
  body.chats-conv-open .ui-topbar, body.chats-conv-open .ui-rail { display: none !important; }
  body.chats-conv-open #panel-chats .chat-layout {
    position: fixed; left: 0; right: 0; z-index: 50; top: var(--chat-vvt, 0px); height: var(--chat-vvh, 100dvh);
  }
  body.chats-conv-open #panel-chats .chat-head { padding-top: max(8px, env(safe-area-inset-top)); }
  body.chats-conv-open #panel-chats .chat-composer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

  /* Header: el switch sin el texto (queda en aria-label) para darle ancho al nombre y a la pill. */
  #panel-chats .chat-bot-switch { gap: 0; min-width: 44px; padding: 0 5px; }
  #panel-chats .chat-bot-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* Zoom de iOS al enfocar: campos de 16 px en Chats y en su drawer. */
  #panel-chats input, #panel-chats select, #panel-chats textarea, .chat-drawer select, .chat-drawer textarea { font-size: 16px; }
}

/* ── Chats · lista en mobile (≤767 px). Arriba "Shyfts / Chats" con Buscar chats (barra superior); abajo, en una
   grilla: buscador desplegable · "No leídos" (toggle) + píldoras de etapa · avisos · tarjetas. Las tarjetas
   (.chat-card) solo se pintan en mobile (chatsRenderList); escritorio sigue con .chat-row. ── */
.ui-icon-btn.chat-search-btn, .chat-search-cancel { display: none; }
@media (max-width: 767px) {
  body.chats-on .ui-topbar-right > .sync-bar, body.chats-on .ui-topbar-right > .ui-user { display: none; }
  body.chats-on .ui-icon-btn.chat-search-btn { display: inline-flex; width: 44px; height: 44px; }
  body.chats-on .ui-icon-btn.chat-search-btn svg { width: 20px; height: 20px; }
  body.chats-on .ui-icon-btn.chat-search-btn[aria-expanded="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }

  #panel-chats .chat-layout:not(.chat-layout--open) .chat-sidebar {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "search search" "unread tabs" "push push" "list list";
  }
  #panel-chats .chat-sidebar, body.chats-on #panel-chats .chat-layout { background: var(--bg); }
  #panel-chats .chat-list-head { display: contents; }
  #panel-chats .chat-list-title { display: none; }

  /* Buscador: oculto hasta tocar Buscar chats; 44 px y 16 px (sin zoom de iOS), con Cancelar. */
  #panel-chats .chat-search-wrap { grid-area: search; display: none; align-items: center; gap: 8px; padding: 12px 16px 0; }
  #panel-chats .chat-sidebar.chat-search-open .chat-search-wrap { display: flex; }
  #panel-chats .chat-search-wrap .ui-search { flex: 1; }
  #panel-chats .chat-search { height: 44px; padding: 0 14px 0 34px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 16px; }
  #panel-chats .chat-search:focus { border-color: var(--accent); background: var(--surface); }
  #panel-chats .chat-search-cancel {
    display: inline-flex; align-items: center; height: 44px; padding: 0 4px; border: 0; background: none;
    color: var(--accent-text); font: 600 14px/1 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #panel-chats .chat-search-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

  /* "No leídos": toggle (se combina con la etapa), fijo a la izquierda y separado de las píldoras por una línea. */
  #panel-chats .chat-unread-chip.ui-chip {
    grid-area: unread; align-self: center; height: 44px; margin: 16px 0 12px 16px; padding: 0 14px; gap: 8px;
    border: 1px dashed var(--border-strong); background: transparent; color: var(--text-muted); font: 600 14px/1 var(--font-sans);
  }
  #panel-chats .chat-unread-chip.ui-chip::before {
    content: ''; width: 14px; height: 14px; flex-shrink: 0; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%;
  }
  #panel-chats .chat-unread-chip.ui-chip[aria-pressed="true"] { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-text); }
  #panel-chats .chat-unread-chip.ui-chip[aria-pressed="true"]::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-soft); }
  #panel-chats .chat-unread-chip.ui-chip::after { inset: 8px auto 8px calc(100% + 6px); width: 1px; background: var(--border); }
  #panel-chats .chat-unread-n { min-width: 20px; height: 20px; padding: 0 6px; font: 700 11.5px/20px var(--font-sans); }

  /* Píldoras de etapa: 44 px; activa = --text con texto --bg; contador redondo. */
  #panel-chats .chat-tabs { grid-area: tabs; align-self: center; gap: 8px; padding: 16px 16px 12px 12px; border-bottom: 0; scroll-padding-inline: 12px; }
  #panel-chats .chat-tab.ui-chip {
    height: 44px; padding: 0 16px; gap: 8px; border-color: var(--border); background: var(--surface); color: var(--text);
    font: 600 14px/1 var(--font-sans);
  }
  #panel-chats .chat-tab.ui-chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }
  #panel-chats .chat-tab.ui-chip::after { display: none; }
  #panel-chats .chat-tab-dot { display: none; }
  #panel-chats .chat-tab-n { min-width: 20px; height: 20px; padding: 0 6px; background: var(--border); color: var(--text-muted); font: 700 11.5px/20px var(--font-sans); }
  #panel-chats .chat-tab[aria-pressed="true"] .chat-tab-n { background: var(--surface); color: var(--text); }

  #panel-chats .chat-push { grid-area: push; margin: 0 12px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }

  /* Lista: tarjetas con 8 px entre sí; abajo, lugar para la barra inferior. */
  body.chats-on #panel-chats .chat-list {
    grid-area: list; min-height: 0; display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto; overscroll-behavior: contain; padding: 2px 12px calc(116px + env(safe-area-inset-bottom));
  }
  #panel-chats .chat-list-empty-text { font-size: 13.5px; }
}

/* Tarjeta de conversación (solo mobile). */
#panel-chats .chat-card {
  display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0; width: 100%; box-sizing: border-box; margin: 0; padding: 14px;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text);
  font: 400 14px/1.45 var(--font-sans); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#panel-chats button.chat-card:active { background: var(--surface-2); }
#panel-chats .chat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-card .chat-av { width: 46px; height: 46px; font-size: 15px; }
.chat-av-ch {
  position: absolute; right: -3px; bottom: -3px; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--surface); border-radius: 50%; background: var(--mc-wa); color: var(--on-accent);
}
.chat-av-ch svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.chat-card-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.chat-card-l1, .chat-card-l3 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-card-name, .chat-card-sub, .chat-card-pv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-card-name { flex: 1; font: 600 15px/1.3 var(--font-sans); color: var(--text); }
.chat-card-time { flex-shrink: 0; font: 500 12.5px/1.3 var(--font-sans); color: var(--text-muted); }
.chat-card-sub { font-size: 13px; line-height: 1.35; color: var(--text-muted); }
.chat-card-l3 { margin-top: 2px; }
.chat-card-pv { flex: 1; font-size: 13.5px; line-height: 1.4; color: var(--text-muted); }
.chat-card-by { font-weight: 600; }
.chat-card-unread {
  flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font: 700 12px/22px var(--font-sans); text-align: center;
}
.chat-card--unread .chat-card-name { font-weight: 700; }
.chat-card--unread .chat-card-time { font-weight: 700; color: var(--accent-text); }
.chat-card--unread .chat-card-pv { color: var(--text); }
.chat-card-chips { display: flex; gap: 6px; min-width: 0; margin-top: 8px; } /* una línea: la etapa se corta con … */

/* Chips: estado (Para vos · Bot respondiendo · Esperando respuesta) y etapa (solo en Todos). */
.chat-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding: 0 9px; box-sizing: border-box;
  border-radius: 999px; font: 600 12px/1 var(--font-sans); white-space: nowrap;
}
.chat-chip svg { width: 11px; height: 11px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chat-chip--you { background: var(--warn-bg); color: var(--warn); }
.chat-chip--you::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--mc-amber); }
.chat-chip--bot { background: var(--accent-soft); color: var(--accent-text); }
.chat-chip--bot svg { fill: currentColor; stroke: none; }
.chat-chip--wait { background: var(--bg); color: var(--text-muted); }
.chat-chip { flex-shrink: 0; }
.chat-chip--stage { flex-shrink: 1; min-width: 0; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-weight: 500; }

/* Cargando: tarjetas esqueleto. */
#panel-chats .chat-card--skel { cursor: default; }
.chat-skel { display: block; height: 14px; margin: 3px 0; border-radius: 6px; background: var(--surface-3); animation: chat-skel 1.2s ease-in-out infinite alternate; }
.chat-skel--av { flex-shrink: 0; width: 46px; height: 46px; margin: 0; border-radius: 50%; }
.chat-skel--sm { height: 12px; }
.chat-skel--chip { width: 82px; height: 24px; margin: 0; border-radius: 999px; }
@keyframes chat-skel { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .chat-skel { animation: none; } }

/* Clientes · mobile: los 3 KPIs entran en 390 px (el monto no se sale de su tarjeta). */
@media (max-width: 767px) {
  #cli-kpis { gap: 8px; }
  #cli-kpis .rpt-kpi-card { min-width: 0; padding: 12px 10px; }
  #cli-kpis .rpt-kpi-label { font-size: 10px; letter-spacing: .3px; }
  #cli-kpis .rpt-kpi-val { font-size: 20px; overflow-wrap: anywhere; }
}

/* ── Secuencias en mobile: una columna que no se estira al ancho mínimo del contenido de la card desplegada
   (se salía de la pantalla). ── */
@media (max-width: 767px) {
  .seq-grid { grid-template-columns: minmax(0, 1fr); }
  /* Filtros de la card desplegada: el menú se ubica respecto de la fila (no del botón), así el de la derecha no se sale. */
  .seq-flt-row-dd { position: relative; }
  .seq-flt-row-dd .seq-flt-dd { position: static; }
  .seq-flt-row-dd .seq-flt-dd-menu { max-width: 100%; }
}

/* ── Empresas · vista Lista en mobile: la tabla scrollea adentro de su contenedor en vez de salirse de la pantalla. ── */
@media (max-width: 767px) {
  #comp-list:has(> .comp-list-table) { overflow-x: auto; }
}