/* Valores y alias (--gp*, --dark*, --muted, --space-*, --sh*, --gq…): tokens.css.
   Acceso, MFA, campos base, foco, movimiento reducido: interno.css.
   ── LOTE 1 de la migracion del CRM (ago 2026) ─────────────────────────────
   Tres cosas de interno.css NO valen aqui y se neutralizan a proposito:
   1. El acceso del CRM es OTRO diseno (dos columnas, formulario sin caja):
      interno.css centra la pantalla y pone caja a .login-card. Se deshace.
   2. select.fi: interno.css quita la flecha nativa (appearance:none) y pinta
      una; pero el .fi del CRM usa el 'background' corto, que borra la pintada.
      Se devuelve la flecha nativa hasta que el lote de campos lo unifique.
   3. El cuerpo interno es 13px; el CRM heredaba 16 desde siempre y tiene
      11.000 lineas que no se han revisado con lupa: se queda en 16 hasta el
      lote de tipografia. */
.login-screen{align-items:stretch;justify-content:flex-start;padding:0;}
.login-card{background:none;border:0;border-radius:0;padding:0;box-shadow:none;}
.login-card .fi{text-align:left;}
select.fi{-webkit-appearance:auto;appearance:auto;background-image:none;padding-right:12px;}
body{font-size:var(--t2);}   /* 16px: el CRM hereda este cuerpo desde siempre; bajarlo a --t0 (13) es un lote aparte, midiendo con sesion que hereda */

*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--dark);}   /* el fondo vive en el root para que el halo pueda ir DETRAS del contenido (z-index:-1) sin crear stacking contexts */
body{background:transparent;min-height:100vh;}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px;}

/* ── A11Y: foco de teclado + movimiento reducido ── */
:focus-visible{outline:2px solid var(--gp3);outline-offset:2px;border-radius:4px;}
.fi:focus-visible,.api-input:focus-visible,.status-select:focus-visible,select.fi:focus-visible{outline:2px solid var(--gp3);outline-offset:1px;}
@media (prefers-reduced-motion:reduce){
  /* Menos movimiento y mas suave, NO cero. Antes esto apagaba todo con
     transition-duration:.001ms, asi que quien activaba la opcion perdia tambien
     el feedback de hover, de foco y la entrada de la barra de deshacer, que son
     justo lo que ayuda a entender que acaba de pasar. Ahora se conservan las
     transiciones de color y opacidad y se quitan las de posicion y tamano, que
     son las que marean. `visibility` se conserva porque la barra de deshacer la
     necesita para salir del arbol de accesibilidad al terminar. */
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;
    transition-property:opacity,color,background-color,border-color,box-shadow,fill,stroke,visibility!important;
    transition-duration:var(--dur-1)!important;}
}

/* ── LAYOUT ── */
.app{display:grid;grid-template-columns:300px 1fr;min-height:100vh;transition:grid-template-columns .22s var(--ease);}
.app.sidebar-collapsed{grid-template-columns:56px 1fr;}
.app.dash-simple .dash-adv{display:none!important;}
/* overflow-y:auto y no hidden. Con `hidden`, el dia que el contenido no cupiera
   lo que sobraba se volvia INALCANZABLE: ni rueda ni dedo. Paso de verdad al
   anadir Secciones y Vistas, y lo que se salio fue el pie: tu avatar, tu nombre
   y CERRAR SESION quedaban fuera de la pantalla a 1366x768. */
.sidebar{background:var(--dark2);border-right:0.5px solid var(--border2);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;}
/* SIN overflow-y aqui, y es a proposito. Lo llevaba y no servia para nada: .app
   usa min-height (no height), asi que .main nunca tiene altura acotada y por
   tanto NUNCA desplaza; quien desplaza es la ventana, y por eso .sidebar se
   queda quieta con position:sticky contra ella. Lo unico que hacia ese
   overflow era convertir a .main en el contenedor de referencia del sticky de
   sus descendientes, y como .main no desplaza, el sticky no se activaba jamas.
   Victima conocida: .ws-left en la ficha del lead, que lleva position:sticky
   desde que se escribio y nunca se habia quedado fija.
   Si algun dia hace falta que .main desplace por su cuenta, hay que darle
   altura acotada (.app{height:100vh}) ADEMAS del overflow, no solo el overflow. */
/* min-width:0 es OBLIGATORIO aqui. .main es un elemento de rejilla y por
   defecto lleva min-width:auto, que significa "no me encojas por debajo de mi
   contenido": la pista 1fr se estiraba a lo que midiera lo de dentro en vez
   de recortarlo. Consecuencia medida a 1482px de ventana: el tablero Kanban
   con 8 columnas dejaba a .main en 2392px y al documento en 2692, asi que el
   overflow-x:auto del propio tablero NO se activaba nunca (no le sobraba
   nada) y lo que desplazaba de lado era la PAGINA ENTERA. De ahi que la
   unica forma de ver las ultimas etapas fuera arrastrar la barra del
   navegador abajo del todo. Con min-width:0 la pista aguanta su ancho y cada
   zona que necesite desplazamiento lateral lo resuelve por su cuenta. */
.main{background:var(--dark);min-width:0;}

/* ── SIDEBAR HEADER ── */
.sb-header{padding:20px 18px 14px;border-bottom:0.5px solid var(--border);}
.brand-the{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.brand-name{font-size:19px;font-weight:900;letter-spacing:-.02em;line-height:1;}
.brand-g{color:var(--bright);}
.brand-m{background:linear-gradient(90deg,var(--gp2),var(--gp3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.scc-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--gd);color:var(--gp3);border:0.5px solid var(--gb);margin-top:8px;}

/* ── API BAR ── */
.api-section{padding:12px 14px;border-bottom:0.5px solid var(--border);}
.api-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.api-row{display:flex;align-items:center;gap:8px;}
.api-input{flex:1;background:rgba(0,0,0,0.3);border:var(--bd-w) solid var(--bd2);border-radius:var(--r-s);padding:7px 10px;font-family:inherit;font-size:12px;color:var(--tx);outline:none;transition:border-color var(--dur-1);min-width:0;}
.api-input:focus{border-color:var(--gp2);}
.api-input::placeholder{color:var(--placeholder);}
.api-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex-shrink:0;transition:background .2s;}
.api-dot.ok{background:var(--green);}

/* ── PIPELINE HEADER ── */
.pipe-header{padding:10px 14px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid var(--border);}
.pipe-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.pipe-count{font-size:11px;font-weight:700;color:var(--gp3);}
.btn-new{display:flex;align-items:center;gap:6px;font-family:inherit;font-size:12px;font-weight:700;padding:8px 14px;border-radius:var(--r-s);border:none;background:var(--acc-fill-flat);color:var(--tx-on-acc);cursor:pointer;min-height:var(--tap-base);transition:background var(--dur-1),filter var(--dur-1);margin:6px 14px;width:calc(100% - 28px);}
.btn-new:hover{background:var(--gp2);}

/* ── LEAD LIST ── */
/* ── PANTALLAS BAJAS: la lista de leads manda ──────────────────────────────
   Con el embudo lleno la columna sumaba 745 px de adornos en una ventana de
   694: la lista de leads quedaba ENTERA por debajo del borde, y el pie con
   "cerrar sesion" tambien. Cero leads a la vista en un portatil normal.
   No es un ajuste fino, es que no cabe. Asi que por debajo de 1000 px de ALTO
   (el alto, no el ancho: es la dimension que falta) se recorta lo de arriba.

   POR QUE 1000 Y NO 820, que era el primer numero. Con 820 quedaba un ESCALON:
   justo por encima la compactacion se apagaba pero los 214 px de Secciones y
   Vistas seguian ahi, asi que a 850 o 900 se estaba PEOR que a 800. Y los
   tamaños que caian en esa banda no son raros: 1440x900 es un MacBook Air de
   13" y 390x844 es un iPhone 14/15/16 Pro. En los dos, cero leads a la vista.

   DEUDA CONOCIDA, escrita a proposito: cualquier umbral deja un escalon. Lo
   que falla arriba y abajo es lo mismo, que hay 214 px de altura FIJA encima
   de una lista que es `flex:1`. El arreglo estable no es mover el numero, es
   que Secciones y Vistas dejen de ser altura fija. Si esto se vuelve a tocar,
   ese es el trabajo.

   Los titulos "SECCIONES" y "VISTAS" son lo primero que se va: con tres
   iconos y tres etiquetas debajo, el titulo no esta diciendo nada nuevo.

   Sin restriccion de ANCHO a proposito: en el telefono la barra es un cajon y
   sufre lo mismo (enseñaba 0 leads con 24 en el embudo). Alli los enlaces
   conservan sus 44 px, porque shell.css les pone `min-height` en su propio
   media query y eso gana sobre este relleno: el ahorro viene de los titulos y
   de los contadores en fila, NO de apretar zonas tactiles. */
/* SIN `@media` NINGUNO, y esta es la version final del razonamiento.
   Primero fue `max-height:820px`, luego 1000. Los dos dejaban un ESCALON: justo
   por encima del umbral la compactacion se apagaba pero los 214 px de Secciones
   y Vistas seguian ahi, asi que se estaba PEOR arriba que abajo. Mover el numero
   solo movia el escalon (a 1440x1002: 1 lead contra 3 de produccion).
   Al comprobar QUE SE PIERDE escondiendo los titulos, la respuesta fue NADA:
   `<nav class="shell-nav" aria-label="Secciones">` y
   `<div class="view-toggle" aria-label="Vista del CRM">` ya llevan el nombre
   accesible en el contenedor, y las seis etiquetas (CRM, Agenda, Viral Scanner,
   Lista, Kanban, Semana) se explican solas. Los titulos eran decoracion.
   Y si no se pierde nada, el `@media` sobraba: quitarlo ELIMINA el escalon en
   vez de moverlo, y devuelve paridad exacta con produccion por encima de 1000.
   La regla de `.btn-new` SI conserva su condicion de ANCHO, mas abajo: en
   escritorio no hay FAB y ese boton es la unica forma de crear un lead. */
.shell-nav-t, .sb-vistas-t{ display:none; }
.shell-nav{ padding:6px 10px 4px; }
.shell-link{ padding:5px 10px; margin-bottom:1px; }
.sb-vistas{ padding:6px 10px; }
.sb-header{ padding-top:10px; padding-bottom:10px; }
.pipe-header{ margin-top:4px; }
  /* Los contadores en fila: cuatro bloques apilados son 163 px que compiten
     con los leads. Aqui pesan mas los leads. */
  /* `flex-direction:row` NO sobra: `.sb-counters` ya es `column` mas arriba, y
     un `flex-wrap` en direccion columna envuelve en COLUMNAS, no en filas.
     Sin esta linea el termometro se iba 98 px FUERA de la barra (derecha 398
     contra 300) y `overflow-x:hidden` lo cortaba: quedaba una astilla morada
     de 8 px pegada al borde, sin porcentaje, sin etiqueta y sin poder
     pulsarla. Y los bloques, en vez de encoger, pasaban de 35 a 100 px. */
#sbCounters{ display:flex; flex-direction:row; flex-wrap:wrap; gap:4px; }

/* En el TELEFONO, "Nuevo lead" del cajon sobra: el FAB de la barra inferior
   lleva el MISMO `onclick="openModal()"`, verificado, y esta bajo el pulgar sin
   abrir nada. Son 64 px con sus margenes, y son justo los que faltaban para que
   el cajon enseñe un lead sin desplazar, como hace produccion hoy.
   Solo en movil: en escritorio no hay FAB y el boton es la unica forma. */
/* Solo ANCHO, sin condicion de alto: el FAB existe en cualquier telefono, alto
   o bajo, asi que el boton del cajon esta duplicado siempre. La condicion de
   860 px SI se queda: por encima no hay FAB y este boton es la unica forma de
   crear un lead. */
@media (max-width:860px){
  /* `>` y no descendiente. El boton de la barra es hijo directo de .sidebar,
     pero el estado vacio del pipeline lleva OTRO .btn-new dentro ("Crear mi
     primer lead") y el selector ancho se lo llevaba por delante: con cero
     leads el cajon quedaba sin ningun boton y con un "o importa desde CSV"
     colgando de una frase que ya no estaba. Y el FAB no rescata: la capa
     oscura del cajon va en z-index 90 y la barra inferior en 70, asi que
     tocarlo cierra el cajon en vez de crear el lead. Medido en el navegador. */
  .sidebar > .btn-new{ display:none; }
  #sbCounters .sb-count{ flex:1 1 46%; margin:0; padding:5px 7px; font-size:11px; }
  #sbCounters .thermo{ flex:1 1 100%; margin:0; }
  /* Los cuatro contadores son BOTONES DE FILTRO, y en el telefono el chip mide
     unos 29px de alto (5 de relleno, 18 de linea del icono, 5 y el borde). Se
     falla el toque y se acaba filtrando por el de al lado.
     Mismo remedio que ya usan .pipe-kbd y .rem-right button: un pseudo-elemento
     invisible sube la zona a 45px y el dibujo no se mueve un pixel. El hueco
     pasa de 4 a 16 porque el pseudo sobresale 8 por arriba y 8 por abajo: con
     4, la fila de arriba se comia los toques de la de abajo. Cuesta 12px de
     cajon y SOLO en el telefono. Siguen cabiendo dos columnas: 272 utiles
     menos 16 de hueco dan 128 por chip, y flex-basis 46% son 125. */
  #sbCounters{ gap:16px; }
  #sbCounters .sb-count{ position:relative; }
  #sbCounters .sb-count::after{ content:''; position:absolute; inset:-8px -2px; }
}

/* min-height: la lista es `flex:1`, o sea "quedate con lo que sobre". Al meter
   Secciones y Vistas encima dejo de sobrar nada y la lista se quedaba en 20 px:
   CERO leads a la vista en un portatil de 768 de alto, y en el telefono el
   cajon tampoco ensenaba ninguno. Con este minimo la lista siempre ensena
   leads, y si con eso la columna no cabe, se desplaza (ver .sidebar). */
.lead-list{flex:1 1 auto;min-height:140px;overflow-y:auto;padding:4px 8px 16px;}

/* ── LA DEUDA DE ARRIBA, PAGADA (15-ago-2026, al entrar la 4ª seccion) ──────
   El comentario de mas arriba decia: "cualquier umbral deja un escalon. Lo que
   falla arriba y abajo es lo mismo, que hay 214 px de altura FIJA encima de una
   lista que es flex:1. El arreglo estable no es mover el numero, es que
   Secciones y Vistas dejen de ser altura fija. Si esto se vuelve a tocar, ese
   es el trabajo." Se volvio a tocar, y este es el trabajo.

   MEDIDO EN EL NAVEGADOR a 1366x768 con el embudo lleno (4 contadores,
   termometro y 24 leads), que es el caso que German pidio comprobar:

     antes, con 3 secciones ......  47 px utiles de lista = 0,7 leads
     antes, con 4 secciones ......  16 px utiles          = 0,2 leads
     ahora, con 4 secciones ...... 200 px utiles          = 3,1 leads

   O sea que NO estaba bien y Fathom lo iba a rematar: con tres secciones ya no
   se veia ni un lead entero. "Utiles" es lo que cae dentro de la ventana Y por
   encima del pie pegajoso; medirlo con getBoundingClientRect().height a secas
   daba 140 y mentia, porque la lista empezaba en el pixel 689 de 768.

   SON DOS COSAS, y las dos hacen falta:

   1. LOS CONTADORES EN DOS COLUMNAS DE VERDAD. La regla de mas arriba ya les
      puso `flex-direction:row; flex-wrap:wrap`, pero la base flexible
      (`flex:1 1 46%`) vivia SOLO dentro del @media de movil. En escritorio los
      chips se dimensionan por su contenido, no llegan a emparejarse, y el
      "row" no hacia absolutamente nada: seguian 4 apilados, 212 px. Con base,
      son 2 filas de 2. Ahorro medido: 44 px.

   2. QUE LO SECUNDARIO PUEDA ENCOGER. Contadores y filtros son lo unico de la
      columna que no es ni navegacion ni leads, asi que son los que ceden
      sitio. Llevan `min-height` para que no puedan desaparecer (sin el suelo
      se quedaban en 8 px, o sea invisibles: probado) y `overflow-y:auto` para
      que lo que no quepa se alcance desplazando DENTRO de su bloque, en vez de
      empujando la lista fuera de la pantalla.

   Lo que NO se toca: `.shell-nav` y `.sb-vistas` no encogen. Son navegacion, y
   una navegacion que hay que buscar desplazando no es navegacion. El precio de
   la 4ª seccion (31 px) se paga de los contadores, no de los leads. */
#sbCounters .sb-count{min-width:0;}
@media (min-width:861px){
  /* Solo escritorio: en movil ya existe su propia base (46%) unos renglones
     mas arriba, dentro de un pase de movil que esta medido y no se pisa. */
  #sbCounters .sb-count{flex:1 1 44%;}
}
.sidebar > #sbCounters{flex-shrink:1;min-height:48px;overflow-y:auto;}   /* 86 → 48 (una fila de chips): 38 px que van a la lista de leads a 768 de alto */
/* ...pero SOLO cuando hay contadores que enseñar. El suelo de 86px existe para
   que el bloque no pueda encogerse hasta desaparecer, y eso vale mientras
   tenga contenido. Con un lead y nada vencido no se dibuja ni un chip (es
   correcto: un contador en cero no se pinta), y el suelo reservaba 86px de
   nada entre los filtros y la lista. Es el hueco que reporto German con una
   captura, justo despues de arreglarle el filtro cortado.
   :empty acierta aqui porque renderSidebarCounters deja el nodo vacio de
   verdad, sin espacios: comprobado en el navegador. */
.sidebar > #sbCounters:empty{min-height:0;padding:0;}
/* El suelo sube de 58 a 72. El motivo de que este bloque encoja sigue siendo
   bueno (ver el comentario de arriba: el sitio sale de aqui y no de los leads),
   pero 58 corta POR LA MITAD del segundo control: dentro van buscador 32 +
   hueco 8 + filtro de estado 32 + hueco 8 + pildoras de dueno 28 = 116, asi que
   con 58 se ve el buscador entero y medio selector. Un control cortado por la
   mitad no se lee como "hay mas abajo", se lee como roto, y asi lo reporto
   German con una captura.
   72 es el primer corte LIMPIO: buscador y filtro enteros, y las pildoras de
   dueno se alcanzan desplazando dentro del bloque. Cuesta 14px de los 44 que
   ahorro la auditoria, no los 58 que costaria enseñarlo todo. */
/* 18-ago-2026: German prefiere las herramientas FIJAS y que solo la lista de
   leads desplace. Antes este bloque encogia (min 72) con scroll propio y una
   mascara de desvanecido; con los controles a 36 px ya no cabia entero en su
   ventana y sacaba barra al lado del buscador, que es lo que reporto. Ahora
   no encoge: mide lo suyo (buscador 36 + estado 32 + duenos 36 = ~120) y lo
   que ceda sale de la lista, que conserva su suelo de 140 y, si aun asi la
   columna no cabe, desplaza .sidebar entera (ver arriba). Medido a 1280x768
   con la carcasa dentro: la lista queda con el numero que dice el commit. */
.sidebar > .pipe-tools{flex-shrink:0;overflow:visible;}
.lead-empty{text-align:center;padding:44px 22px;color:var(--muted);font-size:12.5px;line-height:1.5;}
.lead-empty i{font-size:25px;width:54px;height:54px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--gd);border:0.5px solid var(--gb);color:var(--gp3);}
.lead-empty b{display:block;color:var(--dim);font-size:14px;font-weight:800;margin-bottom:4px;letter-spacing:-.01em;}
.lead-card{border-radius:var(--r);border:var(--bd-w) solid var(--bd);background:rgba(255,255,255,0.02);padding:12px 13px;margin-bottom:6px;cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1);position:relative;}
/* --dur-1 y no --dur-2 porque tokens.css lo documenta como "hover, foco, color",
   y esta es la fila que mas se recorre del CRM. Se cayeron color, transform y
   box-shadow: estaban vigilados en cada tarjeta y el :hover no cambia ninguno. */
.lead-card:hover{background:var(--acc-bg2);border-color:rgba(154,87,245,0.25);}
.lead-card.active{background:var(--gd);border-color:var(--gb);}
.lead-name{font-size:13px;font-weight:700;color:var(--bright);margin-bottom:2px;}
.lead-meta{font-size:11px;color:var(--muted);}
.lead-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;margin-top:6px;}
/* ── Badges de los 10 estados del embudo: EXTENSION del sistema. Rampa azul → morado → verde
   con la paleta de datos de tokens.css (--dato-*); base tipografica en .lead-status. ── */
.st-lead_nuevo{background:var(--info-bg);color:var(--info);border:var(--bd-w) solid var(--info-bd);}
.st-primer_contacto{background:var(--dato-indigo-bg);color:var(--dato-indigo);border:var(--bd-w) solid var(--dato-indigo-bd);}
.st-contactado{background:var(--acc-bg);color:var(--acc3);border:var(--bd-w) solid var(--acc-bd);}
.st-calificado{background:var(--dato-violeta-bg);color:var(--dato-violeta);border:var(--bd-w) solid var(--dato-violeta-bd);}
.st-reunion_agendada{background:var(--pk-bg);color:var(--pk);border:var(--bd-w) solid var(--pk-bd);}
.st-reunion_realizada{background:var(--dato-magenta-bg);color:var(--dato-magenta);border:var(--bd-w) solid var(--dato-magenta-bd);}
.st-propuesta_enviada{background:var(--warn-bg);color:var(--warn);border:var(--bd-w) solid var(--warn-bd);}
.st-negociacion{background:var(--dato-naranja-bg);color:var(--dato-naranja);border:var(--bd-w) solid var(--dato-naranja-bd);}
.st-ganado{background:var(--ok-bg);color:var(--ok);border:var(--bd-w) solid var(--ok-bd);}
.st-perdido{background:rgba(255,255,255,0.05);color:var(--tx-3);border:var(--bd-w) solid var(--bd2);}
/* UX-13 · Estaba a 2,0:1 de contraste (el mínimo legible es 4,5:1): ocupaba
   una línea en cada tarjeta y no se podía leer ni con buena luz. En el móvil
   se quita del todo, que es donde el sitio vale más (ver el @media). */
.lead-date{font-size:10px;color:var(--muted);margin-top:4px;}
/* UX-04 · Estaba a rgba(...,0.2) = 2,0:1 de contraste: la zona de toque medía
   40x40 y el icono casi no se veía. Lo que se puede tocar tiene que verse. */
.lead-del{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px;transition:color .15s;}
.lead-del::before{content:'';position:absolute;inset:-11px;}
.lead-del:hover{color:var(--red);}
/* Abrir el perfil del lead sin abrir la ficha: mirar su Instagram antes de
   escribirle es el gesto mas repetido del dia, y hasta hoy costaba entrar al
   lead, mirar, y volver.
   SOLO EN ESCRITORIO (ver el @media de abajo). En el telefono esta columna es
   el drawer entero y ya va justa: dos dianas mas al lado del boton de borrar,
   con el dedo, es pedir un borrado por error. */
.lead-redes{position:absolute;bottom:9px;right:8px;display:flex;gap:2px;}
.lead-red{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:4px;border-radius:6px;transition:color .15s,background .15s;}
.lead-red:hover{background:rgba(154,87,245,0.12);}
.lead-red-ig:hover{color:#e1306c;}
.lead-red-tt:hover{color:var(--bright);}
/* El @ que nadie confirmo de que red es. Se ofrece igual (mejor que nada) pero
   sin fingir que es un dato comprobado: mismo criterio que en la ficha. */
.lead-red.sin-confirmar{opacity:.55;}
/* El @media VA AQUI, justo detras de la definicion, y no arriba con el resto de
   reglas moviles del sidebar. Ahi estaba primero, y como tiene la misma
   especificidad, la definicion de abajo le ganaba por orden: en el telefono los
   botones seguian saliendo. Se vio midiendo a 800 px, no leyendo. */
@media (max-width:860px){
  .lead-redes{ display:none; }
}

/* ── MAIN EMPTY STATE ── */
.main-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:80vh;text-align:center;padding:40px;}
.main-empty-icon{font-size:56px;color:rgba(154,87,245,0.2);margin-bottom:20px;}
.main-empty-title{font-size:22px;font-weight:900;margin-bottom:8px;}
.main-empty-sub{font-size:14px;color:var(--muted);max-width:340px;line-height:1.6;}

/* ── LEAD HEADER ── */
.lead-header{padding:24px 32px 18px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.lead-avatar{width:46px;height:46px;border-radius:13px;background:var(--acc-fill);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -10px rgba(154,87,245,.75);}
.lead-header-info{flex:1;}
.lead-header-name{font-size:20px;font-weight:900;line-height:1;}
.lead-header-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.status-select{font-family:inherit;font-size:12px;font-weight:700;padding:8px 13px;border-radius:var(--r-s);border:var(--bd-w) solid var(--bd2);background:var(--bg3);color:var(--tx);outline:none;cursor:pointer;transition:border-color var(--dur-1),background var(--dur-1);}
.status-select:hover{border-color:var(--gp2);}
.status-select option{background:var(--dark3);}

/* ── STAGE TABS ── */
.stage-tabs{display:flex;gap:6px;padding:10px 32px;border-bottom:0.5px solid var(--border);background:var(--dark2);overflow-x:auto;scrollbar-width:none;}
.stage-tabs::-webkit-scrollbar{display:none;}
.stage-tab{flex:1;min-width:104px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,0.03);border:0.5px solid transparent;color:rgba(255,255,255,0.62);cursor:pointer;white-space:nowrap;transition:background .18s var(--ease),color .18s,border-color .18s,transform .16s var(--ease);display:flex;align-items:center;justify-content:center;gap:7px;}
.stage-tab:hover:not(.on){background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);}
.stage-tab.on{color:#fff;background:linear-gradient(180deg,rgba(154,87,245,0.22),rgba(154,87,245,0.1));border-color:var(--gb);box-shadow:0 6px 16px -10px rgba(154,87,245,0.9);}
.stage-tab .tab-num{font-size:9.5px;line-height:1;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.07);border:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .18s;}
.stage-tab.on .tab-num{background:var(--acc-fill);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}

/* ── STAGE PANELS ── */
/* Sin animacion de entrada: cambiar de pestana dentro de un lead es el gesto
   mas repetido del CRM, y 300ms se pagan decenas de veces al dia. Ademas era un
   @keyframes, que reinicia desde cero, asi que encadenar clics apilaba fundidos
   a medio hacer. Mismo criterio que la paleta de comandos en .cp-overlay.show. */
.stage-panel{display:none;padding:24px 32px 40px;}
.stage-panel.on{display:block;}
@keyframes pIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* #workspace ya no anima al abrirse: se abre decenas de veces al dia y el cambio
   de pantalla se explica solo. Al quitarlo desaparece tambien el motivo del apano
   que vivia aqui (backwards en vez de both, para que el transform no dejase a
   #workspace convertido en containing block de cualquier position:fixed de
   dentro). El keyframe wsIn se va con el, no lo usaba nadie mas. */
@keyframes spin{to{transform:rotate(360deg)}}
.ti-loader{display:inline-block;animation:spin .7s linear infinite;}

