/* ════════════════════════════════════════════════════════════════
   SalesAId v2 — OVERHAUL premium 2026 (capa de override ADITIVA)
   Mantiene identidad (dark + gradiente de marca + Manrope/JetBrains)
   y la lleva a: fondo ambiental, glassmorphism, profundidad, motion,
   accesibilidad AA y touch. Cargar DESPUÉS de styles.css.
   Original congelado intacto. Trabaja sobre la copia v2.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* gradiente de marca (alineado al pitch: azul → violeta → rosa) */
  --ss-grad: linear-gradient(120deg, #4f74ff 0%, #8b5cf6 52%, #e35bd0 100%);
  --ss-grad-soft: linear-gradient(120deg, rgba(79,116,255,.16), rgba(139,92,246,.16), rgba(227,91,208,.16));
  --glass: linear-gradient(180deg, rgba(28,28,44,.62), rgba(18,18,30,.52));
  --glass-strong: linear-gradient(180deg, rgba(32,32,50,.78), rgba(20,20,32,.7));
  --hair: 1px solid rgba(255,255,255,.08);
  --hi: inset 0 1px 0 rgba(255,255,255,.06);
  /* a11y: textos muteados a contraste AA */
  --text-tertiary: #8d93a7;
  --text-dim: #6c7286;
  --shadow-md: 0 10px 34px rgba(0,0,0,.42);
  --shadow-lg: 0 28px 80px rgba(0,0,0,.58);
}

/* ── 1) FONDO AMBIENTAL (glows de marca, fijos) ──────────────────── */
body{
  background:
    radial-gradient(1200px 820px at -6% -12%, rgba(124,92,255,.24), transparent 56%),
    radial-gradient(1100px 720px at 104% -4%, rgba(79,116,255,.16), transparent 56%),
    radial-gradient(900px 680px at 50% 118%, rgba(227,91,208,.12), transparent 58%),
    var(--bg-base) !important;
  background-attachment: fixed !important;
}
::selection{ background: rgba(139,92,246,.35); color:#fff; }

/* ── 2) SIDEBAR · TOPBAR (glass) ─────────────────────────────────── */
/* sidebar/topbar: fondo translúcido SÓLIDO (sin backdrop-filter para no atrapar
   los dropdowns position:fixed como .gs-dropdown). Mismo look glass sobre el glow. */
.sidebar{
  background: linear-gradient(180deg, rgba(17,17,28,.96), rgba(12,12,20,.96)) !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
}
/* (Se quitó el glow local detrás del logo: quedaba como una mancha violeta
   asimétrica. Ahora la luz viene grande desde el corner sup-izq del fondo
   ambiental — ver sección 1 body — que es consistente y simétrico.) */
.nav-link{ transition: background .18s ease, color .18s ease, transform .12s ease; border-radius: var(--r-md); }
.nav-link.active{ background: var(--ss-grad-soft) !important; color: var(--text-primary) !important; position:relative; }
.nav-link.active::before{ content:""; position:absolute; left:-2px; top:7px; bottom:7px; width:3px; border-radius:999px; background:var(--ss-grad); box-shadow:0 0 14px rgba(139,92,246,.7); }
/* topbar SIN fondo (la "barra oscura" era este gradiente casi negro):
   transparente para que el breadcrumb y el buscador floten sobre el fondo
   ambiental. Sin backdrop-filter (no atrapa el dropdown del buscador). */
.topbar, .mobile-topbar{
  background: transparent !important;
  border-bottom: none !important;
}
.topbar-search{ transition: box-shadow .2s ease, border-color .2s ease; }
.topbar-search:focus-within{ box-shadow: 0 0 0 3px rgba(139,92,246,.25); border-color: var(--brand-border) !important; }

/* FIX stacking (raíz del bug del buscador): .app-shell lleva `fade-in`, cuya
   animación termina en `transform: translateY(0)` — que NO es `none`, así que
   crea un stacking context y ATRAPA el .gs-dropdown (position:fixed) detrás del
   contenido. Lo cambiamos a un fade de opacidad pura (sin transform): el dropdown
   escapa al viewport y se ve al frente. Mantiene la entrada suave. */
.app-shell.fade-in{ animation: ssShellFade .35s ease both !important; }
@keyframes ssShellFade{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .app-shell.fade-in{ animation:none !important; } }
/* refuerzo: el dropdown global siempre por encima de todo */
.gs-dropdown{ z-index: 1000 !important; }

/* ── 3) CARDS · SUPERFICIES (glass + profundidad) ────────────────── */
/* cards: fondo translúcido sólido (depth sin blur por-card → performante) */
.card, .kpi-card, .entity-card, .meeting-card, .insight-box, .user-card, .auth-card,
.rv-player-card, .hero-lens-card, .rv-insight-card{
  background: linear-gradient(180deg, rgba(24,24,38,.90), rgba(16,16,27,.88)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: var(--shadow-md), var(--hi) !important;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease;
}
.kpi-card{
  position:relative; overflow:hidden;
  /* reflejo interno suave de los colores de marca (la luz del borde "entra"):
     azul desde arriba-izq, rosa desde abajo-der, violeta tenue al ras del borde. */
  box-shadow:
    inset 2px 3px 30px -12px rgba(79,116,255,.45),
    inset -3px -3px 32px -14px rgba(227,91,208,.40),
    inset 0 0 16px -4px rgba(139,92,246,.20),
    var(--shadow-md), var(--hi) !important;
}
/* Borde con gradiente SalesAId que GIRA muy lento alrededor de la KPI card.
   Anillo cónico enmascarado (solo se ve el borde); @property anima el ángulo
   → los colores rotan por el borde, sin girar la caja. */
@property --ssAngle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.kpi-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  pointer-events:none; z-index:2;
  background: conic-gradient(from var(--ssAngle), #4f74ff, #8b5cf6, #e35bd0, #8b5cf6, #4f74ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.85;
}
@media (prefers-reduced-motion: no-preference){
  .kpi-card::after{ animation: ssBorderRot 24s linear infinite; }  /* MUY lento */
}
@keyframes ssBorderRot{ to{ --ssAngle: 360deg; } }
/* La KPI con popover (ej. "Pipeline activo") NO debe recortar ni crear
   containing-block: su popover es position:fixed y el overflow:hidden + el
   transform en :hover lo atrapaban y recortaban (caja vacía). */
.kpi-card--has-popover{ overflow: visible !important; }
.kpi-card--has-popover:hover{ transform: none !important; }
/* ícono de KPI como chip de marca */
.kpi-icon{ background: var(--ss-grad) !important; color:#fff !important; box-shadow: 0 6px 20px rgba(124,92,255,.38); border:none !important; }
.kpi-icon svg{ stroke:#fff !important; color:#fff !important; }

/* ── 4) MICRO-INTERACCIONES (hover real + reduce-motion) ─────────── */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .entity-card:hover, .meeting-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--hi); border-color: var(--brand-border) !important; }
  .kpi-card:hover{ transform: translateY(-2px); border-color: var(--brand-border) !important; }
  .nav-link:hover{ background: rgba(139,92,246,.12); transform: translateX(2px); }
}

/* ── 5) BOTONES (gradiente de marca + glow) ──────────────────────── */
.btn-primary{
  background: var(--ss-grad) !important; border:none !important; color:#fff !important;
  box-shadow: 0 8px 24px rgba(124,92,255,.34), var(--hi);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 32px rgba(124,92,255,.5); }
.btn{ transition: transform .14s ease, filter .14s ease, border-color .14s ease; }
.btn:hover{ filter: brightness(1.07); border-color: var(--brand-border) !important; }
.btn:active, .btn-primary:active{ transform: translateY(0) scale(.985); }

/* ── 6) ACENTOS (avatar ring, score-chip, badges, pills) ─────────── */
.avatar{ box-shadow: 0 0 0 2px rgba(139,92,246,.45), 0 4px 14px rgba(0,0,0,.4) !important; }
.score-chip{ backdrop-filter: blur(8px); box-shadow: var(--hi); }
.badge, .url-pill, .trend{ backdrop-filter: blur(6px); }

/* ── 7) DATA-VIZ + POP (números y barras con gradiente de marca) ── */
.rv-marker{ box-shadow: 0 0 0 2px rgba(10,10,20,.9), 0 0 8px rgba(139,92,246,.6); }
/* números KPI grandes con gradiente de marca (pop premium) */
.kpi-value, .kpi-value-main{
  background: var(--ss-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.kpi-value .kpi-sub, .kpi-value-main small{ -webkit-text-fill-color: var(--text-tertiary); color: var(--text-tertiary); }
/* FIX: el gradiente de .kpi-value hereda -webkit-text-fill-color:transparent a
   TODOS sus hijos → volvía invisible el contenido del chip/popover de IA y los
   tooltips de monto dentro de la KPI (se veían como cajas vacías). Restauramos
   el relleno de texto en esos overlays para que rendericen su contenido. */
.kpi-value .ai-review-chip, .kpi-value .ai-review-chip *,
.kpi-value .money-tip, .kpi-value .money-tip *,
.ai-review-popover, .ai-review-popover *{
  -webkit-text-fill-color: currentColor !important;
}
.ai-review-popover{ color: var(--text-primary); z-index: 200 !important; }
/* el NÚMERO de monto (money-amount) sí debe verse con gradiente como las demás
   KPIs: tenía text-fill transparent heredado pero sin gradiente propio → invisible. */
.kpi-value .money-amount{
  background: var(--ss-grad) !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color: transparent !important;
}
/* su tooltip exacto vuelve a color sólido (no gradiente, legible) */
.kpi-value .money-amount .money-tip, .kpi-value .money-amount .money-tip *{
  -webkit-text-fill-color: currentColor !important; background: none !important;
}
/* el contenedor del valor (con el popover) por encima del label de la card */
.kpi-card--has-popover .kpi-value{ position: relative; z-index: 30; }
/* En la KPI el número compacto ($1.55M) ya es claro y la card es densa: el tooltip
   de valor exacto tapaba el label "Pipeline activo". Lo ocultamos SOLO acá (el
   detalle financiero está en el popover del chip ✦ IA). En las filas de deals el
   tooltip de monto se mantiene. El title nativo duplicado lo remueve enhance.js. */
.kpi-value .money-tip{ display: none !important; }
/* barras de scorecard con gradiente */
.rv-score-fill{ background: var(--ss-grad) !important; }
/* sheen animado sutil en el CTA primario (live) */
@media (prefers-reduced-motion: no-preference){
  .btn-primary{ background-size:170% 170% !important; animation: ssShift 7s ease-in-out infinite; }
  @keyframes ssShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
}

/* ── 8) FORMULARIOS / INPUTS (focus glow) ────────────────────────── */
input:focus, select:focus, textarea:focus, .form-group input:focus{
  box-shadow: 0 0 0 3px rgba(139,92,246,.22) !important; border-color: var(--brand-border) !important; outline:none;
}

/* ── 9) MODALES (elevación + glass) ──────────────────────────────── */
.dl-modal-form, .profile-modal, .tut-box, .tut-sheet{
  background: var(--glass-strong) !important;
  backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--shadow-lg), var(--hi) !important;
}

/* ── 10) FOCUS VISIBLE (a11y teclado) ────────────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-primary:focus-visible,
.nav-link:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--brand-strong); outline-offset: 2px; border-radius: var(--r-sm);
}

/* ── 11) TOUCH TARGETS (mobile) ──────────────────────────────────── */
@media (pointer:coarse){
  .btn, .btn-primary, .nav-link, .toggle, .user-card-btn, .role-option, .url-pill{ min-height: 44px; }
}
@media (max-width:640px){ html,body{ max-width:100%; overflow-x:hidden; } }

/* ── 12) SCROLLBAR de marca ──────────────────────────────────────── */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background: rgba(139,92,246,.30); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(139,92,246,.5); background-clip:padding-box; }
*::-webkit-scrollbar-track{ background: transparent; }

/* ── 13) entrada suave del shell ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  @keyframes ssRise{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }
}

/* ════════════════════════════════════════════════════════════════
   14) GLOW REACTIVO EN CARDS (sigue el cursor) — vía enhance.js
   Spotlight barato con variables CSS --mx/--my; solo en hover real.
   ════════════════════════════════════════════════════════════════ */
.ss-spot{ position:relative; }
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .ss-spot::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
                rgba(139,92,246,.16), rgba(79,116,255,.07) 40%, transparent 66%);
    opacity:0; transition:opacity .25s ease; z-index:0;
  }
  .ss-spot:hover::before{ opacity:1; }
  .ss-spot > *{ position:relative; z-index:1; }
}

