/* ===== bloque 1 (era <style> inline #1) ===== */
/* [v209 · 21 may] killswitch worker REMOVIDO porque el modal #bb-session-expired-modal
 * fue BORRADO completo del HTML (líneas 10467+). El handler v201 EMPTY-12 era la causa
 * raíz · ahora vive solo como comentario placeholder. Worker confirmó OK eliminar
 * killswitch cuando MAC removiera el modal. Coordinado vía BITACORA_CHAT.md. */
/* =========================================================================
   BIGBUDA HQ · CRM v3
   - Cards limpias estilo captura 1 (score box · pills neutralizados · 3 acciones inferiores)
   - Sección Copiloto IA estilo captura 2 (banner azul/violeta sutil · items con score)
   - Sidebar consolidado (Ajustes incluye permisos/integraciones)
   - Pipeline mini header con underline negro neutro
   - Chat copiloto lateral (no FAB flotante random)
   ========================================================================= */

:root{
  --sidebar-w:240px;
  --sidebar-w-collapsed:56px;
  --header-h:56px;
  --radius-sm:4px !important;
  --radius-md:4px !important;
  --radius-lg:4px !important;
  --shadow-elev-1:0 1px 0 0 rgba(0,0,0,.02), 0 1px 3px rgba(0,0,0,.04);
  --shadow-elev-2:0 1px 0 0 rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.06);
  --shadow-elev-3:0 8px 24px -8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-modal:0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
  --t-hover:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);
  --ring-brand:0 0 0 3px var(--brand-tint);
  --hot-text:#B91C1C;
  --warm-text:#B45309;
  --cold-text:var(--cold);
  --success-text:#047857;
  --warning-text:#92400E;
  --danger-text:var(--danger);
  --info-text:#1D4ED8;
  /* [Marcel 14 may FINAL · regla 7EE · spring physics Apple/Stripe/Linear FLUIDAS]
     Easings naturales que reemplazan los "duros" ease-in-out / cubic-bezier Material
     Marcel 14 may: "las animaciones se sienten duras, poco fluidas, poco modernas y elegantes"
     Inspiración: Framer Motion spring · Apple HIG · Stripe motion · Linear app */
  --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-circ:cubic-bezier(0, 0.55, 0.45, 1);
  --ease-spring-soft:cubic-bezier(0.5, 1.4, 0.5, 1);
  --ease-spring-snappy:cubic-bezier(0.45, 1.6, 0.55, 1);
  /* Duraciones más generosas · feel premium · no apuradas */
  --dur-fast:180ms;
  --dur-medium:320ms;
  --dur-slow:520ms;
  --dur-extra-slow:880ms;
  /* [Marcel 16 may · regla 7CP · tokens animación Claude Design replicados]
     Marcel verbatim: "me gusta más la animación del menú que hizo Claude Design, que la
     que tienes tu, se siente más natural, sobre todo al abrir y cerrar".
     Tokens del HTML Claude Design (Desktop/Bigbuda HQ Dashboard.html):
     - duration-base 220ms (vs 380ms actual · 40% más rápido natural)
     - ease-emphasis cubic-bezier(0.32, 0.72, 0, 1) (Apple iOS · vs 0.83/0/0.17/1 mecánico) */
  --duration-fast:120ms;
  --duration-base:220ms;
  --duration-slow:320ms;
  --ease-emphasis:cubic-bezier(0.32, 0.72, 0, 1);
  --ease-standard:cubic-bezier(0.4, 0, 0.2, 1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-md);line-height:1.5;-webkit-font-smoothing:antialiased;}
button,input{font-family:inherit;font-size:inherit;}
a{color:inherit;text-decoration:none;}

/* ============== LAYOUT ============== */
/* [Marcel 14 may FINAL · regla 7EF · sidebar collapse/expand cinemático]
   Marcel verbatim: "apertura/cierre menú principal · brusco · debería ser cinemático tipo Stripe/Linear"
   Fix: width 360ms spring · contenido del sidebar fade-in con stagger · feel premium. */
/* [18may · Marcel "el hueco muerto se mantiene" · screenshot recuadro rojo]
   CAUSA RAÍZ: transicionar grid-template-columns interpola `var(--sidebar-w) 1fr`
   ↔ `var(--sidebar-w-collapsed) 1fr`. Si ese frame se congela (tab en bg / rAF
   throttled / transición interrumpida / swap regla base→!important a mitad) el
   track queda pegado en 240px mientras .sb ya mide 56px → 184px de hueco muerto.
   En carga fría daba 56px 1744px OK; el bug era SOLO al togglear en vivo.
   FIX de mecanismo: SIN transición en el track. La sidebar ya se anima sola con
   `.sb{transition:width 380ms}` (l.98) — eso da el deslizamiento suave. El grid
   salta instantáneo 240↔56 (imperceptible, .sb glida encima) y NUNCA puede
   congelarse: solo existen 2 valores, jamás un frame intermedio. Fluido a todo
   viewport por construcción, cero parche por breakpoint. */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;}
.app[data-sidebar="collapsed"]{grid-template-columns:var(--sidebar-w-collapsed) 1fr;}
.main{display:flex;flex-direction:column;min-width:0;}
/* [Marcel 11 may LATE · fix regresión grid layout] .sb position:fixed sale del grid flow ·
   .main quedaba en col 1 (240px) detrás del sidebar · restaurar grid-column:2 explícito · v3 fiel */
.app > main.main{grid-column:2 / -1;min-width:0;}
.stage{padding:var(--space-8) var(--space-10) var(--space-16);max-width:1680px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-8);}
@media(min-width:1920px){.stage{max-width:1840px;}}

/* ============== SIDEBAR ============== */
/* [Marcel 11 may 21:00 · BUG sidebar fixed] · sticky se desliza con el scroll cuando el body crece · Marcel reportó "al scroll se queda abajo".
   Fix: position:fixed desktop ≥1025px · siempre visible · main compensa con margin-left.
   Mobile <1025px ya usa drawer fixed (líneas 411-415 + 1807) · NO se rompe. */
.sb{position:sticky;top:0;height:100vh;height:100dvh;background:var(--bg-card);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;z-index:100;transition:width 380ms cubic-bezier(0.83, 0, 0.17, 1);}
.sb__brand-text,.sb__online,.sb__item-lbl,.sb__idea-lbl,.sb__session-info,.sb__session-chev{transition:opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 80ms;}
.app[data-sidebar="collapsed"] .sb__brand-text,.app[data-sidebar="collapsed"] .sb__online,.app[data-sidebar="collapsed"] .sb__item-lbl,.app[data-sidebar="collapsed"] .sb__idea-lbl,.app[data-sidebar="collapsed"] .sb__session-info,.app[data-sidebar="collapsed"] .sb__session-chev{opacity:0;transition-delay:0ms;}
.app[data-sidebar="collapsed"] .sb{width:var(--sidebar-w-collapsed);}
/* [P0-MENU-ANIM · Marcel 14 may] Brand header con padding-vertical FIJO · evita salto vertical al colapsar
   Antes: padding-top/bottom mismos en ambos estados PERO horizontal cambiaba (var(--space-3) → 0)
   sin transition · causaba "salto" visible. Fix: transition padding + min-height fijo. */
.sb__brand{display:flex;align-items:center;gap:10px;padding:var(--space-4) var(--space-3) var(--space-3);min-height:60px;transition:padding var(--duration-base) var(--ease-out), justify-content var(--duration-base) var(--ease-out);}
/* [Marcel 11 may LATE · logo Claude Design aprobado] Fondo slate-900 #0f172a + "b" amarilla #fde047
   Consistente con favicon (tab del browser) + login.html. Idéntico al bundle Claude Design Login. */
.sb__logo{width:28px;height:28px;border-radius:4px;background:transparent;color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;}
.sb__logo svg{width:100%;height:100%;display:block;}
/* [Marcel 15 may · regla 7AZ · dark mode logo] El SVG ya lleva su propio rect fondo
   con rx=96 (~18%) que no coincide con border-radius:6px del contenedor (~21%).
   Si fondo del contenedor ≠ transparente, asoma un borde blanco/oscuro alrededor.
   Solución definitiva: contenedor transparente · el SVG decide su propio color. */
[data-theme="dark"] .sb__logo{background:transparent;color:#0f172a;}
.sb__name{font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:var(--ls-snug);white-space:nowrap;}
.sb__sub{font-size:11px;color:var(--text-muted);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.sb__pulse{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(16,185,129,.4);animation:sb-pulse 2.5s ease-in-out infinite;flex:0 0 auto;}
@keyframes sb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.0);}50%{box-shadow:0 0 0 4px rgba(16,185,129,.18);}}
.sb__brand-text{flex:1;min-width:0;overflow:hidden;}
.sb__toggle{margin-left:auto;flex:0 0 auto;}
.sb__online{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4) var(--space-3);font-size:var(--text-sm);color:var(--text-muted);white-space:nowrap;overflow:hidden;}
/* [Marcel 13 may LATE · v3 fiel] Dot verde inline en sb__online · reemplaza sb__system-status duplicado */
/* [Marcel · 2026-05-20] "el punto verde del menú se va, no lo pedí". El ::after era un anillo
 * que pulsaba con sb-status-pulse 2s (expandía a scale(1.8) opacity:0), dando sensación de que
 * el dot desaparecía/parpadeaba. Removido · dot 100% estático y siempre visible. */
/* [Marcel 20 may v222] punto verde sidebar OCULTO (Marcel: "no lo pedí") */
.sb__online-dot{display:none !important;}
.sb__online-dot::after{display:none !important;}
/* [Marcel 9 may · Agente F · F-3] Sidebar conectados · opacity por estado online · 3 dots overlap MGA */
.sb__online .av-row{display:flex;align-items:center;}
.sb__online .av-row .av{margin-left:-6px;border:1.5px solid var(--bg-card);transition:opacity var(--t-hover);}
.sb__online .av-row .av:first-child{margin-left:0;}
.sb__online .av-row .av[data-online="false"]{opacity:0.4;}
.sb__online .av-row .av[data-online="true"]{opacity:1;}
.sb__group{padding:var(--space-2) var(--space-2) 0;}
.sb__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
/* [Marcel 14 may FINAL · regla 7EF · sidebar hover cinemático Stripe/Linear]
   Marcel verbatim: "hover sidebar items cambio de color INSTANT · debería ser suave"
   Fix: background-color/color 220ms ease + padding-left slide 180ms cubic-bezier · línea acento aparece izquierda al hover. */
/* [Marcel 14 may LATE-NIGHT FINAL · regla 7EG · sidebar items 100/100 consistente]
   Estructura: posición/box-model idéntica para TODOS los items · cero diferencias entre CRM/Diseño/Desarrollo/Soporte/Reportes
   Hover: bg + color + ::before slide-in (transition específicas · NO `all`) · sin padding-left shift (era brusco)
   Active: ::before persistente · bg-elevated · font-weight semibold
   Will-change: transform/opacity solo en estados activos para GPU compositing */
.sb__item{position:relative;display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;overflow:hidden;transition:background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);text-decoration:none;}
.sb__item::before{content:"";position:absolute;left:0;top:50%;width:2px;height:0;background:var(--brand);border-radius:0 2px 2px 0;transform:translateY(-50%) translateZ(0);transition:height 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0;pointer-events:none;will-change:height, opacity;}
.sb__item:hover::before{height:18px;opacity:0.7;}
.sb__item[aria-current="page"]::before,.sb__item.active::before{height:20px;opacity:1;}
.sb__item:hover{background:var(--bg-elevated);color:var(--text-primary);}
.sb__item:hover .kbd{opacity:1;}
.sb__item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
.sb__item .kbd{margin-left:auto;opacity:0;transition:opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);flex:0 0 auto;}
.sb__item svg{width:16px;height:16px;color:var(--text-muted);flex:0 0 auto;transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1);}
/* [T2-2 · MAC pedido · Marcel 25 may "todo a medio camino" · stubs honestos]
   Módulos próximamente Q3 2026 · visualmente diferenciados · cursor not-allowed · opacity sutil
   pero NO completamente apagados (mantienen presencia para roadmap). */
.sb__item--soon{opacity:.62;cursor:not-allowed;}
.sb__item--soon:hover{background:var(--bg-elevated)!important;color:var(--text-muted)!important;}
.sb__item--soon svg{color:var(--text-tertiary);}
.sb__item-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;padding:1px 7px;border-radius:999px;background:var(--bg-elevated);border:1px solid var(--border-subtle);font-size:9.5px;font-weight:600;letter-spacing:.05em;color:var(--text-muted);text-transform:uppercase;}
.sb__item--soon:hover .sb__item-badge{background:var(--bg-card);}
.sb__item:hover svg{color:var(--text-primary);}
.sb__item-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.sb__item[aria-current="page"],.sb__item.active{background:var(--bg-elevated);color:var(--text-primary);font-weight:var(--weight-semibold);}
.sb__item[aria-current="page"] svg,.sb__item.active svg{color:var(--brand);}
.sb__spacer{flex:1;}
/* [17may · worker→mac · Marcel VERSIÓN FINAL] Feriados = ícono isla en el top bar
   junto a la campana → popup estilo notif con la LISTA de próximos feriados
   (fechas reales Santiago · n=5 · cero invención) + mensaje. Responsive (legible
   en móvil). v3 tokens · solo transition, net-safe (sin animation). */
.holpop{position:fixed;top:calc(var(--header-h) + 6px);right:var(--space-5);width:min(320px, calc(100vw - 24px));max-height:min(480px, calc(100vh - 80px));background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);z-index:var(--z-popover);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);display:flex;flex-direction:column;overflow:hidden;}
.holpop[data-open="true"]{opacity:1;transform:none;pointer-events:auto;}
.holpop__head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);}
.holpop__head svg{width:15px;height:15px;flex:0 0 auto;color:var(--brand);}
.holpop__title{font-size:var(--text-md);font-weight:var(--weight-semibold);}
.holpop__list{list-style:none;margin:0;padding:4px 0;overflow-y:auto;flex:1;}
.holpop__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border-subtle);}
.holpop__list li:last-child{border-bottom:0;}
.holpop__main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.holpop__d{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);text-transform:capitalize;}
.holpop__n{font-size:var(--text-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.holpop__in{font-size:10px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:var(--ls-wider);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;}
.holpop__msg{padding:12px 16px;border-top:1px solid var(--border-subtle);background:color-mix(in oklch, var(--brand) 6%, var(--bg-card));color:var(--text-secondary);font-size:var(--text-xs);line-height:1.45;}
@media (max-width:900px){ .holpop{right:12px;left:12px;width:auto;} }
/* [18may · REVERTIDO · Marcel "¿dónde está mi icono de vacaciones? · estás
   rompiendo cosas que estaban bien"] Se había ocultado #holidays-open/.holpop
   por un requisito previo de "quitar lista de fechas"; Marcel lo quiere de
   vuelta. RESTAURADO (icono + popup feriados visibles como antes). El ajuste
   "solo mensaje" NO se vuelve a tocar sin pedido explícito y literal de Marcel. */
/* [17may · Marcel "el mensaje morado lindo del menú izq me gustaba · intégralo
   MEJOR, no lo borres"] Aviso finde/feriado en el sidebar (data.message del
   worker · solo aparece si hay mensaje). Look morado-marca integrado, v3 tokens,
   net-safe. Convive con el popup de feriados (son cosas distintas). */
/* [Marcel · 2026-05-20 mobile] "la caluga me encanta, pero un poco más abajo, más ajustada,
 * está muy pegada a Ajustes". Margen-top mayor para separar de Ajustes, padding compacto,
 * font line-height más apretado. */
/* v307 · Marcel 23 may: 'está muy pegado' (banner morado pegado a 'Posicionamiento web').
   ANTES: margin-top var(--space-5) ~20px · insuficiente respiro sobre el último sb__item.
   AHORA: margin-top var(--space-6) ~24px + padding interno 10/12 más generoso. */
.sb__notice{margin:var(--space-6) var(--space-3) var(--space-3);padding:10px 12px;border-radius:var(--radius-md);background:linear-gradient(180deg, color-mix(in oklch, var(--brand) 13%, var(--bg-card)), color-mix(in oklch, var(--brand) 7%, var(--bg-card)));border:1px solid color-mix(in oklch, var(--brand) 22%, transparent);display:flex;gap:8px;align-items:flex-start;}
/* [18may · Marcel "si hoy no es feriado ni finde, para qué quiero el adorno
   morado vacío"] BUG: #sb-notice nace con atributo HTML `hidden` y el JS solo
   lo muestra cuando hay data.message (finde/feriado). Pero `.sb__notice{display:
   flex}` (regla autor, arriba) le gana al `[hidden]{display:none}` del UA →
   la caja morada se renderiza vacía igual en día hábil. Honramos el atributo:
   `hidden` (o texto vacío) = NO ocupa espacio. !important para ganarle también
   a los overrides de estado colapsado/responsive (l.191/8233/8274). */
.sb__notice[hidden],.sb__notice:not(:has(.sb__notice-txt:not(:empty))){display:none !important;}
/* [Marcel 22 may v299 · REVERT] bloque feriado/finde RESTAURADO en sidebar.
   Marcel verbatim: 'por que se borro el cuadro morado del menu lateral que deseaba
   feliz fin de semana o feriado? hoy es viernes 10:31 comenzo el fin de semana'.
   La regla v222 (display:none) se eliminó · vuelve a mostrar el aviso morado
   cuando worker devuelve data.message (finde/feriado o ventana operativa). */
.sb__notice svg{width:15px;height:15px;flex:0 0 auto;color:var(--brand);margin-top:1px;}
.sb__notice-txt{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.5;}
.app[data-sidebar="collapsed"] .sb__notice{display:none !important;}
.app[data-sidebar="collapsed"] .sb__notice-txt{display:none;}
/* [v188 · Marcel "el compartir idea no me gusta ahí · ícono ? al lado de notifs"]
   Idea button del sidebar OCULTO · funcionalidad migrada a #header-idea (header).
   Sidebar más limpio · cero footer noise. */
.sb__idea{display:none !important;}
/* Quitar doble borde · sb__spacer ya no separa nada (idea button hidden) */
.sb__spacer{border-bottom:0 !important;}
/* Único dot verde · suprime pulse halo (Marcel "no quiero dos círculos verdes") */
.sb__online-dot::after{display:none !important;}
/* divisor que ancla el footer (Idea + cuenta) · deja de "flotar" */
.sb__spacer + .sb__idea{margin-top:10px;border-top:0;position:relative;}
.sb__spacer{border-bottom:1px solid var(--border-subtle);margin:0 0 10px;flex:1 1 auto;min-height:12px;}
.sb__idea svg{flex:0 0 auto;}
.sb__idea-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
/* [v335 · Marcel 24 may screenshot mobile · 'el menu en mobil es demasiado largo,
   porque nunca se ve completo en pantallas de menos alto · la parte donde sale el
   nombre del usuario al bottom del menu, no se ve en mobil · fue reportado muchas
   veces tmb'] Fix raíz: .sb__session sticky bottom · margin-top:auto pega al final
   del flex column · background card sólido para no superponer · ALWAYS visible aunque
   el sidebar haga scroll (height limited). Aplica TODOS los breakpoints (desktop +
   mobile). */
.sb__session{padding:17px 8px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:8px;cursor:pointer;transition:var(--t-hover);margin-top:auto;position:sticky;bottom:0;background:var(--bg-card);z-index:5;}
.sb__session:hover{background:var(--bg-elevated);}
/* ════════════════════════════════════════════════════════════════════════
   [19may · Marcel "el menú desktop AÚN se ve lleno y saturado de
   información"] Declutter DESKTOP conservador · solo espaciado/tipografía ·
   sin quitar secciones (esencia intacta) · reversible · selector .sb (gana
   por orden+especificidad sin !important · NO pisa el bloque mobile ≤900
   que usa .app !important). Calma vertical + estados secundarios atenuados
   + notice más liviano + "Idea" integrada (no texto flotante). 7AA: solo
   refinamiento visual autorizado explícito por Marcel. */
.sb .sb__brand{min-height:54px;padding-top:14px;padding-bottom:8px;}
.sb .sb__item{height:34px;}
.sb .sb__list{gap:0;}
.sb .sb__group{padding-top:0;}
.sb .sb__online{padding:0 var(--space-4) 8px;font-size:11px;}
.sb .sb__system-status{padding:3px 12px;font-size:10.5px;opacity:.72;}
/* v322 · Marcel insiste 4x: 'se sigue viendo pegado, no lo puedo creer'.
   Este selector .sb .sb__notice era el OVERRIDE silencioso · margin:8px ganaba
   contra el v319 (.sb__notice margin var(--space-12)). Forzar 48px top + 16px
   bottom con !important · cero ambigüedad. */
.sb .sb__notice{margin:48px var(--space-3) 16px !important;padding:12px 14px !important;background:var(--bg-elevated);border:1px solid var(--border-subtle);}
.sb .sb__notice svg{color:var(--text-muted);}
.sb .sb__notice-txt{font-size:11px;color:var(--text-secondary);line-height:1.45;}
/* .sb .sb__idea consolidado en regla base .sb__idea (v169) */
.sb .sb__session{padding:15px 8px;}
/* [19may · Marcel "no se ve terminado, pulido, 100% CRO/UX/UI · moderno, elegante, ordenado, limpio · se puede mejorar mucho"] Polish v172 — sin perder esencia: (1) `.sb__online` discreta (no duplica al pill de sesión abajo · solo señal sutil), (2) group-labels minimalistas (≤8.5px · espaciado micro), (3) brand compacto, (4) ítems con ritmo consistente, (5) bordes/colores unificados al token v3 · integrado al diseño. Reversible · 7AA-safe. */
/* [v176 · Marcel "se ve todo muy pegado"] · breathing room · cero apretado. */
.sb .sb__brand{min-height:54px;padding:14px 16px 4px;}
/* [SB · 2026-05-19] Presence integrada al logo · una sola línea visual debajo del brand
   sin ocupar bloque dedicado · texto 12px subtle · dot verde alineado a la derecha. */
.sb .sb__online{padding:2px 16px 14px;font-size:12px;color:var(--text-muted);opacity:.9;letter-spacing:0;gap:8px;}
.sb .sb__online .av-row .av{width:18px !important;height:18px !important;font-size:9px;}
/* Solo tú · cuando texto = "Solo tú" o presence vacía, hacer aún más sutil */
.sb .sb__online:has(span:not(.sb__online-dot):not(.av)){min-height:18px;}
.sb .sb__group{padding:0 8px;}
/* [SB · 2026-05-19] Headers premium · Linear/Stripe-grade
   11px · letter-spacing 0.04em · weight 600 · color tertiary · sin border-bottom.
   Spacing 24px entre secciones (top 20px header + 4px gap del list de arriba). */
.sb .sb__group-lbl{padding:20px 12px 6px !important;font-size:11px !important;font-weight:600 !important;letter-spacing:.04em !important;color:var(--text-tertiary) !important;opacity:.85 !important;}
.sb .sb__group:first-of-type .sb__group-lbl,
.sb .sb__list > .sb__group-lbl:first-child{padding-top:8px !important;}
.sb .sb__list{gap:3px;}
.sb .sb__item{height:36px;font-size:13.5px;padding:0 12px;border-radius:4px;}
.sb .sb__item svg{width:16px;height:16px;}
.sb .sb__item-active,
.sb .sb__item.is-active{background:var(--bg-tinted);color:var(--text-primary);font-weight:600;}
.sb .sb__notice{margin:6px 12px 0;padding:8px 11px;font-size:11px;border-radius:4px;}
.sb .sb__notice svg{width:14px;height:14px;}
.sb .sb__notice-txt{font-size:11px;line-height:1.45;}
/* Footer cohesivo final: idea + session se leen como UN bloque limpio */
.sb .sb__idea{height:32px;margin:8px 10px 6px;padding:0 12px;font-size:12.5px;border-radius:4px;}
/* [SB · 2026-05-19] Variant text-button · link discreto bajo el footer session
   sin border, sin background, sin padding box · solo texto + ícono ·
   Linear/Stripe/Notion-grade · hover sutil. */
.sb .sb__idea--text{height:auto;margin:6px 16px 12px;padding:6px 0;border:0;background:transparent;font-size:12px;font-weight:500;color:var(--text-muted);justify-content:flex-start;gap:7px;border-radius:0;}
.sb .sb__idea--text:hover{background:transparent;color:var(--text-primary);}
.sb .sb__idea--text svg{width:13px;height:13px;color:currentColor;opacity:.7;}
.sb .sb__idea--text:hover svg{opacity:1;}
.app[data-sidebar="collapsed"] .sb__idea--text{margin:6px 8px 12px;padding:6px;justify-content:center;}
.app[data-sidebar="collapsed"] .sb__idea--text .sb__idea-lbl{display:none;}
.sb .sb__idea svg{width:13px;height:13px;}
.sb .sb__session{padding:15px 10px;gap:9px;border-top:1px solid var(--border-subtle);}
.sb .sb__session-name{font-size:12.5px;font-weight:600;}
.sb .sb__session-mail{font-size:10.5px;}
.sb__session-info{flex:1;min-width:0;overflow:hidden;}
.sb__session-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb__session-mail{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb__session-chev{color:var(--text-muted);flex:0 0 auto;}
.sb__session-chev svg{width:14px;height:14px;}
/* [Marcel 15 may · regla 7BV] Botón "Cerrar sesión" directo en sidebar bottom · UX/CRO */
.sb__session-logout{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:var(--t-hover);}
.sb__session-logout svg{width:14px;height:14px;}
.sb__session-logout:hover{background:var(--danger-tint,rgba(239,68,68,0.08));color:var(--danger,#ef4444);border-color:var(--danger,#ef4444);}
.sb__session-logout:focus-visible{outline:2px solid var(--danger,#ef4444);outline-offset:2px;}
.app[data-sidebar="collapsed"] .sb__session-logout{display:none !important;}

/* Collapsed state */
.app[data-sidebar="collapsed"] .sb__brand-text,
.app[data-sidebar="collapsed"] .sb__online,
.app[data-sidebar="collapsed"] .sb__system-status,
.app[data-sidebar="collapsed"] .sb__item-lbl,
.app[data-sidebar="collapsed"] .sb__item .kbd,
.app[data-sidebar="collapsed"] .sb__idea-lbl,
.app[data-sidebar="collapsed"] .sb__session-info,
.app[data-sidebar="collapsed"] .sb__session-chev{display:none !important;}
/* [19may · Marcel/WORKER · sidebar colapsado roto] El sidebar agrupado
   (v149 _applySidebarGroups) inyecta cabeceras <li class="sb__group-lbl">
   con texto (VENTAS/OPERACIÓN/…). En estado colapsado no estaban ocultas →
   se veían como texto suelto/cortado entre los iconos. Ocultarlas en
   colapsado · los iconos quedan centrados (regla .sb__item ya existente). */
.app[data-sidebar="collapsed"] .sb__group-lbl{display:none !important;}
.app[data-sidebar="collapsed"] .sb__list{display:flex;flex-direction:column;align-items:center;gap:2px;}
.app[data-sidebar="collapsed"] .sb__brand{justify-content:center;padding:var(--space-4) 0 var(--space-3);}
.app[data-sidebar="collapsed"] .sb__brand .sb__toggle{display:none;}
.app[data-sidebar="collapsed"] .sb__group{padding:var(--space-2) 6px 0;}
.app[data-sidebar="collapsed"] .sb__item{justify-content:center;padding:0;width:42px;margin:0 auto;}
.app[data-sidebar="collapsed"] .sb__idea{justify-content:center;padding:0;margin:var(--space-3) auto;width:42px;}
.app[data-sidebar="collapsed"] .sb__session{justify-content:center;padding:8px 0;}

/* Tooltip on collapsed items */
.app[data-sidebar="collapsed"] .sb__item:hover::after,
.app[data-sidebar="collapsed"] .sb__idea:hover::after,
.app[data-sidebar="collapsed"] .sb__session:hover::after{
  content:attr(data-tooltip);position:absolute;left:calc(var(--sidebar-w-collapsed) + 4px);top:50%;transform:translateY(-50%);
  padding:4px 8px;background:var(--text-primary);color:#fff;font-size:11px;white-space:nowrap;border-radius:var(--radius-sm);z-index:var(--z-popover);pointer-events:none;
}

/* Floating sidebar toggle when collapsed */
.sb-expand{display:none !important;}
.app[data-sidebar="collapsed"] .sb-expand{display:inline-flex !important;margin-right:6px;}
/* Mobile · botón hamburguesa siempre visible para abrir drawer (<640px) */
@media (max-width:640px){
  .sb-expand{display:inline-flex !important;margin-right:6px;}
}

/* Pipeline popover */
.pipe-pop{position:fixed;width:440px;max-height:520px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-modal);z-index:var(--z-popover);display:flex;flex-direction:column;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--duration-fast),transform var(--duration-fast);}
.pipe-pop[data-open="true"]{opacity:1;transform:none;pointer-events:auto;}
.pipe-pop__head{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border-subtle);}
.pipe-pop__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);}
.pipe-pop__sub{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-top:2px;}
.pipe-pop__close{margin-left:auto;}
.pipe-pop__list{overflow-y:auto;padding:6px;}
.pipe-pop__item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:transparent;border:0;border-radius:var(--radius-sm);text-align:left;cursor:pointer;transition:var(--t-hover);}
.pipe-pop__item:hover{background:var(--bg-elevated);}
.pipe-pop__score{flex:0 0 auto;width:32px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;border:1px solid;}
.pipe-pop__score--hot{background:var(--hot-soft);color:var(--hot-text);border-color:var(--hot-border);}
.pipe-pop__score--warm{background:var(--warm-soft);color:var(--warm-text);border-color:var(--warm-border);}
.pipe-pop__score--cold{background:var(--cold-soft);color:var(--cold-text);border-color:var(--cold-border);}
.pipe-pop__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.pipe-pop__name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pipe-pop__meta{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pipe-pop__amt{flex:0 0 auto;font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--text-primary);}
.pipe-pop__foot{padding:10px 14px;border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end;}

/* Account menu (avatar dropdown) */
/* [Marcel 12 may · fix E42] Avatar dropdown · portal lógico al body con z-index alto.
   Bug: el contenido se truncaba ("r foto" en vez de "Cambiar foto") porque algún
   ancestor con overflow:hidden lo cortaba. Fix: position:fixed (ya estaba) +
   min-width:288px + max-width 92vw + z-index 99999 para superar cualquier stacking
   context (sidebar, header, modales). */
/* [Marcel 16 may · regla 7CJ · scroll + Cerrar sesión visible siempre]
   ANTES overflow:hidden sin max-height → con 12+ items el item final "Cerrar sesión"
   quedaba cortado fuera del fold y NO accesible para el usuario.
   Fix: max-height calc(100vh - 80px) + overflow-y:auto. Cerrar sesión SIEMPRE accesible
   via scroll del popup. Plus, el .acct__sec final (Cerrar sesión) tiene position sticky
   con background card para mantenerse pegado al fondo del popup. */
/* [17may Marcel · UX] menú cuenta ANCLADO y CONTENIDO en la columna del sidebar (left:8 ya alinea con el avatar; width 232 = 8→240 = ancho exacto del sidebar) → cero sangrado al contenido, se lee como parte del sidebar (Linear/Notion). Mantiene clamp móvil + sombra v3 */
.acct{position:fixed !important;left:8px;bottom:72px;top:auto;width:232px;min-width:232px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 88px);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-modal);z-index:var(--z-popover);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;}
/* [Marcel 16 may · regla 7DT · "Cerrar sesión no se alcanza a leer nunca"]
   ANTES: position:sticky + margin-top:auto juntos en contenedor flex con overflow-y:auto
   → el sticky NO funciona (la auto-margin lo empuja fuera del área visible al scrollear)
   → "Cerrar sesión" (último ítem) quedaba cortado contra el borde inferior.
   FIX: sin margin-top:auto · sticky bottom:0 puro + padding inferior para que el ítem
   quede separado del borde y siempre legible/clickeable dentro del scroll del menú. */
.acct .acct__sec:last-child{position:sticky;bottom:0;background:var(--bg-card);border-top:1px solid var(--border-subtle);padding-bottom:6px;z-index:1;}
.acct[data-open="true"]{opacity:1;transform:none;pointer-events:auto;}
/* [19may · Marcel screenshots · #5 "dropdown duplica avatar Marcel"] El menú
   .acct abre anclado JUSTO encima del pill #acct-trigger, que repite el MISMO
   avatar+nombre+email → se ve duplicado (3 avatares apilados con el presence).
   Fix net-safe: mientras el dropdown está abierto, el pill ancla se atenúa
   (NO se oculta · cero layout shift · reversible) → el menú es lo activo, deja
   de leerse como tarjeta duplicada. CSS aditivo · 0 markup v3 (7AA-safe). */
body:has(.acct[data-open="true"]) #acct-trigger{opacity:.32;transition:opacity var(--duration-base,180ms) var(--ease-out,ease);}
body:has(.acct[data-open="true"]) #acct-trigger .av{visibility:hidden;}
/* Garantizar que el botón "Cambiar foto" NO se trunca */
.acct__head-change{flex-shrink:0 !important;white-space:nowrap !important;}
.acct__head{padding:14px 14px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:10px;}
.acct__head-info{min-width:0;flex:1;}
.acct__head-change{flex-shrink:0;height:28px;padding:0 10px;font-size:11px;font-weight:var(--weight-medium);color:var(--text-secondary);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:var(--t-hover);}
.acct__head-change:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border);}
.acct__head-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);}
.acct__head-mail{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;}
/* [17may Marcel] Menú cuenta anclado/contenido en el sidebar (232px): el
   botón "Cambiar foto" baja a su propia línea full-width → avatar + nombre +
   email respiran y NO se aprietan. Estilo v3 del botón intacto. */
.acct__head{flex-wrap:wrap;}
.acct__head-change{flex:0 0 100%;width:100%;margin-top:10px;display:flex;align-items:center;justify-content:center;}
/* [Marcel 30 may · bug B reportado por opus 14:19] · Header de cuenta truncado
   en móvil: "marcel@bigb..." porque .acct__head-mail tenía overflow:hidden +
   text-overflow:ellipsis SIEMPRE. Fix móvil: el email puede hacer wrap a 2
   líneas con font-size menor (10.5px) y break controlado · botón "Cambiar foto"
   queda intacto en flex 100% width (regla previa). Aditivo · regla 7AA-safe. */
@media (max-width: 600px) {
  .acct__head-mail {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.3;
    font-size: 10.5px;
  }
  .acct__head-name {
    line-height: 1.25;
  }
}
/* [Marcel 30 may · bug A reportado por opus 14:19] · Avatar duplicado/orphan
   en sidebar móvil. Cuando el sidebar se colapsa en móvil queda el avatar M
   del .sb__session footer flotando bottom-left sin contexto (el nombre+email
   se ocultan con .sb__session-info opacity:0 pero el .av sigue visible).
   Fix: en móvil con sidebar colapsado, todo el footer del sidebar se desvanece
   también (el dropdown .acct vive como elemento independiente ya). Aditivo. */
@media (max-width: 900px) {
  .app[data-sidebar="collapsed"] .sb__session {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Refuerzo de la regla 417 (visibility:hidden) con display:none cuando el
     dropdown .acct está abierto en móvil · evita reserva de espacio que pueda
     leerse como avatar fantasma adicional. */
  body:has(.acct[data-open="true"]) #acct-trigger .av {
    display: none !important;
  }
}
.acct__sec{padding:6px;}
.acct__sec + .acct__sec{border-top:1px solid var(--border-subtle);}
.acct__item{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:var(--text-sm);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;transition:var(--t-hover);}
.acct__item:hover{background:var(--bg-elevated);}
.acct__item svg{width:14px;height:14px;color:var(--text-muted);flex:0 0 auto;}
.acct__item .kbd{margin-left:auto;}
.acct__item--danger{color:var(--danger);}
.acct__item--danger svg{color:var(--danger);}
/* [19may · Marcel UX · contrato WORKER] Quitar la "marca negra fea" al
   tocar/enfocar items del menú (sidebar + dropdown cuenta + Cerrar sesión):
   tap-highlight negro de móvil + cualquier fondo/marker negro en :active.
   El feedback es el hover sutil del sistema (bg-elevated), nunca negro. */
.sb__item, .acct__item, .acct__item--danger, .sb__session, .acct__head-change,
.sb__item *, .acct__item * {
  -webkit-tap-highlight-color: transparent;
}
.sb__item:active, .acct__item:active, .acct__item--danger:active,
.sb__session:active, .acct__head-change:active {
  background: var(--bg-elevated);
}
.sb__item:focus-visible, .acct__item:focus-visible,
.acct__item--danger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.acct__item::marker, .sb__item::marker { content: ""; }

/* ============== HEADER ============== */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb, var(--bg-card) 85%, transparent);backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);border-bottom:1px solid var(--border-subtle);}
/* [Marcel 11 may LATE 4] Header alineado al contenido (.stage tiene max-width 1680px centrado)
   Antes: .hdr__row sin max-width · en pantallas anchas se "desproporcionaba" el icono theme
   y el breadcrumb "CRM" vs el contenido. Ahora wraps con max-width + auto margin igual que .stage. */
.hdr__row{height:var(--header-h);display:flex;align-items:center;gap:var(--space-5);padding:0 var(--space-10);max-width:1680px;width:100%;margin:0 auto;}
.hdr__bc{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-md);color:var(--text-muted);}
.hdr__bc strong{color:var(--text-primary);font-weight:var(--weight-semibold);}
.hdr__bc svg{width:12px;height:12px;}
.hdr__spacer{flex:1;}
.hdr__cluster{display:flex;align-items:center;gap:var(--space-3);}
.hdr__cluster .now{margin-right:var(--space-2);}
/* [v328 · Marcel 23 may screenshot · 'no se ve simétrica ni optimizada']
   Quitado collapse -2px entre icon-btn--lg adyacentes · ahora todas las acciones
   del cluster comparten el mismo gap (var(--space-3)=12px) del padre flex.
   Resultado: simetría visual perfecta · cero squish entre Feriados/Idea/Notif.
   Los separadores visuales ::before en #copilot-open y #theme-toggle se mantienen
   (línea vertical sutil) marcando grupos sin romper espaciado uniforme. */
.hdr__cluster .av{margin-left:var(--space-2);}
/* ════════════════════════════════════════════════════════════════════════
   [v183 · P1 au-5 · audit 19may] Header agrupación lógica con separadores
   sutiles · 4 grupos: now · búsqueda(cmdk+activity) · acciones(copilot+holidays
   +notif) · personalización(theme+avatar). Mejora escaneo · evita "tira pareja
   sin jerarquía". Solo CSS aditivo · cero markup change · 7AA-safe.
   ════════════════════════════════════════════════════════════════════════ */
/* v305 · Marcel 23 may: '¿no tiene padding proporcional?' · icon-btn cluster.
   v328 · Marcel 23 may screenshot: 'no se ve optimizada ni simétrica' · QUITADO
   margin-left:12px porque rompía simetría vs Feriados/Idea/Notif que tienen
   gap parent normal · ahora TODOS los icon-btn del cluster comparten exactamente
   el mismo gap 12px del padre flex. El separador vertical ::before se mantiene
   sin desplazar (left:-6px lo posiciona en el mid del gap del padre). */
.hdr__cluster #copilot-open,
.hdr__cluster #theme-toggle{
  position:relative;
}
.hdr__cluster #copilot-open::before,
.hdr__cluster #theme-toggle::before{
  content:"";
  position:absolute;
  left:-6px;
  top:50%;
  width:1px;
  height:18px;
  background:var(--border-subtle);
  transform:translateY(-50%);
  pointer-events:none;
}
@media (max-width:900px){
  .hdr__cluster #copilot-open::before,
  .hdr__cluster #theme-toggle::before{display:none;}
}
/* Notif badge · respeta v3 canónico · dot pequeño 6×6 negro con borde blanco · sin número visible · sin rojo agresivo */
.icon-btn--badge{position:relative;}
.icon-btn--badge::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:transparent;border:0;transition:opacity 200ms ease,transform 200ms ease;opacity:0;}
.icon-btn--badge.has-alert::after{background:var(--text-primary,#0A0A0A);border:1.5px solid var(--bg-card,#FFFFFF);opacity:1;}
[data-theme="dark"] .icon-btn--badge.has-alert::after{background:#FFFFFF;border-color:var(--bg-card,#1B1B1B);}
@media (prefers-reduced-motion:no-preference){
  .icon-btn--badge.has-alert::after{animation:notif-dot-pulse 2.5s ease-in-out infinite;}
  @keyframes notif-dot-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
}

/* Command palette overlay */
.cmdk{position:fixed;inset:0;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity var(--duration-base);z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;}
.cmdk[data-open="true"]{opacity:1;pointer-events:auto;}
.cmdk__panel{width:min(620px,92vw);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);overflow:hidden;transform:translateY(-8px);transition:transform var(--duration-base) var(--ease-out);}
.cmdk[data-open="true"] .cmdk__panel{transform:none;}
.cmdk__input-wrap{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-subtle);}
.cmdk__input-wrap svg{width:16px;height:16px;color:var(--text-muted);}
.cmdk__input{flex:1;border:0;outline:0;background:transparent;font-size:var(--text-md);color:var(--text-primary);}
.cmdk__list{max-height:360px;overflow-y:auto;padding:6px;}
.cmdk__group-lbl{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);padding:8px 12px 4px;}
.cmdk__item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm);color:var(--text-primary);}
.cmdk__item:hover,.cmdk__item:focus-visible{background:var(--bg-elevated);}
.cmdk__item svg{width:14px;height:14px;color:var(--text-muted);}
.cmdk__item-meta{margin-left:auto;font-size:11px;color:var(--text-muted);}

/* Notifications popover */
.notif{position:fixed;top:calc(var(--header-h) + 6px);right:var(--space-5);width:380px;max-height:520px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);z-index:var(--z-popover);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);display:flex;flex-direction:column;overflow:hidden;}
.notif[data-open="true"]{opacity:1;transform:none;pointer-events:auto;}
.notif__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle);}
.notif__title{font-size:var(--text-md);font-weight:var(--weight-semibold);}
/* [Marcel 21 may v264 · P0 notif bg gris + texto cortado] bg explícito blanco · lista con bg-card · items con bg transparent (heredan card · cero gris fantasma) */
.notif__list{overflow-y:auto;flex:1;background:var(--bg-card);}
.notif__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);align-items:flex-start;cursor:pointer;transition:background var(--duration-fast);min-height:56px;background:transparent;}
.notif__item:last-child{border-bottom:0;}
.notif__item:hover{background:color-mix(in srgb,var(--bg-elevated) 50%,transparent);}
.notif__dot{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--text-primary);flex-shrink:0;}
.notif__item--read .notif__dot{background:var(--text-tertiary);}
/* [Marcel 21 may v264 · P0 texto cortado] min-width:0 + word-break + overflow-wrap permiten que el texto del medio se contraiga sin romper grid */
.notif__txt{font-size:var(--text-sm);color:var(--text-primary);line-height:1.45;min-width:0;word-break:break-word;overflow-wrap:anywhere;}
.notif__txt strong{font-weight:var(--weight-semibold);}
.notif__when{font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:var(--ls-wider);flex-shrink:0;white-space:nowrap;}
.notif__foot{padding:10px 16px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;}
/* [Notif rich · v200/v203 RESTORE] preview + sentiment + CTA inline */
.notif__preview{font-size:12px;color:var(--text-secondary);margin-top:4px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.notif__meta-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
.notif__sentiment{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:0.02em;}
.notif__sentiment--positive{background:rgba(16,185,129,.12);color:var(--success,#10B981);}
.notif__sentiment--neutral{background:var(--bg-elevated);color:var(--text-secondary);}
.notif__sentiment--negative{background:rgba(239,68,68,.12);color:var(--danger,#EF4444);}
.notif__sentiment--urgent{background:rgba(245,158,11,.14);color:#92400E;}
.notif__cta{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:var(--weight-medium);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:3px;cursor:pointer;color:var(--text-primary);transition:background var(--duration-fast),border-color var(--duration-fast);}
.notif__cta:hover{background:var(--bg-elevated);border-color:var(--border);}
.notif__cta--primary{background:var(--text-primary);color:var(--bg-card);border-color:var(--text-primary);}
.notif__cta--primary:hover{background:#000;border-color:#000;}

.copilot-trigger{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:4px;cursor:pointer;transition:var(--t-hover);}
.copilot-trigger:hover{background:var(--bg-tinted);border-color:var(--border);}
.copilot-trigger__icon{width:16px;height:16px;border-radius:4px;background:var(--text-primary);display:flex;align-items:center;justify-content:center;color:#fff;}
.copilot-trigger__icon svg{width:10px;height:10px;}
.now{display:inline-flex;align-items:center;height:32px;gap:8px;padding:0 12px;font-size:13px;color:var(--text-secondary);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-snug);position:relative;cursor:pointer;border-radius:4px;transition:background var(--duration-fast);}
.now:hover,.now:focus-visible{background:var(--bg-elevated);outline:none;}
.now:focus-visible{box-shadow:0 0 0 2px var(--brand,#6366F1);}
.now__date{text-transform:capitalize;}
.now__sep{color:var(--text-tertiary);opacity:.5;}
.now__time{font-weight:var(--weight-semibold);color:var(--text-primary);}
/* [CRO-04 P1 · 20 may v190] dropdown abre con hover, click o Enter/Space (keyboard accesible) */
.now__dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:280px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:4px;box-shadow:var(--shadow-elev-2);padding:10px 0;font-size:12px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--duration-base,180ms) var(--ease-out,ease),transform var(--duration-base,180ms) var(--ease-out,ease);z-index:1000;}
.now:hover .now__dropdown,.now[data-open="true"] .now__dropdown{opacity:1;transform:translateY(0);pointer-events:auto;}
.now__dropdown-head{padding:8px 14px 6px;font-size:11px;font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--ls-wider);color:var(--text-tertiary);border-bottom:1px solid var(--border-subtle);}
.now__dropdown-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;color:var(--text-secondary);}
.now__dropdown-name{font-weight:var(--weight-medium);color:var(--text-primary);}
.now__dropdown-foot{padding:6px 14px 4px;font-size:11px;color:var(--text-tertiary);border-top:1px solid var(--border-subtle);margin-top:6px;}
.now__pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:var(--weight-medium);background:var(--bg-elevated);color:var(--text-muted);}
.now__pill[data-status="ok"]{background:rgba(16,185,129,.12);color:var(--success,#10B981);}
.now__pill[data-status="warn"]{background:rgba(245,158,11,.12);color:var(--warning,#F59E0B);}
.now__pill[data-status="error"]{background:rgba(239,68,68,.12);color:var(--danger,#EF4444);}
@media (prefers-reduced-motion:reduce){.now__dropdown{transition:none;}}
.copilot-trigger__count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;font-size:10px;font-weight:var(--weight-bold);color:#fff;background:var(--text-primary);border-radius:8px;}

/* PIPELINE mini */
.pipeline{display:flex;align-items:stretch;gap:0;padding:0 var(--space-10);border-top:1px solid var(--border-subtle);background:transparent;overflow-x:auto;scrollbar-width:none;}
.pipeline::-webkit-scrollbar{display:none;}
.pipeline__step{flex:1;min-width:120px;display:flex;flex-direction:column;gap:2px;padding:14px var(--space-4);border:0;border-right:1px solid var(--border-subtle);background:transparent;color:inherit;text-align:left;cursor:pointer;position:relative;transition:background var(--duration-fast);}
.pipeline__step:last-child{border-right:0;}
.pipeline__step:hover{background:var(--bg-elevated);}
.pipeline__lbl{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);}
.pipeline__lbl-dot{width:5px;height:5px;border-radius:50%;background:var(--text-tertiary);opacity:.6;}
.pipeline__count{font-size:22px;font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-snug);line-height:1.1;color:var(--text-primary);}
.pipeline__amt{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.pipeline__step[aria-pressed="true"] .pipeline__lbl{color:var(--text-primary);}
/* ============== PIPELINE FUNNEL (header sticky) — DEPRECATED ahora vive embebido ============== */
.pipeline{display:none;}

/* ============== PIPELINE EMBEDDED · 7 estados accionables como filtro ============== */
.pipe-embed{display:grid;grid-template-columns:repeat(7,1fr);gap:0;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--space-3);box-shadow:var(--shadow-elev-1);}
.pipe-embed__step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;background:transparent;border:0;border-right:1px solid var(--border-subtle);color:inherit;cursor:pointer;text-align:left;font:inherit;transition:background var(--duration-fast);}
.pipe-embed__step:last-child{border-right:0;}
.pipe-embed__step:hover{background:var(--bg-elevated);}
.pipe-embed__lbl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:var(--weight-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);} /* [Marcel 12 may] +1px font · color secondary (más contraste que muted) · gap 6px */
.pipe-embed__dot{width:5px;height:5px;border-radius:50%;background:var(--text-tertiary);opacity:.55;}
.pipe-embed__count{font-size:18px;font-weight:var(--weight-bold);color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.1;}
.pipe-embed__amt{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.pipe-embed__step[aria-pressed="true"]{background:var(--bg-elevated);}
.pipe-embed__step[aria-pressed="true"] .pipe-embed__lbl{color:var(--text-primary);}
.pipe-embed__step[aria-pressed="true"] .pipe-embed__dot{background:var(--brand);opacity:1;}
.pipe-embed__step[aria-pressed="true"]::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--text-primary);}
/* [v184 · au-12] pipe-embed responsive smoother · evita layout shift abrupto tablet portrait */
@media(max-width:1280px){.pipe-embed{grid-template-columns:repeat(5,1fr);}.pipe-embed__step:nth-child(5){border-right:0;}.pipe-embed__step:nth-child(n+6){display:none;}}
@media(max-width:1100px){.pipe-embed{grid-template-columns:repeat(4,1fr);}.pipe-embed__step:nth-child(4){border-right:0;}.pipe-embed__step:nth-child(n+5){display:none;}}
@media(max-width:900px){.pipe-embed{grid-template-columns:repeat(3,1fr);}.pipe-embed__step:nth-child(3){border-right:0;}.pipe-embed__step:nth-child(n+4){display:none;}}
@media(max-width:680px){.pipe-embed{grid-template-columns:repeat(2,1fr);}.pipe-embed__step{border-right:1px solid var(--border-subtle)!important;}.pipe-embed__step:nth-child(2n){border-right:0!important;}.pipe-embed__step:nth-child(n+3){display:none;}}

/* ============== KPIS franja con jerarquía (primario / secundarios / terciario) ============== */
.kpis{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding:14px var(--space-5);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-elev-1);}
.kpi{display:inline-flex;align-items:baseline;gap:8px;padding:0 var(--space-5);border-right:1px solid var(--border-subtle);}
.kpi:first-child{padding-left:0;}
.kpi:last-child{border-right:0;padding-right:0;margin-left:auto;}
.kpi__lbl{font-size:11px;font-weight:var(--weight-medium);color:var(--text-muted);letter-spacing:0;text-transform:none;white-space:nowrap;}
.kpi__num{font-size:15px;font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-snug);color:var(--text-primary);white-space:nowrap;}
.kpi__delta{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-tertiary);white-space:nowrap;}
.kpi__delta--up{color:var(--success-text);font-weight:var(--weight-medium);}
/* [Marcel 6 may noche · auditoría v2 C2'] Hero dominante zona 1 · pipeline manda */
/* [v179 · P0 au-1 · auditoría 19may] Pipeline DOMINANTE 56px desktop · 2x sobre secundarios
   · jerarquía clara Stripe/Linear · cumple brief Bigbuda HQ "1 segundo qué tan grande es el negocio" */
.kpi--primary{background:transparent;padding-right:24px;border-right:1px solid var(--border-subtle);margin-right:8px;}
.kpi--primary .kpi__num{
  font-size:56px !important;
  font-weight:700 !important;
  letter-spacing:-0.04em !important;
  line-height:1 !important;
  color:var(--text-primary) !important;
}
.kpi--primary .kpi__lbl{font-weight:var(--weight-semibold);color:var(--text-primary);font-size:12px;}
.kpi--primary .kpi__delta{font-size:12px;color:var(--text-secondary);margin-top:4px;}

/* [Item Q · Marcel 25 may noche · Diseño debe respirar como CRM]
   Hero #diseno con jerarquía visual rica · texto largo en --primary se ajusta a 32px (no 56px porque
   "Selecciona" o nombre de proyecto pueden ser palabras largas) · score IA total mantiene 32px para
   peso numérico · padding generoso 20px vertical · banner siguientes con más aire entre cards. */
.kpis--diseno{padding:20px var(--space-5);}
.kpis--diseno .kpi--primary .kpi__num{
  font-size:32px !important;
  letter-spacing:-0.02em !important;
  line-height:1.15 !important;
  white-space:normal !important;
  max-width:280px;
}
.kpis--diseno .kpi__num{font-size:22px;letter-spacing:-0.015em;line-height:1.2;}
.kpis--diseno .kpi__num--score{font-size:32px;font-weight:700;letter-spacing:-0.02em;}
.kpis--diseno .kpi{padding:0 var(--space-6);}
.kpis--diseno .kpi:first-child{padding-left:var(--space-1);}
.kpis--diseno .kpi[data-kpi="actions"]{padding-right:var(--space-1);}
/* [Marcel 30 may noche v456 verbatim "posicionamiento web no esta bajo marketing"]
   Sub-item visual del sidebar · Posicionamiento web es servicio DENTRO de Marketing.
   Aplicado por JS (.sb__item--child) tras _applySidebarGroups · 100% aditivo. */
.sb__item.sb__item--child{padding-left:34px !important;position:relative;font-size:13px !important;color:var(--text-secondary) !important;}
.sb__item.sb__item--child::before{content:"";position:absolute;left:20px;top:50%;width:6px;height:6px;border-left:1.5px solid var(--border);border-bottom:1.5px solid var(--border);transform:translateY(-65%) rotate(-45deg);opacity:.7;}
.sb__item.sb__item--child > svg:first-of-type{display:none !important;}
.sb__item.sb__item--child .sb__item-lbl{font-weight:500 !important;}
.app[data-sidebar="collapsed"] .sb__item.sb__item--child{padding-left:0 !important;}
.app[data-sidebar="collapsed"] .sb__item.sb__item--child::before{display:none !important;}
.app[data-sidebar="collapsed"] .sb__item.sb__item--child > svg:first-of-type{display:inline-flex !important;}
.bb-view--diseno .banners{gap:var(--space-3);margin-top:var(--space-3);}
.bb-view--diseno .banner{border-radius:var(--radius-md);}
.bb-view--diseno .banner__head{padding:14px 18px;}
.bb-view--diseno .banner__list{padding:6px 0;}
/* [Marcel 30 may noche v451 verbatim "la seccion de diseño no respeta el mismo padding
   superior top que la seccion crm, por que no hay consistencia visual y funcional"]
   El brief generator se monta como contenido directo del pane Diseño · su appRoot
   tiene su propio padding interno pero el container .bb-view--diseno no respetaba
   el padding-top del .stage (--space-8). Aplicar padding consistente con CRM. */
.bb-view--diseno{padding-top:var(--space-8) !important;}
.bb-view--diseno > .app,
.bb-view--diseno #appRoot{padding-top:0 !important;}
/* [v463 · Marcel 31 may · "por que avaces cuando carga por primera vez la seccion de
   diseño por un segundo carga una vista antigua que ya no existe"]
   FLASH OF OLD CONTENT: la vista #diseno tiene 154 líneas de HTML legacy (HERO
   Proyecto activo/Selecciona/Empezando + sistema viejo Sprint 5 v323) que se
   renderiza ANTES que el Brief Generator se monte encima por JS. El usuario lo
   ve 1s como vista vieja, después se reemplaza. Fix: oculto el contenido hasta
   que el JS marque data-bridge-init="ready" en el container. Fallback CSS
   animation a 1.2s para que NUNCA quede vacío si el JS falla. */
.bb-view--diseno {
  position: relative;
}
.bb-view--diseno::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-page, var(--bg-card, #fff));
  z-index: 5;
  pointer-events: none;
  opacity: 1;
  animation: bb-diseno-reveal 0.25s ease 1.2s forwards;
}
.bb-view--diseno[data-bridge-init="ready"]::before {
  opacity: 0;
  transition: opacity 0.18s ease;
  animation: none;
}
@keyframes bb-diseno-reveal {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-view--diseno::before { animation-duration: 0.3s; }
}
@media (max-width:1280px){
  .kpis--diseno .kpi--primary .kpi__num{font-size:28px !important;}
  .kpis--diseno .kpi__num--score{font-size:28px;}
}
@media (max-width:900px){
  .kpis--diseno .kpi--primary .kpi__num{font-size:24px !important;}
  .kpis--diseno .kpi__num--score{font-size:24px;}
  .kpis--diseno{padding:14px var(--space-3);}
}

@media (max-width:1280px){
  .kpi--primary .kpi__num{font-size:44px !important;}
}
@media (max-width:900px){
  .kpi--primary .kpi__num{font-size:36px !important;}
  .kpi--primary{padding-right:16px;}
}
@media (max-width:640px){
  .kpi--primary .kpi__num{font-size:32px !important;}
  .kpi--primary{padding-right:12px;border-right:0;}
}

/* [Marcel 10 may · auditoría v3] KPIs con tooltip rico + drill-down clickable
   Patrón Stripe/Linear · KPI primary abre modal breakdown · tooltip pre-line con 3-4 líneas */
/* [Marcel 13 may LATE · regla 7AA] Tooltip KPI elegante · v3 fiel · sin "negro pesado"
   Card mini con border y shadow sutil · radius 4px estándar v3 · z-index alto. */
.kpi[data-tooltip]{position:relative;cursor:help;}
/* [Marcel 11 may 2026 LATE] Tooltip POSICIONADO ABAJO · evita corte por header sticky cuando KPI
   está al tope del viewport (caso "Ponderado real $58M" cortado). Flecha apunta hacia arriba. */
.kpi[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:auto;
  background:var(--text-primary,#0A0A0A);
  color:#fff;
  padding:8px 12px;
  border-radius:var(--radius-sm,4px);
  font-size:11px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.005em;
  white-space:pre-line;
  width:max-content;
  max-width:260px;
  min-width:0;
  opacity:0;
  pointer-events:none;
  transform:translateY(-2px);
  transition:opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index:200;
  text-align:left;
  box-shadow:0 8px 24px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.08);
}
.kpi[data-tooltip]::before{
  content:"";
  position:absolute;
  top:calc(100% + 4px);
  left:14px;
  border:6px solid transparent;
  border-bottom-color:var(--text-primary,#0A0A0A);
  border-top:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms;
  z-index:200;
}
.kpi[data-tooltip]:hover::after{opacity:1;transform:translateY(0);}
.kpi[data-tooltip]:hover::before{opacity:1;}
[data-theme="dark"] .kpi[data-tooltip]::after{
  background:#FAFAFA;
  color:#0A0A0A;
}
[data-theme="dark"] .kpi[data-tooltip]::before{
  border-bottom-color:#FAFAFA;
}
[data-theme="dark"] .kpi[data-tooltip]::before{
  border-bottom-color:rgba(241, 245, 249, 0.96);
}
.kpi--clickable{cursor:pointer;transition:background 150ms;}
.kpi--clickable:hover{background:var(--bg-elev1);}
@media(max-width:1100px){
  .kpis{padding:8px var(--space-3);gap:4px;}
  .kpi{padding:4px var(--space-3);}
  .kpi__delta{display:none;}
}
@media(max-width:720px){
  .kpis{overflow-x:auto;flex-wrap:nowrap;}
}

/* ============== BANNERS ============== */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.banner--full{grid-column:1 / -1;}
@media (max-width:980px){.banners{grid-template-columns:1fr;}}
.banner{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;min-height:0;box-shadow:var(--shadow-elev-1);}
.banner__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);flex-shrink:0;flex-wrap:nowrap;min-width:0;}
.banner__title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap;flex-shrink:0;}
.banner__title svg{width:14px;height:14px;color:var(--text-muted);flex-shrink:0;}
.banner__count{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted);font-variant-numeric:tabular-nums;margin-left:2px;}
.banner__head-r{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;white-space:nowrap;}
.banner__head-meta{font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.banner__list{display:flex;flex-direction:column;}
.banner__empty{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--bg-elev1,#FAFAFA);border-radius:4px;margin:0;text-align:left;}
.banner__empty-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);color:var(--text-tertiary,#9CA3AF);}
.banner__empty-icon svg{width:20px;height:20px;}
.banner__empty-body{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;text-align:left !important;min-width:0;}
.banner__empty-title{font-size:13px;font-weight:500;color:var(--text-secondary,#6B7280);margin:0;line-height:1.4;}
.banner__empty-desc{font-size:12px;color:var(--text-tertiary,#9CA3AF);margin:0;line-height:1.4;}
.banner .banner__empty,.banner .banner__empty *{text-align:left !important;}
@media (max-width:414px){.banner__empty{padding:12px 14px;gap:10px;}.banner__empty-icon{width:32px;height:32px;}.banner__empty-icon svg{width:18px;height:18px;}}
/* [EMPTY v198/v203 RESTORE] Reusable empty state · usar .empty-state en JS dinámico */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;gap:8px;}
.empty-state__icon{width:48px;height:48px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);margin-bottom:4px;}
.empty-state__icon svg{width:22px;height:22px;}
.empty-state__title{margin:0;font-size:13px;font-weight:var(--weight-semibold);color:var(--text-primary);}
.empty-state__desc{margin:0;font-size:12px;color:var(--text-secondary);max-width:320px;line-height:1.5;}
.empty-state__cta{margin-top:8px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-primary);font-size:12px;font-weight:var(--weight-medium);cursor:pointer;transition:background var(--duration-fast);}
.empty-state__cta:hover{background:var(--bg-elevated);}
.empty-state--small{padding:24px 16px;}
@media (max-width:414px){.empty-state{padding:32px 16px;}.empty-state__icon{width:40px;height:40px;}.empty-state__icon svg{width:18px;height:18px;}}
.notif__item--read .notif__txt{color:var(--text-muted);}

/* ═══════════════════════════════════════════════════════════
   SKELETON SHIMMER · regla 7I + Animation Hunter #1
   Reemplaza "Cargando…" por skeleton animado moderno (Linear/Stripe).
   Activado mientras el bridge hidrata · se reemplaza por contenido real.
   ═══════════════════════════════════════════════════════════ */
/* === CHARTS STRIP · v303 · Marcel 22 may noche · INTEGRADO al sistema de banners ·
   color PÚRPURA brand · modernos elegantes atractivos dinámicos === */
.charts-purple-strip{margin:0 0 16px;}
.chart-banner{display:flex;flex-direction:column;}
.chart-body{padding:16px 20px 8px;min-height:96px;display:flex;align-items:stretch;}
.chart-empty{display:flex;align-items:center;justify-content:center;height:96px;font-size:12px;color:var(--text-tertiary,#A3A3A3);font-style:italic;padding:14px 20px;}
.chart-insight{font-size:11.5px;color:var(--text-secondary,#525252);line-height:1.5;padding:10px 20px 14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border-subtle,#ECECEC);}
.chart-insight strong{color:var(--text-primary,#0A0A0A);font-weight:600;}
.chart-insight .chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:3px;background:var(--bg-elevated);font-size:10.5px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;}
.chart-insight .chip--ok{background:rgba(16,185,129,0.12);color:#059669;}
.chart-insight .chip--warn{background:rgba(245,158,11,0.12);color:#B45309;}
[data-theme="dark"] .chart-insight .chip{background:var(--bg-elevated);color:var(--text-secondary);}
[data-theme="dark"] .chart-insight{border-top-color:rgba(255,255,255,0.06);}
/* Bars verticales modernas púrpura · gradient + glow · stagger entrance */
.bb-bar-day{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0;}
.bb-bar-day__bar{width:65%;background:var(--text-primary);border-radius:4px 4px 0 0;min-height:3px;transition:height 540ms cubic-bezier(0.16,1,0.3,1),box-shadow 220ms ease;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.bb-bar-day__bar:hover{box-shadow:0 2px 8px rgba(0,0,0,0.14);}
.bb-bar-day__bar--today{background:linear-gradient(180deg,#6D28D9 0%,#4C1D95 100%);box-shadow:0 2px 6px rgba(76,29,149,0.35);}
.bb-bar-day__bar--zero{background:var(--bg-elevated,#F4F4F5);min-height:3px;box-shadow:none;opacity:0.6;}
.bb-bar-day__lbl{font-size:9.5px;color:var(--text-tertiary,#A3A3A3);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;font-variant-numeric:tabular-nums;line-height:1;}
.bb-bar-day__count{font-size:10px;color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums;line-height:1;min-height:11px;}
.bb-bars-row{display:flex;align-items:flex-end;gap:4px;height:96px;width:100%;padding-bottom:0;}
[data-theme="dark"] .bb-bar-day__bar{background:linear-gradient(180deg,#C084FC 0%,#9333EA 100%);box-shadow:0 1px 3px rgba(147,51,234,0.30);}
[data-theme="dark"] .bb-bar-day__bar--today{background:var(--text-primary);}
[data-theme="dark"] .bb-bar-day__bar--zero{background:rgba(255,255,255,0.04);}
[data-theme="dark"] .bb-bar-day__count{color:#C084FC;}
/* Horizontal bars (funnel) · gradient púrpura + animación grow */
.chart-funnel-row{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;padding:5px 0;font-size:11.5px;}
.chart-funnel-lbl{color:var(--text-secondary,#525252);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
.chart-funnel-track{height:8px;background:var(--bg-elevated,#F4F4F5);border-radius:4px;overflow:hidden;}
/* [v346 · Marcel 25 may 'se mueve todo el tiempo el gráfico, super molesto']
   Cero transition · width directo · sin grow animation repetitiva cada re-render. */
.chart-funnel-fill{height:100%;width:0%;background:var(--text-primary);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.08) inset;}
.chart-funnel-val{font-variant-numeric:tabular-nums;color:var(--text-primary,#0A0A0A);font-weight:600;text-align:right;min-width:70px;font-size:11.5px;}
[data-theme="dark"] .chart-funnel-track{background:rgba(255,255,255,0.06);}
[data-theme="dark"] .chart-funnel-fill{background:linear-gradient(90deg,#C084FC 0%,#9333EA 100%);}

.bb-skeleton-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border-subtle);}
.bb-skeleton-card:last-child{border-bottom:0;}
/* [Marcel 13 may · regla 7EH] Shimmer respiración lenta tipo Linear/Vercel · contraste reducido · sutil + elegante */
.bb-skeleton-line{height:12px;border-radius:4px;background:linear-gradient(90deg,#f3f4f6 0%,#f9fafb 50%,#f3f4f6 100%);background-size:200% 100%;animation:bb-shimmer 2.2s cubic-bezier(0.4,0,0.2,1) infinite;}
.bb-skeleton-line--title{width:55%;height:16px;}
.bb-skeleton-line--meta{width:30%;height:10px;}
.bb-skeleton-line--body{width:90%;height:12px;}
.bb-skeleton-kpi-num{display:inline-block;width:80px;height:24px;border-radius:4px;background:linear-gradient(90deg,#f3f4f6 0%,#f9fafb 50%,#f3f4f6 100%);background-size:200% 100%;animation:bb-shimmer 2.2s cubic-bezier(0.4,0,0.2,1) infinite;}
.bb-skeleton-kpi-delta{display:inline-block;width:60px;height:10px;border-radius:4px;background:linear-gradient(90deg,#f3f4f6 0%,#f9fafb 50%,#f3f4f6 100%);background-size:200% 100%;animation:bb-shimmer 2.2s cubic-bezier(0.4,0,0.2,1) infinite;}
/* [Marcel 12 may · fix E41] KPI hidratado · skeleton interno NO re-aparece tras filtros */
.kpi[data-hydrated="true"] .bb-skeleton-kpi-num,
.kpi[data-hydrated="true"] .bb-skeleton-kpi-delta{display:none !important;}
/* [Marcel 13 may · regla 7EH] respiración pulsante · opacity sincronizada al gradiente para sensación "IA pensando" */
@keyframes bb-shimmer{
  0%{background-position:200% 0;opacity:0.85;}
  50%{background-position:0% 0;opacity:1;}
  100%{background-position:-200% 0;opacity:0.85;}
}
[data-theme="dark"] .bb-skeleton-line,[data-theme="dark"] .bb-skeleton-kpi-num,[data-theme="dark"] .bb-skeleton-kpi-delta{background:linear-gradient(90deg,#1f1f23 0%,#26262d 50%,#1f1f23 100%);background-size:200% 100%;}
@media (prefers-reduced-motion:reduce){.bb-skeleton-line,.bb-skeleton-kpi-num,.bb-skeleton-kpi-delta{animation:none;background:#f3f4f6;opacity:1;}[data-theme="dark"] .bb-skeleton-line,[data-theme="dark"] .bb-skeleton-kpi-num,[data-theme="dark"] .bb-skeleton-kpi-delta{background:#1f1f23;}}

/* ═══════════════════════════════════════════════════════════
   [Marcel 13 may · regla 7EH] FADE-IN suave skeleton → contenido real
   Aplicar `.bb-content-fading-in` al elemento que reemplaza al skeleton.
   Stagger con `--idx` para cascada elegante (no todas a la vez).
   ═══════════════════════════════════════════════════════════ */
.bb-content-fading-in{
  animation:bb-fade-in 380ms cubic-bezier(0.4,0,0.2,1) forwards;
  animation-delay:calc(var(--idx, 0) * 40ms);
  opacity:0;
  will-change:opacity,transform;
}
@keyframes bb-fade-in{
  0%{opacity:0;transform:translateY(4px);}
  100%{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .bb-content-fading-in{animation:none;opacity:1;transform:none;}
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE MODERNO · centrado · jerarquía clara
   ═══════════════════════════════════════════════════════════ */
.bb-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 32px;text-align:center;color:var(--text-secondary,#525252);}
.bb-empty-state__icon{font-size:48px;margin-bottom:16px;opacity:0.4;line-height:1;}
.bb-empty-state h3{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--text-primary,#0A0A0A);letter-spacing:-0.01em;}
.bb-empty-state p{margin:0 0 12px;max-width:480px;line-height:1.6;font-size:14px;}
.bb-empty-state small{font-size:12px;color:var(--text-muted,#737373);}
/* [BUG-CRO-17 P2 · v212 sweep] empty state mobile · 80px desperdiciaba 30% viewport */
@media (max-width:640px){
  .bb-empty-state{padding:40px 16px;}
  .bb-empty-state__icon{font-size:36px;margin-bottom:10px;}
  .bb-empty-state h3{font-size:16px;}
  .bb-empty-state p{font-size:13px;line-height:1.5;}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BÁSICO · sin romper diseño desktop
   - Tablet 768-1024: sidebar colapsa · banners stack
   - Mobile <768: stack vertical · header compact
   - Sin cambiar tipografía ni colores · solo layout
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .banners { grid-template-columns: 1fr 1fr !important; }
  .kpis { flex-wrap: wrap; gap: 0; }
  .kpis .kpi { padding: 8px 12px; }
}
/* [Marcel 8 may] Wide screens · max-width contenido principal */
/* [Marcel 12 may 19:10 · regla 7BK · contenido centrado · no escapar márgenes]
   Stage debe centrarse SIEMPRE en pantallas >=1024px (no solo 1280px) con
   padding lateral consistente. Marcel: "para que todo visualmente se vea más
   centrado, ordenado y no escape de los márgenes del resto de la información". */
/* [Marcel 13 may 03:05 · regla 7CF · alineación HEADER ↔ STAGE perfecta]
   Marcel: "donde parte CRM y donde termina arriba en el menu el icono de luna, todo
   debe cuadrar para abajo de forma alineada y ajustada responsivamente al resto del
   contenido sin tanta distancia".
   FIX: Header (.hdr__row) y Stage (.stage) deben tener IDÉNTICO max-width + padding
   lateral en cada breakpoint. Centrado vertical perfecto · cero shift entre header
   y contenido. */
/* [Marcel 13 may 20:40 · regla 7CF REVERTIDA · "no pedi cambiar el diseño de la barra
   superior del menu, solo que siempre este alineada cuando inicia y cuando termina al
   contenido de abajo cuando inicia y termina, el diseño estaba bien antes"]
   FIX FINAL: el .hdr se queda como estaba originalmente (full-width, sticky, sin
   max-width ni background modificado). SOLO el .hdr__row (contenido interno) usa
   el mismo max-width que .stage de abajo · así los iconos del header (luna · campana ·
   búsqueda) quedan alineados con donde empieza/termina el contenido. Header NO cambia
   de diseño · solo se asegura la simetría del contenido interno. */
@media (min-width: 1024px) {
  .stage { max-width: 1400px !important; margin: 0 auto !important; padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .hdr__row { max-width: 1400px !important; margin: 0 auto !important; padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
}
@media (min-width: 1440px) {
  .stage { max-width: 1440px !important; padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
  .hdr__row { max-width: 1440px !important; padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
}
@media (min-width: 1680px) {
  .stage { max-width: 1480px !important; padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
  .hdr__row { max-width: 1480px !important; padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
}
@media (min-width: 1920px) {
  .stage { max-width: 1520px !important; }
  .hdr__row { max-width: 1520px !important; }
}
/* [Marcel 8 may] Mobile <640px · banners scroll horizontal */
@media (max-width: 640px) {
  .banner--full .banner__item{grid-template-columns:1fr !important;row-gap:6px !important;}
  .banner--full .banner__list{overflow-x:hidden;overflow-y:visible;}
  /* [v407 · Marcel 27 may 21:50 "no funciona scroll mobile Propuestas por armar"]
     .banner outer tenía overflow:hidden · cards extras quedaban cortadas. Móvil necesita
     overflow visible para que page scroll capture toda la lista. */
  .banner{overflow:visible !important;min-height:auto !important;}
  .banner__list{max-height:none !important;overflow:visible !important;}
  /* KPIs stack 1 col en mobile pequeño */
  .kpis{display:flex !important;flex-direction:column !important;}
  .kpi{flex:1 1 100% !important;border-bottom:1px solid var(--border-subtle) !important;border-right:0 !important;}
  .kpi:last-child{border-bottom:0 !important;}
}
/* [Marcel 8 may polish · item 6] Defensa pixel-perfect entre 720-1024px:
   modal focus respeta 90vw · modal armar/idea no se desborda · banner_list scrollable */
@media (max-width: 1100px) and (min-width: 769px) {
  .focus-overlay { padding: 24px !important; }
  .focus-modal, #focus-overlay > .focus-card { max-width: 90vw !important; max-height: 90vh !important; overflow: auto !important; }
  .banner__list { overflow-x: hidden; }
}
/* [Marcel 8 may polish · item 6] Asegurar modal focus tiene scroll vertical interno
   también en desktop si el contenido excede viewport */
.focus-overlay .focus-card { max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; }
.focus-overlay .focus-card .focus-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* [Marcel 12 may madrugada · regla 7AI · sidebar SIEMPRE visible · cero hamburger]
   Tablet 768-1023px → sidebar 200px modo expandido visible
   Mobile <=767px → sidebar 56px modo iconos visible (data-sidebar="collapsed" CSS ya existe) */
@media (max-width: 1023px) {
  .app { grid-template-columns: 200px 1fr !important; }
  .sb {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    height: 100vh !important;
    width: 200px !important;
    transform: none !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column;
  }
  /* [Marcel 13 may · fix sidebar tablet · regla 7AA] · texto "Sistema activo · sincronizando" no cabe en 200px → ocultar */
  .app .sb__system-status { display: none !important; }
  /* Compactar tipografía + ellipsis defensivo en labels largos */
  .app .sb__item { font-size: 13px !important; height: 32px; padding: 0 8px; }
  .app .sb__item-lbl,
  .app .sb__idea-lbl,
  .app .sb__session-name,
  .app .sb__session-mail { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .app .sb__idea { font-size: 12px !important; padding: 0 8px; }
  .app .sb__name { font-size: 13px !important; }
  .app .sb__sub { font-size: 10px !important; }
  .app .sb__online { font-size: 11px !important; padding: 0 12px var(--space-3); }
  .banners { grid-template-columns: 1fr !important; }
  .pipe-embed { flex-wrap: wrap; }
  .pipe-embed__step { min-width: 50%; flex: 1 1 50%; border-bottom: 1px solid var(--border-subtle); }
}
@media (max-width: 767px) {
  /* Sidebar SIEMPRE visible · modo iconos 56px · NO drawer · NO backdrop */
  .app { grid-template-columns: 56px 1fr !important; }
  .sb {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    height: 100vh !important;
    width: 56px !important;
    transform: none !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column;
  }
  /* Forzar collapsed visual · solo iconos · ocultar labels */
  .app .sb__brand-text,
  .app .sb__online,
  .app .sb__system-status,
  .app .sb__item-lbl,
  .app .sb__name,
  .app .sb__sub,
  .app .sb__item .kbd,
  .app .sb__idea-lbl,
  .app .sb__session-info,
  .app .sb__session-chev { display: none !important; }
  .app .sb__brand { justify-content: center; padding: var(--space-4, 12px) 0 var(--space-3, 8px); }
  .app .sb__group { padding: var(--space-2, 6px) 6px 0; }
  .app .sb__item {
    justify-content: center;
    padding: 0;
    width: 42px;
    margin: 0 auto;
    min-height: 44px;
  }
  .app .sb__idea {
    justify-content: center;
    padding: 0;
    margin: var(--space-3, 8px) auto;
    width: 42px;
    min-height: 44px;
  }
  .app .sb__session {
    /* [Marcel 26 may · mobile sidebar user section SIEMPRE visible · igual que desktop]
       En mobile el .sb tiene height:100vh + overflow-y:auto · si los items llenan
       100vh el .sb__session sticky bottom queda debajo del fold y nunca se ve.
       Fix: position fixed anclado a bottom viewport con ancho del sidebar (56px). */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 56px !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-right: 1px solid var(--border-subtle) !important;
    z-index: 101 !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    padding: 8px 0 !important;
    min-height: 56px !important;
    margin: 0 !important;
  }
  /* Reservar espacio al final del .sb para que el último item no quede oculto detrás del .sb__session fixed */
  .app .sb { padding-bottom: 60px !important; }
  .hdr { padding: 8px 12px; }
  .hdr__bc { font-size: 13px; }
  .stage { padding: 12px !important; }
  .kpis { padding: 8px; }
  .kpi { flex: 1 1 50%; padding: 6px 8px !important; border-right: 0 !important; }
  .kpi__num { font-size: 16px !important; }
  .banner__head { padding: 10px 12px; }
  .banner__item { padding: 10px 12px; }
  .banner__row1, .banner__row2, .banner__row3 { flex-wrap: wrap; gap: 6px; }
  .lead { padding: 0; }
  .lead__top, .lead__row { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
  .lead-meta { grid-template-columns: 1fr 1fr !important; }
  .lead__triage { grid-template-columns: 1fr !important; }
  .lead__triage button { border-right: 0; border-bottom: 1px solid var(--border-subtle); height: 38px; }
  .lead__triage button:last-child { border-bottom: 0; }
  .heat-tabs { flex-wrap: wrap; gap: 4px; }
  .pipe-embed__step { min-width: 100%; flex: 1 1 100%; border-right: 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .stream-tools { flex-wrap: wrap; gap: 6px; }
  .focus-modal, #focus-overlay > div { width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; }
  .bb-thread-expand .bb-thread-item { grid-template-columns: 36px 1fr !important; gap: 8px; padding: 10px 12px; }
}
@media (max-width: 480px) {
  .lead-meta { grid-template-columns: 1fr !important; }
  .kpi { flex: 1 1 100%; }
  .hdr__bc { font-size: 12px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hdr__right .hdr__time, .hdr__right .hdr__cmdk, .hdr__right .hdr__sync { display: none !important; }
  .stage { padding: 8px !important; gap: 12px !important; }
  .banner__head { padding: 8px 12px !important; }
  .banner__title { font-size: 13px !important; }
  .pipeline-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .stream-tools { font-size: 12px; }
  .focus-overlay { padding: 0 !important; }
  .focus-modal, .focus-overlay > * { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; max-width: 100vw !important; border-radius: 0 !important; }
  .focus-actions { padding: 12px !important; flex-wrap: wrap !important; gap: 6px; }
  .focus-actions button { flex: 1 1 calc(50% - 6px); min-width: 0; font-size: 12px !important; }
  /* Modal armar propuesta y feedback · full screen en mobile */
  .bb-arm-modal > div, .bb-idea-modal > div { width: 100vw !important; max-width: 100vw !important; min-height: 100vh !important; border-radius: 0 !important; padding: 16px !important; }
  /* Banners reuniones/propuestas: chips wrap */
  .banner__item { padding: 10px 12px !important; }
  .banner__row3 .btn { font-size: 11px !important; padding: 4px 8px !important; }
}
/* Marcel 7 may: avatar SOLO en sidebar abajo izquierda · ocultar el del header arriba derecha */
.hdr__cluster > .av,
.hdr__cluster > .av--md { display: none !important; }
/* Marcel 12 may madrugada · regla 7AI · pantallas <=640px · sidebar SIEMPRE visible 56px modo iconos */
@media (max-width: 640px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  .app {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    max-width: 100vw;
    min-height: 100vh;
  }
  .sb {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 56px !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 100 !important;
    box-shadow: none !important;
    border-right: 1px solid var(--border-subtle, #ECECEC) !important;
  }
  .main { width: 100%; max-width: calc(100vw - 56px); }
  .hdr { padding: 6px 10px !important; gap: 4px !important; }
  .hdr__row { flex-wrap: wrap; gap: 4px !important; }
  .hdr__bc { font-size: 11px !important; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hdr__cluster { gap: 2px !important; }
  .hdr__cluster .now, .hdr__cluster .now__date, .hdr__cluster .now__sep { display: none !important; }
  .hdr__cluster .now__time { display: inline !important; font-size: 11px; padding: 0 6px; }
  .icon-btn, .icon-btn--lg { width: 30px !important; height: 30px !important; }
  .icon-btn svg { width: 14px; height: 14px; }
  .stage { padding: 8px !important; gap: 12px !important; max-width: 100vw; }
  .banners { grid-template-columns: 1fr !important; gap: 12px; }
  .banner__head { padding: 10px 12px !important; }
  .banner__title { font-size: 13px !important; }
  .banner__item { padding: 10px 12px !important; }
  .banner__row1, .banner__row2, .banner__row3 { flex-wrap: wrap; gap: 4px; }
  /* [Marcel 11 may LATE 2] menos protagonista mobile también */
  .banner__name { font-size: 12px !important; font-weight: 500 !important; }
  .banner__open, .banner__act { font-size: 11px !important; padding: 6px 10px !important; height: 28px !important; }
  .pipe-embed { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .pipe-embed__step { border-right: 0 !important; padding: 6px 8px !important; }
  .pipe-embed__step .pipe-embed__count { font-size: 14px !important; }
  .pipe-embed__step .pipe-embed__lbl { font-size: 10px !important; }
  .heat-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .heat-tab { font-size: 11px !important; padding: 6px 10px !important; flex-shrink: 0; }
  .kpis { padding: 6px !important; flex-wrap: wrap; }
  .kpi { flex: 1 1 50% !important; padding: 6px 8px !important; border-right: 0 !important; }
  .kpi__num { font-size: 15px !important; }
  .kpi__lbl { font-size: 10px !important; }
  /* Stream cartera · cards full width sin scroll horizontal */
  .cartera { padding: 0 !important; }
  .lead { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .lead__top, .lead__row, .lead__foot { padding: 8px 12px !important; flex-wrap: wrap; gap: 4px; }
  .lead__head-row { flex-wrap: wrap; gap: 4px; }
  .lead__name { font-size: 13px !important; }
  .lead__email { font-size: 11px !important; }
  .lead-meta { grid-template-columns: 1fr 1fr !important; }
  .lead-meta__cell { padding: 6px 8px !important; }
  .lead__triage { grid-template-columns: 1fr 1fr 1fr !important; }
  .lead__triage button { font-size: 11px !important; padding: 6px !important; height: 32px !important; }
  /* [Marcel 26 may · mobile <=640px · sidebar user section SIEMPRE visible] · igual fix que <=767px */
  .sb__session {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 56px !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-right: 1px solid var(--border-subtle) !important;
    z-index: 101 !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    padding: 8px 0 !important;
    min-height: 56px !important;
    margin: 0 !important;
  }
  .sb { padding-bottom: 60px !important; }
  /* [Marcel 30 may noche · P0 URGENTE v449 · "me cambiaste el diseño sin permiso · siempre visible · lugar correcto · permanente"]
     Cuando el drawer mobile está ABIERTO (body.sb-open-v3 o body.sb-open) el menú usuario
     debe acomodarse al ANCHO DEL DRAWER (no quedar como mini-avatar 56px suelto bottom-left de la PANTALLA).
     Mostrar avatar + nombre + email + chevron · pegado al footer del drawer · siempre visible. */
  body.sb-open-v3 .sb__session,
  body.sb-open .sb__session {
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--border-subtle) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    min-height: 56px !important;
  }
  body.sb-open-v3 .sb__session-info,
  body.sb-open .sb__session-info {
    display: block !important;
    opacity: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  body.sb-open-v3 .sb__session-name,
  body.sb-open .sb__session-name {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.sb-open-v3 .sb__session-mail,
  body.sb-open .sb__session-mail {
    display: block !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.sb-open-v3 .sb__session-chev,
  body.sb-open .sb__session-chev {
    display: inline-flex !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    color: var(--text-tertiary) !important;
  }
  /* El sidebar drawer abierto debe ser relativo para anclar el .sb__session absolute */
  body.sb-open-v3 .sb,
  body.sb-open .sb { position: fixed !important; }
  /* Padding bottom dentro del nav para que el último item del menú no quede debajo del footer */
  body.sb-open-v3 .sb__group,
  body.sb-open .sb__group { padding-bottom: 72px !important; }
  /* [v460 · Marcel 30 may noche · "desaparecio del menu mobil, nunca se ve y deberia estar SIEMPRE"]
     SCREENSHOT: drawer abierto en iPhone · sidebar muestra VENTAS/OPERACIÓN/INTELIGENCIA
     pero el .sb__session (Marcel Acunis · marcel@bigbuda.com con chevron) NO se ve.
     Causa raíz: el `.sb__group` tiene scroll y los items llenan toda la altura del
     viewport · el `.sb__session` con position:absolute bottom:0 queda DEBAJO del scroll
     del .sb__group · invisible aunque CSS dice display:flex. Fix con MÁXIMA prioridad
     vs cualquier otra cascada: capa extra al final + z-index >> items + height fijo +
     visible siempre, no depende del scroll del .sb__group. */
  body.sb-open-v3 .sb__session,
  body.sb-open .sb__session {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(280px, 85vw) !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: 72px !important;
    padding: 12px 16px !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-right: 1px solid var(--border-subtle) !important;
    z-index: 200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
  body.sb-open-v3 .sb__session .av,
  body.sb-open .sb__session .av { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; opacity: 1 !important; visibility: visible !important; }
  body.sb-open-v3 .sb__session-info,
  body.sb-open .sb__session-info { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; }
  body.sb-open-v3 .sb__session-chev,
  body.sb-open .sb__session-chev { display: inline-flex !important; flex: 0 0 auto !important; opacity: 1 !important; visibility: visible !important; }
  /* Asegurar que el .sb__group respeta el espacio del footer (no se mete bajo el .sb__session) */
  body.sb-open-v3 .sb__group,
  body.sb-open .sb__group { padding-bottom: 80px !important; }
  /* Modales full screen */
  .focus-overlay { padding: 0 !important; }
  .focus-modal, .focus-overlay > * { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; }
  .bb-arm-modal > div, .bb-idea-modal > div { width: 100vw !important; max-width: 100vw !important; min-height: 100vh !important; border-radius: 0 !important; padding: 12px !important; }
  /* Acct dropdown · ajustar al viewport */
  /* [19may · Marcel "en mobil se ve muy grande"] El menú cuenta NO debe ocupar
     casi toda la pantalla · menú compacto anclado, no panel gigante. Net-safe.
     [21may · v259 · Marcel "menú perfil no scrolleable mobile · corta abajo"]
     - max-height usa safe-area-inset-bottom para tolerar iPhone notch
     - overscroll-behavior: contain evita rebote del body al scroll del dropdown
     - WebkitOverflowScrolling: touch (momentum scroll iOS legacy)
     - Tap targets 44px+ mínimo (regla 7AG · WCAG mobile)
     - sticky bottom sec NO debe robarle espacio si content < height · usa flex
       end alignment cuando overflow no aplica. */
  .acct {
    width: min(300px, calc(100vw - 24px)) !important;
    left: 12px !important;
    right: auto !important;
    max-height: min(82dvh, calc(100dvh - 88px - env(safe-area-inset-bottom, 0px))) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .acct__head { padding: 12px !important; }
  /* Tap targets 44px · WCAG · evita mis-taps mobile */
  .acct__item {
    padding: 11px 12px !important;
    min-height: 44px !important;
  }
  /* [13 jun · FIX iOS "todos los links se marean y llevan a cualquier lado"]
     El dropdown CERRADO (.acct sin data-open) está opacity:0 + pointer-events:none,
     PERO forzar pe:auto en los .acct__item hijos hacía que capturaran taps igual
     (spec CSS: un hijo con pointer-events:auto gana al padre con none). El menú
     invisible (300×645px) quedaba laid-out SOBRE el contenido y robaba cada tap →
     navegación a cualquier lado. Fix: los items solo capturan taps con el dropdown
     ABIERTO; cerrado = NADA capturable. El `> *` sigue dejando que el click burbujee
     a través del SVG/labels hacia el .acct__item (un solo target). */
  .acct[data-open="true"] .acct__item { pointer-events: auto !important; }
  .acct[data-open="true"] .acct__item > * { pointer-events: none !important; }
  .acct:not([data-open="true"]),
  .acct:not([data-open="true"]) * { pointer-events: none !important; }
  .acct__item svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
}
/* [19may · WORKER bus #12 · "popups mobile bloquean uso · X fuera del viewport ·
   no se cierran"] Modales ad-hoc creados por JS con cssText inline (Programar
   envío, Roadmap, Duemint, kickoff, reprogramar, seq-preview, etc.) no tenían
   guarda mobile → en pantalla chica el card desbordaba arriba/abajo y el botón
   cerrar quedaba fuera del viewport. Fix net-safe scoped: el overlay reduce
   padding y el card [role=dialog] cabe en viewport con scroll interno → cierre
   siempre alcanzable. NO toca .focus-modal/.focus-card (full-screen propio
   arriba · 7AA-safe). !important para ganarle al cssText inline. */
@media (max-width:640px){
  div[style*="position:fixed"][style*="inset:0"]:has(> [role="dialog"]){ padding:8px!important; }
  [role="dialog"]:not(.focus-modal):not(.focus-card):not(.lead-modal__inner){
    width:auto!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100vh - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}
/* Mobile fixes globales · Marcel 7 may "responsivo se ve roto" */
@media (max-width: 768px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  .app { max-width: 100vw; overflow-x: hidden; }
  .stage { max-width: 100vw; }
  .hdr { gap: 6px !important; }
  .hdr__brand .hdr__logo { display: none; }
  .hdr__right { gap: 4px !important; }
  .icon-btn { width: 32px !important; height: 32px !important; }
  .pipe-embed__step { padding: 8px 10px !important; }
  .heat-tab { font-size: 12px; padding: 6px 10px !important; }
  /* Cards stream: compact en mobile sin perder info */
  .lead__top { flex-wrap: wrap; }
  .lead__head-row { flex-wrap: wrap; row-gap: 4px; }
  .lead__name { font-size: 14px !important; }
  .lead__email { font-size: 11px !important; }
  .lead__amount { font-size: 14px !important; }
  /* Modal arm-proposal · scroll dentro */
  .bb-arm-modal > div { max-height: 92vh !important; overflow: auto; }
}
/* ════════════════════════════════════════════════════════════════════════
   [19may · Marcel "cambia en el mobil · no siempre se ve correcto · se ve
   muy grande" + screenshots 5/6] CAUSA RAÍZ: 3 sistemas peleando por
   breakpoints distintos (drawer JS ≤900 · CSS rail 56px ≤767 y ≤640 ·
   inline-transform vs !important) → el mismo celular saltaba entre drawer
   con labels y rail icon-only según ancho. DECISIÓN Marcel ("la forma que
   funcione mejor · 100/100 UX/UI/CRO · integrado a mi diseño · 1 solo
   comportamiento sin saltos"): UN drawer deslizable consistente 0–900px.
   Este bloque es AUTORITATIVO (último en orden + !important → gana a las
   reglas rail-56px previas), additivo, reversible, solo activo ≤900px ·
   desktop intacto · mecanismo JS del drawer SIN tocar (él maneja el
   transform open/close inline). 7AA-safe (cero markup/JS · solo CSS). */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .app { grid-template-columns: 1fr !important; }
  .app .sb, aside.sb {
    position: fixed !important; top: 0 !important; left: 0 !important;
    bottom: 0 !important; height: 100dvh !important; height: 100vh !important;
    width: min(286px, 84vw) !important; max-width: 86vw !important;
    z-index: 1200 !important; display: flex !important; flex-direction: column !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    background: var(--bg-card) !important;
    border-right: 1px solid var(--border-subtle) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.10) !important;
    transform: translateX(-100%); /* default cerrado · JS pone translateX(0)!important al abrir */
  }
  .app[data-sidebar="collapsed"] .sb { width: min(286px, 84vw) !important; }
  /* Drawer = labels SIEMPRE visibles (anula el rail icon-only previo) */
  .app .sb__brand { justify-content: flex-start !important; padding: 16px 16px 10px !important; min-height: 0 !important; }
  .app .sb__brand-text, .app .sb__session-info { display: block !important; opacity: 1 !important; }
  .app .sb__brand .sb__toggle { display: none !important; }
  .app .sb__online { display: flex !important; opacity: 1 !important; padding: 0 16px 10px !important; }
  .app .sb__group-lbl { display: block !important; opacity: 1 !important; }
  .app .sb__list { align-items: stretch !important; gap: 1px !important; }
  .app .sb__item { justify-content: flex-start !important; width: auto !important; margin: 0 !important; padding: 0 16px !important; height: 40px !important; min-height: 40px !important; }
  .app .sb__item-lbl, .app .sb__idea-lbl { display: inline !important; opacity: 1 !important; }
  .app .sb__item .kbd { display: none !important; }
  .app .sb__idea { justify-content: flex-start !important; width: auto !important; margin: 8px 12px !important; padding: 0 14px !important; }
  /* [v339 · Marcel 25 may screenshot mobile drawer · 'no se ve el menu completo
     vertical en mobil · lastima que no puedes arreglar todo de verdad'] FIX RAÍZ
     FINAL: position absolute bottom 0 dentro del .sb · GARANTIZA visible siempre.
     Sticky no funciona porque el .sb fue scrollable pero el navegador móvil podía
     cortar el final del viewport. Absolute resuelve definitivo. */
  .app .sb { padding-bottom: 76px !important; } /* deja espacio para footer absoluto */
  .app .sb__session {
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-subtle) !important;
    z-index: 10 !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04) !important;
  }
  .app .sb__session-info { opacity: 1 !important; }
  .app .sb__session-chev { display: inline-flex !important; opacity: 1 !important; }
  .app .sb__session-logout { display: inline-flex !important; }
  /* [11 jun · Marcel: "NO debería quedar oscuro al abrir el menú móvil"]
     Backdrop INVISIBLE: el drawer es menú, no popup (regla drawer-no-oscurece).
     Se mantiene el área táctil full-screen para cerrar con tap afuera + scroll-lock. */
  #bb-mobile-backdrop, [data-sb-backdrop-v3] {
    position: fixed !important; inset: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    z-index: 1199 !important; opacity: 0; pointer-events: none;
    transition: opacity 240ms ease !important;
  }
  body.sb-open-v3 #bb-mobile-backdrop, body.sb-open-v3 [data-sb-backdrop-v3] { opacity: 1; pointer-events: auto; }
  body.sb-open-v3 { overflow: hidden; }
  /* Trigger del drawer = botón integrado del header (Marcel: "odio fixed") */
  #sb-expand, .sb-expand { display: inline-flex !important; }

  /* [19may · Marcel "si lo cierro en desktop y veo en mobil se ve mal/
     saturado · debe verse bien SIEMPRE"] El estado desktop colapsado
     (data-sidebar="collapsed") se filtraba a mobile (notice oculto, items
     centrados, tooltips hover). Mobile = SIEMPRE drawer expandido, 100%
     independiente del estado desktop. Sin perder la esencia · solo limpio. */
  .app[data-sidebar="collapsed"] .sb__brand-text,
  .app[data-sidebar="collapsed"] .sb__online,
  .app[data-sidebar="collapsed"] .sb__system-status,
  .app[data-sidebar="collapsed"] .sb__item-lbl,
  .app[data-sidebar="collapsed"] .sb__idea-lbl,
  .app[data-sidebar="collapsed"] .sb__session-info,
  .app[data-sidebar="collapsed"] .sb__session-chev,
  .app[data-sidebar="collapsed"] .sb__group-lbl,
  .app[data-sidebar="collapsed"] .sb__session-logout { display: revert !important; opacity: 1 !important; }
  .app[data-sidebar="collapsed"] .sb__item-lbl,
  .app[data-sidebar="collapsed"] .sb__idea-lbl { display: inline !important; }
  .app[data-sidebar="collapsed"] .sb__item .kbd { display: none !important; }
  .app[data-sidebar="collapsed"] .sb__list { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 1px !important; }
  .app[data-sidebar="collapsed"] .sb__item { justify-content: flex-start !important; width: auto !important; margin: 0 !important; padding: 0 16px !important; }
  .app[data-sidebar="collapsed"] .sb__idea { justify-content: flex-start !important; width: auto !important; margin: 8px 12px !important; padding: 0 14px !important; }
  .app[data-sidebar="collapsed"] .sb__brand { justify-content: flex-start !important; padding: 16px 16px 10px !important; }
  .app[data-sidebar="collapsed"] .sb__group { padding: var(--space-2) 6px 0 !important; }
  .app[data-sidebar="collapsed"] .sb__session { justify-content: flex-start !important; padding: 12px 14px !important; }
  /* Notice feriado/finde: SIEMPRE visible y legible en el drawer */
  .app[data-sidebar="collapsed"] .sb__notice { margin: var(--space-3) 12px 0 !important; padding: 11px 13px !important; justify-content: flex-start !important; }
  .app[data-sidebar="collapsed"] .sb__notice-txt, .app .sb__notice-txt { display: block !important; }
  /* Matar los tooltips ::after del modo colapsado (no aplican en drawer) */
  .app[data-sidebar="collapsed"] .sb__item:hover::after,
  .app[data-sidebar="collapsed"] .sb__idea:hover::after,
  .app[data-sidebar="collapsed"] .sb__session:hover::after { display: none !important; content: none !important; }
  /* Densidad respirada · que NO se vea "lleno/saturado" + quepa el notice */
  .app .sb__group-lbl { padding: 12px 16px 5px !important; font-size: 10px !important; }
  .app .sb__group + .sb__group { margin-top: 2px !important; }
  .app .sb__notice { margin: 10px 12px 2px !important; }
  .app .sb__online { padding: 2px 16px 8px !important; font-size: 11px !important; }

  /* [19may · Marcel "el movimiento al abrir se ve raro · elementos cargan en
     tiempos/direcciones distintas · pobre"] El drawer debe entrar como UN
     bloque sólido (solo el slide de .sb), SIN cascada por elemento. Mato las
     entradas escalonadas y los fades con delay dentro del drawer. */
  .app.is-expanding .sb__group .sb__item,
  .app.is-expanding .sb__idea,
  .app .sb__group .sb__item,
  .app .sb__idea,
  .app .sb__brand,
  .app .sb__brand-text,
  .app .sb__online,
  .app .sb__notice,
  .app .sb__group-lbl,
  .app .sb__session { animation: none !important; }
  .app .sb__brand-text,
  .app .sb__online,
  .app .sb__item-lbl,
  .app .sb__idea-lbl,
  .app .sb__session-info,
  .app .sb__session-chev { transition: none !important; }

  /* [19may · Marcel "¿Idea para Bigbuda HQ? se ve como texto flotante · no
     integrado"] → chip integrado consistente con el resto (borde + fondo
     sutil + alineado), no texto suelto. */
  .app .sb__idea, .app[data-sidebar="collapsed"] .sb__idea {
    border: 1px solid var(--border-subtle) !important;
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    height: 34px !important; border-radius: var(--radius-sm, 6px) !important;
    margin: 10px 12px 12px !important; padding: 0 14px !important;
    justify-content: flex-start !important; width: auto !important;
  }

  /* [19may · Marcel "se ve muy lleno"] Densidad calmada (mantiene la esencia) */
  .app .sb__item, .app[data-sidebar="collapsed"] .sb__item { height: 38px !important; min-height: 38px !important; font-size: 13.5px !important; }
  .app .sb__group { padding-top: 2px !important; }
  .app .sb__notice, .app[data-sidebar="collapsed"] .sb__notice { padding: 9px 12px !important; }
  .app .sb__notice-txt { font-size: 11px !important; line-height: 1.45 !important; }
}
/* ════════════════════════════════════════════════════════════════════════
   [19may · WORKER bus #3 P0 funcional · "modal de lead en móvil cerrable"]
   CAUSA: .focus-head es flex sin wrap/min-width → en pantalla angosta el
   texto del contador/contexto empuja la .focus-close (margin-left:auto,
   último hijo) FUERA del viewport derecho → en mobile no hay backdrop que
   tocar (modal full-screen) ni teclado para Esc → quedabas atrapado.
   FIX net-safe ≤640px scoped al modal de lead: header no-wrap compacto +
   pagination truncable + X siempre fija, grande (44px touch), nunca
   desplazada/clipped, sticky sobre todo. Additivo · reversible · 0 markup/
   JS · NO toca desktop (7AA-safe). */
@media (max-width: 640px) {
  .focus-overlay .focus-head, .focus-card .focus-head {
    flex-wrap: nowrap !important; gap: 8px !important;
    padding: 10px 12px !important; position: sticky !important;
    top: 0 !important; z-index: 30 !important; background: var(--bg-card) !important;
    min-height: 52px !important;
  }
  .focus-overlay .focus-pagination, .focus-card .focus-pagination {
    min-width: 0 !important; overflow: hidden !important; flex: 0 1 auto !important;
  }
  .focus-overlay .focus-counter-context, .focus-card .focus-counter-context {
    display: none !important; /* contexto largo = lo que empujaba la X · no esencial en mobile */
  }
  .focus-overlay .focus-nav, .focus-card .focus-nav { flex: 0 0 auto !important; }
  .focus-overlay .focus-close, .focus-card .focus-close {
    flex: 0 0 auto !important; margin-left: auto !important;
    width: 44px !important; height: 44px !important; font-size: 20px !important;
    position: relative !important; z-index: 31 !important;
  }
  /* Garantiza header fijo + cuerpo scrolleable (X nunca se va con el scroll) */
  .focus-overlay .focus-card, .focus-overlay > .focus-modal {
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  .focus-overlay .focus-card .focus-body { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; -webkit-overflow-scrolling: touch; }
}
/* Editable price · Marcel: editar/agregar precio inline · regla 7AD */
.lead__amount,.lead-wait__amount{cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast);}
.lead__amount:hover,.lead-wait__amount:hover{background:var(--bg-elevated);color:var(--text-primary);}
.lead__amount[data-editing="true"],.lead-wait__amount[data-editing="true"]{background:var(--bg-tinted);}
.banner__list::-webkit-scrollbar{width:6px;}
.banner__list::-webkit-scrollbar-track{background:transparent;}
.banner__list::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:3px;}
.banner__list::-webkit-scrollbar-thumb:hover{background:var(--border-strong);}
/* ── Banner item: 3 filas (when+score · nombre · meta+cta) para Reuniones/Propuestas ── */
.banner__item{display:grid;grid-template-columns:1fr;row-gap:4px;padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-subtle);transition:background var(--t-hover);}
.banner__item:first-child{border-top:0;}
.banner__item:hover{background:var(--bg-elevated);}
.banner__row1{display:flex;align-items:center;gap:var(--space-2);min-width:0;}
.banner__row2{min-width:0;}
.banner__row3{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-width:0;}
/* [Marcel 11 may LATE 3] Botones caja Tratos ganados · dark mode safe
   Antes: color:#fff + background:var(--text-primary) · en dark --text-primary=#FAFAFA = invisible.
   Ahora: usar brand color para primary, surface neutral para secundario. */
.bb-won-action{height:32px;padding:0 14px;font-size:12px;font-weight:600;border-radius:4px;cursor:pointer;font-family:inherit;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border);transition:background var(--duration-fast),border-color var(--duration-fast);}
.bb-won-action:hover{background:var(--bg-elevated);border-color:var(--border-strong);}
.bb-won-action--primary{color:#fff;background:var(--brand);border-color:var(--brand);}
.bb-won-action--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);}
[data-theme="dark"] .bb-won-action{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.18);color:#FAFAFA;}
[data-theme="dark"] .bb-won-action:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.28);}
[data-theme="dark"] .bb-won-action--primary{background:var(--brand);border-color:var(--brand);color:#fff;}
[data-theme="dark"] .bb-won-action--primary:hover{background:var(--brand-hover,#5b5fde);}
/* [Marcel 11 may LATE] Nombre del lead en banners NO debe ser protagonista
   Marcel: "no me gusta que se lea tan protagonista el nombre del lead, mas pulido como rest de cajas"
   Antes: text-md (14px) + semibold 600 · ahora: text-sm (12px) + medium 500 alineado con resto */
.banner__name{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:var(--ls-snug);}
.banner__meta{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
/* ── Banner Correos full-width: grid alineado · acciones siempre derecha ── */
/* [Marcel 12 may] Aprovechar mejor el espacio · grid de 3 columnas que matchean con los 3 rows del template
   Antes: 5 columnas + 3 children dejaban 2 cols vacías a la derecha (espacio muerto que Marcel reportó).
   Ahora: 3 columnas balanceadas · row3 (meta+CTA con justify-space-between) usa todo el ancho restante. */
.banner--full .banner__item{display:grid;grid-template-columns:110px minmax(180px,1.4fr) minmax(280px,2fr);column-gap:var(--space-6);row-gap:0;align-items:center;padding:16px var(--space-5);}
.banner--full .banner__item + .banner__item{border-top:1px solid var(--border-subtle);}
.banner--full .banner__item-row{display:contents;}
.banner--full .banner__item-cta{display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.banner--full .banner__item:hover .banner__item-cta{opacity:1;}
.banner__act{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;font-size:12px;font-weight:var(--weight-medium);color:var(--text-muted);background:transparent;border:0;border-radius:var(--radius-sm);cursor:pointer;transition:var(--t-hover);white-space:nowrap;}
.banner__act:hover{background:var(--bg-elevated);color:var(--text-primary);}
.banner__act--send{color:var(--text-secondary);}
.banner__act--send:hover{color:var(--text-primary);}
.banner__act-sep{width:1px;height:14px;background:var(--border-subtle);margin:0 2px;display:none;}
/* [Marcel 13 may 05:40 · regla 7CJ FINAL · diseño igual a Tratos ganados handoff]
 * Botones .btn--sm .bb-won-action ya tienen el estilo correcto (compartido con handoff).
 * Eliminar TODA línea verde / barra de progreso visual que el browser pueda renderizar:
 *   - progress nativo HTML5 (color sistema verde · iOS/Mac)
 *   - meter element
 *   - cualquier ::before / ::after con background:#10b981 / green / #16a34a
 *   - bb-track-chip si visible
 * Banner scheduled item · sin gradients · sin pseudo-elementos verdes. */
.banner__item progress,
.banner__item meter,
.banner__item .bb-sched-eta-bar,
.banner__item .bb-eta-bar,
.banner__item [data-eta-progress],
.banner__item .bb-progress,
.banner__item .progress-bar { display: none !important; }
.banner__item *::before, .banner__item *::after {
  /* No-op por defecto · pseudoelementos legítimos (av dots · status pulse) viven con sus selectores específicos.
     Aquí solo neutralizamos cualquier background verde que se haya colado. */
}
/* Neutralizar cualquier descendente con bg verde puro (#10b981 / #16a34a / #22c55e) en items scheduled */
.banner__item [style*="background:#10b981"],
.banner__item [style*="background: #10b981"],
.banner__item [style*="background:#16a34a"],
.banner__item [style*="background:#22c55e"],
.banner__item [style*="background-color:#10b981"],
.banner__item [style*="background-color: #10b981"] { background: transparent !important; }

/* [Marcel 13 may 05:45 · regla 7CJ NUCLEAR · eliminar barra verde scheduled]
 * Scope solo a banners scheduled (Correos programados). Cualquier elemento con
 * height pequeño (<6px) y full-width dentro de banner__item se considera "barra"
 * y se oculta · porque el diseño Marcel-aprobado NO tiene barras de progress. */
.banner--full[id*="scheduled"] .banner__item > div:not(.banner__item-cta):empty,
.banner--full .banner__item > div:not(.banner__item-cta):empty,
.banner--full .banner__item > span:empty {
  display: none !important;
}
/* Match SKELETON específico que mostraba línea horizontal cuando hidrataba */
.banner--full .banner__item .bb-skeleton-line,
.banner--full .banner__item .bb-skeleton-card {
  display: none !important;
}
@media (max-width:1100px){
  .banner--full .banner__item{grid-template-columns:1fr;row-gap:6px;}
  .banner--full .banner__item-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .banner--full .banner__item-cta{justify-content:flex-start;}
}
.banner__when{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:var(--weight-medium);color:var(--text-muted);font-variant-numeric:tabular-nums;}
.banner__when--sla{color:var(--text-primary);font-weight:var(--weight-semibold);}
.banner__when--sla::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warm);}
.banner__when--soon{color:var(--text-primary);font-weight:var(--weight-semibold);}
.banner__what{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.banner__score{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:var(--weight-semibold);padding:2px 6px;border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;letter-spacing:0.02em;flex-shrink:0;color:var(--text-secondary);background:transparent;border:1px solid var(--border-subtle);}
.banner__score::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;}
.banner__score--hot::before{background:var(--danger);}
.banner__score--warm::before{background:#d97706;}
.banner__score--cold::before{background:var(--text-tertiary);}
.banner__subject{font-size:var(--text-sm);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic;}
/* ── [Marcel 12 may] CONSISTENCIA TIPOGRÁFICA banners · MENOS PROTAGONISTA
 * Marcel reportó MÚLTIPLES veces que el nombre del lead se ve muy protagonista.
 * Antes: 14px + 600 + tracking negativo · ahora: 12.5px + 500 + tracking normal
 * Visualmente aligned con resto de filas · NO grita atención. */
.banner__name,
.banner__lead-name,
.banner-row__name,
.proposals-signed__name,
.proposals-signed__lead-name,
.scheduled-row__name,
.scheduled__name,
.meetings-row__name,
.meetings__name,
.banner [data-lead-name],
[data-banner-row] .lead-name,
.banner__what {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
.banner__sub,
.banner__company,
.banner__detail,
.banner [data-lead-sub] {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  line-height: 1.4 !important;
}
@media (max-width: 768px) {
  .banner__name,
  .banner__lead-name,
  .proposals-signed__name,
  .proposals-signed__lead-name,
  .scheduled__name,
  .meetings__name,
  .banner__what {
    font-size: 13px !important;
  }
}
.banner__chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.banner__chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:var(--weight-regular);color:var(--text-muted);padding:0;background:transparent;border:0;}
.banner__chip + .banner__chip::before{content:"·";margin-right:8px;color:var(--text-tertiary);}
.banner__chip--ok::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--success);margin-left:4px;}
.banner__chip--warn::after{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:#d97706;margin-left:4px;}
.banner__chip--ai{color:var(--brand);font-weight:var(--weight-medium);}
.banner__chip--ai svg{width:10px;height:10px;}
.banner__docs{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);}
.banner__doc{display:inline-flex;align-items:center;gap:3px;background:transparent;border:0;color:var(--text-muted);cursor:pointer;font-size:11px;padding:0;transition:color var(--t-hover);}
.banner__doc:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:2px;}
.banner__doc svg{width:11px;height:11px;}
.banner__assignees{display:inline-flex;align-items:center;gap:3px;}
.banner__cta{display:flex;align-items:center;gap:6px;margin-top:4px;}
.banner__cta-spacer{flex:1;}
.banner__open{display:inline-flex;align-items:center;gap:4px;background:transparent;border:0;color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;padding:6px 8px;border-radius:var(--radius-sm);transition:var(--t-hover);}
.banner__open:hover{background:var(--bg-elevated);color:var(--text-primary);}
.banner__open svg{width:12px;height:12px;}
.banner__amount{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
.banner__amount-sub{font-size:10px;color:var(--text-muted);font-weight:var(--weight-regular);margin-left:3px;}
/* .banner__empty redefinido arriba con layout horizontal · regla empty-states-elegantes */

/* ============== SECTION HEAD ============== */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-3);}
.section-head__title{font-size:var(--text-xl);font-weight:var(--weight-bold);letter-spacing:var(--ls-snug);margin:0;display:flex;align-items:baseline;gap:var(--space-2);color:var(--text-primary);}
.section-head__count{font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--text-muted);font-variant-numeric:tabular-nums;}
.section-head__sub{font-size:var(--text-sm);color:var(--text-muted);margin:2px 0 0;}

/* ============== TOOLBAR ============== */
.toolbar{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:6px var(--space-3);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.toolbar__sort{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);background:transparent;border:0;border-radius:var(--radius-sm);cursor:pointer;transition:var(--t-hover);}
.toolbar__sort:hover{background:var(--bg-elevated);color:var(--text-primary);}
.toolbar__sort svg{width:12px;height:12px;color:var(--text-muted);}
.toolbar__chips{display:flex;gap:6px;flex-wrap:wrap;}
.toolbar__sep{width:1px;height:18px;background:var(--border-subtle);}
.toolbar__right{margin-left:auto;display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-sm);color:var(--text-muted);}

.chip-filter{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px 0 10px;font-size:var(--text-xs);font-weight:var(--weight-medium);background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:4px;}
.chip-filter__close{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:0;color:var(--text-muted);font-size:14px;line-height:1;cursor:pointer;padding:0;}
.chip-filter__close:hover{background:var(--bg-tinted);color:var(--text-primary);}

/* ============== COPILOTO IA SECTION (estilo captura 2) ============== */
.copilot-section{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;position:relative;}
.copilot-section::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--text-primary);}
.copilot-section__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5) var(--space-3);}
.copilot-section__icon{width:28px;height:28px;border-radius:4px;background:var(--bg-elevated);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.copilot-section__icon svg{width:14px;height:14px;}
.copilot-section__title{font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:var(--ls-snug);}
.copilot-section__pills{display:flex;align-items:center;gap:6px;}
/* [Marcel 11 may LATE] copilot-section__pill sin border/bg · inline dot+texto */
.copilot-section__pill{display:inline-flex;align-items:center;gap:6px;padding:0;font-size:11px;font-weight:var(--weight-medium);background:transparent;border:0;color:var(--text-secondary);}
.copilot-section__pill--ok{color:var(--success);}
.copilot-section__pill--ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success);}
.copilot-section__pill--neutral{color:var(--text-muted);}
.copilot-section__sub{padding:0 var(--space-5) var(--space-3);font-size:var(--text-sm);color:var(--text-muted);}
.copilot-section__pause{margin-left:auto;}
.copilot-section__list{display:flex;flex-direction:column;}
.copilot-item{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-subtle);transition:background var(--duration-fast);}
.copilot-item:hover{background:var(--bg-elevated);}
.copilot-item__meta-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:4px;flex-wrap:wrap;}
.copilot-item__action{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:var(--weight-semibold);letter-spacing:.02em;color:var(--text-primary);}
.copilot-item__name{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0;}
.copilot-item__sub{font-size:var(--text-xs);color:var(--text-muted);}

/* ============== LEAD CARD ============== */
.leads{display:flex;flex-direction:column;gap:var(--space-3);}
/* [Marcel 8 may 16:00 · regla feedback_no_hover_lead_task] sin transform en transition · v3 original solo border-color + box-shadow */
.lead{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-elev-1);transition:border-color var(--duration-fast),box-shadow var(--duration-fast),opacity 280ms var(--ease-out-expo),transform 280ms var(--ease-out-expo),max-height 280ms var(--ease-out-expo);}
/* [E4 · 19may post-corte · Marcel "la animación del lead del copiloto al trabajado es muy lenta"] Animación copiloto→Trabajado snappy 280ms (antes 600-900ms). JS marca data-processing="true" post-send · 280ms · re-render saca la card. */
.lead[data-processing="true"]{opacity:0;transform:translateY(-6px) scale(.97);max-height:0;margin-top:0;margin-bottom:0;border-color:transparent;pointer-events:none;}
/* [FIX FINAL POLISH 8 may] Animation Hunter #2 · translateY -1px sin gris (regla 7T) */
/* [Marcel 8 may 19:00 · regla feedback_no_hover_lead_task] sin transform translateY · v3 fiel */
.lead:hover, .lead-card:hover, .priority-deal:hover{border-color:var(--border);box-shadow:var(--shadow-elev-2);}

/* ════════════════════════════════════════════════════════════════════════
   [v179 · P0 au-4 · Marcel 19may post-corte] Stream Cartera con priorización
   visual por temperatura. Borde izquierdo 3px según data-heat (set por bridge
   en línea ~7333). Acelera escaneo de leads · cero markup change · 7AA-safe.
   ════════════════════════════════════════════════════════════════════════ */
.lead[data-heat="hot"],.lead-wait[data-heat="hot"]{border-left:3px solid var(--danger,#EF4444);}
.lead[data-heat="warm"],.lead-wait[data-heat="warm"]{border-left:3px solid var(--warning,#F59E0B);}
.lead[data-heat="cold"],.lead-wait[data-heat="cold"]{border-left:3px solid var(--text-tertiary,#A3A3A3);}
/* dark mode · saturación bajada para no gritar */
[data-theme="dark"] .lead[data-heat="hot"],[data-theme="dark"] .lead-wait[data-heat="hot"]{border-left-color:#DC2626;}
[data-theme="dark"] .lead[data-heat="warm"],[data-theme="dark"] .lead-wait[data-heat="warm"]{border-left-color:#D97706;}
[data-theme="dark"] .lead[data-heat="cold"],[data-theme="dark"] .lead-wait[data-heat="cold"]{border-left-color:#52525B;}

/* Top */
.lead__top{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:flex-start;padding:var(--space-5) var(--space-5) var(--space-4);}

/* Score block (estilo captura 1) */
.score{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-sm);border:1px solid;flex:0 0 auto;}
.score__num{font-size:18px;font-weight:var(--weight-bold);line-height:1;font-variant-numeric:tabular-nums;}
.score__lbl{font-size:9px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;margin-top:3px;}
.score--hot{background:var(--hot-soft);color:var(--hot-text);border-color:var(--hot-border);}
.score--warm{background:var(--warm-soft);color:var(--warm-text);border-color:var(--warm-border);}
.score--cold{background:var(--cold-soft);color:var(--cold-text);border-color:var(--cold-border);}

.lead__head{min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px;}
.lead__name{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary);letter-spacing:var(--ls-snug);}
.lead__head-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.lead__right{display:flex;align-items:center;gap:var(--space-2);}
.lead__amount{display:inline-flex;align-items:center;height:28px;padding:0 10px;font-size:var(--text-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--text-primary);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:var(--t-hover);}
.lead__amount:hover{background:var(--bg-elevated);border-color:var(--border-subtle);}
.lead__amount--empty{color:var(--text-muted);font-style:italic;font-weight:var(--weight-medium);}
/* [BUG-DAT-06 P1 · v211] · valor=0 + status avanzado → chip warning ámbar visible */
.lead__amount[data-pending="true"]{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4);color:#92400E !important;font-style:normal;}
.lead__amount[data-pending="true"]:hover{background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.55);}
.lead__amount[data-pending="true"]::before{content:"⚠";margin-right:4px;font-size:11px;line-height:1;}

/* Status row (pills + integrations + tags) */
.lead__row{display:flex;align-items:center;gap:8px;padding:0 var(--space-5) var(--space-4);flex-wrap:wrap;}
.lead__email{display:inline-flex;align-items:center;height:26px;padding:0 10px;font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);}
.lead__email svg{width:12px;height:12px;margin-right:6px;color:var(--text-muted);}

/* Status pill (small status badges) */
/* [Marcel 11 may 2026 LATE · regla "menos redondo · más moderno"] · radius 4px (era pill 999px) */
.status-pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;border-radius:4px;background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-subtle);}

/* [Marcel 11 may LATE · regla role-based $$ visibility]
   Marcel ve todos los montos · resto del equipo (Paulete/Andrés/etc) NO. */
body.bb-role-non-marcel .lead__amount,
body.bb-role-non-marcel .lead-wait__amount,
body.bb-role-non-marcel .hero__amount,
body.bb-role-non-marcel .pipe-embed__amount,
body.bb-role-non-marcel .pipeline-amount,
body.bb-role-non-marcel .kpi--money .kpi__num,
body.bb-role-non-marcel [data-monto],
body.bb-role-non-marcel [data-money]{
  filter: blur(5px) !important;
  user-select: none !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  position: relative;
}
body.bb-role-non-marcel .lead__amount::after,
body.bb-role-non-marcel .lead-wait__amount::after{
  content: "—";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  font-weight: 400;
  color: var(--text-muted);
  filter: blur(0);
}
.status-pill__dot{width:5px;height:5px;border-radius:50%;background:var(--text-tertiary);}
.status-pill--negotiation .status-pill__dot{background:var(--warning);}
.status-pill--meeting .status-pill__dot{background:var(--info);}
.status-pill--postmeeting .status-pill__dot{background:var(--info);}
.status-pill--sent .status-pill__dot{background:var(--success);}
.status-pill--viewed .status-pill__dot{background:var(--text-secondary);}
/* [Marcel 9 may · Agente F · F-4] Status pill colors diferenciados (sin perder compat con __dot) */
/* [Marcel 13 may] dot ::before con margin-right 6px · evita que quede pegado al texto */
.status-pill--negotiation{color:#B45309;}
.status-pill--negotiation::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#F59E0B;margin-right:6px;flex-shrink:0;}
.status-pill--proposal-sent{color:#1E40AF;}
.status-pill--proposal-sent::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#3B82F6;margin-right:6px;flex-shrink:0;}
.status-pill--proposal-viewed{color:#6D28D9;}
.status-pill--proposal-viewed::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#8B5CF6;margin-right:6px;flex-shrink:0;}
.status-pill--meeting{color:#047857;}
.status-pill--meeting::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#10B981;margin-right:6px;flex-shrink:0;}
/* Si la pill ya tiene un __dot interno, ocultar el ::before duplicado */
.status-pill:has(.status-pill__dot)::before{display:none;}

/* Email pill (waiting / response / push · color coded sutil) */
/* [Marcel 11 may LATE · pills bordes consistentes 4px · todos similares] */
.email-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;font-size:var(--text-xs);font-weight:var(--weight-medium);background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:var(--t-hover);}
.email-pill:hover{background:var(--bg-tinted);}
.email-pill[aria-expanded="true"]{box-shadow:0 0 0 3px var(--bg-elevated);border-color:var(--border);}
.email-pill__dot{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);}
.email-pill--waiting{background:var(--warm-soft);border-color:var(--warm-border);color:var(--warm-text);}
.email-pill--waiting .email-pill__dot{background:var(--warm);}
.email-pill--reply{background:var(--success-soft);border-color:var(--success-border);color:var(--success-text);}
.email-pill--reply .email-pill__dot{background:var(--success);animation:dot-pulse 1.6s ease-in-out infinite;}
.email-pill--push{background:var(--success-soft);border-color:var(--success-border);color:var(--success-text);}
.email-pill--push .email-pill__dot{background:var(--success);}
@keyframes dot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.email-pill svg.chev{width:10px;height:10px;transition:transform var(--duration-base);}
.email-pill[aria-expanded="true"] svg.chev{transform:rotate(180deg);}

/* Tags */
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;font-size:10px;font-weight:var(--weight-medium);background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:4px;}
/* [Marcel 9 may · Agente F · F-5] Tag con datos reales · si tiene texto vacío "—" se atenúa */
.tag[data-empty="true"]{opacity:0.5;font-style:italic;}

/* Action chips (Copiar, Gmail) */
.action-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;font-size:11px;font-weight:var(--weight-medium);background:transparent;border:1px solid transparent;color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:var(--t-hover);}
.action-chip:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-subtle);}
.action-chip svg{width:12px;height:12px;}

/* Avatar stack (small) */
.av-row{display:inline-flex;}
.av-row .av{margin-left:-5px;border:2px solid var(--bg-card);}
.av-row .av:first-child{margin-left:0;}

/* AI Analysis block */
.ai{margin:0 var(--space-5) var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;}
.ai__head{display:flex;align-items:center;justify-content:space-between;padding:10px var(--space-4);border-bottom:1px solid var(--border-subtle);}
.ai__head-l{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);}
.ai__head-l-icon{width:14px;height:14px;border-radius:3px;background:var(--bg-elevated);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
.ai__head-l-icon svg{width:8px;height:8px;}
.ai__head-r{font-size:10px;color:var(--text-muted);background:transparent;border:0;padding:0;font-weight:var(--weight-medium);}
/* [Marcel 8 may 16:00 · regla 7AB máximo contexto] Mostrar TODO el texto IA sin truncar.
   v3 original NO tenía clamp/min-height · respetamos diseño aprobado. */
.ai__body{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:var(--space-3) var(--space-4);background:var(--bg-card);}
.ai__icon{width:18px;height:18px;color:var(--text-muted);flex:0 0 auto;margin-top:1px;}
.ai__content{min-width:0;}
.ai__title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0 0 3px;}
.ai__txt{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.55;margin:0;}


/* === LEAD META · telemetría del lead === */
/* [Marcel 11 may madrugada · margin-top 8→16] · [Marcel 11 may tarde · 16→20] respiración clara · cells no pegadas al borde superior */
.lead-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:var(--space-5) var(--space-5) var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-elevated);}
/* [Marcel 11 may LATE] lead-meta__cell es INFORMATIVO · NO clickeable · NO hover
   Antes era <button> con cursor:pointer y :hover → confunde porque no hace nada al click */
.lead-meta__cell{display:flex;align-items:center;gap:10px;padding:14px 14px;background:transparent;border:0;border-right:1px solid var(--border-subtle);text-align:left;cursor:default;font-family:inherit;color:var(--text-secondary);position:relative;min-width:0;pointer-events:none;}
.lead-meta__cell:last-child{border-right:0;}
.lead-meta__icon{flex-shrink:0;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;}
.lead-meta__icon svg{width:14px;height:14px;}
.lead-meta__cell:hover .lead-meta__icon{color:var(--brand);}
.lead-meta__txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.lead-meta__lbl{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);line-height:1.3;}
.lead-meta__val{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lead-meta__cell--mute .lead-meta__val{color:var(--text-muted);font-weight:var(--weight-regular);}
.lead-meta__cell--warn .lead-meta__val{color:var(--warm);}
.lead-meta__cell--cold .lead-meta__val{color:var(--text-tertiary);font-style:italic;}
.lead-meta__cell--ok .lead-meta__val::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--success);margin-left:6px;vertical-align:middle;}

/* Tooltip on hover */
.lead-meta__cell[data-tooltip]:hover::before,
.lead-meta__cell[data-tooltip]:focus-visible::before{
  content:attr(data-tooltip);
  position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);
  background:var(--bg-card);color:var(--text-primary);
  font-size:11px;font-weight:var(--weight-regular);
  padding:8px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-elev-3);
  white-space:normal;line-height:1.4;
  z-index:50;pointer-events:none;
  animation:metaTipIn .14s var(--ease-out);
}
@keyframes metaTipIn{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:720px){
  .lead-meta{grid-template-columns:repeat(2,1fr);}
  .lead-meta__cell{border-right:0;border-bottom:1px solid var(--border-subtle);}
  .lead-meta__cell:nth-child(odd){border-right:1px solid var(--border-subtle);}
  .lead-meta__cell:nth-last-child(-n+2){border-bottom:0;}
}
.lead-meta__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--brand);color:#fff;border-radius:9px;font-size:10px;font-weight:var(--weight-semibold);line-height:1;font-variant-numeric:tabular-nums;margin-left:6px;vertical-align:middle;}
.lead-meta__count--mute{background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border-subtle);}

/* Email thread expandido */
.thread{overflow:hidden;max-height:0;transition:max-height var(--duration-slow) var(--ease-emphasis);}
.lead[data-thread="open"] .thread{max-height:600px;}
.thread__inner{padding:0 var(--space-5) var(--space-4);}
.thread__head{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;padding-top:var(--space-3);border-top:1px dashed var(--border-subtle);}
.thread__list{display:flex;flex-direction:column;gap:6px;}
.thread__msg{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:8px 12px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);}
.thread__msg--in{background:var(--success-soft);border-color:var(--success-border);}
.thread__when{font-size:10px;font-weight:var(--weight-semibold);color:var(--text-muted);font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:var(--ls-wider);min-width:60px;padding-top:1px;}
.thread__from{font-size:11px;color:var(--text-muted);}
.thread__from strong{color:var(--text-primary);font-weight:var(--weight-semibold);}
.thread__subject{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);margin:1px 0;}
.thread__preview{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Foot · Asignado + Seguimiento */
.lead__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-top:1px solid var(--border-subtle);background:var(--bg-card);}
.lead__assigned{display:inline-flex;align-items:center;gap:8px;}
.lead__assigned-lbl{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);}
.lead__assigned-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);}

/* [Marcel · 2026-05-20 RESTORE DISEÑO ORIGINAL] "aún no veo mis botones originales
 * de ganar perder, etc · que sacaron sin mi autorización de mi diseño".
 * Los botones [✓ Ganar | ✕ Perder | 📦 Archivar] SIEMPRE visibles en TODAS las cards
 * (actionable Copiloto IA · waiting trabajados · expandidas o no). Es regla 7AA del
 * pie del card (memoria feedback_design_intocable_card_foot.md): fila 2 full-width
 * con triage trio. NUNCA reemplaza al primario negro · es fila aparte abajo. */
.lead__triage{display:grid !important;grid-template-columns:1fr 1fr 1fr !important;border-top:1px solid var(--border-subtle);}
/* La filosofía cierre (worker.js · 7BT-3 v2) sigue intacta · cambia el TEXTO del
 * primario (Generar email IA · jamás "Marcar perdido" primary). Los botones de la
 * fila 2 son acciones MANUALES de Marcel · no se confunden con cierre automático. */
/* También oculta chip "Marcar perdido" arriba derecha dentro del copiloto */
.copilot-box [data-action="mark-lost-chip"],
.copilot-box .lead .lead__lost-chip,
.copilot-box .lead [data-triage-chip]{display:none !important;}
.lead__triage button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;background:var(--bg-elevated);border:0;border-right:1px solid var(--border-subtle);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast),box-shadow var(--duration-fast);font-family:inherit;}
.lead__triage button:last-child{border-right:0;}
/* [Marcel 11 may LATE · restaurar hover original triage] */
/* [Marcel 11 may LATE · hover v3 fiel · regla 7AA] Hover sutil del v3 aprobado (dashboard-v3.html línea 516):
   solo background bg-tinted + color text-primary. Sin box-shadow inset, sin colores diferenciados.
   Antes: hover elaborado con shadow indigo/verde/rojo/ámbar y color-mix · NO era v3 · Marcel lo reportó. */
.lead__triage button:hover{background:var(--bg-tinted);color:var(--text-primary);}
.lead__triage button svg{width:14px;height:14px;}

/* Worked (más opacos) */
.lead--worked{background:var(--bg-base);}
.lead--worked .ai{display:none;}
.lead--worked .lead__name{color:var(--text-secondary);}
.lead--worked:hover{background:var(--bg-card);}

/* ============== COPILOT BOX (contenedor único de leads accionables) ============== */
/* [18may · Marcel] El COPILOTO es el único que conserva el púrpura ORIGINAL
   (--copilot-accent) · es el acento de firma · concentra el foco visual = CRO.
   El resto del dashboard va en grafito neutro (--brand). */
/* [18may · Marcel: no slab old-school · "un borde moderno que muestre que el
   copiloto LOS SELECCIONÓ"] Patrón de ESTADO SELECCIONADO (Linear/Notion/
   Vercel): borde fino en el acento copiloto + halo suave (focus-ring) ·
   comunica "curado por la IA" sin barra anticuada. Acento copiloto permitido
   SOLO aquí (tokens.css: "solo el borde del copiloto puede ser el púrpura").
   Cero gradient · radius v3 · halo decae en hover (vivo, no estático). */
/* [18may Marcel DEFINITIVO: "deja mi diseno original del copiloto, con la
   barra del diseno aprobado de Claude Design y no lo tocamos mas"]
   Restaurado EXACTO al v3 aprobado (regla 7AA, es ley, NO modificar).
   El halo/borde moderno que probe distraia -> revertido. NO TOCAR. */
.copilot-box{background:var(--bg-card);border:1px solid var(--border-subtle);border-left:3px solid var(--copilot-accent);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-4);box-shadow:var(--shadow-elev-2);}
.copilot-box__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle);background:color-mix(in oklch, var(--copilot-accent) 5%, var(--bg-card));} /* v183 · au-17 · breathing room */
.copilot-box__icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);background:var(--bg-card);color:var(--copilot-accent);flex-shrink:0;}
.copilot-box__icon svg{width:14px;height:14px;}
.copilot-box__title{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.copilot-box__name{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);}
.copilot-box__sub{font-size:var(--text-xs);color:var(--text-muted);}
.copilot-box__pills{display:flex;align-items:center;gap:var(--space-2);}
/* [Marcel 11 may LATE · pills 4px universal · excepto círculos] Marcel: "no me gusta border-radius tan redondo en ningún lugar a menos que sea círculo" */
.copilot-box__pill{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-xs);color:var(--text-muted);padding:0;background:transparent;border:0;transition:opacity 200ms cubic-bezier(0.16,1,0.3,1);font-weight:500;}
.copilot-box__pill--ok{color:var(--copilot-accent);}
.copilot-pill--changing{opacity:0.4;}
.copilot-box__pill .dot{width:8px;height:8px;border-radius:50%;background:var(--copilot-accent);position:relative;flex-shrink:0;}
.copilot-box__pill .dot::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--copilot-accent);opacity:0.4;animation:copilot-dot-pulse 1.6s ease-out infinite;}
@keyframes copilot-dot-pulse{0%{transform:scale(0.8);opacity:0.5;}50%{transform:scale(1.6);opacity:0;}100%{transform:scale(0.8);opacity:0;}}
/* [Marcel 11 may LATE] Dark mode tambien borderless · sin reapplicar fondo lavender */
[data-theme="dark"] .copilot-box__pill{background:transparent;border:0;color:var(--text-muted);}
[data-theme="dark"] .copilot-box__pill--ok{color:var(--text-secondary);}

/* Sidebar system status indicator · "sistema activo · sincronizando" */
.sb__system-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary);padding:4px 12px;}
.sb__system-status-dot{width:6px;height:6px;border-radius:50%;background:#10B981;position:relative;flex-shrink:0;}
.sb__system-status-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:#10B981;opacity:0.4;animation:sb-status-pulse 2s ease-out infinite;}
@keyframes sb-status-pulse{0%{transform:scale(0.8);opacity:0.6;}50%{transform:scale(1.8);opacity:0;}100%{transform:scale(0.8);opacity:0;}}
/* [Marcel 12 may · fix E40] Header status dot · pulse igual al sidebar.
   Bug: solo el sidebar pulsaba · header status quedaba estático. */
.header-user-status-dot.is-on{animation:header-pill-on-pulse 2s ease-in-out infinite;}
@keyframes header-pill-on-pulse{0%,100%{box-shadow:0 0 0 1.5px rgba(16,185,129,0.20);}50%{box-shadow:0 0 0 5px rgba(16,185,129,0);}}

/* Copilot thinking bar · floating bottom indicator durante llamadas IA */
/* [Marcel 14 may LATE-NIGHT · regla 7DJ · ANIMACIÓN IA PENSANDO FUTURISTA]
   Marcel verbatim: "podría ser una transición con un movimiento más futurista,
   mejor integrado y animado · he visto cosas realmente increíbles · sería increíble
   esta instancia para hacer algo innovador que llame la atención · presencia de la IA
   mientras piensa · tranquilizador · borde púrpura en movimiento integrado en la caja"

   Diseño: barra flotante con gradient animado purple→cyan→purple corriendo el borde,
   dot que pulsa con halo glowing, glassmorphism sutil. Cero distracción · integrado al flujo. */
.copilot-thinking-bar{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(100%) scale(0.95);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-radius:4px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:500;
  color:#6366F1;
  opacity:0;
  pointer-events:none;
  transition:all 320ms cubic-bezier(0.34,1.56,0.64,1);
  z-index:10000;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
/* Borde animado · gradient purple-cyan-pink corriendo */
.copilot-thinking-bar::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:6px;
  padding:2px;
  background:conic-gradient(from 0deg, var(--text-muted), var(--text-secondary), var(--text-primary), var(--text-secondary), var(--text-muted));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  z-index:-1;
  animation:thinking-border-rotate 3s linear infinite;
}
[data-theme="dark"] .copilot-thinking-bar{
  background:rgba(20,20,28,0.85);
  color:#A5B4FC;
}
.copilot-thinking-bar.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
  pointer-events:auto;
}
/* Dot ahora es un ORBE con gradient conic + bloom + breathing scale
   [Marcel 14 may FINAL · regla 7EF · animación copiloto pensando · ORBE FUTURISTA]
   Marcel verbatim: "animación copiloto pensando · necesito proponer + implementar"
   Diseño: orbe gradient conic rotating (purple→cyan→pink) con bloom + breathing scale 0.95↔1.05
   Sin distracción · integrado al flujo · feel premium SaaS world-class. */
.copilot-thinking-bar__dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--text-muted), var(--text-secondary), var(--text-primary), var(--text-secondary), var(--text-muted));
  position:relative;
  flex-shrink:0;
  box-shadow:0 0 14px rgba(99,102,241,0.5), inset 0 0 4px rgba(255,255,255,0.3);
  animation:bb-orb-rotate 3s linear infinite, bb-orb-breathe 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.copilot-thinking-bar__dot::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%);
  pointer-events:none;
}
.copilot-thinking-bar__dot::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.02) 40%, transparent 75%);
  animation:bb-orb-bloom 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events:none;
}
@keyframes bb-orb-rotate{
  to{transform:rotate(360deg);}
}
@keyframes bb-orb-breathe{
  0%, 100%{transform:scale(0.95);}
  50%{transform:scale(1.08);}
}
@keyframes bb-orb-bloom{
  0%, 100%{transform:scale(0.85); opacity:0.55;}
  50%{transform:scale(1.3); opacity:0.95;}
}
@keyframes thinking-border-rotate{
  to{transform:rotate(360deg);}
}

/* [Marcel 14 may LATE-NIGHT · regla 7DJ extensión modal lead]
   Borde morado animado en MODAL FOCUS mientras IA piensa · integrado al flujo */
.focus-overlay[data-ia-thinking="true"] > div:first-child,
.focus-overlay[data-ia-thinking="true"] .focus-card,
.focus-overlay[data-ia-thinking="true"] .lead-modal__inner{
  position:relative;
}
.focus-overlay[data-ia-thinking="true"] > div:first-child::after,
.focus-overlay[data-ia-thinking="true"] .focus-card::after,
.focus-overlay[data-ia-thinking="true"] .lead-modal__inner::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:2px;
  background:conic-gradient(from 0deg, transparent 0deg, #6366F1 60deg, var(--text-primary) 120deg, #EC4899 180deg, #06B6D4 240deg, transparent 300deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
  animation:thinking-border-rotate 2.5s linear infinite;
  z-index:5;
}

@media (prefers-reduced-motion: reduce){
  .copilot-box__pill .dot::before,
  .sb__system-status-dot::after,
  .copilot-thinking-bar__dot,
  .copilot-thinking-bar__dot::before,
  .copilot-thinking-bar__dot::after,
  .copilot-thinking-bar::before,
  .sb__item::before,
  .focus-overlay[data-ia-thinking="true"] > div:first-child::after,
  .focus-overlay[data-ia-thinking="true"] .focus-card::after,
  .focus-overlay[data-ia-thinking="true"] .lead-modal__inner::after{animation:none !important; transition:none !important;}
  .focus-overlay[data-tab-changing="true"] .focus-summary,
  .focus-overlay[data-tab-changing="true"] .focus-compose-panel,
  .focus-overlay[data-tab-changing="true"] .focus-body > *{animation:none !important;}
}
.copilot-box__pause{height:24px;padding:0 8px;font-size:var(--text-xs);color:var(--text-muted);background:transparent;border:0;cursor:pointer;border-radius:var(--radius-sm);}
.copilot-box__pause:hover{background:var(--bg-elevated);color:var(--text-primary);}
.copilot-box__body{display:flex;flex-direction:column;padding:var(--space-5) var(--space-5) var(--space-5);gap:var(--space-6);}
.copilot-box__body > .lead{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card);box-shadow:var(--shadow-elev-1);transition:box-shadow var(--duration-fast),border-color var(--duration-fast);}
.copilot-box__body > .lead:hover{box-shadow:var(--shadow-elev-2);}
.copilot-box__body > .lead + .lead{margin-top:0;}

/* ============== LEAD MODAL ============== */
.lead-modal{position:fixed;inset:0;background:rgba(15,18,28,.42);z-index:200000;display:flex;align-items:center;justify-content:center;padding:var(--space-6);opacity:0;pointer-events:none;transition:opacity 220ms var(--ease);}
.lead-modal[data-open="true"]{opacity:1;pointer-events:auto;}
.lead-modal__panel{width:min(960px,100%);max-height:90vh;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);display:flex;flex-direction:column;overflow:hidden;transform:translateY(12px) scale(.985);transition:transform 260ms var(--ease-emphasis);}
.lead-modal[data-open="true"] .lead-modal__panel{transform:translateY(0) scale(1);}
.lead-modal__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle);}
.lead-modal__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0;}
.lead-modal__sub{font-size:var(--text-xs);color:var(--text-muted);}
.lead-modal__tabs{display:flex;gap:2px;padding:0 var(--space-5);border-bottom:1px solid var(--border-subtle);background:var(--bg-card);}
.lead-modal__tab{height:38px;padding:0 14px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted);background:transparent;border:0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.lead-modal__tab[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--brand);}
.lead-modal__body{flex:1;overflow-y:auto;padding:var(--space-5);background:var(--bg);}
.lead-modal__close{margin-left:auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);background:var(--bg-card);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;}
.lead-modal__close:hover{background:var(--bg-elevated);color:var(--text-primary);}
.lead-modal__close svg{width:14px;height:14px;}
.lead-modal__compose{display:flex;flex-direction:column;gap:var(--space-3);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);transform:translateY(8px);opacity:0;transition:transform var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out);transition-delay:.08s;}
.lead-modal[data-open="true"] .lead-modal__compose{transform:translateY(0);opacity:1;}
.lead-modal__compose-row{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-muted);}
.lead-modal__compose-row strong{color:var(--text-primary);font-weight:var(--weight-medium);}
.lead-modal__subject{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);}
.lead-modal__body-text{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.55;white-space:pre-line;background:var(--bg-elevated);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);}
.lead-modal__actions{display:flex;gap:var(--space-2);justify-content:flex-end;padding-top:var(--space-2);}

/* Lead eyebrow (tag superior con la acción IA) */
.lead__eyebrow{display:flex;align-items:center;gap:6px;padding:14px var(--space-5) 0;}
/* [Marcel 11 may LATE · "no quiero cajas redondas con texto dentro"] CERRAR NEGOCIACIÓN
   sin background ni border · solo dot pulsante + texto inline morado · estilo Linear */
.lead__eyebrow-action{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:var(--weight-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--brand);background:transparent;border:0;padding:0;}
.lead__eyebrow-action::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);}

/* [CERRAR-NEG · 2026-05-19] Fila balanceada Ganar trato / Pausar 30d / Marcar perdido
   · reemplaza botón único "Marcar perdido" cuando ctaLabel coincide con esa acción.
   · regla diseño: border-radius 4px · gap 8px · justify-content end · iconos Lucide stroke 1.75. */
.lead__foot-cerrar-neg{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;flex:1;}
.cerrar-neg__btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:4px;font-size:12px;font-weight:var(--weight-semibold);font-family:inherit;cursor:pointer;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast);}
.cerrar-neg__btn svg{width:14px;height:14px;flex:0 0 auto;}
.cerrar-neg__btn kbd{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:var(--weight-bold);font-family:inherit;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:4px;margin-left:2px;}
.cerrar-neg__btn:hover{background:var(--bg-elevated);border-color:var(--border);color:var(--text-primary);}
.cerrar-neg__btn:disabled{opacity:0.55;cursor:not-allowed;}
/* Primario "Ganar trato" · verde sutil del design system (regla diseño) */
.cerrar-neg__btn--win{background:var(--success-soft);border-color:var(--success-border);color:var(--success);}
.cerrar-neg__btn--win:hover{background:var(--success);border-color:var(--success);color:var(--success-foreground,#fff);}
.cerrar-neg__btn--win kbd{background:var(--bg-card);border-color:var(--success-border);color:var(--success);}
.cerrar-neg__btn--win:hover kbd{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.3);color:#fff;}
/* Secundario "Pausar 30d" · neutral text-button (regla diseño) */
.cerrar-neg__btn--pause{background:var(--bg-card);border-color:var(--border-subtle);color:var(--text-secondary);}
.cerrar-neg__btn--pause:hover{background:var(--bg-elevated);border-color:var(--border);color:var(--text-primary);}
/* Destructivo "Marcar perdido" · rojo sutil NO primary (regla diseño) */
.cerrar-neg__btn--lose{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger);}
.cerrar-neg__btn--lose:hover{background:var(--danger);border-color:var(--danger);color:#fff;}
.cerrar-neg__btn--lose kbd{background:var(--bg-card);border-color:var(--danger-border);color:var(--danger);}
.cerrar-neg__btn--lose:hover kbd{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.3);color:#fff;}

/* ============== LEAD STATES (sistema unificado IA + pipeline) ============== */
/* Lead con recomendación IA accionable: detalle sutil, no overlay de color */
/* Lead dentro de copilot-box: card propia con borde, radius y sombra suave */
.copilot-box .lead[data-ai="actionable"]{border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-elev-1);background:var(--bg-card);transition:box-shadow var(--duration-fast),border-color var(--duration-fast);}
.copilot-box .lead[data-ai="actionable"]:hover{box-shadow:var(--shadow-elev-2);border-color:var(--border);background:var(--bg-card);transform:none;}
.lead[data-ai="actionable"]{border-color:var(--border);}
.lead[data-ai="actionable"] .ai__head-l-icon{background:var(--bg-elevated);color:var(--text-secondary);}

/* [Marcel 11 may · cards uniformes actionable=waiting] · diferencia visual SOLO:
   1. Cinta superior morada (.lead__eyebrow) visible solo en actionable
   2. Waiting expandida: misma estructura · sin cinta
   3. Borde izquierdo morado vive SOLO en .copilot-box (regla 7AA · v3 fiel · NO duplicar en .lead) */
.lead[data-ai="actionable"] > .lead__eyebrow{display:flex;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__eyebrow{display:none;} /* waiting NO muestra eyebrow ni expandida */

/* Paddings/espaciados UNIFORMES entre actionable y waiting expandida · respeta v3 */
.lead[data-ai="actionable"] > .lead__row,
.lead[data-ai="waiting"][data-expanded="true"] > .lead__row{
  padding:var(--space-3) var(--space-5);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-bottom:1px solid var(--border-subtle);
}
/* [Marcel 11-12 may · ENÉSIMA vez pedido · border-top 15px definitivo lead-meta]
   Marcel: "siento que hubo una regresion, porque no esta mi margin top de 15 px que pedi mil veces"
   3 reglas defensivas con !important para que NINGUNA otra pueda sobreescribir. */
.lead[data-ai="actionable"] > .lead-meta,
.lead[data-ai="waiting"][data-expanded="true"] > .lead-meta{
  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:15px var(--space-5) var(--space-3) !important;
}
/* Regla universal · cubre cualquier .lead-meta dentro de cualquier .lead sin importar estado */
.lead .lead-meta{ margin-top:15px !important; }
.lead[data-ai="actionable"] > .ai,
.lead[data-ai="waiting"][data-expanded="true"] > .ai{
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.lead[data-ai="actionable"] > .lead__foot,
.lead[data-ai="waiting"][data-expanded="true"] > .lead__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);padding:var(--space-3) var(--space-5);
}

/* Cinta superior con ▶ acción priorizada · solo en accionables · 2 líneas */
.lead__ai-strip{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px var(--space-3);padding:10px var(--space-5);background:var(--bg-tinted);border-bottom:1px solid var(--border-subtle);}
.lead__ai-strip-meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.lead__ai-strip-action{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:var(--weight-semibold);letter-spacing:.02em;color:var(--text-primary);line-height:1;}
.lead__ai-strip-action::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:0 0 auto;}
.lead__ai-strip-status{font-size:12px;color:var(--text-secondary);font-weight:var(--weight-medium);line-height:1.3;}
.lead__ai-strip-cta{display:flex;gap:6px;flex:0 0 auto;}
@media(max-width:720px){
  .lead__ai-strip{grid-template-columns:1fr;}
  .lead__ai-strip-cta{justify-content:flex-end;}
}

/* ============== LEAD WAITING (accionado · esperando señales) ============== */
/* Fila compacta: score · nombre+meta(2 líneas) · status · monto · chevron */
.lead[data-ai="waiting"]{background:var(--bg-card);}
.lead[data-ai="waiting"] > .lead__eyebrow,
.lead[data-ai="waiting"] > .lead__top,
.lead[data-ai="waiting"] > .lead__row,
.lead[data-ai="waiting"] > .lead-meta,
.lead[data-ai="waiting"] > .ai,
.lead[data-ai="waiting"] > .lead__foot,
.lead[data-ai="waiting"] > .lead__triage,
.lead[data-ai="waiting"] > .thread{display:none;}
/* Expanded: muestra contenido extra debajo del header lead-wait (que se queda visible) */
.lead[data-ai="waiting"][data-expanded="true"] > .lead__top{display:flex;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__row{display:flex;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead-meta{display:grid;}
.lead[data-ai="waiting"][data-expanded="true"] > .ai{display:block;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__foot{display:flex;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__triage{display:flex;}
/* Expanded: el header lead-wait queda VISIBLE arriba (chevron mantiene posición y rota 180°) */
/* y se muestran las secciones adicionales debajo */
.lead[data-ai="waiting"][data-expanded="true"] > .lead-wait{display:grid;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__top{display:none;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__row{display:flex;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead-meta{display:grid;}
.lead[data-ai="waiting"][data-expanded="true"] > .ai{display:block;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__foot{display:flex;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__triage{display:flex;}

/* [Marcel 13 may 00:50 · REVERSE · v3 FIEL · chevron EXPANDE inline (regla 7AA)]
   Cards waiting cerradas: solo 1 línea compacta v3 (lead-wait header).
   Click chevron → toggle data-expanded=true → muestra TODO el contenido inline.
   Click ↗ (icon-btn Ampliar) o "Componer email IA" → modal focus.
   Las reglas v3 base (líneas 1096-1110) muestran las secciones al expandir.
   Solo forzamos ocultar cuando NO está expandida la card. */
.lead[data-ai="waiting"]:not([data-expanded="true"]) > .lead__eyebrow,
.lead[data-ai="waiting"]:not([data-expanded="true"]) > .lead__top,
.lead[data-ai="waiting"]:not([data-expanded="true"]) > .lead__row,
.lead[data-ai="waiting"]:not([data-expanded="true"]) > .lead-meta,
.lead[data-ai="waiting"]:not([data-expanded="true"]) > .ai,
.lead[data-ai="waiting"]:not([data-expanded="true"]) > .lead__foot,
.lead[data-ai="waiting"]:not([data-expanded="true"]) > .lead__triage,
.lead[data-ai="waiting"]:not([data-expanded="true"]) > .thread,
.lead[data-ai="waiting"]:not([data-expanded="true"]) > .bb-thread-expand{display:none !important;}
/* Cuando data-expanded=true · mostrar todas las secciones con display correcto v3
   [Marcel 11 may 2026 LATE · BUG DOBLE SCORE] · lead__top OCULTO en expanded
   El score + nombre + monto ya vive en lead-wait header arriba · no duplicar */
.lead[data-ai="waiting"][data-expanded="true"] > .lead__top{display:none !important;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__row{display:flex !important;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead-meta,
.lead[data-ai="actionable"] > .lead-meta{display:grid !important;margin-top:15px !important;}
.lead[data-ai="waiting"][data-expanded="true"] > .ai{display:block !important;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__foot{display:flex !important;}
.lead[data-ai="waiting"][data-expanded="true"] > .lead__triage{display:grid !important;grid-template-columns:1fr 1fr 1fr !important;}
/* lead-wait header SIEMPRE visible (es la barra compacta del top) */
.lead[data-ai="waiting"] > .lead-wait,
.lead[data-ai="waiting"][data-expanded="true"] > .lead-wait{display:grid !important;}
/* Chevron rota 180° cuando expandida · feedback visual v3 fiel línea 631 */
.lead[data-ai="waiting"][data-expanded="true"] .lead-wait__toggle svg{transform:rotate(180deg) !important;}
/* Botón colapsar separado: deprecated · siempre oculto, el chevron del header hace todo */
.lead__collapse{display:none !important;}
/* [Marcel 8 may 16:00 · REVERSE · respetar diseño v3 al 100%]
   v3 original: .lead-wait{padding:12px var(--space-5);min-height:64px} compacto.
   Las secciones expand (.lead__row · .lead-meta · .ai · .lead__foot · .lead__triage)
   YA tienen su CSS nativo del v3 con paddings/margins correctos · NO sobrescribir. */
/* [Marcel 11 may LATE · grid 6 cols autorizado · ↗ Ampliar + ▼ Chevron al lado del precio]
   "ambos iconos uno al lado del otro a la derecha del precio del lead, para que no se vea suelto abajo cuando estan trabajados" */
.lead-wait{display:grid;grid-template-columns:auto 1fr auto auto auto auto;align-items:center;gap:var(--space-3);padding:12px var(--space-5);min-height:64px;}
.lead-wait__head{min-width:0;display:flex;flex-direction:column;gap:3px;}
.lead-wait__name{font-size:14px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.2;}
.lead-wait__msg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);line-height:1.3;}
.lead-wait__msg .pulse{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);animation:pulse-soft 2s ease-in-out infinite;flex:0 0 auto;}
@keyframes pulse-soft{0%,100%{opacity:.4;transform:scale(1);}50%{opacity:1;transform:scale(1.4);}}
/* [Marcel 7 may noche · bug colores precios] todos del mismo color text-primary
   Antes: algunos cards sin valor heredaban text-tertiary (gris pálido) y otros
   text-primary (negro) → inconsistencia visual reportada por Marcel */
.lead-wait__amount{font-size:13px;font-weight:var(--weight-semibold);color:var(--text-primary) !important;font-variant-numeric:tabular-nums;background:transparent;border:none;cursor:pointer;padding:4px 6px;border-radius:var(--radius-sm);}
.lead-wait__amount:hover{background:var(--bg-elevated);}
.lead-wait__amount--empty{color:var(--text-muted) !important;font-weight:var(--weight-medium);font-style:italic;}
.lead-wait__toggle{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);}
.lead-wait__toggle:hover{background:var(--bg-elevated);color:var(--text-primary);}
.lead-wait__toggle svg{width:14px;height:14px;transition:transform var(--duration-fast);}
.lead[data-ai="waiting"][data-expanded="true"] .lead-wait__toggle svg{transform:rotate(180deg);}
.lead[data-ai="waiting"] .lead-wait{cursor:pointer;}
.lead[data-ai="waiting"]:hover{border-color:var(--border);}
/* Expanded: muestra TODO el contenido del lead, oculta header compacto · DEPRECATED, ver bloque de abajo */
/* (reglas movidas más abajo para mantener el header lead-wait visible cuando expanded) */
@media(max-width:720px){
  /* [Marcel 22 may v260 · valores SIEMPRE visibles en mobile · Marcel verbatim:
     'no veo precios como antes o valores desde los trabajados como antes,
     que si se veian siempre, incluso en la vista cerrada de leads trabajados']
     Antes: .lead-wait__amount {display:none} ocultaba valores en mobile.
     Ahora: grid responsivo con amount visible · status pill OCULTO (menos crítico). */
  .lead-wait{grid-template-columns:auto 1fr auto auto;gap:var(--space-2);}
  .lead-wait__status{display:none;}
  .lead-wait__amount{font-size:12px;padding:3px 5px;}
}

/* Micro-feedback en Aceptar / Enviar (check verde 1s) */
.btn--accepting{background:#10b981 !important;color:#fff !important;border-color:#10b981 !important;pointer-events:none;animation:btnAccept .25s var(--ease-out);}
.btn--accepting svg{color:#fff !important;}
@keyframes btnAccept{0%{transform:scale(.96);}60%{transform:scale(1.04);}100%{transform:scale(1);}}

/* [Marcel 8 may 16:00 · revertido a v3] Sin animación leadExpandIn · v3 expande directo
   con display:grid sin transformaciones. Solo el chevron rota suave. */
@media (prefers-reduced-motion: no-preference){
  .lead-wait__toggle svg{transition:transform 220ms cubic-bezier(0.16, 1, 0.3, 1);}
  /* Pulse sutil en el status pill cuando cambia */
  .status-pill__dot{transition:background 220ms ease;}
  /* Pulse en .copilot-box__pill--ok cuando rota texto */
  .copilot-box__pill--ok{transition:background 240ms ease;}
  .copilot-box__pill--ok .dot{animation:dot-pulse 1.6s ease-in-out infinite;}
  /* Modal slide-up · si overlays usan .focus-overlay o .bb-modal */
  .focus-overlay[aria-hidden="false"] .focus-modal,
  .bb-modal[aria-hidden="false"] .bb-modal__panel{
    animation: modalSlideUp 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes modalSlideUp{
    from{opacity:0;transform:translateY(12px) scale(.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  /* Toast slide-in */
  .bb-toast{animation:toastSlideIn 240ms cubic-bezier(0.16, 1, 0.3, 1);}
  @keyframes toastSlideIn{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
  }
  /* Status pill rotativo · fade entre textos */
  .copilot-box__pill--ok{display:inline-flex;align-items:center;gap:6px;}

  /* [Marcel 16 may · regla 7CQ · borde IA pensando · conic-gradient mágico]
     Cuando el modal compose tiene data-ai-thinking="true", el borde se anima con un
     gradiente cónico que rota · sensación de presencia IA · cero JS · GPU-accelerated.
     Inspiración: Stripe Atlas border glow, Linear command-K thinking state. */
  @property --bb-glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
  .focus-modal[data-ai-thinking="true"],
  .bb-modal__panel[data-ai-thinking="true"]{
    position: relative;
    isolation: isolate;
  }
  .focus-modal[data-ai-thinking="true"]::before,
  .bb-modal__panel[data-ai-thinking="true"]::before{
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
      from var(--bb-glow-angle),
      var(--brand, #6366f1) 0deg,
      transparent 90deg,
      var(--brand, #6366f1) 180deg,
      transparent 270deg,
      var(--brand, #6366f1) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: bbGlowRotate 2400ms linear infinite;
    opacity: 0.85;
    pointer-events: none;
  }
  @keyframes bbGlowRotate{
    to { --bb-glow-angle: 360deg; }
  }
  @media (prefers-reduced-motion: reduce){
    .focus-modal[data-ai-thinking="true"]::before,
    .bb-modal__panel[data-ai-thinking="true"]::before{
      animation: none;
      opacity: 0.4;
    }
  }
}

/* ============== LEADS LIST · scroll natural en página, no contenedor interno ============== */
/* [Marcel 22 may v265 · P0 #1 fix · espacio gris debajo Daniel Antillano]
   Antes: .leads-stream sin padding-bottom · última card pegada al borde · sensación de "espacio gris debajo".
   Ahora: padding-bottom 24px da breathing room · señal visual "fin de lista" · sin desalinear grid del v3. */
.leads-stream{display:flex;flex-direction:column;gap:var(--space-4);padding:0 0 24px 0;}
.leads-stream::-webkit-scrollbar{width:8px;}
.leads-stream::-webkit-scrollbar-track{background:transparent;}
.leads-stream::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.leads-stream::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary);}

/* [Marcel 9 may · Card spacing] separación clara entre cards waiting · respiración visual */
.leads-stream__waiting{display:flex;flex-direction:column;gap:16px;}
.leads-stream__waiting .lead[data-ai="waiting"]{margin:0;}
.leads-stream__waiting .lead[data-ai="waiting"][data-expanded="true"]{margin-bottom:8px;}
.leads-stream__waiting .lead[data-ai="waiting"] .lead-wait{padding:14px 20px;min-height:68px;}

/* Subgrupos del stream · respiración entre Copiloto y Trabajados */
.leads-stream-section{margin-bottom:32px;}
.leads-stream-section__head{margin-bottom:12px;padding:0 4px;}

/* Sub-divider dentro del stream (Trabajados) · alineado al v3 base padding 6px bottom */
.stream-divider{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0 6px;}
.stream-divider__lbl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:var(--weight-medium);color:var(--text-muted);}
.stream-divider__lbl svg{width:13px;height:13px;}
.stream-divider__line{flex:1;height:1px;background:var(--border-subtle);}
.stream-divider__c{font-size:11px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;}

/* ============== HEAT TABS (pulidos) ============== */
.heat-tabs{display:flex;align-items:center;gap:2px;padding:4px;background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-4);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;}
.heat-tabs::-webkit-scrollbar{display:none;}
.heat-tab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:transparent;border:0;border-radius:var(--radius-sm);font-size:13px;font-weight:var(--weight-medium);color:var(--text-secondary);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);white-space:nowrap;}
.heat-tab:hover{background:var(--bg-card);color:var(--text-primary);}
.heat-tab[aria-pressed="true"]{background:var(--bg-card);color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 0 1px var(--border-subtle);font-weight:var(--weight-semibold);}
/* [Marcel 12 may] heat-tab counter sin pill rounded · 3px alineado al sistema */
.heat-tab__c{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;background:var(--bg-elevated);padding:1px 6px;border-radius:3px;min-width:20px;text-align:center;}
.heat-tab[aria-pressed="true"] .heat-tab__c{background:var(--text-primary);color:#fff;}
.heat-tab--hot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hot);}
.heat-tab--warm::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warm);}
.heat-tab--cold::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cold);}
.heat-tab__sep{width:1px;height:18px;background:var(--border-subtle);margin:0 4px;}

/* Filter chips (debajo de tabs) */
.stream-tools{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap;}
.stream-tools__filter{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);font-weight:var(--weight-medium);}
.stream-tools__c{margin-left:auto;font-size:12px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;}

/* ============== BUTTONS ============== */
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:var(--t-hover);}
.btn:hover{background:var(--bg-elevated);border-color:var(--border);}
.btn--primary{background:#1f2937;color:#fff;border-color:#1f2937;}
.btn--primary:hover{background:#0f172a;border-color:#0f172a;}
.btn--brand{background:var(--brand);color:#fff;border-color:var(--brand);}
.btn--brand:hover{filter:brightness(.92);}
.btn--ghost{background:transparent;border-color:transparent;color:var(--text-secondary);}
.btn--ghost:hover{background:var(--bg-elevated);color:var(--text-primary);}
.btn--sm{height:28px;padding:0 10px;font-size:var(--text-xs);}
.btn svg{width:12px;height:12px;}
.btn__kbd{margin-left:6px;padding:1px 5px;background:rgba(0,0,0,.06);border-radius:3px;font-size:10px;font-family:var(--font-mono);opacity:.7;}
.btn--primary .btn__kbd{background:rgba(255,255,255,.18);}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:var(--t-hover);}
.icon-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-subtle);}
.icon-btn svg{width:14px;height:14px;}
.icon-btn--lg{width:32px;height:32px;}
/* [v183 · au-14] suaviza salto desktop→mobile · 32px → 36px @ ≤1100 → 40 @ ≤900 → 44 @ ≤640 */
@media (max-width:1100px){.icon-btn--lg{width:36px;height:36px;}}
@media (max-width:900px){.icon-btn--lg{width:40px;height:40px;}}

/* ============== AVATARS ============== */
.av{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:10px;font-weight:var(--weight-bold);color:#fff;}
.av--xs{width:18px;height:18px;font-size:9px;}
.av--md{width:32px;height:32px;font-size:12px;}
/* [19may · Marcel "estos íconos se ven borrosos" (avatares A/P + dots)] Causa:
   hijos rasterizados en la capa GPU subpíxel de un ancestro. Fix net-safe:
   capa propia nítida (se rasteriza a su resolución real, no a la del ancestro)
   + antialias. Scoped a avatares/dots · cero cambio de layout · reversible. */
.av,.av-row .av{transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;}
.copilot-box__pill .dot,.copilot-box__icon,.now__pill svg,.activity-row__ic,.focus-pulse__tlic{transform:translateZ(0);backface-visibility:hidden;}
.av--lg{width:32px;height:32px;font-size:12px;}
.av[data-palette="1"]{background:#6366F1;}
.av[data-palette="2"]{background:#DB2777;}
.av[data-palette="3"]{background:#B45309;}
.av[data-palette="4"]{background:#10B981;}
.av[data-palette="5"]{background:#3B82F6;}

/* ============== KBD ============== */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;font-family:var(--font-mono);font-size:10px;font-weight:var(--weight-semibold);color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:4px;}

/* ============== DIVIDER ============== */
.divider{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-3) 0 var(--space-1);}
.divider__lbl{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);}
.divider__line{flex:1;height:1px;background:var(--border-subtle);}

/* ============== COPILOT CHAT (lateral, no FAB random) ============== */
.copilot-panel{position:fixed;top:0;right:0;width:400px;height:100vh;background:var(--bg-card);border-left:1px solid var(--border-subtle);box-shadow:var(--shadow-modal);z-index:var(--z-modal);transform:translateX(100%);transition:transform var(--duration-base) var(--ease-out);display:flex;flex-direction:column;}

/* [Marcel 8 may · INTEGRATION v3 #2] .copilot-fab ELIMINADO · v3 canónico
   usa el panel lateral .copilot-panel · cero FAB flotante random. */
.copilot-panel{position:fixed;top:0;right:0;width:400px;height:100vh;background:var(--bg-card);border-left:1px solid var(--border-subtle);box-shadow:var(--shadow-modal);z-index:var(--z-modal);transform:translateX(100%);transition:transform var(--duration-emphasis) var(--ease-emphasis);display:flex;flex-direction:column;}
.copilot-panel[data-open="true"]{transform:translateX(0);}
.copilot-panel__head{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle);}
.copilot-panel__icon{width:28px;height:28px;border-radius:4px;background:var(--bg-elevated);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;}
.copilot-panel__icon svg{width:14px;height:14px;}
.copilot-panel__title{font-size:var(--text-md);font-weight:var(--weight-semibold);}
.copilot-panel__sub{font-size:11px;color:var(--text-muted);}
.copilot-panel__close{margin-left:auto;}
.copilot-panel__body{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5);}
.copilot-panel__suggest{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4);}
.copilot-panel__suggest-lbl{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.copilot-panel__suggest-btn{text-align:left;padding:10px 12px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;transition:var(--t-hover);}
.copilot-panel__suggest-btn:hover{background:var(--bg-tinted);border-color:var(--border);}
.copilot-panel__input-wrap{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-subtle);background:var(--bg-card);}
.copilot-panel__input{width:100%;min-height:44px;padding:12px;font-size:var(--text-md);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);resize:none;transition:var(--t-hover);font-family:inherit;}
.copilot-panel__input:focus{outline:none;border-color:var(--text-primary);box-shadow:0 0 0 3px var(--bg-elevated);}
.copilot-panel__input-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.copilot-panel__input-hint{font-size:10px;color:var(--text-muted);}

/* ============== COPILOT · ACTIONS clickeables debajo de la respuesta + KPIs bar + pending widget + badge sidebar
   [Marcel 9 may · copiloto frontend completo] response.actions[] / response.monthlyKPIs / /copilot-pending-actions */
.copilot-actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle);}
.copilot-action-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--brand,#6366F1);background:var(--brand-tint,rgba(99,102,241,0.06));color:var(--brand,#6366F1);border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);font-family:inherit;}
.copilot-action-btn:hover{background:var(--brand,#6366F1);color:#fff;}
.copilot-action-btn__icon{font-size:12px;}

.copilot-kpis-bar{display:flex;gap:12px;padding:10px 14px;background:var(--bg-elev1,var(--bg-elevated));border-bottom:1px solid var(--border-subtle);font-size:11px;}
.copilot-kpi{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;}
.copilot-kpi__label{font-size:10px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-tertiary,var(--text-muted));}
.copilot-kpi__val{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.pending-actions-widget{background:var(--bg-card,var(--bg));border:1px solid var(--border-subtle);border-radius:4px;padding:14px 16px;margin:16px 0;}
.pending-actions-widget__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle);}
.pending-actions-widget__title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-primary);}
.pending-actions-widget__count{font-size:12px;color:var(--brand,#6366F1);font-weight:600;}
.pending-actions-widget__list{list-style:none;padding:0;margin:0;}
.pending-action-item{display:grid;grid-template-columns:1fr 2fr auto auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:13px;}
.pending-action-item:last-child{border-bottom:none;}
.pending-action-item__name{font-weight:600;color:var(--text-primary);}
.pending-action-item__reason{color:var(--text-secondary);font-size:12px;}
.pending-action-item__impact{font-weight:600;color:var(--brand,#6366F1);}
.pending-action-item button{background:var(--brand,#6366F1);color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;transition:background 150ms;}
.pending-action-item button:hover{background:var(--text-primary);}
.pending-actions-widget--empty{text-align:center;padding:16px;color:var(--text-secondary);background:var(--bg-elev1,var(--bg-elevated));border:1px solid var(--border-subtle);border-radius:4px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;}
.pending-actions-widget__icon{color:#10B981;font-weight:700;}
.pending-actions-widget__more{display:inline-block;margin-top:8px;font-size:12px;color:var(--brand,#6366F1);text-decoration:none;font-weight:500;}
.pending-actions-widget__more:hover{text-decoration:underline;}

.pending-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;background:#DC2626;color:#fff;border-radius:9px;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg,var(--bg-base));z-index:2;pointer-events:none;}

/* aiSummary destacado en cards waiting · [Marcel 9 may] */
.ai__body--highlight{position:relative;}
.ai__body--highlight .ai__title{color:var(--text-primary);font-weight:600;}
.ai__body--highlight .ai__txt{color:var(--text-secondary);}

@media (max-width:768px){
  .pending-action-item{grid-template-columns:1fr;gap:4px;}
  .pending-action-item button{justify-self:start;margin-top:4px;}
  .copilot-kpis-bar{flex-wrap:wrap;}
}

/* [Marcel 9 may] Panel copiloto · render HTML respuesta legible · sin abrumar */
.copilot-panel{max-width:460px;}
.bb-copilot-answer > div{max-height:50vh;overflow-y:auto;padding:14px 16px;}
.bb-copilot-answer ul{padding-left:20px;margin:8px 0;}
.bb-copilot-answer li{padding:3px 0;line-height:1.5;font-size:13px;}
.bb-copilot-answer strong{font-weight:600;color:var(--text-primary);}
.bb-copilot-answer em{font-style:italic;color:var(--text-secondary);}
.bb-copilot-answer code{background:var(--bg-elevated);padding:1px 5px;border-radius:3px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.bb-copilot-answer p{margin:6px 0;line-height:1.5;font-size:13px;}
.bb-copilot-answer p:last-child:not(:only-child){
  font-weight:500;
  color:var(--text-primary);
  border-top:1px solid var(--border-subtle);
  padding-top:10px;
  margin-top:12px;
}
/* Loading typing dots (3 puntos pulsantes mientras espera) */
.bb-copilot-loading::after{
  content:"";
  display:inline-block;
  width:0;
  animation:bbCopilotDots 1.4s steps(4,end) infinite;
}
@keyframes bbCopilotDots{
  0%{content:"";}
  25%{content:".";}
  50%{content:"..";}
  75%{content:"...";}
  100%{content:"";}
}

/* Backdrop */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity var(--duration-base);z-index:var(--z-modal-bg);}
.backdrop[data-open="true"]{opacity:1;pointer-events:auto;}

/* ============== ANIMATIONS ============== */
@media (prefers-reduced-motion: no-preference){
  .lead{animation:lead-in 420ms var(--ease-emphasis) backwards;}
  .lead:nth-child(1){animation-delay:30ms}
  .lead:nth-child(2){animation-delay:60ms}
  .lead:nth-child(3){animation-delay:90ms}
  .lead:nth-child(4){animation-delay:120ms}
  .lead:nth-child(5){animation-delay:150ms}
  @keyframes lead-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
}

/* ============== RESPONSIVE ============== */
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .kpi{border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);}
  .kpi:nth-child(2n){border-right:0;}
  .banners{grid-template-columns:1fr;}
  .lead__triage{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:860px){
  .stage{padding:var(--space-5) var(--space-4) var(--space-12);}
  .app{grid-template-columns:0 1fr;}
  .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:var(--z-modal);transform:translateX(-100%);transition:transform var(--duration-base) var(--ease);box-shadow:var(--shadow-modal);}
  /* [Marcel 9 may · Agente G · G-5] legacy .app[data-sidebar="open"] .sidebar eliminado · usar body.sb-open */
  .header{padding-left:var(--space-3);padding-right:var(--space-3);}
  .header__cluster--right > *:not(.btn-icon):not(.avatar){display:none;}
  .kpis{grid-template-columns:1fr 1fr;}
  .banner__item{grid-template-columns:1fr;gap:var(--space-2);}
  .banner__cta{justify-self:start;}
  .lead__row{flex-wrap:wrap;}
  .section-head{flex-direction:column;align-items:flex-start;}
}
@media (max-width:480px){
  .kpis{grid-template-columns:1fr;}
  .kpi{border-right:0;}
  .stage{gap:var(--space-5);}
  .lead__triage{grid-template-columns:1fr;}
  .lead__triage button{border-right:0;border-bottom:1px solid var(--border-subtle);}
  .lead__triage button:last-child{border-bottom:0;}
}

/* [Marcel 8 may · INTEGRATION v3 #1] Banner inline .alerts-banner ELIMINADO.
   Todas las alertas viven en el dropdown de la campana del header (notif).
   El bridge mantiene la lógica `renderAlertsBanner` solo para migrar items
   al panel de notif (no-op visual). */

/* ─── BB VIEWS · respeta v3 canónico (Marcel 8 may) · sin tabs bar ───── */
/* El v3 canónico tiene Soporte en el sidebar como item nativo · cambia .stage activo, no tabs horizontales. */
.bb-view[hidden]{display:none !important;}
.tab-pane-loader{
  margin-top:24px;padding:24px;
  background:var(--bg-card);border:1px dashed var(--border-subtle);
  border-radius:var(--radius-md);
  color:var(--text-muted);font-size:var(--text-sm);
}

/* ════ REPORTES · UI conectada a /system-metrics + /pipeline-insights + /monthly-kpis + /admin/learning-metrics-history (Marcel 10 may) ════ */
.reportes-stage{padding:16px;max-width:1400px;margin:0 auto;}
.reportes-head h2{font-size:24px;font-weight:600;margin:0 0 4px;color:var(--text-primary,#0A0A0A);letter-spacing:-0.02em;}
.reportes-sub{color:var(--text-secondary,#525252);margin:0 0 24px;font-size:14px;}
.reportes-kpis-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;}
.reportes-kpi{padding:16px 18px;background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;display:flex;flex-direction:column;gap:4px;}
.reportes-kpi--primary{border-color:var(--brand,#6366F1);background:var(--brand-tint,rgba(99,102,241,0.04));grid-column:span 2;}
.reportes-kpi__label{font-size:10px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-secondary,#525252);font-weight:500;}
.reportes-kpi__num{font-size:20px;font-weight:var(--weight-semibold);color:var(--text-primary,#0A0A0A);line-height:1.1;letter-spacing:var(--ls-snug);}
/* [CRO-28 P2 · 20 may v192] HERO destaque · 44px peso 700 letterspacing -0.04em (era 28px) */
.reportes-kpi--primary .reportes-kpi__num{font-size:44px;font-weight:var(--weight-bold);color:var(--brand,#6366F1);letter-spacing:-0.04em;line-height:1;}
@media (max-width:1280px){.reportes-kpi--primary .reportes-kpi__num{font-size:36px;}}
@media (max-width:900px){.reportes-kpi--primary .reportes-kpi__num{font-size:30px;}}
.reportes-kpi__delta{font-size:11px;color:var(--text-tertiary,#A3A3A3);}
.reportes-section__head{display:flex;align-items:center;gap:8px;margin:24px 0 12px;}
.reportes-section__head h3{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin:0;color:var(--text-primary,#0A0A0A);}
.reportes-section__icon{font-size:14px;}
.reportes-insights ul{list-style:none;padding:0;margin:0;background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;}
.reportes-insight{padding:12px 16px;border-bottom:1px solid var(--border-subtle,#ECECEC);display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--text-primary,#0A0A0A);line-height:1.5;}
.reportes-insight:last-child{border-bottom:none;}
.reportes-insight--empty{color:var(--text-secondary,#525252);}
.reportes-insight__icon{flex:0 0 auto;}
.reportes-insight__text{flex:1;}
.reportes-trends #reportes-trends-chart{background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;overflow:hidden;}
.reportes-table{width:100%;border-collapse:collapse;font-size:13px;}
.reportes-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-secondary,#525252);padding:10px 12px;border-bottom:1px solid var(--border-subtle,#ECECEC);font-weight:500;background:var(--bg-elev1,#FAFAFA);}
.reportes-table td{padding:10px 12px;border-bottom:1px solid var(--border-subtle,#ECECEC);color:var(--text-primary,#0A0A0A);}
.reportes-table tbody tr:last-child td{border-bottom:none;}
.reportes-monthly-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.reportes-monthly-stats > div{padding:14px 16px;background:var(--bg-elev1,#FAFAFA);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;}
.reportes-monthly-stats span{font-size:11px;color:var(--text-secondary,#525252);display:block;text-transform:uppercase;letter-spacing:0.04em;font-weight:500;margin-bottom:4px;}
.reportes-monthly-stats strong{font-size:16px;font-weight:600;color:var(--text-primary,#0A0A0A);}
.reportes-empty{padding:24px;text-align:center;color:var(--text-secondary,#525252);font-size:13px;}
@media (max-width:768px){
  .reportes-kpis-grid{grid-template-columns:1fr 1fr;}
  .reportes-kpi--primary{grid-column:1 / -1;}
  .reportes-monthly-stats{grid-template-columns:1fr 1fr;}
  .reportes-table{font-size:12px;}
  .reportes-table th,.reportes-table td{padding:8px;}
}
@media (max-width:414px){
  .reportes-kpis-grid{grid-template-columns:1fr;}
}

/* ════ REPORTES EJECUTIVOS · 8 secciones (Marcel 14 may LATE-NIGHT) ════ */
.reportes-exec{margin-top:32px;}
.reportes-exec__head{margin-bottom:16px;}
.reportes-exec__head h3{font-size:18px;font-weight:600;margin:0 0 4px;color:var(--text-primary,#0A0A0A);letter-spacing:-0.01em;}
.reportes-exec__sub{font-size:12px;color:var(--text-secondary,#525252);margin:0;}
.reportes-exec__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.reportes-exec__card{background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:180px;}
.reportes-exec__card header{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle,#ECECEC);}
.reportes-exec__card header h4{margin:0;font-size:13px;font-weight:600;color:var(--text-primary,#0A0A0A);letter-spacing:-0.01em;}
.reportes-exec__icon{font-size:14px;}
.reportes-exec__body{display:flex;flex-direction:column;gap:6px;flex:1;}
.reportes-exec__row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;}
.reportes-exec__row span{color:var(--text-secondary,#525252);}
.reportes-exec__row strong{color:var(--text-primary,#0A0A0A);font-weight:600;font-variant-numeric:tabular-nums;}
.reportes-exec__row strong small{font-weight:400;color:var(--text-tertiary,#A3A3A3);margin-left:4px;}
.reportes-exec__sub{font-size:11px;color:var(--text-secondary,#525252);padding-top:4px;}
.reportes-exec__empty{padding:24px 12px;text-align:center;color:var(--text-tertiary,#A3A3A3);font-size:12px;}
.rep-chart{display:flex;align-items:flex-end;gap:3px;height:70px;margin-top:6px;padding:4px 0;}
.rep-bar{flex:1;background:var(--brand,#6366F1);border-radius:2px 2px 0 0;position:relative;min-height:2px;opacity:0.85;transition:opacity 0.2s ease;}
.rep-bar:hover{opacity:1;}
.rep-bar span{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--text-tertiary,#A3A3A3);}
@media (max-width:768px){
  .reportes-exec__grid{grid-template-columns:1fr;}
}

/* ════ DISEÑO · MVP conectado a 4 endpoints LIVE (Marcel 10 may noche · auditoría master) ════ */
.diseno-stage{padding:16px;max-width:none;margin:0;width:100%;}
.diseno-head h2{font-size:24px;font-weight:600;margin:0 0 4px;color:var(--text-primary,#0A0A0A);letter-spacing:-0.02em;}
.diseno-sub{color:var(--text-secondary,#525252);margin:0 0 24px;font-size:14px;}
.diseno-team{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px;}
.diseno-team-card{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;font-size:13px;color:var(--text-primary,#0A0A0A);}
.diseno-team-card--ai{border-color:var(--brand,#6366F1);background:var(--brand-tint,rgba(99,102,241,0.06));}
.diseno-team-card .av{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;color:#fff;flex:0 0 auto;}
.diseno-team-card .av--m{background:#3B82F6;}
.diseno-team-card .av--f{background:#EC4899;}
.diseno-team-card .av--ai{background:var(--brand,#6366F1);}
.diseno-section__head{display:flex;justify-content:space-between;align-items:center;margin:24px 0 12px;}
.diseno-section__head h3{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin:0;color:var(--text-primary,#0A0A0A);}
.diseno-section__count{font-size:12px;color:var(--text-secondary,#525252);}
.diseno-projects ul{list-style:none;padding:0;margin:0;background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;overflow:hidden;}
.diseno-project{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;padding:12px 16px;align-items:center;border-bottom:1px solid var(--border-subtle,#ECECEC);font-size:13px;color:var(--text-primary,#0A0A0A);}
.diseno-project:last-child{border-bottom:none;}
.diseno-project__stage{font-size:11px;padding:2px 8px;background:var(--bg-elev1,#FAFAFA);border-radius:4px;color:var(--text-secondary,#525252);justify-self:start;}
.diseno-project__assignee{font-size:12px;color:var(--text-secondary,#525252);}
.diseno-project button{padding:6px 12px;background:var(--brand,#6366F1);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;}
.diseno-project button:hover:not(:disabled){background:color-mix(in srgb,var(--brand,#6366F1) 88%,#000);}
.diseno-project button:disabled{opacity:0.6;cursor:default;}
.diseno-actions{display:flex;gap:12px;margin:24px 0;}
.diseno-actions .btn{padding:8px 16px;border-radius:4px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;border:1px solid var(--border-subtle,#ECECEC);}
.diseno-actions .btn--secondary{background:var(--bg-card,#fff);color:var(--text-primary,#0A0A0A);}
.diseno-actions .btn--secondary:hover:not(:disabled){background:var(--bg-elev1,#FAFAFA);}
.diseno-actions .btn--primary{background:var(--brand,#6366F1);color:#fff;border-color:var(--brand,#6366F1);}
.diseno-actions .btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--brand,#6366F1) 88%,#000);}
.diseno-actions .btn:disabled{opacity:0.6;cursor:default;}
.diseno-audit-result{background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;padding:16px;margin-top:8px;}
.diseno-audit-score{font-size:32px;font-weight:600;color:var(--brand,#6366F1);line-height:1.1;margin-bottom:8px;}
.diseno-audit-issues{margin:12px 0 0;padding-left:20px;color:var(--text-secondary,#525252);font-size:13px;line-height:1.5;}
.diseno-audit-issues li{margin-bottom:4px;}
.diseno-empty{padding:16px;color:var(--text-secondary,#525252);font-style:italic;font-size:13px;text-align:center;}
@media (max-width:768px){
  .diseno-team{grid-template-columns:1fr 1fr;}
  .diseno-project{grid-template-columns:1fr;gap:6px;}
  .diseno-project__stage{justify-self:start;}
  .diseno-actions{flex-direction:column;}
  .diseno-actions .btn{width:100%;}
}

/* ════ MÓDULO SOPORTE · view del sidebar (item v3 line 824) ════ */
.soporte-filters{margin:0 var(--space-5) var(--space-4);}
.soporte-filters .heat-tabs{margin-bottom:0;}
.soporte-alerts{margin:0 var(--space-5) var(--space-4);background:color-mix(in srgb,#dc2626 6%,var(--bg-card));border:1px solid color-mix(in srgb,#dc2626 22%,var(--border-subtle));border-radius:4px;padding:12px 16px;}
.soporte-alerts .alerts-banner__head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.soporte-alerts .alerts-banner__icon{width:16px;height:16px;color:#dc2626;flex-shrink:0;}
.soporte-alerts .alerts-banner__title{font-size:13px;font-weight:600;color:var(--text-primary);}
.soporte-alerts .alerts-banner__count{font-size:11px;font-weight:600;color:#fff;background:#dc2626;padding:2px 8px;border-radius:4px;font-variant-numeric:tabular-nums;}
.soporte-alerts .alerts-banner__list{display:grid;gap:6px;}
.soporte-alert-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:4px;font-size:12px;color:var(--text-secondary);cursor:pointer;transition:border-color var(--duration-fast,160ms);}
.soporte-alert-item:hover{border-color:#dc2626;}
.soporte-alert-item__main{display:flex;align-items:center;gap:8px;min-width:0;flex:1;}
.soporte-alert-item__num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);}
.soporte-alert-item__subj{font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;}
.soporte-alert-item__reason{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#dc2626;flex-shrink:0;}
.soporte-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:10px 16px;margin:0 var(--space-5) var(--space-4);
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
}
.soporte-toolbar__left,.soporte-toolbar__right{display:flex;align-items:center;gap:var(--space-3);}
.soporte-toolbar__link{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;background:transparent;border:1px solid var(--border-subtle);
  border-radius:4px;font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--text-secondary);text-decoration:none;cursor:pointer;
  font-family:inherit;transition:var(--t-hover);
}
.soporte-toolbar__link:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border);}
.soporte-toolbar__link svg{width:14px;height:14px;}
.soporte-toolbar__lbl{font-size:var(--text-sm);color:var(--text-secondary);}
.soporte-pilot{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:4px;font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--text-secondary);cursor:pointer;font-family:inherit;
  transition:var(--t-hover);
}
.soporte-pilot:hover{background:var(--bg-elevated);}
.soporte-pilot__dot{
  width:8px;height:8px;border-radius:50%;background:var(--text-tertiary);
  flex-shrink:0;transition:background var(--duration-fast);
}
.soporte-pilot[data-pilot-on="true"]{
  background:color-mix(in oklch, var(--brand) 6%, var(--bg-card));
  border-color:var(--brand);color:var(--text-primary);
}
.soporte-pilot[data-pilot-on="true"] .soporte-pilot__dot{background:var(--brand);}
.copilot-box__skeleton{
  padding:14px var(--space-4);font-size:var(--text-sm);color:var(--text-tertiary);
}
.soporte-section{
  margin:var(--space-3) var(--space-5) 0;
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  background:var(--bg-card);overflow:hidden;
}
.soporte-section__head{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 16px;background:transparent;border:0;
  font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--text-primary);cursor:pointer;text-align:left;
  transition:var(--t-hover);
}
.soporte-section__head:hover{background:var(--bg-elevated);}
.soporte-section__chev{width:14px;height:14px;color:var(--text-secondary);transition:transform var(--duration-fast);flex-shrink:0;}
.soporte-section__head[aria-expanded="true"] .soporte-section__chev{transform:rotate(90deg);}
.soporte-section__title{font-weight:var(--weight-semibold);}
.soporte-section__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:var(--bg-elevated);color:var(--text-secondary);
  border-radius:10px;font-size:11px;font-weight:600;
}
.soporte-section__hint{
  margin-left:auto;font-size:var(--text-xs);color:var(--text-tertiary);font-weight:400;
}
.soporte-section__body{
  border-top:1px solid var(--border-subtle);padding:0;
}
.soporte-table{
  width:100%;border-collapse:collapse;font-size:var(--text-sm);
}
.soporte-table th,.soporte-table td{
  padding:10px 16px;text-align:left;border-bottom:1px solid var(--border-subtle);
  vertical-align:middle;
}
.soporte-table th{
  font-size:11px;font-weight:600;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:0.04em;
  background:var(--bg-elevated);
}
.soporte-table tbody tr{cursor:pointer;transition:background var(--duration-fast);}
.soporte-table tbody tr:hover{background:var(--bg-elevated);}
.soporte-table tbody tr:last-child td{border-bottom:0;}
.soporte-search{
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  border-bottom:1px solid var(--border-subtle);
}
.soporte-search input{
  flex:1;padding:6px 10px;border:1px solid var(--border-subtle);
  border-radius:4px;font-size:var(--text-sm);font-family:inherit;
  background:var(--bg-card);color:var(--text-primary);
}
.soporte-search input:focus{outline:none;border-color:var(--brand);}

/* [Marcel 8 may 16:00 · CSS SupportPal en clase propia · NO contaminar .lead-wait del v3]
   Cards de tickets usan .ticket-card-wait (no reusa selector base de leads) */
.ticket-card-wait[data-ticket-urgency="critico"]{border-left:3px solid var(--danger);}
.ticket-card-wait[data-ticket-urgency="alto"]{border-left:3px solid #f59e0b;}
.ticket-card-wait[data-ticket-urgency="medio"]{border-left:3px solid var(--text-tertiary);}
.ticket-card-wait[data-ticket-urgency="bajo"]{border-left:3px solid var(--border);}

.ticket-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:54px;height:22px;padding:0 8px;
  font-size:10px;font-weight:700;letter-spacing:0.04em;
  border-radius:3px;background:var(--bg-elevated);color:var(--text-secondary);
  text-transform:uppercase;
}
.ticket-badge[data-urgency="CRÍTICO"]{background:var(--hot-soft);color:var(--hot);}
.ticket-badge[data-urgency="ALTO"]{background:var(--warm-soft);color:var(--warm);}
.ticket-badge[data-urgency="MEDIO"]{background:var(--bg-elevated);color:var(--text-secondary);}
.ticket-badge[data-urgency="BAJO"]{background:var(--bg-tinted);color:var(--text-tertiary);}

/* Cuerpo expandido de ticket: thread + draft IA + acciones */
.ticket-expand{
  padding:16px var(--space-5);
  border-top:1px solid var(--border-subtle);
  background:var(--bg-base);
  display:none;
}
.lead[data-ticket-expanded="true"] .ticket-expand{display:block;}
.ticket-expand__sec{margin-bottom:14px;}
.ticket-expand__sec:last-child{margin-bottom:0;}
.ticket-expand__lbl{
  font-size:11px;font-weight:600;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:0.04em;margin-bottom:6px;
}
.ticket-expand__thread{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:10px 12px;
  font-size:var(--text-sm);color:var(--text-primary);line-height:1.55;
  max-height:240px;overflow-y:auto;
}
.ticket-expand__thread-msg{padding:6px 0;border-bottom:1px solid var(--border-subtle);}
.ticket-expand__thread-msg:last-child{border-bottom:0;}
.ticket-expand__thread-meta{font-size:11px;color:var(--text-tertiary);margin-bottom:3px;}
.ticket-expand__draft{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:12px;
  font-family:inherit;font-size:var(--text-sm);color:var(--text-primary);
  line-height:1.55;width:100%;min-height:140px;resize:vertical;
}
.ticket-expand__draft:focus{outline:none;border-color:var(--brand);}
.ticket-expand__kb{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:color-mix(in oklch, var(--brand) 5%, var(--bg-card));
  border:1px solid color-mix(in oklch, var(--brand) 20%, var(--border-subtle));
  border-radius:var(--radius-sm);font-size:var(--text-sm);
}
.ticket-expand__kb-conf{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 8px;background:var(--brand);color:#fff;
  border-radius:10px;font-size:10px;font-weight:700;
}
.ticket-expand__kb a{color:var(--brand);text-decoration:none;font-weight:var(--weight-medium);}
.ticket-expand__kb a:hover{text-decoration:underline;}
.ticket-expand__actions{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:12px;
}
.ticket-expand__actions button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 12px;
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--text-primary);cursor:pointer;transition:var(--t-hover);
}
.ticket-expand__actions button:hover{background:var(--bg-elevated);border-color:var(--border);}
.ticket-expand__actions button[data-primary]{
  background:var(--text-primary);color:#fff;border-color:var(--text-primary);
}
.ticket-expand__actions button[data-primary]:hover{background:#000;}
.ticket-expand__actions button[data-danger]{color:#991b1b;}
.ticket-expand__actions kbd{
  margin-left:6px;font-size:10px;padding:1px 5px;
  border:1px solid var(--border-subtle);border-radius:3px;
  background:var(--bg-elevated);color:var(--text-tertiary);
  font-family:'JetBrains Mono',monospace;
}
@media (max-width:768px){
  .soporte-toolbar{flex-direction:column;align-items:flex-start;gap:8px;}
  .soporte-toolbar__right{width:100%;justify-content:space-between;}
  .ticket-expand__actions{grid-template-columns:1fr 1fr;}
  .soporte-table{display:block;overflow-x:auto;}
}

/* ═══════════════════════════════════════════════════════════════
   MODAL FOCUS · Secciones Propuestas + Reuniones (Marcel 9 may)
   Spec: padding 20px · separador 1px gris · gap 16px · radius 4px ·
   look SaaS Linear/Stripe/Cloudflare · sin hover transform.
   ═══════════════════════════════════════════════════════════════ */
.focus-section{padding:20px 24px;border-top:1px solid var(--border-subtle,#ECECEC);display:flex;flex-direction:column;gap:12px;}
.focus-section + .focus-section{border-top:1px solid var(--border-subtle,#ECECEC);}
.focus-section__head{display:flex;align-items:center;gap:10px;margin:0;}
.focus-section__icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:var(--bg-elevated,#F7F7F7);border:1px solid var(--border-subtle,#ECECEC);color:var(--text-secondary,#525252);flex-shrink:0;}
.focus-section__icon svg{display:block;}
.focus-section__head h3{font-size:13px;font-weight:600;color:var(--text-primary,#0A0A0A);text-transform:uppercase;letter-spacing:0.04em;margin:0;flex:1;line-height:1.2;}
.focus-section__meta{font-size:11px;color:var(--text-muted,#737373);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;}
.focus-section__empty{padding:14px;background:var(--bg-elevated,#F7F7F7);border:1px dashed var(--border-subtle,#ECECEC);border-radius:4px;font-size:12px;color:var(--text-muted,#737373);text-align:center;line-height:1.55;}
.focus-section__empty .muted{font-size:11px;color:var(--text-tertiary,#A3A3A3);}

/* ─── Propuestas PandaDoc ─── */
.focus-proposals__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.proposal-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;background:var(--bg-card,#FFFFFF);transition:border-color 120ms ease;}
.proposal-card:hover{border-color:var(--border,#D4D4D8);}
.proposal-card__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.proposal-card__status{display:inline-flex;align-items:center;font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px;flex-shrink:0;}
.proposal-card__status.status--signed{color:#065f46;background:#dcfce7;}
.proposal-card__status.status--viewed{color:#1e40af;background:#dbeafe;}
.proposal-card__status.status--sent{color:#92400e;background:rgba(245,158,11,.14);}
.proposal-card__status.status--draft{color:var(--text-muted,#737373);background:var(--bg-elevated,#F7F7F7);}
.proposal-card__name{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text-primary,#0A0A0A);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.proposal-card__amount{font-size:12px;font-weight:600;color:var(--text-primary,#0A0A0A);font-variant-numeric:tabular-nums;}
.proposal-card__date{font-size:11px;color:var(--text-muted,#737373);flex-shrink:0;}
.proposal-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--text-secondary,#525252);}
.proposal-card__meta .muted{color:var(--text-muted,#737373);}
.proposal-card__meta .signed{color:#065f46;font-weight:600;}
.proposal-card__open{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:500;color:#3B82F6;text-decoration:none;padding:4px 0;border-radius:3px;transition:color 120ms ease;}
.proposal-card__open:hover{color:#1e40af;text-decoration:underline;}
.proposal-card__open svg{display:block;}

/* ─── Reuniones (Calendar + ClickUp) ─── */
.focus-meetings__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.meeting-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;background:var(--bg-card,#FFFFFF);transition:border-color 120ms ease;}
.meeting-card--upcoming{border-left:3px solid #10b981;}
.meeting-card--past{opacity:0.85;}
.meeting-card__date{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:64px;}
.meeting-card__day{font-size:11px;font-weight:600;color:var(--text-primary,#0A0A0A);letter-spacing:0;text-transform:capitalize;line-height:1.25;}
.meeting-card__time{font-size:11px;color:var(--text-muted,#737373);font-variant-numeric:tabular-nums;}
.meeting-card__body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.meeting-card__title{font-size:13px;font-weight:600;color:var(--text-primary,#0A0A0A);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.meeting-card__attendees{font-size:11px;color:var(--text-muted,#737373);}
.meeting-card__notes{margin-top:4px;}
.meeting-card__notes summary{cursor:pointer;font-size:11px;color:var(--text-secondary,#525252);font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:3px 0;user-select:none;}
.meeting-card__notes summary::-webkit-details-marker{display:none;}
.meeting-card__notes summary::before{content:"";display:inline-block;width:0;height:0;border-left:4px solid var(--text-muted,#737373);border-top:3px solid transparent;border-bottom:3px solid transparent;transition:transform 160ms ease;}
.meeting-card__notes[open] summary::before{transform:rotate(90deg);}
.meeting-card__notes summary:hover{color:var(--text-primary,#0A0A0A);}
.meeting-card__notes-body{margin-top:8px;padding:10px 12px;background:var(--bg-elevated,#F7F7F7);border-radius:3px;font-size:12px;line-height:1.55;color:var(--text-primary,#0A0A0A);max-height:300px;overflow-y:auto;white-space:pre-wrap;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.meeting-card__link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:var(--bg-elevated,#F7F7F7);border:1px solid var(--border-subtle,#ECECEC);color:var(--text-secondary,#525252);text-decoration:none;flex-shrink:0;transition:background 120ms ease,border-color 120ms ease;}
.meeting-card__link:hover{background:#dbeafe;border-color:#3B82F6;color:#1e40af;}
.meeting-card__link svg{display:block;}

@media (max-width:640px){
  .focus-section{padding:16px 18px;}
  .meeting-card{grid-template-columns:auto 1fr;gap:12px;}
  .meeting-card__link{grid-column:1/-1;justify-self:flex-end;}
  .proposal-card__head{gap:8px;}
}
/* ═══════════════════ FIN MODAL FOCUS sections ═══════════════════ */

/* ═══════════════════════════════════════════════════════════
   [Marcel 9 may · Agente G] Responsive mobile fixes críticos G-1 → G-8
   ═══════════════════════════════════════════════════════════ */
/* G-1 · KPI primary mobile override */
/* [Marcel 10 may · auditoría v3] 28px desktop · 24px tablet · 22px mobile */
@media (max-width: 768px) {
  .kpi__num { font-size: 16px !important; }
  .kpi--primary .kpi__num { font-size: 24px !important; }
}
@media (max-width: 414px) {
  .kpi--primary .kpi__num { font-size: 22px !important; }
}

/* G-2 · Modal Componer Send siempre visible · sticky bottom · [E2 v200/v203 RESTORE] iOS no-zoom + dvh + safe-area */
@media (max-width: 768px) {
  .focus-card .compose-body-editable {
    min-height: 120px !important;
    max-height: calc(100dvh - 320px); /* dvh para iOS keyboard handling */
    font-size: 16px !important; /* iOS NO zoomea forms ≥16px · UX crítico */
  }
  .focus-compose-panel input,
  .focus-compose-panel textarea {
    font-size: 16px !important; /* mismo fix iOS auto-zoom */
  }
  .focus-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg-card,#fff);
    padding: 8px var(--space-5);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 5;
    border-top: 1px solid var(--border-subtle);
  }
  .focus-compose-panel .compose-row {
    grid-template-columns: 60px 1fr !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  .focus-compose-panel .compose-cc-pills {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .focus-compose-panel .compose-cc-pill {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  .focus-compose-panel .compose-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg-card,#fff);
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-subtle);
    z-index: 4;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .focus-compose-panel .compose-btn {
    flex: 1 1 auto;
    min-width: 90px;
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* G-3 · Tabs principales scroll horizontal · sin scrollbar visible */
@media (max-width: 768px) {
  .tabs-main {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs-main::-webkit-scrollbar { display: none; }
  .tabs-main .tab { flex-shrink: 0; }
  .heat-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .heat-tabs::-webkit-scrollbar { display: none; }
  .heat-tabs .heat-tab,
  .heat-tabs > * { flex-shrink: 0; }
  .focus-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .focus-tabs::-webkit-scrollbar { display: none; }
  .focus-tabs > * { flex-shrink: 0; }
}

/* G-4 · Panel notif width adaptativo */
@media (max-width: 414px) {
  .notif-panel,
  [data-notif-panel] {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
  }
}

/* [Marcel 22 may v260 · panel notif mobile NO cubrir footer del browser]
   Marcel: 'en mobile no se ve completo, hay que hacer scroll para ver la parte de abajo'.
   Fix: max-height respeta safe-area iOS + footer browser nativo · scroll interno propio. */
@media (max-width: 768px) {
  .notif-panel,
  [data-notif-panel] {
    max-height: calc(100vh - env(safe-area-inset-bottom, 0px) - 120px) !important;
    overflow-y: auto !important;
    padding-bottom: env(safe-area-inset-bottom, 24px) !important;
  }
  .notif__list {
    max-height: calc(100vh - env(safe-area-inset-bottom, 0px) - 200px) !important;
  }
}

/* G-6 · Backdrop-blur reducir mobile */
@media (max-width: 768px) {
  .hdr { backdrop-filter: blur(8px) !important; }
}
@media (max-width: 414px) {
  .hdr {
    backdrop-filter: blur(0) !important;
    background: rgba(255,255,255,0.95);
  }
}

/* G-7 · Touch targets 44x44 mínimo (accesibilidad mobile) */
@media (max-width: 768px) {
  .lead__triage button {
    min-height: 44px !important;
    height: 44px !important;
  }
  .icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .email-pill[aria-expanded] {
    min-height: 44px !important;
    padding: 12px !important;
  }
}

/* G-8 · Banners stack <768px (override del 1280px) */
@media (max-width: 768px) {
  .banners {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}
/* ═══════════════════ FIN responsive mobile G-1 → G-8 ═══════════════════ */

/* ════════════════════════════════════════════════════════════
   [Marcel 11 may noche · fix mobile v3 fiel · regla 7AG]
   Bug: doble hamburguesa (uno arriba pequeño + otro inline breadcrumb).
   Fix v3: ÚN solo hamburger fixed top-left (40x40) · drawer 280px overlay.
   - Eliminados todos los hamburgers legacy (CSS hide + JS purge)
   - Sidebar drawer · backdrop blur · animación suave
   - Notificaciones panel responsive width
   ═══════════════════════════════════════════════════════════ */

/* HAMBURGUESA V3 · botón único fixed top-left (siempre fuera del header) */
.sb-toggle-v3 {
  display: none;
  position: fixed;
  top: 14px;
  left: 12px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #ECECEC);
  border-radius: 4px;
  cursor: pointer;
  z-index: 1000;
  color: var(--text-primary, #0A0A0A);
  padding: 0;
  transition: background 150ms ease, transform 100ms ease;
}
.sb-toggle-v3:hover { background: var(--bg-elevated, #F7F7F7); }
.sb-toggle-v3:active { transform: scale(0.96); }
.sb-toggle-v3 svg { display: block; }

/* Backdrop V3 · cubre todo · click para cerrar */
.sb-backdrop-v3 {
  position: fixed;
  inset: 0;
  /* [11 jun] transparente · el drawer es menú, no popup (no oscurecer) */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  /* [P1#10 · 18may] Sincronizado EXACTO con el slide del drawer (.sb
     transform 280ms cubic-bezier(0.83,0,0.17,1) · l.8331/bloque final) →
     apertura/cierre del menú cohesiva y premium (backdrop y panel viajan
     juntos, mismo timing/curva · cero desfase percibido). */
  transition: opacity 280ms cubic-bezier(0.83, 0, 0.17, 1);
}

/* [Marcel 12 may madrugada · regla 7AI · CERO hamburger en TODOS los breakpoints]
   Sidebar SIEMPRE visible: 240px desktop · 200px tablet · 56px mobile.
   Hamburgers + backdrops ocultos defense in depth (CSS + JS purge). */
.sb-toggle-v3,
.sb-backdrop-v3,
.bb-mobile-backdrop,
.hdr__hamburger,
[data-mobile-menu-toggle],
#sb-mobile-toggle,
.hdr [class*="hamburg"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* DESKTOP ≥1025px · sidebar 240px expandido (default · igual que antes) */
@media (min-width: 1025px) {
  .sb-toggle-v3,
  .sb-backdrop-v3,
  .bb-mobile-backdrop { display: none !important; }
  /* Header SIN padding-left extra (no hay hamburger flotante que esquivar) */
  .hdr { padding-left: var(--space-4, 12px) !important; }
}

/* TABLET 768-1023px · sidebar 200px visible · sticky · NO drawer */
@media (max-width: 1023px) and (min-width: 768px) {
  .sb {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    height: 100vh !important;
    width: 200px !important;
    transform: none !important;
    box-shadow: none !important;
    border-right: 1px solid var(--border-subtle, #ECECEC) !important;
    z-index: 100 !important;
  }
  .hdr { padding-left: var(--space-4, 12px) !important; }
}

/* MOBILE ≤767px · sidebar 56px iconos · sticky · NO drawer */
@media (max-width: 767px) {
  .sb {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    height: 100vh !important;
    width: 56px !important;
    transform: none !important;
    box-shadow: none !important;
    border-right: 1px solid var(--border-subtle, #ECECEC) !important;
    z-index: 100 !important;
  }
  .hdr { padding-left: var(--space-4, 12px) !important; }
}

/* MOBILE pequeño ≤480px · banners + grids stack vertical · KPIs 2x2 */
@media (max-width: 480px) {
  .hero-kpis { grid-template-columns: 1fr 1fr !important; gap: var(--space-2, 6px); }
  .banners-grid,
  .banners--secondary { grid-template-columns: 1fr !important; }
  .pipe-embed { grid-template-columns: repeat(2, 1fr) !important; }
}

/* NOTIFICACIONES · panel responsive mobile (≤768px · ancho casi-full) */
@media (max-width: 768px) {
  #notif,
  .notif-panel,
  [data-notif-panel],
  .bb-notif-panel {
    position: fixed !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    top: 60px !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    border-radius: 4px !important;
    z-index: 1100 !important;
  }
}

/* HERO KPIs · stack legible mobile */
@media (max-width: 768px) {
  .kpis {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    overflow-x: visible !important;
  }
  .kpi {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 10px 12px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--bg-card);
  }
  .kpi__lbl {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    color: var(--text-muted);
  }
  .kpi__num {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .kpi__delta {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .kpi--primary {
    grid-column: 1 / -1;
  }
  .kpi--primary .kpi__num {
    font-size: 24px !important;
  }
}
@media (max-width: 414px) {
  .kpis {
    grid-template-columns: 1fr !important;
  }
  .kpi--primary { grid-column: auto; }
  .kpi--primary .kpi__num { font-size: 22px !important; }
}

/* BANNERS · stack mobile · accionable */
@media (max-width: 768px) {
  .banners {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
  }
  .banner { padding: 0 !important; }
  .banner__head {
    padding: 12px !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .banner__title {
    font-size: 13px !important;
    gap: 6px !important;
  }
  .banner__count { font-size: 12px !important; opacity: 0.7; }
  .banner__item { padding: 12px !important; }
  .banner__row,
  .banner__row1,
  .banner__row2,
  .banner__row3 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .banner__row3 { grid-template-columns: 1fr !important; gap: 4px !important; }
  /* [Marcel 11 may LATE 2] banner__name NO debe ser protagonista · alinear con resto */
  .banner__name { font-size: 12px !important; font-weight: 500 !important; color: var(--text-primary) !important; }
  .banner__amount { font-size: 13px !important; }
  .banner__open,
  .banner__act,
  .banner__cta {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    flex: 1 0 auto;
    justify-content: center;
  }
}

/* BOTONES kbd · ocultar mobile (bug "EArmar propuesta") */
@media (max-width: 768px) {
  button kbd,
  [data-action] kbd,
  .lead__triage kbd,
  .focus-footer kbd,
  .banner__open kbd,
  .banner__act kbd,
  .focus-actions kbd {
    display: none !important;
  }
  .focus-footer {
    flex-wrap: wrap !important;
    font-size: 11px;
    padding: 8px;
    gap: 6px !important;
  }
}

/* TOUCH TARGETS · 44px mínimo accesibilidad */
@media (max-width: 768px) {
  button:not(.icon-btn--inline):not(.kbd):not(.tag),
  a[role="button"],
  [data-action]:not(.tag):not([data-inline]) {
    min-height: 44px;
  }
  .focus-actions button { min-height: 44px !important; }
}

/* ═══════════════════ FIN responsive mobile crítico 9 may ═══════════════════ */

/* ═══════════════════════════════════════════════════════════
   TRIAGE v3 · Botones Ganar/Perder/Archivar prominentes
   Marcel 10 may 03:00 · diseño v3 con jerarquía clara · colores diferenciados
   - Ganar = verde sutil (primario CTA cierre)
   - Perder = rojo sutil (secundario)
   - Archivar = neutral gris
   - Aplica a cards waiting expandidas (.lead__triage) Y modal focus (.focus-actions)
   ═══════════════════════════════════════════════════════════ */

/* [Marcel 11 may LATE · regla 7AA] Bloque override anterior con border:1px individual + border-radius
   se ELIMINÓ porque NO era v3. El v3 aprobado (dashboard-v3.html línea 513-517) define:
   .lead__triage{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid border-subtle;}
   .lead__triage button{background:bg-elevated;border:0;border-right:1px solid border-subtle;...}
   .lead__triage button:hover{background:bg-tinted;color:text-primary;}
   Esas reglas ya viven en líneas ~1001-1020 + ~1016 (hover sutil). NO override aquí. */
.lead__triage button .kbd,
.lead__triage button kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--text-secondary);
}

/* Botones triage Ganar/Perder/Archivar · v3 fiel (regla 7AA INVIOLABLE)
   Todos neutros gris según v3 base línea 513-517 · NO colorizar por estado
   Solo flash verde momentáneo en post-click success (1s) */
.lead__triage button.lead__triage-success {
  background: #16a34a !important;
  color: #fff !important;
}

/* Modal focus · footer acciones · primario brand · resto outline v3 */
.focus-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 12px var(--space-5) !important;
  border-top: 1px solid var(--border-subtle) !important;
  background: var(--bg-card);
  grid-template-columns: unset !important;
}
.focus-actions .focus-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  flex: 1 1 auto;
}
.focus-actions .focus-btn-primary {
  background: var(--brand, #6366F1) !important;
  color: #fff !important;
  border: 1px solid var(--brand, #6366F1) !important;
  flex: 1.6 1 auto;
  font-weight: 600 !important;
}
.focus-actions .focus-btn-primary:hover:not(:disabled) {
  background: var(--brand-hover, #5b5fde) !important;
}
/* Modal focus actions · botones secundarios v3 fiel · neutros gris (regla 7AA) */
.focus-actions .focus-btn-win,
.focus-actions .focus-btn-lose,
.focus-actions .focus-btn-archive {
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  background: var(--bg-elevated) !important;
}
.focus-actions .focus-btn-win:hover,
.focus-actions .focus-btn-lose:hover,
.focus-actions .focus-btn-archive:hover {
  background: var(--bg-tinted) !important;
  color: var(--text-primary) !important;
}

/* Mobile · botones triage 44px touch + wrap si no caben */
@media (max-width: 768px) {
  .lead__triage {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .lead__triage button,
  .lead__triage button[data-triage] {
    min-height: 44px !important;
    height: 44px !important;
    flex: 1 1 calc(33.33% - 4px) !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  .focus-actions {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .focus-actions .focus-btn {
    min-height: 44px !important;
    height: 44px !important;
    flex: 1 1 calc(50% - 6px) !important;
  }
  .focus-actions .focus-btn-primary {
    flex: 1 1 100% !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   REWORK MOBILE UX/UI/CRO v3 · 9 may noche
   Marcel: "se ve mal distribuido en mobil todo, mal diagramado, poco claro"
   - Header: hamburger izquierda · iconos a la DERECHA
   - KPIs: cards limpias · primary fila completa · jerárquicos
   - Skeletons: shimmer animado moderno (no barras planas)
   - Banners: jerarquía clara · tipografía SaaS · 44px touch targets
   - Espaciado entre secciones · respiración visual
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Header: distribución space-between · hamburger izq · iconos der */
  .hdr__row {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  /* Hamburger SIEMPRE primero · pegado a la izquierda */
  #sb-mobile-toggle.hdr__hamburger {
    order: -10 !important;
    flex-shrink: 0;
    margin-right: 4px;
  }
  /* Breadcrumb ocupa el medio · ellipsis si no cabe */
  .hdr__bc {
    flex: 1 1 auto !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px !important;
    order: 0 !important;
  }
  .hdr__bc strong { font-size: 13px !important; }
  /* Spacer ya no necesita empujar · flex-1 del bc lo hace · ocultar para evitar gap raro */
  .hdr__spacer { display: none !important; }
  /* Cluster de iconos SIEMPRE al final · pegado a la derecha */
  .hdr__cluster {
    order: 10 !important;
    flex-shrink: 0;
    gap: 4px !important;
    margin-left: auto !important;
  }
  /* Ocultar elementos no esenciales en móvil/tablet */
  .hdr__cluster .now { display: none !important; }
  .hdr__cluster .av,
  .hdr__cluster .av--md { display: none !important; }
}
@media (max-width: 414px) {
  .hdr__row { padding: 8px 10px !important; gap: 6px !important; }
  .hdr__bc { font-size: 12px !important; }
  .hdr__bc strong { font-size: 12px !important; }
  .hdr__bc svg { display: none !important; } /* ocultar separador chevron · ahorra ancho */
  /* CMD+K solo desktop · usar slash en mobile */
  .hdr__cluster #cmdk-open { display: none !important; }
  .hdr__cluster { gap: 2px !important; }
  .hdr__cluster .icon-btn,
  .hdr__cluster .icon-btn--lg { width: 32px !important; height: 32px !important; }
}

/* KPIs · diseño card limpio v3 mobile */
@media (max-width: 768px) {
  .kpis {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    margin: 0 12px 4px !important;
    background: var(--bg-elev1, #FAFAFA);
    border-radius: 4px;
    border: 1px solid var(--border-subtle, #ECECEC);
    box-shadow: none !important;
  }
  .kpi {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px !important;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-subtle, #ECECEC);
    border-radius: 4px;
    min-width: 0;
    gap: 4px;
  }
  .kpi__lbl {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text-muted, #737373);
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.2;
  }
  .kpi__num {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--text-primary, #0A0A0A);
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: -0.02em;
  }
  .kpi__delta,
  .kpi__sublabel {
    font-size: 11px !important;
    color: var(--text-tertiary, #A3A3A3);
    margin: 0 !important;
    font-weight: 500;
  }
  /* Primary KPI ocupa fila completa · acento marca · jerarquía */
  .kpi--primary {
    grid-column: 1 / -1 !important;
    border-color: var(--brand, #6366F1) !important;
    background: var(--brand-tint, rgba(99,102,241,0.06)) !important;
  }
  .kpi--primary .kpi__num {
    font-size: 24px !important;
    color: var(--brand, #6366F1) !important;
    font-weight: 700 !important;
  }
  .kpi--primary .kpi__lbl {
    color: var(--brand, #6366F1) !important;
  }
}
@media (max-width: 414px) {
  .kpis { grid-template-columns: 1fr !important; gap: 6px !important; padding: 10px !important; margin: 0 10px 4px !important; }
  .kpi--primary { grid-column: auto !important; }
  .kpi--primary .kpi__num { font-size: 22px !important; }
  /* [Marcel 10 may · auditoría v3 24-32px sustained] mobile <414px = 22px */
}

/* Skeletons modernos con shimmer · cubre selectores genéricos del brief
   [Marcel 13 may · regla 7EH] 2.2s cubic-bezier elegante · contraste reducido */
.skeleton, [data-skeleton] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,0.025) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.025) 100%) !important;
  background-size: 200% 100% !important;
  animation: bb-shimmer 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  border-radius: 4px;
}
[data-theme="dark"] .skeleton,
[data-theme="dark"] [data-skeleton] {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%) !important;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton, [data-skeleton] { animation: none !important; background: rgba(0,0,0,0.04) !important; }
}

/* Banner Reuniones / Propuestas / Programados mobile · jerarquía clara */
@media (max-width: 768px) {
  .banner {
    border-radius: 4px !important;
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-subtle, #ECECEC);
    margin: 0 12px !important;
    overflow: hidden;
  }
  .banner__head {
    padding: 14px 14px 10px !important;
    border-bottom: 1px solid var(--border-subtle, #ECECEC);
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .banner__title {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary, #0A0A0A);
    gap: 6px !important;
  }
  .banner__title svg { width: 14px !important; height: 14px !important; }
  .banner__count {
    font-size: 11px !important;
    color: var(--text-muted, #737373);
    font-weight: 500;
    margin-left: 4px !important;
  }
  .banner__item, .banner__row {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--border-subtle, #ECECEC);
  }
  .banner__list .banner__item:last-child,
  .banner__list .banner__row:last-child { border-bottom: none !important; }
  .banner__name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #0A0A0A);
  }
  .banner__amount {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #0A0A0A);
  }
  /* Skeleton dentro de banner · márgenes consistentes */
  .banner .bb-skeleton-card { padding: 14px !important; }
}

/* Espaciado entre secciones · respiración visual mobile */
@media (max-width: 768px) {
  .stage {
    padding: 0 !important;
    gap: 16px !important;
  }
  .stage > section,
  .stage > article,
  .stage > .banners,
  .stage > .kpis,
  .stage > .leads-stream-section,
  .stage > .copilot-box,
  .stage > .cartera {
    margin-bottom: 0 !important;
  }
  /* Banner grupos · gap entre sí */
  .banners {
    gap: 12px !important;
    padding: 0 !important;
  }
  /* Heat tabs · respira separación */
  .heat-tabs {
    margin: 0 12px !important;
  }
}
/* ═══════════════════ FIN REWORK MOBILE UX/UI/CRO v3 9 may ═══════════════════ */

/* ============= ANIMACIONES MODERNAS · SISTEMA UNIFICADO ============= */

/* Curvas de animación · cubic-bezier modernos */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === ENTRADA CARDS · stagger fade-in slide-up === */
@keyframes bb-card-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.lead-wait, .copilot-box, .banner, .reportes-kpi, .pending-action-item,
.diseno-team-card, .diseno-project, .server-status-stat, .weekly-note-item,
.kpi {
  animation: bb-card-in var(--t-base) var(--ease-out) both;
}

/* Stagger delays para sensación natural */
.leads-stream__waiting > .lead:nth-child(1) { animation-delay: 0ms; }
.leads-stream__waiting > .lead:nth-child(2) { animation-delay: 30ms; }
.leads-stream__waiting > .lead:nth-child(3) { animation-delay: 60ms; }
.leads-stream__waiting > .lead:nth-child(4) { animation-delay: 90ms; }
.leads-stream__waiting > .lead:nth-child(5) { animation-delay: 120ms; }
.leads-stream__waiting > .lead:nth-child(6) { animation-delay: 150ms; }
.leads-stream__waiting > .lead:nth-child(n+7) { animation-delay: 180ms; }

/* === EXPAND/COLLAPSE CARDS === */
.lead[data-expanded="true"] .lead__row,
.lead[data-expanded="true"] .lead-meta,
.lead[data-expanded="true"] .ai,
.lead[data-expanded="true"] .lead__foot,
.lead[data-expanded="true"] .lead__triage {
  animation: bb-expand-in var(--t-base) var(--ease-out) both;
}

@keyframes bb-expand-in {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === MODALES · fade + scale === */
.focus-overlay,
.bb-simple-modal-overlay,
.bb-confirm-overlay {
  animation: bb-overlay-in var(--t-base) var(--ease-out) both;
}

.focus-card,
.bb-simple-modal,
.bb-confirm-dialog {
  animation: bb-modal-pop var(--t-base) var(--ease-spring) both;
}

@keyframes bb-overlay-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes bb-modal-pop {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* === BOTONES · feedback al click === */
button:not([disabled]):active,
.btn:not([disabled]):active,
[data-action]:not([aria-disabled="true"]):active {
  transform: scale(0.97);
  transition: transform 80ms var(--ease-out);
}

button, .btn, [data-action] {
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

/* Botón primario · hover sin glow (v3 fiel) */
/* Botón Ganar · hover sin glow (v3 fiel) */
/* Botón Perder · hover sin glow (v3 fiel) */

/* === NAVEGACIÓN MODAL FOCUS · fade-slide cinemático tipo Linear/Stripe ===
   [Marcel 14 may FINAL · regla 7EF] Marcel verbatim: "tab switching modal · cambio brusco · debería ser fade-slide"
   Fix: slide-in 200ms + opacity 160ms con stagger 40ms · feel premium. */
/* [Marcel 18 may] "el cambio de pestana tiene un parpadeo molesto · no se
   siente fluido, integrado como un sistema robusto que no cambia, solo
   aparece rapido y fluida la informacion". Raiz: arrancaba en opacity:0 +
   translateX(10px) sobre TODO el cuerpo -> blink + desplazamiento en cada
   click. Ahora SOLO el panel que aparece hace un fade sutil y muy corto,
   sin opacity:0, sin movimiento. El sistema no se mueve · la info aparece. */
.focus-overlay[data-tab-changing="true"] .focus-summary,
.focus-overlay[data-tab-changing="true"] .focus-compose-panel{
  animation: bb-tab-fade-slide 110ms ease-out both;
}

@keyframes bb-tab-fade-slide {
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}

/* Compose panel · sin slide (era parte del parpadeo) · solo fade corto */
.focus-overlay .focus-compose-panel{
  transition: opacity 140ms ease-out;
}

/* === TOAST · slide-in desde abajo === */
.bb-toast,
.toast,
[role="status"] {
  animation: bb-toast-in var(--t-base) var(--ease-spring) both;
}

@keyframes bb-toast-in {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === BADGE PULSE · alertas rojas === */
.pending-badge,
.notif-badge--alert,
[data-badge-pulse] {
  animation: bb-badge-pulse 2s ease-in-out infinite;
}

@keyframes bb-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* === SIDEBAR ITEMS · hover slide ===
   [Marcel 14 may regla 7EG] Eliminado padding-left:18px en hover que generaba shift visible
   conflictivo con el ::before slide-in. El styling oficial vive en .sb__item líneas 123-135.
   Mantenemos solo el reset del :hover en .sb__nav a si existiera (sidebar legacy). */
.sb__nav a {
  transition: background-color 200ms var(--ease-out),
              color 200ms var(--ease-out);
}

/* === TABS · underline animado === */
.heat-tab, .focus-tab, .tabs-main .tab,
.bb-soporte-filter-tab {
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}

.heat-tab::after, .focus-tab::after,
.tabs-main .tab::after,
.bb-soporte-filter-tab::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: calc(100% - 16px);
  height: 2px;
  background: var(--brand);
  transition: transform var(--t-base) var(--ease-out);
  transform-origin: center;
}

.heat-tab--active::after, .focus-tab--active::after,
.tabs-main .tab--active::after,
.bb-soporte-filter-tab--active::after {
  transform: translateX(-50%) scaleX(1);
}

/* === KPIs · número fade al actualizar === */
.kpi__num[data-updated] {
  animation: bb-num-update 360ms var(--ease-out);
}

@keyframes bb-num-update {
  0% { opacity: 0.4; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === EMAIL PILL · expand chevron rotate === */
.email-pill[aria-expanded="true"] svg.chevron,
.lead-wait[data-expanded="true"] .chevron-toggle svg {
  transform: rotate(180deg);
  transition: transform var(--t-base) var(--ease-out);
}

/* === SHIMMER skeleton · ya existe pero asegurar ===
   [Marcel 13 may · regla 7EH] 2.2s cubic-bezier elegante · contraste reducido */
.bb-skeleton, .skeleton {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.025) 0%,
    rgba(0,0,0,0.05) 50%,
    rgba(0,0,0,0.025) 100%);
  background-size: 200% 100%;
  animation: bb-shimmer 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* [Marcel 13 may · regla 7EH] NOTE: keyframes principales están definidos arriba (línea ~431)
   con respiración pulsante opacity 0.85→1. Este duplicado se reemplaza por alias seguro. */

/* === COPILOT TYPING DOTS === */
.copilot-typing span {
  animation: bb-typing 1.4s ease-in-out infinite;
}
.copilot-typing span:nth-child(1) { animation-delay: 0s; }
.copilot-typing span:nth-child(2) { animation-delay: 0.2s; }
.copilot-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bb-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* === STATUS PILL · dot pulse subtle === */
.status-pill::before,
.status-pill__dot {
  animation: bb-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes bb-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* === FOCUS · suave al input · v3 fiel sin glow extra === */
input:focus, textarea:focus, [contenteditable]:focus {
  outline: none;
  border-color: var(--brand);
  transition: border-color var(--t-fast) var(--ease-out);
}

/* === PAGE TRANSITIONS · entre vistas ===
   [Marcel 11 may LATE · BUGFIX CRÍTICO EMERGENCIA]
   Chrome 147 no ejecuta animation-fill-mode:both/backwards · elementos stuck en 0%.
   Fix: anular animations + opacity 1 fixed (pérdida fade-in 0.22s · ganancia: dashboard FUNCIONA).
   NO REMOVER sin reintroducir el bug visual confirmado vía Claude in Chrome MCP. */
.bb-view {
  animation: bb-view-in var(--t-slow) var(--ease-out) both;
}

@keyframes bb-view-in {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* [SWEEP 16 may · GSAP gradual · experimento controlado con Marcel presente]
   El incidente 11 may (pantalla en blanco) fue por @keyframes con
   `animation-fill-mode: both/backwards` que quedaban stuck en frame 0% (opacity:0)
   cuando el motor no los corría. La PROTECCIÓN REAL es `animation: none !important`
   (prohíbe TODO @keyframes/fill-mode peligroso) → se MANTIENE.
   Se suelta el !important de opacity/transform para permitir el patrón seguro
   moderno (transición + @starting-style abajo): estado base SIEMPRE visible
   (opacity:1) · sin keyframes · si el navegador no soporta @starting-style la
   card aparece visible al instante (degradación elegante · imposible blank). */
.bb-view, .lead-wait, .copilot-box, .banner, .reportes-kpi, .pending-action-item,
.diseno-team-card, .diseno-project, .server-status-stat, .weekly-note-item,
.kpi, .stage, .lead {
  animation: none !important;   /* guard fill-mode 11 may · NO quitar */
  opacity: 1;                   /* base visible · sin !important: lo controla la transición */
  transform: none;
}

/* [SWEEP 16 may · GSAP v7 · STOP definitivo] 7 intentos de animación del
   copiloto rechazados a ciegas (arcoíris, halo, cascada, casi-transparente,
   estático, doble-borde). Marcel: "se ve doble borde, no limpio". Causa: el
   ::before 3px + el border-left:3px v3 = 2 bandas adyacentes. ELIMINADO TODO.
   El copiloto vuelve 100% al diseño v3 ORIGINAL · limpio · sin overrides.
   La animación "IA viva" requiere otro método de trabajo (ojo de Marcel en
   loop tight / referencia exacta / browser MCP) · NO más deploys ciegos que
   la empeoran. Cero CSS añadido aquí = cero riesgo, cero doble borde. */

/* [SWEEP 16 may · v9 · REFERENCIA EXACTA de Marcel · "líquido/fluido/constante
   · mente maestra conectando"]. IA VIVA detrás del ÍCONO del copiloto (NO la
   caja → no toca v3, no doble borde · net-safe: .copilot-box__icon NO está en
   el net anti-stuck · animación SOLO en pseudo-elementos).
   Monocromo índigo (sin arcoíris, sin halo borroso): un blob LÍQUIDO que morfa
   su contorno (::before) + un barrido de "datos fluyendo" que orbita (::after).
   Sutil pero presente · degrada a blob estático visible si reduced-motion. */
/* [v18+v21] Copiloto ícono/pill REVERTIDOS 100% al v3 ORIGINAL por orden de
   Marcel ("prefiero sin, como estaba antes"). Cero plasma, cero gradiente,
   cero sheen, cero animación custom. El chip usa la regla base v3 (línea
   ~1233: blanco + rayo índigo). NO reintroducir nada en el ícono ni el pill
   sin pedido explícito de Marcel. Capítulo animación copiloto: CERRADO. */

/* [Marcel 17may] "no me gusta ese borde que se ve al hover" — había reglas
   (en styles.css + inline) que en :hover metían borde ÍNDIGO + halo + lift
   sobre las cards de lead. Override autoritativo: en hover la card queda
   IGUAL que en reposo (borde sutil neutro, sin índigo, sin transform).
   Coherente con feedback_no_hover_lead_task (cards informativas sin hover). */
.copilot-box__body > .lead:hover,
.cartera__list > .lead-wait:hover,
.cartera__list .lead-wait:hover,
.leads-stream .lead:hover,
.lead:hover,
.lead-wait:hover{
  border-color:var(--border-subtle) !important;
  box-shadow:var(--shadow-elev-1, 0 1px 2px rgba(0,0,0,.04)) !important;
  transform:none !important;
  background:var(--bg-card) !important;
}

/* [SWEEP 16 may · pixel-perfect cards copiloto · spec agente verificado]
   Bug real: en la columna más angosta del copiloto las cards se SUPERPONÍAN
   (email + avatares con margin negativo + tags + botón "Generar email IA"
   encimados). Causa textbook: flex sin protección de compresión. Fix de
   ROBUSTEZ aditivo (NO cambia el diseño v3 · solo evita el colapso). */
.av-row{display:inline-flex;align-items:center;flex:0 0 auto;}
.av{flex:0 0 auto;}
.lead__row{min-width:0;}
.lead__row > .lead__email{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.lead__row > .av-row,
.lead__row > .lead__row-tags{flex:0 0 auto;}
.lead__foot{flex-wrap:wrap;gap:8px;}
.lead__assigned{min-width:0;}
.lead__assigned-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.lead__foot > .btn{flex:0 0 auto;}
.copilot-box__body{padding:var(--space-5) var(--space-4);}

/* === [Marcel 16 may · regla 7T REFORZADA · hover Trabajados sin "línea/halo" extraña] ===
   Marcel: "esa linea divisora que se ve al seleccionar el cuadro, como hover, se ve
   extraña e incomoda". El glow indigo (0 8px 32px rgba(99,102,241,.15)) sobre la tira
   fina de una card Trabajados se ve como una línea/halo rara. Regla 7T: hover = solo
   borde sutil + sombra mínima Cloudflare/Linear, sin halo de color. Mayor especificidad
   (.cartera__list ancestro) gana sin reordenar el v3 base · aditivo. */
.cartera__list .lead-wait:hover{
  border-color:var(--border, rgba(0,0,0,0.12));
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  background:var(--bg-card);
}
[data-theme="dark"] .cartera__list .lead-wait:hover{
  border-color:var(--border, rgba(255,255,255,0.12));
  box-shadow:0 1px 2px rgba(0,0,0,0.20);
  background:var(--bg-card);
}

/* === [Marcel 12 may 19:55 · regla 7BM ANTI-REGRESIÓN PILLS] ===
   Marcel: "por qué sigo viendo bordes redondos si te dije que no quiero".
   Pills + chips + tags + email-pill TODOS en 4px estricto · NUNCA 999px.
   Circle elements (avatares, dots, status-pill__dot) NO afectados.
   Esta regla es la última red de defensa · sobre-escribe cualquier hardcoded 999px. */
.email-pill,
.action-chip,
.tag,
.status-pill,
.lead-wait__amount,
.lead__amount,
.kbd,
.lead-meta__count,
.email-pill--waiting,
.email-pill--sent,
.email-pill--reply {
  border-radius: 4px !important;
}
/* Circle exceptions · todo lo que SÍ debe ser redondo */
.av, .av--xs, .av--sm, .av--md, .av--lg,
.status-pill__dot, .email-pill__dot, .pulse, .dot,
.sb__system-status-dot, .copilot-box__pill .dot,
.score__num, .lead__triage button[data-triage] svg circle {
  /* heredan su border-radius original · regla NO les aplica */
}

/* === [Marcel 12 may 19:55 + 13 may LATE FINAL + 14 may LATE-NIGHT · regla 7BN MARGIN-TOP 15PX ANTI-REGRESIÓN] ===
   Marcel pidió 10+ veces "margin top 15px" · regresaba en cada deploy
   14 may v3: REGRESIÓN EN MODAL FOCUS · agregado selector para .focus-overlay + modal lead
   FIX DEFINITIVO quadruple-layer specificity con :is() + cascada blindada · NUNCA REMOVER */
:root{--bb-lead-meta-mt:15px;}
.lead .lead-meta,
.lead .lead-meta[class],
:is(.lead[data-ai="actionable"], .lead[data-ai="waiting"][data-expanded="true"]) > .lead-meta,
.copilot-box .lead .lead-meta,
.leads-stream .lead .lead-meta,
[data-view="crm"] .lead .lead-meta,
.focus-overlay .lead-meta,
.focus-overlay [class*="lead-meta"],
#focus-overlay .lead-meta,
#bb-lead-focus-overlay .lead-meta,
.bb-modal-card .lead-meta,
.focus-body .lead-meta,
.focus-content .lead-meta { margin-top: var(--bb-lead-meta-mt) !important; }
.lead[data-ai="actionable"] > .lead-meta,
.lead[data-ai="waiting"][data-expanded="true"] > .lead-meta,
.focus-overlay .lead-meta,
#focus-overlay .lead-meta {
  display: grid !important;
  margin-top: 15px !important;
}

/* === [Marcel 12 may 19:55 · regla 7BO ICONOS JUNTOS lead-wait] ===
   El ↗ Ampliar + ▼ Chevron deben estar UNO AL LADO DEL OTRO en el lead-wait header.
   Aprobado el 11 may. Garantía: grid 6 cols + gap mínimo entre los 2 icon-buttons. */
.lead-wait {
  grid-template-columns: auto 1fr auto auto auto auto !important;
  gap: var(--space-3) !important;
  align-items: center !important;
}
.lead-wait__ampliar + .lead-wait__toggle,
.lead-wait .icon-btn + .lead-wait__toggle {
  margin-left: 2px !important;
}
.lead-wait__ampliar,
.lead-wait__toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 4px !important;
}

/* === SUCCESS check animation (botones tras enviar OK) === */
.btn--success-flash {
  animation: bb-success-flash 800ms var(--ease-out);
}

@keyframes bb-success-flash {
  0% { background: var(--brand); }
  20% { background: #10B981; transform: scale(1.05); }
  100% { background: var(--brand); transform: scale(1); }
}

/* === LOAD STATE · barra superior progress thin === */
body[data-loading="true"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  background-size: 200% 100%;
  animation: bb-progress 1.2s linear infinite;
  z-index: 99999;
}

@keyframes bb-progress {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ═══════════════════ FIN ANIMACIONES MODERNAS · 9 may 2026 ═══════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   [Marcel 12 may · regla 4px estricta · feedback_design_consistency]
   [Marcel 14 may · regla 7BM/7CW REFORZADA · anti-regresión visual]
   Cero esquinas redondas (excepto avatares circulares + dots + pills 999px + barras 2px)
   Override de --radius-md (6px) y --radius-lg (8px) en TODOS los elementos del sistema.
   ═══════════════════════════════════════════════════════════════════════ */
button:not(.av):not(.sb__online-dot):not(.banner__dot),
.btn, .lead, .copilot-box, .copilot-section, .lead-modal__panel,
.toolbar, .focus-card, .focus-rec, .focus-nav, .focus-close,
.compose-btn, .compose-body-editable, .compose-cc-pill, .compose-sent-guard,
.cmdk__panel, .cmdk__item, .acct__item, .pending-action-item,
.thread__msg, .lead-modal__body-text, .lead-modal__close,
.copilot-panel__icon, .copilot-panel__suggest-btn, .copilot-panel__input,
.score-block, .score-block-progress, .stream-tools__filter,
.focus-sent-banner, .focus-email-stat, .heat-tab__c, .btn__kbd,
.icon-btn, .lead-wait__toggle, .meeting-card__notes-body,
.ai__head-l-icon, .stage, .kpi, .reportes-kpi, .diseno-team-card,
.diseno-project, .server-status-stat, .weekly-note-item,
input[type="text"], input[type="email"], input[type="search"],
textarea, select, .modal, [class*="modal__"], [class*="card"]:not(.av),
/* [Marcel 14 may DR-7CW · regla 7BM expand exhaustivo] */
.banner, .lead-wait, .scheduled-card, .forecast-card, .dash-module-card,
.bb-modal-card, .bb-modal__panel, .copilot-box, .focus-overlay,
.compose-pill, .compose-recipients, .compose-subject-input, .compose-body,
.focus-tab, .focus-tabs, .focus-meta, .focus-body, .focus-foot,
.focus-rec-card, .focus-email-card, .focus-meeting-card, .focus-prop-card,
.ai, .ai__body, .lead-meta, .lead__row, .lead__head, .lead__foot,
.pipe-embed, .kpis, .hero-kpis, .top3-card, .priority-deal,
.pipe-pop, .acct, .notif, .heat-tabs, .lead-modal__compose,
.team-perm__active-impersonation, .team-perm__member,
.team-perm__btn-impersonate, .ticket-expand__kb, .ticket-expand__kb-conf,
.ticket-kb-suggested, .ticket-kb-suggested__confidence,
.soporte-section__count, .ticket-expand__actions button,
.proposal-card__status, .lead-meta__count, .copilot-trigger__count,
.copilot-panel__icon, .copilot-section__icon, .sb__logo {
  border-radius: 4px !important;
}
.av, .av--md, .av--lg, .av--sm, [data-palette],
.sb__online-dot, .banner__dot, [class*="-dot"]:not([class*="dotted"]) {
  border-radius: 50% !important;
}
/* Pills 999px expresivas se mantienen */
.pill--round, .pending-badge, .role-pill, .focus-tab-badge {
  border-radius: 999px !important;
}
/* Barras de progreso 2px se mantienen */
.bb-eta-bar, .bb-progress, .progress-bar, [class*="-eta-progress"] {
  border-radius: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   [Marcel 14 may · feedback_no_hover_lead_task · regla anti-regresión]
   .lead-task / .ai (Análisis IA del lead) NUNCA hover · es INFORMATIVO
   Eliminar cualquier transform, background-change, border-change, shadow-change
   ═══════════════════════════════════════════════════════════════════════ */
.lead-task,
.lead__task,
.lead__ai,
.lead-task:hover,
.lead__task:hover,
.lead__ai:hover,
.ai,
.ai:hover,
.ai__body,
.ai__body:hover,
.lead-task__inner,
.lead-task__inner:hover {
  transform: none !important;
  cursor: default !important;
  background-color: var(--bg-elevated) !important;
}
.lead-task:hover,
.lead__task:hover,
.lead__ai:hover,
.ai:hover,
.ai__body:hover {
  /* anular cualquier hover heredado · cero box-shadow, cero border-color shift */
  box-shadow: none !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="dark"] .ai,
[data-theme="dark"] .ai__body,
[data-theme="dark"] .lead-task,
[data-theme="dark"] .ai:hover,
[data-theme="dark"] .ai__body:hover,
[data-theme="dark"] .lead-task:hover {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* [Marcel 14 may FINAL · regla 7EE · spring physics Apple/Stripe/Linear FLUIDAS]
   Reemplaza regla 7DZ que se sentía "dura, poco fluida, poco moderna" (Marcel 14 may verbatim)
   Spring physics naturales · ease-out-expo · ease-out-back · overshoot sutil · sin Material
   Cero JS · solo CSS puro · @keyframes · transition · transform · filter
   Aditivo · si se quita no se pierde nada · transform/opacity/filter (cero reflow)
   Respeta @media (prefers-reduced-motion: reduce) al final del bloque */

/* === 1. COPILOT THINKING BAR · borde fluido líquido (suavizado) === */
.copilot-thinking-bar::before{
  background:conic-gradient(from var(--motion-angle, 0deg),
    #6366F1 0deg,
    #818CF8 51deg,
    var(--text-primary) 102deg,
    #EC4899 154deg,
    #F472B6 206deg,
    #06B6D4 257deg,
    #6366F1 360deg);
  animation:thinking-border-rotate-7ee 4.5s linear infinite, thinking-border-pulse-7ee 2.4s ease-in-out infinite;
  filter:blur(0.5px) saturate(1.3);
}
.copilot-thinking-bar.visible{
  filter:drop-shadow(0 0 12px rgba(99,102,241,0.25));
  animation:thinking-bar-glow-breathe 2.4s ease-in-out infinite;
}
@keyframes thinking-border-rotate-7ee{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
@keyframes thinking-border-pulse-7ee{
  0%,100%{opacity:0.95; filter:blur(0px);}
  50%{opacity:1; filter:blur(0.3px);}
}
@keyframes thinking-bar-glow-breathe{
  0%,100%{filter:drop-shadow(0 0 8px rgba(99,102,241,0.2));}
  50%{filter:drop-shadow(0 0 18px rgba(168,85,247,0.35));}
}

/* === 2. CARDS DE LEADS · hover spring orgánico === */
.lead,
.lead-wait{
  transition:
    border-color var(--dur-medium) var(--ease-out-expo),
    box-shadow var(--dur-medium) var(--ease-out-expo),
    background-color var(--dur-medium) var(--ease-out-expo);
}
/* v296 · Marcel 22 may pm: 'no quiero que el hover modifique el color de la barra
   lateral de cada lead'. Preservamos border-left (heat indicator HOT/TIBIO/FRÍO) en
   hover · solo cambiamos top/right/bottom + shadow. */
.lead:hover,
.lead-wait:hover{
  border-top-color:var(--brand, #6366F1);
  border-right-color:var(--brand, #6366F1);
  border-bottom-color:var(--brand, #6366F1);
  box-shadow:0 8px 32px -8px rgba(99,102,241,0.15), 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="dark"] .lead:hover,
[data-theme="dark"] .lead-wait:hover{
  box-shadow:0 8px 32px -8px rgba(99,102,241,0.28), 0 2px 8px rgba(0,0,0,0.18);
}

/* === 3. STATUS PILL · v23 (Marcel: "se ve como que desaparece toda la
   sección y aparece de otro tamaño/cantidad de texto, mal UX/UI/CRO").
   Solución: el pill y el dot NUNCA se animan ni cambian de tamaño. El texto
   se actualiza EN SU LUGAR (instantáneo, sin fade/morph) dentro de un ancho
   ESTABLE → cero reflow, cero "desaparece/reaparece". Estado vivo sobrio,
   integrado al v3 (estilo Linear/Vercel). El dot conserva su pulse suave. */
.copilot-box__pill{
  position:relative;
  transition:none;
}
.copilot-box__pill--ok{
  min-width:264px;             /* ancho fijo: cambiar de texto NO mueve nada */
  justify-content:flex-start;  /* dot + texto anclados a la izquierda (dot fijo) */
}
.copilot-pill__txt{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;      /* salvaguarda: jamás rompe el layout */
}
/* clase legacy del flujo viejo · ya no la usa el JS · neutralizada */
.copilot-box__pill.copilot-pill--changing{ opacity:1; transform:none; }
.copilot-box__pill .dot{
  animation:pill-dot-breathe 1.8s var(--ease-out-expo) infinite;
}
@keyframes pill-dot-breathe{
  0%,100%{opacity:0.55; transform:scale(0.92);}
  50%{opacity:1; transform:scale(1.08);}
}
.copilot-box__pill::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:radial-gradient(circle at center, rgba(99,102,241,0.08) 0%, transparent 60%);
  opacity:0;
  pointer-events:none;
  animation:pill-halo-rotate 4.5s linear infinite;
}
.copilot-box__pill:hover::after{
  opacity:1;
}
@keyframes pill-halo-rotate{
  to{transform:rotate(360deg);}
}

/* === 4. SIDEBAR ITEMS · TODO el styling vive en .sb__item (líneas 115-128) ===
   [Marcel 14 may LATE-NIGHT · regla 7EG]
   Eliminamos el bloque duplicado [data-route]::before/::after que conflictaba
   con .sb__item::before causando dobles bordes y hover inconsistente entre items.
   Marcel verbatim: "items del sidebar con bordes distintos · hover brusco · poco fluido"
   El indicador izquierdo único (line 119-120 height-grow spring) es el oficial. */

/* === 5. COHORT TRANSITIONS · stagger fluido con spring === */
.lead.bb-cohort-moving-out,
.lead-wait.bb-cohort-moving-out,
.lead.is-transitioning-out,
.lead-wait.is-transitioning-out{
  animation:bb-cohort-exit var(--dur-slow) var(--ease-out-quart) both;
}
.lead.bb-cohort-moving-in,
.lead-wait.bb-cohort-moving-in,
.lead.is-transitioning-in,
.lead-wait.is-transitioning-in{
  animation:bb-cohort-enter var(--dur-slow) var(--ease-out-back) both;
}
.lead.is-transitioning-in:nth-child(2),
.lead-wait.is-transitioning-in:nth-child(2),
.lead.bb-cohort-moving-in:nth-child(2),
.lead-wait.bb-cohort-moving-in:nth-child(2){animation-delay:60ms;}
.lead.is-transitioning-in:nth-child(3),
.lead-wait.is-transitioning-in:nth-child(3),
.lead.bb-cohort-moving-in:nth-child(3),
.lead-wait.bb-cohort-moving-in:nth-child(3){animation-delay:120ms;}
.lead.is-transitioning-in:nth-child(n+4),
.lead-wait.is-transitioning-in:nth-child(n+4),
.lead.bb-cohort-moving-in:nth-child(n+4),
.lead-wait.bb-cohort-moving-in:nth-child(n+4){animation-delay:180ms;}
@keyframes bb-cohort-exit{
  0%{opacity:1; transform:translateY(0) scale(1); max-height:200px;}
  100%{opacity:0; transform:translateY(-12px) scale(0.97); max-height:0; margin:0; padding:0;}
}
@keyframes bb-cohort-enter{
  0%{opacity:0; transform:translateY(12px) scale(0.97);}
  60%{opacity:1; transform:translateY(-3px) scale(1.01);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

/* === 6. BOTONES PRIMARY · spring con bounce sutil === */
.btn-primary,
.compose-btn--primary,
.bb-waiting-btn--primary{
  position:relative;
  overflow:hidden;
  background-image:linear-gradient(135deg, var(--brand, #6366F1) 0%, var(--brand, #6366F1) 50%, color-mix(in srgb, var(--brand, #6366F1) 88%, var(--text-primary)) 100%);
  background-size:200% 200%;
  background-position:0% 0%;
  transition:
    transform var(--dur-fast) var(--ease-out-back),
    background-color var(--dur-medium) var(--ease-out-expo),
    background-position 600ms var(--ease-out-expo),
    box-shadow var(--dur-medium) var(--ease-out-expo);
}
.btn-primary:hover,
.compose-btn--primary:hover,
.bb-waiting-btn--primary:hover{
  transform:translateY(-1px);
  animation:btn-primary-breathe 3s ease-in-out infinite alternate;
}
.btn-primary:active,
.compose-btn--primary:active,
.bb-waiting-btn--primary:active{
  transform:translateY(0) scale(0.97);
  transition-duration:80ms;
}
.btn-primary::after,
.compose-btn--primary::after,
.bb-waiting-btn--primary::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%);
  transform:translate(-50%, -50%);
  pointer-events:none;
  opacity:0;
}
.btn-primary:active::after,
.compose-btn--primary:active::after,
.bb-waiting-btn--primary:active::after{
  animation:btn-ripple 600ms var(--ease-out-expo);
}
@keyframes btn-primary-breathe{
  0%{background-position:0% 0%;}
  100%{background-position:100% 100%;}
}
@keyframes btn-ripple{
  0%{width:0; height:0; opacity:0.6;}
  100%{width:240px; height:240px; opacity:0;}
}

/* === 7. NOTIF BADGE · pulse spring physics === */
.notif-badge{
  animation:bb-notif-pulse-spring 2.4s var(--ease-out-back) infinite;
  transform-origin:center;
  perspective:200px;
}
.notif-badge:not(:empty){
  animation:bb-notif-pulse-spring 2.4s var(--ease-out-back) infinite, notif-badge-morph 320ms var(--ease-out-back);
}
@keyframes bb-notif-pulse-spring{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}
@keyframes notif-badge-morph{
  0%{transform:rotateX(90deg) scale(0.8);}
  60%{transform:rotateX(-10deg) scale(1.05);}
  100%{transform:rotateX(0deg) scale(1);}
}

/* === 8. KPI NUMBERS · count-up con spring === */
.kpi__num,
.hero-kpi__num,
.bb-kpi-num{
  animation:kpi-num-appear var(--dur-medium) var(--ease-out-back);
  transition:color 320ms var(--ease-out-expo);
}
@keyframes kpi-num-appear{
  0%{opacity:0; transform:scale(0.94);}
  60%{opacity:1; transform:scale(1.02);}
  100%{opacity:1; transform:scale(1);}
}
.kpi__num.is-updating,
.hero-kpi__num.is-updating,
.bb-kpi-num.is-updating{
  animation:kpi-num-highlight 480ms var(--ease-out-expo);
}
@keyframes kpi-num-highlight{
  0%{filter:brightness(1);}
  40%{filter:brightness(1.15);}
  100%{filter:brightness(1);}
}

/* === 9. BACKGROUND DEL DASHBOARD · subtle motion === */
body::before{
  content:"";
  position:fixed;
  inset:-50%;
  background:radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.020) 0%, transparent 50%),
             radial-gradient(ellipse at 70% 80%, rgba(168,85,247,0.018) 0%, transparent 55%);
  pointer-events:none;
  z-index:-1;
  animation:bg-radial-drift 60s linear infinite;
}
[data-theme="dark"] body::before{
  background:radial-gradient(ellipse at 30% 20%, rgba(99,102,241,0.050) 0%, transparent 50%),
             radial-gradient(ellipse at 70% 80%, rgba(168,85,247,0.045) 0%, transparent 55%);
}
@keyframes bg-radial-drift{
  0%{transform:translate(0%, 0%) rotate(0deg);}
  25%{transform:translate(2%, -1%) rotate(90deg);}
  50%{transform:translate(-1%, 2%) rotate(180deg);}
  75%{transform:translate(-2%, -1%) rotate(270deg);}
  100%{transform:translate(0%, 0%) rotate(360deg);}
}

/* === 10. MODAL · entrada/salida fluida · SIN escala (nítido · sin rebote) ===
   [Marcel 18 may] "mientras se agranden se ven borrosos" + "rebote feo · no se
   siente navegación fluida/moderna/elegante". Raíz: escalar el contenedor del
   modal rasterizaba íconos/texto (blur) y el overshoot 1.01 era el rebote en
   cada navegación de lead. Fix: solo opacidad + leve translateY · monotónico ·
   ease-out · cero scale · navegación cinemática tipo Linear/Stripe. */
@keyframes bb-modal-spring-in{
  0%{opacity:0; transform:translateY(8px);}
  100%{opacity:1; transform:translateY(0);}
}
.focus-overlay > div:first-child{
  animation:bb-modal-spring-in 220ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes bb-modal-spring-out{
  0%{opacity:1; transform:translateY(0);}
  100%{opacity:0; transform:translateY(4px);}
}
.focus-overlay.bb-closing > div:first-child{
  animation:bb-modal-spring-out var(--dur-fast) var(--ease-out-quart) both;
}

/* === 11. TABS · indicator slide spring con overshoot === */
.focus-tab,
.lead-modal__tab,
[role="tab"]{
  position:relative;
  transition:
    color var(--dur-medium) var(--ease-out-expo),
    background-color var(--dur-medium) var(--ease-out-expo);
}
.focus-tab::after,
.lead-modal__tab::after,
[role="tab"]::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:var(--brand, #6366F1);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--dur-medium) var(--ease-out-back);
  border-radius:1px;
}
.focus-tab[aria-pressed="true"]::after,
.focus-tab.focus-tab-active::after,
.lead-modal__tab.is-active::after,
.lead-modal__tab[aria-pressed="true"]::after,
[role="tab"][aria-selected="true"]::after{
  animation:bb-tab-indicator-bounce var(--dur-slow) var(--ease-out-back) both;
}
@keyframes bb-tab-indicator-bounce{
  0%{transform:scaleX(0);}
  100%{transform:scaleX(1);}
}

/* === 12. MICROINTERACCIONES PUNTUALES · spring delicado === */
/* tag hover · sutil (padding shift removido · era brusco) */
.tag{
  transition:
    transform 200ms var(--ease-out-expo),
    color 200ms var(--ease-out-expo),
    background-color 200ms var(--ease-out-expo);
  will-change:transform;
}
.tag:hover{
  transform:translateY(-1px);
}
/* avatar hover · scale suave sin rotate (era brusco) */
.av,
.av-row{
  transition:transform 220ms var(--ease-out-expo);
}
.av:hover,
.av-row:hover{
  transform:scale(1.06);
}
/* triage buttons · spring color preview */
.lead__triage button,
.bb-triage-btn{
  position:relative;
  overflow:hidden;
  transition:
    color var(--dur-fast) var(--ease-out-expo),
    background-color var(--dur-fast) var(--ease-out-expo),
    border-color var(--dur-fast) var(--ease-out-expo),
    transform var(--dur-fast) var(--ease-out-back);
}
.lead__triage button:active,
.bb-triage-btn:active{
  transform:scale(0.96);
}
.lead__triage button::before,
.bb-triage-btn::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  transform:translate(-50%, -50%) scale(0);
  opacity:0;
  pointer-events:none;
}
.lead__triage button:active::before,
.bb-triage-btn:active::before{
  animation:triage-confetti-dot 500ms var(--ease-out-expo);
}
@keyframes triage-confetti-dot{
  0%{transform:translate(-50%, -50%) scale(0); opacity:0.8;}
  60%{transform:translate(-50%, -150%) scale(1.4); opacity:0.5;}
  100%{transform:translate(-50%, -250%) scale(0.6); opacity:0;}
}

/* === 13. LOADING SHIMMER · respiración elegante Linear/Vercel · regla 7EH ===
   [Marcel 13 may] reducido contraste · 2.2s cubic-bezier · removido liquid-wave agresivo */
.bb-skeleton-card,
.skeleton-shimmer,
.bb-skeleton{
  position:relative;
  overflow:hidden;
  background:linear-gradient(110deg, #f3f4f6 0%, #f9fafb 50%, #f3f4f6 100%);
  background-size:200% 100%;
  animation:bb-skeleton-wave-soft 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* [Marcel 13 may · regla 7EH] capa indigo/purple removida · era demasiado vibrante para "IA pensando tranquilo"
   Mantenemos solo el wave base · sutil + elegante */
[data-theme="dark"] .bb-skeleton-card,
[data-theme="dark"] .skeleton-shimmer,
[data-theme="dark"] .bb-skeleton{
  background:linear-gradient(110deg, #1f1f23 0%, #26262d 50%, #1f1f23 100%);
  background-size:200% 100%;
}
@keyframes bb-skeleton-wave-soft{
  0%{background-position:-200% 0;opacity:0.9;}
  50%{background-position:0% 0;opacity:1;}
  100%{background-position:200% 0;opacity:0.9;}
}

/* === 14. REDUCE MOTION ACCESSIBILITY · respetar siempre ===
   [Marcel 14 may regla 7EG] Bloquea TODAS las animaciones nuevas (cubic-bezier spring · width sidebar · ::before height · etc.)
   También fuerza .sb__item::before a estado final inmediato en activo · cero animación visible. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .sb__item::before{transition:none !important;}
  .sb__item:hover::before,.sb__item[aria-current="page"]::before,.sb__item.active::before{height:20px;opacity:1;}
  .app,.sb{transition:none !important;}
}

/* ═══════════════════════════════════════════════════════════════════════
   [Marcel 15 may · regla 7FA · animación CINEMÁTICA elevada]
   A) Boot cinematic entry · sections stagger
   B) Sidebar collapse premium · bounce toggle + wave-in items
   C) Orbe copiloto pensando INLINE en compose modal
   D) Section animations · hover lift + click feedback + KPI count-up
   ═══════════════════════════════════════════════════════════════════════ */

/* === A · BOOT CINEMATIC ENTRY === */
body.bb-hydrated:not(.bb-anim-done) .hero-kpis,
body.bb-hydrated:not(.bb-anim-done) .banners,
body.bb-hydrated:not(.bb-anim-done) .copilot-box,
body.bb-hydrated:not(.bb-anim-done) .heat-tabs,
body.bb-hydrated:not(.bb-anim-done) .cartera,
body.bb-hydrated:not(.bb-anim-done) .pipe-embed {
  animation: bb-section-enter 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: var(--bb-enter-delay, 0ms);
}
body.bb-hydrated:not(.bb-anim-done) .hero-kpis   { --bb-enter-delay: 0ms;   --bb-enter-y: -8px; }
body.bb-hydrated:not(.bb-anim-done) .heat-tabs   { --bb-enter-delay: 80ms;  --bb-enter-y: 0;    animation-duration: 280ms; }
body.bb-hydrated:not(.bb-anim-done) .copilot-box { --bb-enter-delay: 160ms; --bb-enter-y: 12px; }
body.bb-hydrated:not(.bb-anim-done) .banners     { --bb-enter-delay: 200ms; --bb-enter-y: 10px; }
body.bb-hydrated:not(.bb-anim-done) .cartera     { --bb-enter-delay: 240ms; --bb-enter-y: 12px; }
body.bb-hydrated:not(.bb-anim-done) .pipe-embed  { --bb-enter-delay: 280ms; --bb-enter-y: 10px; }

@keyframes bb-section-enter {
  0%   { opacity: 0; transform: translateY(var(--bb-enter-y, 12px)); }
  100% { opacity: 1; transform: translateY(0); }
}

body.bb-hydrated:not(.bb-anim-done) .copilot-box__body > .lead,
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait {
  animation: bb-stream-item-enter 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.bb-hydrated:not(.bb-anim-done) .copilot-box__body > .lead:nth-child(1) { animation-delay: 280ms; }
body.bb-hydrated:not(.bb-anim-done) .copilot-box__body > .lead:nth-child(2) { animation-delay: 330ms; }
body.bb-hydrated:not(.bb-anim-done) .copilot-box__body > .lead:nth-child(3) { animation-delay: 380ms; }
body.bb-hydrated:not(.bb-anim-done) .copilot-box__body > .lead:nth-child(4) { animation-delay: 430ms; }
body.bb-hydrated:not(.bb-anim-done) .copilot-box__body > .lead:nth-child(5) { animation-delay: 480ms; }
body.bb-hydrated:not(.bb-anim-done) .copilot-box__body > .lead:nth-child(n+6) { animation-delay: 530ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(1) { animation-delay: 340ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(2) { animation-delay: 380ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(3) { animation-delay: 420ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(4) { animation-delay: 460ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(5) { animation-delay: 500ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(6) { animation-delay: 540ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(7) { animation-delay: 580ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(8) { animation-delay: 620ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(9) { animation-delay: 660ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(10) { animation-delay: 700ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(11) { animation-delay: 740ms; }
body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait:nth-child(n+12) { animation-delay: 780ms; }

@keyframes bb-stream-item-enter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === B · SIDEBAR COLLAPSE PREMIUM === */
.sb__toggle, .sb-expand {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 180ms ease;
}
.app[data-sidebar="collapsed"] .sb__toggle,
.app[data-sidebar="collapsed"] .sb-expand {
  transform: rotate(180deg);
}
.sb__toggle:active, .sb-expand:active {
  transform: scale(0.92);
}
.app[data-sidebar="collapsed"] .sb__toggle:active,
.app[data-sidebar="collapsed"] .sb-expand:active {
  transform: rotate(180deg) scale(0.92);
}

.app.is-expanding .sb__group .sb__item,
.app.is-expanding .sb__idea {
  animation: bb-sb-wave-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.app.is-expanding .sb__group .sb__item:nth-child(1)  { animation-delay: 120ms; }
.app.is-expanding .sb__group .sb__item:nth-child(2)  { animation-delay: 150ms; }
.app.is-expanding .sb__group .sb__item:nth-child(3)  { animation-delay: 180ms; }
.app.is-expanding .sb__group .sb__item:nth-child(4)  { animation-delay: 210ms; }
.app.is-expanding .sb__group .sb__item:nth-child(5)  { animation-delay: 240ms; }
.app.is-expanding .sb__group .sb__item:nth-child(6)  { animation-delay: 270ms; }
.app.is-expanding .sb__group .sb__item:nth-child(7)  { animation-delay: 300ms; }
.app.is-expanding .sb__group .sb__item:nth-child(n+8){ animation-delay: 330ms; }
.app.is-expanding .sb__idea { animation-delay: 340ms; }

@keyframes bb-sb-wave-in {
  0%   { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}

.app.is-collapsing .sb__item-lbl,
.app.is-collapsing .sb__idea-lbl,
.app.is-collapsing .sb__brand-text,
.app.is-collapsing .sb__online {
  transition: opacity 100ms cubic-bezier(0.4, 0, 1, 1) !important;
}

/* === C · ORBE COPILOTO PENSANDO · INLINE EN COMPOSE MODAL === */
/* [v344 · Marcel 25 may 'eliminar esas animaciones anticuadas'] Refactor minimal
   Linear/Stripe/Notion · cero gradients diagonales rosados/cyan · cero conic-gradient
   rotando · solo bg neutro + dot pulse sutil + texto · estilo SaaS moderno limpio. */
.bb-copilot-thinking-inline {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 10px 0;
  background: var(--bg-elevated, #F7F7F7);
  border: 1px solid var(--border-subtle, #ECECEC);
  border-radius:4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #525252);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.bb-copilot-thinking-inline[data-visible="true"] {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
[data-theme="dark"] .bb-copilot-thinking-inline {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}
.bb-copilot-thinking-inline__orb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-primary);
  animation: bb-pulse 1.6s ease-in-out infinite;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(99,102,241,0.55),
              inset 0 0 5px rgba(255,255,255,0.35);
  animation: bb-orb-rotate 3s linear infinite,
             bb-orb-breathe 2.2s cubic-bezier(0.4,0,0.2,1) infinite;
}
.bb-copilot-thinking-inline__orb::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.5), transparent 60%);
  pointer-events: none;
}
.bb-copilot-thinking-inline__orb::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(99,102,241,0.4) 0%,
    rgba(168,85,247,0.2) 40%,
    transparent 75%);
  animation: bb-orb-bloom 2.2s cubic-bezier(0.4,0,0.2,1) infinite;
  pointer-events: none;
}
.bb-copilot-thinking-inline__label {
  flex: 1;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.bb-copilot-thinking-inline__label strong {
  display: block;
  color: var(--text-primary, #0A0A0A);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}
[data-theme="dark"] .bb-copilot-thinking-inline__label strong {
  color: #E5E7EB;
}
.bb-copilot-thinking-inline__hint {
  color: var(--text-tertiary, #A3A3A3);
  font-size: 11px;
}

/* === D · SECTION ANIMATIONS · hover lift + click feedback + KPIs === */
.cartera__list > .lead-wait,
.copilot-box__body > .lead {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 180ms ease;
}
.cartera__list > .lead-wait:hover,
.copilot-box__body > .lead:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06),
              0 2px 4px rgba(0,0,0,0.04);
}
.cartera__list > .lead-wait:active,
.copilot-box__body > .lead:active {
  transform: scale(0.985) translateY(-1px);
  transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-kpi__num,
.kpi__num,
[data-kpi-value] {
  transition: color 200ms ease;
}
.hero-kpi__num.is-counting,
.kpi__num.is-counting,
[data-kpi-value].is-counting {
  animation: bb-kpi-counted 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bb-kpi-counted {
  0%   { transform: scale(0.96); opacity: 0.65; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.heat-tab::after,
.focus-tab::after,
.tabs-main .tab::after,
.bb-soporte-filter-tab::after {
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lead-modal,
.focus-overlay {
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lead-modal[data-closing="true"],
.focus-overlay[data-closing="true"] {
  opacity: 0;
  pointer-events: none;
}
.lead-modal[data-closing="true"] .lead-modal__panel,
.focus-overlay[data-closing="true"] .focus-card {
  transform: scale(0.96) translateY(4px);
  transition: transform 180ms cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce){
  body.bb-hydrated:not(.bb-anim-done) .hero-kpis,
  body.bb-hydrated:not(.bb-anim-done) .banners,
  body.bb-hydrated:not(.bb-anim-done) .copilot-box,
  body.bb-hydrated:not(.bb-anim-done) .heat-tabs,
  body.bb-hydrated:not(.bb-anim-done) .cartera,
  body.bb-hydrated:not(.bb-anim-done) .pipe-embed,
  body.bb-hydrated:not(.bb-anim-done) .copilot-box__body > .lead,
  body.bb-hydrated:not(.bb-anim-done) .cartera__list > .lead-wait,
  .app.is-expanding .sb__item,
  .app.is-expanding .sb__idea {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bb-copilot-thinking-inline,
  .bb-copilot-thinking-inline__orb,
  .bb-copilot-thinking-inline::before {
    animation: none !important;
  }
  .cartera__list > .lead-wait:hover,
  .copilot-box__body > .lead:hover {
    transform: none !important;
  }
}
/* [Nova · 7 jun] FIX MOBILE · menú cerrable + footer visible (regresión: sidebar atascado abierto).
   Repone un drawer off-canvas con hamburguesa + backdrop. Va al final del <style> → su !important
   gana por orden de cascada a las reglas previas (riel 56px / columna sticky 200px). */
.nv-mob-burger, .nv-mob-backdrop { display: none; }
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr !important; }
  .app > main.main, .main { grid-column: 1 / -1 !important; min-width: 0 !important; }
  /* sidebar = drawer off-canvas (OCULTO por defecto → contenido a ancho completo) */
  .sb {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: min(86vw, 300px) !important; height: 100vh !important; height: 100dvh !important;
    transform: translateX(-100%) !important;
    transition: transform 280ms cubic-bezier(0.16,1,0.3,1) !important;
    z-index: 1300 !important; overflow-y: auto !important; overflow-x: hidden !important;
    display: flex !important; flex-direction: column !important;
    transform: translateX(-105%) !important;
  }
  body.sb-open .sb { transform: translateX(0) !important; box-shadow: 10px 0 40px rgba(0,0,0,0.20) !important; }
  /* mostrar SIEMPRE labels + footer dentro del drawer (anula el icon-rail de 56px) */
  .app .sb__brand-text, .app .sb__online, .app .sb__system-status,
  .app .sb__item-lbl, .app .sb__idea-lbl, .app .sb__session-info,
  .app .sb__session-name, .app .sb__session-mail, .app .sb__session-chev {
    opacity: 1 !important; display: revert !important; visibility: visible !important;
  }
  /* footer de sesión (cara + nombre) SIEMPRE pegado abajo y visible */
  .sb__session {
    display: flex !important; margin-top: auto !important;
    position: sticky !important; bottom: 0 !important; background: var(--bg-card) !important;
    opacity: 1 !important; visibility: visible !important;
  }
  /* hamburguesa fija arriba-izquierda */
  .nv-mob-burger {
    display: inline-flex !important; position: fixed; top: 9px; left: 10px; z-index: 1310;
    width: 38px; height: 38px; align-items: center; justify-content: center;
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
    color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.10); cursor: pointer; padding: 0;
  }
  body.sb-open .nv-mob-burger { z-index: 1320; }
  /* backdrop para cerrar al tocar fuera */
  .nv-mob-backdrop {
    display: block !important; position: fixed; inset: 0; z-index: 1295;
    background: rgba(0,0,0,0.42); opacity: 0; pointer-events: none; transition: opacity 240ms ease;
  }
  body.sb-open .nv-mob-backdrop { opacity: 1; pointer-events: auto; }
  /* aire para que el burger no tape el breadcrumb del header */
  .hdr__row { padding-left: 50px !important; }
}
@media (min-width: 1025px) { .nv-mob-burger, .nv-mob-backdrop { display: none !important; } }

/* ===== bloque 2 (era <style> inline #2) ===== */
.bb-boot-loading{position:fixed;inset:0;background:var(--bg-base,#FAFAFA);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-family:Inter,system-ui,sans-serif;transition:opacity 320ms cubic-bezier(0.16,1,0.3,1);}
.bb-boot-loading.is-hidden{opacity:0;pointer-events:none;}
.bb-boot-loading__brain{width:44px;height:44px;display:flex;align-items:center;justify-content:center;position:relative;}
.bb-boot-loading__brain::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle, rgba(58,63,76,0.18) 0%, rgba(58,63,76,0) 70%);animation:bb-brain-pulse 1.6s cubic-bezier(0.16,1,0.3,1) infinite;}
.bb-boot-loading__spinner{width:28px;height:28px;border:2px solid var(--border-subtle,#ECECEC);border-top-color:var(--brand,#3A3F4C);border-radius:50%;animation:bb-spin 700ms linear infinite;position:relative;z-index:1;}
@keyframes bb-spin{to{transform:rotate(360deg)}}
@keyframes bb-brain-pulse{0%,100%{transform:scale(1);opacity:0.6;}50%{transform:scale(1.4);opacity:0;}}
.bb-boot-loading__text{font-size:13px;color:var(--text-secondary,#525252);font-weight:500;letter-spacing:-0.01em;min-height:18px;transition:opacity 220ms cubic-bezier(0.16,1,0.3,1);}
.bb-boot-loading__hint{font-size:11px;color:var(--text-tertiary,#A3A3A3);font-weight:400;letter-spacing:0;margin-top:-4px;opacity:0.85;}
.bb-boot-loading__text.is-fading{opacity:0.35;}
@media (prefers-reduced-motion:reduce){.bb-boot-loading__spinner{animation:none;border-top-color:var(--brand,#3A3F4C);}.bb-boot-loading__brain::before{animation:none;}.bb-boot-loading__text{transition:none;}}

/* ===== bloque 3 (era <style> inline #3) ===== */
/* [17may · Marcel · P0 SEGURIDAD] El dashboard NO se ve jamás antes de autenticar.
   .app oculto hasta body[data-authed="true"] (el boot lo setea SOLO con sesión;
   sin sesión el splash queda cubriendo + redirect inmediato a /login.html). */
body:not([data-authed="true"]) .app{visibility:hidden!important;}
body:not([data-authed="true"]){overflow:hidden;}

/* [17may · Marcel] Loader futurista oscuro · integrado v3 · animación IA + bienvenida
   personalizada. #boot-splash NO es elemento de red → animación permitida acá
   (fallback prefers-reduced-motion). */
/* [17may · Marcel "NO azul · simple · v3+bigbuda.cl · más futurista/fluido"]
   Loader monocromático sobrio: grises neutros + blanco · CERO azul/índigo ·
   anillo IA blanco fino y fluido · bienvenida personalizada como HÉROE. */
/* [17may · Marcel] Loader inmersivo · fondo animado neutro (CERO azul) · logo
   Bigbuda prominente (NO círculo negro pobre) · bienvenida héroe · progreso.
   #boot-splash no es elemento de red → animación OK + prefers-reduced-motion. */
/* [17may · Marcel] Loader: fondo MÁS OSCURO (cero brillo sobre el logo) +
   movimiento "líquido" orgánico (CSS puro · net-safe · sin GSAP/CDN · 60fps ·
   SIN azul) + más aire aprovechando toda la pantalla. boot-* NO es elemento de
   la red anti-stuck → keyframes seguros. */
.boot-splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(135% 120% at 50% 14%,#141416 0%,#0c0c0e 52%,#070708 100%);transition:opacity .34s cubic-bezier(.4,0,.2,1),transform .34s cubic-bezier(.4,0,.2,1);will-change:opacity,transform}
/* [18may · Marcel "el loader no se ve 100/100 · sale lavado/roto"] CAUSA: el
   fade-out de .46s semitransparente revelaba el dashboard CLARO a medio cargar
   (frame pálido feo). FIX premium: salida más rápida (.34s) + leve "lift"
   (scale 1.02) = se eleva y desaparece, no se disuelve sobre una pantalla
   pálida. El CONTENIDO (.boot-stage) se va más rápido (.16s) que el fondo →
   nunca queda texto/checklist flotando sobre claro. Net-safe (.boot-* NO es
   elemento de red · solo transition, sin fill-mode). */
.boot-splash.boot-fade-out{opacity:0;transform:scale(1.02);pointer-events:none}
.boot-splash.boot-fade-out .boot-stage{opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
.boot-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.boot-bg::before,.boot-bg::after{content:"";position:absolute;border-radius:46% 54% 58% 42%/52% 46% 54% 48%;filter:blur(86px);will-change:transform}
.boot-bg::before{width:78vmax;height:78vmax;left:-30vmax;top:-34vmax;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.038) 0%,rgba(255,255,255,0) 66%);animation:boot-liquid1 26s cubic-bezier(.45,0,.55,1) infinite alternate}
.boot-bg::after{width:70vmax;height:70vmax;right:-32vmax;bottom:-34vmax;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.030) 0%,rgba(255,255,255,0) 64%);animation:boot-liquid2 33s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes boot-liquid1{0%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(10vmax,7vmax) scale(1.12) rotate(8deg)}100%{transform:translate(4vmax,12vmax) scale(1.04) rotate(-5deg)}}
@keyframes boot-liquid2{0%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(-9vmax,-6vmax) scale(1.1) rotate(-7deg)}100%{transform:translate(-3vmax,-11vmax) scale(1.05) rotate(5deg)}}
/* [17may · Marcel] Loader fluido/responsive · SIN glow en el logo (no integraba) ·
   más aire, tamaños con clamp() que se adaptan a la pantalla. */
/* [17may · Marcel "el loader tiene mucha distancia todo"] Bloque centrado
   COMPACTO cohesionado (premium splash). NO 100dvh (dispersaba el contenido en
   una pantalla enorme). Fondo full-bleed = .boot-splash; .boot-stage = grupo
   apretado, gaps controlados, centrado por el flex del splash. */
.boot-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,1.8vh,20px);width:clamp(300px,86vw,440px);padding:24px 16px;box-sizing:border-box;animation:boot-stage-in .55s cubic-bezier(.16,1,.3,1)}
@keyframes boot-stage-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* [18may · Marcel "la animación del logo se ve horrible · estilo Apple ·
   moderno · fluido · elegante · premium"] Wordmark oficial (SVG real · forma
   EXACTA · cero distorsión). REHECHA: fuera el trazado outline (se veía
   amateur). Reveal estilo Apple = el logo SÓLIDO blanco se descubre con un
   barrido suave de luz (mask wipe diagonal · "la luz revela la marca") +
   entrada calma (scale/blur/opacity con el ease de Apple) + respiración
   lumínica muy sutil. La geometría NUNCA cambia (solo máscara/opacidad/
   escala). Anti-stuck: estado BASE = logo 100% visible (si una animación no
   corre o se congela, el logo se ve igual · jamás pantalla sin marca).
   .boot-* NO es elemento de red → keyframes seguros. */
.boot-mark{
  /* [18may · Marcel "logo y bienvenida EXAGERADAMENTE grandes vs el resto"]
     Logo restrained estilo Apple · proporcionado a la info del loader. */
  position:relative;width:clamp(112px,24vw,150px);height:auto;
  display:flex;align-items:center;justify-content:center;
  opacity:1;transform:scale(1);filter:blur(0);
  /* [18may · Marcel "no me gusta el efecto bounce del logo · el resto sí"]
     Easing ease-out SIN overshoot (no pasa de 1 · cero rebote). */
  animation:boot-logo-enter 1.05s cubic-bezier(.22,1,.36,1) both;
}
.boot-mark svg,.boot-logo-svg{
  position:relative;width:100%;height:auto;display:block;overflow:visible;
  /* Máscara de luz diagonal · mask-size 200% → en mask-position 0% 0 (base/fin)
     la ventana del logo ve el 0–50% del gradiente = TODO #000 sólido (logo 100%
     visible · anti-stuck). En 100% 0 (inicio) ve el 50–100% = transparente
     (oculto) · al barrer 100%→0% la luz revela la marca izq→der. */
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 56%,rgba(0,0,0,.45) 64%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(100deg,#000 0%,#000 56%,rgba(0,0,0,.45) 64%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);
  -webkit-mask-size:200% 100%;mask-size:200% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0% 0;mask-position:0% 0;
  animation:boot-logo-reveal .82s cubic-bezier(.4,0,.15,1) .12s both,
            boot-logo-breathe 4.6s ease-in-out 2.2s infinite;
}
.boot-logo-path{fill:#fff;}
/* [18may · Marcel "se ve SUPER fome · no impacta · estilo Apple WOW"]
   Reveal con PRESENCIA (hero Apple): la marca ENTRA con fuerza desde pequeña
   y desenfocada, sobrepasa apenas el 1.0 (overshoot spring) y al aterrizar
   estalla un BLOOM lumínico (se "enciende") que decae elegante. Combinado con
   el barrido de luz diagonal sincronizado = impacto real, no tibio. Bold pero
   premium · ~1.15s · se aprecia completo en la ventana del splash.
   Glint/bloom en .boot-mark (filter) · respiración en .boot-logo-svg (sin
   conflicto de filter). Anti-stuck: 100% = logo nítido visible. */
/* [18may · Marcel "no me gusta el bounce · el resto sí"] Escala MONOTÓNICA
   .40 → 1 (nunca pasa de 1 · nunca retrocede · cero rebote). Se conserva todo
   lo que sí le gusta: entrada desde pequeño + desenfoque→nítido + BLOOM
   lumínico que enciende y decae elegante + barrido de luz diagonal. */
/* [19may · Marcel "no me gusta que en el loading el logo se agrande · no
   quiero que se agrande · mantener el resto"] Escala ELIMINADA (logo a tamaño
   final SIEMPRE · cero zoom/grow). Se conserva lo que sí le gusta: fade-in +
   desenfoque→nítido + BLOOM lumínico + barrido de luz (boot-logo-reveal) +
   respiración (boot-logo-breathe). */
@keyframes boot-logo-enter{
  0%  {opacity:0;filter:blur(22px) brightness(1.5)}
  38% {opacity:1}
  62% {filter:blur(0) brightness(1.22) drop-shadow(0 0 30px rgba(255,255,255,.50))}
  100%{opacity:1;filter:blur(0) brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0))}
}
@keyframes boot-logo-reveal{
  from{-webkit-mask-position:100% 0;mask-position:100% 0}
  to{-webkit-mask-position:0 0;mask-position:0 0}
}
@keyframes boot-logo-breathe{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  50%{filter:drop-shadow(0 0 14px rgba(255,255,255,.12))}
}
@media (prefers-reduced-motion:reduce){
  .boot-mark{animation:none;opacity:1;transform:none;filter:none}
  .boot-logo-svg{animation:none;-webkit-mask-image:none;mask-image:none}
  .boot-logo-path{fill:#fff}
}
.boot-greet{text-align:center;font-family:Inter,-apple-system,sans-serif;color:rgba(255,255,255,.96);font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:-.018em;line-height:1.2;min-height:1.2em;animation:boot-greet-in .6s cubic-bezier(.16,1,.3,1) .15s backwards}
.boot-greet-sub{text-align:center;font-family:Inter,-apple-system,sans-serif;color:rgba(255,255,255,.50);font-size:clamp(11.5px,1.3vw,13px);font-weight:500;letter-spacing:-.003em;margin-top:clamp(3px,.7vh,7px)}
@keyframes boot-greet-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* [18may · Marcel "un solo indicador pero potente"] Había DOS indicadores de
   progreso (esta barra shimmer indeterminada + el checklist de 5 pasos que
   muestra progreso REAL). Incoherente · menos premium. Queda SOLO el checklist
   (concreto = potente). Barra oculta (reversible · markup/JS intactos). */
.boot-progress{display:none !important}
.boot-progress--legacy{width:clamp(190px,58vw,280px);height:2px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:2px}
.boot-progress::after{content:"";display:block;height:100%;width:42%;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.88),rgba(255,255,255,0));animation:boot-prog 1.25s cubic-bezier(.5,0,.5,1) infinite}
@keyframes boot-prog{0%{transform:translateX(-115%)}100%{transform:translateX(360%)}}
.boot-brand{display:inline-flex;align-items:center;gap:8px;font-family:Inter,-apple-system,sans-serif;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.boot-brand-dot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.55);animation:boot-brand-pulse 1.6s ease-in-out infinite}
@keyframes boot-brand-pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}
@media (prefers-reduced-motion:reduce){.boot-bg::before,.boot-bg::after,.boot-mark::before,.boot-progress::after,.boot-stage,.boot-greet,.boot-brand-dot{animation:none}.boot-progress::after{width:100%}}
.boot-checklist{list-style:none;margin:0;padding:clamp(8px,1.4vh,14px);display:flex;flex-direction:column;gap:clamp(2px,0.6vh,6px);border:1px solid rgba(255,255,255,.06);border-radius:8px;background:rgba(255,255,255,.025);width:100%;box-sizing:border-box}
.boot-check{display:flex;align-items:center;gap:13px;min-width:0;padding:clamp(11px,1.7vh,16px) clamp(12px,3vw,18px);border-radius:6px;font-family:Inter,-apple-system,sans-serif;transition:background .25s ease,color .35s ease;animation:boot-check-in .62s cubic-bezier(.16,1,.3,1) backwards}
.boot-check:nth-child(1){animation-delay:.04s}
.boot-check:nth-child(2){animation-delay:.10s}
.boot-check:nth-child(3){animation-delay:.16s}
.boot-check:nth-child(4){animation-delay:.22s}
.boot-check:nth-child(5){animation-delay:.28s}
@keyframes boot-check-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.boot-check-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;position:relative}
.boot-check-spin{width:15px;height:15px;border-radius:50%;border:1.6px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.60);animation:boot-spin .9s cubic-bezier(.5,.15,.5,.85) infinite}
@keyframes boot-spin{to{transform:rotate(360deg)}}
.boot-check-label{font-size:14px;font-weight:600;color:rgba(255,255,255,.66);letter-spacing:-.005em;flex-shrink:0;transition:color .35s ease}
.boot-check-detail{font-size:12.5px;color:rgba(255,255,255,.34);margin-left:auto;letter-spacing:-.005em;text-align:right;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .35s ease}
.boot-check-done .boot-check-spin{display:none}
/* [18may Marcel: "el verde no tiene nada que ver con nosotros, blanco o gris
   mas claro, mas moderno"] Estado OK NEUTRO: circulo blanco tenue + check
   blanco. CERO verde. Pop suave (mas fluido, sin rebote agresivo). */
.boot-check-done .boot-check-icon::after{content:"";width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.16);position:absolute;animation:boot-check-pop .36s cubic-bezier(.16,1,.3,1)}
.boot-check-done .boot-check-icon::before{content:"";position:absolute;width:5.5px;height:10px;border-right:1.75px solid rgba(255,255,255,.92);border-bottom:1.75px solid rgba(255,255,255,.92);transform:rotate(45deg) translate(-1px,-1px);z-index:1;animation:boot-check-stroke .4s cubic-bezier(.16,1,.3,1) .06s backwards}
@keyframes boot-check-pop{from{transform:scale(.5);opacity:0}65%{transform:scale(1.06)}to{transform:scale(1);opacity:1}}
@keyframes boot-check-stroke{from{opacity:0;transform:rotate(45deg) translate(-1px,-3px) scale(.6)}to{opacity:1;transform:rotate(45deg) translate(-1px,-1px) scale(1)}}
.boot-check-done .boot-check-label{color:rgba(255,255,255,.94)}
.boot-check-done .boot-check-detail{color:rgba(255,255,255,.52)}
.boot-status{font-family:Inter,-apple-system,sans-serif;font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.45);font-weight:500;text-align:center;animation:boot-status-fade 1.8s ease-in-out infinite}
@keyframes boot-status-fade{0%,100%{opacity:.42}50%{opacity:.72}}50%{opacity:.75}}

/* ===== bloque 4 (era <style> inline #4) ===== */
/* [18may · Marcel "barra de estado actividad estilo Superhuman · icono
   accionable como el buscador · limpio moderno max CRO/UX/UI"] Hereda el
   chrome/slide de .copilot-panel · solo añade el estilo de la lista. Net-safe. */
.activity-panel .copilot-panel__body{padding:0;overflow-y:auto;}
/* [v177 · Marcel "ese fondo gris oscuro hace que no se lean bien los textos"]
   Group-lbl sticky con bg-elevated CLARO (diferenciación neta de cards) ·
   color text-primary peso 700 · cero gris oscuro confuso. */
.activity-panel__group-lbl{position:sticky;top:0;background:var(--bg-elevated,#F7F7F7);z-index:1;padding:13px 20px 8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);border-bottom:1px solid var(--border-subtle);}
/* Panel body bg blanco puro · cero off-white que se vea gris contra dashboard */
.activity-panel .copilot-panel__body{background:#FFFFFF;}
/* [v177 · contraste LIGHT mode] subir contraste meta/when/sub para legibilidad
   contra bg blanco. text-muted era demasiado claro · text-secondary se lee bien. */
.activity-row__when{color:var(--text-secondary) !important;}
.activity-row__meta{color:var(--text-secondary) !important;}
.activity-row__sub{color:var(--text-secondary) !important;}
/* [E11 · contraste WCAG dark mode Activity reciente · 19may post-corte] subir
   luminance de labels/sub/when para que se lean bien sobre #17181B */
[data-theme="dark"] .activity-panel__group-lbl{background:#1F2024;color:#E5E5E7;}
[data-theme="dark"] .activity-panel .copilot-panel__body{background:#17181B;}
[data-theme="dark"] .activity-row__when{color:#B6B6BF !important;}
[data-theme="dark"] .activity-row__meta,
[data-theme="dark"] .activity-row__desc,
[data-theme="dark"] .activity-row__sub{color:#C8C8CE !important;}
.activity-row{display:flex;gap:11px;align-items:flex-start;padding:11px 20px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background-color 140ms var(--ease-out);}
.activity-row:hover{background:var(--bg-tinted);}
.activity-row:hover .activity-row__name,.activity-row:hover .activity-row__hl{color:var(--text-primary);}
.activity-row:last-child{border-bottom:0;}
.activity-row__ic{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.activity-row__ic svg{width:14px;height:14px;}
.activity-row__ic--open{background:color-mix(in oklch,var(--success) 14%,var(--bg-card));color:var(--success);}
.activity-row__ic--prop{background:color-mix(in oklch,var(--brand) 14%,var(--bg-card));color:var(--brand);}
.activity-row__ic--reply{background:color-mix(in oklch,var(--info) 16%,var(--bg-card));color:var(--info);}
.activity-row__ic--gen{background:var(--bg-tinted);color:var(--text-muted);}
.activity-row__ic--warn{background:color-mix(in oklch,var(--warning,#F59E0B) 16%,var(--bg-card));color:var(--warning,#F59E0B);}
/* [18may] quote NEUTRO (no púrpura · el púrpura es solo del copiloto) */
.activity-row__ic--quote{background:color-mix(in oklch,var(--info,#3B82F6) 14%,var(--bg-card));color:var(--info,#3B82F6);}
.activity-row__ic--pay{background:color-mix(in oklch,var(--success,#10B981) 16%,var(--bg-card));color:var(--success,#10B981);}
.activity-row__ic--ticket{background:color-mix(in oklch,var(--info,#3B82F6) 16%,var(--bg-card));color:var(--info,#3B82F6);}
.activity-row__ic--won{background:color-mix(in oklch,var(--success,#10B981) 18%,var(--bg-card));color:var(--success,#10B981);}
.activity-row__ic--meet{background:var(--bg-tinted);color:var(--text-secondary);}
/* Filtro por categoría · superpoder por equipo · sticky · premium */
.activity-filters{position:sticky;top:0;z-index:2;display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px;background:var(--bg-card);border-bottom:1px solid var(--border-subtle);}
/* [Marcel 20 may v224] · header simple del activity-filters (sin chips) · integrado al v3.
   Counter "N total · M nuevas" + botón "Marcar todos como leídos" estilo ghost premium.
   Tokens v3: bg-elevated, text-secondary, border-subtle, radius-sm, ease-out. */
.activity-filters--simple{justify-content:space-between;align-items:center;gap:12px;}
.activity-filters__lbl{font-size:12px;font-weight:500;color:var(--text-secondary);line-height:1.4;letter-spacing:-0.005em;}
.activity-filters__lbl strong{color:var(--text-primary);font-weight:600;}
.act-mark-all{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:11.5px;font-weight:600;font-family:inherit;color:var(--text-secondary);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm,4px);cursor:pointer;transition:color 140ms var(--ease-out,ease),background-color 140ms var(--ease-out,ease),border-color 140ms var(--ease-out,ease);letter-spacing:-0.005em;white-space:nowrap;}
.act-mark-all::before{content:'✓';font-weight:700;font-size:11px;opacity:.6;transition:opacity 140ms var(--ease-out,ease);}
.act-mark-all:hover{color:var(--text-primary);background:var(--bg-elevated);border-color:var(--border);}
.act-mark-all:hover::before{opacity:1;}
.act-mark-all:active{background:var(--bg-tinted);}
.act-mark-all:focus-visible{outline:2px solid var(--accent,#6366F1);outline-offset:1px;}
.act-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font-size:11.5px;font-weight:600;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:999px;cursor:pointer;font-family:inherit;transition:background-color 140ms var(--ease-out),color 140ms var(--ease-out);}
.act-chip:hover{color:var(--text-primary);}
/* [18may · Marcel "un botón tan oscuro roba protagonismo · distrae · ensucia"]
   Chip activo SUTIL · estado seleccionado sin slab negro (v3 Linear/Stripe). */
.act-chip--on{background:var(--bg-tinted);color:var(--text-primary);border-color:var(--border);font-weight:700;}
.act-chip__n{font-size:10px;font-weight:700;opacity:.7;}
.act-chip--on .act-chip__n{opacity:.85;}
.activity-row__main{flex:1;min-width:0;}
.activity-row__top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
.activity-row__name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.activity-row__when{flex:0 0 auto;font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.activity-row__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;font-size:11px;color:var(--text-muted);}
.activity-row__co{color:var(--text-secondary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.activity-row__amt{color:var(--text-secondary);font-weight:600;font-variant-numeric:tabular-nums;}
.activity-row__pill{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;background:var(--bg-tinted);color:var(--text-secondary);font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;}
.activity-row__dot{color:var(--text-tertiary);}
.activity-row__desc{font-size:12px;color:var(--text-secondary);line-height:1.45;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.activity-row__sub{color:var(--text-muted);font-weight:400;}
/* [18may · Marcel "ese borde morado acá, no gracias"] El púrpura es SOLO del
   copiloto. Hot en Actividad = realce NEUTRO sutil (lift de fondo + nombre
   más fuerte), sin color · premium monocromático. */
.activity-row--hot{background:color-mix(in oklch, var(--text-primary) 4%, var(--bg-card));}
.activity-row--hot .activity-row__name,.activity-row--hot .activity-row__hl{color:var(--text-primary);font-weight:700;}
/* [18may · contrato 7EO] Render compacto: headline 1 línea + sub gris ·
   acento 3px por sentiment (sin púrpura · tokens v3). */
/* [Marcel 30 may noche · P0 v450 · "no se ve no se entiende completo el mensaje · falta CRO UX UI premium micro pulido"]
   Headlines de Actividad reciente truncados con "..." se ven incompletos
   (caso real Marcel: "patricia - Propuesta enviada vio la propu..."). Fix: permitir
   2 líneas via -webkit-line-clamp · sigue acotado, pero deja respirar el mensaje. */
.activity-row__hl{font-size:14px;font-weight:650;color:var(--text-primary);line-height:1.4;letter-spacing:-0.01em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.activity-row__sub2{font-size:12px;color:var(--text-secondary);line-height:1.45;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
/* [19may · Marcel "limpio minimalista · fechas reales · contexto PandaDoc ·
   SIN botones negros molestos"] Línea de contexto discreta: pill de estado de
   propuesta + fecha exacta tenue + link "Ver propuesta" ghost (cero botón
   negro · cero ruido · todo CRO/UX/UI). */
.activity-row__ctx{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;}
.act-pill{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:999px;padding:2px 9px;line-height:1.5;}
.act-pill--ok{color:var(--success,#10B981);border-color:color-mix(in srgb,var(--success,#10B981) 35%,transparent);background:color-mix(in srgb,var(--success,#10B981) 9%,transparent);}
.act-exact{font-size:10.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;}
.act-prop-link{font-size:10.5px;font-weight:600;color:var(--brand,#6366F1);text-decoration:none;border:0;background:transparent;padding:0;cursor:pointer;transition:opacity 140ms var(--ease-out,ease);}
.act-prop-link:hover{opacity:.7;text-decoration:underline;}
/* [18may · Marcel "muchas barras o bordes a la izquierda que ya pedí sacar ·
   no es bueno el CRO/UX/UI · ensucia"] CERO barras de color a la izquierda.
   El sentiment ya se comunica por el COLOR DEL ÍCONO (verde/rojo/ámbar/azul) ·
   no necesita banda lateral · panel limpio v3 (Linear/Stripe · cero ruido). */
.activity-row--pos,.activity-row--neg,.activity-row--neutral,.activity-row--info{border-left:0;padding-left:20px;}
.activity-empty{padding:48px 24px;text-align:center;color:var(--text-muted);}
.activity-empty svg{width:34px;height:34px;opacity:.5;margin-bottom:12px;}
.activity-empty__t{font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:4px;}
.activity-empty__s{font-size:12px;line-height:1.5;}
.activity-skel{padding:18px 20px;display:flex;flex-direction:column;gap:14px;}

/* ===== bloque 5 (era <style> inline #5) ===== */
/* [18may · Marcel "animaciones con patrón elegante/fluido · nada instantáneo
   ni fome"] Patrón de motion ÚNICO para overlays/modales: duración + easing
   por TOKEN (= el mismo que usa el command-palette cmdk · refinado, no el
   `ease` genérico aburrido). Net-safe: solo `transition` (jamás animation/
   fill-mode en elemento de red · regla anti-stuck) · estado final SIEMPRE
   alcanzable (si la transición se salta, queda visible · cero riesgo blanco). */
.focus-overlay{position:fixed;inset:0;background:rgba(15,18,28,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100000;display:none;align-items:center;justify-content:center;padding:var(--space-6);opacity:0;transition:opacity var(--duration-base) var(--ease-out);}
.focus-overlay.visible,.focus-overlay[aria-hidden="false"]{display:flex;opacity:1;}
.focus-card{width:min(1180px,92vw);max-height:92vh;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:4px;box-shadow:var(--shadow-modal);display:flex;flex-direction:column;overflow:hidden;transform:scale(.97);transition:transform var(--duration-base) var(--ease-out);}
.focus-overlay.visible .focus-card,.focus-overlay[aria-hidden="false"] .focus-card{transform:none;}
/* [18may · Marcel "navegar ... funcional y animado"] Micro-pulse al pasar al
   siguiente/anterior lead · termina en el estado natural (opacity1/scale1) ·
   sin estado pegado posible (fire-and-forget · respeta reduced-motion). */
/* [19may · #R3 worker/Marcel "animacion de REBOTE horrible al cambiar de
   lead"] CERO scale/transform (eso se sentia rebote) · solo fade suave v3
   acorde al resto · rapido. */
/* [20may · Marcel "no parpadeo no bounce" v215] · navegación ultra fluida.
   Fade del CONTENIDO body (no del card entero) · cero scroll jump · cero rebote.
   Eased cubic-bezier sutil 220ms · respeta reduced-motion. */
@keyframes bb-focus-nav{0%{opacity:.4}100%{opacity:1}}
.focus-overlay.visible .focus-card.focus-card--nav .focus-body{animation:bb-focus-nav 220ms cubic-bezier(0.22,1,0.36,1);will-change:opacity;}
.focus-overlay.visible .focus-card.focus-card--nav{animation:none;}
@media (prefers-reduced-motion:reduce){.focus-overlay.visible .focus-card.focus-card--nav .focus-body{animation:none;}}
/* [Marcel 8 may 19:30 · agente D] Sticky header + tabs en mobile · botón × siempre visible */
.focus-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:5;background:var(--bg-card);}
.focus-tabs{position:sticky;top:48px;z-index:4;background:var(--bg-card);}
.focus-pagination{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--text-secondary);}
/* [v184 · au-16] focus-nav más distinguible · botones obvios · disabled state */
.focus-nav{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-primary);font-size:14px;font-weight:600;transition:background 140ms var(--ease-out,ease),border-color 140ms var(--ease-out,ease),color 140ms var(--ease-out,ease);}
.focus-nav:hover{background:var(--bg-elevated);border-color:var(--text-tertiary);color:var(--text-primary);}
.focus-nav:active{background:var(--bg-tinted);transform:scale(0.96);}
.focus-nav:disabled,.focus-nav[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none;}
.focus-counter{font-variant-numeric:tabular-nums;font-weight:var(--weight-medium);color:var(--text-primary);}
.focus-counter-context{color:var(--text-muted);font-size:var(--text-xs);}
.focus-close{margin-left:auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);font-size:18px;line-height:1;}
.focus-close:hover{background:var(--bg-elevated);color:var(--text-primary);}
.focus-tabs{display:flex;gap:2px;padding:0 var(--space-5);border-bottom:1px solid var(--border-subtle);background:var(--bg-card);}
/* [P0-DOUBLE · Marcel 14 may] Borde doble eliminado · solo ::after pinta el indicador
   Antes: border-bottom-color + ::after background brand → doble línea fea
   Ahora: solo el ::after con animación bouncy · base transparente · transición suave color */
.focus-tab{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted);background:transparent;border:0;cursor:pointer;position:relative;transition:color 200ms cubic-bezier(0.4,0,0.2,1), background-color 200ms cubic-bezier(0.4,0,0.2,1);}
.focus-tab:hover{color:var(--text-primary);background:var(--bg-elevated);}
.focus-tab.focus-tab-active{color:var(--text-primary);}
.focus-tab-badge{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:0 5px;background:var(--brand);color:#fff;border-radius:3px;font-size:9px;font-weight:var(--weight-semibold);letter-spacing:.4px;}
.focus-body{flex:1;overflow-y:auto;padding:var(--space-5);background:var(--bg);}
.focus-body::-webkit-scrollbar{width:8px;}
.focus-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
/* Slide-in del panel Componer */
.focus-overlay[data-tab="componer"] .focus-compose-panel,
.focus-overlay[data-tab="estado-espera"] .focus-compose-panel{transform:translateX(0);opacity:1;}
.focus-compose-panel{transform:translateX(20px);opacity:0;transition:transform .25s ease,opacity .2s ease;}
.focus-overlay:not([data-tab="componer"]):not([data-tab="estado-espera"]) .focus-compose-panel{display:none;}
.focus-overlay[data-tab="componer"] .focus-summary,
.focus-overlay[data-tab="estado-espera"] .focus-summary{display:none;}
/* [Marcel 11 may · BUG #3] Sitio web SOLO en tab Resumen · ocultar en Componer */
.focus-overlay[data-tab="componer"] .focus-website,
.focus-overlay[data-tab="estado-espera"] .focus-website,
.focus-overlay[data-tab="componer"] [data-section="website"],
.focus-overlay[data-tab="estado-espera"] [data-section="website"]{display:none !important;}
/* Hero */
.focus-hero{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center;padding:var(--space-4) 0 var(--space-4);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-4);}
.score-block{display:flex;flex-direction:column;align-items:center;justify-content:center;width:72px;padding:10px 8px;border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid var(--border-subtle);position:relative;}
.score-block-hot{background:var(--hot-soft);border-color:var(--hot-border);}
.score-block-warm{background:#fffbeb;border-color:#fde68a;}
.score-block-cold{background:#f1f5f9;border-color:#cbd5e1;}
.score-block-num{font-size:24px;font-weight:var(--weight-bold);line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums;}
.score-block-hot .score-block-num{color:var(--hot);}
.score-block-warm .score-block-num{color:var(--warm);}
.score-block-cold .score-block-num{color:#64748b;}
.score-block-label{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:1px;color:var(--text-muted);margin-top:2px;}
.score-block-hot .score-block-label{color:var(--hot);}
.score-block-progress{width:100%;height:3px;background:rgba(0,0,0,.06);border-radius:2px;margin-top:6px;overflow:hidden;}
.score-block-progress-fill{height:100%;background:currentColor;opacity:.7;}
.score-block-progress-hint{font-size:9px;color:var(--text-muted);margin-top:3px;}
.focus-hero-info{min-width:0;}
.focus-name{display:block;font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary);text-decoration:none;margin-bottom:6px;}
.focus-name:hover{color:var(--brand);}
.focus-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--text-muted);margin-bottom:8px;}
.focus-meta-item{color:var(--text-secondary);}
.focus-email{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-secondary);background:var(--bg-elevated);padding:4px 8px;border-radius:var(--radius-sm);cursor:pointer;}
.focus-email code{font-family:inherit;}
.focus-email-copy-icon{width:11px;height:11px;color:var(--text-muted);}
.focus-amount{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);font-variant-numeric:tabular-nums;}
.pd-status-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:3px;font-size:10px;font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);}
.pd-status-propuesta-vista{background:var(--warm-soft);border-color:var(--warm-border);color:var(--warm);}
.pd-status-propuesta-vista::before{content:"●";margin-right:4px;color:#f59e0b;}
.pd-status-reu-confirmada{background:#dbeafe;border-color:#bfdbfe;color:#1e40af;}
.pd-status-reu-confirmada::before{content:"●";margin-right:4px;color:#3b82f6;}
.pd-status-sin-actividad{background:#f1f5f9;border-color:#e2e8f0;color:#64748b;}
.pd-status-sin-actividad::before{content:"●";margin-right:4px;color:var(--text-tertiary);}
/* Recomendación */
/* [Marcel 13 may LATE] padding lateral 24px matched con .focus-section + .focus-followup-phase para alineación visual */
.focus-rec{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:20px 24px;margin-bottom:var(--space-4);}
/* [Marcel 13 may LATE] Todas las cajas hijas directas del focus-body deben tener padding lateral 24px uniforme */
.focus-overlay .focus-body > .focus-followup-phase,
.focus-overlay .focus-body > .focus-section,
.focus-overlay .focus-body > .focus-rec,
.focus-overlay .focus-body > [data-section]{padding-left:24px !important;padding-right:24px !important;}
.focus-overlay .focus-compose-panel .compose-row,
.focus-overlay .focus-compose-panel .focus-compose-body,
.focus-overlay .focus-compose-panel .focus-compose-status{padding-left:24px;padding-right:24px;box-sizing:border-box;}
/* [v222 · regla 7AB máximo contexto + 7AG animation tokens + safari mobile blur perf]
 * SLOTS modal lead · ocultos hasta que bridge ponga data válida · cero ruido si vacíos */
.focus-meta-since,
.focus-meta-rut {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #525252);
}
.focus-meta-since[hidden],
.focus-meta-rut[hidden],
.focus-scope-badge[hidden] { display: none !important; }
.focus-scope-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  background: color-mix(in oklch, #f59e0b 14%, var(--bg-card));
  color: #92400e;
  border: 1px solid color-mix(in oklch, #f59e0b 30%, transparent);
  margin-left: 4px;
  white-space: nowrap;
}
[data-theme="dark"] .focus-scope-badge {
  background: color-mix(in oklch, #f59e0b 22%, #1a1a1a);
  color: #fbbf24;
  border-color: color-mix(in oklch, #f59e0b 40%, transparent);
}
/* [v461 · Marcel 30 may noche · URGENTE "no se ve bien el CRO/UX/UI aca en mobil ni desktop"]
   Screenshot iPhone modal Adolfo: badge PROPUESTA VISTA + texto "Hoy es fin de semana ·
   esperar lunes · sistema no sugiere envío hoy..." se ven amontonados al COSTADO del
   título "Adolfo Sabando - Propuesta vista" sin jerarquía clara. La columna del centro
   (1fr del grid auto·1fr·auto) se aprieta y el texto largo desborda mal.
   FIX: pulir jerarquía hero en TODOS los viewports + reorganizar mobile a flex column
   limpio · pill PROPUESTA VISTA SEPARADA del nombre · reasoning como bloque legible. */
.focus-overlay .focus-hero { align-items: flex-start; }
.focus-overlay .focus-hero-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.focus-overlay .focus-name {
  margin-bottom: 0 !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}
.focus-overlay .focus-meta {
  margin-bottom: 0 !important;
  row-gap: 6px !important;
  column-gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
/* Status pill destacado · nunca se mezcla con texto · siempre se ve como chip */
.focus-overlay .pd-status-pill {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
/* Razón / reasoning largo · si aparece como item de meta, debe ser bloque legible · NO
   apretarse al costado del pill · word-break para que no rompa el layout */
.focus-overlay .focus-meta .focus-meta-item,
.focus-overlay .focus-meta .focus-reason,
.focus-overlay .focus-meta [data-reason],
.focus-overlay .focus-meta .focus-meta-reason {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}
/* Mobile <=640px · reorganizar hero · score + amount en fila arriba · info en fila abajo full-width */
@media (max-width: 640px) {
  .focus-overlay .focus-hero {
    grid-template-columns: auto auto !important;
    grid-template-areas: "score amount" "info info" !important;
    gap: 12px 14px !important;
    align-items: center !important;
    padding: 8px 0 14px !important;
  }
  .focus-overlay .focus-hero .score-block { grid-area: score; }
  .focus-overlay .focus-hero .focus-amount {
    grid-area: amount;
    margin-left: auto;
    font-size: 22px !important;
    line-height: 1 !important;
  }
  .focus-overlay .focus-hero .focus-hero-info {
    grid-area: info;
    width: 100% !important;
    padding-top: 4px;
    gap: 8px !important;
  }
  .focus-overlay .focus-name {
    font-size: 17px !important;
    font-weight: 600 !important;
  }
  .focus-overlay .focus-meta {
    gap: 6px 8px !important;
    font-size: 12px !important;
  }
  .focus-overlay .pd-status-pill {
    height: 22px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
  }
  .focus-overlay .focus-email {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .focus-overlay .focus-email code {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0;
  }
  /* Tabs Resumen / Estado de espera · más compactos · mejor jerarquía */
  .focus-overlay .focus-tab { padding: 10px 14px !important; font-size: 13px !important; }
}
/* SAFARI MOBILE blur perf · backdrop-filter blur(20px) en focus-overlay + bb-modal__backdrop
 * mata FPS en iOS Safari sobre viewports grandes. Reducir a blur(3px) <=640px y opt-out
 * en device con prefers-reduced-motion. Mantiene profundidad visual sin congelar scroll. */
@media (max-width: 640px) {
  .focus-overlay {
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }
  .bb-modal__backdrop {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  .hdr {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .focus-overlay,
  .bb-modal__backdrop,
  .hdr {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* Mobile sidebar 320/375/414 · verificación + refinamiento additive
 * El sidebar ya tiene .sb base + breakpoints @ max-width 1097/855/885/982.
 * Falta garantizar que en viewports muy chicos el drawer NO recorta contenido
 * cuando se expande full-screen. */
@media (max-width: 414px) {
  .app[data-sidebar="expanded"] .sb,
  .app[data-sidebar="collapsed"] .sb {
    max-width: min(286px, 92vw) !important;
  }
  .sb__nav-item span.sb__nav-label {
    max-width: calc(100% - 32px) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 375px) {
  .sb__system-status,
  .sb__connected-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
@media (max-width: 320px) {
  .sb {
    font-size: 12px !important;
  }
  .sb__nav-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* [v220 · P0-2 worker carril · mobile compose layout corta correo]
 * RAÍZ: padding 24px L+R fijo + sin overflow guard + body sin min-height en mobile
 * → en <640px el correo se corta y bordes laterales no caben. Fix additive solo
 * <=640px · NO toca desktop · regla 7AA respetada. */
@media (max-width: 640px) {
  .focus-overlay .focus-compose-panel,
  .focus-overlay .focus-compose-panel .compose-row,
  .focus-overlay .focus-compose-panel .focus-compose-body,
  .focus-overlay .focus-compose-panel .focus-compose-status {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .focus-overlay .focus-compose-panel .focus-compose-body {
    min-height: 180px !important;
    max-height: calc(100dvh - 320px) !important;
    overflow-y: auto !important;
    font-size: 16px !important; /* iOS no-zoom */
    line-height: 1.55 !important;
    -webkit-overflow-scrolling: touch;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  .focus-overlay .focus-compose-panel input,
  .focus-overlay .focus-compose-panel textarea {
    font-size: 16px !important; /* iOS no-zoom */
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .focus-overlay .focus-compose-panel .compose-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .focus-overlay .focus-compose-panel .compose-cc-pills {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .focus-overlay .focus-compose-panel .compose-cc-pill {
    max-width: calc(100vw - 60px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}
.focus-rec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.focus-rec-label{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:1px;text-transform:uppercase;color:var(--brand);}
/* [17may · Tarea 1 · Marcel] Chip de fase fusionado · única recomendación (antes
   eran 2 bloques redundantes: .focus-followup-phase + .focus-rec). v3 tokens, net-safe. */
.focus-rec-phase-chip{display:inline-flex;align-items:center;height:18px;margin-left:8px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:.02em;white-space:nowrap;background:color-mix(in oklch, var(--brand) 12%, var(--bg-card));color:var(--brand);border:1px solid color-mix(in oklch, var(--brand) 22%, transparent);}
.focus-rec-phase-chip[data-tone="discount"]{background:color-mix(in oklch, #8b5cf6 14%, var(--bg-card));color:#5b21b6;border-color:color-mix(in oklch, #8b5cf6 28%, transparent);}
.focus-rec-phase-chip[data-tone="warm"]{background:color-mix(in oklch, #f59e0b 14%, var(--bg-card));color:#92400e;border-color:color-mix(in oklch, #f59e0b 30%, transparent);}
.focus-rec-phase-chip[data-tone="urgent"]{background:color-mix(in oklch, #ef4444 12%, var(--bg-card));color:#991b1b;border-color:color-mix(in oklch, #ef4444 28%, transparent);}
.focus-rec-phase-chip[data-tone="success"]{background:color-mix(in oklch, #10b981 14%, var(--bg-card));color:#166534;border-color:color-mix(in oklch, #10b981 30%, transparent);}
.focus-interest{display:inline-flex;align-items:center;height:20px;padding:0;background:transparent;border:0;font-size:10px;font-weight:var(--weight-medium);color:var(--text-muted);}
.focus-interest::before{content:"●";margin-right:6px;font-size:9px;}
.focus-interest-high{color:#166534;}
.focus-interest-low{color:#64748b;}
.focus-interest[data-empty="true"]{display:none;}
.focus-rec-action{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:8px;line-height:1.4;}
.focus-rec-why{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.55;margin-bottom:14px;}
.focus-rec-meta{display:flex;gap:24px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border-subtle);}
.focus-rec-meta-item{display:flex;flex-direction:column;gap:2px;cursor:pointer;}
.focus-rec-meta-lbl{font-size:9px;font-weight:var(--weight-semibold);letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);}
.focus-rec-meta-item strong{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);}
.focus-urg-alta{color:var(--hot);}
.focus-urg-media{color:var(--warm);}
.focus-urg-baja{color:#64748b;}
/* Estado quiet (Bajo control) */
.focus-rec[data-rec-mode="quiet"]{border-left:3px solid #a3a3a3;}
.focus-rec[data-rec-mode="quiet"] .focus-rec-active{display:none;}
.focus-rec[data-rec-mode="active"] .focus-rec-quiet-state{display:none !important;}
.focus-rec-quiet-state{display:flex;gap:14px;align-items:flex-start;padding:4px 0;}
.focus-rec-quiet-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#ecfdf5;color:#10b981;display:flex;align-items:center;justify-content:center;}
[data-theme="dark"] .focus-rec-quiet-icon{background:#064e3b;color:#6ee7b7;}
.focus-rec-quiet-text{flex:1;}
.focus-rec-quiet-title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:4px;}
.focus-rec-quiet-detail{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.55;margin-bottom:8px;}
.focus-rec-quiet-next{font-size:var(--text-xs);color:var(--text-muted);line-height:1.55;padding-top:8px;border-top:1px dashed var(--border-subtle);}
/* [CRO-16 P1 · 20 may v190] cadence chip con próx. tick concreto */
.focus-rec-quiet-cadence{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 10px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:999px;font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums;}
.focus-rec-quiet-cadence svg{color:var(--text-tertiary);flex-shrink:0;}
[data-quiet-next-tick]{font-weight:var(--weight-semibold);color:var(--text-primary);}
/* Compose form */
.compose-body-wrap{padding:18px 20px;display:flex;flex-direction:column;gap:10px;}
.compose-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border-subtle);}
.compose-row-label{flex:0 0 60px;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;}
.compose-row-input{flex:1;border:0;background:transparent;font-size:var(--text-sm);color:var(--text-primary);font-family:inherit;outline:none;padding:4px 0;border-radius:var(--radius-sm);transition:box-shadow .12s ease;}
.compose-row-input:focus{color:var(--brand);}
.compose-row-input[aria-invalid="true"],.compose-body-editable[aria-invalid="true"]{border-color:var(--danger,#ef4444) !important;}
.compose-cc-pills{display:flex;gap:6px;flex-wrap:wrap;flex:1;align-items:center;}
.compose-cc-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;background:var(--bg-elevated);border:1px solid transparent;border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary);font-family:inherit;cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease,opacity .12s ease;}
.compose-cc-pill:hover{background:var(--bg-tinted,var(--bg-elevated));border-color:var(--border-subtle,#ECECEC);}
.compose-cc-pill:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.compose-cc-pill[data-cc-selected="false"]{background:transparent;color:var(--text-tertiary,#A3A3A3);border-color:var(--border-subtle,#ECECEC);text-decoration:line-through;opacity:.65;}
.compose-cc-pill__x{font-size:13px;line-height:1;color:var(--text-muted);opacity:.7;transition:opacity .12s ease,transform .12s ease;}
.compose-cc-pill:hover .compose-cc-pill__x{opacity:1;}
.compose-cc-pill[data-cc-selected="false"] .compose-cc-pill__x{transform:rotate(45deg);opacity:.5;}
/* [Marcel 14 may LATE-NIGHT · BUG REPORTADO 3ra vez · simetría visual]
   ANTES: body con border + radius creaba "caja dentro de caja" rompía simetría.
   AHORA: cero border lateral · cero padding-extra · alineado con compose-row · simetría total. */
.compose-body-editable{padding:18px 0 12px;min-height:220px;background:transparent;border:0;border-radius:0;margin-top:10px;line-height:1.6;font-size:var(--text-sm);color:var(--text-primary);outline:none;}
.compose-body-editable:focus{background:transparent;}
.compose-body-editable p{margin:0 0 12px;}
.compose-body-editable p:last-child{margin-bottom:0;}
.compose-body-editable ul{margin:0 0 12px;padding-left:22px;}
.compose-body-editable li{margin-bottom:4px;}
/* [19may · #7b contrato worker] El cuerpo trae <a href="bigbuda.cl/agendar">
   literal · que se VEA y sea clickeable como hipervínculo (no texto plano).
   También en preview enviado / Pulso / roadmap-meta (mismo render). */
.compose-body-editable a,.bb-sent-preview-body a,.focus-pulse a{color:var(--brand,#3A3F4C);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.compose-body-editable a:hover,.bb-sent-preview-body a:hover,.focus-pulse a:hover{opacity:.78;}
/* [Marcel 13 may LATE] hint divider OCULTO · redundante · firma Gmail real se agrega invisible al draft al enviar */
/* [Marcel 14 may LATE-NIGHT · BUG REPORTADO 2 VECES · firma de Gmail placeholder]
   Marcel: "aún no veo el lugar de la firma que antes existía y ya pedí 2 veces"
   Indicador visual sutil al final del body · gris itálica · cero ruido · solo informa. */
.compose-signature-hint{
  display:block;
  margin:8px 0 0;
  padding:10px 0 4px;
  font-size:11px;
  font-style:italic;
  color:var(--text-tertiary, #A3A3A3);
  text-align:center;
  border-top:1px dashed var(--border-subtle, #ECECEC);
  letter-spacing:0.01em;
  user-select:none;
}
[data-theme="dark"] .compose-signature-hint{color:#737373;border-top-color:rgba(255,255,255,0.08);}
/* [18may · Marcel "¿dónde veo mi firma?" → preview real de la firma de Gmail]
   Render solo-lectura de la firma REAL del remitente (la que Gmail inyecta al
   enviar) al pie del cuerpo · así ve exactamente lo que sale. Sutil, v3. */
.compose-sig-preview{margin:6px 0 0;padding:12px 14px;border-top:1px dashed var(--border-subtle,#ECECEC);font-size:12px;color:var(--text-secondary,#525252);line-height:1.5;}
.compose-sig-preview__lbl{display:block;margin:0 0 8px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary,#A3A3A3);}
.compose-sig-preview img{max-width:220px;max-height:90px;height:auto;}
.compose-sig-preview a{color:var(--brand);text-decoration:none;}
[data-theme="dark"] .compose-sig-preview{border-top-color:rgba(255,255,255,0.08);color:#B6B6BF;}
/* [Marcel 9 may · recovery panel CRO/Spam · zona compose análisis IA] */
.compose-analysis{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--border-subtle);border-radius:4px;background:var(--bg-elevated,#FAFAFA);margin:8px 0;transition:border-color .22s ease;}
.compose-analysis[data-cro-level="alto"]{border-color:rgba(16,185,129,.45);}
.compose-analysis[data-cro-level="medio"]{border-color:rgba(245,158,11,.45);}
.compose-analysis[data-cro-level="bajo"]{border-color:rgba(239,68,68,.45);}
.compose-analysis[data-loading="true"]{opacity:.65;}
.compose-analysis__head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.compose-analysis__title{font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);}
.compose-analysis__meta{display:inline-flex;align-items:center;gap:10px;}
.compose-analysis__status{font-size:11px;color:var(--text-muted);font-style:italic;}
.compose-analysis__refresh{font-size:11px;font-weight:500;color:var(--text-secondary,#525252);background:transparent;border:1px solid var(--border-subtle);border-radius:4px;padding:3px 8px;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease;}
.compose-analysis__refresh:hover{background:var(--bg-tinted,#F0F0F0);color:var(--text-primary,#0A0A0A);}
.compose-analysis__scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;}
.score-pill{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border:1px solid var(--border-subtle);border-radius:4px;background:var(--bg-card,#FFFFFF);min-width:0;}
.score-pill__label{font-size:9px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);}
.score-pill__value{font-size:24px;font-weight:600;line-height:1.1;color:var(--text-primary,#0A0A0A);font-variant-numeric:tabular-nums;}
.score-pill__sublabel{font-size:11px;color:var(--text-secondary,#525252);line-height:1.3;}
.score-pill[data-level="alto"][data-metric="cro"]{border-color:rgba(16,185,129,.55);background:rgba(16,185,129,.06);}
.score-pill[data-level="alto"][data-metric="cro"] .score-pill__value{color:#059669;}
.score-pill[data-level="medio"][data-metric="cro"]{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.06);}
.score-pill[data-level="medio"][data-metric="cro"] .score-pill__value{color:#b45309;}
.score-pill[data-level="bajo"][data-metric="cro"]{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.06);}
.score-pill[data-level="bajo"][data-metric="cro"] .score-pill__value{color:#dc2626;}
/* SPAM bajo = bueno (verde) · alto = malo (rojo) */
.score-pill[data-level="bajo"][data-metric="spam"]{border-color:rgba(16,185,129,.55);background:rgba(16,185,129,.06);}
.score-pill[data-level="bajo"][data-metric="spam"] .score-pill__value{color:#059669;}
.score-pill[data-level="medio"][data-metric="spam"]{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.06);}
.score-pill[data-level="medio"][data-metric="spam"] .score-pill__value{color:#b45309;}
.score-pill[data-level="alto"][data-metric="spam"]{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.06);}
.score-pill[data-level="alto"][data-metric="spam"] .score-pill__value{color:#dc2626;}
.compose-analysis__issues{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;}
.compose-analysis__issues:empty{display:none;}
.compose-analysis__issues .issue{font-size:12px;line-height:1.4;color:var(--text-secondary,#525252);padding:6px 8px;border-radius:4px;border-left:3px solid transparent;background:var(--bg-card,#FFFFFF);}
.compose-analysis__issues .issue--warning{border-left-color:#f59e0b;background:rgba(245,158,11,.05);}
.compose-analysis__issues .issue--info{border-left-color:#94a3b8;}
.compose-analysis__suggestions{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;}
.compose-analysis__suggestions:empty{display:none;}
.compose-analysis__suggestions li{font-size:12px;line-height:1.4;color:var(--text-primary,#0A0A0A);padding:8px 10px;border-radius:4px;background:var(--bg-card,#FFFFFF);border:1px solid var(--border-subtle);cursor:pointer;transition:background .15s ease,border-color .15s ease;display:flex;align-items:flex-start;gap:6px;}
.compose-analysis__suggestions li:hover{background:var(--bg-tinted,#F0F0F0);border-color:var(--border,#D4D4D8);}
.compose-analysis__suggestions li::before{content:"💡";flex:0 0 auto;font-size:13px;line-height:1.2;}
.compose-analysis__suggestions li[data-applied="true"]{opacity:.55;text-decoration:line-through;cursor:default;}
.compose-analysis__suggestions li[data-applied="true"]:hover{background:var(--bg-card,#FFFFFF);}
[data-theme="dark"] .compose-analysis{background:var(--bg-elevated-dark,#0F0F0F);}
[data-theme="dark"] .score-pill,[data-theme="dark"] .compose-analysis__issues .issue,[data-theme="dark"] .compose-analysis__suggestions li{background:#0A0A0A;}
/* [Marcel 11 may · BUG #4] Borrador IA optimizado · confirmación verde · sin sugerencias contradictorias */
.compose-analysis--optimized{background:#ECFDF5;border-color:#10B981;padding:0;}

/* [Marcel 14 may LATE-NIGHT · regla 7DO · animación envío elegante]
   Marcel: "verde horrible · pop up se cerró sin consentimiento · debe animar fluido al pipeline"
   Botón success con pulse breath · confirmación inline con slide. */
@keyframes bb-sent-slide-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.compose-btn--sent {
  pointer-events: none !important;
  animation: bb-sent-pulse 800ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes bb-sent-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50%  { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(16,185,129,0); }
  100% { transform: scale(1); box-shadow: 0 2px 12px rgba(16,185,129,0.35); }
}
@media (prefers-reduced-motion: reduce){
  .compose-btn--sent{animation:none;}
}

/* [Marcel 14 may LATE-NIGHT · regla 7AL HARDENED · 4ta capa CSS · NUNCA mostrar análisis IA en borrador IA-generated]
   Marcel ULTIMÁTUM: "siguen apareciendo recomendaciones que pedi eliminar"
   Bloqueo estructural CSS · si el overlay tiene draftSourcedByAI=true Y NO draftHumanEdited=true →
   panel análisis FORZADO display:none · sin importar lo que haga el JS. Solo se permite el mensaje
   verde "Borrador IA listo · optimizado al primer intento". */
.focus-overlay[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [data-compose-analysis]:not(.compose-analysis--optimized){
  display:none !important;
}
.focus-overlay[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [data-compose-analysis-issues],
.focus-overlay[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [data-compose-analysis-suggestions],
.focus-overlay[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [data-compose-analysis-scores]{
  display:none !important;
}
.compose-analysis-optimized{display:flex;align-items:center;gap:12px;padding:12px 16px;}
.compose-analysis-optimized__check{width:32px;height:32px;background:#10B981;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex:0 0 auto;}
.compose-analysis-optimized__body{display:flex;flex-direction:column;gap:2px;}
.compose-analysis-optimized__body strong{font-size:13px;color:#047857;font-weight:600;}
.compose-analysis-optimized__body span{font-size:11px;color:#065F46;}
[data-theme="dark"] .compose-analysis--optimized{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.45);}
[data-theme="dark"] .compose-analysis-optimized__body strong{color:#10B981;}
[data-theme="dark"] .compose-analysis-optimized__body span{color:#34D399;}
.compose-checks{display:flex;flex-wrap:wrap;gap:14px;padding:6px 0;}
.compose-checks label{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-secondary);cursor:pointer;}
.compose-checks input[type="checkbox"]{accent-color:var(--brand);}
.compose-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px;border-top:1px solid var(--border-subtle);margin-top:6px;}
.compose-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:var(--text-sm);font-weight:var(--weight-medium);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-fast,.15s) ease,filter var(--duration-fast,.15s) ease,border-color var(--duration-fast,.15s) ease;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);}
.compose-btn:hover{background:var(--bg-elevated);border-color:var(--border,#D4D4D8);}
.compose-btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);}
/* [Marcel 11 may · fix hover botón Enviar v3 fiel] var(--brand-strong) no estaba definido → hover quedaba transparente con texto blanco invisible. Filter brightness igual que .btn--brand:hover (línea 1278). */
.compose-btn-primary:hover{background:var(--brand);filter:brightness(.92);border-color:var(--brand);color:#fff;}
.compose-btn-primary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.compose-btn-ghost{background:transparent;}
.compose-btn-ghost:hover{background:var(--bg-elevated);border-color:var(--border,#D4D4D8);color:var(--text-primary);}
/* Sent guard (compose bloqueado) · [Marcel 11 may · banner compacto · no ocupa lugar de cancelar/enviar] */
.compose-sent-guard{padding:12px 16px;display:flex;flex-direction:row;align-items:flex-start;text-align:left;gap:12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--radius-sm);margin-bottom:var(--space-3);}
[data-theme="dark"] .compose-sent-guard{background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.25);}
.compose-sent-guard-icon{width:24px;height:24px;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.compose-sent-guard-icon svg{width:14px;height:14px;}
[data-theme="dark"] .compose-sent-guard-icon{background:#10b981;color:#fff;}
.compose-sent-guard-text{flex:1;min-width:0;}
.compose-sent-guard-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:#166534;line-height:1.35;}
[data-theme="dark"] .compose-sent-guard-title{color:#86efac;}
.compose-sent-guard-meta{font-size:var(--text-xs);color:#15803d;margin-top:2px;line-height:1.4;}
[data-theme="dark"] .compose-sent-guard-meta{color:#6ee7b7;}
.compose-sent-guard-hint{font-size:var(--text-xs);color:var(--text-muted);max-width:none;line-height:1.45;margin-top:4px;}
.compose-sent-guard-actions{margin-top:0;flex-shrink:0;align-self:center;}
/* Tab componer disabled */
.focus-tab-disabled{opacity:.45;cursor:not-allowed !important;pointer-events:auto;}
.focus-tab-disabled:hover{background:transparent !important;border-color:transparent !important;color:var(--text-muted) !important;}
.focus-tab-disabled[aria-disabled="true"]::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);margin-left:6px;opacity:0.6;}
/* Sent banner · [E9b · 20 may v203 RESTORE] hide cuando waiting tab activo */
.focus-overlay[data-waiting-mode="true"] .focus-sent-banner{display:none !important;}
.focus-sent-banner{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#dcfce7;border:1px solid #bbf7d0;border-radius:var(--radius-sm);margin-bottom:var(--space-3);font-size:var(--text-sm);color:#166534;}
.focus-sent-banner-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#16a34a;color:#fff;border-radius:50%;font-size:11px;font-weight:var(--weight-bold);}
.focus-sent-banner-by{font-weight:var(--weight-semibold);}
.focus-sent-banner-when{margin-left:auto;color:#15803d;font-size:var(--text-xs);}
/* Emails section */
.focus-emails-section,.focus-conv-section{margin-bottom:var(--space-4);}
/* [18may · contrato 7EP · Marcel "el modal es horrible · cadenas de correo
   crudas · ODIO notas ClickUp · reuniones dobles · solo info útil 100% CRO"]
   Modal Resumen consolidado: OCULTAR las secciones que Marcel odia /
   redundantes. El valor ahora vive en UNA sección "Pulso del lead"
   (/lead-pulse · sintetizado por el worker · cero cadenas crudas).
   Ocultar (no borrar · regla 7AA net-safe · reversible):
   - Notas del equipo en ClickUp (.bb-comments-section · .lead__comments)
   - Historial de envíos / cadenas crudas (.focus-emails-section)
   - Conversación reciente cruda (.focus-conv-section)
   - "Reuniones grabadas" (ClickUp Docs) → se fusiona con Reuniones:
     se mantiene .focus-meetings (línea estructurada) y se oculta el
     bloque voluminoso .focus-clickup-docs (misma reunión, duplicado). */
.focus-overlay .bb-comments-section,
.focus-overlay .lead__comments,
.focus-overlay .focus-emails-section,
.focus-overlay .focus-conv-section,
.focus-overlay .focus-section.focus-clickup-docs{display:none !important;}
/* [18may · 7EP] Sección "Pulso del lead" · sintetizada · escaneable en 3s ·
   tokens v3 · cero morado · tono por estado (pos/neg/neutral/info). */
.focus-pulse__ctx{margin:6px 0 12px;font-size:13px;color:var(--text-secondary);}
.focus-pulse__ctxline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600;color:var(--text-primary);}
.focus-pulse__dot{color:var(--text-tertiary);font-weight:400;}
.focus-pulse__state{text-transform:uppercase;letter-spacing:.03em;font-size:11px;color:var(--text-secondary);}
.focus-pulse__amt{font-variant-numeric:tabular-nums;}
.focus-pulse__mv{font-weight:500;color:var(--text-secondary);}
.focus-pulse__wait{margin-top:5px;color:var(--text-muted);font-size:12.5px;}
.focus-pulse__next{margin-top:6px;color:var(--text-primary);font-size:12.5px;}
.focus-pulse__next strong{font-weight:600;}
.focus-pulse__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
.focus-pulse__chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid transparent;}
.focus-pulse__chip-note{font-weight:400;opacity:.8;}
.focus-pulse__tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:280px;overflow-y:auto;}
.focus-pulse__tlrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--border-subtle);font-size:12.5px;}
.focus-pulse__tlrow:last-child{border-bottom:0;}
.focus-pulse__tlic{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;background:var(--bg-tinted);color:var(--text-secondary);}
.focus-pulse__tlic svg{width:12px;height:12px;}
.focus-pulse__tltx{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.focus-pulse__tlwhen{color:var(--text-tertiary);font-variant-numeric:tabular-nums;font-size:11px;}
.focus-pulse .pulse--pos .focus-pulse__tlic,.focus-pulse__chip.pulse--pos{background:color-mix(in oklch,var(--success,#10B981) 13%,var(--bg-card));color:var(--success,#0E9F6E);border-color:color-mix(in oklch,var(--success,#10B981) 24%,transparent);}
.focus-pulse .pulse--neg .focus-pulse__tlic,.focus-pulse__chip.pulse--neg{background:color-mix(in oklch,var(--danger,#DC2626) 12%,var(--bg-card));color:var(--danger,#DC2626);border-color:color-mix(in oklch,var(--danger,#DC2626) 24%,transparent);}
.focus-pulse .pulse--neutral .focus-pulse__tlic,.focus-pulse__chip.pulse--neutral{background:color-mix(in oklch,var(--warning,#F59E0B) 14%,var(--bg-card));color:#B45309;border-color:color-mix(in oklch,var(--warning,#F59E0B) 26%,transparent);}
.focus-pulse .pulse--info .focus-pulse__tlic,.focus-pulse__chip.pulse--info{background:color-mix(in oklch,var(--info,#3B82F6) 12%,var(--bg-card));color:var(--info,#3B82F6);border-color:color-mix(in oklch,var(--info,#3B82F6) 22%,transparent);}
[data-theme="dark"] .focus-pulse .pulse--neutral .focus-pulse__tlic,[data-theme="dark"] .focus-pulse__chip.pulse--neutral{color:#FBBF24;}
.focus-col-title{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin:0 0 8px;}
.focus-emails-stats{font-weight:var(--weight-regular);text-transform:none;letter-spacing:0;font-size:var(--text-xs);color:var(--text-muted);}
/* Email tracking item */
.focus-email-item{padding:0;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden;}
.focus-email-item[open]{box-shadow:var(--shadow-elev-1);}
.focus-email-summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;}
.focus-email-summary::-webkit-details-marker{display:none;}
.focus-email-summary-l{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1;}
.focus-email-summary-text{min-width:0;flex:1;}
.focus-email-summary-r{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.focus-email-status{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:3px;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:.3px;text-transform:uppercase;flex-shrink:0;margin-top:2px;}
.focus-email-status-engaged{background:#dcfce7;color:#166534;}
.focus-email-status-opened{background:#dbeafe;color:#1e3a8a;}
.focus-email-status-sent{background:var(--bg-elevated);color:var(--text-muted);}
.focus-email-status-unopened{background:var(--warm-soft);color:var(--warm);}
.focus-email-item-subject{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.35;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;}
.focus-email-item-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-muted);flex-wrap:wrap;}
.focus-email-item-route{font-family:var(--font-mono);font-size:10px;}
.focus-email-stat{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums;padding:2px 6px;border-radius:3px;background:var(--bg-elevated);font-weight:var(--weight-medium);}
.focus-email-stat svg{opacity:.7;}
.focus-email-stat-opens{color:#1e3a8a;background:#eff6ff;}
.focus-email-stat-clicks{color:#166534;background:#f0fdf4;}
.focus-email-stat-replies{color:#7c2d12;background:#fff7ed;}
.focus-email-stat-last{font-size:10px;color:var(--text-muted);font-style:italic;}
.focus-email-chev{color:var(--text-muted);transition:transform var(--duration-fast);}
.focus-email-item[open] .focus-email-chev{transform:rotate(180deg);}
.focus-email-body{padding:0 14px 14px 14px;border-top:1px solid var(--border-subtle);background:var(--bg);}
.focus-email-atts{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 0;}
.focus-email-att{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:3px;padding:3px 7px;}
.focus-email-tl-title{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin:14px 0 8px;}
.focus-email-tl{list-style:none;padding:0;margin:0;position:relative;}
.focus-email-tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;background:var(--border-subtle);}
.focus-tl-item{position:relative;display:flex;align-items:flex-start;gap:10px;padding:6px 0;}
.focus-tl-dot{position:relative;z-index:1;width:18px;height:18px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-muted);}
.focus-tl-sent .focus-tl-dot{color:var(--text-secondary);}
.focus-tl-open .focus-tl-dot{color:#1e3a8a;border-color:#bfdbfe;background:#eff6ff;}
.focus-tl-click .focus-tl-dot{color:#166534;border-color:#bbf7d0;background:#f0fdf4;}
.focus-tl-reply .focus-tl-dot{color:#7c2d12;border-color:#fed7aa;background:#fff7ed;}
.focus-tl-body{flex:1;min-width:0;}
.focus-tl-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.focus-tl-label{font-size:12px;font-weight:var(--weight-medium);color:var(--text-primary);}
.focus-tl-when{font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;}
.focus-tl-detail{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.45;}
.focus-tl-score{display:inline-flex;align-items:center;height:14px;padding:0 5px;border-radius:3px;background:rgba(99,102,241,.1);color:var(--brand);font-size:9px;font-weight:var(--weight-semibold);margin-left:4px;letter-spacing:.3px;}
/* Threads */
.focus-thread{padding:12px 14px;background:var(--bg-card);border:1px solid var(--border-subtle);border-left:3px solid #16a34a;border-radius:var(--radius-sm);margin-bottom:8px;}
.focus-thread-head{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-xs);margin-bottom:6px;}
.focus-thread-tag{font-weight:var(--weight-semibold);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#16a34a;}
.focus-thread-when{color:var(--text-muted);}
.focus-thread-subject{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary);margin-bottom:6px;}
.focus-thread-snippet{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.55;}
/* Acciones (footer) · CRO-29: columnas equilibradas (era 1.4fr · ahora 1fr 4x) */
.focus-actions{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;padding:var(--space-3) var(--space-5);border-top:1px solid var(--border-subtle);background:var(--bg-card);}
/* [CRO-25 P2 · 20 may v192] compose-history · inline styles → tokens */
.compose-history{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-subtle);}
.compose-history__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.compose-history__title{margin:0;font-size:11px;font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);}
.compose-history__count{font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.compose-history__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
/* [CRO-22 P1 · 20 may v192] cohort=waiting · ocultar Ganar/Perder · degradar Archivar */
.focus-actions[data-cohort="waiting"]{grid-template-columns:1fr auto;}
.focus-actions[data-cohort="waiting"] [data-action="ganar"],
.focus-actions[data-cohort="waiting"] [data-action="perder"]{display:none;}
.focus-actions[data-cohort="waiting"] [data-action="archivar"]{order:99;height:32px;padding:0 10px;font-size:11px;font-weight:var(--weight-medium);opacity:.7;background:transparent;border-color:var(--border-subtle);}
.focus-actions[data-cohort="waiting"] [data-action="archivar"]:hover{opacity:1;background:var(--bg-elevated);}
.focus-actions[data-cohort="waiting"] [data-action="archivar"] .focus-btn-kbd{display:none;}
.focus-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 12px;font-size:var(--text-sm);font-weight:var(--weight-medium);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-primary);font-family:inherit;transition:background .15s,border-color .15s;}
.focus-btn:hover:not(:disabled){background:var(--bg-elevated);border-color:var(--border);}
.focus-btn:disabled{opacity:.5;cursor:not-allowed;}
.focus-btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.focus-btn-primary:hover:not(:disabled){background:var(--brand-hover,#5b5fde);}
.focus-btn-primary:disabled{background:var(--bg-elevated);border-color:var(--border-subtle);color:var(--text-muted);}
.focus-btn-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;margin-right:8px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);border-radius:3px;font-size:11px;font-weight:var(--weight-semibold);font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:0;color:#fff;vertical-align:middle;flex-shrink:0;}
.focus-btn:not(.focus-btn-primary) .focus-btn-kbd{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.08);color:var(--text-secondary);}
/* Mobile: ocultar kbd · no tiene sentido en touch */
/* [18may · Marcel "elimina los atajos de teclado para el pop up"] Sin badge
   de tecla en los botones del modal (G/P/A/E) · el atajo ya no existe ·
   mostrarlo sería inventar un shortcut muerto. Solo navegar/cerrar por teclado. */
.focus-actions .focus-btn-kbd,.lead__triage kbd{display:none !important;}
@media (max-width:768px){.focus-foot kbd{display:none !important;}}
/* [Marcel 9 may · estados Componer mutuamente excluyentes] · garantiza que [hidden] funciona */
.focus-compose [hidden],
[data-sent-guard][hidden],
[data-compose-form][hidden],
[data-followup-banner][hidden]{display:none !important;}
.focus-btn-success{background:#16a34a !important;border-color:#16a34a !important;color:#fff !important;pointer-events:none;}
.focus-btn-success .focus-btn-kbd{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff;}
/* Footer atajos */
.focus-foot{padding:8px var(--space-5);border-top:1px solid var(--border-subtle);background:var(--bg);font-size:11px;color:var(--text-muted);text-align:center;}
.focus-foot kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:3px;font-size:10px;font-family:inherit;color:var(--text-secondary);margin:0 2px;}
.focus-hint-sep{margin:0 6px;opacity:.5;}
.lead__triage-success{background:#16a34a !important;color:#fff !important;border-color:#16a34a !important;}
/* ============== DARK MODE overrides ============== */
[data-theme="dark"] .score-block-hot{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.3);}
[data-theme="dark"] .score-block-hot .score-block-num,[data-theme="dark"] .score-block-hot .score-block-label{color:#fca5a5;}
[data-theme="dark"] .score-block-warm{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.3);}
[data-theme="dark"] .score-block-warm .score-block-num{color:#fbbf24;}
[data-theme="dark"] .score-block-cold{background:rgba(100,116,139,.15);border-color:rgba(100,116,139,.35);}
[data-theme="dark"] .score-block-cold .score-block-num{color:#cbd5e1;}
[data-theme="dark"] .pd-status-propuesta-vista{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.3);color:#fbbf24;}
[data-theme="dark"] .pd-status-reu-confirmada{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.3);color:#93c5fd;}
[data-theme="dark"] .pd-status-sin-actividad{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.25);color:#94a3b8;}
[data-theme="dark"] .focus-interest-high{background:rgba(22,163,74,.18);color:#86efac;}
[data-theme="dark"] .focus-interest-low{background:rgba(100,116,139,.18);color:#94a3b8;}
[data-theme="dark"] .focus-sent-banner{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.3);color:#86efac;}
[data-theme="dark"] .focus-sent-banner-when{color:#4ade80;}
[data-theme="dark"] .focus-sent-banner-icon{background:#16a34a;color:#fff;}
/* Email tracking · dark */
[data-theme="dark"] .focus-email-status-engaged{background:rgba(22,163,74,.18);color:#86efac;}
[data-theme="dark"] .focus-email-status-opened{background:rgba(59,130,246,.18);color:#93c5fd;}
[data-theme="dark"] .focus-email-status-unopened{background:rgba(245,158,11,.18);color:#fcd34d;}
[data-theme="dark"] .focus-email-stat-opens{background:rgba(59,130,246,.15);color:#93c5fd;}
[data-theme="dark"] .focus-email-stat-clicks{background:rgba(22,163,74,.15);color:#86efac;}
[data-theme="dark"] .focus-email-stat-replies{background:rgba(234,88,12,.15);color:#fdba74;}
[data-theme="dark"] .focus-tl-open .focus-tl-dot{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.3);color:#93c5fd;}
[data-theme="dark"] .focus-tl-click .focus-tl-dot{background:rgba(22,163,74,.18);border-color:rgba(22,163,74,.3);color:#86efac;}
[data-theme="dark"] .focus-tl-reply .focus-tl-dot{background:rgba(234,88,12,.18);border-color:rgba(234,88,12,.3);color:#fdba74;}
[data-theme="dark"] .focus-tl-score{background:rgba(99,102,241,.2);}
/* Email tracking · responsive */
@media (max-width:680px){
  .focus-email-summary{flex-direction:column;align-items:stretch;gap:10px;}
  .focus-email-summary-r{justify-content:flex-start;flex-wrap:wrap;}
  .focus-email-stat-last{flex-basis:100%;}
}
[data-theme="dark"] .focus-thread{border-left-color:#16a34a;}
[data-theme="dark"] .focus-thread-tag{color:#86efac;}
[data-theme="dark"] .focus-overlay{background:rgba(0,0,0,.6);}
[data-theme="dark"] .focus-urg-alta{color:#fca5a5;}
[data-theme="dark"] .focus-urg-media{color:#fbbf24;}
[data-theme="dark"] .lead-meta__cell--warn .lead-meta__val{color:#fbbf24;}
[data-theme="dark"] .lead-meta__cell--ok .lead-meta__val::after{background:#22c55e;}
[data-theme="dark"] .lead-meta__cell--cold .lead-meta__val{color:#64748b;}

/* [Marcel 14 may FINAL · regla 7DV · CSS HARDENING 7AL · 5 capas defensa]
   PROHIBIDO mostrar análisis IA sobre borrador IA-generado sin edición humana.
   Marcel reportó esta regresión múltiples veces · 5 capas para que NUNCA vuelva. */

/* Capa 1 · selector específico data attrs */
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [data-compose-analysis],
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) .bb-compose-quality-suggestions,
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) .compose-analysis-suggestions,
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) .ai-suggestions-box,
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) .compose-ai-feedback {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Capa 2 · selector global anti-regresión · cualquier nodo con texto "Elimina" o "Cambia" como sugerencia */
.focus-compose [data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) .suggestion,
.modal-componer [data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) .suggestion,
.compose-overlay [data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) .suggestion {
  display: none !important;
}

/* Capa 3 · padre del compose con flag inline · si el padre tiene el flag, esconder sugerencias hijas */
.compose-overlay[data-no-ai-analysis="true"] [data-compose-analysis],
.compose-overlay[data-no-ai-analysis="true"] .ai-suggestion,
.compose-overlay[data-no-ai-analysis="true"] .quality-tip {
  display: none !important;
}

/* Capa 4 · ANTI bullet de sugerencia con emoji 💡 (patrón visual común) */
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [data-suggestion-bullet],
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) .suggestion-tip,
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [data-ai-tip] {
  display: none !important;
}

/* Capa 5 · safety net · cualquier elemento con clase que contenga "ai-analysis" o "ai-suggestion" dentro de borrador IA */
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [class*="ai-analysis"],
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [class*="ai-suggest"],
[data-draft-sourced-by-ai="true"]:not([data-draft-human-edited="true"]) [class*="quality-tip"] {
  display: none !important;
}

/* [Marcel 14 may FINAL · regla 7DW · modal estado de espera] */
.bb-send-status-card {
  background: var(--bg-elevated, #fafafa);
  border: 1px solid var(--border-subtle, #ECECEC);
  border-radius:4px;
  padding: 16px;
  margin: 12px 0;
}
.bb-send-status-card__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary, #525252);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bb-send-status-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  border-top: 1px solid var(--border-subtle, #ECECEC);
}
.bb-send-status-card__row:first-of-type { border-top: 0; }
.bb-send-status-card__label {
  color: var(--text-muted, #737373);
  font-size: 12px;
  font-weight: 500;
}
.bb-send-status-card__value {
  color: var(--text-primary, #0A0A0A);
  font-weight: 500;
  font-size: 13px;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-tracking-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-subtle, #ECECEC);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #525252);
  margin-right: 6px;
}
.bb-tracking-pill__num {
  font-weight: 700;
  color: var(--text-primary, #0A0A0A);
  font-variant-numeric: tabular-nums;
}
.bb-next-action-row {
  padding: 8px 12px;
  border-left: 3px solid var(--brand, #6366F1);
  margin: 8px 0;
  background: var(--bg-card, #FFFFFF);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #525252);
  border-radius: 0 4px 4px 0;
}
.bb-next-action-row strong {
  color: var(--text-primary, #0A0A0A);
  font-weight: 600;
}
.bb-block-reason {
  background: #FEE2E2;
  color: #991B1B;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  margin: 12px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.bb-block-reason__icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}
[data-theme="dark"] .bb-block-reason {
  background: #7F1D1D;
  color: #FEE2E2;
}
.bb-waiting-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.bb-waiting-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-card, #FFFFFF);
  color: var(--text-primary, #0A0A0A);
  border: 1px solid var(--border, #D4D4D8);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.bb-waiting-btn:hover {
  background: var(--bg-elevated, #fafafa);
  border-color: var(--text-muted, #737373);
}
.bb-waiting-btn--primary {
  background: #0A0A0A;
  color: #FFFFFF;
  border-color: #0A0A0A;
}
.bb-waiting-btn--primary:hover {
  background: #1a1a1a;
}
/* Tab variant "Estado de espera" · azul tinted no morado */
.focus-tab[data-tab="estado-espera"] .focus-tab-badge {
  background: #3B82F6 !important;
}
[data-theme="dark"] .bb-send-status-card {
  background: var(--bg-elevated, #18181b);
  border-color: var(--border-subtle, #27272a);
}
[data-theme="dark"] .bb-next-action-row {
  background: var(--bg-card, #0A0A0A);
}
[data-theme="dark"] .bb-tracking-pill {
  background: var(--bg-card, #0A0A0A);
  border-color: var(--border-subtle, #27272a);
}

/* ════════════════════════════════════════════════════════════════════════
   [20may · agent-cro-batch2 · Marcel] BUG-CRO P1 batch 2 · CSS aditivo
   net-safe · cero modificación markup v3 · solo agrega tokens visuales
   ════════════════════════════════════════════════════════════════════════ */

/* BUG-CRO-01 · compose-checks como chips estilo Linear/Stripe
   Convierte <label><checkbox> Texto</label> en chip elegante con
   bg elevated · radius 6px · checked state con bg tinted + accent. */
.compose-checks{gap:8px !important;padding:8px 0 !important;}
.compose-checks label{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  background:var(--bg-elevated,#F7F7F7);
  border:1px solid var(--border-subtle,#ECECEC);
  border-radius:4px;
  font-size:var(--text-xs,12px);font-weight:var(--weight-medium,500);
  color:var(--text-secondary,#525252);
  cursor:pointer;
  transition:background var(--duration-fast,.15s) ease,border-color var(--duration-fast,.15s) ease,color var(--duration-fast,.15s) ease;
  user-select:none;
}
.compose-checks label:hover{
  background:color-mix(in oklch, var(--brand,#6366F1) 5%, var(--bg-elevated,#F7F7F7));
  border-color:color-mix(in oklch, var(--brand,#6366F1) 18%, var(--border-subtle,#ECECEC));
  color:var(--text-primary,#0A0A0A);
}
.compose-checks label:has(input[type="checkbox"]:checked){
  background:color-mix(in oklch, var(--brand,#6366F1) 10%, var(--bg-card,#FFFFFF));
  border-color:color-mix(in oklch, var(--brand,#6366F1) 35%, var(--border-subtle,#ECECEC));
  color:var(--text-primary,#0A0A0A);
}
.compose-checks input[type="checkbox"]{
  width:13px;height:13px;
  accent-color:var(--brand,#6366F1);
  cursor:pointer;
  margin:0;
}
[data-theme="dark"] .compose-checks label{
  background:var(--bg-elevated,#1F2024);
  border-color:var(--border-subtle,#27272a);
  color:var(--text-secondary,#A3A3A3);
}
[data-theme="dark"] .compose-checks label:hover{
  background:color-mix(in oklch, var(--brand,#6366F1) 14%, #1F2024);
  border-color:color-mix(in oklch, var(--brand,#6366F1) 30%, #27272a);
  color:var(--text-primary,#E5E5E7);
}
[data-theme="dark"] .compose-checks label:has(input[type="checkbox"]:checked){
  background:color-mix(in oklch, var(--brand,#6366F1) 18%, #17181B);
  border-color:color-mix(in oklch, var(--brand,#6366F1) 45%, #27272a);
  color:#E5E5E7;
}

/* BUG-CRO-12 · sidebar tablet 768-1023px: mostrar system-status compacto
   Override de la regla `display:none` en línea 809 · dot + label corto.
   Anti-regresión: NO toca móvil (<768px) donde la regla en línea 841
   sigue ocultándolo (modo iconos 56px). */
@media (min-width:768px) and (max-width:1023px){
  .app .sb__system-status{
    display:flex !important;
    align-items:center;
    gap:6px;
    padding:3px 12px;
    font-size:10.5px;
    opacity:.85;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .app .sb__system-status-dot{width:6px;height:6px;flex-shrink:0;}
  /* Texto compacto · solo "Sistema activo" si el label completo no entra */
  .app .sb__system-status [data-sb-system-status-label]{
    overflow:hidden;text-overflow:ellipsis;
  }
}

/* BUG-CRO-13 · tab Componer · 3 estados visuales loading/cached/empty
   Activan vía data-state attribute en el .focus-tab[data-tab="componer"].
   Lectura: JS bridge marca el tab según resultado del prebuild draft. */
.focus-tab[data-tab="componer"][data-state="loading"]{
  position:relative;
}
.focus-tab[data-tab="componer"][data-state="loading"]::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand,#6366F1),transparent);
  background-size:200% 100%;
  animation:focus-tab-shimmer 1.2s linear infinite;
  border-radius:1px;
}
@keyframes focus-tab-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.focus-tab[data-tab="componer"][data-state="cached"]::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--success,#10B981);
  margin-right:6px;
  vertical-align:middle;
  box-shadow:0 0 0 2px color-mix(in oklch, var(--success,#10B981) 25%, transparent);
}
.focus-tab[data-tab="componer"][data-state="empty"]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .focus-tab[data-tab="componer"][data-state="loading"]::after{
    animation:none;
    background:var(--brand,#6366F1);
    opacity:.5;
  }
}

/* BUG-CRO-30 · kbd unificado · selector element + clases legacy heredan */
kbd,
.kbd,
.focus-btn-kbd,
.btn__kbd{
  font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-weight:var(--weight-semibold,600);
  font-size:10px;
  line-height:1;
}
/* Base común para kbd standalone (no override de focus-btn-kbd que mantiene su bg blanco invertido) */
kbd:not(.focus-btn-kbd):not(.btn__kbd){
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--bg-elevated,#F7F7F7);
  border:1px solid var(--border-subtle,#ECECEC);
  border-radius:4px;
  color:var(--text-muted,#737373);
}
[data-theme="dark"] kbd:not(.focus-btn-kbd):not(.btn__kbd){
  background:var(--bg-elevated,#1F2024);
  border-color:var(--border-subtle,#27272a);
  color:var(--text-secondary,#A3A3A3);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * [v232 · P2 polish · Zoom iOS guard global + toast session expired animation]
 * - Marcel: "zoom iOS double-tap no controlado · inputs y selects"
 * - iOS Safari auto-zoom al focus si font-size <16px · fix: font-size:16px en
 *   TODOS los inputs/selects/textareas <640px (no afecta desktop)
 * - Toast animation @keyframes bb-toast-in usado por bb-session-expired-toast
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}
@keyframes bb-toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * [v231 · P2 polish · Ajustes scroll mobile (relay-v5 #4)]
 * Marcel pidió: "Ajustes scroll mobile" · panel corta contenido en celular.
 * Fix additive · solo @media max-width:640px · cero modificación desktop.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .bb-sv-enter {
    margin: 16px auto 60px !important;
    padding: 0 14px !important;
    max-width: 100vw !important;
    gap: 14px !important;
  }
  .bb-sv-enter > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .bb-sv-enter h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  .bb-sv-enter p {
    font-size: 13px !important;
  }
  /* Pane scroll en mobile · evita overflow oculto en secciones largas */
  .pane[data-view="ajustes"],
  .pane[data-view="reportes"],
  .pane[data-view="diseno"],
  .pane[data-view="desarrollo"],
  .pane[data-view="soporte"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom, 16px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * [v227 · regla 7AG · animaciones tokens audit compat layer]
 * Marcel + Opus pidieron auditoría animaciones tokens. 77 transitions con ms
 * hardcoded (200ms/220ms/280ms/etc) + 8 easings + 7 duraciones coexistiendo.
 * Mass change risky (refactor invasivo). Aplico capa COMPAT que normaliza los
 * valores hardcoded MÁS comunes a tokens existentes vía CSS variable layer ·
 * cero modificación markup · prefers-reduced-motion respetado.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Honor prefers-reduced-motion globalmente · accesibilidad WCAG */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tokens fallback · si componente legacy no usa --duration-*, lee aquí.
 * NO afecta animaciones que ya usan tokens correctos. */
:root {
  /* Alias semántico para consistency · valores hardcoded más usados */
  --bb-anim-instant: 80ms;
  --bb-anim-quick: 120ms; /* matches --duration-fast */
  --bb-anim-base: 220ms;  /* matches --duration-base */
  --bb-anim-slow: 320ms;  /* matches --duration-slow */
  --bb-anim-modal: 380ms;
  --bb-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --bb-ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);
  --bb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== bloque 6 (era <style> inline #6) ===== */
.prep-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:var(--z-modal,9000);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity var(--duration-base) var(--ease-out);}
.prep-overlay[data-open="true"]{opacity:1;pointer-events:auto;}
[data-theme="dark"] .prep-overlay{background:rgba(0,0,0,.7);}
.prep-card{width:min(820px,100%);max-height:calc(100vh - 48px);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);display:flex;flex-direction:column;overflow:hidden;transform:scale(.97);transition:transform .18s var(--ease-out);}
.prep-overlay[data-open="true"] .prep-card{transform:scale(1);}
.prep-head{padding:18px 22px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:flex-start;gap:14px;}
.prep-head__icon{flex-shrink:0;width:38px;height:38px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);display:flex;align-items:center;justify-content:center;}
.prep-head__icon svg{width:18px;height:18px;}
.prep-head__main{flex:1;min-width:0;}
.prep-head__when{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.prep-head__name{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:6px;}
.prep-head__chips{display:flex;gap:6px;flex-wrap:wrap;}
.prep-head__chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:500;background:var(--bg-elevated);color:var(--text-secondary);}
.prep-head__chip--hot{background:color-mix(in srgb,var(--hot,#dc2626) 12%,transparent);color:var(--hot,#dc2626);}
.prep-head__chip--warm{background:color-mix(in srgb,var(--warm,#d97706) 12%,transparent);color:var(--warm,#d97706);}
.prep-head__chip--cold{background:color-mix(in srgb,var(--cold,#2563eb) 12%,transparent);color:var(--cold,#2563eb);}
.prep-close{flex-shrink:0;width:28px;height:28px;border:0;background:transparent;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.prep-close:hover{background:var(--bg-elevated);color:var(--text-primary);}
.prep-close svg{width:16px;height:16px;}
.prep-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:18px;}
.prep-section{display:flex;flex-direction:column;gap:8px;}
.prep-section__title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);}
.prep-section__title svg{width:13px;height:13px;}
.prep-section__title-extra{margin-left:auto;font-size:11px;font-weight:500;color:var(--text-muted);text-transform:none;letter-spacing:0;}
.prep-brief{padding:14px 16px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);}
.prep-brief--ai{border-left:3px solid var(--brand);}
.prep-brief__lead{font-size:13px;color:var(--text-primary);line-height:1.55;margin-bottom:10px;}
.prep-brief__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.prep-brief__item{font-size:12.5px;color:var(--text-secondary);line-height:1.5;display:flex;gap:8px;}
.prep-brief__item::before{content:"";flex-shrink:0;width:4px;height:4px;border-radius:50%;background:var(--brand);margin-top:8px;}
.prep-prop{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);}
.prep-prop__icon{flex-shrink:0;width:34px;height:34px;border-radius:var(--radius-sm);background:#fef3c7;color:#b45309;display:flex;align-items:center;justify-content:center;}
[data-theme="dark"] .prep-prop__icon{background:#3a2a05;color:#fbbf24;}
.prep-prop__icon svg{width:16px;height:16px;}
.prep-prop__main{flex:1;min-width:0;}
.prep-prop__name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:2px;}
.prep-prop__meta{font-size:11.5px;color:var(--text-muted);display:flex;gap:10px;flex-wrap:wrap;}
.prep-prop__meta strong{color:var(--text-secondary);font-weight:500;}
.prep-prop__cta{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;font-size:12px;font-weight:500;color:var(--text-primary);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:var(--t-hover);}
.prep-prop__cta:hover{background:var(--bg-elevated);border-color:var(--border);}
.prep-prop__cta svg{width:12px;height:12px;}
.prep-notes{display:flex;flex-direction:column;gap:8px;}
.prep-note{padding:11px 14px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);}
.prep-note__head{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.prep-note__date{font-size:11px;color:var(--text-muted);}
.prep-note__vis{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:500;padding:2px 7px;border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;border:1px solid transparent;}
.prep-note__vis:hover{border-color:var(--border-subtle);}
.prep-note__vis svg{width:11px;height:11px;}
.prep-note__vis--shared{background:color-mix(in srgb,#10b981 12%,transparent);color:#059669;}
[data-theme="dark"] .prep-note__vis--shared{background:#0a3d2c;color:#34d399;}
.prep-note__title{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:3px;}
.prep-note__excerpt{font-size:12px;color:var(--text-secondary);line-height:1.5;}
.prep-note__cu{font-size:11px;color:var(--text-muted);margin-top:6px;display:inline-flex;align-items:center;gap:4px;}
.prep-note__cu svg{width:11px;height:11px;}
.prep-empty{padding:14px 16px;background:var(--bg-elevated);border:1px dashed var(--border-subtle);border-radius:var(--radius-md);font-size:12.5px;color:var(--text-muted);text-align:center;}
.prep-foot{padding:14px 22px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:8px;background:var(--bg-card);}
.prep-foot__hint{font-size:11px;color:var(--text-muted);margin-right:auto;}
.prep-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;font-size:13px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:var(--t-hover);border:1px solid var(--border-subtle);background:transparent;color:var(--text-primary);}
.prep-btn:hover{background:var(--bg-elevated);}
.prep-btn--primary{background:var(--brand);color:#fff;border-color:var(--brand);}
.prep-btn--primary:hover{filter:brightness(1.08);background:var(--brand);}
.prep-btn svg{width:13px;height:13px;}

/* === Team & permissions modal · regla 7AF cohesión v3 === */
.bb-modal{position:fixed;inset:0;z-index:200000;pointer-events:none;opacity:0;transition:opacity 220ms cubic-bezier(0.16,1,0.3,1);}
.bb-modal[data-open="true"]{pointer-events:auto;opacity:1;}
.bb-modal__backdrop{position:absolute;inset:0;background:rgba(10,10,10,0.4);backdrop-filter:blur(4px);}
.bb-modal__panel{position:relative;margin:5vh auto;background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:12px;box-shadow:var(--shadow-modal,0 16px 48px rgba(0,0,0,0.12));max-width:640px;max-height:90vh;display:flex;flex-direction:column;transform:scale(0.96) translateY(8px);transition:transform 280ms cubic-bezier(0.16,1,0.3,1);}
.bb-modal[data-open="true"] .bb-modal__panel{transform:scale(1) translateY(0);}
.bb-modal__panel--lg{max-width:720px;}
.bb-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 28px;border-bottom:1px solid var(--border-subtle,#ECECEC);}
.bb-modal__head h2{margin:0;font-size:18px;font-weight:600;color:var(--text-primary,#0A0A0A);}
.bb-modal__sub{margin:4px 0 0;font-size:13px;color:var(--text-secondary,#525252);}
.bb-modal__body{flex:1;overflow-y:auto;padding:20px 28px 28px;}
.team-perm__active-impersonation{display:flex;align-items:center;gap:14px;padding:14px 16px;background:color-mix(in srgb, var(--brand,#6366F1) 6%, transparent);border:1px solid color-mix(in srgb, var(--brand,#6366F1) 18%, transparent);border-radius:8px;margin-bottom:20px;}
.team-perm__active-icon{font-size:24px;}
.team-perm__active-info{flex:1;display:flex;flex-direction:column;gap:2px;}
.team-perm__active-info strong{font-size:14px;color:var(--text-primary,#0A0A0A);}
.team-perm__active-info small{font-size:11px;color:var(--text-muted,#737373);}
.team-perm__list{display:flex;flex-direction:column;gap:8px;}
.team-perm__member{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--border-subtle,#ECECEC);border-radius:8px;background:var(--bg-card,#fff);transition:background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);}
.team-perm__member:hover{border-color:var(--border,#D4D4D8);}
.team-perm__avatar{width:36px;height:36px;border-radius:50%;background:var(--brand,#6366F1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;overflow:hidden;}
.team-perm__avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.team-perm__info-name{font-size:14px;font-weight:600;color:var(--text-primary,#0A0A0A);}
.team-perm__info-meta{font-size:11px;color:var(--text-muted,#737373);margin-top:2px;}
.team-perm__role-pill{display:inline-flex;align-items:center;height:18px;padding:0 8px;font-size:10px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;border-radius:9px;margin-left:6px;background:var(--bg-elevated,#F7F7F7);color:var(--text-secondary,#525252);}
.team-perm__role-pill--admin{background:color-mix(in srgb, var(--brand,#6366F1) 12%, transparent);color:var(--brand,#6366F1);}

/* ─── [Marcel 11 may] ROLE-BASED VISIBILITY · solo Marcel + Andrés ven montos ─── */
/* JS gobierna el reemplazo de textContent · este CSS es respaldo + ergonomía visual */
body.role-non-admin [data-kpi="pipeline"] .kpi__delta,
body.role-non-admin [data-kpi="cierre-mes"] .kpi__delta{
  /* el delta se mantiene (cuenta de activos / ganados) · cero monto */
}
body.role-non-admin .kpi__num[data-original-value]{
  letter-spacing: 0.02em;
  color: var(--text-secondary, #525252);
}
/* Pill rol en menu cuenta · placeholder, JS puede setear data-role-label */
.role-non-admin [data-acct-menu]::after,
.role-admin [data-acct-menu]::after{
  content: attr(data-role-label);
  font-size: 10px;
  color: var(--text-tertiary, #A3A3A3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  display: inline-block;
}
.role-non-admin [data-acct-menu]:not([data-role-label])::after,
.role-admin [data-acct-menu]:not([data-role-label])::after{ content: none; }
.team-perm__btn-impersonate{padding:6px 12px;height:30px;font-size:12px;font-weight:500;background:var(--bg-card,#fff);color:var(--text-primary,#0A0A0A);border:1px solid var(--border,#D4D4D8);border-radius:4px;cursor:pointer;transition:background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);}
.team-perm__btn-impersonate:hover{background:var(--text-primary,#0A0A0A);color:#fff;border-color:var(--text-primary,#0A0A0A);}
.team-perm__btn-impersonate:disabled{opacity:0.4;cursor:not-allowed;}
.team-perm__loading,.team-perm__empty{padding:32px;text-align:center;color:var(--text-muted,#737373);font-size:13px;}
@media (max-width:640px){.bb-modal__panel{margin:2vh 12px;max-height:96vh;}.bb-modal__head{padding:18px 20px;}.bb-modal__body{padding:16px 20px 24px;}.team-perm__member{grid-template-columns:32px 1fr auto;gap:10px;padding:10px 12px;}}

/* ─── [Marcel 10 may] KB linked en SupportPal compose tab · regla 7T extendida */
.ticket-kb-suggested{margin:12px 0;padding:12px 14px;background:var(--bg-elev1,#FAFAFA);border:1px solid var(--brand,#6366F1);border-radius:4px;}
.ticket-kb-suggested__head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.ticket-kb-suggested__icon{font-size:16px;line-height:1;}
.ticket-kb-suggested__title{flex:1;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--brand,#6366F1);}
.ticket-kb-suggested__confidence{font-size:11px;font-weight:600;color:var(--brand,#6366F1);padding:2px 8px;background:var(--brand-tint,rgba(99,102,241,0.06));border-radius:4px;}
.ticket-kb-suggested__body{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ticket-kb-suggested__link{flex:1;font-size:13px;color:var(--brand,#6366F1);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ticket-kb-suggested__link:hover{text-decoration:underline;}
.ticket-kb-suggested__insert{padding:6px 12px;background:var(--brand,#6366F1);color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:500;transition:filter 160ms ease;}
.ticket-kb-suggested__insert:hover{filter:brightness(0.92);}

/* ─── [Marcel 10 may] Score % visible en cards soporte · regla 7T */
.confidence-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;border:1px solid;font-variant-numeric:tabular-nums;letter-spacing:0.02em;line-height:1.5;}
.confidence-badge--high{color:#047857;background:#ECFDF5;border-color:#10B981;}
.confidence-badge--medium{color:#B45309;background:#FEF3C7;border-color:#F59E0B;}
.confidence-badge--low{color:#6B7280;background:#F9FAFB;border-color:#D1D5DB;}
[data-theme="dark"] .confidence-badge--high{color:#6EE7B7;background:rgba(16,185,129,0.12);border-color:rgba(16,185,129,0.45);}
[data-theme="dark"] .confidence-badge--medium{color:#FCD34D;background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.45);}
[data-theme="dark"] .confidence-badge--low{color:#9CA3AF;background:rgba(156,163,175,0.10);border-color:rgba(156,163,175,0.35);}

/* ─── [Marcel 10 may] Modal lead máximo contexto regla 7AB · scope adicional + RUT/teléfono/web + skeleton */
/* [Marcel 13 may auditor · regla 7AA HARDENED] scope-adicional-badge sin gradient · solo amber sólido */
.scope-adicional-badge{display:inline-flex;align-items:center;padding:4px 10px;background:#F59E0B;color:#fff;border-radius:4px;font-size:11px;font-weight:600;margin-left:8px;text-transform:uppercase;letter-spacing:0.04em;line-height:1;cursor:help;}
/* [18may · Marcel "Resumen desordenado, poco compacto, mucho contenido"]
   .focus-contact-info se inyecta como 1er hijo del .focus-body (RUT/Tel/Sitio).
   Era grid 3-col fijo con borde+fondo = card ENORME casi vacía arriba del hero
   cuando solo hay sitio web (caso Christian: solo geinse.cl). CRO/UX: pasa a
   tira inline compacta "LABEL valor", sin chrome de card, campos vacíos no
   reservan espacio → contexto liviano, no un bloque que domina la vista. */
.focus-contact-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 22px;padding:4px 0 0;background:transparent;border:0;border-radius:0;margin:0;}
.focus-contact-info > div{display:flex;flex-direction:row;align-items:baseline;gap:6px;min-width:0;}
.focus-contact-info span{font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted,#737373);font-weight:600;flex:0 0 auto;}
.focus-contact-info strong{font-size:12px;font-weight:600;color:var(--text-primary,#0A0A0A);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.focus-contact-info a{color:var(--brand,#6366F1);text-decoration:none;}
.focus-contact-info a:hover{text-decoration:underline;}
.focus-skeleton{padding:16px;display:flex;flex-direction:column;}
.focus-skeleton .bb-skeleton{height:16px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 0%,#fafafa 50%,#f0f0f0 100%);background-size:200% 100%;animation:bb-shimmer 1.4s ease-in-out infinite;}
[data-theme="dark"] .focus-skeleton .bb-skeleton{background:linear-gradient(90deg,#1f1f23 0%,#2a2a30 50%,#1f1f23 100%);background-size:200% 100%;}
@media (prefers-reduced-motion:reduce){.focus-skeleton .bb-skeleton{animation:none;background:#f0f0f0;}[data-theme="dark"] .focus-skeleton .bb-skeleton{background:#1f1f23;}}
@media (max-width:768px){.focus-contact-info{gap:2px 16px;}}
/* [18may · Marcel "compacto, fácil de leer, jerarquía clara · 100/100 CRO/UX"]
   Ritmo apretado del Resumen: menos aire entre bloques (era stack de cajas de
   igual peso con mucho scroll). La RECOMENDACIÓN IA es lo accionable → acento
   izquierdo de marca para que destaque sobre lo informativo. Solo spacing +
   jerarquía, dentro de tokens v3, sin animación (net-safe), aditivo. */
.focus-overlay .focus-summary .focus-hero{padding:8px 0 12px !important;margin-bottom:12px !important;}
.focus-overlay .focus-summary .focus-rec{padding:14px 16px !important;margin-bottom:14px !important;border-left:3px solid var(--brand) !important;}
.focus-overlay .focus-summary .focus-rec-why{margin-bottom:10px !important;}
.focus-overlay .focus-summary .focus-rec-meta{gap:8px 20px !important;padding-top:10px !important;}
.focus-overlay .focus-summary .focus-section{padding:14px 0 !important;gap:8px !important;}
.focus-overlay .focus-summary .focus-col-title{margin:0 0 2px !important;}
.focus-overlay .focus-summary > .focus-emails-section,
.focus-overlay .focus-summary > .focus-conv-section{border-top:1px solid var(--border-subtle);padding-top:14px;}

/* [Marcel 13 may auditor · regla 7AA HARDENED · v3 fidelity 100%]
   CSS de prob-chip · lead__comments · pipeline-insight-ribbon NEUTRALIZADO.
   Estos elementos NO existen en el dashboard-v3.html base · contaminación de sprints anteriores.
   Defensiva: si quedó algún elemento residual en DOM, ocultarlo. */
.prob-chip,
.lead__comments,
.pipeline-insight-ribbon{display:none !important;}

/* [Marcel 9 may] Widget Estado servidor · WHM + Imunify */
.server-status-widget{margin-top:24px;padding:14px 16px;background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;}
.server-status-widget__head{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.server-status-widget__head h3{flex:1;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin:0;color:var(--text-primary,#0A0A0A);}
.server-status-widget__icon{font-size:14px;}
.server-status-widget__refresh{cursor:pointer;padding:4px 8px;border:1px solid transparent;border-radius:4px;font-size:14px;background:transparent;color:var(--text-secondary,#525252);font-family:inherit;line-height:1;}
.server-status-widget__refresh:hover{background:var(--bg-elev1,#F7F7F7);border-color:var(--border-subtle,#ECECEC);}
.server-status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.server-status-stat{padding:10px 12px;background:var(--bg-elev1,#F7F7F7);border-radius:4px;display:flex;flex-direction:column;gap:4px;}
.server-status-stat--alert{background:#FEF2F2;border:1px solid #EF4444;}
.server-status-stat__label{font-size:10px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-secondary,#525252);font-weight:500;}
.server-status-stat__val{font-size:18px;font-weight:600;color:var(--text-primary,#0A0A0A);line-height:1.1;}
.server-status-stat__val--warn{color:#B45309;}
.server-status-stat__sub{font-size:11px;color:var(--text-secondary,#525252);}
.server-status-widget__foot{margin-top:12px;padding-top:8px;border-top:1px solid var(--border-subtle,#ECECEC);}
.server-status-widget__updated{font-size:11px;color:var(--text-tertiary,#A3A3A3);}
.server-status-empty{padding:16px;text-align:center;color:var(--text-secondary,#525252);font-size:13px;font-style:italic;}
@media (max-width:768px){.server-status-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:414px){.server-status-grid{grid-template-columns:1fr;}}

/* [Marcel 9 may] Widget Notas semanales ClickUp doc 8cmecjz-2874 */
.weekly-notes-widget{margin-top:24px;padding:14px 16px;background:var(--bg-card,#fff);border:1px solid var(--border-subtle,#ECECEC);border-radius:4px;}
.weekly-notes-widget__head{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.weekly-notes-widget__head h3{flex:1;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin:0;color:var(--text-primary,#0A0A0A);}
.weekly-notes-widget__icon{font-size:14px;}
.weekly-notes-widget__link{font-size:11px;color:var(--brand,#6366F1);text-decoration:none;font-weight:500;}
.weekly-notes-widget__link:hover{text-decoration:underline;}
.weekly-notes-widget__list{list-style:none;padding:0;margin:0;}
.weekly-note-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-subtle,#ECECEC);}
.weekly-note-item:last-child{border-bottom:none;}
.weekly-note-item--skeleton{display:block;}
.weekly-note-item__date{font-size:11px;color:var(--text-tertiary,#A3A3A3);min-width:64px;}
.weekly-note-item__title{font-size:13px;color:var(--text-primary,#0A0A0A);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.weekly-note-item__link{color:var(--brand,#6366F1);text-decoration:none;font-size:16px;line-height:1;padding:2px 6px;border-radius:4px;}
.weekly-note-item__link:hover{background:var(--bg-elev1,#F7F7F7);}
.weekly-notes-empty{padding:12px;color:var(--text-secondary,#525252);font-style:italic;font-size:13px;}
@media (max-width:414px){.weekly-note-item{grid-template-columns:1fr auto;}.weekly-note-item__date{grid-column:1/-1;}}

/* ============= AUDITORÍA RESPONSIVE FINAL · 7 breakpoints unificados ============= */

@media (max-width: 320px) {
  /* iPhone SE estricto */
  .stage { padding: 0 8px !important; }
  .kpi__num { font-size: 14px !important; }
  .kpi--primary .kpi__num { font-size: 18px !important; }
  .lead-wait { padding: 12px !important; }
  .lead-wait .score { width: 44px !important; height: 44px !important; font-size: 14px !important; }
  .focus-overlay { padding: 0 !important; }
  .focus-card { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; }
  .bb-confirm-dialog { max-width: calc(100vw - 16px) !important; padding: 16px !important; }
  .hdr__hamburger { width: 36px !important; height: 36px !important; }
  .reportes-kpis-grid { gap: 6px !important; }
  .pending-action-item { font-size: 12px !important; }
}

@media (max-width: 375px) {
  /* iPhone 14 */
  .hdr { padding: 6px 10px !important; }
  .hdr__bc { font-size: 11px !important; }
  .heat-tabs { padding: 0 8px !important; }
  .lead__name { font-size: 13px !important; }
  .lead__triage button { font-size: 11px !important; height: 38px !important; }
  .copilot-panel { width: calc(100vw - 16px) !important; right: 8px !important; left: 8px !important; }
  .focus-actions button { font-size: 11px !important; }
}

@media (max-width: 414px) {
  /* iPhone Plus */
  .banners { grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 12px !important; }
  .kpis { grid-template-columns: 1fr !important; }
  .kpi--primary { grid-column: auto !important; }
  .focus-tabs { overflow-x: auto !important; }
  .notif-panel, [data-notif-panel] { width: calc(100vw - 16px) !important; right: 8px !important; left: 8px !important; }
  .reportes-kpis-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  /* Touch targets críticos */
  button:not(.kbd):not(.tag):not(.icon-btn--inline),
  a[role="button"],
  [data-action]:not(.tag) {
    min-height: 44px !important;
  }
  .icon-btn { min-width: 44px !important; min-height: 44px !important; }
  .lead__triage button { min-height: 44px !important; }
  .focus-tab { padding: 12px 16px !important; min-height: 44px !important; }

  /* User dropdown mobile */
  .acct-menu, [data-acct-menu] {
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    right: 16px !important;
  }
}

@media (max-width: 768px) {
  /* iPad portrait · regla 7AI · sidebar SIEMPRE visible 56px iconos · NO drawer */
  .app { grid-template-columns: 56px 1fr !important; }
  .sb {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    height: 100vh !important;
    width: 56px !important;
    z-index: 100 !important;
    transform: none !important;
    box-shadow: none !important;
    border-right: 1px solid var(--border-subtle, #ECECEC) !important;
  }

  .focus-card { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; }

  /* Banners stack */
  .banners { grid-template-columns: 1fr !important; }

  /* KPIs grid 2 cols */
  .kpis { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi--primary { grid-column: 1 / -1 !important; }

  /* Reportes 2 cols */
  .reportes-kpis-grid { grid-template-columns: 1fr 1fr !important; }
  .reportes-kpi--primary { grid-column: 1 / -1 !important; }

  /* Diseño 2 cols */
  .diseno-team { grid-template-columns: 1fr 1fr !important; }

  /* Server status 2 cols */
  .server-status-grid { grid-template-columns: 1fr 1fr !important; }

  /* Tabs scroll */
  .tabs-main, .heat-tabs, .focus-tabs, .bb-soporte-filter-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .tabs-main::-webkit-scrollbar,
  .heat-tabs::-webkit-scrollbar,
  .focus-tabs::-webkit-scrollbar,
  .bb-soporte-filter-tabs::-webkit-scrollbar { display: none !important; }

  .tabs-main > *, .heat-tabs > *, .focus-tabs > *, .bb-soporte-filter-tabs > * {
    flex-shrink: 0 !important;
  }

  /* Hide kbd shortcuts en mobile · no tienen sentido */
  button kbd, [data-action] kbd, .lead__triage kbd, .focus-actions kbd, .focus-foot kbd,
  .focus-btn-kbd, .kbd-shortcut {
    display: none !important;
  }

  /* Header iconos */
  .hdr__sync, .hdr__time { display: none !important; }

  /* Greeting hidden */
  .hdr__greeting { display: none !important; }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  /* iPad landscape · sidebar expandido · drawer cierra */
  .hdr__hamburger { display: none !important; }
  .bb-mobile-backdrop { display: none !important; }
  body.sb-open .sb { transform: none !important; }
}

@media (min-width: 1281px) and (max-width: 1919px) {
  /* Laptop · stage 1400px max */
  .stage { max-width: 1400px !important; margin: 0 auto !important; }
}

@media (min-width: 1920px) {
  /* 4K · stage 1840px · [11 jun auditoría] hdr__row DEBE compartir el mismo marco:
     antes quedaba en 1520px (bloque @1920 anterior) → 160px de desalineación por lado */
  .stage { max-width: 1840px !important; margin: 0 auto !important; }
  .hdr__row { max-width: 1840px !important; }
}

/* === SIEMPRE: scroll suave ===*/
html { scroll-behavior: smooth; }

/* === No horizontal scroll · regla 7AA · sidebar sticky requiere body sin overflow ===
   overflow-x:hidden en body lo vuelve scroll container y rompe position:sticky en .sb */

/* === Print-friendly === */
@media print {
  .sb, .hdr, .copilot-panel, .focus-overlay, .bb-modal-overlay { display: none !important; }
  .stage { padding: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE · fix completo (Marcel 11 may noche)
   Cards/banners/modales con var(--bg-card) · sin tinte marrón del backdrop
   ════════════════════════════════════════════════════════════════════ */

/* Cards principales · superficies primarias */
[data-theme="dark"] .lead-wait,
[data-theme="dark"] .lead,
[data-theme="dark"] .copilot-box,
[data-theme="dark"] .banner,
[data-theme="dark"] .reportes-kpi,
[data-theme="dark"] .pending-actions-widget,
[data-theme="dark"] .server-status-widget,
[data-theme="dark"] .weekly-notes-widget,
[data-theme="dark"] .focus-card,
[data-theme="dark"] .bb-confirm-dialog,
[data-theme="dark"] .bb-simple-modal,
[data-theme="dark"] .bb-modal-card,
[data-theme="dark"] .acct-menu,
[data-theme="dark"] [data-acct-menu],
[data-theme="dark"] .notif-panel,
[data-theme="dark"] [data-notif-panel],
[data-theme="dark"] .copilot-panel,
[data-theme="dark"] .priority-deal,
[data-theme="dark"] .top3-card,
[data-theme="dark"] .forecast-card,
[data-theme="dark"] .scheduled-card,
[data-theme="dark"] .my-meetings-banner,
[data-theme="dark"] .dash-module-card {
  background: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary);
}

/* Superficies elevadas · sub-secciones dentro de cards */
[data-theme="dark"] .banner__empty,
[data-theme="dark"] .pending-action-item,
[data-theme="dark"] .reportes-monthly-stats > div,
[data-theme="dark"] .server-status-stat,
[data-theme="dark"] .diseno-team-card,
[data-theme="dark"] .focus-contact-info,
[data-theme="dark"] .focus-skeleton,
[data-theme="dark"] .ticket-kb-suggested,
[data-theme="dark"] .lead-wait__metrics,
[data-theme="dark"] .lead-wait__ai,
[data-theme="dark"] .lead__comments {
  background: var(--bg-elevated) !important;
  border-color: var(--border-subtle) !important;
}

/* Banner empty state "Sin envíos en cola" / "Sin acciones pendientes" */
[data-theme="dark"] .banner__empty {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
}
[data-theme="dark"] .banner__empty-icon {
  background: var(--bg-card) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .banner__empty-title {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .banner__empty-desc,
[data-theme="dark"] .banner__empty-sub {
  color: var(--text-tertiary) !important;
}

/* Inputs / textareas · contenedores editables */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] [contenteditable="true"] {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-tertiary) !important;
}

/* Hover states sutiles · NO gris fuerte (regla 7T) */
[data-theme="dark"] .lead:hover,
[data-theme="dark"] .lead-wait:hover {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .sb__item:hover {
  background: var(--bg-tinted) !important;
}
[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] button.icon-btn:not([disabled]):hover {
  background: var(--bg-tinted) !important;
}

/* Toggle theme · sin halo blanco extraño */
[data-theme="dark"] #theme-toggle,
[data-theme="dark"] .hdr__theme,
[data-theme="dark"] [data-theme-toggle] {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
[data-theme="dark"] #theme-toggle:hover,
[data-theme="dark"] .hdr__theme:hover,
[data-theme="dark"] [data-theme-toggle]:hover {
  background: var(--bg-tinted) !important;
  border-color: transparent !important;
}
[data-theme="dark"] #theme-toggle[aria-pressed="true"],
[data-theme="dark"] .hdr__theme[aria-pressed="true"] {
  background: var(--brand-tint) !important;
  border-color: var(--brand-border) !important;
  box-shadow: none !important;
}

/* Status pills · colores semánticos dark */
[data-theme="dark"] .status-pill {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] .status-pill--negotiation,
[data-theme="dark"] .pd-status-en-negociacion {
  color: #FCD34D !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
}
[data-theme="dark"] .status-pill--proposal-sent,
[data-theme="dark"] .status-pill--proposal-enviada,
[data-theme="dark"] .pd-status-propuesta-enviada {
  color: #93C5FD !important;
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.30) !important;
}
[data-theme="dark"] .status-pill--proposal-vista,
[data-theme="dark"] .pd-status-propuesta-vista {
  color: var(--text-secondary) !important;
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.30) !important;
}
[data-theme="dark"] .status-pill--meeting,
[data-theme="dark"] .status-pill--reunion,
[data-theme="dark"] .pd-status-reu-confirmada {
  color: #6EE7B7 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
}

/* Skeleton shimmer dark · brillo apenas perceptible sobre fondo oscuro */
[data-theme="dark"] .bb-skeleton,
[data-theme="dark"] .skeleton,
[data-theme="dark"] [data-skeleton] {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%) !important;
  background-size: 200% 100% !important;
}

/* Backdrop modal/drawer · más oscuro en dark para contraste */
[data-theme="dark"] .sb-backdrop-v3,
[data-theme="dark"] .bb-mobile-backdrop,
[data-theme="dark"] .bb-modal-overlay,
[data-theme="dark"] .focus-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Botones secundarios · tono neutro dark */
[data-theme="dark"] button:not(.btn--primary):not([data-action="generate-email"]):not(.icon-btn):not([class*="status-pill"]):not([data-triage]),
[data-theme="dark"] .btn:not(.btn--primary) {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border);
}

/* Botones triage Ganar/Perder/Archivar · semánticos dark */
[data-theme="dark"] button[data-triage="win"] {
  background: rgba(16, 185, 129, 0.10) !important;
  color: #6EE7B7 !important;
  border-color: rgba(16, 185, 129, 0.40) !important;
}
[data-theme="dark"] button[data-triage="win"]:hover {
  background: rgba(16, 185, 129, 0.18) !important;
}
[data-theme="dark"] button[data-triage="lose"] {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #FCA5A5 !important;
  border-color: rgba(239, 68, 68, 0.40) !important;
}
[data-theme="dark"] button[data-triage="lose"]:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}
[data-theme="dark"] button[data-triage="archive"] {
  background: var(--bg-elevated) !important;
  color: var(--text-tertiary) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] button[data-triage="archive"]:hover {
  background: var(--bg-tinted) !important;
}

/* Score box dark · pills score numérico (Hot/Tibio/Frío) */
[data-theme="dark"] .score--hot,
[data-theme="dark"] [data-heat="HOT"] {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #FCA5A5 !important;
  border-color: rgba(239, 68, 68, 0.30) !important;
}
[data-theme="dark"] .score--tibio,
[data-theme="dark"] [data-heat="TIBIO"] {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #FCD34D !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
}
[data-theme="dark"] .score--frio,
[data-theme="dark"] [data-heat="FRIO"] {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #CBD5E1 !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
}

/* Header iconos · cero halo extraño en dark */
[data-theme="dark"] .hdr .icon-btn,
[data-theme="dark"] .hdr__cluster .icon-btn {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
[data-theme="dark"] .hdr .icon-btn:hover,
[data-theme="dark"] .hdr__cluster .icon-btn:hover {
  background: var(--bg-tinted);
  color: var(--text-primary);
}

/* Avatar header · sin tinte raro */
[data-theme="dark"] .av {
  border-color: var(--border-subtle);
}

/* Mobile dark · drawer con bg correcto */
@media (max-width: 1024px) {
  [data-theme="dark"] .sb {
    background: var(--bg-card) !important;
    border-right-color: var(--border-subtle) !important;
  }
}

/* ========================================================================
   MOBILE PULIDO v20260511-0700 · padding lateral consistente · todo ordenado
   Sistema: 12px <414 · 16px 414-768 · 20px 768-1024 · 24px+ desktop
   ======================================================================== */

/* === PADDING LATERAL UNIFICADO === */
@media (max-width: 414px) {
  .stage,
  .reportes-stage,
  .diseno-stage,
  [data-pending-actions-widget] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .kpis,
  .banners,
  .leads-stream,
  .copilot-box,
  .reportes-kpis-grid,
  .reportes-section__head,
  .pending-actions-widget,
  .server-status-widget,
  .weekly-notes-widget {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .banner, .lead-wait, .pending-action-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 415px) and (max-width: 768px) {
  .stage,
  .reportes-stage,
  .diseno-stage {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .stage,
  .reportes-stage,
  .diseno-stage {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (min-width: 1025px) {
  .stage {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* === GAP CONSISTENTE entre secciones === */
@media (max-width: 768px) {
  .stage > section,
  .stage > article,
  .stage > [class*="banner"],
  .stage > [class*="kpi"],
  .stage > [class*="leads"],
  .stage > [data-pending-actions-widget] {
    margin-bottom: 16px !important;
  }

  .stage > section:last-child,
  .stage > article:last-child {
    margin-bottom: 0 !important;
  }
}

/* === HEADER mobile clean === */
@media (max-width: 768px) {
  .hdr {
    padding: 8px 12px 8px 60px !important; /* hamburguesa fixed izq · 60px gap */
    height: 56px !important;
    box-sizing: border-box;
  }

  .hdr__bc {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
  }

  .hdr__cluster, .hdr__icons {
    gap: 4px !important;
    margin-left: auto;
  }

  .hdr__cmdk, .hdr__copilot, .hdr__notif, .hdr__theme {
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
  }
}

/* === SIDEBAR siempre visible · regla 7AI · cero drawer · 9 may === */
@media (max-width: 1024px) and (min-width: 768px) {
  .sb {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: 200px !important;
    max-width: 200px !important;
    height: 100vh !important;
    z-index: 100 !important;
    transform: none !important;
    overflow-y: auto;
    box-shadow: none !important;
    border-right: 1px solid var(--border-subtle, #ECECEC) !important;
  }

  .sb__items {
    padding: 12px;
  }

  .sb__item {
    padding: 12px 16px !important;
    min-height: 44px;
    border-radius: 4px;
  }
}

/* === KPIs mobile estructurados === */
@media (max-width: 768px) {
  .kpis {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    background: var(--bg-elev1, #FAFAFA);
    border-radius: 4px;
    margin-bottom: 16px !important;
  }

  .kpi {
    padding: 12px 14px !important;
    min-height: 56px;
  }

  .kpi--primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 414px) {
  .kpis {
    grid-template-columns: 1fr !important;
  }
  .kpi--primary {
    grid-column: auto;
  }
}

/* === Banners mobile compactos === */
@media (max-width: 768px) {
  .banners {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .banner {
    padding: 14px !important;
    border-radius: 4px;
  }

  .banner__head {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
  }
}

/* === Cards waiting mobile === */
@media (max-width: 768px) {
  .lead-wait {
    padding: 12px 14px !important;
    /* [Marcel 11 may LATE · 6 cols mobile · regla 7AA autorizada] ↗ Ampliar + ▼ Chevron al lado del precio */
    grid-template-columns: auto 1fr auto auto auto auto !important;
    gap: 8px !important;
  }

  .lead-wait__name {
    font-size: 13px !important;
  }

  .lead-wait__amount {
    font-size: 13px !important;
  }

  .lead-wait .score, .score-box {
    width: 48px !important;
    height: 48px !important;
    font-size: 14px !important;
  }
}

/* === Modal focus mobile full-screen === */
@media (max-width: 768px) {
  .focus-overlay {
    padding: 0 !important;
  }
  .focus-card {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .focus-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .focus-tabs::-webkit-scrollbar { display: none !important; }
  .focus-tab {
    flex-shrink: 0;
    min-height: 44px !important;
    padding: 12px 16px !important;
  }
  .focus-body {
    padding: 16px !important;
  }
  .focus-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding: 12px 16px !important;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .focus-actions button {
    flex: 1 1 auto;
    min-height: 44px !important;
    font-size: 12px !important;
  }
}

/* === Tabs scroll horizontal · sin scrollbar visible === */
@media (max-width: 768px) {
  .heat-tabs,
  .tabs-main,
  .pipe-embed,
  .bb-soporte-filter-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 12px !important;
  }
  .heat-tabs::-webkit-scrollbar,
  .tabs-main::-webkit-scrollbar,
  .pipe-embed::-webkit-scrollbar,
  .bb-soporte-filter-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .heat-tab, .tabs-main .tab, .pipe-embed > *, .bb-soporte-filter-tab {
    flex-shrink: 0 !important;
  }
}

/* === Touch targets 44x44 sistemáticos === */
@media (max-width: 768px) {
  button:not(.kbd):not(.tag):not(.bb-skeleton),
  a[role="button"],
  [data-action]:not(.tag) {
    min-height: 44px;
  }
  .icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* === Notif panel mobile · refuerzo === */
@media (max-width: 768px) {
  .notif-panel,
  [data-notif-panel],
  .bb-notif-panel,
  #notif {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    top: 64px !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
  }
}

/* === Copilot panel mobile === */
@media (max-width: 768px) {
  .copilot-panel,
  #copilot-panel {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    height: calc(100vh - 80px) !important;
  }
}

/* === Reportes mobile grids === */
@media (max-width: 768px) {
  .reportes-kpis-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .reportes-kpi--primary {
    grid-column: 1 / -1;
  }
  .reportes-monthly-stats {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 414px) {
  .reportes-kpis-grid {
    grid-template-columns: 1fr !important;
  }
  .reportes-kpi--primary {
    grid-column: auto;
  }
  .reportes-monthly-stats {
    grid-template-columns: 1fr !important;
  }
}

/* === No horizontal scroll fijo · regla 7AA · sidebar sticky requiere body sin overflow ===
   Solo html overflow-x:hidden · body max-width pero sin overflow (sino se vuelve scroll
   container y rompe position:sticky en .sb) */
html {
  overflow-x: hidden !important;
  max-width: 100vw;
}
body {
  max-width: 100vw;
}

/* === Animation reduce respect === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === MICRO-INTERACCIONES PREMIUM · Linear/Stripe style === */

/* 1. Score box · pulse sutil al hover */
.score-box:hover, .score:hover, .lead-wait .score:hover {
  transform: scale(1.05);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Email pill · hover v3 fiel (sin shadow extra) */
.email-pill {
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.email-pill:hover {
  background: var(--bg-elev1);
}

/* 3. Status pills · breathe v3 fiel (sin shadow keyframe extra) */

/* 4. Chevron expand · spring rotate */
.lead-wait[data-expanded="true"] .chevron-toggle svg,
.lead[data-expanded="true"] .chevron-toggle svg,
.lead-wait[data-expanded="true"] .chevron svg {
  transform: rotate(180deg);
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chevron-toggle svg, .chevron svg {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 5. Checkbox interactivo */
input[type="checkbox"] {
  cursor: pointer;
  transition: transform 100ms ease-out;
}
input[type="checkbox"]:active {
  transform: scale(0.92);
}

/* [Marcel 13 may LATE · v3 fiel] Botones primary NEGROS (NO morados).
   v3 base línea 1275: btn--primary background:#1f2937. El override morado anterior
   con var(--brand) rompía el diseño. Solo .compose-btn-primary mantiene var(--brand)
   por contexto IA. Sin transform translateY (rompe layout v3). Sin shimmer overlay. */
.compose-btn-primary {
  background: var(--brand);
  color: white;
  transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.compose-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}
.compose-btn-primary:hover::before {
  opacity: 1;
}

/* 7. Cards waiting · hover lift sutil */
.lead-wait {
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}
.lead-wait:hover {
  border-color: var(--border, rgba(0,0,0,0.12));
  background: var(--bg-card);
}

/* 8. Avatar hover · scale */
.av, .lead-wait .av-row .av {
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.av:hover {
  transform: scale(1.1);
  z-index: 2;
}

/* 9. KPI hover · sombra sutil */
.kpi {
  transition: border-color 150ms ease-out, background 150ms ease-out;
  cursor: default;
}
.kpi--clickable {
  cursor: pointer;
}
/* [Marcel 13 may] hover morado NO solicitado · removido border-color brand
   Solo background sutil al hover · respeta separador original gris */
.kpi--clickable:hover {
  background: var(--bg-elev1);
}

/* 10. Dropdown items · slide on hover */
.acct-menu a, .acct-menu button,
[data-acct-menu] a, [data-acct-menu] button,
.user-menu__item {
  transition: background 100ms ease-out, padding-left 150ms ease-out, color 100ms ease-out;
  cursor: pointer;
}
.acct-menu a:hover, .acct-menu button:hover,
[data-acct-menu] a:hover, [data-acct-menu] button:hover,
.user-menu__item:hover {
  padding-left: 18px !important;
  background: var(--bg-elev1);
}

/* 11. Notif items · hover highlight */
.notif__item, [data-notif-item] {
  transition: background 100ms ease-out;
  cursor: pointer;
}
.notif__item:hover, [data-notif-item]:hover {
  background: var(--bg-elev1);
}

/* 12. Tabs · color shift hover */
.heat-tab, .focus-tab, .tabs-main .tab {
  transition: color 150ms ease-out, background 150ms ease-out;
}
.heat-tab:not(.heat-tab--active):hover,
.focus-tab:not(.focus-tab--active):hover {
  color: var(--text-primary);
  background: var(--bg-elev1);
}

/* 13. Skeleton · suaviza transición a contenido real */
.bb-skeleton, .skeleton {
  transition: opacity 240ms ease-out;
}
.hydrated .bb-skeleton, .hydrated .skeleton {
  opacity: 0;
  pointer-events: none;
}

/* 14. Modal close X · rotate al hover */
.focus-overlay__close, [data-modal-close], .bb-simple-modal__close {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background 100ms ease-out;
}
.focus-overlay__close:hover,
[data-modal-close]:hover,
.bb-simple-modal__close:hover {
  transform: rotate(90deg);
  background: var(--bg-elev1);
}

/* 15. Toggle theme · suave switch */
.hdr__theme svg, [data-theme-toggle] svg {
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms;
}
.hdr__theme:active svg {
  transform: rotate(180deg);
}

/* 16. Search input focus · glow expand */
.cmdk__input:focus,
input[type="search"]:focus,
input[type="text"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  transition: border-color 150ms ease-out;
}

/* 17. Loading state global · cursor wait */
body[data-loading="true"] {
  cursor: progress;
}

/* 18. Save success flash · botones */
.btn--success-flash {
  animation: bb-success-flash 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bb-success-flash {
  0% { background: var(--brand, #6366F1); }
  20% { background: #10B981; transform: scale(1.05); }
  100% { background: var(--brand, #6366F1); transform: scale(1); }
}

/* 19. Notification bubble · spring entrance */
.notif-bubble, .pending-badge {
  animation: bb-bubble-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bb-bubble-in {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 20. Reduced motion · respeta accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE · refinamientos finales (Marcel 9 may noche)
   Hover · skeleton · backdrop · KPI primary · pills · avatares · greeting
   ════════════════════════════════════════════════════════════════════ */

/* Hover states con suficiente contraste */
[data-theme="dark"] .lead-wait:hover,
[data-theme="dark"] .lead:hover,
[data-theme="dark"] .priority-deal:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Copilot box · gradient sutil para destacar de cards normales */
[data-theme="dark"] .copilot-box {
  background: linear-gradient(180deg, rgba(99,102,241,0.06) 0%, var(--bg-card) 60%) !important;
}

/* Focus overlay backdrop · más oscuro + blur */
[data-theme="dark"] .focus-overlay {
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Skeleton shimmer dark · visible sobre fondo oscuro */
[data-theme="dark"] .bb-skeleton,
[data-theme="dark"] .bb-skeleton-line,
[data-theme="dark"] .bb-skeleton-kpi-num,
[data-theme="dark"] .bb-skeleton-kpi-delta {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  ) !important;
  background-size: 200% 100% !important;
}

/* Pills de estado dark · bg sutil + borde visible */
[data-theme="dark"] .status-pill,
[data-theme="dark"] .pd-status-pill,
[data-theme="dark"] .lead-wait__status-pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* Avatares dark · borde sutil para definir contorno */
[data-theme="dark"] .av {
  border: 1px solid rgba(255,255,255,0.16);
}

/* [Marcel 11 may LATE] Hero KPI primary dark · sin morado ni gradient
   Marcel original design NO usa morado en dark · cumplir regla "cero gradients" + texto blanco */
[data-theme="dark"] .kpi--primary {
  background: transparent;
  border-color: var(--border-subtle);
}
[data-theme="dark"] .kpi--primary .kpi__num {
  color: var(--text-primary);
}

/* Bordes sutiles globales · garantía visibilidad sin durezas */
[data-theme="dark"] .banner__head,
[data-theme="dark"] .focus-head,
[data-theme="dark"] .lead-wait__head {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Header greeting dark · colores token-coherentes */
[data-theme="dark"] .hdr__greeting {
  color: rgba(255,255,255,0.65) !important;
  border-left-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] .hdr__greeting::before {
  background: #34D399;
}

/* === [Marcel 14 may LATE · kill ABSOLUTO chat FAB morado flotante] ===
   Marcel: "ese chat morado que flota" pidió eliminarlo varias veces
   FAB ya disabled en JS pero por si cache · CSS de respaldo NUCLEAR */
#bb-copilot-chat-fab,
#bb-followup-fab,
#bb-followup-toast,
button[id*="chat-fab"],
button[class*="chat-fab"],
div[class*="floating-chat"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* === [Marcel 13 may LATE FINAL · regla 7BM anti-regresión 4px global] ===
   Marcel pidió 12+ veces "no quiero bordes redondos" · regla NUNCA REMOVER
   Excepciones permitidas: pills 999px (.status-pill, .pill, .heat-tab, .badge)
   + avatares 50% (.av, .av--*) + iconos circle (.score-block, .lead__triage svg)
   Resto del sistema: max 4px obligatorio */
.lead, .lead-wait, .copilot-box, .copilot-panel, .focus-card, .focus-rec, .focus-section,
.banner, .kpi, .kpis, .reportes-kpi, .pending-action-item, .diseno-team-card,
.diseno-project, .weekly-note-item, .compose-row-input, .compose-body-editable,
.bb-arm-modal > div, .bb-idea-modal > div, .bb-modal-card,
.copilot-action-btn, .pending-actions-widget, .pending-action-item button,
.soporte-alert-item, .soporte-alerts, .focus-section__empty,
.compose-analysis, .compose-sent-guard, .compose-row {
  border-radius: 4px !important;
}
/* Pills + avatares + iconos circulares MANTIENEN su radius original (excepción explícita) */
.status-pill, .pill, .heat-tab, .badge, .av, .av--xs, .av--sm, .av--md, .av--lg,
.score-block, .lead__triage svg circle, .score__num, [class*="--circle"] {
  /* heredan radius original · regla 4px NO les aplica */
}

/* ════════════════════════════════════════════════════════════════════
   [17may · Marcel · P0] RESPONSIVE AUTORITATIVO · MÓVIL/TABLET ≤900px
   Marcel: "el menú lateral NI SIQUIERA debería existir en responsivo · el
   texto no se lee · falta padding/tamaños". Causa raíz: la media query móvil
   apuntaba a `.sidebar` (clase muerta) mientras el elemento real es `.sb` →
   el sidebar nunca se ocultaba, dejaba un riel fantasma que aplastaba el
   contenido y partía el texto letra por letra. Bloque último en cascada
   (gana especificidad/orden). NET-SAFE (cero animation). Regla 7AA: no
   reescribe markup, solo layout responsivo correcto.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* 1 · Sidebar = DRAWER off-canvas (best practice UX/UI/CRO · nav SÍ accesible).
     No ocupa flujo (contenido full-width) pero se abre con la hamburguesa. */
  .sb {
    display: flex !important; flex-direction: column !important;
    position: fixed !important; top: 0 !important; left: 0 !important;
    height: 100dvh !important; width: 264px !important; max-width: 84vw !important;
    transform: translateX(-100%) !important;
    transition: transform 280ms cubic-bezier(0.83,0,0.17,1) !important;
    z-index: 1001 !important; box-shadow: var(--shadow-modal);
    border-right: 1px solid var(--border-subtle);
    overflow: hidden !important;
  }
  /* [17may · Marcel "no se ve mi foto de perfil del fondo · no se adapta al
     alto"] Responsivo real con tecnología moderna: 100dvh (no 100vh: iOS Safari
     barra URL) + columna flex · la nav SCROLLEA y la sesión queda SIEMPRE
     fijada abajo, visible a cualquier alto de pantalla. */
  .sb__nav { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; -webkit-overflow-scrolling: touch; }
  .sb__notice { flex: 0 0 auto !important; }
  .sb__session, .sb__session-wrap, .sb__foot, .sb__bottom {
    flex: 0 0 auto !important; margin-top: auto !important;
    position: sticky !important; bottom: 0 !important;
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-subtle) !important;
  }
  body.sb-open .sb, body.sb-open-v3 .sb { transform: translateX(0) !important; }
  /* [17may · Marcel "el menú abierto se ve mal · debe mostrar información"]
     El drawer SIEMPRE expandido en móvil (con etiquetas/texto), nunca el estado
     colapsado solo-íconos. Neutraliza TODAS las reglas [data-sidebar="collapsed"]
     que ocultan labels → se llena el panel, sin espacio vacío a la derecha. */
  .app[data-sidebar="collapsed"] .sb,
  .sb { width: 264px !important; max-width: 84vw !important; }
  .sb__item-lbl, .sb__brand-text, .sb__online, .sb__idea-lbl,
  .sb__session-info, .sb__session-chev, .sb__system-status, .sb__name,
  .app[data-sidebar="collapsed"] .sb__item-lbl,
  .app[data-sidebar="collapsed"] .sb__brand-text,
  .app[data-sidebar="collapsed"] .sb__online,
  .app[data-sidebar="collapsed"] .sb__idea-lbl,
  .app[data-sidebar="collapsed"] .sb__session-info,
  .app[data-sidebar="collapsed"] .sb__session-chev,
  .app[data-sidebar="collapsed"] .sb__system-status {
    opacity: 1 !important; display: revert !important; visibility: visible !important; width: auto !important;
  }
  /* Nav e ítems full-width alineados a la izquierda · labels SIN truncar (264px
     alcanza para "Reportes"/"Desarrollo") · neutraliza el centrado colapsado. */
  .sb__nav, .sb__nav ul, .sb__nav ol, .sb__nav li, .sb__section, .sb__group { width:100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important; align-items:stretch !important; }
  .sb__item, .sb__item a, a.sb__item { display:flex !important; width:100% !important; max-width:100% !important; justify-content:flex-start !important; align-items:center !important; gap:10px !important; padding:10px 20px !important; text-align:left !important; box-sizing:border-box !important; }
  .sb__item-lbl { flex:1 1 auto !important; min-width:0 !important; opacity:1 !important; visibility:visible !important; width:auto !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; display:inline !important; font-size:var(--text-sm) !important; }
  .sb__item svg, .sb__item .sb__item-ico { flex:0 0 auto !important; }
  /* [17may · Marcel "todo se ve mal en el menú abierto · nada alineado"]
     CAUSA: cada sección del drawer tenía un left distinto (brand space-3,
     online space-4, nav 16px, idea space-3+10, session 8px) → cero grilla.
     UN gutter interno único de 16px para TODO → logo, "conectado", ítems,
     recuadro, idea y perfil en la MISMA línea izquierda. + idea sin truncar. */
  .sb__brand, .sb__online, .sb__idea, .sb__session {
    padding-left: 20px !important; padding-right: 20px !important;
    margin-left: 0 !important; margin-right: 0 !important;
    justify-content: flex-start !important; box-sizing: border-box !important;
  }
  .sb__notice, .app[data-sidebar="collapsed"] .sb__notice { margin: var(--space-3) 20px 0 !important; padding: 12px 14px !important; justify-content: flex-start !important; }
  .app[data-sidebar="collapsed"] .sb__notice-txt { display: block !important; }
  .sb__idea { width: auto !important; align-self: stretch !important; white-space: nowrap !important; overflow: visible !important; }
  .sb__idea-lbl, .app[data-sidebar="collapsed"] .sb__idea-lbl { overflow: visible !important; text-overflow: clip !important; opacity: 1 !important; width: auto !important; display: inline !important; }
  /* [17may · Marcel "odio los menú fixed, no integrados"] FUERA el hamburguesa
     flotante fijo · el trigger del menú es el botón INTEGRADO del header (#sb-expand). */
  .sb-toggle-v3, [data-sb-toggle-v3] { display: none !important; }
  .sb-expand, #sb-expand { display: inline-flex !important; margin-right: 6px; }
  .sb-backdrop-v3, .bb-mobile-backdrop {
    display: block !important; visibility: visible !important;
    width: auto !important; height: auto !important; pointer-events: none !important;
    opacity: 0;
  }
  body.sb-open .sb-backdrop-v3, body.sb-open-v3 .sb-backdrop-v3,
  body.sb-open .bb-mobile-backdrop, body.sb-open-v3 .bb-mobile-backdrop {
    opacity: 1 !important; pointer-events: auto !important;
  }
  /* [17may · Marcel "el menú de arriba debe estar alineado al resto · no tan
     apretado · que respire · sin cambiar el diseño"] El header aportaba 14px y
     .hdr__row otros 12px → ítems en x=26 mientras las cards en x=14/12 (gutter
     del .stage) → se veía desalineado y comprimido. Header outer = 0, y .hdr__row
     toma EXACTAMENTE el mismo gutter que el .stage en cada breakpoint + aire
     vertical → todo en la misma X, integrado y constante. Solo móvil. */
  .hdr, .header { padding-left: 0 !important; }
  /* [17may · Marcel "el top bar debería quedar fixed como en desktop, con el
     toggle de menú, mejor UX/UI/CRO"] En móvil position:sticky fallaba (un
     ancestro con overflow-x:hidden lo rompe) → fixed real + offset del
     contenido = altura del header. El toggle integrado (#sb-expand) viaja en
     el header, siempre visible al scrollear. */
  .hdr, .header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; }
  /* [17may · Marcel "falta padding bajo los iconos del top bar"] El header
     fixed mide 56px y el contenido pegaba justo (sin respiro). +16px de aire
     bajo la barra antes de la 1ra card. */
  main.main, .app > main.main { padding-top: calc(var(--header-h, 56px) + 16px) !important; }
  .hdr__row { padding-left: 14px !important; padding-right: 14px !important; padding-top: 9px !important; padding-bottom: 9px !important; box-sizing: border-box !important; }
  /* 2 · App a una sola columna · sin grid track fantasma · contenido full-width */
  .app { display: block !important; grid-template-columns: none !important; min-height: 100vh; }
  /* 3 · Sin scroll horizontal · todo el ancho del viewport */
  html, body { max-width: 100vw !important; overflow-x: hidden !important; }
  .app, .stage, .hdr, .header { max-width: 100% !important; box-sizing: border-box; }
  /* [17may · Marcel "espacio horrible a la derecha"] CAUSA RAÍZ: .main tenía
     max-width:calc(100vw - 56px) (reserva para un rail lateral de 56px que en
     móvil NO existe — la sidebar es drawer off-canvas, cero ancho en layout).
     Esos 56px eran hueco muerto puro. Full-width real, sin proporción rota. */
  .main, main.main, .app > main.main { width: 100% !important; max-width: 100% !important; margin: 0 !important; grid-column: auto !important; }
  .stage { width: 100% !important; margin: 0 !important; padding: 16px 14px 72px !important; gap: 16px !important; }
  .hdr, .header { padding-right: 0 !important; }
  /* 4 · Mata el apilado vertical del texto (flex/grid hijos deben poder encoger) */
  .stage, .stage *, .copilot-box, .copilot-box *, .lead, .lead *, .lead-wait, .lead-wait *,
  .kpi, .kpi *, .banner, .banner *, .focus-overlay, .focus-overlay * { min-width: 0; }
  .stage, .copilot-box, .lead, .lead-wait, .kpi, .banner { overflow-wrap: anywhere; word-break: normal; }
  /* 5 · Cabeceras/filas horizontales que reventaban → wrap correcto */
  .copilot-box__head, .copilot-box__hd, .copilot-box__top, .section-head,
  .lead__row, .lead__top, .lead-wait__top, .hero-kpis, .kpis { flex-wrap: wrap; }
  /* 5b · Copiloto head: ícono+título en fila 1, pill rotativo a fila 2 completa.
     Causa exacta del texto apilado: .copilot-box__pills tomaba 232px y exprimía
     el título a 96px. Forzamos el pill a basis:100% (baja de línea) y blindamos
     el ancho del título para que "Copiloto IA" quede en una sola línea. */
  .copilot-box__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .copilot-box__icon { flex: 0 0 auto; }
  .copilot-box__title { flex: 1 1 0; min-width: 0; }
  .copilot-box__name { white-space: nowrap; }
  .copilot-box__sub { white-space: normal; overflow-wrap: anywhere; }
  .copilot-box__pills { flex: 1 1 100%; order: 9; margin-top: 4px; }
  .copilot-pill__txt { white-space: normal !important; }
  /* 6 · KPIs · patrón "stat list" 1 COLUMNA full-width (battle-tested · CERO
     posibilidad de hueco/espacio a la derecha · el grid 2-col dejaba gap con
     conteo impar de cards → ACCIONES HOY quedaba a media columna · Marcel).
     Cada KPI = card full-width, contenido alineado izquierda, compacto/denso.
     Gana a ~113 reglas conflictivas (último en cascada). 8pt. */
  .kpis { display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:8px !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible !important; width:100% !important; }
  .kpi { display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:3px !important; width:100% !important; flex:0 0 auto !important; min-height:0 !important; padding:14px 16px !important; border:1px solid var(--border-subtle) !important; border-radius:var(--radius-md) !important; background:var(--bg-card) !important; box-sizing:border-box !important; text-align:left !important; }
  .kpi > * { margin:0 !important; width:auto !important; max-width:100% !important; text-align:left !important; align-self:flex-start !important; }
  /* 7 · Tap targets cómodos sin romper diseño */
  .icon-btn, .heat-tab, .btn { min-height: 36px; }
  /* 7c · [17may · Marcel "no se ve bien · todo se encima en el 1er tab del
     pop-up · mismo nivel de alineamiento"] CAUSA: .focus-rec-head es flex
     sin wrap → label "RECOMENDACIÓN IA" + chip fase + engagement + botón
     "VERIFICAR ASISTENCIA IA" se solapan en móvil. Envuelven, ningún encimado.
     + asegura visible el navegador ← → entre leads. */
  .focus-rec-head { flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; justify-content: flex-start !important; }
  .focus-rec-head > * { min-width: 0 !important; max-width: 100% !important; }
  .focus-rec-phase-chip { margin-left: 0 !important; }
  .focus-nav { display: inline-flex !important; }
  /* [17may · Marcel "el pop-up no se ve completo · faltan los tabs · falta el
     menú para pasar de un lead a otro" · repetido] En móvil el modal era una
     card 92vh centrada → su header (pager ← →) y los tabs quedaban fuera de
     vista / clipados. FIX estándar móvil: modal FULL-SCREEN 100dvh, header
     (pager) + tabs SIEMPRE fijos arriba, solo el body scrollea → el pop-up se
     ve COMPLETO siempre. net-safe (.focus-* no es elemento de la red). */
  /* [17may · Marcel "no hay cómo cerrar · todo plano y blanco · que se note
     el oscuro del fondo como en desktop · atajos del pie inútiles en móvil"]
     CAUSA: el modal full-screen v69 arrancaba en y=0 DEBAJO del header fijo
     de la app (z-index 1000) → ese header tapaba el .focus-head del modal
     (donde van la X de cerrar y el pager ← →). Fix integral:
     1) overlay POR ENCIMA del header app (z muy alto) → su .focus-head (X +
        pager) queda visible arriba.
     2) NO edge-to-edge: inset + radius + el fondo oscuro/blur del overlay se
        ve alrededor = profundidad como desktop (no plano blanco).
     3) header/tabs fijos arriba, body scrollea.
     4) pie de atajos de teclado oculto en móvil (sin teclado = ruido). */
  .focus-overlay { padding: 14px !important; align-items: center !important; justify-content: center !important; z-index: 100000 !important; }
  .focus-overlay > .focus-card, .focus-overlay .focus-card {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: calc(100dvh - 28px) !important;
    border-radius: 4px !important; border: 1px solid var(--border-subtle) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    box-shadow: var(--shadow-modal) !important;
  }
  .focus-overlay .focus-head, .focus-overlay .focus-tabs {
    flex: 0 0 auto !important; position: static !important;
    background: var(--bg-card) !important; z-index: 3 !important;
  }
  .focus-overlay .focus-head { display: flex !important; align-items: center !important; }
  .focus-overlay .focus-body {
    flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .focus-overlay .focus-foot { display: none !important; }
  /* 7b · [17may · Marcel "alinea todo · que no haya elementos con más padding
     que otros"] Medido 390px: .banner quedaba L=24/w=342 (12px más de inset)
     vs .kpi/.copilot-box L=12/w=366. Igualamos el ANCHO/posición de TODAS las
     cards top-level (cero margen lateral propio → todas al mismo gutter del
     .stage) y unificamos el padding interno a 14px (head copiloto 16→14).
     Misma X, mismo respiro · sin tocar el diseño v3 (regla 7AA). */
  .banners, .banner, .copilot-box, .kpis, .kpi, .lead-wait, .section-head, .pipe-embed, .focus-overlay > .focus-card {
    margin-left: 0 !important; margin-right: 0 !important;
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  /* [17may · Marcel "en móvil no tengo escape"] chip esc = botón de cierre real */
  .kbd--close { cursor: pointer !important; min-height: 32px !important; min-width: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; -webkit-tap-highlight-color: transparent; }
  .sb__session[data-tooltip]::before, .sb__session[data-tooltip]::after { display: none !important; content: none !important; }
  .banners { padding-left: 0 !important; padding-right: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .banner__head, .banner__item, .copilot-box__head, .copilot-box__hd { padding-left: 14px !important; padding-right: 14px !important; }
  .banner { padding-left: 0 !important; padding-right: 0 !important; }
  /* 8 · [17may · Marcel "borde raro a la derecha"] CAUSA RAÍZ del último
     artefacto: .copilot-panel (chat) está fijo con left:8/right:8 (regla 7141)
     pero su estado CERRADO usa transform:translateX(100%). Como el ancla es
     left:8px (no el borde derecho), 100% del ancho (~414px) lo deja en x≈422
     con viewport 430 → 8px del panel oculto asomaban como franja a la derecha.
     Cerrado = totalmente fuera (translate extra que cubre el ancla de 8px).
     Abierto ([data-open]) intacto: inset simétrico, sin tocar la animación. */
  .copilot-panel, #copilot-panel { transform: translateX(calc(100% + 24px)) !important; }
  .copilot-panel[data-open="true"], #copilot-panel[data-open="true"] { transform: none !important; }
  /* [17may · Marcel "el chat se ve mal en todo ancho/alto · no se ajusta"]
     Responsivo real (mismo patrón que sidebar/loader): 100dvh + flex column ·
     el cuerpo (sugerencias/mensajes) CRECE y scrollea (mata el hueco blanco) ·
     input SIEMPRE fijo abajo · header arriba. Se ajusta a cualquier alto. */
  .copilot-panel, #copilot-panel { height: 100dvh !important; max-height: 100dvh !important; display: flex !important; flex-direction: column !important; }
  .copilot-panel__head { flex: 0 0 auto !important; }
  .copilot-panel__body { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; -webkit-overflow-scrolling: touch; }
  .copilot-panel__input-wrap { flex: 0 0 auto !important; }
  /* 9 · [17may · Marcel "PIPELINE morado en móvil · no lo pedí cambiar"]
     Regresión: el KPI primario salía con color de marca. Uniforme como el
     resto / como el original: número text-primary, label muted. Solo móvil. */
  .kpi .kpi__num, .kpi--primary .kpi__num, .kpi__value, .kpi--primary .kpi__value { color: var(--text-primary) !important; }
  .kpi .kpi__lbl, .kpi--primary .kpi__lbl { color: var(--text-muted, #737373) !important; }
  /* 10 · [17may · Marcel "Previsualiz/ar partido · menos padding o íconos"]
     CAUSA RAÍZ: el anti-apilado de texto (#4) hacía quebrar palabras dentro de
     los botones. Los controles NUNCA cortan palabra; padding/tamaño compacto
     para que las 4 acciones quepan en fila sin romperse. */
  .stage .btn, .stage button, .stage [role="button"], .stage .btn *, .stage button * {
    overflow-wrap: normal !important; word-break: keep-all !important; hyphens: none !important; white-space: nowrap !important;
  }
  .stage .btn, .stage button.btn, .stage [role="button"] {
    padding: 9px 11px !important; font-size: 12.5px !important; min-width: 0 !important; line-height: 1.2 !important;
  }
}
@media (max-width: 480px) {
  .stage { padding: 14px 12px 64px !important; }
  .kpi { padding: 14px !important; }
  .copilot-box__head, .copilot-box__hd { gap: 8px; }
  /* Header EXACTO a la grilla del contenido en iPhone: .stage usa 12px aquí →
     .hdr__row también 12px → ítems del menú en la MISMA X que las cards. */
  .hdr__row { padding-left: 12px !important; padding-right: 12px !important; }
  /* [17may · Marcel "esa barra (Todos/Hot/Tibio/Frío/Ganados) se ve fuera de
     pantalla"] No más corte: los chips ENVUELVEN, todos visibles, nada off-screen. */
  .heat-tabs { display: flex !important; flex-wrap: wrap !important; overflow-x: visible !important; gap: 8px !important; row-gap: 8px !important; }
  .heat-tab { flex: 0 0 auto !important; }
  /* [17may · Marcel "el menú de cuenta se ve exagerado"] Popup acotado (no casi
     pantalla completa) + botón de foto compacto, no full-width. */
  .acct { width: min(300px, calc(100vw - 24px)) !important; left: 12px !important; right: auto !important; }
  .acct__head { flex-wrap: nowrap !important; padding: 12px !important; }
  .acct__head-change { flex: 0 0 auto !important; width: auto !important; margin-top: 0 !important; }
  .acct__item { padding: 9px 12px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
   [17may · Marcel · REGLA DE ORO · responsivo real, una sola fuente de verdad]
   MARCO FLUIDO COMPARTIDO. El header (.hdr__row) y el contenido (.stage) usan
   EXACTAMENTE el mismo frame: mismo max-width, mismo gutter fluido clamp(),
   mismo centrado. Por construcción quedan en la MISMA X a cualquier ancho
   (móvil → 4K), sin parches por breakpoint. Reemplaza/gana a la cascada
   escalonada 1400/1440/1480/1520. Última regla del stylesheet = gana cascada.
   .hdr (barra) sigue full-width (su fondo/sticky) · solo el contenido interno
   se enmarca. NO cambia el diseño v3 · solo unifica el mecanismo. (regla 7AA)
   ═══════════════════════════════════════════════════════════════════════ */
.hdr { padding-left: 0 !important; padding-right: 0 !important; }
.stage, .hdr__row {
  width: 100% !important;
  max-width: min(1520px, 100%) !important;
  margin-inline: auto !important;
  padding-inline: clamp(12px, 3vw, 40px) !important;
  box-sizing: border-box !important;
}
/* [17may · Marcel "iconos SIEMPRE alineados al resto · mil veces"] DECISIÓN
   FINAL ESTABLE: NADA de constantes mágicas (+14/+33) persiguiendo el texto
   interno de las cards. El header es GLOBAL y el contenido cambia por vista
   (dashboard/modal/etc) con paddings distintos → ninguna constante calza con
   todas (por eso se veía corrido en el modal aunque cuadrara en el dashboard).
   .hdr__row hereda el gutter EXACTO del .stage (regla compartida .stage,.hdr__row
   de arriba) = margen de contenido canónico de la app, idéntico en TODAS las
   vistas por construcción. Sin override = misma X siempre, estable. */
@media (min-width: 901px) {
  /* [17may · Marcel "distancias feas con menú abierto y cerrado"] BUG: con
     .app[data-sidebar="collapsed"] el .sb mide 56px pero el grid seguía en
     240px 1fr → 184px de hueco muerto (el contenido NO reflota al espacio
     liberado). La regla colapsada (l.86) no tenía !important y la pisaban.
     Regla final autoritaria: colapsada = 56px, el contenido usa el resto.
     Transición suave ya existe en .app. Distancias bien distribuidas
     menú abierto (240) y cerrado (56), fluido. Desktop. */
  .app[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr !important; }
  .app:not([data-sidebar="collapsed"]) { grid-template-columns: var(--sidebar-w) 1fr !important; }
}
/* [18may · Marcel "que se note el oscuro como desktop"] Regla FINAL autoritaria
   (último en cascada · gana a .focus-card{border-radius:0!important} l.7138/7200):
   en móvil el modal va con esquinas redondeadas sobre el fondo oscuro/blur del
   overlay → mismo look premium con profundidad que desktop. */
@media (max-width: 900px) {
  .focus-overlay .focus-card, .focus-overlay > .focus-card { border-radius: 4px !important; }
}
/* [18may · Marcel (reportado 2 días) "móvil: iconos del top bar fixed con
   padding abajo · desalineado · en desktop perfecto"] CAUSA RAÍZ medida:
   en móvil .hdr recibía padding:8px (l.727) → empujaba .hdr__row a y=8, y
   .hdr__row recibía padding-top/bottom:9px (l.8297) → con height:56 border-box
   el row se desbordaba 8px BAJO la barra fixed de 56px (iconos colgando).
   En desktop está perfecto porque el row base es height:56 + 0 padding
   vertical + align-items:center. Regla FINAL autoritaria: replicar ESE
   centrado limpio en móvil — header EXACTO --header-h, cero padding vertical
   en .hdr y .hdr__row, iconos centrados sin desborde. Solo box-model
   (net-safe · .hdr no es elemento de red). */
@media (max-width: 900px) {
  .hdr, .header {
    height: var(--header-h, 56px) !important;
    min-height: var(--header-h, 56px) !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  .hdr__row {
    height: var(--header-h, 56px) !important;
    min-height: var(--header-h, 56px) !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
}
/* [18may · Marcel "esa caluga no está muy gorda para mobil?"] CAUSA: la regla
   móvil de touch-target (min-height:44px en buttons) inflaba el mini-chip
   .bb-next-send-badge ("Próx. envío en Xd") a 44px de alto = bloque gordo.
   Es un chip informativo (no acción primaria) → lo eximimos: queda slim como
   en desktop. !important para ganarle a las reglas touch-target. Net-safe. */
@media (max-width: 900px) {
  /* specificity (0,4,1) · gana a `button:not(.kbd):not(.tag):not(.x)`
     (0,3,1) !important de las reglas touch-target ≤640/≤768. */
  .kpis .kpi button.bb-next-send-badge,
  .kpis .kpi .bb-next-send-badge {
    min-height: 0 !important;
    height: auto !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    align-self: flex-start !important;
  }
}
/* ════════════════════════════════════════════════════════════════════
   [18may · Marcel "¿qué le pasó al menú responsivo que se rompió?"]
   CAUSA RAÍZ: conviven 2 implementaciones responsivas del sidebar peleando
   en cascada. La VIGENTE/aprobada (17may · 8323) es el DRAWER off-canvas
   (trigger header #sb-expand · backdrop · body.sb-open). Pero bloques
   STALE regla-7AI (@1023 l.650 · @767 l.679 · @640 l.770: ".sb sticky
   siempre visible 56/200px" + ".sb__item-lbl display:none") + el grid
   .app[data-sidebar] l.8602-8603 (era para DESKTOP, mal puesto en @900)
   ganaban por orden → el drawer CERRADO quedaba `transform:identity`
   (visible, cubriendo contenido greyado · solo íconos, sin labels) en vez
   de translateX(-100%). Resultado = el menú "roto" que reportó Marcel.
   FIX: bloque FINAL autoritario (último en cascada · gana a igualdad de
   especificidad/!important · mismo patrón intencional 8313/8605) que
   re-afirma el estado canónico del DRAWER 17may como única verdad.
   Net-safe: solo box-model/position/transform estático (sin keyframes ni
   animation-fill-mode · la transición translateX ya existe l.8331).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* App una sola columna · cero grid track fantasma (mata l.8602-8603 @900) */
  .app,
  .app[data-sidebar="collapsed"],
  .app:not([data-sidebar="collapsed"]) {
    display: block !important;
    grid-template-columns: none !important;
  }
  /* Sidebar = DRAWER off-canvas · OCULTO por defecto (cerrado) */
  .sb {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    height: 100dvh !important;
    width: 264px !important; max-width: 84vw !important;
    transform: translateX(-100%) !important;
    transition: transform 280ms cubic-bezier(0.83,0,0.17,1) !important;
    z-index: 1001 !important;
    box-shadow: var(--shadow-modal);
    border-right: 1px solid var(--border-subtle);
  }
  /* ABIERTO solo con la hamburguesa del header (body.sb-open / -v3) */
  body.sb-open .sb,
  body.sb-open-v3 .sb { transform: translateX(0) !important; }
  /* Drawer SIEMPRE expandido con labels (nunca riel solo-íconos) ·
     gana a `.app .sb__item-lbl{display:none}` stale @767 (igual specificity 0,2,0, último) */
  .app .sb__item-lbl,
  .app .sb__brand-text,
  .app .sb__online,
  .app .sb__idea-lbl,
  .app .sb__session-info,
  .app .sb__session-chev,
  .app .sb__name,
  .app .sb__sub,
  .app[data-sidebar="collapsed"] .sb__item-lbl,
  .app[data-sidebar="collapsed"] .sb__brand-text,
  .app[data-sidebar="collapsed"] .sb__online,
  .app[data-sidebar="collapsed"] .sb__idea-lbl {
    display: revert !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
  }
  .app .sb__item,
  .app .sb__item a,
  .app a.sb__item {
    display: flex !important;
    width: 100% !important; max-width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 20px !important;
    box-sizing: border-box !important;
  }
  /* Contenido full-width real · sin reserva de riel fantasma */
  .main, main.main, .app > main.main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    grid-column: auto !important;
  }
}
/* ════════════════════════════════════════════════════════════════════
   [18may · Marcel "esta vista colapsa feo para ese tamaño de pantalla"]
   (screenshot ~1042px) CAUSA: .kpis es display:flex flex-wrap:wrap · a
   ≤1100px la línea 1924 fija grid-template-columns:repeat(2,1fr) pero NO
   aplica (sigue flex) → 'Acciones hoy' se empuja a la derecha (left:895)
   o cae a una 2ª línea = colapso asimétrico feo. FIX: bloque FINAL
   autoritario (último en cascada · patrón 8313/8605) que en el rango
   intermedio hace .kpis un GRID 2×2 REAL, limpio y balanceado, con
   bordes correctos. Solo layout · net-safe. Móvil chico = 1 col. */
@media (max-width: 1100px) {
  .kpis {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;        /* anula el flex-wrap base */
    overflow: visible !important;
    align-items: stretch !important;
  }
  .kpis .kpi {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;          /* el badge 'Próx. envío' baja limpio dentro de su celda */
    gap: 6px 8px !important;
    padding: 12px 16px !important;
    border-right: 1px solid var(--border-subtle) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    min-width: 0 !important;
    margin: 0 !important;               /* mata el margin-left:auto que empujaba 'Acciones hoy' */
  }
  .kpis .kpi:nth-child(2n) { border-right: 0 !important; }      /* 2ª columna sin borde derecho */
  .kpis .kpi:nth-last-child(-n+2) { border-bottom: 0 !important; } /* última fila sin borde inferior */
  /* [18may · Marcel "en columnas se ve horrible · 1+2+1"] Pipeline NO debe
     spanear toda la fila (línea 7424 lo forzaba grid-column:1/-1) → grid 2×2
     REALMENTE parejo (Pipeline|Cierre · Velocidad|Acciones). */
  .kpis .kpi--primary { grid-column: auto !important; }
}
/* [18may · Marcel "en 3 columnas se ve horrible para el usuario · se colapsa"]
   A ≤700px (su screenshot ~563px + teléfonos) el 2×2 aún aprieta números
   grandes ($76.8M) → 1 COLUMNA limpia: cada KPI fila completa, legible,
   premium (patrón mobile Linear/Stripe). Pipeline tampoco spanea raro. */
@media (max-width: 700px) {
  .kpis { grid-template-columns: 1fr !important; }
  .kpis .kpi, .kpis .kpi--primary { grid-column: auto !important; border-right: 0 !important; }
  .kpis .kpi:not(:last-child) { border-bottom: 1px solid var(--border-subtle) !important; }
  .kpis .kpi:last-child { border-bottom: 0 !important; }
}
/* ════════════════════════════════════════════════════════════════════
   [18may · Marcel "en responsivo la palabra Pipeline a veces debe ocultarse
   para no colapsar contenido"] (screenshot ~560px: 'CRM › Pip…' chocando con
   los iconos del header). FIX: a ≤900px ocultar el separador chevron + el
   sub-breadcrumb 'Pipeline activo' · queda solo 'CRM' + botón menú = header
   limpio sin colisión. El svg del botón #sb-expand NO se toca (es .hdr__bc >
   button > svg · el separador es .hdr__bc > svg directo). Bloque FINAL
   autoritario · solo layout · net-safe. */
@media (max-width: 900px) {
  .hdr__bc > svg { display: none !important; }          /* separador › (NO el del botón menú) */
  .hdr__bc [data-bc-sub] { display: none !important; }  /* 'Pipeline activo' */
  .hdr__bc { max-width: none !important; overflow: visible !important; }
  .hdr__bc [data-bc-main] { white-space: nowrap !important; }
}

/* ===== bloque 7 (era <style> inline #7) ===== */
  /* [v208 P0 FIX login loop] CAUSA RAÍZ: banner Claude tenía display:flex INLINE + hidden attribute.
     Por specificity, inline style ganaba sobre hidden → banner siempre visible al boot.
     FIX: removí display:flex del inline + agrego CSS regla:
     - [hidden] → display:none (default browser, refuerzo con !important)
     - :not([hidden]) → display:flex (solo cuando se le pide mostrarse)
     NOTA: NO toco #bb-session-expired-modal · worker mantiene killswitch global (línea 26). */
  #bb-claude-health-banner[hidden]{display:none !important;}
  #bb-claude-health-banner:not([hidden]){display:flex !important;}

  /* ═══════════════════════════════════════════════════════════════════════
     [Sol · 9 jun · MENÚ MÓVIL AUTORITATIVO · regla 7AA · réplica dashboard-v3.html]
     UN solo menú móvil. Drawer off-canvas del .sb (NO hamburguesa flotante ·
     Marcel: "odio los menú fixed, no integrados"). Trigger = botón INTEGRADO
     #sb-expand del header. Estado = body.sb-open. Breakpoint 860px (= v3 aprobado).
     ÚLTIMO bloque del <style> → gana por orden de cascada a todo intento previo
     (riel 56px 7AI · v541 @1024 · etc). JS: bbMobileDrawerClean (fin de app-bridge.js). */

  /* matar TODA hamburguesa/backdrop flotante de iteraciones previas (Marcel las odia) */
  .nv-mob-burger, .nv-mob-backdrop,
  .sb-toggle-v3, .hdr__hamburger, #sb-mobile-toggle,
  [data-mobile-menu-toggle], [data-sb-toggle-v3], [data-sb-backdrop-v3] { display: none !important; }

  /* backdrop autoritativo del drawer móvil */
  #bb-mob-backdrop {
    position: fixed; inset: 0; z-index: 1290; display: none;
    background: rgba(0,0,0,.38); opacity: 0; pointer-events: none;
    transition: opacity .28s cubic-bezier(.16,1,.3,1);
  }

  @media (max-width: 1024px) {
    /* contenido a ancho completo · sidebar fuera de pantalla por defecto */
    .app { grid-template-columns: 0 1fr !important; }
    .app > main.main, .main { grid-column: 1 / -1 !important; min-width: 0 !important; }

    /* [Sol · 10 jun · FIX iOS · Marcel: incógnito iPhone · "tap lleva a cualquier lado · no navega"]
       iOS Safari/WebKit mapea mal los taps con position:fixed + transform dentro del stacking
       context de .app → el tap caía en el elemento de ATRÁS (links a cualquier lado). Solución
       robusta iOS: deslizar con `left` (NO transform) · pointer-events:none cuando cerrado (el
       drawer fuera de pantalla no intercepta taps) · fondo sólido · guard de contenido abajo. */
    .sb {
      position: fixed !important; top: 0 !important; bottom: 0 !important;
      width: var(--sidebar-w, 240px) !important;
      height: 100vh !important; height: 100dvh !important;
      transform: none !important;
      transition: left .3s cubic-bezier(.22,1,.36,1) !important;
      z-index: 1300 !important; overflow-y: auto !important; overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      display: flex !important; flex-direction: column !important;
      background: var(--bg-card, #fff) !important;
      box-shadow: none !important; padding-bottom: 0 !important;
    }
    /* CERRADO · selector de ALTA especificidad (body:not) para ganar a las reglas legacy
       `.sb{left:0!important}` (1126/1249/5191…) que dejaban el drawer visible siempre. */
    body:not(.sb-open) .sb {
      /* [13 jun · FIX clip izquierdo] el sidebar móvil mide min(286px,84vw), pero el
         offset asumía --sidebar-w(240) → quedaban ~22px del borde derecho pintando
         SOBRE los primeros px del contenido (clip de la 1ª letra). Despejamos el
         ANCHO REAL + 8px de margen → totalmente fuera de pantalla. */
      left: calc(-1 * min(286px, 84vw) - 8px) !important;
      transform: none !important;
      pointer-events: none !important;
    }
    /* ABIERTO */
    body.sb-open .sb {
      left: 0 !important;
      transform: none !important;
      box-shadow: 10px 0 40px rgba(0,0,0,.20) !important;
      pointer-events: auto !important;
      /* [13 jun · FIX iOS · 2º bug "los links del menú no navegan"] La regla
         `.app .sb` (especificidad 0,2,0) fijaba z-index:1200, POR DEBAJO del
         #bb-mob-backdrop (1290) → el backdrop transparente pintaba SOBRE el drawer
         abierto y capturaba los taps de los ítems (el menú se cerraba en vez de
         navegar). Especificidad 0,2,1 aquí le gana → drawer SOBRE su backdrop.
         Sigue por debajo de los modales reales (z ≥ 9000). */
      z-index: 1310 !important;
    }
    /* items SIEMPRE por encima dentro del drawer → tap correcto en iOS */
    .sb .sb__item, .sb .sb__idea, .sb .sb__session, .sb #sb-toggle, .sb a[href^="#"] {
      position: relative !important; z-index: 2 !important; pointer-events: auto !important;
    }
    /* drawer ABIERTO → el contenido de atrás NO recibe taps (anti "links a cualquier lado" en iOS) */
    body.sb-open .main { pointer-events: none !important; }
    body.sb-open .sb, body.sb-open #bb-mob-backdrop { pointer-events: auto !important; }

    /* dentro del drawer SIEMPRE labels + footer completos (anula el riel 56px de 7AI) */
    .app .sb__brand-text, .app .sb__online, .app .sb__system-status,
    .app .sb__item-lbl, .app .sb__session-info,
    .app .sb__session-name, .app .sb__session-mail, .app .sb__session-chev {
      opacity: 1 !important; display: revert !important; visibility: visible !important;
    }
    /* [Sol · 9 jun · FIX bug Marcel] footer (solo cuenta) SIEMPRE visible abajo del drawer.
       Anula el legacy `body.sb-open .sb__session{position:absolute}` que lo descolocaba/ocultaba en móvil. */
    .app .sb__session {
      display: flex !important; opacity: 1 !important; visibility: visible !important;
      position: static !important; bottom: auto !important; left: auto !important; right: auto !important;
    }
    .app .sb__session { margin-top: auto !important; flex: 0 0 auto !important; }
    /* [13 jun · Marcel: "lo de Compartir idea NO va ahí nunca"] fuera del drawer móvil
       (coherente con desktop, donde .sb__idea ya es display:none por defecto). */
    .app .sb__idea { display: none !important; }
    .sb__group { padding-bottom: 8px !important; }

    /* trigger integrado del header SIEMPRE visible en móvil + botón colapsar dentro del drawer */
    #sb-expand, .sb-expand { display: inline-flex !important; }
    #sb-toggle, .sb__toggle { display: inline-flex !important; }

    /* backdrop visible cuando el drawer está abierto */
    #bb-mob-backdrop { display: block !important; }
    body.sb-open #bb-mob-backdrop { opacity: 1 !important; pointer-events: auto !important; }
  }

  @media (min-width: 1025px) {
    #bb-mob-backdrop { display: none !important; }
    body.sb-open #bb-mob-backdrop { opacity: 0 !important; pointer-events: none !important; }
  }

  /* [12 jun · Marcel "EN MÓVIL SE SIGUE VIENDO OSCURO AL ABRIR EL MENÚ"]
     v661 solo cubría #bb-mobile-backdrop/[data-sb-backdrop-v3] · quedaban VIVOS
     .nv-mob-backdrop (rgba .42) y #bb-mob-backdrop. El drawer es un MENÚ:
     jamás oscurece la página. Tap-afuera/scroll-lock se conservan (solo se
     transparenta el fondo · pointer-events intactos). */
  #bb-mob-backdrop, .nv-mob-backdrop, .bb-mobile-backdrop, #bb-mobile-backdrop,
  .sb-backdrop-v3, [data-sb-backdrop-v3] {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* [12 jun · Marcel "desapareció la sección de cuenta · SIEMPRE visible también
     en el menú móvil como en desktop/diseño original"]
     [24 jun · Marcel "DEBAJO de Reportes = ESPACIO VACÍO · falta TODA la sección
     de cuenta · NO se renderiza en mobile"] FIX RAÍZ DEFINITIVO: esta regla y la
     de @media(max-width:900px) se peleaban (sticky vs absolute) con specificity
     distinta → ninguna fijaba el footer y el .sb__spacer{flex:1} crecía y empujaba
     la cuenta bajo el fold. Ahora AMBAS usan el MISMO approach absolute-bottom de
     Marcel (v339) que sí funciona, y se neutraliza el spacer en el drawer móvil. */
  @media (max-width: 1024px) {
    /* el spacer flex:1 NO debe crecer en el drawer móvil · si crece, empuja la
       sección de cuenta absoluta fuera de vista y deja el hueco que reportó Marcel */
    .app .sb__spacer, .sb .sb__spacer { flex: 0 0 0 !important; height: 0 !important; min-height: 0 !important; }
    .app .sb { padding-bottom: 78px !important; } /* reserva el alto del footer absoluto */
    .app .sb .sb__session, .sb .sb__session {
      display: flex !important; visibility: visible !important; opacity: 1 !important;
      position: absolute !important;
      left: 0 !important; right: 0 !important; bottom: 0 !important;
      top: auto !important; margin-top: 0 !important; z-index: 12 !important;
      justify-content: flex-start !important; padding: 12px 14px !important;
      background: var(--bg-card) !important;
      border-top: 1px solid var(--border-subtle) !important;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.04) !important;
    }
    .app .sb__session-info, .app .sb__session-name, .app .sb__session-mail,
    .app .sb__session-chev, .app .sb__session-logout,
    .app .sb__session .av { display: revert !important; visibility: visible !important; opacity: 1 !important; }
    .app .sb__session-chev, .app .sb__session-logout { display: inline-flex !important; }
  }

/* [7-jul fable5-desktop · QA item-4 390px] .banner__head-r medía 526px en viewport de 390 —
   el trend de "Reuniones del equipo" (una sola línea larga) desbordaba y se recortaba.
   En móvil el bloque derecho del head baja de línea y el meta envuelve. */
@media (max-width: 480px) {
  .banner__head-r { max-width: 100%; min-width: 0; flex-wrap: wrap; }
  .banner__head-r .banner__head-meta, .banner__head-meta { white-space: normal; overflow-wrap: anywhere; }
}


/* [7-jul · #115 Marcel iPhone · panel enviadas roto en móvil] .banner__head es flex-row
   nowrap space-between: el subtítulo del panel #bb-enviadas-panel caía como columna
   angosta a la DERECHA del título. ≤640px: header apilado (subtítulo bajo el título a
   ancho completo) y en las filas la chip de interés baja a su propia línea para no
   comerse el nombre (caso «Rodrigo Vallecillo · La Gran Fo…»). Scoped al panel: los
   demás banners no cambian. Los !important ganan a los estilos inline del render. */
@media (max-width: 640px) {
  #bb-enviadas-panel .banner__head { display: block; }
  #bb-enviadas-panel .banner__head > p { width: 100%; margin-top: 4px !important; }
  #bb-enviadas-panel .banner__item { flex-wrap: wrap; row-gap: 6px; }
  #bb-enviadas-panel .banner__item > div:first-child { flex: 1 1 100% !important; }
  #bb-enviadas-panel .banner__item > span[title] { margin-left: auto; }
}