/* ── FORM ELEMENTS ── */
.stage-section{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gp3);padding:0 0 12px;border-bottom:0.5px solid var(--border);margin-bottom:22px;display:flex;align-items:center;gap:9px;}
.stage-section:not(:first-of-type){margin-top:8px;}
.stage-section i{font-size:13px;width:24px;height:24px;border-radius:8px;background:var(--gd);border:0.5px solid var(--gb);display:flex;align-items:center;justify-content:center;color:var(--gp3);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.fi{width:100%;background:rgba(255,255,255,0.05);border:var(--bd-w) solid var(--bd2);border-radius:var(--r-s);padding:10px 12px;font-family:inherit;font-size:13px;color:var(--tx);outline:none;transition:border-color var(--dur-2),background var(--dur-2);}
.fi:focus{border-color:var(--acc);background:rgba(154,87,245,0.06);}
.fi::placeholder{color:var(--placeholder);}
textarea.fi{resize:vertical;min-height:76px;line-height:1.5;}
select.fi{cursor:pointer;}
select.fi option{background:var(--dark3);color:var(--bright);}
.hint{font-size:11px;color:var(--muted);margin-top:4px;font-style:italic;}

/* ── SAVE BAR ── */
.save-bar{display:flex;align-items:center;gap:10px;margin-top:18px;}
.btn-save{display:flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:700;padding:11px 22px;border-radius:var(--r-s);border:none;background:var(--acc-fill-flat);color:var(--tx-on-acc);cursor:pointer;min-height:var(--tap-base);transition:background var(--dur-1),filter var(--dur-1);}
.btn-save:hover{background:var(--gp2);}
.save-note{font-size:12px;color:var(--muted);}
.saved-flash{font-size:12px;color:var(--ok);opacity:0;transition:opacity var(--dur-3);}
.saved-flash.show{opacity:1;}
/* Cuatro estados del guardado (fase 5): guardando, guardado, pendiente, error.
   Cada uno lleva su palabra, el color solo acompaña. */
.saved-flash.sf-guardando{color:var(--muted);}
.saved-flash.sf-pendiente{color:var(--warn);}
.saved-flash.sf-error{color:var(--err);}

/* ── REFERENTES ── */
.ref-block{background:rgba(255,255,255,0.02);border:0.5px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;position:relative;}
.ref-num{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.btn-add-ref{display:flex;align-items:center;gap:6px;font-family:inherit;font-size:12px;font-weight:700;padding:8px 14px;border-radius:var(--r-s);border:var(--bd-w) solid var(--acc-bd);background:var(--acc-bg);color:var(--acc3);cursor:pointer;transition:background var(--dur-1);margin-bottom:14px;}
.btn-add-ref:hover{background:rgba(154,87,245,0.2);}
.btn-del-ref{position:absolute;top:10px;right:10px;background:none;border:0.5px solid var(--err-bd);color:var(--red);border-radius:var(--r-s);padding:2px 8px;font-size:11px;cursor:pointer;font-family:inherit;}

/* ── AI BUTTON ── */
.btn-ai{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:700;padding:14px;border-radius:var(--r-s);border:none;background:var(--acc-fill);color:var(--tx-on-acc);cursor:pointer;min-height:var(--tap-base);transition:filter .18s,transform .12s var(--ease),box-shadow .18s;margin-top:4px;box-shadow:0 10px 24px -13px rgba(154,87,245,.95);}
.btn-ai:hover{filter:brightness(1.08);box-shadow:0 13px 30px -12px rgba(154,87,245,1);}
.btn-ai:active{transform:scale(.985);}
.btn-ai:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}
.ai-status{font-size:12px;color:var(--gp3);text-align:center;margin-top:8px;min-height:18px;}
/* ── Skeletons de carga (mientras la IA piensa) ── */
.skel-wrap{animation:pIn .3s var(--ease);}
.skel{background:linear-gradient(100deg,rgba(255,255,255,.045) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.045) 70%);background-size:200% 100%;animation:skelSweep 1.25s linear infinite;border-radius:8px;}
@keyframes skelSweep{from{background-position:200% 0;}to{background-position:-200% 0;}}
.skel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
.skel-card{height:96px;border-radius:12px;}
.skel-line{height:12px;margin-bottom:11px;}
.skel-blk{height:80px;border-radius:10px;margin-bottom:10px;}
@media (max-width:520px){.skel-cards{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.skel{animation:none;}}
.ai-error{font-size:12px;color:var(--red);text-align:center;margin-top:6px;}

/* ── DIAGNÓSTICO RESULTADO ── */
.diag-result{animation:pIn .35s var(--ease);}
.prospect-header{display:flex;align-items:center;gap:14px;padding:16px;background:var(--gd);border:0.5px solid var(--gb);border-radius:12px;margin-bottom:14px;}
.prospect-avatar{width:46px;height:46px;border-radius:50%;background:var(--gp1);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;flex-shrink:0;}
.prospect-name{font-size:17px;font-weight:900;}
.prospect-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.prospect-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.pbadge{font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,0.07);color:var(--tx-2);}
.semaforo{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;margin-left:6px;}
.sf-verde{background:var(--ok-bg);color:var(--ok);border:var(--bd-w) solid var(--ok-bd);}
.sf-amarillo{background:var(--warn-bg);color:var(--warn);border:var(--bd-w) solid var(--warn-bd);}
.sf-rojo{background:var(--err-bg);color:var(--err);border:var(--bd-w) solid var(--err-bd);}
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.score-card{border-radius:var(--r);padding:13px;border:var(--bd-w) solid var(--bd2);background:rgba(255,255,255,0.02);text-align:center;}
.score-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.score-val{font-size:26px;font-weight:900;}
.sc-high{color:var(--green);}
.sc-mid{color:var(--amber);}
.sc-low{color:var(--red);}
.score-sub{font-size:10px;color:var(--muted);margin-top:3px;}
.info-block{border:0.5px solid var(--border2);border-radius:10px;padding:14px 16px;background:rgba(255,255,255,0.02);margin-bottom:10px;}
.info-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gp3);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.item-row{display:flex;align-items:flex-start;gap:9px;padding:5px 0;border-bottom:0.5px solid rgba(255,255,255,0.04);font-size:13px;}
.item-row:last-child{border-bottom:none;}
.ir-icon{font-size:14px;margin-top:2px;flex-shrink:0;}
.ir-g{color:var(--green);}
.ir-r{color:var(--red);}
.ir-a{color:var(--amber);}
.ir-p{color:var(--gp2);}
.ir-text{color:rgba(255,255,255,0.7);line-height:1.45;}
.ir-label{font-weight:700;color:#fff;}
.ref-analysis{background:var(--gd);border:0.5px solid var(--gb);border-radius:8px;padding:12px;margin-bottom:8px;}
.ref-handle{font-size:13px;font-weight:700;color:var(--gp3);margin-bottom:6px;}
.mentor-card{border-radius:var(--r);padding:16px;margin-bottom:10px;}
.mc-oferta{background:rgba(251,191,36,0.05);border:0.5px solid rgba(251,191,36,0.2);}
.mc-viral{background:rgba(74,222,128,0.05);border:0.5px solid rgba(74,222,128,0.18);}
.mc-marca{background:rgba(147,197,253,0.05);border:0.5px solid rgba(147,197,253,0.18);}
.mc-enfoque{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:0.55;margin-bottom:8px;}
.mc-oferta .mc-enfoque{color:var(--amber);}
.mc-viral .mc-enfoque{color:var(--green);}
.mc-marca .mc-enfoque{color:var(--blue);}
.mc-headline{font-size:14px;font-weight:900;}
.mc-oferta .mc-headline{color:var(--amber);}
.mc-viral .mc-headline{color:var(--green);}
.mc-marca .mc-headline{color:var(--blue);}
.mc-body{font-size:13px;color:rgba(255,255,255,0.7);line-height:1.6;margin-top:8px;}
.mc-accion{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;margin-top:10px;padding:5px 12px;border-radius:7px;}
.mc-oferta .mc-accion{background:var(--warn-bg);color:var(--amber);}
.mc-viral .mc-accion{background:var(--ok-bg);color:var(--green);}
.mc-marca .mc-accion{background:var(--info-bg);color:var(--blue);}
/* Hook — destacado ámbar oscuro (sin fondo claro) */
.hook-box{background:var(--warn-bg);border:0.5px solid var(--warn-bd);border-radius:8px;padding:11px 13px;margin-top:8px;}
.hook-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--warn-bg);color:var(--warn);padding:2px 8px;border-radius:999px;margin-bottom:7px;}
.hook-text{font-size:14px;font-weight:700;color:#fff;line-height:1.45;}
/* WhatsApp — fragmento de chat real (tema oscuro) */
.wa-box{background-color:#0B141A;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1'%3E%3Ccircle cx='11' cy='12' r='3'/%3E%3Cpath d='M30 28h7M33.5 24.5v7'/%3E%3C/g%3E%3C/svg%3E");border:0.5px solid rgba(255,255,255,0.08);border-radius:10px;padding:14px 12px;margin-top:7px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.wa-label{align-self:center;font-size:10px;font-weight:500;letter-spacing:.02em;text-transform:none;color:#8696A0;background:rgba(11,20,26,0.85);padding:3px 11px;border-radius:8px;margin:0;}
.wa-text{position:relative;align-self:flex-end;max-width:88%;background:#005C4B;color:#E9EDEF;font-size:13px;font-weight:400;line-height:1.5;padding:7px 11px 6px;border-radius:9px;border-top-right-radius:2px;white-space:pre-wrap;box-shadow:0 1px 1px rgba(0,0,0,0.25);}
.wa-text::before{content:'';position:absolute;top:0;right:-7px;width:0;height:0;border:7px solid transparent;border-top-color:#005C4B;border-right-width:0;}
.wa-text::after{content:'9:41\00a0PM\00a0\00a0\2713\2713';display:block;text-align:right;font-size:10px;color:rgba(233,237,239,0.6);margin-top:3px;line-height:1;letter-spacing:.3px;}
.btn-copy{display:inline-flex;align-items:center;gap:4px;font-family:inherit;font-size:11px;font-weight:500;padding:5px 11px;border-radius:var(--r-s);border:var(--bd-w) solid var(--bd2);background:rgba(255,255,255,0.04);color:var(--tx-3);cursor:pointer;margin-top:8px;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);}
.btn-copy:hover{color:#fff;border-color:var(--gp2);}
.btn-copy.copied{color:var(--green);border-color:var(--ok-bd);}
.diag-placeholder{text-align:center;padding:52px 24px;color:var(--muted);display:flex;flex-direction:column;align-items:center;}
.diag-placeholder i{font-size:30px;width:66px;height:66px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:var(--gd);border:0.5px solid var(--gb);color:var(--gp3);margin-bottom:16px;}
.diag-placeholder b{color:var(--bright);font-size:16px;font-weight:800;margin-bottom:5px;letter-spacing:-.01em;}
.diag-placeholder span{font-size:13px;color:var(--muted);max-width:290px;line-height:1.5;}
/* utilidades de texto del diagnóstico (reemplazan estilos inline repetidos) */
.diag-text{font-size:13px;line-height:1.6;color:rgba(255,255,255,0.74);}
.diag-text--win{color:var(--green);font-weight:500;line-height:1.5;}
.diag-text--quote{font-style:italic;line-height:1.55;}
.diag-text--concept{color:var(--gp3);font-weight:700;}
.diag-note{font-size:13px;color:var(--muted);}
.ref-analysis .item-row{padding:5px 0;font-size:12px;}
.ref-analysis .ir-icon{font-size:12px;}

/* ── GUION DE LLAMADA ── */
.sb-block{border:0.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:8px;}
.sb-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;background:rgba(255,255,255,0.02);border:none;width:100%;font-family:inherit;transition:background .15s;}
.sb-head:hover,.sb-head.open{background:var(--gd);}
.sb-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--gd);color:var(--gp3);border:0.5px solid var(--gb);white-space:nowrap;flex-shrink:0;}
.sb-badge.pre{background:rgba(244,114,182,0.12);color:var(--pk);border-color:rgba(244,114,182,0.3);}
.sb-badge.post{background:var(--ok-bg);color:var(--green);border-color:var(--ok-bd);}
.sb-title{font-size:13px;font-weight:500;color:var(--bright);flex:1;text-align:left;}
.sb-dur{font-size:12px;color:var(--muted);}
.sb-chev{font-size:15px;color:var(--muted);transition:transform .2s;}
.sb-head.open .sb-chev{transform:rotate(180deg);}
.sb-body{display:none;padding:16px;border-top:0.5px solid var(--border);}
.sb-body.open{display:block;}
.talk{font-size:13px;font-weight:300;font-style:italic;color:var(--bright);line-height:1.65;padding:11px 14px;background:var(--acc-bg2);border:0.5px solid var(--gb);border-radius:8px;margin:8px 0;}
.dir{font-size:11px;color:var(--muted);line-height:1.5;padding:4px 0;}
.dir b{color:var(--dim);}
.obj-row{display:flex;align-items:flex-start;gap:8px;margin:8px 0;flex-wrap:wrap;}
.obj-q{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(239,68,68,0.12);color:#fca5a5;border:0.5px solid rgba(239,68,68,0.25);flex-shrink:0;}
.obj-a{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--gd);color:var(--gp3);border:0.5px solid var(--gb);flex-shrink:0;}
.obj-text{font-size:13px;color:var(--dim);line-height:1.5;}
.roles-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.role-g{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:rgba(154,87,245,0.15);color:var(--gp3);border:0.5px solid var(--gb);}
.role-gab{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:rgba(244,114,182,0.12);color:var(--pk);border:0.5px solid rgba(244,114,182,0.3);}
.role-both{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,0.07);color:var(--bright);border:0.5px solid var(--border2);}

/* ── OBJECIONES PANEL ── */
.obj-cat{margin-bottom:18px;}
.obj-cat-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gp3);margin-bottom:10px;display:flex;align-items:center;gap:6px;padding-bottom:6px;border-bottom:0.5px solid var(--border);}
.obj-item{border:0.5px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:6px;}
.obj-question{display:flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(255,255,255,0.02);cursor:pointer;font-family:inherit;border:none;width:100%;text-align:left;transition:background .15s;}
.obj-question:hover{background:rgba(255,255,255,0.04);}
.obj-q-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--err-bg);color:#fca5a5;border:0.5px solid rgba(248,113,113,0.2);flex-shrink:0;}
.obj-q-text{font-size:13px;color:var(--dim);flex:1;}
.obj-answer{display:none;padding:12px 14px;border-top:0.5px solid var(--border);background:rgba(154,87,245,0.04);}
.obj-answer.open{display:block;}
.obj-a-text{font-size:13px;color:rgba(255,255,255,0.72);line-height:1.6;font-style:italic;}

/* ── PROPUESTA PANEL ── */
.pkg-btn{display:flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:13px;font-weight:700;padding:12px 18px;border-radius:var(--r-s);border:var(--bd-w) solid var(--bd2);background:rgba(255,255,255,0.05);color:var(--tx-3);cursor:pointer;min-height:var(--tap-base);transition:background .15s,color .15s,border-color .15s;}
.pkg-btn:hover:not(.on){color:var(--dim);border-color:var(--gb);}
.pkg-btn.on{background:var(--gp1);color:#fff;border-color:transparent;}
.fathom-area{background:rgba(154,87,245,0.05);border:0.5px solid var(--gb);border-radius:12px;padding:16px;margin-bottom:16px;}
.fathom-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gp3);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.prog-steps{display:none;flex-direction:column;gap:8px;padding:16px;background:var(--dark2);border:0.5px solid var(--border);border-radius:10px;margin-bottom:14px;}
.prog-steps.show{display:flex;}
.prog-step{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);padding:4px 0;transition:color .2s;}
.prog-step.active{color:var(--gp3);}
.prog-step.done{color:var(--green);}
.prog-step i{font-size:16px;flex-shrink:0;}
.prop-shell{background:var(--dark2);border:0.5px solid var(--border2);border-radius:14px;overflow:hidden;margin-bottom:14px;display:none;box-shadow:0 20px 50px -35px rgba(0,0,0,.8);}
.prop-shell.show{display:block;}
.prop-nav{display:flex;gap:6px;padding:10px;border-bottom:0.5px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.prop-nav::-webkit-scrollbar{display:none;}
.prop-tab{flex:1;min-width:92px;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:8px 8px;border-radius:9px;background:rgba(255,255,255,0.03);border:0.5px solid transparent;color:rgba(255,255,255,0.5);cursor:pointer;transition:background .18s var(--ease),color .18s,border-color .18s;white-space:nowrap;}
.prop-tab.on{color:#fff;background:linear-gradient(180deg,rgba(154,87,245,0.22),rgba(154,87,245,0.1));border-color:var(--gb);}
.prop-tab:hover:not(.on){background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);}
.prop-body{padding:20px;}
.prop-panel{display:none;}
.prop-panel.on{display:block;}
.prop-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gp3);margin-bottom:8px;}
.prop-headline{font-size:22px;font-weight:900;line-height:1.2;margin-bottom:8px;}
.prop-sub{font-size:14px;color:var(--dim);line-height:1.6;margin-bottom:14px;}
.prop-gar{display:flex;align-items:flex-start;gap:12px;padding:14px;background:rgba(74,222,128,0.06);border:0.5px solid rgba(74,222,128,0.2);border-radius:10px;margin-bottom:14px;}
.prop-gar i{font-size:22px;color:var(--green);flex-shrink:0;margin-top:2px;}
.gar-t{font-size:14px;font-weight:700;color:var(--green);margin-bottom:4px;}
.gar-b{font-size:12px;color:rgba(255,255,255,0.6);line-height:1.5;}
.prop-pills{display:flex;flex-wrap:wrap;gap:6px;}
.prop-pill{font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--gd);color:var(--gp3);border:0.5px solid var(--gb);}
.diag-blk{border:0.5px solid var(--border2);border-radius:10px;padding:13px 15px;margin-bottom:10px;background:rgba(255,255,255,0.02);}
.diag-blk-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.diag-blk-text{font-size:13px;color:rgba(255,255,255,0.7);line-height:1.6;}
.diag-blk-text.pre{white-space:pre-line;}
.diag-blk.accent{border-color:rgba(154,87,245,0.25);}
.diag-blk.accent .diag-blk-label{color:var(--gp3);}
.diag-blk.amber{border-color:var(--warn-bd);}
.diag-blk.amber .diag-blk-label{color:var(--amber);}
.diag-blk.blue{border-color:rgba(147,197,253,0.2);}
.diag-blk.blue .diag-blk-label{color:var(--blue);}
.prop-headline.sm{font-size:20px;}
.price-opt.accent{border-color:var(--gb);}
.price-opt.accent .po-label,.price-opt.accent .po-note{color:var(--gp3);}
.stack-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:0.5px solid var(--border);}
.stack-item:last-child{border-bottom:none;}
.stack-icon{font-size:20px;color:var(--gp2);flex-shrink:0;margin-top:2px;}
.stack-name{font-size:14px;font-weight:700;color:var(--bright);margin-bottom:2px;}
.stack-desc{font-size:12px;color:var(--muted);line-height:1.4;}
.stack-val{font-size:11px;font-weight:700;color:var(--gp3);margin-top:4px;}
.price-box{background:var(--gd);border:0.5px solid var(--gb);border-radius:12px;padding:18px;margin:14px 0;}
.price-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.price-main{font-size:36px;font-weight:900;color:var(--gp3);}
.price-main span{font-size:18px;font-weight:400;color:var(--muted);}
.price-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.price-opt{border:0.5px solid var(--border2);border-radius:8px;padding:10px 12px;}
.po-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.po-val{font-size:16px;font-weight:900;color:var(--bright);}
.po-note{font-size:11px;color:var(--muted);margin-top:2px;}
.cta-q{font-size:20px;font-weight:900;margin-bottom:10px;}
.cta-note{font-size:14px;color:var(--dim);line-height:1.6;margin-bottom:14px;}
.cupos-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:6px 14px;border-radius:999px;background:var(--warn-bg);color:var(--warn);border:var(--bd-w) solid var(--warn-bd);}

/* ── NOTAS ── */
.notes-area{background:rgba(255,255,255,0.02);border:0.5px solid var(--border);border-radius:12px;padding:18px;margin-bottom:16px;}
.notes-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.notes-log{max-height:260px;overflow-y:auto;margin-bottom:10px;}
.note-entry{padding:11px 13px;background:rgba(255,255,255,0.03);border:0.5px solid var(--border);border-radius:10px;margin-bottom:7px;transition:border-color .15s;}
.note-entry:hover{border-color:var(--border2);}
.note-date{font-size:10px;color:var(--muted);margin-bottom:4px;}
.note-text{font-size:13px;color:var(--dim);line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.notes-empty{font-size:12.5px;color:var(--muted);text-align:center;padding:28px 16px;display:flex;flex-direction:column;align-items:center;line-height:1.5;}
.notes-empty i{font-size:22px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--gd);border:0.5px solid var(--gb);color:var(--gp3);margin-bottom:12px;}
.notes-empty b{color:var(--dim);font-size:13.5px;font-weight:800;margin-bottom:3px;}
.btn-add-note{display:flex;align-items:center;gap:6px;font-family:inherit;font-size:12px;font-weight:700;padding:8px 14px;border-radius:var(--r-s);border:var(--bd-w) solid var(--acc-bd);background:var(--acc-bg);color:var(--acc3);cursor:pointer;transition:background var(--dur-1);}
.btn-add-note:hover{background:rgba(154,87,245,0.2);}
.note-input-row{display:flex;gap:8px;margin-top:10px;}
.note-input-row textarea{flex:1;background:rgba(255,255,255,0.05);border:0.5px solid var(--border2);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13px;color:var(--bright);outline:none;resize:none;min-height:60px;transition:border-color .2s,background .2s;}
.note-input-row textarea:focus{background:rgba(154,87,245,0.06);}
.note-input-row textarea:focus{border-color:var(--gp2);}
.note-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.note-tools{display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.note-entry:hover .note-tools,.note-entry:focus-within .note-tools{opacity:1;}
.note-tool{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0.5px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;font-size:14px;padding:0;transition:color .15s,border-color .15s,background .15s;}
.note-tool:hover{color:var(--bright);border-color:var(--border2);background:rgba(255,255,255,0.05);}
.note-tool.del:hover{color:var(--err);border-color:rgba(248,113,113,0.45);background:var(--err-bg);}
.note-edit-input{width:100%;background:rgba(255,255,255,0.05);border:var(--bd-w) solid var(--acc);border-radius:var(--r-s);padding:9px 12px;font-family:inherit;font-size:13px;color:var(--tx);outline:none;resize:vertical;min-height:60px;margin-bottom:8px;line-height:1.5;}
.note-actions{display:flex;gap:6px;}
.note-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:9px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;border:0.5px solid var(--border2);background:rgba(255,255,255,0.04);color:var(--dim);transition:color .15s,background .15s,transform .12s var(--ease);}
.note-btn:hover{color:var(--bright);background:rgba(255,255,255,0.07);}
.note-btn:active{transform:scale(.97);}
.note-btn.save{background:var(--acc-fill);border:none;color:#fff;box-shadow:0 8px 20px -12px rgba(154,87,245,.9);}
.note-btn.save:hover{color:#fff;filter:brightness(1.08);}
.gw-brief-wrap{margin-bottom:16px;}
.gw-brief{border:0.5px solid var(--border);border-radius:8px;background:rgba(255,255,255,0.02);}
.gw-brief>summary{cursor:pointer;padding:11px 13px;font-size:13px;font-weight:700;color:var(--gp3);list-style:none;display:flex;align-items:center;gap:7px;user-select:none;}
.gw-brief>summary::-webkit-details-marker{display:none;}
.gw-chev{transition:transform .2s var(--ease);font-size:15px;}
.gw-brief[open]>summary .gw-chev{transform:rotate(90deg);}
.gw-brief-body{padding:12px 14px 14px;font-size:12.5px;line-height:1.6;color:var(--dim);white-space:pre-wrap;word-break:break-word;max-height:340px;overflow-y:auto;border-top:0.5px solid var(--border);}
.gw-brief-empty{font-size:12.5px;color:var(--muted);padding:11px 13px;border:0.5px dashed var(--border);border-radius:8px;background:rgba(255,255,255,0.02);}
/* ── Progreso de clientes (post-cierre) ── */
.cpr-locked{display:flex;gap:12px;align-items:flex-start;padding:24px;background:rgba(255,255,255,0.02);border:0.5px dashed var(--border2);border-radius:12px;color:var(--dim);font-size:13px;line-height:1.55;}
.cpr-locked i{font-size:20px;color:var(--muted);margin-top:1px;flex-shrink:0;}
.cpr-locked b{color:var(--bright);}
.cpr-help{font-size:12.5px;color:var(--dim);line-height:1.5;margin:0 0 14px;}
.cpr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.cpr-day{font-size:22px;font-weight:800;color:var(--bright);line-height:1;}
.cpr-day span{font-size:14px;color:var(--muted);font-weight:600;}
.cpr-goal{font-size:11px;color:var(--dim);margin-top:4px;}
.cpr-badge{font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap;}
.cpr-badge.ok{color:var(--green);background:var(--ok-bg);}
.cpr-badge.late{color:var(--amber);background:var(--warn-bg);}
/* Tercer estado: aun no se puede decir. Va en gris a proposito, para que no se
   lea como un semaforo: verde y ambar son veredictos, esto es la ausencia de uno. */
.cpr-badge.wait{color:var(--muted);background:rgba(255,255,255,0.06);}
/* De cuando es el numero. Si un dato de hace 5 dias se pinta igual que el de hoy,
   se toman decisiones sobre la garantia con una foto vieja sin saberlo. */
.cpr-fresh{font-size:11px;color:var(--muted);margin-top:2px;}
.cpr-fresh.viejo{color:var(--amber);}
.cpr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
@media(max-width:560px){.cpr-stats{grid-template-columns:1fr 1fr;gap:10px;}.login-left{padding:32px 20px;}}
.cpr-stat{background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;padding:12px;}
.cpr-stat .sv{font-size:20px;font-weight:800;color:var(--bright);line-height:1;}
.cpr-stat .sl{font-size:10.5px;color:var(--muted);margin-top:5px;}
.cpr-stat .sd{font-size:11px;color:var(--green);font-weight:600;margin-top:4px;}
.cpr-barwrap{margin-bottom:16px;}
.cpr-bar{height:8px;background:rgba(255,255,255,0.07);border-radius:999px;overflow:hidden;}
.cpr-bar-fill{height:100%;background:linear-gradient(90deg,var(--gp1),var(--gp3));border-radius:999px;transition:width var(--dur-2) var(--ease);}
.cpr-barlbl{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);margin-top:6px;}
.cpr-chart{background:var(--bg2);border:0.5px solid var(--border);border-radius:10px;padding:14px;margin-bottom:4px;}
.cpr-chart .spark{width:100%;height:80px;display:block;}
.spark{width:100%;display:block;}
.cpr-checkins{display:flex;flex-direction:column;gap:6px;}
.cpr-checkin{padding:10px 12px;background:rgba(255,255,255,0.03);border:0.5px solid var(--border);border-radius:8px;}
.cpr-checkin .cd{font-size:10px;color:var(--muted);margin-bottom:4px;}
.cpr-checkin .cm{font-size:12.5px;color:var(--dim);line-height:1.5;}
.cpr-checkin .cm span{color:var(--bright);font-weight:600;}
.cpr-checkin .cn{font-size:12px;color:var(--dim);margin-top:5px;font-style:italic;}
.cpr-empty{font-size:13px;color:rgba(255,255,255,0.25);text-align:center;padding:18px;}
.cpr-go{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:9px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none;background:linear-gradient(135deg,var(--gp1),var(--gp2));color:#fff;margin-top:6px;transition:filter .15s,transform .15s;}
.cpr-go:hover{filter:brightness(1.08);transform:translateY(-1px);}
.cpr-summary{display:flex;gap:10px;margin-bottom:14px;}
.cpr-sum{flex:1;background:var(--bg2);border:0.5px solid var(--border);border-radius:12px;padding:12px 14px;}
.cpr-sum .v{font-size:22px;font-weight:800;color:var(--bright);line-height:1;}
.cpr-sum .v.ok{color:var(--green);}
.cpr-sum .v span{font-size:14px;color:var(--muted);font-weight:600;}
.cpr-sum .l{font-size:11px;color:var(--muted);margin-top:4px;}
.cpr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
.cpr-card{background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);padding:15px;cursor:pointer;transition:transform var(--dur-2) var(--ease),border-color var(--dur-2);}
.cpr-card:hover{transform:translateY(-3px);border-color:var(--border2);}
.cpr-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.cpr-card-id{display:flex;gap:9px;align-items:center;}
.cpr-card-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--gp1),var(--gp2));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex-shrink:0;}
.cpr-card-name{font-weight:700;font-size:13.5px;color:var(--bright);}
.cpr-card-dayl{font-size:11px;color:var(--muted);margin-top:1px;}
.cpr-card-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px;}
.cpr-card-num{font-size:22px;font-weight:800;color:var(--bright);line-height:1;}
.cpr-card-delta{font-size:11px;color:var(--green);font-weight:600;margin-top:4px;}
.cpr-card-row .spark{flex:1;height:38px;}
.btn-note-save{font-family:inherit;font-size:12px;font-weight:700;padding:8px 14px;border-radius:var(--r-s);border:none;background:var(--acc-fill-flat);color:var(--tx-on-acc);cursor:pointer;align-self:flex-end;}

/* ── MODAL NUEVO LEAD ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);}
.modal-bg.hidden{display:none;}
/* UX-11 · dvh, no vh. Con vh el alto se calculaba sobre la pantalla COMPLETA
   aunque el teclado ocupara 340px, así que "Crear lead" quedaba debajo del
   teclado y había que cerrarlo para poder pulsar. Es el último paso de la
   acción más valiosa del CRM. (.cp-card y .em-card ya usaban dvh; este modal
   se había quedado fuera.) Los navegadores sin dvh ignoran esa parte. */
.modal{background:var(--dark2);border:0.5px solid var(--border2);border-radius:16px;padding:32px;width:100%;max-width:480px;max-height:min(90vh, calc(100dvh - 32px));overflow-y:auto;}
.modal-title{font-size:17px;font-weight:900;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.modal-title i{color:var(--gp2);}
.modal-actions{display:flex;gap:10px;margin-top:20px;}
.btn-modal-create{flex:1;font-family:inherit;font-size:13px;font-weight:700;padding:12px;border-radius:var(--r-s);border:none;background:var(--acc-fill-flat);color:var(--tx-on-acc);cursor:pointer;min-height:var(--tap-base);transition:background var(--dur-1),filter var(--dur-1);}
.btn-modal-create:hover{background:var(--gp2);}
.btn-modal-cancel{font-family:inherit;font-size:13px;font-weight:500;padding:12px 20px;border-radius:var(--r-s);border:var(--bd-w) solid var(--bd2);background:transparent;color:var(--tx-3);cursor:pointer;min-height:var(--tap-base);transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);}
.btn-modal-cancel:hover{color:var(--bright);}