/* ── 15) SCROLL REVEAL ───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .ss-reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
  .ss-reveal.in{ opacity:1; transform:none; }
}

/* ════════════════════════════════════════════════════════════════
   16) LOGIN v2 — experiencia reactiva de 2 paneles (vía enhance.js)
   El hero izquierdo y el orbe IA los inyecta enhance.js; acá el estilo.
   ════════════════════════════════════════════════════════════════ */
.auth-page.ss-auth-v2{ display:block; padding:0; min-height:100vh; }
.ss-auth-grid{
  min-height:100vh; display:grid; grid-template-columns: 1.05fr .95fr;
  align-items:center; gap:0;
}
.ss-auth-v2 .auth-card{
  margin: 0 auto; width:100%; max-width:440px;
  transform-style: preserve-3d; will-change: transform;
}
.ss-auth-v2 .auth-card.ss-spot::before{ z-index:0; opacity:0; }
@media (hover:hover){ .ss-auth-v2 .auth-card.ss-spot:hover::before{ opacity:1; } }

/* HERO izquierdo */
.ss-hero{
  position:relative; align-self:stretch; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:34px;
  padding: 7vh 6vw 7vh clamp(28px, 6vw, 96px);
  border-right: 1px solid rgba(255,255,255,.06);
}
.ss-hero-mesh{
  position:absolute; inset:-20%; z-index:0; pointer-events:none; will-change:transform;
  background:
    radial-gradient(46% 42% at 28% 30%, rgba(79,116,255,.45), transparent 62%),
    radial-gradient(48% 44% at 72% 38%, rgba(139,92,246,.42), transparent 62%),
    radial-gradient(50% 46% at 52% 78%, rgba(227,91,208,.34), transparent 64%);
  filter: blur(46px) saturate(1.15); opacity:.9;
  animation: ssMesh 16s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){ .ss-hero-mesh{ animation:none; } }
@keyframes ssMesh{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(2%, -3%) scale(1.08); }
}
.ss-hero > *{ position:relative; z-index:1; }

/* Orbe IA (el ojo que sigue el cursor) */
.ss-orb-wrap{ position:relative; width:220px; height:220px; perspective:900px; }
.ss-orb{
  width:220px; height:220px; display:block; will-change:transform;
  transform-style:preserve-3d; filter: drop-shadow(0 24px 60px rgba(124,92,255,.45));
  animation: ssFloat 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .ss-orb{ animation:none; } }
@keyframes ssFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }
.ss-orb-ring{ transform-origin:110px 110px; animation: ssSpin 26s linear infinite; }
.ss-orb-ring2{ transform-origin:110px 110px; animation: ssSpin 18s linear infinite reverse; }
@media (prefers-reduced-motion: reduce){ .ss-orb-ring,.ss-orb-ring2{ animation:none; } }
@keyframes ssSpin{ to{ transform: rotate(360deg); } }
.ss-orb-pupil{ transition: transform .08s linear; }
.ss-orb-shadow{
  position:absolute; left:50%; bottom:-26px; width:150px; height:26px;
  transform:translateX(-50%); border-radius:50%;
  background: radial-gradient(closest-side, rgba(124,92,255,.5), transparent 75%);
  filter: blur(9px); opacity:.6; animation: ssShadow 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .ss-orb-shadow{ animation:none; } }
@keyframes ssShadow{ 0%,100%{ transform:translateX(-50%) scale(1); opacity:.6; } 50%{ transform:translateX(-50%) scale(.84); opacity:.4; } }

/* Copy del hero */
.ss-hero-kicker{
  font-family: var(--font-mono, monospace); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--text-tertiary);
}
.ss-hero-title{
  font-family: var(--font-body, sans-serif); font-weight:800; line-height:1.06;
  font-size: clamp(30px, 3.4vw, 52px); letter-spacing:-.02em; margin:0;
  color: var(--text-primary); max-width: 14ch;
}
.ss-grad-word{
  background: var(--ss-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:180% 180%;
}
@media (prefers-reduced-motion: no-preference){
  .ss-grad-word{ animation: ssShift 8s ease-in-out infinite; }
}
.ss-hero-sub{
  color: var(--text-secondary); font-size: clamp(14px,1.1vw,17px); line-height:1.6;
  max-width: 46ch; margin:0;
}
/* Chips flotantes — en una sola fila, alineadas a la misma altura */
.ss-chips{ display:flex; flex-wrap:nowrap; gap:8px; }
.ss-chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; white-space:nowrap;
  border-radius:999px; font-size:12.5px; font-weight:600; color: var(--text-primary);
  background: linear-gradient(180deg, rgba(32,32,50,.7), rgba(20,20,32,.6));
  border: 1px solid rgba(255,255,255,.1); box-shadow: var(--hi);
  backdrop-filter: blur(8px); will-change:transform;
}
.ss-chip::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background: var(--ss-grad); box-shadow:0 0 8px rgba(139,92,246,.8);
}

/* aviso de validación del login: separarlo del bloque de arriba (rol/campos) */
.login-error:not([hidden]){ margin-top: 16px; }

/* Botón "Entrar" atenuado mientras el form no es válido (lo togglea enhance.js) */
.btn-primary.ss-btn-off{
  filter: grayscale(.45) brightness(.5) !important;
  opacity: .6 !important; box-shadow: none !important;
  animation: none !important;
}
.btn-primary.ss-btn-off:hover{
  transform: none !important; filter: grayscale(.45) brightness(.55) !important;
  box-shadow: none !important;
}

/* Responsive: una sola columna (oculta el hero en pantallas chicas) */
@media (max-width: 920px){
  .ss-auth-grid{ grid-template-columns: 1fr; }
  .ss-hero{ display:none; }
  .auth-page.ss-auth-v2{ display:grid; place-items:center; padding:24px; }
  .ss-auth-v2 .auth-card{ transform:none !important; }
}

/* ════════════════════════════════════════════════════════════════
   17) LOGO · TOPBAR · BUSCADOR (estética premium)
   ════════════════════════════════════════════════════════════════ */

/* — Logo: "AI" con el gradiente de marca nuevo + glow; lockup más prolijo — */
.sidebar .brand{ gap:11px; }
.sidebar .brand-mark{ filter: drop-shadow(0 6px 18px rgba(124,92,255,.5)); }
.sidebar .brand-name{ font-size:19px; letter-spacing:-.025em; }
/* "AI" del logo (sidebar, login, mobile): gradiente tri-color RECORTADO al texto.
   - background-IMAGE (no el shorthand, que con !important fuerza clip:border-box).
   - tamaño 100% y estático: sobre 2 letras un gradiente animado/oversize se veía
     casi de un solo color; así se nota azul→violeta→rosa de izq a der. */
.brand-name em{
  background: none !important;
  background-image: linear-gradient(95deg, #4f86ff 0%, #8b5cf6 48%, #e35bd0 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  font-weight: 900;
}
.sidebar-subtitle{ color: var(--text-tertiary) !important; letter-spacing:.14em !important; }

/* — La "raya": de línea plana a hairline con gradiente que se desvanece — */
.topbar{
  border-bottom: none !important; border-image: none !important;
  padding-bottom: 14px !important;
}

/* — Buscador: glass sólido (sin backdrop-filter → no atrapa el dropdown),
     forma de píldora, icono tintado y focus-glow de marca — */
.topbar-search{
  min-width: 290px !important; padding: 9px 15px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(30,30,46,.92), rgba(18,18,28,.92)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: var(--hi), 0 2px 10px rgba(0,0,0,.28) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.topbar-search svg{ color: var(--brand-strong) !important; opacity:.95; }
.topbar-search:hover{ border-color: rgba(255,255,255,.18) !important; }
.topbar-search:focus-within{
  border-color: rgba(139,92,246,.55) !important;
  background: linear-gradient(180deg, rgba(36,36,56,.96), rgba(22,22,34,.96)) !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.18), 0 10px 28px rgba(124,92,255,.28), var(--hi) !important;
}

/* — Chip ⌘K refinado — */
.kbd{
  background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.13) !important;
  color: var(--text-secondary) !important; border-radius: 6px !important; padding: 2px 6px !important;
  box-shadow: var(--hi) !important;
}

/* — Breadcrumb pill (url-pill) en sintonía con el buscador — */
.url-pill{
  background: linear-gradient(180deg, rgba(28,28,42,.9), rgba(18,18,28,.9)) !important;
  border: 1px solid rgba(255,255,255,.08) !important; box-shadow: var(--hi) !important;
}