/* ── MOBILE NAV (drawer) ── */
.mobile-topbar{display:none;}
.sidebar-overlay{display:none;}
.menu-toggle{display:none;}
.bottom-nav{display:none;}
.mtb-greet,.mtb-av{display:none;}
/* hoja de perfil (bottom sheet, móvil) */
.perfil-overlay{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.6);display:none;align-items:flex-end;}
.perfil-overlay.show{display:flex;}
.perfil-sheet{width:100%;background:var(--dark2);border-top-left-radius:22px;border-top-right-radius:22px;border-top:0.5px solid var(--border2);padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .32s var(--ease);box-shadow:0 -20px 50px -20px rgba(0,0,0,.7);}
.perfil-overlay.show .perfil-sheet{transform:translateY(0);}
.ps-grab{width:38px;height:4px;border-radius:999px;background:rgba(255,255,255,.2);margin:6px auto 16px;}
.ps-user{display:flex;align-items:center;gap:13px;padding-bottom:16px;margin-bottom:12px;border-bottom:0.5px solid var(--border);}
.ps-av{width:48px;height:48px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:#fff;background:var(--acc-fill);background-size:cover;background-position:center 20%;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.ps-name{font-size:16px;font-weight:800;}
.ps-role{font-size:12.5px;color:var(--muted);margin-top:1px;}
.ps-action{width:100%;display:flex;align-items:center;gap:11px;padding:14px;border-radius:12px;border:0.5px solid var(--border2);background:rgba(255,255,255,.03);color:var(--bright);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;margin-top:8px;transition:background .15s;}
.ps-action i{font-size:19px;color:var(--gp3);}
.ps-action:active{transform:scale(.98);}
.ps-action.danger{color:var(--red);}
.ps-action.danger i{color:var(--red);}
/* ── Modal de correo (borrador) ── */
.em-overlay{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:24px;}
.em-overlay.show{display:flex;}
.em-card{width:100%;max-width:520px;max-height:calc(100dvh - 48px);overflow-y:auto;background:var(--bg2);border:var(--bd-w) solid var(--bd2);border-radius:var(--r-l);padding:22px;box-shadow:var(--sh3);}
.em-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.em-title{font-size:16px;font-weight:900;display:flex;align-items:center;gap:8px;}
.em-title i{color:var(--gp3);}
.em-x{width:30px;height:30px;border-radius:8px;border:0.5px solid var(--border2);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;}
.em-x:hover{color:#fff;border-color:var(--gp2);}
.em-to{font-size:13px;color:var(--dim);margin-bottom:13px;}
.em-to b{color:#fff;}
.em-field{margin-bottom:12px;}
.em-field label{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.em-input,.em-body{width:100%;background:rgba(255,255,255,0.05);border:0.5px solid var(--border2);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13px;color:var(--bright);outline:none;}
.em-body{min-height:160px;resize:vertical;line-height:1.55;}
.em-input:focus,.em-body:focus{border-color:var(--gp2);}
.em-actions{display:flex;gap:8px;margin-top:14px;}
.em-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:13px;font-weight:700;padding:11px;border-radius:var(--r-s);border:var(--bd-w) solid var(--bd2);background:rgba(255,255,255,.04);color:var(--tx-2);cursor:pointer;min-height:var(--tap-base);transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);}
.em-btn:hover{color:#fff;border-color:var(--gp2);}
.em-btn.primary{background:var(--acc-fill);border:none;color:#fff;}
.em-btn.primary:hover{filter:brightness(1.08);}
.em-btn:active{transform:scale(.98);}

@media (max-width:860px){
  /* ── UX-01 · Lo urgente primero, solo en el teléfono ──
     Medido antes: "Acciones pendientes" nacía en y=782 con la barra inferior
     fija ocupando de 754 a 812. El título quedaba TAPADO y el primer
     recordatorio fuera de pantalla, mientras los primeros 750 píxeles eran
     siete botones y ocho contadores en cero.
     El panel se vuelve columna flexible y solo se reordenan dos cosas: el
     centinela del respaldo y el bloque de acciones. Todo lo demás conserva
     su sitio con el orden por defecto. En escritorio no cambia nada. */
  /* ── UX-06 · Lo que se toca todos los días, a 44px ──
     Medido antes: pills de dueño 27px, "Nuevo lead" 30, "Avanzar etapa" 30,
     "Volver al panel" 29, pestañas 35. Se falla el toque y se acaba tocando
     el de al lado. Extiende el patrón que ya existía para .ws-q y .rem-done. */
  /* El justify-content que faltaba: un <button> centra su texto solo mientras
     es inline-block. Al pasarlo a inline-flex por los 44px, "Todos", "German"
     y "Gabriela" se pegaron al borde izquierdo, con hasta 37px de hueco a la
     derecha. Medido: justify-content salia "normal". Mismo remate que .vt-btn. */
  .owner-pill{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .pipe-filtros2 .pipe-filter{min-height:44px;}
  .btn-new{min-height:44px;}
  .stage-tab{min-height:44px;display:inline-flex;align-items:center;}
  .bn-item{min-height:44px;}
  .ag-x,.note-tool{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  #btnAvanzarEtapa,#btnVolverPanel{min-height:44px;}
  /* Los dos que la propia auditoría listaba y se me habían pasado, más los
     que salieron al barrer la aplicación entera a 375px. */
  #ws-status,#ws-owner,#ws-next-action,#pipeFilter,#drpBtn{min-height:44px;}
  #ws-growway-btn,#ws-growway-reset{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .dash-export,.vt-btn,.ct-btn,.lt-filter-btn,.rem-done,.sb-logout{min-height:44px;}
  /* Los del panel que se quedaron cortos: los chips de filtro de la tabla
     median 24px, la leyenda de la grafica 15 (es un <span> pelado, sin nada de
     relleno) y Aplicar/Cancelar del rango de fechas 33.
     Aqui NO sirve el pseudo-elemento: los chips van con hueco de 5px y la
     leyenda de 14, asi que un inset de -10 haria que dos filas seguidas se
     solaparan y se tocaria el filtro de al lado. Con min-height la fila crece
     de verdad y el hueco sigue siendo hueco. .ltf-chip necesita ademas el
     inline-flex: sobre un elemento en linea, min-height no hace nada. */
  .ltf-chip{min-height:44px;display:inline-flex;align-items:center;}
  .cl-item{min-height:44px;}
  .drp-apply,.drp-cancel,.drp-preset{min-height:44px;}
  .btn-modal-cancel,.btn-modal-create{min-height:44px;}
  .vt-btn,.ct-btn,.sb-logout,.rem-done{display:inline-flex;align-items:center;justify-content:center;}

  /* Los que NO pueden crecer sin descolocar lo que los rodea (van dentro de
     un campo o de una tarjeta apretada) se agrandan con un pseudo-elemento
     invisible: la zona de toque sube a ~44px y el dibujo no se mueve. Es el
     mismo truco que ya usaba .lead-del. */
  .pipe-kbd{position:relative;}
  .pipe-kbd::after{content:'';position:absolute;inset:-13px -10px;}

  /* La fila de recordatorios: el botón de WhatsApp con el mensaje ya escrito
     es el control que más se usa en el día (un solo toque) y medía 30x30.
     Los de posponer (+3d, +1sem) medían 19px de alto. */
  .rem-right button[onclick^="agendaFollowupWA"]{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;}
  .rem-right button{position:relative;}
  .rem-right button::after{content:'';position:absolute;inset:-12px -6px;}
  .kb-move button{position:relative;}
  /* Solo en vertical. Los dos chevrones son `flex:1` dentro de una tarjeta de
     273px: 133px cada uno, de ancho van sobrados y el inset horizontal no
     anadia nada. Lo que si hacia era solaparse con el vecino, que esta a 6px,
     y como "siguiente etapa" se pinta despues ganaba el solape. MEDIDO en el
     navegador: los ultimos 4px del dibujo de "etapa anterior" respondian a
     "siguiente etapa", asi que tocabas retroceder y el lead avanzaba. Mover de
     etapa ESCRIBE EN LA BASE, no es cosmetico. El -10px vertical se queda: da
     los 45px de zona de toque. */
  .kb-move button::after{content:'';position:absolute;inset:-10px 0;}
  /* Las acciones directas de la tarjeta crecen de verdad a 44px, sin ::after:
     son tres en fila y un inset fantasma se solaparia con el vecino. */
  .kb-act{min-height:44px;}

  /* ── UX-07 · La quinta pestaña existe ──
     Medido: la barra mide 350 y su contenido 432, así que "5 Progreso" queda
     fuera y NADA indica que se puede deslizar. Ahí vive el seguimiento de 90
     días de cada cliente que paga, o sea la garantía de +10K. Se copia lo que
     ya funciona en el kanban: anclaje al deslizar y un degradado en el borde. */
  .ws-mid{position:relative;}
  .stage-tabs{scroll-snap-type:x proximity;}
  .stage-tab{scroll-snap-align:start;}
  /* El degradado iba en top:0, es decir sobre #ws-mini, NO sobre las pestanas:
     desvanecia el nombre del lead y dejaba la barra sin aviso. Dentro de
     .ws-mid lo primero es el mini-encabezado, no las pestanas. Se le fija el
     alto para que la cuenta sea exacta (10 de relleno + 18 de linea = 28) y el
     degradado baja a la franja real de pestanas, que mide 8 + 44 + 8 = 60.
     Ahora que las pestanas se miden por su contenido, este aviso es lo unico
     que dice que hay mas a la derecha, asi que tiene que estar donde toca.
     De paso el nombre se alinea con las pestanas: llevaba 32px de relleno
     lateral donde todo lo demas usa 16. El !important es porque ese relleno va
     en el atributo style del elemento. */
  #ws-mini{padding:10px 16px 0!important;line-height:18px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ws-mid::after{content:'';position:absolute;top:28px;right:0;width:26px;height:60px;
    pointer-events:none;z-index:2;background:linear-gradient(to right,rgba(19,19,31,0),var(--dark2));}

  /* UX-14 · "Volver al panel" nacía pegado al borde (left:0), donde en iOS
     compite con el gesto de "atrás" del sistema. */
  #workspace{padding:0 12px;}

  /* UX-15 · "Ctrl K" en un aparato sin tecla Ctrl, comiéndose 84 de los 271px
     del buscador: el texto se cortaba en "...o nich". El "?" se queda: es el
     único acceso a la ayuda desde el cajón. */
  .pipe-kbd:not(.pipe-ayuda){display:none;}
  .pipe-search input{padding-right:40px!important;}
  /* Al esconder "Ctrl K", el "?" se quedo donde estaba (right:54px, puesto en
     linea) y eso es DENTRO del texto: el padding derecho solo reserva 40.
     MEDIDO en el navegador: 39 de los 271px del campo respondian al boton de
     ayuda, justo donde acaba lo que escribes, asi que tocar el final de tu
     busqueda para corregir una letra abria la pantalla de ayuda. El
     !important es obligatorio, el right:54px es estilo en linea. */
  .pipe-search .pipe-ayuda{right:6px!important;}

  /* UX-13 · La fecha no se leía (2,0:1). Fuera del móvil: gana sitio para
     medio lead más en una lista donde solo caben 2,7. */
  .lead-date{display:none;}

  /* UX-04 · La papelera baja a la esquina INFERIOR derecha. Arriba a la
     derecha es exactamente donde cae el pulgar al bajar la lista con una
     mano, y ahí había 40x40 de "borrar" invisibles. */
  .lead-del{top:auto;bottom:8px;right:8px;}

  .dashboard{display:flex;flex-direction:column;}
  /* Solo .dash-head: los order de toolbar, centinela y js-urgente viven mas
     abajo (bloque UX), que a igual especificidad gana por cascada. Aqui
     habia tres reglas muertas que confundian al que venia a tocar esto. */
  .dashboard > .dash-head{order:-4;}
  /* El primer título ya no necesita el hueco que lo separaba de las métricas */
  .dash-dos .dash-col:first-child .dash-section-title{margin-top:8px;}
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;top:0;left:0;z-index:95;width:min(86vw,300px);height:100dvh;transform:translateX(-100%);transition:transform .28s var(--ease);box-shadow:2px 0 28px rgba(0,0,0,0.55);}
  .app.nav-open .sidebar{transform:translateX(0);}
  .sidebar-overlay{display:block;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,0.62);opacity:0;pointer-events:none;transition:opacity .28s var(--ease);}
  .app.nav-open .sidebar-overlay{opacity:1;pointer-events:auto;}

  .mobile-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:60;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));background:rgba(19,19,31,0.92);backdrop-filter:blur(8px);border-bottom:0.5px solid var(--border);}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;border:0.5px solid var(--gb);background:var(--gd);color:var(--gp3);font-size:20px;cursor:pointer;flex-shrink:0;}
  .menu-toggle:hover{background:rgba(154,87,245,0.2);}
  .mobile-brand{display:none;}
  .mtb-greet{display:block;flex:1;min-width:0;}
  .mtb-hi{font-size:15px;font-weight:900;letter-spacing:-.01em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mtb-sub{font-size:11.5px;color:var(--muted);margin-top:1px;}
  .mtb-av{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;flex-shrink:0;background:var(--acc-fill);background-size:cover;background-position:center 20%;font-size:14px;font-weight:900;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
  /* barra de navegación inferior tipo app */
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;align-items:center;justify-content:space-around;gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(19,19,31,0.96);backdrop-filter:blur(12px);border-top:0.5px solid var(--border);}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--muted);font-family:inherit;font-size:9.5px;font-weight:700;letter-spacing:.02em;cursor:pointer;padding:3px 0;transition:color .15s;}
  .bn-item i{font-size:21px;}
  .bn-item.on{color:var(--gp3);}
  .bn-item:active{transform:scale(.94);}
  .bn-fab{flex:0 0 auto;width:54px;height:54px;border-radius:17px;background:var(--acc-fill);display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;border:none;cursor:pointer;box-shadow:0 12px 26px -8px rgba(154,87,245,.95),inset 0 1px 0 rgba(255,255,255,.25);margin-top:-20px;}
  .bn-fab:active{transform:scale(.95);}
  /* La barra inferior NO mide 60: mide 60 mas la franja de gestos del iPhone
     (env(safe-area-inset-bottom), 34px en los modelos con barra), o sea 94.
     Con 80 fijos, los ultimos 14px de contenido quedaban DEBAJO de la barra, y
     se nota en la ficha del lead, que no reserva nada por su cuenta.
     La carcasa ya sumaba el inset en su propio armazon; aqui faltaba. */
  .main{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));}
  /* tabla de leads → lista tipo transacción en móvil */
  .app .lead-table-card{overflow-x:visible;}
  .app .lt-head{display:none;}
  .app .lt-row{grid-template-columns:1fr auto;min-width:0;gap:12px;padding:12px 10px;border-bottom:0.5px solid var(--border);border-radius:0;}
  .app .lt-body > .lt-row:last-child{border-bottom:none;}
  .app .lt-row > .lt-cell{display:none;}
  .app .lt-row > .lt-cell.lt-val{display:block;font-size:15px;}

  /* pase de espaciados móvil (prefijo .app donde el CSS base va después, para ganar la cascada) */
  .app .dashboard,.app #fathomView{padding:20px 16px 40px;}
  .app .dash-title{font-size:23px;}
  .app .dash-toolbar{margin-bottom:18px;}
  .app .lead-header{padding:16px 16px 14px;flex-wrap:wrap;}
  .app .lead-header-name{font-size:18px;}
  .app .followup-bar{padding:12px 16px;gap:10px;}
  .app .stage-tabs{padding:8px 14px;}
  .app .stage-tab{min-width:84px;padding:9px 8px;}
  .app .stage-panel{padding:18px 16px 36px;}
  .g2,.g3{grid-template-columns:1fr;gap:0;}
  .price-opts{grid-template-columns:1fr;}
  .modal{padding:22px 20px;}
  /* la tabla del panel: scroll horizontal cómodo */
  .app .lead-table-card{border-radius:12px;}
}
@media (max-width:420px){
  .score-grid{grid-template-columns:1fr;}
  .lead-header{padding:14px 14px 12px;}
  .stage-panel{padding:16px 14px 32px;}
  .app .dashboard,.app #fathomView{padding:18px 13px 32px;}
  .app .dash-title{font-size:21px;}
  .app .stage-tabs{padding:8px 12px;gap:5px;}
  /* Las 5 pestanas NO caben a 375px se haga lo que se haga: con min-width 76
     suman 380 mas 20 de huecos = 400 dentro de 295 utiles. O sea que
     apretarlas a 76 y bajar la letra a 10px no evitaba el deslizamiento, solo
     dejaba 60px de caja interior para el numero (15), el hueco (7), la palabra
     y el punto de estado, y el boton no recorta (white-space:nowrap sin
     overflow), asi que el texto se salia de su propio boton.
     Se dejan medir por su contenido y se desliza con dignidad: la barra ya
     tiene anclaje (scroll-snap) y el degradado que avisa de que hay mas. */
  .app .stage-tab{flex:0 0 auto;min-width:0;font-size:11px;letter-spacing:.03em;padding:9px 11px;}
}

/* ── AVISO DE ERROR DE DATOS (no bloqueante) ── */
.data-error{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);max-width:min(420px,calc(100vw - 24px));display:flex;align-items:flex-start;gap:9px;background:var(--dark2);border:0.5px solid rgba(248,113,113,0.5);color:#fecaca;font-size:13px;line-height:1.45;padding:12px 16px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.data-error.show{opacity:1;transform:translateX(-50%) translateY(0);}
.data-ok{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);max-width:min(420px,calc(100vw - 24px));display:flex;align-items:flex-start;gap:9px;background:var(--dark2);border:0.5px solid rgba(74,222,128,0.5);color:#bbf7d0;font-size:13px;line-height:1.45;padding:12px 16px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.data-ok.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── BÚSQUEDA + FILTRO DEL PIPELINE ── */
.pipe-tools{padding:0 14px 8px;display:flex;flex-direction:column;gap:8px;}
.pipe-search{position:relative;display:flex;align-items:center;}
.pipe-search i{position:absolute;left:10px;font-size:14px;color:var(--muted);pointer-events:none;}
.pipe-search input{width:100%;background:rgba(0,0,0,0.3);border:0.5px solid var(--border2);border-radius:8px;padding:8px 84px 8px 30px;font-family:inherit;font-size:12px;color:var(--bright);outline:none;transition:border-color .15s;}
.pipe-search input:focus{border-color:var(--gp2);}
.pipe-search input::placeholder{color:var(--placeholder);}
.pipe-filter{background:rgba(0,0,0,0.3);border:0.5px solid var(--border2);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:12px;color:var(--bright);outline:none;cursor:pointer;transition:border-color .15s;}
.pipe-filter:focus{border-color:var(--gp2);}
/* Valor y proxima accion en una sola fila: una linea mas en la barra, no dos. */
.pipe-filtros2{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.pipe-filtros2 .pipe-filter{min-width:0;width:100%;}
.pipe-filter option{background:var(--dark3);}
.brand-home{cursor:pointer;}

/* ── DASHBOARD ── */
/* #fathomView va PEGADO a .dashboard en las cuatro reglas de relleno, y no
   con valores propios. Reutiliza .dash-head-row y .dash-acciones pero NO vive
   dentro de .dashboard, asi que nacio sin relleno lateral: medido a 375px, las
   tarjetas iban de 0 a 375, pegadas a los dos bordes de la pantalla, cuando el
   resto del CRM respira 13px. Con dos listas de valores separadas volveria a
   descuadrarse en cuanto se toque una. */
/* margin-inline:auto ademas del tope: sin el, al plegar la carcasa el ancho
   liberado se quedaba entero como un pasillo muerto a la DERECHA. Centrado,
   el aire se reparte en dos margenes simetricos que se leen como diseno. */
.dashboard,#fathomView{padding:32px 32px 48px;max-width:1400px;margin-inline:auto;}
.dash-title{font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1;}
.dash-sub{font-size:13px;color:var(--muted);margin-top:6px;margin-bottom:26px;line-height:1.5;}
.dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px;}
.metric-card{display:flex;align-items:center;gap:15px;background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);padding:18px 20px;transition:transform var(--dur-2) var(--ease),border-color var(--dur-2);}
.metric-card:hover{transform:translateY(-2px);border-color:var(--border2);}
.metric-card.metric-accent{background:linear-gradient(135deg,var(--gd),rgba(154,87,245,0));border-color:var(--gb);}
.metric-ic{width:52px;height:52px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.metric-ic i{font-size:25px;}
.metric-body{min-width:0;flex:1;}
.metric-label{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.metric-val{font-size:28px;font-weight:900;line-height:1;letter-spacing:-.02em;}
.metric-unit{font-size:14px;font-weight:700;color:var(--muted);margin-left:2px;}
.metric-accent .metric-val{color:var(--gp3);}
.metric-sub{font-size:11px;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.metric-trend{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;}
.metric-trend i{font-size:12px;}
.metric-trend.up{color:var(--green);background:var(--ok-bg);}
.metric-trend.down{color:var(--red);background:var(--err-bg);}
.metric-trend.flat{color:var(--gp3);background:var(--gd);}
/* ── INGRESOS a lo ancho (mock JARVIS, 23-ago): dos tarjetas arriba (la MRR,
   acentuada, mas ancha) y Ticket promedio de borde a borde abajo, con la
   serie mensual REAL llenando el lado derecho. El id pesa mas que las reglas
   de .dash-metrics de los @media de mas abajo, asi que el movil se repite
   aqui, pegado a su regla base para no caer en la trampa del orden. */
#dashIngresos{grid-template-columns:2fr 3fr;}
#dashIngresos .metric-card:nth-child(3){grid-column:1/-1;}
/* La onda no compite con el texto: si no cabe al lado, salta a su propia
   linea (24-ago, "se ve desordenado": la onda estrujaba el sub a 4 lineas).
   El flex-basis:auto del cuerpo es la pieza clave: con el flex:1 global
   (basis 0) el cuerpo "no mide nada" al calcular el salto de linea, la onda
   nunca saltaba y el texto pagaba el estrujon. */
#dashIngresos .metric-card{flex-wrap:wrap;}
#dashIngresos .metric-body{flex:1 1 auto;}
@media (max-width:860px){
  #dashIngresos{grid-template-columns:1fr;}
  #dashIngresos .metric-card:nth-child(3){grid-column:auto;}
}
.metric-spark{flex:1 1 90px;min-width:90px;align-self:center;}
.metric-spark svg{display:block;width:100%;height:34px;}
/* ── GRÁFICOS del panel (barras + dona) ── */
.chart-card{background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);padding:16px 18px;}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.chart-title{font-size:15px;font-weight:800;letter-spacing:-.01em;}
.chart-sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.chart-badge{font-size:11px;font-weight:700;color:var(--gp3);background:var(--gd);border:0.5px solid var(--gb);border-radius:999px;padding:4px 11px;white-space:nowrap;}
.bars{display:flex;align-items:flex-end;gap:7px;height:180px;padding-top:22px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:9px;height:100%;cursor:default;}
.bar{width:100%;max-width:30px;min-height:4px;border-radius:7px 7px 5px 5px;background:rgba(154,87,245,.15);transition:height var(--dur-2) var(--ease),background .18s;position:relative;}
.bar-col:hover .bar{background:rgba(154,87,245,.32);}
.bar.on{background:var(--acc-fill);box-shadow:0 8px 20px -8px rgba(154,87,245,.75);}
.bar-val{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;background:#000;color:#fff;padding:2px 7px;border-radius:7px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .15s;box-shadow:0 4px 12px rgba(0,0,0,.5);}
.bar.on .bar-val,.bar-col:hover .bar-val{opacity:1;}
.bar-lbl{font-size:10px;font-weight:600;color:var(--muted);text-transform:capitalize;}
.bar-col.on .bar-lbl{color:var(--gp3);font-weight:800;}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;}
.donut-svg{width:172px;height:172px;}
.donut-center{font-size:30px;font-weight:900;fill:#fff;}
.donut-center-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--muted);}
.donut-legend{display:flex;gap:18px;}
.donut-leg{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--dim);}
.donut-leg .dl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.donut-leg b{color:#fff;font-weight:800;}
.chart-empty{height:172px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--muted);padding:0 20px;}
/* mini-embudo del pipeline (llena el card de Conversión) */
.mini-funnel{margin-top:16px;padding-top:15px;border-top:0.5px solid var(--border);}
.mf-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;}
.mf-row{display:grid;grid-template-columns:80px 1fr 22px;align-items:center;gap:9px;margin-bottom:8px;cursor:pointer;border-radius:6px;transition:background .14s;}
.mf-row:hover{background:rgba(255,255,255,.03);}
.mf-lbl{font-size:11.5px;font-weight:600;color:var(--dim);display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mf-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.mf-track{height:7px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden;}
.mf-fill{height:100%;border-radius:999px;transition:width var(--dur-2) var(--ease);}
.mf-n{font-size:12px;font-weight:800;text-align:right;}
/* ── TABLA de leads recientes (estilo dashboard) ── */
.lead-table-card{background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);padding:8px 8px 10px;overflow-x:auto;}
.lt-row{display:grid;grid-template-columns:2.1fr 1.15fr 0.9fr 0.75fr 0.85fr 0.9fr 0.9fr;align-items:center;gap:12px;padding:12px 16px;min-width:860px;border-radius:10px;}
.lt-head{padding:10px 16px 12px;border-bottom:0.5px solid var(--border);border-radius:0;}
.lt-head > div{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);cursor:pointer;user-select:none;display:flex;align-items:center;gap:3px;transition:color .14s;}
.lt-head > div:hover{color:#fff;}
.lt-head .lt-sort-ic{font-size:13px;opacity:.5;}
.lt-head .sorted{color:var(--gp3);}
/* filtros de tabla */
.lt-filter-btn{font-family:inherit;font-size:12px;font-weight:700;padding:7px 13px;border-radius:9px;border:0.5px solid var(--border2);background:var(--dark2);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s;text-transform:none;letter-spacing:0;}
.lt-filter-btn:hover{border-color:var(--gp2);}
.lt-filter-btn i{color:var(--gp3);}
#ltFilterBadge{background:var(--gp1);color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px;margin-left:2px;}
.lt-filters{display:none;background:var(--dark2);border:0.5px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px;}
.lt-filters.show{display:block;animation:pIn .2s var(--ease) both;}
.ltf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;}
.ltf-group label{display:block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.ltf-group select,.ltf-group input{width:100%;background:rgba(255,255,255,0.05);border:0.5px solid var(--border2);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:12.5px;color:#fff;color-scheme:dark;}
.ltf-chips{display:flex;flex-wrap:wrap;gap:5px;}
.ltf-chip{font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;border:0.5px solid var(--border2);background:rgba(255,255,255,.03);color:var(--dim);cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);}
.ltf-chip.on{background:var(--gd);border-color:var(--gb);color:var(--gp3);}
.lt-detail{grid-column:1 / -1;padding:14px 16px 6px;border-top:0.5px dashed var(--border);min-width:860px;}
.lt-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 20px;margin-bottom:12px;}
.ltd-item .k{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.ltd-item .v{font-size:13px;color:var(--dim);line-height:1.5;margin-top:2px;white-space:pre-wrap;word-break:break-word;}
.lt-empty-tbl{padding:32px;text-align:center;color:var(--muted);font-size:13px;min-width:860px;}
.lt-body .lt-row{cursor:pointer;transition:background .14s;}
.lt-body .lt-row:hover{background:rgba(255,255,255,.03);}
.lt-lead{display:flex;align-items:center;gap:12px;min-width:0;}
.lt-av{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}
.lt-info{min-width:0;}
.lt-name{font-size:13.5px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lt-nicho{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;}
.lt-cell{font-size:13px;color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lt-muted{color:var(--muted);font-size:12px;}
.lt-val{font-weight:800;color:#fff;}
.lt-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.045);}
.lt-chip .lt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
/* El margen superior y el estilo del icono vivian COPIADOS EN LINEA en los 17
   titulos del panel (style="margin-top:32px" y style="font-size:13px;margin-
   right:5px" en cada uno), porque cada seccion nueva copiaba a la anterior.
   Aqui, una sola vez. El modificador .con-accion es para el unico titulo que
   lleva un control a la derecha (Base de datos, boton Filtros). */
.dash-section-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gp3);margin-top:32px;margin-bottom:14px;display:flex;align-items:center;}
/* ── Indice del panel: pegado arriba mientras se desplaza ── */
.dash-indice{position:sticky;top:0;z-index:5;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
  padding:10px 2px;margin:0 -2px;scrollbar-width:none;
  /* Fondo del color del lienzo y no translucido: al pegarse pasa por encima
     de las secciones y un blur aqui costaria composicion en cada scroll. */
  background:var(--dark);}
.dash-indice::-webkit-scrollbar{display:none;}
.dash-indice button{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;padding:7px 13px;min-height:32px;
  border-radius:var(--r-pill);border:var(--bd-w) solid var(--bd);background:none;color:var(--muted);
  cursor:pointer;transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1);}
.dash-indice button:hover{color:#fff;border-color:var(--acc-bd2);}
.dash-indice button.on{color:#fff;border-color:var(--acc-bd2);background:var(--acc-bg);}
.app.dash-simple .dash-indice [data-adv]{display:none;}
@media (max-width:860px){
  /* Dedos, no raton. */
  .dash-indice button{min-height:44px;padding:10px 14px;}
}
/* El salto no debe dejar el titulo escondido debajo de la barra pegada. */
#dashReminders,#dashValorJuego,#actoDinero,#actoAdquisicion,#actoAnalisis,#dashProgressTitle{scroll-margin-top:62px;}
.dash-section-title i{font-size:13px;margin-right:5px;}
.dash-section-title.con-accion{justify-content:space-between;}
/* Dos columnas del acto Hoy. minmax(0,1fr) y no 1fr a secas: la leccion de
   min-width:auto ya nos costo un desborde de pagina entera en el Kanban. */
/* ══ CENTRO DE MANDO (bento + hero). Tarjetas .b-card, filas .b-fila con
   auto-fit (si no caben al lado, caen a una columna sin media queries), y el
   hero de tres columnas con el globo dominante. minmax con min(320px,100%) y
   no 1fr a secas: la leccion del min-width:auto del Kanban. auto-fit colapsa
   pistas vacias: una fila de una sola tarjeta ocupa todo el ancho. */
.b-fila{display:grid;gap:14px;margin-top:14px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
.b-card{background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);
  padding:16px;min-width:0;}
.b-col{display:flex;flex-direction:column;gap:14px;min-width:0;}
.b-col > .b-card,.b-col > .chart-card{flex:1;min-width:0;}
.b-card .dash-section-title,.dash-col.b-card .dash-section-title{margin-top:0;margin-bottom:12px;}
.b-card > .dash-metrics{margin-bottom:0;
  /* auto-fit: dentro de media fila, las 3 columnas fijas dejaban tarjetas de
     ~150px con el texto en vertical y la tercera cortada. Asi caen 2+1 o en
     columna segun quepa. */
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));}

/* EL HERO: pipeline+cierre | GLOBO | fuentes+actividad. El globo manda. */
.b-heroe{display:grid;grid-template-columns:minmax(250px,3fr) minmax(340px,4.6fr) minmax(250px,3fr);
  gap:14px;margin-top:14px;align-items:stretch;}
.b-heroe .b-globo{display:flex;flex-direction:column;}
/* Dentro del hero, el radar apila: globo arriba a lo ancho, capas y lista en
   dos columnas debajo. Fuera del hero (si volviera a moverse) conserva sus
   tres columnas. */
.b-heroe .gr-grid{grid-template-columns:1fr 1fr;flex:1;}
.b-heroe .gr-grid .gl-caja{grid-column:1 / -1;order:-1;height:380px;}
.b-heroe .rd-panel-s{max-height:190px;}
@media (max-width:1280px){
  .b-heroe{grid-template-columns:1fr;}
  .b-heroe .b-globo{order:-1;}
  .b-heroe .gr-grid .gl-caja{height:300px;}
}
/* La primera fila (Acciones | Por dueño) entra al mismo ritmo. */
.dash-dos{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-top:14px;}
@media (max-width:1100px){ .dash-dos{display:block;} .dash-dos .dash-col + .dash-col{margin-top:14px;} }
/* La grafica en la columna del hero: leyenda y cabecera compactas (5 series
   envolvian en dos filas y se comian la tarjeta). */
.b-heroe .chart-legend{gap:8px 12px;margin-top:10px;padding-top:10px;}
.b-heroe .chart-card .chart-head{margin-bottom:8px;}
.dash-sync{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ok);white-space:nowrap;}
.dash-sync .ds-punto{width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px rgba(74,222,128,.7);}
@media (max-width:860px){ .dash-sync{display:none;} }
.dash-kbd{font-size:9px;font-weight:700;letter-spacing:.06em;border:var(--bd-w) solid var(--border2);
  border-radius:5px;padding:2px 5px;margin-left:7px;color:var(--muted);}
/* Compactado del pipeline: 10 filas son inventario, no lectura larga. */
.dash-stages{display:flex;flex-direction:column;gap:6px;}
.stage-row{display:grid;grid-template-columns:118px 1fr 58px;align-items:center;gap:10px;cursor:pointer;padding:3px 6px;border-radius:8px;transition:background .15s;}
.stage-row:hover{background:rgba(255,255,255,0.03);}
.stage-row-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--dim);}
.stage-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.stage-bar-track{height:8px;background:rgba(255,255,255,0.05);border-radius:999px;overflow:hidden;}
.stage-bar-fill{height:100%;border-radius:999px;transition:width var(--dur-2) var(--ease);}
.stage-row-count{font-size:14px;font-weight:900;text-align:right;}
/* Ingresos entre 861 y 1100: tres columnas de 1fr dejan al cuerpo de la
   tarjeta 48px a 861 y 104 a 1024, y "$18,000 /mes" pide 119. Como
   .metric-body lleva min-width:0 la tarjeta no crece y la cifra se sale por
   encima de la vecina.
   EL RANGO ES OBLIGATORIO, y no un `max-width:1100` a secas. Lo puse asi en la
   segunda tanda y se colo hasta el telefono: al ir mas abajo en el archivo que
   la regla de una columna del bloque de 860, ganaba tambien alli. Medido en el
   iPhone de German: dos columnas de 223px en una pantalla de 375, con la
   segunda tarjeta saliendose 99px. Cuarto caso hoy de la misma trampa, y el
   unico que llego a produccion. */
@media (min-width:861px) and (max-width:1100px){
  .dash-metrics{grid-template-columns:1fr 1fr;}
}

@media (max-width:860px){
  .dashboard,#fathomView{padding:18px 16px 36px;}
  .dash-metrics{grid-template-columns:1fr;}
  /* La pista del contador era de 26px, pero ahi no vive solo el numero: desde
     que se le anadio el "%" (10px mas 4 de margen) el contenido pide 37px con
     que se le anadio el "%" (10px mas 4 de margen) el contenido pide 37px con
     dos cifras. MEDIDO con 60 leads: el peor caso real se sale 2px sobre la
     barra, no los 5 que temiamos, pero se sale. 44px cubren el caso de tres
     cifras y a la barra le quedan 171, de sobra para leer la proporcion.
     El min-height es aparte y pesa mas: la fila ENTERA es pulsable (llama a
     filterByStage) y medía 28px de alto. */
  /* 118 y no 104. La etiqueta mas larga es "Propuesta enviada", y MEDIDA en el
     navegador forzando una linea pide 116px (el agente habia calculado 110,5 y
     se quedaba corto, asi que un primer intento con 112 seguia partiendo dos
     de las diez). A 104 se partian en dos renglones. A la barra le quedan 157,
     de sobra para leer la proporcion. */
  .stage-row{grid-template-columns:118px 1fr 44px;gap:9px;min-height:44px;}
  .followup-bar{padding:12px 16px;}
}

/* ── SEGUIMIENTO: dueño + próxima acción + fecha ── */
.followup-bar{display:flex;gap:12px;align-items:flex-end;padding:14px 32px;border-bottom:0.5px solid var(--border);background:var(--dark2);flex-wrap:wrap;}
.fu-group{display:flex;flex-direction:column;gap:5px;}
.fu-grow{flex:1;min-width:160px;}
.fu-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.fu-owner,.fu-input{background:rgba(255,255,255,0.05);border:0.5px solid var(--border2);border-radius:9px;padding:8px 11px;font-family:inherit;font-size:13px;color:var(--bright);outline:none;transition:border-color .15s,color .15s;}
.fu-input{width:100%;}
.fu-owner:focus,.fu-input:focus{border-color:var(--gp2);}
.fu-owner{cursor:pointer;}
.fu-owner option{background:var(--dark3);color:var(--bright);}
.fu-date{color-scheme:dark;cursor:pointer;}
.fu-owner.owner-german{border-color:var(--gb);color:var(--gp3);}
.fu-owner.owner-gabriela{border-color:var(--pk-b);color:var(--pk);}

/* filtro por dueño (pills) */
.owner-filter{display:flex;gap:6px;}
.owner-pill{flex:1;font-family:inherit;font-size:11px;font-weight:700;padding:6px 8px;border-radius:7px;border:0.5px solid var(--border2);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.55);cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;}
.owner-pill:hover:not(.on){color:rgba(255,255,255,0.85);}
.owner-pill.on{background:var(--gd);border-color:var(--gb);color:var(--gp3);}
.owner-pill.on[data-owner="gabriela"]{background:var(--pk-d);border-color:var(--pk-b);color:var(--pk);}

/* dueño en la tarjeta del lead */
.lead-owner{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;margin-top:6px;}
.lead-owner .owner-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* recordatorios en el dashboard */
.dash-reminders{display:flex;flex-direction:column;gap:7px;}
.reminder{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;border:0.5px solid var(--border);background:rgba(255,255,255,0.02);transition:background .15s,border-color .15s;}
.reminder:hover{background:rgba(154,87,245,0.06);border-color:var(--gb);}
.reminder.overdue{border-color:var(--err-bd);background:rgba(248,113,113,0.05);}
.reminder.today{border-color:rgba(251,191,36,0.35);background:rgba(251,191,36,0.05);}
.rem-main{min-width:0;cursor:pointer;}
.rem-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.rem-done{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:0.5px solid var(--border2);background:rgba(255,255,255,0.04);color:var(--muted);cursor:pointer;font-size:16px;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;flex-shrink:0;}
.rem-done:hover{color:var(--green);border-color:var(--ok-bd);background:var(--ok-bg);}
.rem-name{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:7px;}
.rem-name .owner-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.rem-action{font-size:12px;color:var(--dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rem-date{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0;background:rgba(255,255,255,0.06);color:var(--dim);}
.rem-date.overdue{background:var(--err-bg);color:#fca5a5;}
.rem-date.today{background:var(--warn-bg);color:var(--amber);}
.reminders-empty{font-size:12px;color:var(--muted);padding:14px;text-align:center;border:0.5px dashed var(--border2);border-radius:10px;}
/* ── FASE 4 · lo que la lista de pendientes trae de FUERA del CRM (Agenda y
      Viral Scanner). Todo aditivo: la fila sigue siendo .reminder, con las
      mismas reglas de color. Solo se añaden la etiqueta del grupo, el globo
      "nueva", el pie de "+N más" y el botón del estado vacío. ── */
.rem-group{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:8px 2px 1px;}
.rem-group:first-child{margin-top:0;}
.rem-group i{font-size:12px;}
.rem-nueva{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gp3);border:0.5px solid var(--gp2);border-radius:999px;padding:1px 7px;white-space:nowrap;}
.rem-mas{text-align:center;padding:8px;font-size:12px;color:var(--muted);cursor:pointer;border-radius:8px;}
.rem-mas:hover{color:var(--gp3);background:rgba(154,87,245,0.06);}
.rem-ir{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:0.5px solid var(--border2);background:rgba(255,255,255,0.04);color:var(--muted);cursor:pointer;font-size:15px;flex-shrink:0;text-decoration:none;transition:color .15s,border-color .15s,background .15s;}
.rem-ir:hover{color:var(--gp3);border-color:var(--gb);background:rgba(154,87,245,0.08);}
.rem-vacio-t{font-size:13px;font-weight:700;color:#fff;margin-bottom:5px;}
.rem-cta{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:7px 14px;border-radius:8px;border:0.5px solid var(--gb);background:var(--acc-bg);color:var(--gp3);cursor:pointer;}
.rem-cta:hover{background:rgba(154,87,245,0.18);}

/* ══════════════════════════════════════════════════════════════════════════
   ESTADO VACIO DEL PANEL GENERAL  ·  .pv-*   (Tanda 1, 22-ago-2026)
   ──────────────────────────────────────────────────────────────────────────
   POR QUE EXISTE, Y POR QUE NO ES UN DETALLE

   Hoy hay 1 lead, 4 eventos y 158 visitas en toda la historia del sitio. Con
   eso NO se puede dibujar la conversion etapa por etapa, ni los dias promedio,
   ni la tendencia a 6 meses. Una conversion calculada sobre 1 lead da 100%:
   cierto y basura.

   Asi que esto NO es la pantalla de relleno mientras llega lo bueno. Es LA
   VISTA que German y Gabriela van a mirar las primeras semanas. Merece el
   mismo cuidado que la grafica que algun dia la sustituya.

   LA REGLA, y es lo que lo separa de un "sin datos" cualquiera:
   cada hueco dice QUE le falta y CUANTO. "Hacen falta unos 20 leads
   decididos; hoy hay 1" convierte un hueco en una meta. "Sin datos" no dice
   nada y ademas se lee como que algo se rompio.

   TRES ESTADOS, no uno. La diferencia importa y ya vive en este codigo: mira
   el comentario de _pendVacio(), que solo escribe "no te quedan llamadas" si
   la agenda RESPONDIO. Aqui igual:
     .pv          gris   · aun no hay datos suficientes (se llenara solo)
     .pv.no-medible ambar · no se puede calcular, y hace falta HACER algo
     .pv.roto     rojo   · la consulta fallo. No es lo mismo que estar vacio,
                           y pintarlos igual esconde una averia durante dias.

   MOVIMIENTO: NINGUNO, y es una decision, no un olvido. Estos bloques se ven
   en CADA carga del panel durante semanas. Una animacion de entrada que se ve
   cien veces deja de ser un detalle bonito y se vuelve un peaje. Las
   transiciones de aqui son solo de hover, sobre color, que es lo unico que
   responde a algo que hizo la persona.
   ══════════════════════════════════════════════════════════════════════════ */
.pv{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  /* 16px y no 26: un hueco de "aun no hay datos" no puede ocupar mas ceremonia
     que las secciones CON datos. Medido antes del recorte: el vacio grande de
     Meta media 321px, mas que Ingresos y Cobros juntos con contenido real. */
  padding:16px 18px; gap:3px;
  border:var(--bd-w) dashed var(--border2); border-radius:var(--r);
  background:rgba(255,255,255,0.015);
}
/* Compacto, para cuando el hueco vive DENTRO de otra tarjeta y no manda. */
.pv.pv-mini{ padding:15px 14px; }

/* ── El hueco CON meta, en fila (referencia definitiva): icono en circulo,
   texto a la izquierda, "N de M" y su barra a la derecha. ── */
.pv.pv-fila{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto auto; column-gap:14px; row-gap:4px;
  align-items:center; text-align:left; padding:14px 16px;
}
.pv.pv-fila i{
  grid-row:1 / 3; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--acc-bg2); border:var(--bd-w) solid var(--acc-bd);
  font-size:19px; margin:0;
}
.pv.pv-fila .pv-t{ grid-column:2; grid-row:1; align-self:end; }
.pv.pv-fila .pv-d{ grid-column:2; grid-row:2; align-self:start; max-width:none; }
.pv.pv-fila .pv-n{ grid-column:3; grid-row:1; justify-self:end; align-self:end; margin:0; }
.pv.pv-fila .pv-bar{ grid-column:3; grid-row:2; width:132px; margin:4px 0 0; justify-self:end; }
@media (max-width:640px){
  .pv.pv-fila{ grid-template-columns:auto minmax(0,1fr); }
  .pv.pv-fila .pv-n{ grid-column:2; grid-row:3; justify-self:start; margin-top:4px; }
  .pv.pv-fila .pv-bar{ grid-column:2; grid-row:4; justify-self:start; }
}

.pv i{
  font-size:18px; color:var(--gp3); opacity:.7;
  margin-bottom:4px; line-height:1;
}
.pv.pv-mini i{ font-size:17px; margin-bottom:4px; }

/* El titulo dice QUE falta. Blanco y en negrita porque es lo unico que se lee
   si alguien pasa la vista por encima. */
/* 12.5 y no 13.5: ademas de compactar, 13.5 era un tamano fuera de la escala
   del panel (auditoria del 22-ago). */
.pv-t{ font-size:12.5px; font-weight:800; color:#fff; letter-spacing:-.01em; line-height:1.35; }
.pv.pv-mini .pv-t{ font-size:12px; }

/* El cuerpo dice CUANTO falta. Es la parte util. */
.pv-d{ font-size:12px; color:var(--muted); line-height:1.55; max-width:44ch; }
.pv.pv-mini .pv-d{ font-size:11.5px; }

/* El contador: "1 de 20". Tabular para que no baile al actualizarse. */
.pv-n{
  margin-top:7px; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; color:var(--gp3);
  font-variant-numeric:tabular-nums;
  border:var(--bd-w) solid var(--gb); border-radius:999px;
  padding:3px 10px; background:var(--acc-bg2);
}
/* La barra de progreso hacia el minimo. Es lo que convierte el hueco en una
   meta: se ve que falta poco, o que falta mucho. */
.pv-bar{
  margin-top:8px; width:100%; max-width:190px; height:3px; border-radius:999px;
  background:rgba(255,255,255,0.07); overflow:hidden;
}
.pv-bar span{ display:block; height:100%; border-radius:999px; background:var(--gp2); }

/* NO SE PUEDE MEDIR. Ambar, porque no se arregla esperando: alguien tiene que
   hacer algo (poner los UTM, asignar duenos). Un lead que llega no lo cambia,
   y por eso no puede parecer lo mismo que "aun no hay datos". */
.pv.no-medible{ border-color:rgba(251,191,36,0.30); background:rgba(251,191,36,0.035); }
.pv.no-medible i{ color:var(--amber); opacity:.85; }
.pv.no-medible .pv-n{ color:var(--amber); border-color:rgba(251,191,36,0.35); background:rgba(251,191,36,0.08); }

/* ROTO. La consulta fallo. Si esto se pinta igual que un vacio normal, una
   averia de la base pasa por "es que aun no hay leads" y nadie mira. */
.pv.roto{ border-color:rgba(248,113,113,0.32); background:rgba(248,113,113,0.04); border-style:solid; }
.pv.roto i{ color:#f87171; opacity:.9; }
.pv.roto .pv-t{ color:#fca5a5; }

/* La accion, cuando el hueco se arregla haciendo algo. Mismo molde que
   .rem-cta, que es el boton que ya vive en el estado vacio de pendientes:
   dos botones distintos para el mismo gesto serian dos cosas que aprender. */
.pv-cta{
  margin-top:11px; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; padding:7px 14px; border-radius:8px;
  border:var(--bd-w) solid var(--gb); background:var(--acc-bg);
  color:var(--gp3); cursor:pointer; font-family:inherit;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.pv-cta:hover{ background:rgba(154,87,245,0.18); }
/* El pulsado. 160 ms y 0.97: lo justo para que el boton conteste, sin que se
   note como animacion. */
.pv-cta:active{ transform:scale(.97); transition:transform var(--dur-1) var(--ease); }
.pv.no-medible .pv-cta{ border-color:rgba(251,191,36,0.35); background:rgba(251,191,36,0.10); color:var(--amber); }
.pv.no-medible .pv-cta:hover{ background:rgba(251,191,36,0.18); }

@media (prefers-reduced-motion: reduce){
  .pv-cta{ transition:none; }
  .pv-cta:active{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CALENDARIO PROPIO  ·  .cal-*        (seccion 12 del encargo de Gabriela)
   ──────────────────────────────────────────────────────────────────────────
   POR QUE NO SE USA `<input type="date">`
   Gabriela lo pide expreso y tiene razon: ese calendario lo dibuja el SISTEMA
   OPERATIVO, no la pagina. No se puede vestir con la marca, se ve distinto en
   cada maquina, y en Windows sale en el idioma del sistema aunque el CRM este
   en espanol. El selector global del panel (.drp-*) todavia lo usa para su
   rango personalizado; migrarlo es un trabajo aparte y no se toca hoy.

   UN COMPONENTE, VARIAS INSTANCIAS. German decidio el 22-ago que solo dos
   secciones llevan calendario propio: Tendencia de cierres (en meses) y
   Trafico web (en dias). El resto obedece al selector global de arriba. Los
   botones de rango rapido cambian por instancia; el resto es identico.

   SE DESPLIEGA EMPUJANDO, NUNCA FLOTANDO ENCIMA. Tambien lo pide ella, y es
   lo correcto: un panel flotante taparia la grafica que estas mirando para
   elegir el rango con el que quieres verla.

   MOVIMIENTO, y aqui hay tres decisiones:
     · Abrir/cerrar SI se anima (220 ms, ease-out): sin transicion, medio panel
       aparece de golpe y da la sensacion de que la pagina ha saltado.
     · La rejilla de dias NO se anima al cambiar de mes. Pulsar ‹ › es una
       accion que se repite, y animarla la volveria lenta a la tercera vez.
     · Los dias NO llevan `transition:all`: solo color y fondo, que es lo unico
       que cambia.
   ══════════════════════════════════════════════════════════════════════════ */

/* EL CAMPO. Todo el rectangulo es pulsable, no solo la flecha: un objetivo de
   200 px se acierta siempre y uno de 14 px no. */
.cal-campo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:9px 12px; margin-bottom:10px;
  background:var(--dark2); border:var(--bd-w) solid var(--border2);
  border-radius:10px; cursor:pointer; font-family:inherit;
  font-size:12px; color:var(--bright); text-align:left;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cal-campo:hover{ border-color:var(--gb); background:rgba(154,87,245,0.05); }
}
.cal-campo:active{ transform:scale(.995); transition:transform var(--dur-1) var(--ease); }
.cal-campo i{ font-size:15px; color:var(--gp3); transition:transform var(--dur-2) var(--ease); }
.cal-campo[aria-expanded="true"] i{ transform:rotate(180deg); }

/* EL PANEL. La altura NO se anima. Solo se animan `opacity` y `transform`,
   que son las dos unicas propiedades que no pasan por layout ni por pintado y
   corren fuera del hilo principal.

   La altura cambia de golpe: el panel entra en el flujo y empuja el contenido
   de abajo, que es lo que pide el encargo. Lo que se percibe como apertura es
   el desvanecido y el deslizamiento de 6 px del interior.

   La alternativa habitual es animar `grid-template-rows` de 0fr a 1fr, que
   tiene la gracia de abrir sin saber cuanto mide el contenido. Funciona, pero
   aqui no aporta: la sensacion de apertura ya la da el interior, y esto no
   depende de que el navegador sepa interpolar unidades `fr`.

   AVISO PARA QUIEN REVISE ESTO: la animacion NO se pudo ver en movimiento al
   escribirla. Se comprobo por DOM que el panel entra en el flujo, empuja 429
   px y vuelve a su sitio al cerrar; pero el reloj de animaciones estaba a cero
   porque la pestana de pruebas corria oculta (`document.hidden`), y con la
   pestana oculta NINGUNA animacion avanza. La duracion y la curva estan
   elegidas, no medidas a ojo. */
.cal-panel{ display:none; }
.cal-panel.abierto{ display:block; }
.cal-caja-in{
  background:var(--dark2); border:var(--bd-w) solid var(--border2);
  border-radius:12px; padding:12px; margin-bottom:12px;
  /* Acotado como el mini-calendario de la referencia (Google Calendar).
     Sin tope, la rejilla repeat(7,1fr) + aspect-ratio 1:1 estiraba cada
     celda a ~200x200 en una tarjeta del panel: un mes de cajas vacias
     gigantes. A 320px las celdas quedan en ~42px, que es tamano de
     calendario y no de mural. */
  max-width:320px;
  animation:calEntra var(--dur-2) var(--ease) both;
}
/* Keyframes y no transicion PORQUE aqui no hay nada que interrumpir: el panel
   no se puede reabrir a mitad de la apertura, se abre o esta abierto. La regla
   de "transiciones para lo interrumpible" no aplica. */
@keyframes calEntra{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}

/* RANGOS RAPIDOS. Es el camino que se usa el 90% de las veces; el calendario
   de abajo es para la excepcion. */
.cal-rapidos{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.cal-rapido{
  flex:1 1 auto; padding:6px 10px; border-radius:8px;
  border:var(--bd-w) solid var(--border2); background:rgba(255,255,255,0.03);
  color:var(--dim); font-family:inherit; font-size:11.5px; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cal-rapido:hover{ color:var(--gp3); border-color:var(--gb); }
}
.cal-rapido:active{ transform:scale(.97); transition:transform var(--dur-1) var(--ease); }
.cal-rapido.on{ background:var(--gd); border-color:var(--gb); color:var(--gp3); }

/* NAVEGACION DE MES */
.cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-mes{ font-size:12.5px; font-weight:800; color:#fff; letter-spacing:-.01em; text-transform:capitalize; }
.cal-flecha{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:var(--bd-w) solid var(--border2); background:none;
  color:var(--gp3); font-size:15px; cursor:pointer; padding:0;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cal-flecha:hover{ border-color:var(--gb); background:var(--acc-bg2); }
}
.cal-flecha:active{ transform:scale(.94); transition:transform var(--dur-1) var(--ease); }

/* LA REJILLA */
.cal-sem, .cal-dias{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-sem span{
  text-align:center; font-size:9.5px; font-weight:800; letter-spacing:.06em;
  color:var(--muted); text-transform:uppercase; padding-bottom:5px;
}
.cal-dia{
  aspect-ratio:1/1; min-height:30px; border:0; padding:0; border-radius:50%;
  background:none; color:var(--dim); font-family:inherit; font-size:11.5px;
  font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cal-dia:not(.fuera):hover{ background:rgba(154,87,245,0.12); color:var(--gp3); }
}
/* Dias de otro mes: se ven, para no dejar huecos raros en la rejilla, pero se
   leen como secundarios. */
.cal-dia.fuera{ color:var(--muted); opacity:.42; }
/* Hoy es un circulo con anillo y tinte, como el "hoy" de la referencia,
   pero SIN el relleno pleno de la seleccion: en un selector de rango, un hoy
   que parece seleccionado miente. */
.cal-dia.hoy{ box-shadow:inset 0 0 0 1.5px var(--gp2); background:var(--gd); color:var(--gp3); font-weight:800; }
/* El tramo intermedio, mas tenue que los extremos: se ve el rango de un
   vistazo sin que compita con las dos fechas que de verdad se eligieron. */
.cal-dia.dentro{ background:rgba(154,87,245,0.16); color:var(--gp3); border-radius:0; }
.cal-dia.extremo{ background:var(--gp2); color:#12102a; font-weight:800; }
.cal-dia.extremo.ini{ border-radius:50% 0 0 50%; }
.cal-dia.extremo.fin{ border-radius:0 50% 50% 0; }
.cal-dia.extremo.solo{ border-radius:50%; }

/* APLICAR. Ancho completo y morado, como pide el encargo. La grafica NO se
   toca hasta pulsarlo: elegir la fecha de inicio ya dispararia un repintado
   con un rango a medias. */
.cal-aplicar{
  width:100%; margin-top:10px; padding:9px; border-radius:9px; border:0;
  background:var(--gp2); color:#12102a; font-family:inherit;
  font-size:12.5px; font-weight:800; cursor:pointer;
  transition:background var(--dur-1) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .cal-aplicar:hover{ background:var(--gp3); } }
.cal-aplicar:active{ transform:scale(.98); transition:transform var(--dur-1) var(--ease); }
.cal-aplicar:disabled{ opacity:.45; cursor:default; transform:none; }
.cal-pista{ font-size:10.5px; color:var(--muted); text-align:center; margin-top:7px; line-height:1.4; }

@media (prefers-reduced-motion: reduce){
  /* El panel sigue abriendo y cerrando, solo que sin movimiento: quitar la
     animacion no puede quitar la funcion. */
  .cal-caja-in{ animation:none; }
  .cal-campo, .cal-campo i, .cal-rapido, .cal-flecha, .cal-dia, .cal-aplicar{ transition:none; }
  .cal-campo:active, .cal-rapido:active, .cal-flecha:active, .cal-aplicar:active{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   META SUGERIDA · los dos bolsillos     ·  .mb-*   (seccion 6.2 del encargo)
   ──────────────────────────────────────────────────────────────────────────
   El unico control del panel que ESCRIBE. Todo lo demas lee.

   Por eso el deslizador tiene dos tiempos, y no es un capricho:
     mientras se arrastra  se recalculan los montos en pantalla, en vivo
     al soltar               se guarda en Supabase, UNA vez
   Guardar en cada pixel del arrastre serian cien escrituras por gesto.
   ══════════════════════════════════════════════════════════════════════════ */
.mb-caja{
  border:var(--bd-w) solid var(--border2); border-radius:var(--r);
  padding:14px; background:rgba(255,255,255,0.02); margin-top:10px;
}
.mb-dos{ display:flex; gap:10px; flex-wrap:wrap; }
.mb-bolsillo{
  flex:1 1 150px; min-width:140px; padding:12px 14px; border-radius:10px;
  border:var(--bd-w) solid var(--border2); background:rgba(255,255,255,0.02);
}
.mb-bolsillo .lb{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.mb-bolsillo .vl{ font-size:19px; font-weight:900; letter-spacing:-.02em; margin-top:5px; font-variant-numeric:tabular-nums; }
.mb-bolsillo .pc{ font-size:11px; color:var(--muted); margin-top:2px; }
.mb-bolsillo .de{ font-size:10.5px; color:var(--muted); margin-top:6px; line-height:1.4; }
.mb-reinv .vl{ color:var(--amber); }
.mb-gana  .vl{ color:var(--green); }

/* EL DESLIZADOR. Se estilan las dos pistas (WebKit y Firefox) porque sin eso
   sale el gris del sistema, que es justo lo que el encargo evita al descartar
   el `<input type="date">` nativo. */
.mb-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:5px;
  border-radius:999px; margin:14px 0 6px; cursor:pointer;
  background:linear-gradient(to right, var(--amber) 0%, var(--amber) var(--pos,25%), var(--green) var(--pos,25%), var(--green) 100%);
}
.mb-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:17px; height:17px;
  border-radius:50%; background:#fff; border:2px solid var(--gp2);
  cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.45);
}
.mb-slider::-webkit-slider-thumb:active{ cursor:grabbing; }
.mb-slider::-moz-range-thumb{
  width:17px; height:17px; border-radius:50%; background:#fff;
  border:2px solid var(--gp2); cursor:grab; box-shadow:0 2px 6px rgba(0,0,0,.45);
}
.mb-slider::-moz-range-track{ height:5px; border-radius:999px; background:transparent; }
/* Foco visible: el deslizador se puede mover con las flechas del teclado y sin
   esto no se ve cual esta enfocado. */
.mb-slider:focus-visible{ outline:2px solid var(--gp3); outline-offset:4px; }

.mb-pie{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mb-guardado{ font-size:10.5px; color:var(--muted); margin-top:9px; text-align:right; min-height:14px; }
.mb-guardado.ok{ color:var(--green); }
.mb-guardado.mal{ color:#f87171; }

/* ══════════════════════════════════════════════════════════════════════════
   GLOBO 3D · "Origen de los leads"     ·  .gl-*   (seccion 7.2 del encargo)
   ──────────────────────────────────────────────────────────────────────────
   Estilo "vidrio" morado, con los valores de Gabriela adaptados a la paleta
   del CRM. Lo que se conserva de su especificacion es la ESTRUCTURA: relleno
   muy sutil, atmosfera, cuadricula, continentes con borde, y cada lead como un
   punto blanco diminuto con un halo del color de su etapa.
   ══════════════════════════════════════════════════════════════════════════ */
.gl-caja{
  position:relative; height:260px; border-radius:var(--r);
  border:var(--bd-w) solid var(--border2); overflow:hidden;
  background:radial-gradient(circle at 50% 45%, var(--acc-bg2), transparent 62%);
  /* `grab` y no `pointer`: esto se arrastra, no se pulsa. El cursor es la
     unica pista de que el globo gira. */
  cursor:grab;
  /* pan-y y no none: con none, un deslizamiento vertical que empezara dentro
     del globo (260px de alto, ancho completo) NO hacia scroll de la pagina;
     el panel se quedaba clavado a mitad. Con pan-y el gesto vertical se lo
     queda el navegador para desplazar, y el horizontal sigue girando el globo. */
  touch-action:pan-y;
}
.gl-caja.arrastrando{ cursor:grabbing; }
.gl-caja canvas.gl-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;}
.gl-caja .gl-svg{position:absolute;inset:0;}
.gl-caja .gl-svg svg{width:100%;height:100%;display:block;}
.gl-caja svg{ display:block; width:100%; height:100%; }
.gl-pie{
  font-size:11px; color:var(--muted); margin-top:8px; line-height:1.5;
}

/* ══ RADAR DENTRO DE LA SECCION (decision de German, 22-ago: nada de pantalla
   aparte; lo que se veia en el radar se ve en el panel). Tres columnas dentro
   de la tarjeta: capas por etapa a la izquierda, el globo en el centro y los
   situados a la derecha. Mismos componentes que tenia la vista a pantalla
   completa, ahora como tarjetas normales del sistema (fondo --bg2, borde
   --bd). La monoespaciada del sistema en los rotulos pequenos es la voz de
   "instrumento": cero fuentes nuevas. */
.gr-grid{display:grid;grid-template-columns:180px minmax(0,1fr) 224px;gap:12px;align-items:stretch;}
.gr-grid .gl-caja{height:340px;}
.rd-panel-s{background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);
  padding:10px;overflow-y:auto;max-height:340px;
  scrollbar-width:thin;scrollbar-color:rgba(154,87,245,.4) transparent;}
.rd-panel-s::-webkit-scrollbar{width:4px;}
.rd-panel-s::-webkit-scrollbar-thumb{background:rgba(154,87,245,.4);border-radius:999px;}
.rd-p-t{font-family:ui-monospace,'Cascadia Mono',Consolas,'Roboto Mono',monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:2px 4px 8px;}
.rd-capa,.rd-fila{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font-family:inherit;font-size:12px;color:var(--tx);background:none;border:0;cursor:pointer;
  padding:6px 8px;border-radius:var(--r-s);min-height:30px;
  transition:background var(--dur-1),opacity var(--dur-1);}
.rd-capa:hover,.rd-fila:hover{background:rgba(154,87,245,.12);}
.rd-capa:not(.on){opacity:.38;}
.rd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.rd-capa-n,.rd-fila-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rd-capa-c{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px;}
.rd-fila-c{color:var(--muted);font-size:10.5px;max-width:72px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rd-vacio{font-size:12px;color:var(--muted);padding:10px 8px;}
.rd-duenos{display:flex;gap:6px;padding:0 4px;}
.rd-dueno{flex:1;font-family:inherit;font-size:11px;font-weight:700;padding:5px 4px;min-height:28px;
  border-radius:var(--r-pill);border:var(--bd-w) solid var(--bd);background:none;color:var(--muted);
  cursor:pointer;transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1);}
.rd-dueno.on{color:#fff;border-color:var(--acc-bd2);background:var(--acc-bg);}
@media (max-width:1100px){
  .gr-grid{grid-template-columns:170px minmax(0,1fr);}
  /* La lista baja a fila completa: tres columnas ya no caben. */
  .gr-lista{grid-column:1 / -1;max-height:220px;}
}
@media (max-width:860px){
  .gr-grid{grid-template-columns:1fr;}
  /* El globo primero: es lo que da contexto a capas y lista. */
  .gr-grid .gl-caja{order:-1;height:280px;}
  .rd-panel-s{max-height:210px;}
  .rd-capa,.rd-fila{min-height:44px;}
  .rd-dueno{min-height:40px;}
}

/* Sin leyenda de colores debajo, lo pide el encargo: esa informacion ya vive
   en el embudo de "Pipeline por etapa" y duplicarla obliga a mantener dos. */

/* ══════════════════════════════════════════════════════════════════════════
   VALOR EN JUEGO · las cuatro miradas   ·  .vj-*   (seccion 5 del encargo)
   ──────────────────────────────────────────────────────────────────────────
   Cuatro mentores, cada uno con su color en el borde izquierdo. El color es
   lo unico que los distingue de un vistazo, asi que se eligen SEPARADOS entre
   si, no cuatro morados parecidos.

   Se despliega pulsando, y NO se genera nada hasta que se pide: cada
   generacion cuesta creditos de IA y este panel se abre muchas veces al dia.
   ══════════════════════════════════════════════════════════════════════════ */
.vj-cab{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:12px 14px; margin-top:12px;
  background:rgba(255,255,255,0.02); border:var(--bd-w) solid var(--border2);
  border-radius:var(--r); cursor:pointer; font-family:inherit; text-align:left;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .vj-cab:hover{ border-color:var(--gb); background:rgba(154,87,245,0.05); }
}
.vj-cab:active{ transform:scale(.995); transition:transform var(--dur-1) var(--ease); }
.vj-cab-t{ font-size:13px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.vj-cab-s{ font-size:11.5px; color:var(--muted); margin-top:2px; }
/* La flecha, sin circulo ni fondo, como pide el encargo. */
.vj-cab i{ font-size:16px; color:var(--gp3); flex-shrink:0; transition:transform var(--dur-2) var(--ease); }
.vj-cab[aria-expanded="true"] i{ transform:rotate(180deg); }

.vj-cuerpo{ display:none; margin-top:10px; }
/* El vacio de Valor en juego lleva las orbitas de la referencia: anillos
   concentricos tenues detras del mensaje. Decoracion pura en CSS, cero datos
   fingidos. */
.vj-cuerpo .pv{ position:relative; overflow:hidden; }
.vj-cuerpo .pv::before{
  content:''; position:absolute; left:50%; top:42%; width:340px; height:340px;
  transform:translate(-50%,-50%) scaleY(.55); border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle, transparent 56px, var(--acc-bd) 57px, transparent 58px),
    radial-gradient(circle, transparent 96px, var(--acc-bg2) 97px, transparent 98.5px),
    radial-gradient(circle, transparent 136px, var(--acc-bg2) 137px, transparent 138.5px),
    radial-gradient(circle, var(--acc-bg) 0 10px, rgba(154,87,245,.28) 11px, transparent 26px);
}
.vj-cuerpo .pv > *{ position:relative; }
.vj-cuerpo.abierto{ display:block; }

.vj-mentores{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.vj-mentor{
  border-left:3px solid var(--c,var(--gp2));
  border-radius:0 10px 10px 0; padding:11px 13px;
  background:rgba(255,255,255,0.025);
  /* Entra escalonado. 60 ms entre tarjetas: se nota que llegan una detras de
     otra sin que haya que esperar a la ultima. Y solo al GENERAR, que es una
     vez cada muchas: abrir el panel ya generado no vuelve a animarlo. */
  animation:vjEntra .28s var(--ease) both;
}
.vj-mentor:nth-child(1){ animation-delay:0ms; }
.vj-mentor:nth-child(2){ animation-delay:60ms; }
.vj-mentor:nth-child(3){ animation-delay:120ms; }
.vj-mentor:nth-child(4){ animation-delay:180ms; }
@keyframes vjEntra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.vj-mentor .nm{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--c,var(--gp3)); }
.vj-mentor .tx{ font-size:12.5px; color:var(--dim); line-height:1.55; margin-top:5px; }

@media (prefers-reduced-motion: reduce){
  .vj-cab, .vj-cab i{ transition:none; }
  .vj-cab:active{ transform:none; }
  .vj-mentor{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LA CAMPANA Y SU AVISO   ·  .cmp-*        (seccion 3 del encargo)
   ══════════════════════════════════════════════════════════════════════════ */
.cmp-btn{
  position:relative; width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:var(--bd-w) solid var(--border2); background:rgba(255,255,255,0.03);
  color:var(--dim); font-size:18px; cursor:pointer; padding:0;
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cmp-btn:hover{ color:var(--gp3); border-color:var(--gb); background:var(--acc-bg2); }
}
.cmp-btn:active{ transform:scale(.94); transition:transform var(--dur-1) var(--ease); }
/* Rojo y no morado: el morado es el color de "esto es de la marca" y esta por
   toda la pantalla. Un aviso tiene que salirse de la paleta para que se vea. */
.cmp-globo{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px;
  padding:0 4px; border-radius:9px; background:#ef4444; color:#fff;
  font-size:10px; font-weight:900; line-height:17px; text-align:center;
  font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--dark);
}

/* EL AVISO. Abajo a la derecha y no arriba: arriba a la derecha esta la propia
   campana, y un aviso que tapa el boton que lo produjo es un estorbo. */
.cmp-aviso{
  position:fixed; right:18px; bottom:18px; z-index:260;
  width:min(320px,calc(100vw - 36px));
  background:var(--dark2); border:var(--bd-w) solid var(--gb);
  border-radius:14px; padding:13px 14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
  animation:cmpEntra .26s var(--ease) both;
}
/* Entra desde ABAJO, que es de donde viene, y sale por donde entro. Que el
   movimiento coincida con el sitio es lo que hace que no parezca que aparece
   de la nada. */
@keyframes cmpEntra{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
.cmp-aviso.saliendo{ animation:cmpSale .18s var(--ease) both; }
@keyframes cmpSale{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(10px) scale(.98); } }
.cmp-aviso-t{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gp3); }
.cmp-aviso-n{ font-size:15px; font-weight:800; color:#fff; margin-top:4px; letter-spacing:-.01em; }
.cmp-aviso-d{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.cmp-aviso-fila{ display:flex; gap:8px; margin-top:11px; }
.cmp-aviso-ir{
  flex:1; padding:8px 12px; border-radius:9px; border:0;
  background:var(--gp2); color:#12102a; font-family:inherit;
  font-size:12px; font-weight:800; cursor:pointer;
  transition:background var(--dur-1) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .cmp-aviso-ir:hover{ background:var(--gp3); } }
.cmp-aviso-ir:active{ transform:scale(.97); transition:transform var(--dur-1) var(--ease); }
.cmp-aviso-x{
  width:32px; flex-shrink:0; border-radius:9px; border:var(--bd-w) solid var(--border2);
  background:none; color:var(--muted); cursor:pointer; font-size:15px; padding:0;
}
/* EN MOVIL SE SUBE POR ENCIMA DE LA BARRA INFERIOR. A 18 px del suelo el aviso
   se sienta justo encima de la navegacion, que es lo que se toca con el pulgar:
   taparla para enseñar un aviso es cambiar un problema por otro.
   `--sh-bottom-h` la declara shell.css y vale 58; el respaldo esta por si esta
   pagina se abriera sin la carcasa. Mismo corte de 860 que usa shell.js. */
@media (max-width:860px){
  .cmp-aviso{
    right:12px; left:12px; width:auto;
    bottom:calc(var(--sh-bottom-h, 58px) + 12px);
  }
}
@media (hover:hover) and (pointer:fine){ .cmp-aviso-x:hover{ color:var(--bright); } }

@media (prefers-reduced-motion: reduce){
  .cmp-btn, .cmp-aviso-ir{ transition:none; }
  .cmp-btn:active, .cmp-aviso-ir:active{ transform:none; }
  .cmp-aviso, .cmp-aviso.saliendo{ animation:none; }
}

/* ── LOGIN ── */
.login-screen{position:fixed;inset:0;z-index:300;display:flex;background:var(--dark);overflow:hidden;}
.login-left{position:relative;width:min(480px,100%);flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:40px 44px;overflow-y:auto;}
.login-left::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(154,87,245,.12),transparent 65%);top:-180px;left:-160px;pointer-events:none;}
.login-card{position:relative;width:100%;max-width:352px;}
.login-visual{position:relative;flex:1;display:none;overflow:hidden;background:var(--dark);}
@media(min-width:900px){.login-visual{display:block;}}
.lv-frame{position:absolute;inset:0;}
.lv-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;}
/* funde la foto con el fondo del login: borde izquierdo, arriba y abajo se desvanecen
   hacia --dark (el mismo negro del estudio), y un halo púrpura ata la luz de la foto
   con los acentos del CRM. Sin costura visible. */
.lv-frame::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,var(--dark) 0%,rgba(14,14,20,.5) 11%,transparent 34%),
  linear-gradient(0deg,var(--dark) 0%,transparent 24%),
  linear-gradient(180deg,var(--dark) 0%,transparent 18%),
  radial-gradient(130% 90% at 22% 42%,rgba(154,87,245,.13),transparent 55%);}
.lv-title{position:absolute;top:46px;left:48px;right:48px;z-index:2;font-size:clamp(26px,2.5vw,38px);font-weight:900;line-height:1.22;letter-spacing:-.02em;color:#fff;max-width:440px;text-shadow:0 4px 30px rgba(0,0,0,.55);}
.lv-title .lv-hl{background:linear-gradient(90deg,var(--gp3),#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lg-forgot{display:block;margin:12px auto 0;background:none;border:none;font-family:inherit;font-size:12px;color:var(--muted);cursor:pointer;transition:color .15s ease;}
.lg-forgot:hover{color:var(--gp3);}
.login-mark{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;letter-spacing:.02em;color:#fff;background:var(--acc-fill);box-shadow:0 10px 24px -10px rgba(154,87,245,.65),inset 0 1px 0 rgba(255,255,255,.25);margin-bottom:16px;}
.login-brand{font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1;}
.login-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--gd);color:var(--gp3);border:0.5px solid var(--gb);margin-top:10px;}
.login-sub{font-size:13px;color:var(--muted);margin:16px 0 18px;}
.login-card .field{margin-bottom:18px;}
.lg-in{position:relative;}
.lg-in>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--muted);pointer-events:none;transition:color .15s ease;}
.lg-in .fi{padding-left:36px;background:rgba(255,255,255,.03);border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease;}
.lg-in .fi:focus{border-color:var(--gp2);box-shadow:0 0 0 3px rgba(154,87,245,.14);outline:none;}
.lg-in:focus-within>i{color:var(--gp3);}
.lg-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;padding:7px 9px;border-radius:8px;font-size:15px;line-height:1;transition:color .15s ease;}
.lg-eye:hover{color:var(--gp3);}
#login-pass{padding-right:40px;}
.btn-login{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:700;padding:12px;border-radius:10px;border:none;background:var(--acc-fill);color:#fff;cursor:pointer;box-shadow:0 10px 26px -12px rgba(154,87,245,.55),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .16s cubic-bezier(.23,1,.32,1),filter .16s ease;margin-top:4px;}
.btn-login:hover{filter:brightness(1.1);}
.btn-login:active{transform:scale(.97);}
.btn-login:disabled{opacity:.5;cursor:not-allowed;}
.login-error{font-size:12px;color:var(--red);text-align:center;margin-top:10px;min-height:16px;transition:opacity .2s ease;}
.login-foot{font-size:11px;color:var(--muted);text-align:center;margin-top:18px;opacity:.7;}
/* ── Segundo factor (SEG-03) · vive dentro de .login-card, hereda su caja ── */
/* Fondo blanco a propósito: el QR de Supabase viene en negro sobre transparente
   y sobre el fondo oscuro de la marca NINGUNA cámara lo lee. */
.mfa-clave{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.6;margin-bottom:16px;}
.mfa-clave code{display:block;margin-top:6px;font-size:12px;letter-spacing:.08em;color:var(--bright);
  background:var(--dark2);border:.5px solid var(--border);border-radius:8px;padding:8px 6px;word-break:break-all;user-select:all;}
@keyframes lgRise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.login-mark,.login-brand,.login-pill,.login-sub,.login-card .field,.btn-login,.login-foot{animation:lgRise .4s cubic-bezier(.23,1,.32,1) both;}
.login-brand{animation-delay:.04s;}
.login-pill{animation-delay:.08s;}
.login-sub{animation-delay:.12s;}
.login-card .field:nth-of-type(1){animation-delay:.16s;}
.login-card .field:nth-of-type(2){animation-delay:.2s;}
.btn-login{animation-delay:.24s;}
.login-foot{animation-delay:.3s;}
@media (prefers-reduced-motion:reduce){.login-mark,.login-brand,.login-pill,.login-sub,.login-card .field,.btn-login,.login-foot{animation:none;}}

/* ── FOOTER SIDEBAR (usuario + salir) ── */
/* ── Contadores + termómetro del sidebar (Fase 5) ── */
.sb-counters{padding:2px 14px 6px;display:flex;flex-direction:column;gap:7px;}
.sb-counters:empty{display:none;}
.sb-count{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:9px;border:0.5px solid var(--border2);background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .14s,background .14s;}
.sb-count:hover{border-color:var(--gp2);background:rgba(154,87,245,.06);}
.sb-count-l{font-size:12px;color:var(--dim);font-weight:600;display:flex;align-items:center;gap:7px;}
.sb-count-l i{font-size:15px;color:var(--gp3);}
.sb-count-v{font-size:13px;font-weight:800;color:#fff;}
.sb-count-v small{font-size:11px;color:var(--muted);font-weight:600;margin-left:2px;}
.thermo{display:flex;align-items:center;gap:11px;padding:9px 11px;margin-top:1px;border-radius:9px;border:0.5px solid var(--border2);background:rgba(255,255,255,.03);}
.thermo-bar{width:8px;height:44px;border-radius:999px;background:rgba(255,255,255,.06);position:relative;overflow:hidden;flex-shrink:0;}
.thermo-fill{position:absolute;left:0;right:0;bottom:0;border-radius:999px;background:linear-gradient(0deg,#3b82f6,#9A57F5);transition:height var(--dur-2) var(--ease);}
.thermo-txt .tt-v{font-size:16px;font-weight:900;color:#fff;line-height:1;}
.thermo-txt .tt-l{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.3;}
/* sticky bottom: la cuenta y CERRAR SESION no pueden irse de la pantalla nunca,
   pase lo que pase con lo de arriba. Ahora que la barra se desplaza, sin esto
   habria que bajar hasta el fondo para poder salir de la sesion.
   El fondo opaco es obligatorio: sin el, las tarjetas de lead se leerian por
   debajo al desplazar. */
.sb-footer{display:flex;align-items:center;gap:11px;padding:12px 14px;border-top:0.5px solid var(--border);position:sticky;bottom:0;background:var(--dark2);z-index:2;flex-shrink:0;}
.sb-avatar{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;letter-spacing:-.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);background-size:cover;background-position:center 20%;}
.sb-avatar.has-photo{box-shadow:0 0 0 1px var(--border2),inset 0 0 0 1px rgba(0,0,0,.2);}
.sb-user{flex:1;min-width:0;line-height:1.25;}
.sb-name{font-size:13px;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-role{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-logout{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:0.5px solid var(--border2);background:rgba(255,255,255,0.04);color:var(--muted);cursor:pointer;font-size:16px;flex-shrink:0;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;}
.sb-logout:hover{color:var(--red);border-color:rgba(248,113,113,0.4);}


/* ── Botón mini de IA (seguimiento Fathom) ── */
.wa-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;}
.wa-actions .btn-copy{margin-top:0;}
.btn-ai-mini{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:11px;font-weight:600;padding:6px 13px;border-radius:var(--r-s);border:var(--bd-w) solid var(--acc-bd);background:var(--acc-bg);color:var(--acc3);cursor:pointer;transition:background var(--dur-1),transform var(--dur-1) var(--ease);}
.btn-ai-mini:hover{background:rgba(154,87,245,0.2);}
.btn-ai-mini:active{transform:scale(.96);}
.btn-ai-mini:disabled{opacity:.5;cursor:not-allowed;}

/* ── DASHBOARD: toolbar (fecha + export) ── */
.dash-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.dash-range{display:flex;gap:6px;flex-wrap:wrap;}
.sb-version{font-size:9.5px;color:rgba(255,255,255,.28);margin-top:2px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-version.sucia{color:var(--warn);}
/* ── UX-04 · Barra de deshacer tras borrar un lead ── */
.deshacer-barra{position:fixed;left:16px;right:16px;bottom:16px;z-index:480; /* la escala de capas del CRM llega a 500 (cp-overlay, ag-ov); --z-toast (110) la hundiria. Unificar capas: tarea aparte */
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r);
  background:var(--bg3);border:var(--bd-w) solid var(--bd2);color:var(--tx);
  font-size:13px;font-weight:500;box-shadow:var(--sh3);
  /* Entra en vez de aparecer de golpe. Es el unico momento raro y de riesgo del
     CRM: acabas de borrar un lead y tienes 8 segundos para arrepentirte, asi que
     aqui el movimiento gana su sitio. `display` no es animable, de modo que la
     barra vive siempre en flex y se esconde con opacidad y visibilidad. El
     retardo de `visibility` al salir deja que la opacidad termine antes de que
     la barra desaparezca del arbol de accesibilidad. */
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s linear var(--dur-2);}
.deshacer-barra.show{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s;}
.deshacer-barra span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.deshacer-barra button{flex:none;min-height:44px;padding:10px 16px;border-radius:var(--r-s);
  background:var(--acc-bg);border:var(--bd-w) solid var(--acc-bd);color:var(--acc3);
  font:inherit;font-weight:700;cursor:pointer;transition:background .18s var(--ease);}
.deshacer-barra button:hover{background:rgba(154,87,245,.3);}
.deshacer-barra button:active{transform:scale(.97);}
/* Los tres avisos flotantes suben por encima de la barra inferior (60px, mas la
   franja del indicador de inicio del iPhone). A 24px del borde, el aviso verde de
   "guardado" aterrizaba ENCIMA de Inicio/Leads/+/Semana/Perfil y la tapaba cuatro
   segundos: es el aviso que mas veces al dia se ve, y va en z-index 200 contra el
   70 de la barra, asi que no se escondia debajo. El 76 es el que ya usaba la barra
   de deshacer; el env() le suma el indicador de inicio, que a ella tambien le
   faltaba. Se toca `bottom`, no `transform`: la animacion de entrada vive ahi. */
@media (max-width:860px){
  .deshacer-barra,.data-ok,.data-error{bottom:calc(76px + env(safe-area-inset-bottom,0px));}
}

/* ── UX-03 · Que los iconos no tarden 3 segundos en aparecer ──
   La fuente de iconos que carga arriba NO declara font-display, así que el
   valor por defecto ('auto') bloquea el dibujado ~3 s en Chrome y Safari:
   durante ese tiempo el botón "+" de crear lead es un círculo morado vacío,
   y los cuatro de contacto del lead (WhatsApp, llamar, correo, nota) son
   cuadrados en blanco. La herramienta parece rota los primeros dos segundos
   de cada mañana.
   Redeclarar la MISMA familia con font-display:swap gana sobre la del
   proveedor. No hay salto de maquetación: el hueco ya está reservado por el
   tamaño de letra. (Lo definitivo es subconjuntar y autoalojar la fuente,
   RND-03, pero eso es del lote del mes 4; esto son dos líneas y se nota hoy.) */

/* ── Aviso que no se va solo ──
   Un dato perdido no puede desaparecer de la pantalla a los 6 segundos como
   un aviso cualquiera. Se queda hasta que alguien lo cierra a mano. */
/* ── Redes del lead, en la fila de acciones rápidas ── */
.ws-q-ig:hover{color:#e1306c;border-color:rgba(225,48,108,.5);background:rgba(225,48,108,.10);}
.ws-q-tt:hover{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08);}
/* Cuando no sabemos de qué red es su @, el botón se ofrece pero no se disfraza
   de dato comprobado. */
.ws-q.sin-confirmar{opacity:.55;border-style:dashed;}
.ws-q.sin-confirmar:hover{opacity:1;}
/* ── Recorrido del lead ── */
.hist-caja{display:flex;flex-direction:column;gap:2px;}
.hist-fila{display:flex;gap:10px;align-items:flex-start;padding:8px 0;position:relative;}
.hist-fila:not(:last-child)::before{content:'';position:absolute;left:3px;top:20px;bottom:-2px;width:1px;background:rgba(255,255,255,.09);}
.hist-punto{width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px;position:relative;z-index:1;}
.hist-txt{flex:1;min-width:0;font-size:12.5px;color:var(--bright);line-height:1.45;}
.hist-meta{font-size:11px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
.hist-sistema{color:var(--muted);font-style:italic;}
/* ── Motivo de pérdida (bloque del workspace) ── */
.mp-bloque{border-left:2px solid rgba(248,113,113,.45);padding-left:10px;margin-top:2px;}
.mp-nota{font-size:11px;line-height:1.5;color:var(--muted);margin-top:6px;display:none;}
.mp-nota b{color:var(--gp3);font-weight:600;}
/* ── Desglose de motivos en el panel ── */
.mp-fila{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px;}
.mp-fila .mp-et{flex:1;min-width:0;color:var(--bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-fila .mp-barra{flex:none;width:88px;height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;}
.mp-fila .mp-barra > i{display:block;height:100%;background:var(--err);border-radius:999px;}
.mp-fila .mp-n{flex:none;width:26px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--err);}
.aviso-perdida{position:fixed;left:16px;right:16px;bottom:16px;z-index:500;
  display:flex;align-items:flex-start;gap:11px;padding:15px 17px;border-radius:12px;
  background:#2a1013;border:1px solid rgba(248,113,113,.55);color:#fecaca;
  font-size:13px;font-weight:500;line-height:1.5;box-shadow:0 12px 34px rgba(0,0,0,.5);}
.aviso-perdida i{font-size:19px;flex:none;color:var(--err);margin-top:1px;}
.aviso-perdida span{flex:1;min-width:0;}
.aviso-perdida button{flex:none;align-self:center;background:rgba(248,113,113,.16);
  border:1px solid rgba(248,113,113,.45);color:#fecaca;border-radius:8px;
  padding:10px 15px;min-height:44px;font:inherit;font-weight:600;cursor:pointer;
  transition:background .18s var(--ease);}
.aviso-perdida button:hover{background:rgba(248,113,113,.28);}
.aviso-perdida button:active{transform:translateY(1px);}
@media (max-width:860px){
  /* por encima de la barra inferior, igual que el resto de avisos */
  .aviso-perdida{bottom:76px;flex-wrap:wrap;}
  .aviso-perdida button{width:100%;}
}
/* ── Centinela del respaldo ──
   En verde es una pastilla discreta: informa sin robar sitio, que es lo que
   pide una pantalla de inicio ya cargada. En ambar o rojo pasa a barra
   completa, porque entonces SI es lo mas importante de la pantalla. */
.cent-resp{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  font-size:11.5px;font-weight:500;letter-spacing:.01em;margin-bottom:14px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);color:var(--muted);}
.cent-resp .cent-punto{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;}
.cent-resp.ok{color:var(--ok);}
.cent-resp.ok .cent-punto{box-shadow:0 0 0 3px rgba(74,222,128,.14);}
.cent-resp.aviso,.cent-resp.malo{display:flex;width:100%;border-radius:12px;padding:13px 15px;
  font-size:13px;font-weight:600;align-items:flex-start;gap:10px;}
.cent-resp.aviso{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd);}
.cent-resp.malo {color:var(--err);background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.34);}
.cent-resp .cent-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cent-resp .cent-sub{font-weight:400;font-size:11.5px;opacity:.85;line-height:1.45;}
.cent-resp.aviso .cent-punto,.cent-resp.malo .cent-punto{width:9px;height:9px;margin-top:5px;}
@media (max-width:860px){ .cent-resp{width:100%;} }
/* ── Date range picker ── */
.drp-wrap{position:relative;}
.drp-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;font-weight:700;padding:9px 15px;border-radius:var(--r-s);border:var(--bd-w) solid var(--bd2);background:var(--dark2);color:var(--tx-on-acc);cursor:pointer;min-height:var(--tap-base);transition:border-color var(--dur-1);}
.drp-btn:hover{border-color:var(--gp2);}
.drp-btn i:first-child{color:var(--gp3);font-size:16px;}
.drp-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:70;width:min(340px,92vw);background:var(--dark2);border:0.5px solid var(--border2);border-radius:14px;box-shadow:0 30px 70px -25px rgba(0,0,0,.85);padding:14px;}
/* El menu Datos reusa el molde del selector de fechas, pero con su medida:
   dos acciones no necesitan 340px. Se alinea a la derecha porque su boton es
   el ultimo de la toolbar y abierto hacia la izquierda no se sale en movil. */
#datosPanel{width:auto;min-width:200px;left:auto;right:0;padding:10px;}
#datosPanel.show{display:flex;flex-direction:column;gap:8px;}
#datosPanel .dash-export{justify-content:flex-start;}
.drp-panel.show{display:block;animation:pIn .2s var(--ease) both;}
.drp-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;}
.drp-preset{font-family:inherit;font-size:12.5px;font-weight:600;text-align:left;padding:8px 11px;border-radius:8px;border:0.5px solid transparent;background:rgba(255,255,255,0.03);color:#fff;cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);}
.drp-preset:hover{background:rgba(255,255,255,0.07);}
.drp-preset.on{background:var(--gd);border-color:var(--gb);color:var(--gp3);}
.drp-custom{border-top:0.5px solid var(--border);padding-top:12px;}
.drp-custom-t{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.drp-dates{display:flex;align-items:center;gap:8px;}
.drp-dates input{flex:1;min-width:0;background:rgba(255,255,255,0.05);border:0.5px solid var(--border2);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:12.5px;color:#fff;color-scheme:dark;}
.drp-dates input:focus{outline:none;border-color:var(--gp2);}
.drp-actions{display:flex;gap:8px;margin-top:12px;}
.drp-apply{flex:1;font-family:inherit;font-size:12.5px;font-weight:700;padding:9px;border-radius:9px;border:none;background:var(--acc-fill);color:#fff;cursor:pointer;}
.drp-apply:active{transform:scale(.98);}
.drp-cancel{font-family:inherit;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:9px;border:0.5px solid var(--border2);background:none;color:var(--muted);cursor:pointer;}
/* ── Barra plana de métricas (estilo Erxes/Shopify) — sin cards, separadores tenues + puntitos decorativos a la derecha ── */
/* FLEX otra vez, pero con red (24-ago, "que se ajusten al espacio"). La
   rejilla auto-fit NO reparte el ancho aqui: la banda de Sesiones cruza todas
   las columnas (1/-1) y eso impide colapsar las vacias, asi que las 9
   tarjetas quedaban estrechas con un hueco muerto a la derecha. En flex se
   estiran hasta llenar la fila. La leccion vieja de "las de la segunda fila
   se estiran a gigantes" sigue valida y su respuesta es el max-width de
   .fm-metric: si algun ancho intermedio parte la fila, nadie pasa de 220px. */
.dash-funnel{position:relative;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin-bottom:14px;border:0;}
.fm-metric[data-k="sesiones"]{flex:1 1 100%;max-width:none;display:flex;align-items:center;gap:16px;padding:12px 16px;}
.fm-metric[data-k="sesiones"] .fm-metric-l{margin:0;flex:0 0 auto;}
.fm-metric[data-k="sesiones"] .fm-metric-v{margin:0;flex:0 0 auto;}
.fm-metric[data-k="sesiones"] .fm-spark{flex:1;width:auto;height:30px;opacity:.85;}
.fm-metric[data-k="sesiones"] .fm-metric-foot{margin:0;flex:0 0 auto;}

.fm-metric{position:relative;z-index:1;flex:1 1 90px;max-width:220px;min-width:0;padding:14px 12px;background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1);overflow:visible;}
.fm-metric:first-child{border-left:none;}
.fm-metric:hover{background:rgba(255,255,255,0.03);}
.fm-metric.on{background:rgba(154,87,245,0.05);}
.fm-metric.on::after{content:'';position:absolute;left:14px;right:14px;bottom:-11px;height:2px;background:var(--gp2);border-radius:2px 2px 0 0;}
/* Bajo la banda ancha el conector era una raya morada de borde a borde. */
.fm-metric[data-k="sesiones"].on::after{display:none;}
.fm-metric-l{font-size:11px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:5px;}
/* clamp y no 34px fijos: con las 9 tarjetas en una fila, a 1366 cada una mide
   ~114px y "$1,500" a 27px la desborda. 1.6vw da 22px ahi y crece con la
   pantalla; el techo del mock solo entra en pantallas muy anchas. */
.fm-metric-v{font-size:clamp(20px,1.6vw,34px);font-weight:900;letter-spacing:-.02em;margin-top:4px;line-height:1;}
.fm-metric-v .pct{font-size:12px;font-weight:700;color:var(--muted);margin-left:4px;}
.fm-metric-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;flex-wrap:wrap;}
.fm-var{font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:2px;}
.fm-var.up{color:var(--green);} .fm-var.down{color:var(--muted);}
.fm-metric svg.fm-spark{display:block;width:100%;height:22px;}
/* Dentro del pie, la sparkline toma fila propia a todo el ancho (mock JARVIS):
   el % de variacion queda arriba y la onda pegada abajo. */
.fm-metric-foot svg.fm-spark{flex:1 1 100%;}
/* El pulso vivia en box-shadow, que repinta en cada fotograma y no para nunca
   mientras el panel este abierto, o sea todo el dia. Ahora el anillo es un
   ::after que crece con transform y se desvanece con opacity, que componen en
   la GPU sin repintar. Mismo tamano final: el punto mide 7px y el anillo
   llegaba a 6px de reborde por lado, o sea 19px; scale(2.7) da 18.9. */
.fm-live{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);}
.fm-live::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:rgba(74,222,128,.5);animation:livePulse 1.8s infinite;pointer-events:none;}
@keyframes livePulse{0%{transform:scale(1);opacity:.55;}70%{transform:scale(2.7);opacity:0;}100%{transform:scale(2.7);opacity:0;}}
/* Fila completa de la rejilla y tarjeta de verdad: el flex-basis de la epoca
   de la banda no significa nada dentro de un grid y el detalle caia aplastado
   en una celda de 145px. */
.metric-detail{position:relative;z-index:1;flex:1 1 100%;grid-column:1 / -1;background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);padding:16px 18px 12px;margin:0;}
/* ── Gráfica de actividad (Fase 3) ── */
.chart-toggle{display:flex;gap:4px;}
.ct-btn{width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-s);border:var(--bd-w) solid var(--bd2);background:rgba(255,255,255,0.04);color:var(--tx-on-acc);cursor:pointer;font-size:15px;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);}
.ct-btn:hover{border-color:var(--gp2);}
.ct-btn.on{background:var(--gd);border-color:var(--gb);color:var(--gp3);}
.ac-svg{width:100%;height:auto;display:block;overflow:visible;}
.ac-bar{transition:opacity .15s;cursor:pointer;}
/* ── Tooltip flotante de gráficas (sigue el cursor) ── */
.chart-tip{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;background:rgba(14,14,20,.97);border:0.5px solid var(--border2);border-radius:10px;padding:9px 11px;font-size:12px;color:#fff;box-shadow:0 10px 34px rgba(0,0,0,.55);min-width:150px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translate3d(-9999px,-9999px,0);transition:opacity .12s ease,transform .06s linear;will-change:transform,opacity;}
.chart-tip.show{opacity:1;}
.ctt-var{font-weight:700;padding:3px 0;margin:5px 0 6px;border-top:0.5px solid rgba(255,255,255,.08);border-bottom:0.5px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:6px;}
.ctt-h{font-weight:800;font-size:10.5px;color:var(--dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}
.ctt-row{display:flex;align-items:center;gap:7px;padding:2.5px 0;font-size:12px;color:var(--dim);white-space:nowrap;}
.ctt-row b{margin-left:auto;padding-left:14px;color:#fff;font-weight:800;}
.ctt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.ac-hitzone{cursor:crosshair;}
.ac-hit:hover + .ac-focus,.ac-col:hover .ac-focus{opacity:1;}
.chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;padding-top:12px;border-top:0.5px solid var(--border);}
.cl-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#fff;cursor:pointer;user-select:none;transition:opacity .15s;}
.cl-item.off{opacity:.4;}
.cl-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.cl-item.off .cl-dot{background:var(--muted)!important;}
.ac-tip{position:absolute;z-index:80;background:#000;border:0.5px solid var(--border2);border-radius:8px;padding:7px 10px;font-size:11px;pointer-events:none;opacity:0;transition:opacity .12s;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.6);}
.ac-tip.show{opacity:1;}
.ac-tip b{color:#fff;}
.dash-export{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12px;font-weight:700;padding:8px 14px;border-radius:8px;border:0.5px solid var(--border2);background:rgba(255,255,255,0.04);color:var(--dim);cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;}
.dash-export:hover{color:#fff;border-color:var(--gp2);}
/* ── DASHBOARD: por dueño ── */
.dash-owners{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.owner-card{background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);padding:16px;}
.owner-card-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:12px;}
.owner-card-head .owner-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
/* flex-wrap: son 4 columnas fijas (Leads/Llamadas/Cierre/Pipeline) y en
   pantalla estrecha desbordaban la tarjeta por la derecha (medido: el
   scrollWidth superaba al clientWidth ya a 472px). Envueltas caen 2x2. */
.owner-stats{display:flex;flex-wrap:wrap;gap:12px 16px;}
.owner-stat .os-val{font-size:22px;font-weight:900;line-height:1;letter-spacing:-.02em;}
.owner-stat .os-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:5px;}
/* ── DASHBOARD: por fuente ── */
.dash-sources{display:flex;flex-direction:column;gap:9px;}
.source-row{display:grid;grid-template-columns:150px 1fr 30px;align-items:center;gap:12px;}
.source-name{font-size:12px;font-weight:700;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.source-bar-track{height:8px;background:rgba(255,255,255,0.05);border-radius:999px;overflow:hidden;}
.source-bar-fill{height:100%;border-radius:999px;background:var(--gp2);transition:width var(--dur-2) var(--ease);}
.source-count{font-size:14px;font-weight:900;text-align:right;}
/* Cobros y Renovaciones NO son "por fuente": su tercera columna no es un
   numero de 30px, son botones. "Renovar" y "Renovado +90d" piden 172px en una
   pista de 30, o sea que se salian 142 por la derecha del panel y metian barra
   de desplazamiento horizontal en toda la zona. En Cobros el mismo fallo es
   menor: "Pagado" pide 55 en 30 y pisa el importe.
   La regla flex existia, pero SOLO dentro del @media de 860, asi que en
   escritorio seguian en la rejilla fija. Es la misma regla, sin condicion de
   ancho. El estilo en linea de esas filas ya decia flex-wrap, lo que confirma
   que quien las escribio las daba por flex en todos los anchos. */
#dashCobros .source-row, #dashRenov .source-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;}
#dashCobros .source-name, #dashRenov .source-name{flex:1 1 100%;}
.dash-empty-mini{font-size:12px;color:var(--muted);padding:12px;text-align:center;border:var(--bd-w) dashed var(--border2);border-radius:var(--r);}
/* Tarjetas KPI de las secciones nuevas (Velocidad, Resultados, Meta, Trafico).
   Sus clases .label y .value-md NO existian en ninguna hoja: la etiqueta salia
   a los 16px del body, casi del tamano de la cifra, y cada render ponia la
   cifra a un tamano distinto en linea (18, 19 y 20px). Una sola definicion, y
   los helpers dejan de cargar estilos encima. */
.dashboard .card-kpi{flex:1 1 190px;min-width:170px;}
.dashboard .card-kpi .label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
/* Icono opcional delante del label (mock JARVIS): solo glifos ya presentes en
   la fuente recortada, ver el aviso de pvHTML sobre los cuadrados en blanco. */
.dashboard .card-kpi .label i{font-size:13px;color:var(--gp3);margin-right:5px;vertical-align:-2px;}
.dashboard .card-kpi .value-md{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.2;}
.dashboard .card-kpi .nota{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;}
/* Nota al pie de seccion: estaba copiada en linea, identica, en tres renders. */
.dash-pie-nota{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5;}
@media (max-width:860px){
  .source-row{grid-template-columns:110px 1fr 26px;gap:9px;}
  /* Cobros y Renovaciones: en movil pasan a flex y envuelven. El grid fijo de 3 columnas cortaba el boton "Pagado" contra el borde (flex-wrap no aplica sobre display:grid) */
  #dashCobros .source-row, #dashRenov .source-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;}
  #dashCobros .source-name, #dashRenov .source-name{flex:1 1 100%;}
  /* Los botones de dinero median 22px de alto (11px de letra mas 4+4 de relleno
     mas el borde). Son "Pagado", "Renovar" y "Renovado +90d": los tres unicos
     controles del panel que mueven plata, y los tres se fallaban con el pulgar.
     Se agrandan con el pseudo-elemento invisible que ya usan .pipe-kbd y
     .rem-right button: 22 + 11 + 11 = 44 y el dibujo no se mueve un pixel. El
     inset horizontal es de solo -2px a proposito: entre "Renovar" y "Renovado
     +90d" hay 6px de hueco, y -4 los habria hecho invadirse. */
  #dashCobros button, #dashRenov button{position:relative;}
  #dashCobros button::after, #dashRenov button::after{content:'';position:absolute;inset:-11px -2px;}
  /* Toasts por encima de la barra inferior movil (antes quedaban debajo, tapados) */
  .data-error, .data-ok{bottom:calc(80px + env(safe-area-inset-bottom,0px));}
}

/* ── VISTA KANBAN (aditiva; la vista lista sigue intacta) ── */
.view-toggle{display:inline-flex;gap:4px;background:rgba(255,255,255,0.03);border:0.5px solid var(--border);border-radius:9px;padding:3px;}
.view-toggle .vt-btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12px;font-weight:700;padding:6px 12px;border-radius:7px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:color .14s,background .14s;}
.view-toggle .vt-btn.on{background:var(--gd);color:var(--gp3);}
.view-toggle .vt-btn:hover:not(.on){color:var(--dim);}
.view-toggle .vt-btn i{font-size:14px;}
.kanban{padding:32px 32px 48px;}
.kanban-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.kb-summary{display:flex;gap:22px;flex-wrap:wrap;align-items:center;padding:14px 20px;border-radius:12px;border:0.5px solid var(--border);background:var(--dark2);margin-bottom:18px;}
.kb-summary-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--dim);}
.kb-summary-item i{font-size:17px;color:var(--gp3);}
.kb-summary-item b{color:#fff;font-weight:800;font-size:15px;}
.kb-scroll{display:flex;gap:12px;overflow-x:auto;padding:0 4px 14px 0;scroll-behavior:smooth;}
.kb-scroll:focus-visible{outline:2px solid var(--gp2);outline-offset:3px;border-radius:12px;}
/* Navegar el tablero sin tener que bajar a arrastrar la barra. Los botones son
   la forma DESCUBRIBLE; la rueda y el teclado son los atajos para quien ya lo
   sabe. Arrastrar el tablero con el raton queda descartado a proposito: las
   tarjetas son draggable para cambiar de etapa y las dos cosas chocarian. */
.kb-nav{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:0 0 10px;}
.kb-nav[hidden]{display:none;}
.kb-nav button{width:34px;height:34px;border-radius:999px;border:0.5px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--tx);display:inline-flex;align-items:center;
  justify-content:center;font-size:15px;cursor:pointer;
  transition:border-color var(--dur-1),background var(--dur-1),color var(--dur-1);}
.kb-nav button:hover:not(:disabled){border-color:var(--gp2);background:rgba(154,87,245,.14);color:#fff;}
.kb-nav button:disabled{opacity:.3;cursor:default;}
.kb-scroll::-webkit-scrollbar{height:8px;}
.kb-scroll::-webkit-scrollbar-thumb{background:rgba(154,87,245,.4);border-radius:8px;}
.kb-col{flex:0 0 280px;background:rgba(255,255,255,0.02);border:0.5px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 260px);}
.kb-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 11px;border-bottom:0.5px solid var(--border);}
.kb-col-name{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);}
.kb-col-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.kb-col-meta{display:flex;align-items:baseline;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap;}
.kb-col-meta b{color:#fff;font-weight:800;font-size:13px;}
.kb-cards{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:4px;transition:background .15s;border-radius:8px;}
.kb-cards::-webkit-scrollbar{width:4px;}
.kb-cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px;}
.kb-empty{padding:14px 8px;text-align:center;font-size:11.5px;color:var(--muted);font-style:italic;}
.kb-card{position:relative;padding:11px 13px;border-radius:var(--r);border:var(--bd-w) solid var(--bd);background:rgba(255,255,255,0.03);cursor:pointer;transition:transform var(--dur-1) var(--ease),border-color var(--dur-1),background var(--dur-1),opacity var(--dur-2);}
.kb-card:hover{border-color:var(--gb);background:rgba(154,87,245,0.06);transform:translateY(-1px);}
.kb-card:active{transform:translateY(0);}
.kb-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;}
.kb-card-name{font-size:13.5px;font-weight:700;color:#fff;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.kb-fire{font-size:14px;flex-shrink:0;line-height:1;filter:drop-shadow(0 0 6px rgba(251,146,60,0.55));}
.kb-card-sub{font-size:11.5px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Proxima accion en la tarjeta: fecha (misma regla que la lista) + texto. Vencido
   y Hoy llevan color Y palabra, no solo color. */
.kb-next{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:11px;color:var(--dim);min-width:0;}
.kb-next i{font-size:12px;flex-shrink:0;color:var(--muted);}
.kb-next-date{flex-shrink:0;font-weight:700;}
.kb-next-date.overdue{color:var(--err);}
.kb-next-date.today{color:var(--warn);}
.kb-next-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.kb-foot-r{display:flex;align-items:center;gap:6px;flex-shrink:0;}
/* Probabilidad de cierre del diagnostico, solo cuando existe. Color por scClass(). */
.kb-score{font-size:10px;font-weight:800;line-height:1.5;padding:1px 6px;border-radius:999px;border:1px solid currentColor;}
/* Acciones directas de la tarjeta (WhatsApp, Llamar, Hecho, Follow-up): botones
   secundarios, mismo lenguaje que las flechas de .kb-move. */
.kb-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.kb-act{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:5px 6px;font:inherit;font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;border-radius:6px;border:0.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--dim);cursor:pointer;transition:border-color var(--dur-1),background var(--dur-1),color var(--dur-1);}
.kb-act i{font-size:13px;flex-shrink:0;}
.kb-act:hover{border-color:var(--gb);background:rgba(154,87,245,.12);color:#fff;}
.kb-act-wa:hover,.kb-act-follow:hover{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-bg);}
/* Estados del movimiento (fase 3): "guardando" mientras la nube responde y
   "pendiente" si el cambio quedo en la cola de este navegador. Sin animacion:
   es un cambio de estado, no una entrada. */
.kb-card--sync{border-style:dashed;opacity:.7;}
.kb-card--pendiente{border-color:var(--warn-bd);}
.kb-sync{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:10.5px;font-weight:700;color:var(--warn);}
.kb-sync i{font-size:12px;flex-shrink:0;}
.kb-progress{margin-top:9px;height:4px;background:rgba(255,255,255,0.05);border-radius:999px;overflow:hidden;}
.kb-progress-fill{height:100%;border-radius:999px;transition:width var(--dur-2) var(--ease);}
.kb-card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;}
.kb-owner{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--muted);}
.kb-owner-dot{width:16px;height:16px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.15);}
.kb-value{font-size:11.5px;font-weight:800;color:var(--gp3);}
.kb-value small{color:var(--muted);font-weight:600;}
@media(max-width:860px){
  .kanban{padding:18px 16px 36px;}
  .kb-col{flex:0 0 250px;max-height:none;}
  /* Dedos, no raton. */
  .kb-nav button{width:44px;height:44px;}
  .kb-summary{padding:12px 14px;gap:14px;}
  .kb-summary-item{font-size:13px;}
  .kb-summary-item b{font-size:14.5px;}
}

/* ── Contacto: WhatsApp + correo ── */
.fu-contact{display:flex;gap:6px;}
/* ── WORKSPACE 3 COLUMNAS (estilo HubSpot) ── */
/* Columnas y padding-top los fija el bloque FICHA v2 del final (gana por orden). */
.ws-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start;padding:20px;}
.ws-left{display:flex;flex-direction:column;gap:12px;position:sticky;top:14px;}
.ws-card{background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);padding:16px;}
.ws-card-t{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gp3);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.ws-card-t i{font-size:13px;}
.ws-contact{text-align:center;}
.ws-contact .lead-avatar{width:56px;height:56px;border-radius:16px;margin:0 auto 10px;font-size:20px;}
/* ── Avatar con la foto real del lead ──
   Sin foto se queda EXACTAMENTE como estaba: cuadrado morado con las
   iniciales al centro. La clase .con-foto solo se pone cuando hay imagen y
   ademas ha cargado bien. */