/* — Botón de ayuda (?) al lado del buscador: círculo glass coherente — */
.topbar-actions .btn-icon, .topbar-actions > button:last-child{
  background: linear-gradient(180deg, rgba(28,28,42,.9), rgba(18,18,28,.9)) !important;
  border: 1px solid rgba(255,255,255,.09) !important; box-shadow: var(--hi);
}
.topbar-actions > button:last-child:hover{ border-color: rgba(139,92,246,.45) !important; }

/* ════════════════════════════════════════════════════════════════
   18) ESTADO EN VIVO / PROCESANDO — convincente (no pantalla de espera)
   Elementos .ss-wave / .ss-rec / .ss-live-* los inyecta enhance.js.
   ════════════════════════════════════════════════════════════════ */

/* punto "en vivo" con pulso glow marcado */
.lc-badge.lc-live .lc-dot{ background:#ff4d4d !important; }
@media (prefers-reduced-motion: no-preference){
  .lc-badge.lc-live .lc-dot{ animation: ssLivePulse 1.6s ease-out infinite; }
  @keyframes ssLivePulse{ 0%{ box-shadow:0 0 0 0 rgba(255,77,77,.55);} 70%{ box-shadow:0 0 0 7px rgba(255,77,77,0);} 100%{ box-shadow:0 0 0 0 rgba(255,77,77,0);} }
}

/* WAVEFORM (ecualizador) — barras que bailan = audio capturándose en vivo */
.ss-wave{ display:inline-flex; align-items:center; gap:3px; height:30px; }
.ss-wave i{ display:block; width:4px; border-radius:3px; background:var(--ss-grad); height:60%; }
@media (prefers-reduced-motion: no-preference){
  .ss-wave i{ animation: ssBar 1s ease-in-out infinite; }
  @keyframes ssBar{ 0%,100%{ transform:scaleY(.3);} 50%{ transform:scaleY(1);} }
}
.ss-wave.ss-wave-sm{ height:18px; }
.ss-wave.ss-wave-sm i{ width:3px; }

/* REC pill */
.ss-rec{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.08em; color:#ffd9d9;
  background:linear-gradient(180deg, rgba(255,77,77,.20), rgba(255,77,77,.10));
  border:1px solid rgba(255,77,77,.42); }
.ss-rec b{ width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 10px #ff4d4d; }
@media (prefers-reduced-motion: no-preference){ .ss-rec b{ animation: ssLiveDot 1.4s ease-in-out infinite; } @keyframes ssLiveDot{ 50%{opacity:.3;} } }

/* "stage" en vivo dentro de la detail card */
.ss-live-stage{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 18px;
  padding:18px 22px; margin:4px auto 2px; border-radius:18px; width:fit-content; max-width:100%;
  background:linear-gradient(180deg, rgba(26,26,40,.92), rgba(16,16,27,.92));
  border:1px solid rgba(255,255,255,.09); box-shadow:var(--hi), 0 14px 40px rgba(0,0,0,.4); }
.ss-live-timer{ font-family:var(--font-mono); font-size:24px; font-weight:700; color:var(--text-primary);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.ss-live-src{ font-size:12px; color:var(--text-tertiary); display:inline-flex; align-items:center; gap:7px; }
.ss-live-src::before{ content:""; width:7px;height:7px;border-radius:50%;background:var(--success); box-shadow:0 0 8px var(--success); }

/* ícono de captura LIVE: gradiente cálido + anillos broadcasting */
.lc-detail-live .lc-capture-icon{ position:relative; background:linear-gradient(135deg,#ff5d5d,#e35bd0)!important; color:#fff!important; border:none!important; box-shadow:0 10px 32px rgba(255,77,77,.42)!important; }
.lc-detail-live .lc-capture-icon svg{ color:#fff!important; stroke:#fff!important; }
@media (prefers-reduced-motion: no-preference){
  .lc-detail-live .lc-capture-icon::before, .lc-detail-live .lc-capture-icon::after{
    content:""; position:absolute; inset:0; border-radius:inherit; border:1.5px solid rgba(255,93,93,.55); animation: ssRing 2.6s ease-out infinite; }
  .lc-detail-live .lc-capture-icon::after{ animation-delay:1.3s; }
  @keyframes ssRing{ 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(2.5); opacity:0;} }
}

/* mini card live (dashboard): waveform en el head */
.lc-card-live .lc-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* PROCESSING: ícono con anillo girando + barra shimmer */
.lc-detail-card:not(.lc-detail-live) .lc-capture-icon{ position:relative; background:linear-gradient(135deg, var(--brand-strong), #4f74ff)!important; color:#fff!important; border:none!important; }
.lc-detail-card:not(.lc-detail-live) .lc-capture-icon svg{ color:#fff!important; stroke:#fff!important; }
@media (prefers-reduced-motion: no-preference){
  .lc-detail-card:not(.lc-detail-live) .lc-capture-icon::before{
    content:""; position:absolute; inset:-5px; border-radius:inherit; border:2px solid transparent;
    border-top-color: rgba(139,92,246,.9); border-right-color: rgba(227,91,208,.7); animation: lcSpin .9s linear infinite; }
}
.ss-proc-bar{ width:100%; max-width:360px; height:6px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.07); position:relative; margin:2px auto 0; }
.ss-proc-bar::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:40%; border-radius:999px; background:var(--ss-grad); }
@media (prefers-reduced-motion: no-preference){
  .ss-proc-bar::after{ animation: ssProc 1.6s ease-in-out infinite; }
  @keyframes ssProc{ 0%{ left:-40%;} 100%{ left:100%;} }
}

/* ── Timeline techy de PROCESANDO (nodos + línea conectora; sin el ⟳ feo) ── */
.lc-detail-proc .lc-steps{ gap:0 !important; max-width:340px; margin:10px auto 0 !important; }
.lc-detail-proc .lc-step{ position:relative; align-items:center !important; gap:12px !important; padding:6px 0; min-height:34px; }
/* línea conectora entre nodos */
.lc-detail-proc .lc-step:not(:last-child)::after{
  content:""; position:absolute; left:11px; top:30px; bottom:-4px; width:2px; border-radius:2px;
  background:rgba(255,255,255,.10); z-index:0;
}
.lc-detail-proc .lc-step-done:not(:last-child)::after{ background:linear-gradient(180deg,#8b5cf6,rgba(139,92,246,.25)); }
/* nodo (primer hijo: .icon[check] / spin / dot) → círculo 24px */
.lc-detail-proc .lc-step > .icon,
.lc-detail-proc .lc-step-spin,
.lc-detail-proc .lc-step-dot{
  width:24px !important; height:24px !important; flex:0 0 24px; box-sizing:border-box;
  border-radius:50%; display:grid !important; place-items:center; position:relative; z-index:1;
}
.lc-detail-proc .lc-step-done > .icon{ background:var(--ss-grad); box-shadow:0 2px 10px rgba(124,92,255,.45); }
.lc-detail-proc .lc-step-done > .icon svg{ width:13px !important; height:13px !important; color:#fff !important; stroke:#fff !important; }
/* activo: anillo girando con gradiente (oculta el carácter ⟳) */
.lc-detail-proc .lc-step-spin{
  color:transparent !important; font-size:0 !important; line-height:0 !important;
  border:2px solid rgba(139,92,246,.22); border-top-color:#8b5cf6; border-right-color:#e35bd0;
  box-shadow:0 0 12px rgba(139,92,246,.4); background:rgba(139,92,246,.06);
}
@media (prefers-reduced-motion: no-preference){ .lc-detail-proc .lc-step-spin{ animation:lcSpin .8s linear infinite; } }
/* pendiente: círculo hueco tenue */
.lc-detail-proc .lc-step-dot{ color:transparent !important; font-size:0 !important; border:2px solid rgba(255,255,255,.16); background:transparent; }
/* labels */
.lc-detail-proc .lc-step > span:last-child{ font-size:13.5px; }
.lc-detail-proc .lc-step-pending{ color:var(--text-dim) !important; }
.lc-detail-proc .lc-step-active > span:last-child{
  font-weight:700; background:var(--ss-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ── EN VIVO: sin redundancias. El "REC" ya indica en vivo → ocultar el badge
   superior duplicado. (El origen Google Meet queda una sola vez, en el lead.) ── */
.lc-detail-live .lc-detail-badge{ display:none !important; }

/* ════════════════════════════════════════════════════════════════
   19) PERFIL EN MOBILE — botón con avatar en la topbar mobile
   (en desktop el perfil vive en el sidebar; en mobile el sidebar se
   oculta, así que exponemos el acceso acá. Lo inyecta enhance.js.)
   ════════════════════════════════════════════════════════════════ */
.ss-mobile-profile{
  display:inline-grid; place-items:center; width:40px; height:40px; padding:0;
  border-radius:50%; border:1px solid rgba(255,255,255,.14); cursor:pointer;
  background:linear-gradient(180deg, rgba(28,28,42,.9), rgba(18,18,28,.9));
  box-shadow:var(--hi); flex-shrink:0;
}
.ss-mobile-profile .avatar{ width:30px !important; height:30px !important; font-size:11px !important; }
.ss-mobile-profile:active{ transform:scale(.94); }
@media (pointer:coarse){ .ss-mobile-profile{ width:44px; height:44px; } }

/* FIX overflow horizontal en mobile (causa de que la topbar-actions —y el perfil—
   quedaran fuera de pantalla): los grid items necesitan min-width:0 para poder
   encogerse por debajo de su min-content, y el kpi-grid debe ser 1 columna en
   celulares (si no, 2 cards lado a lado expanden .main-content más que el viewport). */
.app-shell, .main-content{ min-width: 0 !important; }
.app-shell > *{ min-width: 0; }
@media (max-width: 560px){
  .kpi-grid{ grid-template-columns: 1fr !important; }
}
/* la topbar mobile nunca se sale del viewport */
@media (max-width: 820px){
  .mobile-topbar{ max-width: 100%; }
  .mobile-top-actions{ flex: 0 0 auto; }
}

/* ════════════════════════════════════════════════════════════════
   20) CAMBIO DE PERÍODO — "carga" moderna (sweep L→R) + stagger métricas
   La animación la maneja enhance.js con la Web Animations API (fill:none),
   así NUNCA deja el gráfico oculto si la animación no llega a correr.
   ════════════════════════════════════════════════════════════════ */
.tc-chart-wrap{ position:relative; }
/* línea recta violeta que escanea L→R dibujando la evolución (overlay temporal,
   no oculta nada; enhance.js la crea y la borra al terminar). */
.ss-scan-line{
  position:absolute; top:0; bottom:0; left:0; width:2px; pointer-events:none; z-index:5;
  background: linear-gradient(180deg, transparent, #a855f7 22%, #8b5cf6 78%, transparent);
  box-shadow: 0 0 14px 2px rgba(139,92,246,.65), 0 0 5px rgba(168,85,247,.9);
  border-radius:2px;
}
/* Mismo efecto, en chico, sobre cada VALOR del panel: el texto se revela L→R
   (.ss-vtext clipeado) con una barrita violeta (.ss-vbar) que lo va dibujando. */
.tc-panel .tc-kpi-value{ position:relative; }
.ss-vtext{ display:inline-block; }
.ss-vbar{
  position:absolute; top:50%; left:0; width:2px; height:1.05em; transform:translateY(-50%);
  pointer-events:none; z-index:3; border-radius:2px;
  background: linear-gradient(180deg, transparent, #a855f7 18%, #8b5cf6 82%, transparent);
  box-shadow: 0 0 9px 1px rgba(139,92,246,.7), 0 0 3px rgba(168,85,247,.95);
}
@media (prefers-reduced-motion: reduce){ .ss-vbar{ display:none; } }

/* ── Hover del acento lateral de la carta de vendedor (Equipo) ─────────────────
   El borde de identidad ORIGINAL queda INTACTO (mismos corners redondeados, mismo
   tamaño). Solo se agrega GLOW sobre la parte RECTA del borde: un ::before sin fondo,
   inset desde arriba/abajo (lejos de las esquinas), que late con box-shadow del color
   del rep. No toca el borde ni los corners → no se arruina nada. CSS puro. */
.tm-rep-card.rep-accented{ position: relative; }
.tm-rep-card.rep-accented::before{
  content:''; position:absolute; left:-3px; top:18px; bottom:18px; width:3px;
  border-radius:2px; pointer-events:none;
}
.tm-rep-card.rep-accented:hover::before{ animation: ssRepAccentGlow 1.9s ease-in-out infinite; }
@keyframes ssRepAccentGlow{
  0%, 100% { box-shadow: 0 0 7px 1px color-mix(in srgb, var(--rep-accent), transparent 48%); }
  50%      { box-shadow: 0 0 13px 2px color-mix(in srgb, var(--rep-accent), transparent 22%); }
}
@media (prefers-reduced-motion: reduce){
  .tm-rep-card.rep-accented:hover::before{ animation:none; box-shadow: 0 0 9px 1px color-mix(in srgb, var(--rep-accent), transparent 35%); }
}

/* ── Lifecycle "Finalizar reunión": transición smooth (usa el formato nativo de la
   card de procesando: badges circulares + barra shimmer + conectores). Solo agregamos
   el fade del lead al cambiar de fase. */
.ss-lc-anim .ss-lc-lead{ transition:opacity .16s ease; }
.ss-lc-anim .ss-lc-lead.ss-fade{ opacity:0; }
.ss-lc-anim .lc-step{ transition:color .25s ease; }
.ss-lc-anim .lc-step > .icon, .ss-lc-anim .lc-step-spin, .ss-lc-anim .lc-step-dot{ transition:background .3s ease, border-color .3s ease; }

/* ════════════════════════════════════════════════════════════════
   21) MODAL de confirmación "Solo insights" (lo inyecta enhance.js)
   ════════════════════════════════════════════════════════════════ */
.ss-modal-overlay{
  position:fixed; inset:0; z-index:4000; display:grid; place-items:center; padding:24px;
  background:rgba(6,6,12,.66); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation: ssFadeIn .18s ease both;
}
@keyframes ssFadeIn{ from{opacity:0} to{opacity:1} }
.ss-modal{
  position:relative; width:100%; max-width:560px; max-height:92vh; overflow:auto;
  background:linear-gradient(180deg, rgba(32,32,50,.96), rgba(20,20,32,.97));
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  box-shadow:var(--shadow-lg), var(--hi); padding:20px 22px;
  animation: ssModalIn .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ssModalIn{ from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }
.ss-modal-x{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--text-secondary);
  font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.ss-modal-x:hover{ color:var(--text-primary); border-color:var(--brand-border); }
.ss-modal-head{ display:flex; gap:13px; align-items:flex-start; margin:2px 30px 12px 0; }
.ss-modal-icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--ss-grad); color:#fff; font-size:19px; box-shadow:0 6px 20px rgba(124,92,255,.4);
}
.ss-modal-head h2{ font-size:18px; font-weight:800; letter-spacing:-.01em; margin:0 0 4px; color:var(--text-primary); }
.ss-modal-head p{ font-size:12.5px; line-height:1.5; color:var(--text-secondary); margin:0; }

.ss-si-section-title{ font-size:12.5px; color:var(--text-secondary); margin:4px 0 8px; }
.ss-si-list{ display:flex; flex-direction:column; gap:6px; }
.ss-si-group{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--text-tertiary); margin:6px 2px 1px; }
.ss-si-group:first-child{ margin-top:0; }
.ss-si-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:8px 12px; border-radius:11px;
  background:linear-gradient(180deg, rgba(24,24,38,.9), rgba(16,16,27,.9));
  border:1px solid rgba(255,255,255,.08);
}
.ss-si-item-info{ min-width:0; }
.ss-si-item-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:650; color:var(--text-primary); }
.ss-si-item-sub{ font-size:11px; color:var(--text-tertiary); margin-top:2px; }
.ss-si-badge{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:999px; }
.ss-si-badge.live{ color:#ffb4b4; background:rgba(255,77,77,.16); border:1px solid rgba(255,77,77,.4); }
.ss-si-badge.proc{ color:#9ec5ff; background:rgba(96,165,250,.16); border:1px solid rgba(96,165,250,.35); }
.ss-si-dot{ width:6px; height:6px; border-radius:50%; background:#ff4d4d; }
@media (prefers-reduced-motion:no-preference){ .ss-si-dot{ animation:ssLiveDot 1.4s ease-in-out infinite; } }

.ss-si-switchwrap{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.ss-si-opt{ font-size:11px; color:var(--text-dim); transition:color .15s; }
.ss-si-toggle{
  position:relative; width:44px; height:24px; border-radius:999px; flex:0 0 auto; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); transition:background .18s;
}
.ss-si-knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .18s cubic-bezier(.2,.8,.2,1); box-shadow:0 1px 4px rgba(0,0,0,.4); }
.ss-si-toggle.on{ background:var(--ss-grad); border-color:transparent; }
.ss-si-toggle.on .ss-si-knob{ left:24px; }
.ss-si-toggle.on ~ .on-label{ color:var(--text-secondary); }
.ss-si-switchwrap .on-label{ color:var(--text-dim); }
.ss-si-toggle.on + .on-label{ color:var(--text-primary); font-weight:600; }

.ss-si-empty{
  font-size:13px; color:var(--text-secondary); padding:14px; border-radius:12px;
  background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2);
}
.ss-si-note{ font-size:11px; line-height:1.45; color:var(--text-tertiary); margin:10px 0 0; padding:8px 11px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
/* acciones del modal: ambos botones alineados (mismo alto), a la derecha.
   Neutraliza el width:100% + margin-top:24px que .btn-primary trae para el login. */
.ss-modal-actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:16px; }
.ss-modal-actions .btn{ width:auto !important; margin:0 !important; min-width:104px; padding:11px 18px !important; }
.ss-modal-actions .ss-si-cancel{
  background:rgba(255,255,255,.06) !important; color:var(--text-secondary) !important;
  border:1px solid rgba(255,255,255,.14) !important; box-shadow:none !important;
}
.ss-modal-actions .ss-si-cancel:hover{ color:var(--text-primary) !important; border-color:var(--brand-border) !important; }
/* botón de confirmación peligroso (rojo) para acciones sensibles */
.ss-modal-icon.danger{ background:linear-gradient(135deg,#ff5d5d,#e35bd0) !important; box-shadow:0 6px 20px rgba(255,77,77,.4) !important; }
.ss-modal-actions .ss-btn-danger{
  background:linear-gradient(135deg,#ff5468,#e0457a) !important; color:#fff !important; border:none !important;
  box-shadow:0 8px 24px rgba(255,77,77,.34) !important;
}
.ss-modal-actions .ss-btn-danger:hover{ filter:brightness(1.06); }

@media (max-width:560px){
  .ss-si-item{ flex-direction:column; align-items:stretch; }
  .ss-si-switchwrap{ justify-content:space-between; }
}

/* FIX mobile: cards de "Documentos de referencia" — el nombre se partía palabra
   por palabra (el badge + botón − apretaban el .ai-doc-info). En mobile las paso
   a grid: fila 1 = logo · nombre · −, fila 2 = badge "Activo para análisis" solo. */
@media (max-width: 600px){
  .ai-doc-row{
    display:grid !important;
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-areas: "logo info del" "badge badge badge";
    align-items:center; column-gap:11px; row-gap:6px;
  }
  .ai-doc-logo{ grid-area:logo; }
  .ai-doc-info{ grid-area:info; min-width:0; }
  .ai-doc-delete{ grid-area:del; }
  .ai-doc-row > .badge{ grid-area:badge; justify-self:start; }
  .ai-doc-meta{ white-space:normal; }  /* el detalle wrappea, no desborda */
}

/* ════════════════════════════════════════════════════════════════
   22) PLAYBOOK — excedente >100% en rojo titilante sobre la barra del criterio
   (overlay que inyecta enhance.js solo en el tramo que se pasa del 100%)
   ════════════════════════════════════════════════════════════════ */
.crit-bar{ position:relative; overflow:hidden; }
.ss-excess-overlay{
  position:absolute; top:0; bottom:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:#ff3b4e; box-shadow:0 0 8px rgba(255,59,78,.7);
}
@media (prefers-reduced-motion: no-preference){
  .ss-excess-overlay{ animation: ssExcessBlink .65s ease-in-out infinite; }
  @keyframes ssExcessBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
}

/* ════════════════════════════════════════════════════════════════
   25) DROPDOWN custom de reps con dot de color (reemplaza select nativo)
   ════════════════════════════════════════════════════════════════ */
.ss-select{ position:relative; display:inline-block; }
.ss-select-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 12px; border-radius:999px; font-size:13px; font-weight:600; color:var(--text-secondary);
  background:linear-gradient(180deg, rgba(28,28,42,.9), rgba(18,18,28,.9));
  border:1px solid rgba(255,255,255,.10); box-shadow:var(--hi);
  transition:border-color .15s, color .15s;
}
.ss-select-btn:hover{ border-color:rgba(139,92,246,.45); color:var(--text-primary); }
.ss-select-chev{ font-size:11px; opacity:.7; margin-left:2px; }
.ss-select-dot{
  width:11px; height:11px; flex:0 0 11px; border-radius:50%; align-self:center;
  box-shadow: inset 1.2px 1.2px 1.8px rgba(255,255,255,.55), inset -1px -1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.45);
}
.ss-select-dot-all{ background:conic-gradient(#4f74ff,#8b5cf6,#e35bd0,#4f74ff); } /* "Todos" = multicolor */
.ss-select-label{ white-space:nowrap; }
.ss-select-menu{
  position:fixed; min-width:200px; max-height:320px; overflow-y:auto;   /* fixed → escapa stacking */
  background:#191926; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px;
  box-shadow:var(--shadow-lg), var(--hi); z-index:1000;
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.ss-select-menu.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.ss-select-opt{
  display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; text-align:left;
  padding:8px 10px; border-radius:8px; font-size:13px; color:var(--text-secondary); background:transparent; border:none;
}
.ss-select-opt:hover{ background:rgba(139,92,246,.14); color:var(--text-primary); }
.ss-select-opt.sel{ background:rgba(139,92,246,.10); color:var(--text-primary); font-weight:600; }
.ss-select-opt > span:not(.ss-select-dot){ flex:1; white-space:nowrap; } /* el nombre crece; el dot NO */
.ss-select-opt .ss-select-dot{ flex:0 0 11px; } /* refuerzo: el dot queda esfera, no se estira */
/* dropdown de rep en la barra de filtros de Deals: separado a la derecha */
.rv-filters{ flex-wrap:wrap; }
.rv-filters .ss-deal-rep{ margin-left:auto; }

/* ════════════════════════════════════════════════════════════════
   24) POPOVER en KPI "En riesgo" / "Actualizaciones CRM" (hover → deals)
   Inyectado por enhance.js como hijo de la card (no de .kpi-value, así
   no hereda el text-fill transparent del número).
   ════════════════════════════════════════════════════════════════ */
.ss-kpi-pop-host{ position:relative; }
.ss-kpi-pop-host:hover{ z-index:50; }
.ss-kpi-pop{
  position:absolute !important; top:calc(100% + 6px); right:0; width:300px; max-width:88vw;
  background-color:#191926;
  background-image:linear-gradient(180deg, #1f1f30, #14141f);
  border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:13px 14px;
  box-shadow:var(--shadow-lg), var(--hi); z-index:400 !important;
  opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.ss-kpi-pop::before{ content:""; position:absolute; top:-8px; left:0; right:0; height:8px; } /* puente para el gap */
.ss-kpi-pop-host:hover .ss-kpi-pop{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.ss-kpi-pop, .ss-kpi-pop *{ -webkit-text-fill-color: currentColor !important; }
.ss-kpi-pop-title{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-strong); margin-bottom:9px; }
.ss-kpi-pop-list{ display:flex; flex-direction:column; gap:9px; }
.ss-kpi-pop-row{ display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; }
.ss-kpi-pop-name{ font-size:13px; font-weight:650; color:var(--text-primary); min-width:0; }
.ss-kpi-pop-reason{ grid-column:1 / -1; font-size:11px; color:var(--text-tertiary); line-height:1.35; }
.ss-kpi-pop-tag{ grid-row:1; grid-column:2; justify-self:end; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.ss-kpi-pop-tag.danger{ color:#ffb4b4; background:rgba(255,77,77,.16); border:1px solid rgba(255,77,77,.4); }
.ss-kpi-pop-tag.warning{ color:#fbd38d; background:rgba(251,191,36,.14); border:1px solid rgba(251,191,36,.35); }
.ss-kpi-pop-empty{ font-size:12px; color:var(--text-tertiary); }
.ss-kpi-pop-wide{ width:330px; }
/* fila de total exacto del Pipeline activo */
.ss-kpi-pop-exact{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:2px; }
.ss-kpi-pop-exact span{ font-size:12px; color:var(--text-secondary); }
.ss-kpi-pop-exact strong{ font-family:var(--font-mono); font-size:15px; color:var(--text-primary); }
.ss-kpi-pop-divider{ height:1px; background:rgba(255,255,255,.10); margin:11px 0; }
/* el popover ORIGINAL del chip ✦IA se reemplaza por el dropdown unificado de la card */
.ai-review-chip .ai-review-popover{ display:none !important; }
/* el CLON dentro del dropdown: sin chrome de popover (queda como bloque embebido) */
.ss-kpi-pop .ai-review-popover.ss-ai-clone{
  position:static !important; display:block !important; opacity:1 !important; visibility:visible !important;
  transform:none !important; box-shadow:none !important; border:none !important; background:none !important;
  padding:0 !important; margin:0 !important; width:auto !important; left:auto !important; top:auto !important;
  min-width:0 !important; max-width:none !important;
}

/* ════════════════════════════════════════════════════════════════
   23) "IA" en tooltips de tutorial: color SalesAId + ícono ✦ elevado (IA^✦)
   ════════════════════════════════════════════════════════════════ */
.ss-ia{
  font-weight:800;
  background:linear-gradient(95deg,#4f86ff 0%,#8b5cf6 50%,#e35bd0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.ss-ia-ico{
  font-size:.62em; vertical-align:super; margin-left:1px; line-height:0; font-style:normal;
  background:linear-gradient(95deg,#4f86ff 0%,#8b5cf6 50%,#e35bd0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ════════════════════════════════════════════════════════════════
   26) Cards de Fortalezas / Áreas de mejora: borde leve del color de la
   etiqueta + alumbración interna muy sutil. (Las clases las pone enhance.js
   según el título del card.)
   ════════════════════════════════════════════════════════════════ */
.card.ss-strength-card{
  border-color: rgba(52,211,153,.32) !important;
  box-shadow: inset 0 0 22px -6px rgba(52,211,153,.18), var(--shadow-md), var(--hi) !important;
}
.card.ss-area-card{
  border-color: rgba(248,113,113,.30) !important;
  box-shadow: inset 0 0 22px -6px rgba(248,113,113,.16), var(--shadow-md), var(--hi) !important;
}

/* ════════════════════════════════════════════════════════════════
   27) Revisión IA — talk-ratio (vendedor vs cliente) en la card "vs".
   Roles bajo los nombres + barra de % de charla. Lo inyecta enhance.js
   con datos reales del transcript.
   ════════════════════════════════════════════════════════════════ */
.rv-player-card .rv-screen{ flex-wrap:wrap; padding:46px 20px 24px; align-content:center; }
.ss-prole{ font-size:11.5px; color:var(--text-tertiary); margin-top:1px; }
.ss-talk{ flex:0 0 100%; width:100%; margin-top:4px; }
.ss-talk-labels{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; margin-bottom:7px; }
.ss-talk-cli{ color:#a78bfa; }
.ss-talk-bar{ display:flex; height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.07); }
.ss-talk-bar > span{ display:block; height:100%; }
/* label "Transcript" entre la card del meeting y las líneas, gap reducido */
.rv-player-card .rv-screen{ margin-bottom:10px !important; }
.ss-tx-label{ font-size:13px; font-weight:700; color:var(--text-secondary); letter-spacing:.01em; margin:0 4px 1px; }
.rv-player-card .rv-caption-widget{ margin-top:0 !important; padding-top:0 !important; }
.rv-player-card .rv-caption-widget .rv-cap-line:first-child{ padding-top:2px; }

/* ════════════════════════════════════════════════════════════════
   28) Revisión IA — scrubber vertical para deslizar rápido por la
   reunión. Mapea su posición a un tiempo y reusa rvSeekByClick:
   el transcript y el fill del video se actualizan en tiempo real.
   ════════════════════════════════════════════════════════════════ */
.rv-player-card{ position:relative; }
.rv-player-card .rv-caption-widget{ padding-right:24px !important; }
.ss-scrub{
  position:absolute; right:5px; width:16px; z-index:5;
  cursor:pointer; touch-action:none; -webkit-user-select:none; user-select:none;
}
.ss-scrub::before{
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:5px; border-radius:999px; background:rgba(255,255,255,.09);
}
.ss-scrub-fill{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:5px; height:0; border-radius:999px;
  background:linear-gradient(180deg,#4f74ff,#a855f7,#e35bd0);
  box-shadow:0 0 8px -1px rgba(124,92,246,.5);
}
.ss-scrub-thumb{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #d4dbff 42%, #8b5cf6 100%);
  box-shadow:0 0 0 3px rgba(139,92,246,.18), 0 2px 8px rgba(0,0,0,.45);
  cursor:grab; transition:box-shadow .15s, transform .08s;
}
.ss-scrub:hover .ss-scrub-thumb{ box-shadow:0 0 0 5px rgba(139,92,246,.24), 0 2px 12px rgba(0,0,0,.5); }
.ss-scrub.is-drag .ss-scrub-thumb{ cursor:grabbing; transform:translate(-50%,-50%) scale(1.18); }
.ss-scrub-tip{
  position:absolute; right:22px; transform:translateY(-50%);
  background:rgba(18,20,38,.96); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:3px 7px; border-radius:6px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .12s; box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.ss-scrub.is-drag .ss-scrub-tip{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .ss-scrub-thumb{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════
   29) Revisión IA — nota del manager INLINE (reemplaza el modal con
   fondo negro). Al tocar "+ Agregar nota del manager" se despliega
   un campo en el lugar, full-width, sin overlay ni scroll.
   ════════════════════════════════════════════════════════════════ */
.ss-note-inline{
  border:1px solid rgba(124,92,246,.35);
  border-radius:14px; padding:16px 18px; margin-top:2px;
  background:linear-gradient(180deg, rgba(124,92,246,.08), rgba(255,255,255,.02));
  box-shadow:inset 0 0 24px -10px rgba(124,92,246,.4);
  animation:ssNoteIn .18s ease both;
}
@keyframes ssNoteIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.ss-note-inline .ss-note-hdr{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.ss-note-inline .ss-note-hdr strong{ font-size:14.5px; font-weight:800; }
.ss-note-inline .ss-note-time{ font-size:12px; color:var(--text-tertiary); white-space:nowrap; }
.ss-note-inline .ss-note-grid{
  display:grid; grid-template-columns:210px 1fr; gap:14px; align-items:start;
}
.ss-note-inline label{
  display:flex; flex-direction:column; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary);
}
.ss-note-inline select,
.ss-note-inline textarea{
  width:100%; box-sizing:border-box;
  background:rgba(10,12,24,.6); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:10px 12px;
  color:var(--text-primary); font-family:inherit; font-size:13.5px; font-weight:500;
  transition:border-color .15s, box-shadow .15s;
}
.ss-note-inline textarea{ min-height:76px; resize:vertical; line-height:1.5; }
.ss-note-inline select:focus,
.ss-note-inline textarea:focus{
  outline:none; border-color:rgba(124,92,246,.7);
  box-shadow:0 0 0 3px rgba(124,92,246,.2);
}
.ss-note-inline textarea.ss-note-err{ border-color:rgba(248,113,113,.8); box-shadow:0 0 0 3px rgba(248,113,113,.18); }
.ss-note-inline .ss-note-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
@media (max-width:640px){
  .ss-note-inline .ss-note-grid{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════
   30) Playbook — historial de versiones como dropdown animado (en vez
   del re-render completo). Lo inyecta enhance.js en su lugar.
   ════════════════════════════════════════════════════════════════ */
.ss-pb-history{ margin:14px 0 0; will-change:max-height, opacity; }

/* ════════════════════════════════════════════════════════════════
   31) Settings — badge "Pendiente": el dot único (pulso tipo "En vivo")
   se reemplaza por 3 puntitos que saltan en secuencia (loader de espera).
   Los <i> los inyecta enhance.js; el color sale del badge (currentColor).
   ════════════════════════════════════════════════════════════════ */
.integration-badge.pending .pulse-dot.ss-loading-dots{
  width:auto !important; height:auto !important;
  background:none !important; box-shadow:none !important;
  border-radius:0 !important; animation:none !important;
  display:inline-flex; align-items:center; gap:3px;
}
.integration-badge.pending .pulse-dot.ss-loading-dots i{
  width:4px; height:4px; border-radius:50%; background:currentColor;
  display:block; opacity:.4;
  animation: ssWaitDots 1.15s ease-in-out infinite;
}
.integration-badge.pending .pulse-dot.ss-loading-dots i:nth-child(2){ animation-delay:.16s; }
.integration-badge.pending .pulse-dot.ss-loading-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes ssWaitDots{
  0%, 64%, 100%{ transform:translateY(0); opacity:.4; }
  32%{ transform:translateY(-4px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .integration-badge.pending .pulse-dot.ss-loading-dots i{ animation:none; opacity:.75; }
}

/* ════════════════════════════════════════════════════════════════
   32) Reuniones — fila de KPIs de triage arriba de la lista. Reusa las
   clases .kpi-grid/.kpi-card del app; solo espaciado + las 3 clickeables.
   ════════════════════════════════════════════════════════════════ */
.ss-mt-kpis{ margin:0 0 22px; }
.ss-mt-kpi[role="button"]{ transition:transform .14s ease, border-color .18s ease; }
.ss-mt-kpi[role="button"]:hover{ transform:translateY(-2px); }
.ss-mt-kpi[role="button"]:focus-visible{ outline:2px solid rgba(124,92,246,.7); outline-offset:2px; }

/* ════════════════════════════════════════════════════════════════
   33) Revisión IA — "hablante activo" mientras se reproduce. enhance.js
   pone .ss-playing en la card y .ss-speaking + --ss-spk (color del que
   habla) en el participante; acá el glow pulsante + barritas + atenuado.
   ════════════════════════════════════════════════════════════════ */
.rv-participant{ transition:opacity .28s ease; }
.rv-participant .rv-av{ transition:box-shadow .25s ease; }
.ss-playing .rv-participant:not(.ss-speaking){ opacity:.4; }
.ss-playing .rv-participant:not(.ss-speaking) .rv-av{ box-shadow:none; }
.ss-playing .rv-participant.ss-speaking .rv-av{ animation:ssSpkGlow 1.5s ease-in-out infinite; }
@keyframes ssSpkGlow{
  0%,100%{ box-shadow:0 0 0 2px var(--ss-spk,#a855f7), 0 0 20px -4px var(--ss-spk,#a855f7); }
  50%{     box-shadow:0 0 0 3px var(--ss-spk,#a855f7), 0 0 34px 0   var(--ss-spk,#a855f7); }
}
.ss-sndbars{
  position:absolute; left:50%; transform:translateX(-50%); display:none;
  align-items:flex-end; gap:2.5px; height:13px; pointer-events:none; z-index:3;
}
.ss-playing .rv-participant.ss-speaking .ss-sndbars{ display:flex; }
.ss-sndbars i{
  display:block; width:3px; height:13px; border-radius:2px;
  background:var(--ss-spk,#a855f7); transform-origin:bottom;
  animation:ssSpkBar .85s ease-in-out infinite;
}
.ss-sndbars i:nth-child(2){ animation-delay:.12s; }
.ss-sndbars i:nth-child(3){ animation-delay:.24s; }
.ss-sndbars i:nth-child(4){ animation-delay:.36s; }
@keyframes ssSpkBar{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){
  .ss-playing .rv-participant.ss-speaking .rv-av{ animation:none; box-shadow:0 0 0 2px var(--ss-spk,#a855f7); }
  .ss-sndbars i{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════
   34) rep-detail — tooltip del gráfico de evolución: al pasar el mouse
   por una barra muestra de qué reunión fue ese puntaje (nombre, fecha,
   score). Lo posiciona enhance.js.
   ════════════════════════════════════════════════════════════════ */
.ss-evo-col{ cursor:default; }
.ss-evo-col .ss-evo-bar{ transition:filter .15s ease, transform .15s ease; }
.ss-evo-col:hover .ss-evo-bar{ filter:brightness(1.16); }
.ss-evo-tip{
  position:absolute; display:none; z-index:6; transform:translateX(-50%);
  width:max-content; max-width:240px;
  background:rgba(14,16,32,.97); border:1px solid rgba(124,92,246,.4);
  border-radius:9px; padding:7px 10px; pointer-events:none; white-space:nowrap;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.6);
}
.ss-evo-tip .t1{ font-size:12px; font-weight:700; color:#f3f4fb; }
.ss-evo-tip .t2{ font-size:11px; color:#9aa0b8; margin-top:2px; }

/* ── Sección 35 · Pipeline por vendedor — gráfico mariposa (ganado ◄ │ ► activo) ── */
.ss-bf-card{ margin-top:18px; position:relative; }
.ss-bf-legend{ display:flex; justify-content:center; gap:22px; margin:12px 0 14px; font-size:12px; color:var(--text-secondary); }
.ss-bf-legend > span{ display:flex; align-items:center; gap:6px; }
.ss-bf-chip{ width:11px; height:11px; border-radius:3px; display:inline-block; box-sizing:border-box; }
.ss-bf-chip-won{ background:#b9bdd0; }
.ss-bf-chip-act{ background:transparent; border:1.5px solid #b9bdd0; }
.ss-bf-chip-sec{ background:repeating-linear-gradient(45deg,#b9bdd0,#b9bdd0 2px,transparent 2px,transparent 4px); border-radius:2px; }
.ss-bf-axis{
  display:flex; justify-content:space-between;
  font-size:10.5px; color:var(--text-tertiary); letter-spacing:.04em;
  margin-bottom:6px; padding:0 4px;
}
.ss-bf-list{ position:relative; display:flex; flex-direction:column; gap:1px; }
.ss-bf-row{
  display:grid; grid-template-columns:80px 1fr 100px 1fr 80px;
  align-items:center; padding:7px 0; border-radius:8px;
  transition:background .13s;
}
.ss-bf-row:hover{ background:var(--bg-surface-2); }
.ss-bf-amt{ display:flex; flex-direction:column; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-tertiary); line-height:1.2; }
.ss-bf-amt-l{ text-align:right; padding-right:10px; align-items:flex-end; }
.ss-bf-amt-r{ text-align:left; padding-left:10px; align-items:flex-start; }
.ss-bf-amt-sec{ font-size:9.5px; font-weight:600; color:var(--text-tertiary); opacity:.85; margin-top:1px; }
.ss-bf-track{ display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:24px; min-height:24px; }
.ss-bf-track-l{ align-items:flex-end; }
.ss-bf-track-r{ align-items:flex-start; }
.ss-bf-bar{ height:14px; box-sizing:border-box; }
.ss-bf-won{ border-radius:4px 0 0 4px; }
.ss-bf-act{ border-radius:0 4px 4px 0; border:1.5px solid; }
.ss-bf-sub{ height:6px; border-radius:3px; opacity:.92; }
.ss-bf-name{
  text-align:center; font-size:13px; font-weight:600; color:var(--text-primary);
  border-left:1px solid rgba(255,255,255,.12); border-right:1px solid rgba(255,255,255,.12);
  padding:0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-bf-tip{
  position:absolute; display:none; z-index:7;
  width:max-content; max-width:260px;
  background:rgba(14,16,32,.97); border:1px solid rgba(124,92,246,.4);
  border-radius:9px; padding:8px 11px; pointer-events:none;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.6);
}
.ss-bf-tip-name{ font-size:12.5px; font-weight:700; color:#f3f4fb; margin-bottom:3px; }
.ss-bf-tip-line{ font-size:11.5px; color:#c2c6da; margin-top:1px; }
.ss-bf-tip-line b{ font-weight:700; }
.ss-bf-tip-risk{ font-size:11px; color:#f0997b; margin-top:3px; }
.ss-bf-tip-sec{ font-size:10.5px; font-weight:700; color:#9aa0b8; margin-top:5px; letter-spacing:.02em; }

/* ── Sección 36 · Tooltips explicativos (ⓘ) ─────────────────────────────────── */
.ss-tipi{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:6px; vertical-align:middle;
  color:var(--text-tertiary); cursor:help; opacity:.65; outline:none;
  transition:opacity .12s, color .12s; flex:0 0 auto;
}
.ss-tipi:hover, .ss-tipi:focus-visible{ opacity:1; color:#b9a6f5; }
.ss-tipi:focus-visible{ box-shadow:0 0 0 2px rgba(124,92,246,.5); border-radius:50%; }
.ss-tipi svg{ width:14px; height:14px; display:block; }
#ss-gtip{
  position:fixed; display:none; z-index:9999;
  width:max-content; max-width:280px;
  background:rgba(14,16,32,.98); border:1px solid rgba(124,92,246,.45);
  border-radius:9px; padding:8px 11px;
  font-size:12px; line-height:1.45; color:#e7e9f3; font-weight:400;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.65); pointer-events:none;
}

/* ── Sección 37 · Explicación extra del modal "Cargar escenario demo completo" ── */
.ss-demo-note{
  margin-top:10px; padding:10px 12px;
  background:rgba(124,92,246,.10); border:1px solid rgba(124,92,246,.30);
  border-radius:9px; font-size:12.5px; line-height:1.5; color:var(--text-secondary);
}
.ss-demo-note strong{ color:var(--text-primary); font-weight:600; }

/* ── Sección 38 · Dropdown "Ordenar por" (Deals / Reuniones) ─────────────────── */
.ss-sort{ position:relative; display:inline-flex; align-items:center; margin:0 auto 0 12px; }
.card-header .ss-sort .ss-sort-menu{ top:calc(100% + 7px); }
/* El menú abierto se solapa con la fila de filtros nativa (.rv-filters / etc.), que
   también está a z-index:1 y se pinta DESPUÉS por orden de DOM → tapaba el menú.
   Elevamos el contexto del .card-header (y de la propia .ss-sort) mientras está
   abierto, así el menú queda al frente de todo. Se revierte solo al cerrar. */
.card-header:has(.ss-sort.open){ z-index:60; }
.ss-sort.open{ z-index:60; }
.ss-sort-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:9px; cursor:pointer;
  background:var(--bg-surface-2, rgba(255,255,255,.04)); color:var(--text-secondary);
  border:1px solid rgba(255,255,255,.10); font-size:12.5px; font-family:inherit;
  transition:border-color .12s, color .12s;
}
.ss-sort-btn:hover{ color:var(--text-primary); border-color:rgba(124,92,246,.4); }
.ss-sort-btn b{ color:var(--text-primary); font-weight:600; }
.ss-sort-chev{ width:14px; height:14px; opacity:.7; transition:transform .15s; }
.ss-sort.open .ss-sort-chev{ transform:rotate(180deg); }
.ss-sort-menu{
  position:absolute; top:calc(100% + 5px); left:0; z-index:50; display:none;
  min-width:200px; padding:5px;
  background:rgba(16,18,30,.99); border:1px solid rgba(124,92,246,.30);
  border-radius:11px; box-shadow:0 14px 32px -8px rgba(0,0,0,.7);
}
.ss-sort.open .ss-sort-menu{ display:block; }
.ss-sort-opt{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  background:transparent; border:none; color:var(--text-secondary);
  font-size:13px; font-family:inherit; transition:background .1s, color .1s;
}
.ss-sort-opt:hover{ background:var(--bg-surface-2, rgba(255,255,255,.05)); color:var(--text-primary); }
.ss-sort-opt.active{ color:var(--text-primary); background:rgba(124,92,246,.14); }
.ss-sort-ic{ display:inline-flex; width:15px; height:15px; color:var(--text-tertiary); flex:0 0 auto; }
.ss-sort-ic svg{ width:15px; height:15px; }
.ss-sort-ic.good{ color:#84cc16; }
.ss-sort-ic.bad{ color:#f87171; }

/* ── Evidencia trazable en "Próximos pasos detectados" (capa enhance) ───────────
   Cita textual real + salto a la reunión, alineado con la evidencia de las
   sugerencias de monto. Se inyecta dentro del .crm-step (columna izquierda). */
.crm-step:has(.ss-step-ev){ align-items:flex-start; }   /* solo los steps enriquecidos crecen en alto → top-align (no toca los demás) */
.ss-step-ev{ margin-top:8px; display:flex; flex-direction:column; gap:7px; }
.ss-step-quote{
  display:flex; align-items:flex-start; gap:6px;
  font-size:12px; line-height:1.45; color:var(--text-secondary, #b9bdce);
  font-style:italic;
}
.ss-step-quote svg{ width:13px; height:13px; flex:0 0 auto; margin-top:2px; opacity:.65; color:#a78bfa; }
.ss-step-jump{
  width:fit-content; display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; font-size:12px; font-weight:600; cursor:pointer;
  color:#c4b5fd; background:rgba(124,92,246,.10);
  border:1px solid rgba(124,92,246,.32); border-radius:8px;
  transition:background .15s, border-color .15s, color .15s;
}
.ss-step-jump:hover{ background:rgba(124,92,246,.18); border-color:rgba(124,92,246,.55); color:#ddd6fe; }
.ss-step-jump svg{ width:13px; height:13px; }
@media (max-width:680px){
  .ss-bf-row{ grid-template-columns:66px 1fr 80px 1fr 66px; }
  .ss-bf-amt{ font-size:11.5px; }
  .ss-bf-name{ font-size:12px; }
}

/* ── Evolución del prototipo: entrada sidebar + modal timeline ── */
.nav-link.ss-proto-link{ margin-top:6px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); opacity:.82; }
.nav-link.ss-proto-link:hover{ opacity:1; }
.nav-link.ss-proto-link .icon svg{ opacity:.9; }

.ss-pv-overlay{
  position:fixed; inset:0; z-index:4200; display:grid; place-items:center; padding:24px;
  background:rgba(6,6,12,.66); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:0; transition:opacity .22s ease;
}
.ss-pv-overlay.ss-pv-in{ opacity:1; }
.ss-pv-modal{
  width:100%; max-width:680px; border-radius:20px; padding:22px 22px 18px;
  background:var(--glass-strong); border:var(--hair); box-shadow:var(--shadow-lg), var(--hi);
  transform:translateY(14px) scale(.985); opacity:.6; transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .26s ease;
}
.ss-pv-overlay.ss-pv-in .ss-pv-modal{ transform:none; opacity:1; }

.ss-pv-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ss-pv-head-l{ display:flex; align-items:center; gap:11px; }
.ss-pv-badge{
  width:36px; height:36px; border-radius:10px; flex-shrink:0; display:grid; place-items:center;
  background:var(--ss-grad); color:#fff; box-shadow:0 6px 18px rgba(139,92,246,.4);
}
.ss-pv-head h2{ margin:0; font-size:18px; font-weight:650; letter-spacing:-.01em; }
.ss-pv-head p{ margin:1px 0 0; font-size:12.5px; color:var(--text-tertiary); }
.ss-pv-modal .dl-edit-close{
  background:transparent; border:none; color:var(--text-tertiary); cursor:pointer; padding:4px;
  border-radius:8px; line-height:0; transition:color .15s, background .15s;
}
.ss-pv-modal .dl-edit-close:hover{ color:#fff; background:rgba(255,255,255,.08); }

.ss-pv-track{ display:flex; align-items:stretch; gap:0; margin-top:20px; }
.ss-pv-conn{
  flex:0 0 22px; align-self:center; height:2px; margin:0 2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(139,92,246,.25), rgba(227,91,208,.55)); position:relative; overflow:hidden;
}
.ss-pv-conn::after{
  content:""; position:absolute; inset:0; width:40%; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation:ssPvFlow 2.4s ease-in-out infinite;
}
@keyframes ssPvFlow{ 0%{transform:translateX(-120%)} 60%,100%{transform:translateX(320%)} }

.ss-pv-card{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; text-decoration:none;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:14px;
  padding:13px 13px 12px; color:inherit; transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, box-shadow .2s;
}
a.ss-pv-card:hover{
  transform:translateY(-4px); background:rgba(255,255,255,.06);
  border-color:rgba(139,92,246,.5); box-shadow:0 14px 30px rgba(0,0,0,.4);
}
.ss-pv-top{ display:flex; align-items:center; justify-content:space-between; min-height:20px; }
.ss-pv-n{ font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--text-dim); }
.ss-pv-name{ font-size:15px; font-weight:650; margin:5px 0 3px; letter-spacing:-.01em; }
.ss-pv-desc{ font-size:12px; color:var(--text-tertiary); line-height:1.45; margin:0 0 11px; }
.ss-pv-stage{ display:flex; align-items:center; gap:6px; font-size:11px; color:#b6a7e6; margin:0 0 11px; opacity:.95; }
.ss-pv-stage svg{ flex:0 0 12px; opacity:.85; }
.ss-pv-current .ss-pv-stage{ color:#cbb8ff; }
.ss-pv-foot{ margin-top:auto; }
.ss-pv-tag{ font-size:11px; color:var(--text-dim); margin-bottom:9px; }
.ss-pv-cta{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:6px 11px; border-radius:9px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#fff; transition:background .15s, border-color .15s;
}
a.ss-pv-card:hover .ss-pv-cta{ background:var(--ss-grad); border-color:transparent; }

.ss-pv-current{ background:var(--ss-grad-soft); border-color:rgba(139,92,246,.55); }
.ss-pv-here{
  font-size:10px; font-weight:700; letter-spacing:.02em; padding:2px 8px; border-radius:7px;
  background:var(--ss-grad); color:#fff;
}
.ss-pv-explore{ font-size:11.5px; font-weight:600; color:#cbb8ff; }

.ss-pv-note{ margin:16px 0 2px; text-align:center; font-size:11px; color:var(--text-dim); }

@media (max-width:560px){
  .ss-pv-track{ flex-direction:column; gap:0; }
  .ss-pv-conn{ flex:0 0 18px; width:2px; height:18px; align-self:center; margin:2px 0;
    background:linear-gradient(180deg, rgba(139,92,246,.25), rgba(227,91,208,.55)); }
  .ss-pv-conn::after{ width:100%; height:40%; animation:ssPvFlowV 2.4s ease-in-out infinite;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.85), transparent); }
  @keyframes ssPvFlowV{ 0%{transform:translateY(-120%)} 60%,100%{transform:translateY(320%)} }
}

/* ── Hover "evolución": las capas crecen de abajo→arriba con gradiente SalesAId movedizo + mismo gradiente animado en el texto ── */
.ss-proto-link .ss-ev-icon{ transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.ss-proto-link:hover .ss-ev-icon{ transform: translateY(-1px) scale(1.1); }
/* en reposo: trazo muteado como el resto del nav; en hover: trazo con el gradiente de marca */
.ss-proto-link:hover .ss-ev-icon svg path{ stroke: url(#ssEvGrad); }
/* cada capa se DIBUJA (pathLength=1 + dashoffset) en secuencia: l1 abajo → l2 → l3 arriba, en loop */
.ss-proto-link:hover .ss-ev-l1{ animation: ssEvGrow 1.9s ease-in-out infinite; }
.ss-proto-link:hover .ss-ev-l2{ animation: ssEvGrow 1.9s ease-in-out infinite .24s; }
.ss-proto-link:hover .ss-ev-l3{ animation: ssEvGrow 1.9s ease-in-out infinite .48s; }
@keyframes ssEvGrow{
  0%{ stroke-dasharray:1; stroke-dashoffset:1; opacity:.25; }
  32%{ stroke-dashoffset:0; opacity:1; }
  76%{ stroke-dashoffset:0; opacity:1; }
  100%{ stroke-dasharray:1; stroke-dashoffset:1; opacity:.25; }
}
/* gradiente MOVEDIZO: los stops ciclan los 3 colores de marca con desfase → el degradé "viaja" por las capas */
.ss-proto-link:hover .ss-ev-s1{ animation: ssEvStop 1.4s linear infinite; }
.ss-proto-link:hover .ss-ev-s2{ animation: ssEvStop 1.4s linear infinite -.46s; }
.ss-proto-link:hover .ss-ev-s3{ animation: ssEvStop 1.4s linear infinite -.93s; }
@keyframes ssEvStop{
  0%,100%{ stop-color:#4f74ff; }
  33%{ stop-color:#8b5cf6; }
  66%{ stop-color:#e35bd0; }
}
/* mismo gradiente de marca, en movimiento continuo (loop) sobre el texto mientras dura el hover */
.ss-ev-txt{ background-image: var(--ss-grad); background-size:220% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; }
.ss-proto-link:hover .ss-ev-txt{ color:transparent; -webkit-text-fill-color:transparent; animation: ssEvSheen 1.9s linear infinite; }
@keyframes ssEvSheen{ 0%{ background-position:0% 50%; } 100%{ background-position:220% 50%; } }

/* ── Login: orbes del fondo flotando apenas alrededor de su punto + brillo que respira ── */
@media (prefers-reduced-motion: no-preference){
  .auth-page .auth-bg-orb{ will-change: transform, opacity; }
  .auth-page .auth-bg-orb.one{ animation: ssOrbDriftOne 16s ease-in-out infinite; }
  .auth-page .auth-bg-orb.two{ animation: ssOrbDriftTwo 19s ease-in-out infinite; }
  /* orbe violeta (arriba-izquierda): recorre en diagonal por el sector izquierdo */
  @keyframes ssOrbDriftOne{
    0%   { transform: translate(0,0)         scale(1);    opacity:.26; }
    25%  { transform: translate(150px,90px)  scale(1.14); opacity:.55; }
    50%  { transform: translate(60px,210px)  scale(.96);  opacity:.30; }
    75%  { transform: translate(190px,150px) scale(1.08); opacity:.5;  }
    100% { transform: translate(0,0)         scale(1);    opacity:.26; }
  }
  /* orbe lila (abajo-derecha): recorre en diagonal por el sector derecho */
  @keyframes ssOrbDriftTwo{
    0%   { transform: translate(0,0)           scale(1);    opacity:.28; }
    25%  { transform: translate(-160px,-95px)  scale(1.16); opacity:.58; }
    50%  { transform: translate(-70px,-215px)  scale(.95);  opacity:.32; }
    75%  { transform: translate(-200px,-150px) scale(1.1);  opacity:.52; }
    100% { transform: translate(0,0)           scale(1);    opacity:.28; }
  }
}

/* ── Hover en cards de rep y deal: realza nombre, score y la señal secundaria (variación del rep / riesgo del deal) con scale, sin reflow.
   .entity-card es genérica (reps y deals), así que cubre manager Y vendedor: dashboard del manager, "Mis deals" del rep, "Deals asociados", etc.
   Cada extra solo matchea la card que lo tiene: .trend existe en reps, .entity-meta .badge en deals. ── */
.entity-card .entity-name,
.tm-rep-card .tm-rep-name,
.dl-deal-row .dl-deal-name{ transform-origin:left center; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
/* score y variación van apilados (score arriba, variación abajo): crecen en sentidos opuestos para no juntarse */
.entity-card .score-chip,
.tm-rep-card .score-chip{ transform-origin:right bottom; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.entity-card .trend,
.tm-rep-card .trend{ transform-origin:right top; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.meeting-card .score-circle{ transform-origin:right center; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.entity-card .entity-meta .badge,
.dl-deal-row .dl-row-mid .score-chip,
.dl-deal-row .dl-row-mid .badge{ transform-origin:center; transition:transform .22s cubic-bezier(.2,.8,.2,1); }

.entity-card:hover .entity-name,
.tm-rep-card:hover .tm-rep-name,
.dl-deal-row:hover .dl-deal-name{ transform:scale(1.09); }
.entity-card:hover .score-chip,
.tm-rep-card:hover .score-chip{ transform:scale(1.12); }
.entity-card:hover .trend,
.tm-rep-card:hover .trend{ transform:scale(1.12); }
.meeting-card:hover .score-circle{ transform:scale(1.1); }
.entity-card:hover .entity-meta .badge{ transform:scale(1.07); }
/* fila densa de deals (gap real = 8px): escalas reducidas + origen centrado para que el badge de riesgo y el score NO se toquen */
.dl-deal-row:hover .dl-row-mid .score-chip{ transform:scale(1.07); }
.dl-deal-row:hover .dl-row-mid .badge{ transform:scale(1.05); }

/* ── Fix toggle/switch: en iOS Safari se estiraba a un óvalo vertical. Fijamos geometría (y lo agrandamos un toque para touch). ── */
.toggle{
  width:46px !important; height:24px !important; min-width:46px !important; min-height:24px !important; max-height:24px !important;
  flex:0 0 46px !important; align-self:center !important; box-sizing:border-box !important; border-radius:999px !important;
}
.toggle::after{ width:18px !important; height:18px !important; top:2px !important; left:2px !important; }
.toggle.on::after{ left:25px !important; }
/* la fila del toggle centra verticalmente el switch aunque el texto ocupe 2-3 líneas */
.integration-row{ align-items:center; }

/* ── Modal de confirmación (acciones destructivas) ── */
.ss-cfm-overlay{ position:fixed; inset:0; z-index:4600; display:grid; place-items:center; padding:22px;
  background:rgba(6,6,12,.66); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); opacity:0; transition:opacity .2s ease; }
.ss-cfm-overlay.ss-cfm-in{ opacity:1; }
.ss-cfm{ width:100%; max-width:400px; border-radius:18px; padding:22px 20px 18px; text-align:center;
  background:var(--glass-strong); border:var(--hair); box-shadow:var(--shadow-lg), var(--hi);
  transform:translateY(12px) scale(.97); opacity:.6; transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease; }
.ss-cfm-overlay.ss-cfm-in .ss-cfm{ transform:none; opacity:1; }
.ss-cfm-icon{ width:46px; height:46px; margin:0 auto 12px; border-radius:13px; display:grid; place-items:center;
  color:#ff9b9b; background:rgba(225,75,75,.14); border:1px solid rgba(225,75,75,.3); }
.ss-cfm-icon svg{ width:22px; height:22px; }
.ss-cfm-title{ font-size:17px; font-weight:650; letter-spacing:-.01em; }
.ss-cfm-msg{ font-size:13.5px; color:var(--text-tertiary); line-height:1.5; margin:7px 0 18px; }
.ss-cfm-actions{ display:flex; gap:10px; }
.ss-cfm-btn{ flex:1; padding:11px 14px; border-radius:11px; font-size:14px; font-weight:600; cursor:pointer; transition:filter .15s, background .15s, border-color .15s; }
.ss-cfm-cancel{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; }
.ss-cfm-cancel:hover{ background:rgba(255,255,255,.1); }
.ss-cfm-ok{ background:linear-gradient(180deg,#e24b4a,#b53636); border:1px solid rgba(225,75,75,.5); color:#fff; }
.ss-cfm-ok:hover{ filter:brightness(1.08); }
.ss-cfm-ok:focus-visible{ outline:2px solid #ff9b9b; outline-offset:2px; }

/* ── Upload de archivo en el form de documento ── */
.ss-file-row{ margin:2px 0 4px; }
.ss-file-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:7px; }
.ss-file-pick{ display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; border-radius:12px;
  background:var(--ss-grad-soft); border:1px dashed rgba(139,92,246,.5); color:#cbb8ff; font-size:13.5px; font-weight:600;
  transition:border-color .15s, background .15s, transform .15s; }
.ss-file-pick:hover{ border-color:rgba(139,92,246,.85); transform:translateY(-1px); }
.ss-file-pick-ic{ display:inline-flex; } .ss-file-pick-ic svg{ width:18px; height:18px; }
.ss-file-chip{ display:flex; align-items:center; gap:9px; margin-top:9px; padding:9px 11px; border-radius:11px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.ss-file-chip-ic{ color:#cbb8ff; display:inline-flex; } .ss-file-chip-ic svg{ width:17px; height:17px; }
.ss-file-chip-name{ flex:1; min-width:0; font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-file-chip-size{ font-size:11.5px; color:var(--text-dim); flex:0 0 auto; }
.ss-file-chip-x{ flex:0 0 auto; width:22px; height:22px; border-radius:7px; border:none; background:rgba(255,255,255,.08); color:var(--text-tertiary); font-size:15px; line-height:1; cursor:pointer; }
.ss-file-chip-x:hover{ background:rgba(225,75,75,.2); color:#ff9b9b; }

/* ── Loader moderno de subida (overlay sobre el form) ── */
.ss-upl{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; border-radius:inherit;
  background:linear-gradient(180deg, rgba(18,18,30,.86), rgba(12,12,20,.9)); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:ssFadeIn .2s ease both; }
.ss-upl-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; width:78%; max-width:300px; }
.ss-upl-orb{ display:flex; gap:9px; }
.ss-upl-orb span{ width:11px; height:11px; border-radius:50%; background:var(--ss-grad); animation:ssUplPulse 1s ease-in-out infinite; }
.ss-upl-orb span:nth-child(2){ animation-delay:.16s; } .ss-upl-orb span:nth-child(3){ animation-delay:.32s; }
@keyframes ssUplPulse{ 0%,100%{ transform:scale(.6); opacity:.4; } 40%{ transform:scale(1.15); opacity:1; } }
.ss-upl-step{ font-size:13px; font-weight:600; color:#fff; letter-spacing:.01em; }
.ss-upl-bar{ width:100%; height:5px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); }
.ss-upl-bar i{ display:block; height:100%; width:40%; border-radius:999px; background:var(--ss-grad);
  background-size:200% 100%; animation:ssUplBar 1.65s cubic-bezier(.5,0,.3,1) forwards, ssUplSheen 1s linear infinite; }
@keyframes ssUplBar{ 0%{ width:8%; } 55%{ width:62%; } 100%{ width:100%; } }
@keyframes ssUplSheen{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }
.ai-doc-add-form{ position:relative; }