#ws-avatar{position:relative;overflow:hidden;}
#ws-avatar .av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#ws-avatar .av-ini{position:relative;z-index:1;line-height:1;}
#ws-avatar.con-foto{
  border:1.5px solid var(--gp2);
  /* resplandor: un halo suave pegado al borde y una sombra proyectada */
  box-shadow:0 0 0 3px rgba(154,87,245,.16), 0 0 18px -2px rgba(154,87,245,.55), 0 8px 22px -8px rgba(154,87,245,.8);
}
/* Con foto, las iniciales bajan a la esquina inferior derecha sobre una
   pastilla oscura, para que se lean encima de cualquier imagen. */
#ws-avatar.con-foto .av-ini{
  position:absolute;right:2px;bottom:2px;
  font-size:9.5px;font-weight:900;letter-spacing:.02em;
  padding:2px 4px;border-radius:7px;
  background:rgba(14,14,20,.78);color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}
/* Se pide raton de verdad ademas de no-preference: en tactil el toque dispara
   el hover y el resplandor se quedaba pegado despues de levantar el dedo. */
@media (prefers-reduced-motion: no-preference) and (hover:hover) and (pointer:fine){
  #ws-avatar.con-foto{transition:box-shadow .25s var(--ease),transform .25s var(--ease);}
  #ws-avatar.con-foto:hover{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(154,87,245,.26), 0 0 24px 0 rgba(154,87,245,.7), 0 10px 26px -8px rgba(154,87,245,.9);}
}
.ws-contact .lead-header-name{font-size:18px;font-weight:900;line-height:1.1;}
.ws-contact .lead-header-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.ws-recibido{font-size:11px;color:var(--gp3);margin-top:8px;display:inline-flex;align-items:center;gap:5px;background:var(--gd);border:0.5px solid var(--gb);padding:4px 10px;border-radius:999px;}
.ws-recibido:empty{display:none;}
/* Envuelve tambien en escritorio, no solo en el telefono. Con los 7 botones
   posibles (los 4 fijos mas bienvenida, Instagram y TikTok) la fila pide 294px
   dentro de los 267 de la tarjeta, y sin envolver lo que hace es ENCOGERLOS:
   pasan de cuadrados de 36 a rectangulos de 32, y a 28 en la columna estrecha. */
.ws-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:13px;}
.ws-q{width:36px;height:36px;border-radius:10px;border:0.5px solid var(--border2);background:rgba(255,255,255,.04);color:var(--dim);cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;}
.ws-q:hover{color:var(--gp3);border-color:var(--gp2);}
.ws-q:active{transform:scale(.94);}
.ws-prop{margin-bottom:11px;}
/* Marca donde acaba "en que punto esta" y empieza "quien hace que", sin
   meter otra caja dentro de la caja. */
.ws-sep{height:1px;background:var(--bd);margin:14px 0 13px;}
.ws-prop:last-child{margin-bottom:0;}
.ws-prop .fu-label{display:block;margin-bottom:5px;}
.ws-prop .fu-owner,.ws-prop .fu-input{width:100%;}
.ws-left .g2,.ws-left .g3{grid-template-columns:1fr;gap:0;}
.ws-left .stage-section{margin-top:15px;}
.ws-left .stage-section:first-child{margin-top:0;}
.ws-mid .ws-card{padding:0;overflow:hidden;}
.ws-deal-val{font-size:23px;font-weight:900;letter-spacing:-.02em;}
.ws-deal-pkg{font-size:12px;color:var(--muted);margin-top:2px;}
.ws-gw-status{font-size:12px;color:var(--dim);margin-bottom:11px;}
.ws-gw-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:13px;font-weight:700;padding:10px;border-radius:10px;border:none;background:var(--acc-fill);color:#fff;cursor:pointer;transition:filter .15s,transform .12s;box-shadow:0 8px 20px -12px rgba(154,87,245,.9);}
.ws-gw-btn:hover{filter:brightness(1.08);}
.ws-gw-btn:active{transform:scale(.98);}
.ws-gw-reset{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:12px;font-weight:600;padding:8px;border-radius:10px;border:0.5px solid var(--border2);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;margin-top:7px;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;}
.ws-gw-reset:hover{color:var(--gp3);border-color:var(--gp2);}
@media(max-width:1100px){.ws-left,.ws-mid{min-width:0;}}
@media(max-width:820px){
  .ws-grid{padding:12px 12px 90px;gap:12px;}
  .ws-left,.ws-mid{position:static;min-width:0;}
  .ws-card{padding:14px;}
  .stage-tab{min-width:78px;font-size:10.5px;padding:12px 6px 11px;}
  .stage-panel{padding:18px 16px 26px;}
}
.btn-wa{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:500;padding:8px 12px;border-radius:var(--r-s);border:0.5px solid var(--ok-bd);background:var(--ok-bg);color:var(--ok);cursor:pointer;transition:background var(--dur-1);}
.btn-wa:hover{background:rgba(74,222,128,0.18);}
.btn-mail{display:inline-flex;align-items:center;justify-content:center;width:38px;border-radius:var(--r-s);border:var(--bd-w) solid var(--bd2);background:rgba(255,255,255,0.05);color:var(--tx-2);cursor:pointer;font-size:16px;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);}
.btn-mail:hover{color:#fff;border-color:var(--gp2);}
.btn-wa-mini{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:11px;font-weight:500;padding:5px 12px;border-radius:var(--r-s);border:0.5px solid var(--ok-bd);background:var(--ok-bg);color:var(--ok);cursor:pointer;transition:background var(--dur-1);}
.btn-wa-mini:hover{background:rgba(74,222,128,0.18);}

/* ── COMMAND PALETTE (Ctrl+K / Cmd+K) ── */
#pipeSearch{padding-right:42px;}
.pipe-kbd{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:inherit;font-size:10px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.04);border:0.5px solid var(--border2);border-radius:5px;padding:2px 6px;cursor:pointer;transition:color .12s,border-color .12s,background .12s;}
.pipe-kbd:hover{color:var(--gp3);border-color:var(--gp2);background:var(--gd);}
.cp-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:100px 24px 24px;}
.cp-overlay.show{display:flex;} /* sin animación: se abre con Ctrl+K decenas de veces al día; animar acciones de teclado las hace sentir lentas */
.cp-card{width:100%;max-width:560px;background:var(--dark2);border:0.5px solid var(--border2);border-radius:14px;box-shadow:0 30px 90px -20px rgba(0,0,0,.85);overflow:hidden;display:flex;flex-direction:column;max-height:min(600px,calc(100vh - 200px));}
.cp-input-wrap{position:relative;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:0.5px solid var(--border);}
.cp-input-icon{color:var(--muted);font-size:18px;flex-shrink:0;}
.cp-input{flex:1;background:transparent;border:none;padding:16px 4px;font-family:inherit;font-size:15px;color:var(--tx);outline:none;min-width:0;}
.cp-input::placeholder{color:var(--muted);}
.cp-hint-key{font-family:inherit;font-size:10px;font-weight:700;color:var(--muted);padding:3px 7px;border-radius:5px;border:0.5px solid var(--border2);background:rgba(255,255,255,.03);flex-shrink:0;}
.cp-results{overflow-y:auto;padding:6px 0 8px;flex:1;}
.cp-results::-webkit-scrollbar{width:4px;}
.cp-results::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px;}
.cp-empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:13px;}
.cp-empty b{color:var(--dim);}
.cp-section-label{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 18px 6px;}
.cp-item{display:flex;align-items:center;gap:12px;padding:9px 18px;cursor:pointer;transition:background .12s;position:relative;}
.cp-item:hover,.cp-item.on{background:rgba(154,87,245,.10);}
.cp-item.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--gp2);border-radius:0 2px 2px 0;}
.cp-item-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;background:var(--gd);color:var(--gp3);border:0.5px solid var(--gb);}
.cp-item-body{flex:1;min-width:0;}
.cp-item-title{font-size:13.5px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cp-item-sub{font-size:11.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cp-item-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;flex-shrink:0;white-space:nowrap;}
.cp-item-enter{font-size:11px;color:var(--gp3);opacity:0;transition:opacity .12s;flex-shrink:0;font-weight:800;}
.cp-item.on .cp-item-enter,.cp-item:hover .cp-item-enter{opacity:1;}
.cp-footer{display:flex;gap:16px;padding:9px 18px;border-top:0.5px solid var(--border);font-size:11px;color:var(--muted);align-items:center;flex-wrap:wrap;}
.cp-footer > span{display:inline-flex;align-items:center;gap:5px;}
.cp-foot-key{font-family:inherit;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;border:0.5px solid var(--border2);background:rgba(255,255,255,.03);color:var(--dim);}
@media(max-width:560px){.cp-overlay{padding:56px 12px 12px;}}

/* ── SIDEBAR COLAPSABLE (D3) — desktop: mini rail vertical con solo iconos ── */
.sidebar-toggle{position:absolute;top:14px;right:10px;width:26px;height:26px;border-radius:7px;border:0.5px solid var(--border2);background:rgba(255,255,255,0.04);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:6;transition:color .14s,border-color .14s,background .14s;}
.sidebar-toggle:hover{color:var(--gp3);border-color:var(--gp2);background:var(--gd);}
.sidebar-toggle i{font-size:14px;}
.sidebar-toggle .st-open{display:inline-flex;}
.sidebar-toggle .st-closed{display:none;}
.app.sidebar-collapsed .sidebar-toggle{position:static;margin:12px auto 6px;}
.app.sidebar-collapsed .sidebar-toggle .st-open{display:none;}
.app.sidebar-collapsed .sidebar-toggle .st-closed{display:inline-flex;}
/* En colapsado ocultar todo el contenido normal del sidebar; mostrar solo el rail y el toggle */
.app.sidebar-collapsed .sidebar > *:not(.sidebar-toggle):not(.rail-items){display:none!important;}
.app.sidebar-collapsed .sidebar{padding:0;overflow:hidden;}
.app.sidebar-collapsed .rail-items{display:flex;}
.rail-items{display:none;flex-direction:column;align-items:center;gap:6px;padding:6px 0 10px;flex:1;width:100%;overflow-y:auto;}
.rail-items::-webkit-scrollbar{width:3px;}
.rail-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
.rail-sep{height:1px;background:var(--border);margin:6px 10px;align-self:stretch;}
.rail-item{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);border:0.5px solid transparent;background:transparent;font-size:17px;padding:0;flex-shrink:0;}
.rail-item:hover{color:var(--gp3);background:var(--gd);border-color:var(--gb);}
.rail-item.on{color:#fff;background:var(--acc-fill);border-color:transparent;box-shadow:0 6px 14px -6px rgba(154,87,245,.85);}
.rail-item i{font-size:17px;}
.rail-spacer{flex:1;min-height:8px;}
.rail-avatar{width:36px;height:36px;border-radius:11px;background:var(--acc-fill);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px -4px rgba(0,0,0,.4);background-size:cover;background-position:center 20%;cursor:pointer;flex-shrink:0;transition:transform .14s;}
.rail-avatar:hover{transform:scale(1.06);}
@media (max-width:860px){
  .sidebar-toggle{display:none!important;}
  .app.sidebar-collapsed{grid-template-columns:1fr;}
  .app.sidebar-collapsed .sidebar > *:not(.rail-items){display:revert!important;}
  .app.sidebar-collapsed .sidebar > .rail-items{display:none!important;}
  .app.sidebar-collapsed .sidebar{padding:revert;overflow:revert;}
}

/* ── ANIMACIONES SUTILES DE ENTRADA (D5) — modales y expansión de gráficas ── */
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
@keyframes modalIn{from{opacity:0;transform:scale(.965) translateY(-6px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes detailIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.modal-bg:not(.hidden){animation:overlayIn .12s ease;}
.modal-bg:not(.hidden) .modal{animation:modalIn .22s var(--ease);}
.em-overlay.show{animation:overlayIn .12s ease;}
.em-overlay.show .em-card{animation:modalIn .24s var(--ease);}
.metric-detail{animation:detailIn .22s var(--ease);transform-origin:top;}
@media (prefers-reduced-motion:reduce){
  .modal-bg:not(.hidden),.modal-bg:not(.hidden) .modal,
  .em-overlay.show,.em-overlay.show .em-card,
  .metric-detail{animation:none;}
}

/* === Mejoras responsive (auditoria multimodelo) === */
/* 1. Restaura el token --bg2 que las cards de Progreso referencian (no definido en :root) */

/* 6. Barra plana de metricas: separa filas al envolver (row-gap solo actua en wrap) */
.dash-funnel{row-gap:16px;}
/* 7. El flex item del header no se comprime con nombres/emails largos */
.lead-header-info{min-width:0;}
/* 8. Command Palette no queda tapado por el teclado virtual (dvh con fallback: navegadores sin dvh ignoran la linea) */
.cp-card{max-height:min(600px,calc(100dvh - 200px));}

@media (max-width:1440px){
  /* 6. Ancla el subrayado activo a su metrica y no al texto de la fila siguiente */
  .fm-metric.on::after{bottom:-6px;}

  /* 7 · La columna de trabajo del lead se hundia al ENSANCHAR la ventana.
     La tercera columna (Negocio y The Grow Way) mide 236px FIJOS, y con los
     300 de la ficha y los huecos se lleva 564px antes de que la columna
     central reciba nada. Medido en el navegador: a 1102px de ventana la
     central se queda en 177px, y a 1099, con el reparto de dos columnas, en
     469. O sea que ensanchar la ventana dos pixeles la parte. Ahi dentro van
     el diagnostico, la propuesta y las notas.
     Se baja el reparto de dos columnas a todo portatil: los dos widgets pasan
     a una fila completa debajo, que es donde ya se ponen por debajo de 1100 y
     donde se leen igual de bien. */
  .ws-left,.ws-mid{min-width:0;}
}

/* La barra de pestanas del lead tambien desborda en ESCRITORIO, no solo en el
   telefono: a 1366 recibe 442px y las cinco piden unos 544, asi que "5
   Progreso" queda fuera. El degradado que avisa vive dentro del @media de 860,
   y la barra de desplazamiento esta oculta desde el principio, o sea que
   arriba no queda ninguna pista de que hay mas.
   Se le devuelve la barra, fina y en el morado de la casa, en vez de repetir
   el degradado con medidas fijas que habria que reajustar cada vez.
   Comprobado que las etiquetas SI caben en su pastilla (104 de caja contra 102
   que piden): el problema es la barra, no las pestanas. */
@media (min-width:861px){
  .stage-tabs{scrollbar-width:thin;scroll-snap-type:x proximity;}
  .stage-tabs::-webkit-scrollbar{display:block;height:4px;}
  .stage-tabs::-webkit-scrollbar-thumb{background:rgba(154,87,245,.32);border-radius:999px;}
  .stage-tab{scroll-snap-align:start;}
}

@media (max-width:1100px){
  /* 4. Workspace legible en desktop chico: columna central sin grids multi-columna estrechos */
  .ws-mid .g2, .ws-mid .g3{grid-template-columns:1fr;gap:0;}
  .ws-mid .stage-panel{padding:18px 18px 30px;}
  .ws-mid .stage-tabs{padding:8px 16px;}
  /* 11. Target tactil del mini-riel (sigue activo en iPad landscape > 860px) */
  .rail-item{width:44px;height:44px;}
}

@media (max-width:860px){
  /* 2. Elimina el overflow horizontal de pagina al expandir un lead o con tabla vacia */
  .app .lt-detail{min-width:0;}
  .app .lt-empty-tbl{min-width:0;}
  /* 3. Evita el zoom automatico de Safari iOS al enfocar campos (todos bajo 16px) */
  .app .fi, .app select.fi, .app textarea.fi,
  .modal .fi, .modal select.fi, .modal textarea.fi, .lg-in .fi,
  .em-input, .em-body, .api-input,
  .pipe-search input, .pipe-filter,
  .ltf-group input, .ltf-group select,
  .drp-dates input, .cp-input{font-size:16px;}
  /* 3-bis. La regla anti-zoom de arriba se dejo tres controles fuera porque no
     llevan .fi: los de "Propiedades" (Estado, Dueno, Proxima accion, Fecha
     limite) usan .fu-owner/.fu-input, y el cuadro de notas es un <textarea>
     pelado. Los tres estan en 13px, o sea que Safari de iPhone amplia al
     enfocarlos y NO vuelve solo: el resto de la sesion se trabaja con el CRM
     ampliado y desplazado. Son justo los que se tocan en CADA lead. */
  /* .note-edit-input se suma por el mismo motivo que los otros tres: no lleva
     .fi ni vive dentro de .note-input-row, asi que se quedo en 13px. Es el
     cuadro de EDITAR una nota ya escrita, o sea corregir lo que se apunto
     durante la llamada, que es justo cuando mas prisa hay. */
  .ws-prop .fu-owner, .ws-prop .fu-input, .note-input-row textarea, .note-edit-input{font-size:16px;}
  /* 5. Cierra el hueco 821-860px del workspace: apila a 1 columna desde 860 */
  .ws-grid{padding:12px 12px 90px;gap:12px;}
  .ws-left, .ws-mid{position:static;min-width:0;}
  .ws-card{padding:14px;}
  /* 6. Barra de metricas en 2 columnas con separadores simetricos (la tira es
     flex desde el 24-ago: el 46% de base da dos por fila, y el tope de 220px
     se suelta para que las dos llenen la pantalla del movil) */
  .fm-metric{flex-basis:46%;max-width:none;padding:6px 14px 8px;}
  .fm-metric:nth-child(odd){border-left:none;}
  /* Aqui habia dos parches de tamano de letra para los ejes de las graficas, y
     estaban mal. El problema es de ESCALA, no de tamano: el SVG se dibuja en
     unidades de viewBox y el navegador lo estira al ancho disponible, asi que
     lo que se ve es font-size x (ancho real / viewBox). Un numero fijo dentro
     de un @media que cubre de 0 a 860 no puede acertar, porque la grafica mide
     304px a 375 de ventana y 772 a 860.
     Medido con los parches puestos: el eje salia a 10,4px a 375 (bien), 26,5 a
     860 (absurdo) y 7 a 1280 (ilegible, porque ahi ya no aplicaba el @media).
     Ahora el tamano se calcula en el JS desde el ancho real del contenedor
     (renderActivityChart y metricDetailHTML), que acierta en cualquier ancho y
     ademas arregla las fechas del eje X, que se quedaron sin arreglar. */
  /* 7. Trunca el subtitulo del header del lead; en contacto se permite envolver */
  .app .lead-header-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .app .ws-contact .lead-header-sub{white-space:normal;overflow-wrap:anywhere;}
  /* 10. Recupera el chip de estado del pipeline en la lista movil (nombre + valor + estado).
        Nota: se corrige el selector del spec (.lt-cell:nth-of-type(1) no casa porque el 1er div
        es .lt-lead); la celda de estado es la unica .lt-cell sin lt-muted/lt-val. */
  .app .lt-row > .lt-cell:not(.lt-muted):not(.lt-val){display:block;margin-top:2px;}
  /* Al recuperar el chip de estado, la fila paso a tener TRES hijos visibles
     en una rejilla de dos columnas, y la colocacion automatica mandaba el
     importe solo a la segunda fila, a la izquierda, debajo del avatar,
     dejando media fila vacia a la derecha. MEDIDO en el navegador: nombre en
     (1,1), estado en (1,2) y "$1,500" en (2,1), fila de 93px de alto.
     Se colocan los dos a mano: el importe arriba a la derecha, que es donde
     se busca un numero, y el chip de estado en su propia linea completa. */
  .app .lt-row > .lt-cell.lt-val{grid-column:2;grid-row:1;text-align:right;}
  .app .lt-row > .lt-cell:not(.lt-muted):not(.lt-val){grid-column:1 / -1;grid-row:2;}
  /* 11. Targets tactiles ~36-40px en botones usados con el dedo */
  .rem-done, .em-x{width:38px;height:38px;}
  .ct-btn{width:36px;height:36px;}
  .lt-filter-btn{padding:11px 14px;}
  .drp-preset{padding:11px 12px;}
  .ws-q{width:40px;height:40px;}
}

@media (max-width:560px){
  /* 8. Command Palette respeta el teclado virtual en pantallas pequenas */
  .cp-card{max-height:min(560px,calc(100dvh - 90px));}
}

/* 9. Kanban movil con scroll-snap y headers de columna visibles.
      Se anexa DESPUES del @media de kanban existente para ganar la cascada a igual especificidad. */
@media (max-width:860px){
  .kb-scroll{scroll-snap-type:x proximity;scroll-padding-left:16px;}
  .kb-col{scroll-snap-align:start;flex:0 0 min(82vw,300px);max-height:calc(100dvh - 220px);}
}
/* === Accesibilidad: foco visible por teclado (UN solo sistema para toda la app) ===
   Con outline y no box-shadow: el truco del "separador" con box-shadow asume que el fondo
   es --dark, pero el sidebar y las pestanas viven sobre --dark2 (se veia un halo negro sucio),
   y ademas pisaba las sombras propias de .btn-login / .btn-ai / .stage-tab.on al enfocar. */
.sidebar-toggle:focus-visible,.rail-item:focus-visible,.vt-btn:focus-visible,.pipe-kbd:focus-visible,
.ct-btn:focus-visible,.cp-item:focus-visible,.kb-card:focus-visible,.rem-done:focus-visible,
.btn-new:focus-visible,.btn-ai:focus-visible,.btn-login:focus-visible,.cpr-go:focus-visible,
.dash-export:focus-visible,.owner-pill:focus-visible,.ltf-chip:focus-visible,.drp-preset:focus-visible,
.sb-logout:focus-visible,.btn-copy:focus-visible,.btn-wa-mini:focus-visible,.pkg-btn:focus-visible,
.stage-tab:focus-visible,.bn-item:focus-visible,.btn-ai-mini:focus-visible{outline:2px solid var(--gp2);outline-offset:2px;}
/* === Datos reales de la cuenta (Pre-Call) === */
.btn-ai-sec{background:var(--gd);border:0.5px solid var(--border2);color:var(--gp3);margin-bottom:10px;}
.btn-ai-sec:hover{background:rgba(154,87,245,.16);}
.diag-real{background:var(--gd);border:0.5px solid var(--border2);border-radius:12px;padding:14px 16px;margin-bottom:12px;font-size:12.5px;}
.dr-head{display:flex;align-items:flex-start;gap:8px;font-weight:800;color:#fff;font-size:13px;}
.dr-head-txt{flex:1;min-width:0;line-height:1.35;overflow-wrap:anywhere;}
.dr-head i.ti-circle-check{color:var(--gp3);}
.dr-plat{font-size:10px;font-weight:700;color:var(--muted);border:0.5px solid var(--border2);border-radius:999px;padding:2px 8px;}
.dr-x{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;font-size:15px;line-height:1;}
.dr-x:hover{color:var(--pk);}
.dr-stats{display:flex;gap:22px;margin:12px 0 10px;}
.dr-stats b{display:block;font-size:17px;font-weight:900;color:#fff;line-height:1;}
.dr-stats span{font-size:10px;color:var(--muted);}
.dr-bio{color:var(--dim);line-height:1.5;margin-bottom:8px;}
.dr-posts-t{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;}
.dr-post{color:var(--dim);line-height:1.45;padding:5px 0;border-top:0.5px solid var(--border);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere;}
.dr-note{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;color:var(--muted);}
.dr-note i{color:var(--gp3);}
/* Estado vacío de los datos reales cuando ni siquiera hay @: dice qué hacer. */
.dr-vacio{font-size:12px;color:var(--muted);line-height:1.5;margin:2px 0 14px;}
.prop-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.prop-actions .btn-copy{flex:1;min-width:150px;margin-top:0;}
/* Feedback al presionar (Emil): todo lo presionable responde al toque. El transform ya transiciona en cada regla específica */
.btn-new:active,.cpr-go:active,.dash-export:active,.owner-pill:active,.ltf-chip:active,.drp-preset:active,.ct-btn:active,.rem-done:active,.sb-logout:active,.vt-btn:active,.pipe-kbd:active,.btn-copy:active,.btn-wa-mini:active,.pkg-btn:active,.stage-tab:active{transform:scale(.97);}
/* Enlace al Viral Scanner (misma carpeta desplegada, sesion Supabase compartida) */
.dash-scanner{border-color:var(--gp2);color:var(--gp3);background:rgba(154,87,245,.1);text-decoration:none;}
.dash-scanner:hover{background:rgba(154,87,245,.18);color:var(--gp3);}
#seqPanel button,#dashCobros button,#dashRenov button,.kb-move button{transition:transform .16s var(--ease);}
#seqPanel button:active,#dashCobros button:active,#dashRenov button:active,.kb-move button:active,.ws-q:active{transform:scale(.95);}
/* La tarjeta "Datos del prospecto" se pliega en CUALQUIER anchura, no solo en
   movil. El razonamiento que ya estaba escrito aqui para el telefono ("el form
   se llena una vez, las pestanas se usan siempre") vale igual en escritorio, y
   la medida lo confirma: en una pantalla de 1001px la columna izquierda medi­a
   3623px y esta sola tarjeta se llevaba 2676, o sea el 74%. Con ella desplegada
   las otras cuatro tarjetas quedaban fuera de pantalla y el position:sticky de
   .ws-left no servia de nada, porque sticky solo actua si la columna cabe.
   La preferencia se recuerda, asi que quien la quiera siempre abierta la abre
   una vez. */
#wsDatosTitle{cursor:pointer;display:flex;align-items:center;gap:6px;
  border-radius:var(--r-s);transition:color var(--dur-1),background var(--dur-1);}
/* La fila entera es un boton desde que se puede plegar tambien en escritorio,
   pero no daba ninguna senal al pasar por encima. */
#wsDatosTitle:hover{color:#fff;background:rgba(154,87,245,.07);}
#wsDatosTitle:hover #wsDatosChev{color:#fff;}

/* El chevron NO es un icono de seccion: es el mando para abrir y cerrar. La
   regla generica .stage-section i le daba el mismo recuadro morado de 24x24 que
   al icono de la izquierda, asi que los dos se leian como insignias gemelas y
   ninguno decia "pulsame". Aqui se queda en glifo limpio. */
#wsDatosChev{display:inline-flex!important;align-items:center;justify-content:center;
  margin-left:auto;width:auto;height:auto;background:none;border:0;border-radius:0;
  font-size:15px;color:var(--muted);transition:transform .18s var(--ease),color var(--dur-1);}

#wsDatosCard.dcol > *:not(#wsDatosTitle){display:none;}
#wsDatosCard.dcol #wsDatosChev{transform:rotate(-90deg);}
/* Plegada, el titulo no separa nada: sobran su raya y el relleno de debajo.
   Medido: dejaban 17px de vacio bajo una linea que no dividia nada. */
#wsDatosCard.dcol #wsDatosTitle{margin-bottom:0;padding-bottom:0;border-bottom:0;}

/* ══════ PASE VISUAL (portado del Viral Scanner: que las 2 herramientas se sientan un producto) ══════ */
/* halo de marca: la luz entra por arriba en vez de un fondo plano */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(900px 420px at 50% -160px,rgba(154,87,245,.13),transparent 70%),
             radial-gradient(620px 320px at 100% -40px,rgba(109,40,217,.08),transparent 65%);}
/* NO poner z-index en .app: creaba un stacking context que atrapaba a helpOverlay/emailModal/perfilOverlay
   y los dejaba por debajo de #modalBg (que vive fuera de .app). El halo en -1 hace innecesario elevarlo. */
/* CIFRAS: ancho fijo (no bailan al actualizarse) + tracking negativo a peso 900 */
.metric-val,.fm-metric-v,.cpr-stat .sv,.owner-stat .os-val,.score-val,.thermo-txt .tt-v,
.stage-row-n,.lt-cell,.rem-date,.source-name,.pipe-count,.sb-count,.cpr-goal,.dash-title{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
/* ACABADO de marca */
::selection{background:rgba(154,87,245,.35);color:#fff;}
.fi,.fu-input{caret-color:var(--gp2);}
*{scrollbar-width:thin;scrollbar-color:rgba(154,87,245,.32) transparent;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(154,87,245,.32);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:rgba(154,87,245,.6);}
/* (el foco visible vive en UNA sola regla mas arriba, con outline) */

/* ══ VISTA DE AGENDA (TGM Agenda · Fase 1) — aditivo, no toca ninguna regla previa ══ */
.ag-ov{display:none;position:fixed;inset:0;z-index:420;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);align-items:flex-start;justify-content:center;padding:20px;overflow:auto;}
.ag-ov.show{display:flex;}
.ag-card{background:var(--dark2);border:0.5px solid var(--border2);border-radius:16px;width:100%;max-width:920px;padding:24px;box-shadow:var(--sh3);}
.ag-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px;}
.ag-title{font-size:18px;font-weight:900;display:flex;align-items:center;gap:9px;}
.ag-title i{color:var(--gp2);}
.ag-sub{font-size:12px;color:var(--muted);margin-bottom:18px;}
/* Cabecera de la Agenda: el enlace al panel y el cierre, juntos a la derecha */
.ag-head-acc{display:flex;align-items:center;gap:8px;flex:none;}
.ag-ir-panel{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 12px;
  border-radius:9px;background:rgba(154,87,245,.12);border:0.5px solid var(--gp2);
  color:var(--gp3);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .18s var(--ease),transform .18s var(--ease);}
.ag-ir-panel:hover{background:rgba(154,87,245,.26);transform:translateY(-1px);}
.ag-ir-panel:active{transform:translateY(0) scale(.97);}
.ag-sub-nota{display:block;margin-top:5px;font-size:11.5px;color:var(--muted);}
@media (max-width:860px){
  .ag-ir-panel{min-height:44px;padding:9px 12px;}
  /* En pantallas estrechas el texto sobra: el icono ya lo dice y el título queda. */
  .ag-ir-panel span{display:none;}
}
.ag-x{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;padding:2px;}
.ag-x:hover{color:var(--bright);}
.ag-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.ag-nav{background:var(--s2);border:0.5px solid var(--border);color:var(--dim);border-radius:8px;padding:7px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.16s var(--ease);}
.ag-nav:hover{background:var(--s3);color:var(--bright);}
.ag-rango{font-size:13px;font-weight:700;flex:1;min-width:160px;}
.ag-tz{font-size:11px;color:var(--muted);font-weight:600;}
.ag-aviso{border-radius:var(--r-s);padding:11px 13px;font-size:12px;line-height:1.55;margin-bottom:14px;display:flex;gap:9px;align-items:flex-start;}
.ag-aviso i{font-size:15px;flex-shrink:0;margin-top:1px;}
.ag-aviso.warn{background:var(--warn-bg);border:var(--bd-w) solid var(--warn-bd);color:var(--warn);}
.ag-aviso.err{background:var(--err-bg);border:var(--bd-w) solid var(--err-bd);color:var(--err);}
.ag-aviso.info{background:var(--acc-bg);border:var(--bd-w) solid var(--acc-bd);color:var(--acc3);}
.ag-dia{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 0 9px;}
.ag-dia:first-of-type{margin-top:0;}
.ag-res{background:var(--s2);border:0.5px solid var(--border);border-radius:12px;padding:15px 16px;margin-bottom:10px;box-shadow:var(--lift);}
.ag-res.cancelada{opacity:.55;}
.ag-res-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px;}
.ag-hora{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.ag-nombre{font-size:14px;font-weight:700;flex:1;min-width:120px;}
.ag-badge{font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap;}
.ag-b-confirmada{background:var(--acc-bg);color:var(--acc3);border:var(--bd-w) solid var(--acc-bd);}
.ag-b-completada{background:var(--ok-bg);color:var(--ok);border:var(--bd-w) solid var(--ok-bd);}
.ag-b-cancelada{background:rgba(255,255,255,.05);color:var(--tx-3);border:var(--bd-w) solid var(--bd);}
.ag-b-no_show{background:var(--err-bg);color:var(--err);border:var(--bd-w) solid var(--err-bd);}
.ag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px 18px;}
.ag-f{min-width:0;}
.ag-f-k{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.ag-f-v{font-size:13px;color:var(--dim);line-height:1.5;overflow-wrap:anywhere;}
.ag-f.ancho{grid-column:1/-1;}
.ag-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:0.5px solid var(--border);}
.ag-ficha{background:var(--gd);border:0.5px solid var(--gb);color:var(--gp3);border-radius:8px;padding:6px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.16s var(--ease);}
.ag-ficha:hover{background:rgba(154,87,245,.18);}
/* El mismo botón pero en <a>: sin subrayado de enlace. Y sólido, porque
   "Entrar a la llamada" compite con "Abrir ficha" y tiene que ganar. */
a.ag-ficha{text-decoration:none;}
.ag-sala{background:linear-gradient(135deg,#6D28D9,#9A57F5);border:0;color:#fff;}
.ag-sala:hover{background:linear-gradient(135deg,#6D28D9,#9A57F5);filter:brightness(1.08);}
.ag-nota{font-size:11px;color:var(--muted);}
.ag-vacio{text-align:center;padding:34px 16px;color:var(--muted);font-size:13px;}
.ag-vacio i{display:block;font-size:26px;color:var(--gp2);opacity:.55;margin-bottom:9px;}
.ag-login{max-width:340px;margin:10px auto 4px;text-align:center;}
.ag-login .fi{text-align:center;}
@media (max-width:640px){
  .ag-ov{padding:0;}
  .ag-card{border-radius:0;min-height:100vh;padding:18px 15px;}
  .ag-grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════════════════════════
   REPARTO DE LA NAVEGACION · fase 2 de la interfaz maestra (ago 2026)

   La queja: "Leads a la izquierda, herramientas arriba a la derecha, necesita
   una unidad y orden". El desorden no estaba solo entre paginas: estaba
   DENTRO del CRM, en una barra de siete controles que mezclaba cuatro cosas
   distintas. Aqui cada una se va con los suyos:

     NAVEGACION  Lista · Kanban · Semana  -> barra lateral (con Secciones)
     ACCION      Importar · Exportar      -> arriba, agrupadas entre si
     PREFERENCIA Completa/Simple          -> cabecera del panel
     FILTRO      fechas · estado · dueno · tabla -> cada uno donde filtra,
                 pero con el MISMO aspecto (.es-filtro) para que se lean como
                 familia estando en cuatro sitios

   Va al final del <style> a proposito: varias de estas reglas tienen que
   ganarle a un @media anterior de la misma especificidad, y aqui no depende
   de la suerte del orden.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Vistas del CRM, en la barra lateral ──────────────────────────────
   Una fila, no una lista vertical: la barra ya carga Secciones, Pipeline,
   buscador, filtros y la lista de leads. Tres filas mas se habrian comido
   media lista de leads, y el pipeline es lo que se mira todo el dia. */
.sb-vistas{padding:9px 10px 10px;}
.sb-vistas-t{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 8px 7px;}
.sb-vistas .view-toggle{display:flex;width:100%;gap:3px;}
/* Sin borde propio: encima ya cierra el de .shell-nav y debajo abre el de
   .pipe-header. Tres lineas en 90 px era ruido, no separacion. */
.sb-vistas .vt-btn{flex:1;min-width:0;justify-content:center;padding:6px 4px;gap:4px;white-space:nowrap;}
/* El candado de "Semana": pide la clave del panel de Agenda y sus dos
   vecinas no piden nada. Hasta que la fase 3 unifique el acceso, que se
   note antes de pulsar y no despues. */
.view-toggle .vt-btn i.vt-lock{font-size:10px;opacity:.62;margin-left:1px;}
.vt-clave:hover .vt-lock{opacity:.9;}
.rail-clave{position:relative;}

/* ── 2 · Cabecera del panel: el titulo y su densidad ─────────────────── */
.dash-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.dash-modo{flex-shrink:0;}

/* ── 3 · Importar y Exportar, un solo bloque ──────────────────────────────
   Mismo envoltorio que .view-toggle (fondo tenue, borde, radio 9): dos
   controles que se agrupan se dibujan igual, vayan donde vayan. */
.dash-acciones{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,0.03);border:0.5px solid var(--border);border-radius:9px;padding:3px;}
.dash-acciones .dash-export{border-color:transparent;background:transparent;}
.dash-acciones .dash-export:hover{color:#fff;border-color:transparent;background:rgba(255,255,255,0.06);}

/* ── 4 · La familia de filtros ────────────────────────────────────────────
   Mismo radio, mismo borde, mismo hover y el icono en el morado claro. NO se
   toca el tamano de letra del <select>: en movil vale 16px (linea ~1357) para
   que Safari iOS no haga zoom al enfocarlo, y una regla de aqui, mas tardia y
   de la misma especificidad, se lo habria comido en silencio. Por eso el
   12px se aplica solo a los botones. */
.es-filtro{font-family:inherit;font-weight:700;border-radius:9px;border:0.5px solid var(--border2);transition:border-color .15s;}
.es-filtro:hover{border-color:var(--gp2);}
.es-filtro > i:first-child{color:var(--gp3);}
button.es-filtro{font-size:12px;}
.owner-filter .owner-pill{border-radius:9px;font-size:12px;}

/* ── 5 · La copia del conmutador dentro del kanban ────────────────────────
   Se oculta en escritorio (el original esta en la barra, siempre a la vista)
   y se queda en movil (alli la barra es un cajon). El nodo NUNCA se borra:
   applyView() sincroniza vt-list/vt-kanban con vt-list-k/vt-kanban-k por id. */
.kanban-head > .vt-copia{display:none;}

@media (max-width:860px){
  .kanban-head > .vt-copia{display:inline-flex;}

  /* ── 6 · UX-01, terminado ───────────────────────────────────────────────
     UX-01 subio "Acciones pendientes" por encima de las metricas, pero no por
     encima de la barra de herramientas: en el telefono lo primero tras el
     titulo seguian siendo siete botones. Ahora la barra son tres controles y
     baja por debajo de lo urgente. A las nueve de la manana el telefono
     pregunta "a quien le escribo", no "que exporto". */
  .dashboard > #centinelaRespaldo{order:-3;}
  .dashboard > .dash-dos{order:-2;}   /* el wrapper de Acciones+Pipeline */
  .dashboard > .dash-toolbar{order:-1;}

  /* ── 7 · Los 44 px que faltaban ─────────────────────────────────────────
     Con min-width/min-height, no con width/height: un min- no lo puede pisar
     un width posterior, que es justo lo que le paso a .ws-q (medía 40 porque
     un @media de mas abajo ganaba por orden). Asi no vuelve a pasar. */
  .ws-q{min-width:44px;min-height:44px;}          /* los 4 iconos de contacto rapido */
  .ct-btn{min-width:44px;min-height:44px;}        /* alto ya iba a 44, ancho no */
  .rem-done{min-width:44px;min-height:44px;}
  .em-x{min-width:44px;min-height:44px;}
  /* Los que faltaban de los modales, todos fuera de .app y por eso fuera del
     pase anterior: median 40 (Crear lead / Cancelar), 41 ("Entrar") y 37 (los
     del modal de correo). Van a lo ancho completo o en pareja flexible, asi
     que un min-height no descuadra ninguna caja. */
  .btn-modal-create,.btn-modal-cancel,.btn-login,.em-btn{min-height:44px;}
  /* El ojo de ver la contrasena (33x29) y el enlace de recuperarla (14 de alto)
     NO se agrandan con min-height: el ojo esta posicionado DENTRO del campo y
     crecer le comeria el texto, y el enlace centrado se descolocaria. Se usa el
     pseudo-elemento invisible: la zona sube a 45x45 y a 44 de alto, y el dibujo
     no se mueve. Ese enlace es el unico camino de vuelta si alguien se queda
     fuera, y en el telefono no hay tecla Escape que lo supla. */
  .lg-eye::after{content:'';position:absolute;inset:-8px -6px;}
  .lg-forgot{position:relative;}
  .lg-forgot::after{content:'';position:absolute;inset:-15px -20px;}
  /* La "X" de la ventana de ayuda no tiene clase y va con estilos en linea:
     mide 22x32 y es el UNICO control de esa pantalla, en un aparato sin tecla
     Escape. #helpOverlay no contiene ningun otro boton. */
  #helpOverlay button{position:relative;}
  #helpOverlay button::after{content:'';position:absolute;inset:-11px -7px;}
  /* La fila de contacto rapido no cabe, y es efecto colateral de los 44px de
     .ws-q: son hasta 7 botones (los 4 fijos mas bienvenida, Instagram y TikTok)
     y ninguno puede encoger, asi que suman 7x44 + 6x7 = 350 dentro de los 299
     utiles de la tarjeta. Como la fila va centrada, 25px se salen por la
     IZQUIERDA, donde no hay forma de llegar deslizando: el boton de WhatsApp,
     el mas usado de la ficha, quedaba medio cortado contra el borde. */
  .ws-quick{flex-wrap:wrap;row-gap:8px;}

  /* Estos dos viven en la barra superior movil, cuya ALTURA alimenta el
     calc() del kanban. Se agrandan con el pseudo-elemento invisible que ya
     usan .pipe-kbd y .rem-right button: la zona de toque sube a 44+ y el
     dibujo no se mueve un pixel, asi que no se descuadra nada. */
  .menu-toggle,.mtb-av{position:relative;}
  .menu-toggle::after,.mtb-av::after{content:'';position:absolute;inset:-2px;}

  /* ── 8 · "Acciones pendientes" era ilegible en el telefono ───────────────
     .reminder es una rejilla de dos columnas (1fr auto). En el movil la
     columna "auto" son la etiqueta de vencimiento mas cuatro botones, y se
     comia 276 de los 309 px utiles: al texto le quedaban 33 px de ancho para
     148 que necesita. Medido, no estimado. El resultado era "Seguimiento de
     la propuesta" recortado a "Seg...", justo en el panel cuyo unico trabajo
     es responder "que hago ahora". Y el nombre del lead partido en tres
     lineas al lado.
     Con una sola columna, el texto se lleva el ancho entero y los botones
     bajan a su propia linea, alineados a la derecha. Mismo patron que ya se
     uso en las filas de Cobros y Renovaciones. */
  .reminder{grid-template-columns:1fr;}
  .rem-right{justify-content:flex-end;flex-wrap:wrap;}

  /* Los chips de posponer median 41 px de zona tocable, no 44: el inset de
     -12px se queda a tres pixeles de vuestra propia regla. Se corrige SOLO
     en vertical; ampliarlo tambien en horizontal haria que +3d invadiera a
     +1sem, que solo estan separados por 8 px. */
  .rem-right button::after{inset:-14px -6px;}

  /* La pastilla de tareas de Fathom mide 28px de dibujo, y agrandarla de
     verdad la convertiria en un boton, que es justo lo que no es. Mismo
     pseudo-elemento invisible: la zona sube a 48 y el dibujo no se mueve.
     Solo en vertical: las pastillas van con 6px de hueco entre ellas y en
     horizontal se invadirian. */
  .fa-chip{position:relative;}
  .fa-chip::after{content:'';position:absolute;inset:-10px 0;}

  /* Los dos que se quedaron fuera del pase de los 44px. .dr-x mide 19x19 (un
     icono de 15 mas 2+2 de relleno) y es la X que descarta los datos reales
     traidos de la cuenta; .btn-del-ref unos 18 de alto, y su hermano
     .btn-add-ref si entro en el pase.
     "Eliminar" solo crece en vertical: va pegado a la esquina de .ref-block y
     en horizontal se saldria de la tarjeta. */
  .dr-x{position:relative;}
  .dr-x::after{content:'';position:absolute;inset:-13px;}
  .btn-del-ref::after{content:'';position:absolute;inset:-13px -4px;}

  /* ── 9 · Lo que quedaba por debajo de 44 en las pestanas del workspace ─────
     Ninguno tiene pseudo-elemento que lo agrande. Sumando relleno mas linea:
       .prop-actions .btn-copy    5+5+13,2  = 23px  (Copiar / PDF / imagen / WA)
       #sp-progreso button        6+6+14,4  = 26px  (Marcar pagado)
       #seqPanel button           7+7+14,4  = 28px  (el WhatsApp de cada toque)
       .prop-tab                  8+8+13,2  = 29px
       .btn-add-ref/.btn-note-save 8+8+14,4 = 30px
       .obj-question             10+10+15,6 = 36px  (se usa con la llamada viva)
       #wsDatosTitle             24 del icono + 12 = 36px
       .gw-brief > summary       11+11+15,6 = 38px  (brief y transcripcion)
       .btn-save                 11+11+15,6 = 38px  (Guardar datos)
       .pkg-btn                  12+12+15,6 = 40px
     Es el final del embudo: copiar la propuesta, mandar el toque, marcar un
     cobro. Fallar el toque ahi cuesta dinero, no comodidad. */
  .prop-actions .btn-copy,#seqPanel button,#sp-progreso button,
  .prop-tab,.btn-add-ref,.btn-note-save,.obj-question,
  .gw-brief > summary,.btn-save,.pkg-btn,#wsDatosTitle{min-height:44px;}

  /* La barra de pestanas de la propuesta desliza igual que la del workspace
     (5x92 mas 24 de huecos = 484 dentro de 271 utiles) y no lo avisaba. Se le
     pone el mismo anclaje que a .stage-tabs. */
  .prop-nav{scroll-snap-type:x proximity;}
  .prop-tab{scroll-snap-align:start;}

  /* ── 10 · Los dos renglones de abajo de la tarjeta de lead ────────────────
     Iban a 10px (medido), el valor mas pequeno de toda la lista: el estado y
     el dueno se leian como "algo morado" y "algo rosa", no como palabras, en
     la lista que se mira todo el dia. Suben a 11,5, que es el tamano que ya
     usan .kb-card-sub y .kb-col-name para esta misma informacion en el kanban.
     VA AQUI Y NO EN EL BLOQUE MOVIL DE ARRIBA a proposito: .lead-owner tiene
     su regla base en la linea 1005, o sea DESPUES, y con la misma
     especificidad ganaba por orden y se quedaba en 10px. Es la misma trampa
     que ya le paso a .ws-q. Comprobado en el navegador: 11,5 en los dos. */
  .lead-status,.lead-owner{font-size:11.5px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   SECCION FATHOM · las llamadas grabadas
   ──────────────────────────────────────────────────────────────────────────
   Es una VISTA de este mismo archivo, no una pagina aparte. El porque esta en
   RUTAS_POR_DEFECTO de assets/shell.js: una pagina suelta obligaria a una
   tercera copia del login y del segundo factor.
   ══════════════════════════════════════════════════════════════════════════ */
.fa-grupo{margin-bottom:30px;}
.fa-grupo-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.fa-grupo-t{font-size:15px;font-weight:800;color:var(--dim);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;}
.fa-grupo-t i{color:var(--gp3);font-size:17px;}
.fa-grupo-n{font-size:11px;font-weight:800;color:var(--muted);background:rgba(255,255,255,.05);border:0.5px solid var(--border);border-radius:999px;padding:2px 9px;}
.fa-grupo-sub{font-size:12px;color:var(--muted);line-height:1.5;margin:-4px 0 12px;max-width:62ch;}

.fa-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}
/* Columna, y los botones anclados abajo. La rejilla iguala la altura de las
   tarjetas de una misma fila, asi que la que menos contenido tiene se queda
   con el hueco: medido, 95px de vacio debajo de sus botones frente a 16 en la
   mas llena. Con la fila de acciones pegada al fondo, ese hueco pasa a estar
   ENTRE el texto y los botones, que es donde no se nota, y de paso los botones
   de las tres tarjetas quedan a la misma altura y se leen como una fila. */
.fa-card{background:var(--bg2);border:var(--bd-w) solid var(--bd);border-radius:var(--r);padding:15px 16px;transition:transform var(--dur-2) var(--ease),border-color var(--dur-2);
  display:flex;flex-direction:column;}
.fa-card .fa-acciones{margin-top:auto;padding-top:4px;}
/* El levantamiento tambien se queda para raton. Al tocar la tarjeta en el
   telefono se quedaba levantada hasta tocar en otro sitio, que parece un
   estado seleccionado sin serlo. */
@media (hover:hover) and (pointer:fine){
  .fa-card:hover{transform:translateY(-3px);border-color:var(--gb);}
}
/* La linea de servicio: fecha, duracion, invitados. Muy apagada y arriba del
   todo. Antes esto eran dos bloques que competian con el titulo sin aportar
   nada que haga decidir. El contraste con el titular (.38 contra .94) es lo
   que crea el primer plano; agrandar el titular solo no bastaba. */
.fa-card-serv{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin-bottom:7px;}
.fa-card-t{font-size:15.5px;font-weight:800;color:rgba(255,255,255,.94);line-height:1.35;
  letter-spacing:-.01em;margin-bottom:12px;}
/* La pastilla que cuenta las tareas y las abre. Encendida cuando estan
   abiertas, para que se vea que ese boton es el que las trajo. */
.fa-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.fa-chip{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:11px;font-weight:700;
  color:var(--dim);background:rgba(255,255,255,.05);border:0;border-radius:999px;padding:4px 10px;
  cursor:pointer;min-height:28px;transition:color .15s,background .15s,transform .16s var(--ease);}
.fa-chip.on{color:var(--gp3);background:rgba(154,87,245,.14);}
.fa-chip:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){ .fa-chip:hover{color:#fff;background:rgba(255,255,255,.09);} }
/* El adelanto y el resumen completo son DOS nodos, no uno recortado.
   Antes era uno solo con max-height, y el recorte caia donde caia: medido, se
   veia el 19% del resumen y de las 3,5 lineas visibles la primera era
   literalmente "## Proposito de la reunion" y la segunda un hueco. Al
   contenido le quedaba linea y media. Ahora el adelanto es el primer parrafo
   de PROSA (faPrimerParrafo) y el completo lleva el markdown ya renderizado. */
.fa-resumen{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:12px;white-space:pre-wrap;cursor:pointer;}
@media (hover:hover) and (pointer:fine){
  .fa-resumen:hover{color:var(--dim);}
}
/* El resumen entra desvanecido y desde 4px arriba, no de golpe. Solo opacidad
   y transform, que son las dos que el navegador puede animar sin recalcular la
   pagina entera. 180ms y la curva de la casa: por debajo de 300 y sin curva
   nueva, que la coherencia importa mas que el efecto.
   El bloque global de prefers-reduced-motion de arriba ya lo apaga solo. */
.fa-resumen,.fa-tareas{transition:opacity .18s var(--ease),transform .18s var(--ease),color .15s;}
.fa-entra{opacity:0;transform:translateY(-4px);}
/* Los titulos del resumen de Fathom (## Algo). En negrita y en el morado
   claro, que es como esta seccion marca lo que es un rotulo y no contenido. */
.fa-h{display:block;color:var(--gp3);font-weight:800;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;margin:10px 0 3px;}
.fa-h:first-child{margin-top:0;}
.fa-li{display:block;padding-left:12px;position:relative;}
.fa-li::before{content:'·';position:absolute;left:3px;color:var(--gp3);font-weight:800;}
/* El degradado de "hay mas texto". Solo cuando esta cerrado: abierto, un
   difuminado sobre la ultima linea la haria ilegible sin motivo. */
/* El degradado que difuminaba el recorte ya no hace falta: el adelanto corta
   por linea entera con line-clamp y termina en puntos suspensivos, que dice lo
   mismo sin tapar media linea de texto. */
.fa-vacio-resumen{font-size:12px;color:var(--muted);font-style:italic;margin-bottom:10px;}
.fa-tareas{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:5px;}
.fa-tareas li{font-size:12px;color:var(--muted);line-height:1.45;display:flex;gap:7px;align-items:flex-start;}
.fa-tareas li i{color:var(--gp3);font-size:12px;flex-shrink:0;margin-top:2px;}
.fa-acciones{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
/* Propiedades explicitas y no `transition:all`, que era lo que habia: con
   `all` el navegador vigila TODAS, incluidas las que cambian de golpe al
   redibujar la tarjeta, y ademas anima cosas que nadie pidio. Esta seccion es
   posterior al pase de Emil y por eso se le habia colado. */
.fa-btn{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--tx-3);background:rgba(255,255,255,.04);border:var(--bd-w) solid var(--bd);border-radius:var(--r-s);padding:6px 10px;cursor:pointer;min-height:32px;
  transition:color .15s,border-color .15s,background .15s,transform .16s var(--ease);}
/* El hover, solo donde hay raton de verdad. En el telefono un :hover se
   dispara AL TOCAR y se queda pegado despues de soltar, asi que el boton se
   queda encendido como si siguiera bajo el cursor. */
@media (hover:hover) and (pointer:fine){
  .fa-btn:hover{color:#fff;border-color:var(--gp2);background:rgba(154,87,245,.10);}
}
/* La unica familia de botones del CRM que no respondia al pulsar. El resto ya
   lo hacia desde el pase de Emil; Fathom nacio despues y se quedo fuera. */
.fa-btn:active{transform:scale(.97);}
/* Los tres pesos de la fila. La accion pendiente lleva relleno solido y va
   primera; "Ver todo" es texto sin caja; Fathom es solo el icono, porque es
   un enlace a otra web y no una decision que tomar aqui. */
.fa-btn-p{background:var(--gp3);border-color:var(--gp3);color:#0b0b0b;}
.fa-btn-t{background:none;border-color:transparent;padding-left:6px;padding-right:6px;}
.fa-btn-i{margin-left:auto;padding:6px 8px;background:none;border-color:transparent;color:var(--muted);}
.fa-btn-i i{font-size:15px;}
@media (hover:hover) and (pointer:fine){
  .fa-btn-p:hover{background:#fff;border-color:#fff;color:#0b0b0b;}
  .fa-btn-t:hover,.fa-btn-i:hover{background:rgba(255,255,255,.06);border-color:transparent;color:#fff;}
}

/* El motivo de "sin clasificar". Es lo que convierte una tarjeta muda en una
   que se explica: sin esto, "sin clasificar" parece un error nuestro. */
.fa-motivo{font-size:11.5px;color:var(--muted);line-height:1.5;background:rgba(255,255,255,.03);border-left:2px solid var(--gb);border-radius:0 7px 7px 0;padding:7px 10px;margin-bottom:10px;}

.fa-lead-link{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--gp3);cursor:pointer;background:none;border:none;font-family:inherit;padding:0;}
.fa-lead-link:hover{text-decoration:underline;}
/* Un lead_id que ya no existe (ficha borrada). No hay clave ajena a `leads` a
   proposito, ver la migracion: aqui es donde se resuelve, diciendolo. */
.fa-lead-roto{font-size:11.5px;color:var(--amber);font-weight:700;}

.fa-vacio{text-align:center;padding:40px 22px;color:var(--muted);font-size:12.5px;line-height:1.6;border:0.5px dashed var(--border);border-radius:12px;}
.fa-vacio i{font-size:24px;color:var(--gp3);display:block;margin-bottom:10px;}
.fa-vacio b{display:block;color:var(--dim);font-size:14px;font-weight:800;margin-bottom:5px;}

/* Las reuniones DENTRO de la ficha del lead. La seccion es para navegar; la
   ficha es donde se trabaja, asi que aqui van mas compactas. */
.ws-reuniones{display:flex;flex-direction:column;gap:9px;}
.ws-reunion{background:rgba(154,87,245,0.05);border:0.5px solid var(--gb);border-radius:10px;padding:12px 14px;}
.ws-reunion-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px;}
.ws-reunion-t{font-size:12.5px;font-weight:800;color:var(--dim);}
.ws-reunion-f{font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap;}

@media (max-width:860px){
  .fa-cards{grid-template-columns:1fr;}
  /* 44 px, la misma regla que el resto del pase de movil. */
  .fa-btn{min-height:44px;padding:8px 12px;}
}

/* ══ La trampa de cascada del workspace, arreglada ═══════════════════════════
   Dentro del @media de 1100 hay dos reglas, `.ws-mid .stage-panel` y
   `.ws-mid .stage-tabs`, que tienen la MISMA especificidad que las del pase de
   movil (`.app .stage-panel` y `.app .stage-tabs`) pero estan MAS ABAJO en el
   archivo, asi que a 860 y menos ganaban ellas y se comian el pase. Y a 420 y
   menos tambien ganaban a `.stage-panel` a secas, que es de especificidad
   menor, o sea que ese ajuste quedo aplicado a medias: sobrevivia el gap pero
   no el relleno.
   Medido en el navegador a 375: salia `18px 18px 30px` en el panel y
   `8px 16px` en la barra, cuando el pase movil pedia `18px 16px 36px` y
   `8px 14px`. Son 4px menos de contenido justo donde la barra ya no cabe.
   Se redeclara con la MISMA forma (.ws-mid ...) y despues, para que gane quien
   debe ganar sin tocar nada mas. */
@media (max-width:860px){
  .ws-mid .stage-panel{padding:18px 16px 36px;}
  .ws-mid .stage-tabs{padding:8px 14px;}
}
@media (max-width:420px){
  .ws-mid .stage-panel{padding:16px 14px 32px;}
  .ws-mid .stage-tabs{padding:8px 12px;}
}

/* ══ PITCH · la capa a pantalla completa ══
   ESTO ESTUVO EN EL ATRIBUTO style DEL PROPIO DIV Y ROMPIO EL CRM ENTERO.
   El div se escribio como <div id="pitchView" hidden style="...display:flex">
   y `hidden` NO GANA a un display puesto en el atributo style: `hidden` es una
   regla de la hoja del navegador ([hidden]{display:none}) y el atributo style
   pisa cualquier hoja. Resultado: un panel negro de pantalla completa a
   z-index 500, encima de todo, SIEMPRE. Al entrar no se veia nada, ni
   siquiera el login.

   Por eso el display vive AQUI y no ahi: en una hoja de estilos las dos reglas
   compiten de tu a tu y la de [hidden] va despues, asi que gana. Y por eso
   `hidden` se sigue usando en vez de tocar el style desde JS: es una sola
   verdad sobre si la capa esta puesta o no. */
#pitchView{position:fixed;inset:0;z-index:500;background:#0E0E14;display:flex;}
#pitchView[hidden]{display:none;}
/* El "Volver": calcado del .hud de pitch/index.html (top:24px, 12px, .08em,
   mayusculas, muted) para que sea una pieza mas de la presentacion. Va
   centrado arriba porque la marca ocupa la izquierda y el contador la
   derecha; en el centro no compite con nada. Sin fondo en reposo, un halo
   suave al pasar.

   DOS CORRECCIONES, y las dos son de "no puedes salir": este boton es la UNICA
   salida de una capa fixed con z-index 500 que tapa hasta la barra inferior.

   1. El area segura. Con top:16 a secas, en un iPhone con Dynamic Island el
      boton ocupaba de 10 a 50 px medidos, y el area segura superior de esos
      modelos son 59: quedaba ENTERO debajo del recorte, y ademas centrado,
      que es justo donde esta la isla. Este archivo usa env(safe-area-*) en
      otros siete sitios; aqui se habia quedado fuera.
   2. Los 44px. Estaba en 40 de zona tactil, medido. */
/* Los dos van dentro de #pitchHud, que es el que se centra arriba; asi el
   "Editar textos" (solo en ensayo, ver pitchAbrir) se coloca al lado sin
   pelearse con la marca (izquierda) ni el contador (derecha) del pitch. */
#pitchHud{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:4px;align-items:center;}
#pitchSalir,#pitchEditar{
  display:inline-flex;text-decoration:none;align-items:center;gap:6px;min-height:44px;padding:0 14px;
  border:0.5px solid transparent;border-radius:999px;background:transparent;
  color:rgba(255,255,255,.42);font:inherit;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease;
}
#pitchSalir:hover,#pitchSalir:focus-visible,#pitchEditar:hover,#pitchEditar:focus-visible{
  color:#fff;background:rgba(14,14,20,.7);border-color:rgba(255,255,255,.18);
}
#pitchSalir:focus-visible,#pitchEditar:focus-visible{outline:2px solid var(--gp3);outline-offset:2px;}
#pitchSalir:active,#pitchEditar:active{transform:scale(.97);}
#pitchSalir .ti,#pitchEditar .ti{font-size:14px;}
#pitchEditar[hidden]{display:none;}
/* En movil sube a 10, pero SUMANDO el area segura igual que la regla base: sin
   el calc, este 10px la anulaba justo en los aparatos donde hace falta, que es
   exactamente donde se aplica esta regla. */
@media (max-width:640px){ #pitchHud{top:calc(10px + env(safe-area-inset-top,0px));} }

/* ══════════════════════════════════════════════════════════════════════════
   FICHA DEL LEAD v2 (ago 2026) · cabecera + dos columnas
   Va al FINAL del <style> a proposito: gana por orden a los pases de 1100/
   860/820 de arriba, que asumian tres columnas y un mini-encabezado sobre las
   pestañas. La columna derecha (.ws-right) ya no existe en el HTML.
   ══════════════════════════════════════════════════════════════════════════ */
.ws-head{display:flex;align-items:center;gap:var(--sp-4);padding:4px 20px 14px;}
.ws-head .lead-avatar{width:52px;height:52px;border-radius:14px;font-size:19px;flex-shrink:0;}
.ws-head-tx{min-width:0;flex:1;}
.ws-head-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.ws-head .lead-header-name{font-size:var(--t4);font-weight:var(--w-black);letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere;}
.ws-head #ws-mini .lead-status{margin-top:0;font-size:10.5px;padding:4px 10px;}
.ws-head .lead-header-sub{font-size:var(--t0);color:var(--tx-3);margin-top:4px;overflow-wrap:anywhere;}
.ws-head .ws-recibido{margin-top:8px;}
.ws-head-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;}
.ws-head-actions .ws-quick{margin:0;justify-content:flex-end;flex-wrap:nowrap;}
/* FALLO HEREDADO: `.ws-q{display:flex}` le ganaba al atributo hidden, asi que
   "Bienvenida" y las redes desconocidas se veian igual (7 iconos siempre, y
   uno que abria un WhatsApp sin cita). Con esto hidden vuelve a esconder. */
.ws-q[hidden]{display:none!important;}
.ws-presentar{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--tap-base);padding:0 16px;border-radius:var(--r-s);border:none;background:var(--acc-fill);color:var(--tx-on-acc);font:inherit;font-size:var(--t0);font-weight:var(--w-bold);cursor:pointer;box-shadow:var(--acc-halo);white-space:nowrap;transition:filter var(--dur-1),transform var(--dur-1) var(--ease);}
.ws-presentar:hover{filter:brightness(1.08);}
.ws-presentar:active{transform:scale(.985);}
.ws-grid{grid-template-columns:300px minmax(0,1fr);padding-top:0;}
.ws-avanzar{margin:2px 0 0;font-size:12px;}
.ws-cobros:empty{display:none;}
.ws-cobros{margin-top:12px;padding-top:12px;border-top:var(--bd-w) solid var(--bd);}
.ws-cobros .stage-section{font-size:9.5px;padding-bottom:8px;margin-bottom:10px;}
.ws-cobros .cpr-help{font-size:12px;margin-bottom:10px;}
.ws-cobros .cpr-go{font-size:11.5px;padding:8px 10px;min-height:var(--tap-base);background:var(--acc-bg);border:var(--bd-w) solid var(--acc-bd);color:var(--acc3);box-shadow:none;}
.ws-cobros .cpr-go:hover{background:rgba(154,87,245,.2);filter:none;}
.ws-cobros > div[style*="height:20px"]{display:none;}
/* ── Ficha v2.1: estados vacíos y aviso de dueño ──
   Los [hidden] llevan !important por la misma lección de .ws-q[hidden] de
   arriba: un display propio (flex del .btn-ghost compartido) le gana al
   atributo hidden si no se refuerza. */
.ws-cobros-vacio{font-size:11.5px;color:var(--muted);line-height:1.5;}
.ws-aviso-dueno{font-size:11px;line-height:1.5;color:var(--amber);border-left:2px solid var(--amber);padding-left:10px;margin:2px 0 4px;}
.ws-aviso-dueno[hidden]{display:none!important;}
.hist-mini .hist-txt{font-size:12px;}
#btnVerActividad{margin-top:10px;}
#btnVerActividad[hidden]{display:none!important;}
/* ── Ficha v3 (sep 2026): trabajo a la izquierda, consulta a la derecha ──
   .ws-right agrupa Datos del prospecto (en modo lectura mientras esta plegada)
   y Actividad reciente. Hasta 1359px no hay sitio para tres columnas (la v2
   ya peleo por 17px a 1024): la derecha se apila bajo la izquierda con areas
   y el centro abarca las dos filas. Desde 1360 gana su columna. El pase de
   860 de abajo deshace las areas para que mande `order`: con area explicita,
   order no cuenta. Sin animacion al plegar ni al cambiar de ancho (NO-TOCAR). */
.ws-grid{grid-template-areas:"izq centro" "der centro";grid-template-rows:auto 1fr;}
/* La izquierda deja de ser sticky en dos columnas: Chrome pega los items de
   grid contra el contenedor entero, no contra su fila, y con la derecha
   debajo se le montaba encima al hacer scroll (medido a 1024 y 1280: tapaba
   "Editar datos"). Vuelve a ser sticky solo con tres columnas, abajo. */
.ws-left{grid-area:izq;position:static;}
.ws-mid{grid-area:centro;}
.ws-right{grid-area:der;display:flex;flex-direction:column;gap:12px;min-width:0;}
/* Las mismas reglas de forma que tenia la tarjeta de Datos en la izquierda:
   un campo por fila (tres columnas en 300px estrujaban nombre, nicho y
   seguidores hasta cortar el texto) y aire en los separadores de seccion. */
.ws-right .g2,.ws-right .g3{grid-template-columns:1fr;gap:0;}
.ws-right .stage-section{margin-top:15px;}
.ws-right .stage-section:first-child{margin-top:0;}
/* Tres columnas solo cuando el centro conserva unos 520px o mas: con la barra
   lateral plegada (56px) basta 1360; con la barra abierta (300px) hacen falta
   1480. La barra deja su estado en .app.sidebar-collapsed, asi que el CSS lo
   sabe sin JS. Medido: a 1366 con barra abierta el centro se quedaba en 408. */
@media (min-width:1360px){
  .app.sidebar-collapsed .ws-grid{grid-template-columns:280px minmax(0,1fr) 300px;grid-template-areas:"izq centro der";grid-template-rows:auto;}
  .app.sidebar-collapsed .ws-left{position:sticky;top:14px;}
}
@media (min-width:1480px){
  .ws-grid{grid-template-columns:280px minmax(0,1fr) 300px;grid-template-areas:"izq centro der";grid-template-rows:auto;}
  .ws-left{position:sticky;top:14px;}
}
/* Modo lectura de Datos del prospecto. Plegada (.dcol) se ve la lectura y no
   el formulario; desplegada, al reves. La regla de arriba que esconde todo
   menos el titulo tiene la misma especificidad: estas van despues y ganan. */
#wsDatosCard.dcol > #wsDatosLectura{display:flex;}
#wsDatosCard:not(.dcol) > #wsDatosLectura{display:none;}
#wsDatosCard.dcol #wsDatosTitle{margin-bottom:10px;padding-bottom:8px;border-bottom:var(--bd-w) solid var(--bd);}
.ws-lectura{flex-direction:column;}
.ws-lectura-fila{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:var(--bd-w) solid var(--bd);font-size:12.5px;min-width:0;}
.ws-lectura-fila:first-child{border-top:0;padding-top:0;}
.ws-lectura-fila > i{color:var(--gp3);font-size:14px;flex:none;margin-top:2px;}
.ws-lectura-k{flex:0 0 74px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-top:2px;}
.ws-lectura-v{flex:1;min-width:0;color:var(--bright);line-height:1.45;overflow-wrap:anywhere;}
.ws-lectura-v.sin{color:var(--muted);font-style:italic;}
.ws-lectura-v a{color:var(--acc3);text-decoration:none;}
.ws-lectura-v a:hover{text-decoration:underline;}
.ws-lectura-editar{margin-top:10px;font-size:12px;}
/* ── Ficha v3.1: "para esta llamada" y los dos relojes ──
   El bloque de preparacion usa la misma caja que los datos reales del
   Diagnostico (.diag-real) para que las dos pestañas se lean como un producto. */
.ws-etapa-desde{font-size:11px;color:var(--muted);white-space:nowrap;}
.ws-etapa-desde[hidden]{display:none!important;}
.ws-prep{background:var(--gd);border:var(--bd-w) solid var(--border2);border-radius:12px;padding:14px 16px;margin-bottom:18px;}
.ws-prep-t{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gp3);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.ws-prep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px;}
.ws-prep-fila{font-size:12.5px;line-height:1.45;min-width:0;}
.ws-prep-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.ws-prep-v{color:var(--bright);overflow-wrap:anywhere;}
.ws-prep-v.sin{color:var(--muted);font-style:italic;}
.ws-prep-ver{background:none;border:0;padding:0;margin-left:6px;font:inherit;font-size:11.5px;color:var(--acc3);cursor:pointer;text-decoration:underline;}
.ws-prep-vacio{font-size:12.5px;color:var(--muted);line-height:1.5;}
.ws-guion > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 0;margin-bottom:6px;}
.ws-guion > summary::-webkit-details-marker{display:none;}
.ws-guion > summary:hover{color:#fff;}
.ws-guion-nota{font-weight:400;letter-spacing:0;text-transform:none;}
.ws-guion-chev{margin-left:auto;font-size:14px;}
.ws-guion[open] > summary .ws-guion-chev{transform:rotate(180deg);}
/* ── Ficha v3.2: notas en el hilo de actividad, y el dinero segun el lead ── */
.hist-nota-et{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gp3);margin-right:5px;}
.ws-deal-lead{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45;overflow-wrap:anywhere;}
.ws-deal-lead:empty{display:none;}
.ws-deal-lead b{color:var(--bright);font-weight:700;}
.ws-deal-lead .sin{font-style:italic;}
.ws-deal-lead .ok{color:var(--green);}
.ws-deal-lead .ojo{color:var(--amber);}
/* Ficha v3.3: la barra de acciones solo existe en movil (pase de 860, abajo). */
.ws-barra-movil{display:none;}
.stage-tabs{padding:10px 16px;}
.stage-tab{flex:0 1 auto;min-width:0;padding:9px 14px;}
@media (max-width:1100px){
  .ws-grid{grid-template-columns:260px minmax(0,1fr);}
}
@media (max-width:860px){
  .ws-head{flex-wrap:wrap;padding:0 4px 12px;gap:12px;}
  .ws-head .lead-avatar{width:44px;height:44px;font-size:16px;}
  /* Atajos en su propia fila (6 x 44 + huecos = 300, caben en 343) y
     "Presentar" debajo a ancho completo: medido a 375, si comparten fila los
     atajos se parten en dos lineas. */
  .ws-head-actions{margin-left:0;width:100%;flex-wrap:wrap;gap:10px;}
  .ws-head-actions .ws-quick{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start;}
  .ws-presentar{width:100%;}
  .ws-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:none;}
  .ws-left,.ws-mid,.ws-right{grid-area:auto;}
  .ws-left{order:2;}
  .ws-mid{order:1;}
  .ws-right{order:3;}
  /* Ficha v3.3: barra de acciones fija encima de la nav inferior (61 px
     medidos a 375; z 69, uno por debajo de la nav para no taparla). La ficha
     reserva 60 px mas abajo (90 + 60) para que el ultimo boton de la columna
     derecha siga siendo alcanzable: es el fallo del pie fijo que ya paso. */
  .ws-barra-movil{display:flex;position:fixed;left:0;right:0;bottom:calc(61px + env(safe-area-inset-bottom,0px));z-index:69;gap:10px;align-items:center;padding:8px 12px;background:rgba(19,19,31,0.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:0.5px solid var(--border);}
  .ws-barra-movil .ws-q{flex:0 0 44px;width:44px;height:44px;margin:0;}
  .ws-barra-movil .ws-presentar{flex:1;width:auto;min-height:44px;}
  .ws-grid{padding-bottom:150px;}
  .ws-mid::after{top:0;height:60px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   TACTIL · lo que el pase de movil del CRM nunca cubrio (20-ago-2026)
   Medido con lead falso a 375 px: los tres unicos controles de la ficha por
   debajo de 44. Van al FINAL del <style> a proposito: hay reglas de .fu-* y
   de cobros mas arriba y aqui ganan por orden, que es como se pierde un
   arreglo en este archivo.
     .fu-owner / .fu-input   39 px  (dueno, proxima accion, FECHA LIMITE)
     #wsCobros button        28 px  ("Marcar pagado" / "Deshacer")
     #wsCobros a             14 px  ("regenerar")
   Los dos de cobros los pinta el JS con estilo EN LINEA, pero solo declara
   padding y tipografia: `min-height` no choca con nada y no hace falta tocar
   renderCobrosBlock. El enlace no crece de dibujo, se le da zona con ::after
   (misma tecnica que .lg-forgot), asi la linea "Pendiente: $X" no se mueve.
   Solo en movil: con raton 39 y 28 se pulsan de sobra. */
@media (max-width:860px){
  .fu-owner,.fu-input{min-height:44px;}
  #wsCobros button{min-height:44px;}
  #wsCobros a{position:relative;display:inline-block;}
  #wsCobros a::after{content:'';position:absolute;inset:-15px -8px;}
  /* Ficha v3.1: el resumen del guion (32px) y los enlaces de texto del bloque
     "para esta llamada", con zona de toque sin cambiar el dibujo. */
  .ws-guion > summary{min-height:44px;}
  .ws-prep-ver{position:relative;}
  .ws-prep-ver::after{content:'';position:absolute;inset:-14px -8px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   FATHOM · ACORDEON DE DOS NIVELES (tarea 2 del plan de Gabriela, 20-ago)
   Antes cada reunion era una tarjeta entera y expandida: con UN lead y tres
   reuniones ya no cabia en pantalla. Ahora:
     nivel 1  fila por lead, plegada     .fa-lead-fila
     nivel 2  una linea por llamada      .fa-call
     nivel 3  el detalle es la MISMA tarjeta de siempre (faTarjeta) metida
              bajo su linea. No se reescribio el detalle a proposito: asi
              siguen funcionando tal cual el resumen, las tareas y el boton,
              con sus ids y sus funciones.
   Se aplica a "Con lead" y a "TGM · internas". "Sin clasificar" NO: ahi hay
   una decision pendiente y esconderla es justo lo que no se quiere. */
.fa-lead{border:var(--bd-w) solid var(--bd);border-radius:var(--r);background:var(--bg2);margin-bottom:8px;overflow:hidden;}
.fa-lead.abierto{border-color:var(--acc-bd);}
.fa-lead-fila{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap-base);
  padding:11px 14px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:background var(--dur-1);}
.fa-lead-fila:hover{background:rgba(255,255,255,.03);}
.fa-chev{font-size:16px;color:var(--tx-3);flex-shrink:0;transition:transform var(--dur-1) var(--ease);}
.fa-lead.abierto .fa-chev{transform:rotate(90deg);color:var(--acc3);}
.fa-lead-ico{font-size:17px;color:var(--acc3);flex-shrink:0;}
.fa-lead-nom{flex:1;min-width:0;font-size:14px;font-weight:800;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* "abrir ficha" lleva a otro sitio, no despliega: su onclick para la
   propagacion para que pulsarlo no abra ademas el acordeon. */
.fa-ficha{flex-shrink:0;font:inherit;font-size:12px;font-weight:700;color:var(--acc3);
  background:var(--acc-bg);border:var(--bd-w) solid var(--acc-bd);border-radius:var(--r-s);
  padding:5px 10px;cursor:pointer;white-space:nowrap;min-height:var(--tap-base);}
.fa-ficha:hover{background:rgba(154,87,245,.2);}
.fa-lead-body{border-top:var(--bd-w) solid var(--bd);padding:6px;}
.fa-lead-sub{font-size:12px;color:var(--tx-3);line-height:1.5;padding:6px 8px 8px;}
/* nivel 2 · una llamada por linea */
.fa-call{display:flex;align-items:center;gap:9px;width:100%;min-height:var(--tap-base);
  padding:9px 10px;border-radius:var(--r-s);background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;transition:background var(--dur-1);}
.fa-call:hover{background:var(--acc-bg2);}
.fa-call.abierta{background:var(--acc-bg);}
.fa-call-n{flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--acc3);min-width:74px;}
.fa-call-f{flex-shrink:0;font-size:12px;color:var(--tx-3);font-variant-numeric:tabular-nums;}
.fa-call-t{flex:1;min-width:0;font-size:13px;color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fa-call-det{padding:2px 4px 10px;}
/* En movil la linea no cabe de una: el titulo baja a su propio renglon. */
@media (max-width:560px){
  .fa-call{flex-wrap:wrap;gap:4px 9px;}
  .fa-call-t{flex:1 0 100%;white-space:normal;}
}

/* Confirmacion de copiado en Fathom (tarea 3). Verde del sistema y solo
   1,6 s: es un acuse de recibo, no un estado. */
.fa-btn-ok{ color:var(--ok) !important; border-color:var(--ok-bd) !important; }

/* ── BADGE "DIAS SIN CONTACTO" (tarea 4, 20-ago) ───────────────────────────
   Un solo dibujo para los cuatro sitios (Fathom, lista de leads, kanban y
   cabecera de la ficha). Pildora con icono + texto y fondo tenue, que es la
   variante que Gabriela aprobo entre las tres que probo (se descartaron el
   punto de semaforo suelto y el borde lateral).
   Los colores salen de los semanticos del sistema: ambar = aviso, rojo =
   error. No se inventa ninguno. */
.sc-badge{
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  font-size:10px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
  padding:2px 8px; border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;
}
.sc-badge i{ font-size:11px; }
.sc-frio{   background:var(--warn-bg); color:var(--warn); border:var(--bd-w) solid var(--warn-bd); }
.sc-helado{ background:var(--err-bg);  color:var(--err);  border:var(--bd-w) solid var(--err-bd);  }
/* En la tarjeta de la lista va en su propia linea, debajo del estado: la
   tarjeta es estrecha (300px de barra) y al lado del estado se cortaban los
   dos. */
.lead-card .sc-badge{ margin-top:5px; }
/* En el kanban cabe entero: medido, 108 px de badge en una tarjeta de 236. */

/* ── TRACKING RI (tarea 5, 21-ago) ─────────────────────────────────────────
   Traslado de la hoja de Excel a la ficha. Todo con tokens; la tabla no es
   <table> a proposito: en movil las columnas se reordenan y una tabla de
   verdad obligaria a desplazamiento horizontal. */
.ri-stats{ margin-bottom:16px; }
.ri-repartos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.ri-reparto{ background:var(--s2); border:var(--bd-w) solid var(--bd); border-radius:var(--r); padding:12px 14px; }
.ri-reparto-t{ font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--acc3); margin-bottom:9px; }
.ri-fila-rep{ display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:5px 0; font-size:12.5px; }
.ri-rep-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ri-rep-v{ color:var(--tx-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ri-rep-b{ grid-column:1/-1; height:3px; background:rgba(255,255,255,.06); border-radius:var(--r-pill); overflow:hidden; }
.ri-rep-b i{ display:block; height:100%; background:var(--acc-fill); }

.ri-tabla{ border:var(--bd-w) solid var(--bd); border-radius:var(--r); overflow:hidden; margin-bottom:18px; }
.ri-cab, .ri-fila{ display:grid; grid-template-columns:minmax(0,1fr) 62px 78px 62px 68px 64px; gap:8px; align-items:center; padding:9px 12px; }
.ri-cab{ background:rgba(255,255,255,.03); border-bottom:var(--bd-w) solid var(--bd);
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3); }
.ri-cab span:not(:first-child), .ri-fila > span:not(.ri-hook){ text-align:right; font-variant-numeric:tabular-nums; }
.ri-fila{ border-bottom:var(--bd-w) solid var(--bd); font-size:13px; }
.ri-fila:last-child{ border-bottom:none; }
.ri-fila:hover{ background:rgba(255,255,255,.02); }
/* Un video que pasa el liston se marca en el borde, no con el fondo: con 20
   filas el fondo verde se convierte en un muro. */
.ri-pasa{ box-shadow:inset 3px 0 0 var(--ok); }
.ri-hook{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ri-hook b{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ri-hook small{ font-size:11px; color:var(--tx-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ri-apr{ color:var(--warn) !important; }
.ri-val{ display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.ri-si{ color:var(--ok); } .ri-no{ color:var(--tx-4); }
.ri-del{ background:none; border:0; color:var(--tx-4); cursor:pointer; font-size:15px; padding:4px; border-radius:var(--r-s);
  min-height:var(--tap-fine); transition:color var(--dur-1); }
.ri-del:hover{ color:var(--err); }
.ri-form{ background:var(--s2); border:var(--bd-w) solid var(--bd); border-radius:var(--r); padding:16px; }

/* ── Lote 1 del Tracking RI (3-sep-2026): editar, enlace, parciales ────────
   El lapiz comparte el estilo del cubo (mismo tamaño, mismo tono apagado) y
   se colorea con el acento al pasar, no en rojo: editar no destruye nada. */
.ri-acciones{ display:flex; justify-content:flex-end; gap:2px; }
.ri-edit:hover{ color:var(--acc3); }
.ri-abierta{ background:var(--acc-bg); border-bottom:none !important; }
.ri-abierta .ri-edit{ color:var(--acc3); }
.ri-hook a{ color:inherit; text-decoration:none; }
.ri-hook a:hover{ color:var(--acc3); text-decoration:underline; }
/* Engagement sin saves o shares: en tono apagado y con el ≈ delante. */
.ri-parcial{ color:var(--tx-3); }
.ri-sinclas{ color:var(--tx-4) !important; }
.ri-anteriores{ color:var(--tx-4); }

/* ── Lote 2 (3-sep-2026): filtros, cabecera ordenable, alta plegada ──── */
.ri-filtros{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:14px; }
.ri-ord{ cursor:pointer; user-select:none; transition:color var(--dur-1); }
.ri-ord:hover, .ri-ord.on{ color:var(--acc3); }
.ri-stats .sl small{ font-size:10px; color:var(--tx-4); font-weight:400; }
.ri-form-toggle{ background:var(--acc-bg) !important; border:var(--bd-w) solid var(--acc-bd) !important; color:var(--acc3) !important; box-shadow:none !important; }
/* ── Lote 3 (3-sep-2026): tendencia, mejor video, repartos sin ceros, modal ── */
.ri-tendencia{ display:grid; grid-template-columns:1.4fr 1fr; gap:12px; margin-bottom:16px; }
.ri-tend-graf, .ri-mejor{ background:var(--s2); border:var(--bd-w) solid var(--bd); border-radius:var(--r); padding:12px 14px; min-width:0; }
.ri-tend-graf .spark{ width:100%; height:44px; display:block; }
.ri-tend-fechas{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--tx-4); margin-top:4px; font-variant-numeric:tabular-nums; }
.ri-mejor > b{ display:block; font-weight:700; font-size:13.5px; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ri-mejor > b a{ color:inherit; text-decoration:none; }
.ri-mejor > b a:hover{ color:var(--acc3); text-decoration:underline; }
.ri-mejor-cifras{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:12px; color:var(--tx-3); font-variant-numeric:tabular-nums; }
.ri-mejor-cifras b{ color:var(--ok); }
.ri-mejor small{ display:block; margin-top:6px; font-size:11px; color:var(--tx-3); }
.ri-rep-vacio{ font-size:12px; color:var(--tx-4); padding:6px 0; }
.ri-reparto-t i{ color:var(--acc3); margin-right:4px; }
.modal-confirm{ max-width:420px; }
.modal-confirm-texto{ font-size:13.5px; line-height:1.55; color:var(--tx-2); margin:0; }
.modal-confirm .modal-actions{ justify-content:flex-end; }
.modal-confirm .btn-modal-create.peligro{ background:var(--err, #e5484d); color:#fff; }
@media (max-width:860px){
  .ri-tendencia{ grid-template-columns:1fr; }
  /* El hook a dos lineas en telefono: a una se cortaba a los 30 caracteres y
     no se sabia que video era. */
  .ri-hook b{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3; }
}
/* Umbral compartido: lapiz pegado al porcentaje y un formulario de una linea. */
.ri-umbral-btn{ background:none; border:0; color:var(--tx-4); cursor:pointer; font-size:13px; padding:0 4px; vertical-align:-1px; transition:color var(--dur-1); }
.ri-umbral-btn:hover{ color:var(--acc3); }
.ri-umbral-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; background:var(--s2); border:var(--bd-w) solid var(--bd); border-radius:var(--r); padding:12px 14px; margin-bottom:14px; box-shadow:inset 3px 0 0 var(--acc); }
.ri-umbral-form .field{ margin:0; min-width:140px; }
.ri-umbral-form small{ flex-basis:100%; color:var(--tx-4); font-size:11.5px; }
.ri-rep-sin .ri-rep-n{ color:var(--tx-3); font-style:italic; }
/* La fila de edicion va DENTRO de la tabla, debajo de su fila, con el mismo
   fondo que el formulario de alta para que se lea como "esto se edita". */
.ri-edicion{ background:var(--s2); border-bottom:var(--bd-w) solid var(--bd); padding:14px 12px 12px; box-shadow:inset 3px 0 0 var(--acc); }
.ri-edicion .field label small{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--tx-4); }
.ri-edicion .fi:disabled{ opacity:.55; cursor:not-allowed; }
.ri-edicion-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.ri-cancelar{ background:none !important; border:var(--bd-w) solid var(--bd) !important; color:var(--tx-2) !important; }

@media (max-width:860px){
  .ri-repartos{ grid-template-columns:1fr; }
  /* La fila pasa a dos renglones: el hook arriba y los numeros debajo, cada
     uno con su etiqueta. Asi no hay que desplazar de lado para leer un RI. */
  .ri-cab{ display:none; }
  .ri-fila{ grid-template-columns:1fr 1fr 1fr; gap:4px 10px; padding:11px 12px; }
  .ri-hook{ grid-column:1/-1; }
  .ri-fila > span:not(.ri-hook){ text-align:left; font-size:12px; color:var(--tx-2); }
  .ri-fila > span:not(.ri-hook)::before{ display:block; font-size:9px; font-weight:800;
    letter-spacing:.09em; text-transform:uppercase; color:var(--tx-4); }
  .ri-fila > span:nth-child(2)::before{ content:'Vistas'; }
  .ri-fila > span:nth-child(3)::before{ content:'RI'; }
  .ri-fila > span:nth-child(4)::before{ content:'Save'; }
  .ri-fila > span:nth-child(5)::before{ content:'Engag.'; }
  .ri-fila > span:last-child{ grid-column:3; text-align:right; }
  .ri-del{ min-height:var(--tap-base); min-width:var(--tap-base); }
}

/* Traer videos + aviso de saves (21-ago). El boton va arriba del bloque, antes
   de la tabla: es lo primero que se hace, no lo ultimo. */
.ri-traer{ margin-bottom:12px; background:rgba(154,87,245,.14) !important; }
.ri-aviso{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.5;
  background:var(--warn-bg); border:var(--bd-w) solid var(--warn-bd); color:var(--tx-2);
  border-radius:var(--r-s); padding:10px 12px; margin-bottom:14px; }
.ri-aviso i{ font-size:16px; color:var(--warn); flex-shrink:0; margin-top:1px; }
.ri-aviso b{ color:var(--warn); }
/* Los traidos por el boton se marcan discretamente: sirve para saber cual
   revisar sin tener que abrirlos uno a uno. */
.ri-auto .ri-hook b::after{ content:'auto'; margin-left:7px; font-size:8.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--acc3);
  background:var(--acc-bg); border:var(--bd-w) solid var(--acc-bd);
  border-radius:var(--r-pill); padding:1px 6px; vertical-align:1px; }

/* Aviso de cifras frescas (21-ago). Verde y discreto: es una buena noticia,
   no un aviso. Convive con .ri-aviso, que si lo es. */
.ri-fresco{ display:flex; align-items:flex-start; gap:9px; font-size:12px; line-height:1.5;
  background:var(--ok-bg); border:var(--bd-w) solid var(--ok-bd); color:var(--tx-2);
  border-radius:var(--r-s); padding:9px 12px; margin-bottom:12px; }
.ri-fresco i{ font-size:15px; color:var(--ok); flex-shrink:0; margin-top:1px; }

/* ══ FICHA DEL LEAD EN TELEFONO (21-ago). Medido a 390x844: la cabecera se
   comia 425px de 844 antes de ensenar nada, y las piezas flotaban sueltas
   sobre el fondo (nombre, insignia, sub, fecha, 6 atajos y el boton morado),
   sin nada que las agrupara. Va al final de la hoja a proposito: hay reglas
   de .ws-head en tres bloques anteriores y a igual especificidad gana la
   ultima. */
@media (max-width:860px){
  /* El avatar de 44px se centraba contra una columna de 253px, asi que
     aterrizaba junto a la insignia en vez de junto al nombre: el nombre
     parecia un titulo centrado con un circulo suelto debajo. */
  .app .ws-head{ align-items:flex-start; }

  /* Una sola superficie en vez de cinco piezas flotando. Es el "orden": la
     identidad y sus acciones son UN objeto, no un monton. */
  .app .ws-head{
    background:var(--dark2, rgba(255,255,255,.02));
    border:var(--bd-w) solid var(--border);
    border-radius:var(--r-l);
    padding:14px;
    margin:0 4px 12px;
    gap:12px;
    row-gap:10px;
  }

  /* El sub escondia la plataforma tras unos puntos suspensivos. Es justo lo
     que miras de un vistazo (nicho, tamano, donde publica), asi que se lee
     entero aunque ocupe dos renglones. */
  .app .ws-head .lead-header-sub{
    white-space:normal; overflow:visible; text-overflow:clip;
    line-height:1.45; margin-top:5px;
  }

  /* Separador antes de las acciones: dice "aqui acaba quien es y empieza que
     hacer con el", sin meter otra caja dentro de la caja. */
  .app .ws-head-actions{
    border-top:var(--bd-w) solid var(--border);
    padding-top:12px; margin-top:2px; gap:10px;
  }
  .app .ws-head .ws-quick{ gap:8px; }
}

/* La tira de pestanas nacia desplazada 12px, asi que la primera se veia
   partida y parecia rota en vez de deslizable. El degradado en los bordes
   dice que hay mas a los lados; el scroll-padding evita que el encaje deje
   una pestana medio cortada contra el borde. */
@media (max-width:860px){
  .app .stage-tabs{
    scroll-padding-inline:12px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
  }
}

/* Recorte de alto (medido). Agrupar en tarjeta ordenaba pero subia la cabecera
   de 425 a 521px de 844: media pantalla de chrome antes de ver nada. Aqui se
   recupera sin deshacer el orden. */
@media (max-width:430px){
  /* 18px hacian que un nombre de 28 caracteres partiera en dos renglones
     dentro de los 273px de la columna. A 16px entra en uno (~233px) y se
     ahorran 27px. Los nombres mas largos siguen partiendo, que es correcto. */
  .app .ws-head .lead-header-name{ font-size:16px; line-height:1.2; }
  .app .ws-head{ padding:12px; }
  .app .ws-head .lead-header-sub{ font-size:11.5px; line-height:1.4; margin-top:4px; }
  .app .ws-head .ws-recibido{ margin-top:6px; font-size:10.5px; padding:3px 9px; }
  .app .ws-head-actions{ padding-top:10px; gap:8px; }
}

/* Dos desalineaciones que solo se ven en telefono (medidas, no a ojo). */
@media (max-width:860px){
  /* La tarjeta de identidad iba a x=16 y la de contenido a x=24: 8px de
     desfase entre dos bordes verticales que el ojo compara. Ahora comparten
     caja, asi que el avatar y la primera pestana caen en la misma vertical. */
  .app .ws-head{ margin:0 12px 12px; }

  /* #ws-mini lleva padding-left:16px, que en escritorio hace de separacion
     entre el nombre y la insignia. Al bajar de renglon en el telefono esa
     separacion se convierte en una sangria suelta: la insignia flotaba 16px
     a la derecha del nombre. El hueco entre ambos ya lo pone el gap del flex. */
  .app .ws-head #ws-mini{ padding-left:0; }
}

/* Resto del diseno anterior. Cuando #ws-mini era el mini-encabezado que
   llevaba el NOMBRE encima de las pestanas, se le puso
   padding:10px 16px 0 !important para alinear ese nombre con la tira. Hoy
   #ws-mini es un <span> dentro de .ws-head-row que solo lleva la insignia de
   estado, asi que ese relleno se traduce en una sangria de 16px: la insignia
   flotaba a la derecha del nombre en vez de empezar donde empiezan el nombre,
   el subtitulo y la fecha. Hace falta !important para ganarle al original. */
@media (max-width:860px){
  .app .ws-head #ws-mini{ padding:0 !important; }
}

/* El aviso de "hay mas a la derecha" era un ::after con posicion fija
   (top:28px, height:60px) calculada cuando #ws-mini ocupaba los primeros 28px
   de .ws-mid. Al mudarse #ws-mini a la cabecera, esa cuenta dejo de cuadrar:
   medido a 390px el degradado caia en y=425..485 mientras las pestanas van de
   398 a 459, es decir empezaba 27px por debajo de la tira y se derramaba 26px
   sobre la tarjeta de contenido. Lo sustituye el degradado de .stage-tabs, que
   va en la propia tira y la sigue siempre. */
@media (max-width:860px){
  .app .ws-mid::after{ display:none; }
}

/* FRANJA "AHORA" (injerto de la maqueta de Codex, ago-2026). Tres huecos fijos
   bajo la cabecera que responden "que hago con este lead ahora": seguimiento,
   cobro y contenido en ganados; proxima accion, contacto y siguiente paso en
   leads en juego. Siempre visible salvo en perdidos; si no hay urgencia, el
   hueco dice el siguiente movimiento razonable (mismo patron de estados vacios
   de 0fa6988). Sin transiciones: se pinta al abrir la ficha y al cambiar datos.
   OJO: [hidden] necesita su regla porque display:flex le ganaria al atributo
   (trampa ya documentada de la ficha). */
.ws-ahora{display:flex;gap:10px;padding:0 20px 14px;flex-wrap:wrap;}
.ws-ahora[hidden]{display:none;}
.ws-ahora-slot{flex:1 1 220px;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border:0.5px solid var(--border);border-radius:12px;background:rgba(255,255,255,0.02);}
.ws-ahora-tx{min-width:0;}
.ws-ahora-k{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px;}
.ws-ahora-k .ti{font-size:11px;vertical-align:-1px;}
.ws-ahora-t{font-size:13px;font-weight:700;line-height:1.25;overflow-wrap:anywhere;}
.ws-ahora-d{font-size:11.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere;}
.ws-ahora-go{background:rgba(154,87,245,.12);border:0.5px solid var(--gp2);color:var(--gp3);border-radius:8px;font-size:12px;font-weight:700;padding:6px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:inherit;}
.ws-ahora-slot.urge{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.06);}
.ws-ahora-slot.urge .ws-ahora-k{color:#f87171;}
@media (max-width:860px){
  .ws-ahora{padding:0 14px 12px;}
  .ws-ahora-slot{flex:1 1 100%;}
  .ws-ahora-go{min-height:44px;}
}

/* INJERTO ciudad del radar (hibrido de la maqueta de Codex, ago-2026): el
   "volver" y el pulso de la ciudad abierta en la lista de situados. El resto
   reusa rd-fila/rd-dot tal cual. */
.rd-volver{display:flex;align-items:center;gap:6px;width:100%;text-align:left;font-family:inherit;font-size:12px;font-weight:800;color:var(--tx);background:none;border:0;cursor:pointer;padding:6px 8px 2px;min-height:30px;border-radius:var(--r-s);}
.rd-volver:hover{color:var(--gp3);}
.rd-ciu-sub{font-size:10.5px;color:var(--muted);padding:0 8px 8px;}
@media (max-width:860px){
  .rd-volver{min-height:44px;}
}

/* FATHOM · frescura y "tras la llamada" (hibrido de la maqueta de Codex,
   ago-2026). Sin transiciones: se pinta con la seccion y no se mueve. */
.fa-foto{font-size:12px;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:7px;}
.fa-foto.vieja{color:var(--amber);}
.fa-pend{border:0.5px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:20px;background:rgba(255,255,255,0.02);}
.fa-pend-t{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gp3);display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.fa-pend-fila{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:0.5px solid var(--border);flex-wrap:wrap;}
.fa-pend-fila:first-of-type{border-top:0;}
.fa-pend-n{font-weight:700;font-size:13px;}
.fa-pend-d{font-size:12px;color:var(--muted);flex:1;min-width:140px;}
.fa-pend-go{background:rgba(154,87,245,.12);border:0.5px solid var(--gp2);color:var(--gp3);border-radius:8px;font-size:12px;font-weight:700;padding:6px 10px;cursor:pointer;white-space:nowrap;font-family:inherit;}
@media (max-width:860px){
  .fa-pend-go{min-height:44px;}
}

/* AGENDA · preparacion de llamadas (hibrido de la maqueta de Codex, ago-2026):
   hoy resaltado, cuenta atras de la proxima, pasadas en segundo plano y el
   aviso de resultado sin marcar. Sin transiciones. */
.ag-dia.hoy{color:var(--gp3);}
.ag-res.pasada{opacity:.72;}
.ag-prox{font-size:10.5px;font-weight:900;letter-spacing:.02em;color:var(--gp3);background:rgba(154,87,245,.14);border:0.5px solid var(--gp2);border-radius:999px;padding:3px 9px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ag-marcar{color:var(--amber);}
.ag-marcar a{color:inherit;font-weight:700;position:relative;}
@media (max-width:860px){
  /* Area tactil del enlace sin agrandar el dibujo (precedente 5785246) */
  .ag-marcar a::after{content:'';position:absolute;inset:-15px -8px;}
}