/* ============================================================================
   VENTAS (public/ventas.js): tus prospectos, tus anuncios y lo que te costaron, en pestanas. V1 del plan PLAN-tablero-ventas-leads-2026-11;
   lienzo aprobado por Daniel el 10 nov 2026. Detras de estudio.ventas_tablero (cuentas 1 y 41).

   SOLO TOKENS de cuarto-oscuro.css: `paridad-cuarto-oscuro` cuenta este archivo desde el dia uno.
   Todo se parte por CONTENEDOR y no por pantalla: con el chat abierto a la CRM le tocan ~420 px aunque la ventana mida 1280.
   Forma: pildora = se toca; 16 px = flota (cada bloque); 4 px = contenido (barras). Un solo tono en las barras: sin leyenda de colores.
   ============================================================================ */

.vt{ display:flex; flex-direction:column; gap:var(--e-4); container-type:inline-size; }
.vt .pz-cab{ margin-bottom:0; }
.vt .pz-tabs{ margin-bottom:0; }
/* Los periodos son cinco pildoras: en la pieza, las acciones de la cabecera no se encogen (flex:none) y en un telefono la ultima quedaba cortada. Aqui pueden
   bajar de renglon. */
.vt .pz-cab-acc{ flex:1 1 auto; min-width:0; justify-content:flex-end; }
.vt .pz-cab-acc .vt-periodo{ justify-content:flex-end; }
.vt-periodo{ display:flex; gap:var(--e-1); flex-wrap:wrap; align-items:center; }
.vt-chip{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:transparent;
  color:var(--medio); font-family:inherit; font-size:var(--t-texto); white-space:nowrap; cursor:pointer; }
.vt-chip.on{ background:var(--piedra-on); color:var(--tinta); }
@media (hover:hover){ .vt-chip:not(.on):hover{ background:var(--tinte-toque); color:var(--tinta); } }

/* Un bloque flota (16 px) y no lleva raya: la separacion es aire. */
.vt-bloque{ background:var(--piedra); border-radius:var(--r-flota); padding:var(--e-3) var(--e-4) var(--e-4); min-width:0; }
.vt-bloque .pz-cifras{ margin:var(--e-2) 0 var(--e-1); }
.vt-dos .pz-cifras, .vt-dos .pz-cifras[data-n="3"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-4) var(--e-5); }
.vt-cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:40px; flex-wrap:wrap; }
.vt-bt{ margin:0; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.vt-meta{ margin:0; font-size:var(--t-meta); color:var(--medio); line-height:1.45; }
.vt-pie{ margin-top:var(--e-2); }
.vt-n{ font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; }
/* El enlace de la pieza lleva raya almagre; aqui no es urgente (lo mismo que la guia de una pagina vacia): raya en --punto. */
.vt-enl{ font-size:var(--t-meta); color:var(--medio); border-bottom-color:var(--punto); }
.vt-acc{ margin-top:var(--e-4); }
.vt-mas{ margin-top:var(--e-2); font-size:var(--t-meta); }
.vt-pil{ background:var(--piedra-on); color:var(--tinta); text-decoration:none; }
.vt-par{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-4); align-items:start; }
.vt-par-ancha{ grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); }

/* ---- el embudo: nombre, barra y numero; cada barra contra «te escribieron» ---- */
.vt-embudo{ display:flex; flex-direction:column; padding-top:var(--e-1); }
.vt-paso{ display:grid; grid-template-columns:minmax(96px, 150px) minmax(0, 1fr) minmax(64px, 92px); column-gap:var(--e-3); align-items:center; min-height:44px; }
.vt-paso-t{ font-size:var(--t-texto); color:var(--tinta); }
.vt-pista{ display:block; height:8px; border-radius:var(--r); background:var(--piedra-on); overflow:hidden; }
.vt-pista > span{ display:block; width:calc(var(--p) * 1%); height:100%; border-radius:inherit; background:var(--medio); }
.vt-paso-n{ font-size:var(--t-texto); color:var(--tinta); text-align:right; font-variant-numeric:tabular-nums; }
.vt-paso-s{ display:block; font-size:var(--t-meta); color:var(--apagado); }
/* V2: una barra que se toca abre a las personas que cuenta. Se ve como un renglon (sin caja): la flecha dice que lleva a algun lado. */
.vt-paso-a{ grid-template-columns:minmax(96px, 150px) minmax(0, 1fr) minmax(64px, 92px) 24px; color:inherit; text-decoration:none; border-radius:var(--r); }
@media (hover:hover){ .vt-paso-a:hover{ background:var(--tinte-toque); } }

/* ---- por semana: barras verticales de un tono; la ultima (la de hoy) un poco mas clara ---- */
.vt-semanas{ display:flex; align-items:flex-end; gap:6px; height:132px; padding-top:var(--e-3); }
.vt-sem{ flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:var(--e-1); }
.vt-sem-b{ display:block; height:calc(var(--p) * 1%); min-height:2px; border-radius:var(--r) var(--r) 0 0; background:var(--medio); }
.vt-sem-hoy .vt-sem-b{ background:var(--texto); }
.vt-sem-n{ font-size:var(--t-eti); color:var(--apagado); text-align:center; font-variant-numeric:tabular-nums; }
.vt-eje{ display:flex; justify-content:space-between; gap:var(--e-2); padding-top:6px; font-size:var(--t-eti); color:var(--apagado); }
.vt .vt-periodo + .vt-semanas{ margin-top:var(--e-2); }
/* «Cuando te escriben»: las barras de «Por semana», una etiqueta bajo CADA barra (8 horas o 7 dias) y la barra con mas, oscura (como la de hoy alla).
   Debajo de 420 px de COLUMNA (no de ventana: con el chat abierto la columna mide eso) las horas se acortan a «6p». */
.vt-ll-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-1) var(--e-5); }
.vt-ll{ margin-top:var(--e-2); }
.vt-ll .vt-ll-top .vt-sem-b{ background:var(--texto); }
.vt-ll-eje{ display:flex; gap:6px; padding-top:6px; font-size:var(--t-eti); color:var(--apagado); }
.vt-ll-eje > span{ flex:1 1 0; min-width:0; text-align:center; white-space:nowrap; }
.vt-ll-corta{ display:none; }
@container (max-width:420px){ .vt-ll-larga{ display:none; } .vt-ll-corta{ display:inline; } }

/* ---- renglones (anuncios, canales, prospectos): sin cajas ni rayas ---- */
.vt-der{ font-size:var(--t-meta); color:var(--texto); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.vt-ir{ display:flex; justify-content:center; width:24px; color:var(--medio); transform:rotate(-90deg); }
.vt-apagada .pz-fila-t{ color:var(--medio); }
.vt-prospecto .lv-calif{ flex:none; }

/* ---- por que se pierden: nombre, cuantos y una barra ---- */
.vt-motivos{ display:flex; flex-direction:column; gap:var(--e-3); padding-top:var(--e-1); }
.vt-mot-t{ display:flex; justify-content:space-between; gap:var(--e-2); font-size:var(--t-texto); color:var(--tinta); }
.vt-barra{ display:block; height:6px; margin-top:var(--e-1); border-radius:var(--r); background:var(--piedra-on); overflow:hidden; }
.vt-barra > span{ display:block; width:calc(var(--p) * 1%); height:100%; border-radius:inherit; background:var(--medio); }

/* ---- las tablas (anuncios y gasto): rejilla en escritorio, renglones con resumen en una columna angosta ---- */
.vt-tabla{ container-type:inline-size; }
.vt-th, .vt-tfila, .vt-total{ display:grid; grid-template-columns:minmax(0, 2.4fr) repeat(5, minmax(0, .9fr)) minmax(0, 1.5fr) 24px; column-gap:var(--e-4); align-items:center; }
.vt-th.con-dinero, .vt-tfila:has(.con-dinero), .vt-total.con-dinero{ grid-template-columns:minmax(0, 2.4fr) repeat(6, minmax(0, .9fr)) minmax(0, 1.5fr) 24px; }
.vt-th{ padding:var(--e-2) 0; font-size:var(--t-meta); color:var(--medio); }
.vt-th > span:nth-child(n+2){ text-align:right; }
.vt-th > span:nth-last-child(-n+2){ text-align:left; }
.vt-th-b{ justify-self:end; display:inline-flex; align-items:center; justify-content:flex-end; gap:4px; min-height:32px; padding:0; border:0; background:transparent; color:var(--medio);
  font-family:inherit; font-size:var(--t-meta); text-align:right; cursor:pointer; }
.vt-th-b.on{ color:var(--tinta); }
@media (hover:hover){ .vt-th-b:not(.on):hover{ color:var(--tinta); } }
.vt-flecha{ display:inline-flex; transform:rotate(0deg); }
.vt-celdas{ display:contents; }
.vt-c{ font-size:var(--t-texto); color:var(--tinta); text-align:right; font-variant-numeric:tabular-nums; min-width:0; }
.vt-c.vt-mot-c{ text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vt-c.vt-cero, .vt-apagada .vt-c{ color:var(--apagado); }
.vt-poco{ display:block; font-size:var(--t-meta); color:var(--apagado); }
.vt-resumen{ display:none; font-size:var(--t-meta); color:var(--texto); }
.vt-total{ padding:var(--e-3) 0 0; font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; }
.vt-total > span:nth-child(n+2){ text-align:right; }
.vt-gth, .vt-gfila, .vt-gtotal{ display:grid; grid-template-columns:minmax(0, 1.8fr) repeat(7, minmax(0, 1fr)); column-gap:var(--e-4); align-items:center; }
.vt-gth > span:nth-child(n+2){ text-align:right; }
.vt-gtotal > span:nth-child(n+2){ text-align:right; }
.vt-gtabla .vt-ir{ display:none; }

/* ---- V2: la lista de personas. El punto de la calificacion es FORMA (lleno, medio, vacio), no color. ---- */
.vt-pth, .vt-pfila{ display:grid; grid-template-columns:14px minmax(0, 1.5fr) minmax(0, .6fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap:var(--e-3); align-items:center; }
.vt-pth{ padding:var(--e-2) 0; font-size:var(--t-meta); color:var(--medio); }
/* Los titulos de la lista van a la izquierda, como sus datos (la tabla de anuncios alinea sus numeros a la derecha: .vt-th > span:nth-child(n+2)). */
.vt-pth > span:nth-child(n){ text-align:left; }
.vt-pfila .pz-fila-ico{ display:flex; justify-content:center; }
.vt-pc{ text-align:left; font-size:var(--t-texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vt-pc.vt-cero{ font-size:var(--t-meta); }
.vt-buscar{ min-height:32px; min-width:180px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea);
  color:var(--tinta); font-family:inherit; font-size:var(--t-texto); }
.vt-puestos{ padding:var(--e-1) 0 var(--e-2); }
.vt-puesto{ gap:var(--e-1); padding-right:var(--e-1); cursor:default; }
.vt-quitar{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:var(--r-pildora); color:var(--medio); }
@media (hover:hover){ .vt-quitar:hover{ background:var(--tinte-toque); color:var(--tinta); } }
a.vt-chip{ text-decoration:none; }
.vt-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.vt-plista{ container-type:inline-size; }

@container (max-width:720px){
  .vt-th, .vt-total{ display:none; }
  .vt-tfila, .vt-tfila:has(.con-dinero), .vt-tfila:has(.con-gasto), .vt-gfila, .vt-pfila{ display:flex; flex-wrap:wrap; row-gap:var(--e-1); }
  .vt-celdas{ display:none; }
  .vt-resumen{ display:block; order:3; flex-basis:100%; }
  .vt-tfila .vt-ir{ margin-left:auto; }
}

/* Una columna angosta (telefono, o el CRM con el chat abierto): un bloque debajo del otro, el resumen del renglon debajo de su nombre. */
@container (max-width:760px){
  .vt .pz-cab-acc, .vt .pz-cab-acc .vt-periodo{ justify-content:flex-start; }
  .vt-par, .vt-par-ancha{ grid-template-columns:minmax(0, 1fr); }
  .vt-fila:not(.vt-tfila):not(.vt-gfila){ flex-wrap:wrap; row-gap:var(--e-1); }
  .vt-fila:not(.vt-tfila):not(.vt-gfila) .vt-der{ order:3; flex-basis:100%; text-align:left; white-space:normal; }
  .vt-fila:not(.vt-tfila):not(.vt-gfila) .vt-ir{ margin-left:auto; }
  .vt-paso{ grid-template-columns:minmax(88px, 112px) minmax(0, 1fr) minmax(52px, 64px); }
  .vt-paso-a{ grid-template-columns:minmax(88px, 112px) minmax(0, 1fr) minmax(52px, 64px) 16px; }
  .vt-embudo.con-costo .vt-paso{ grid-template-columns:minmax(80px, 104px) minmax(0, 1fr) minmax(40px, 52px) minmax(80px, 104px); }
  .vt-embudo.con-costo .vt-paso-a{ grid-template-columns:minmax(80px, 104px) minmax(0, 1fr) minmax(40px, 52px) minmax(80px, 104px) 16px; }
  .vt-def{ grid-template-columns:minmax(0, 1fr); row-gap:var(--e-1); }
  .vt-def dd{ margin-bottom:var(--e-2); }
  .vt-buscar{ flex:1 1 140px; min-width:0; }
}

/* ---- V1 de las 9 mejoras (lienzo aprobado el 11 nov): «Hoy en ventas», la tabla con su costo, el costo por paso y la ficha de un anuncio ---- */
.vt-hoy{ display:flex; flex-direction:column; }
.vt-hoy-a{ display:grid; grid-template-columns:minmax(0, 1fr) auto 24px; align-items:center; column-gap:var(--e-3); min-height:48px; padding:var(--e-1) 0; color:inherit; text-decoration:none; border-radius:var(--r); }
@media (hover:hover){ .vt-hoy-a:hover{ background:var(--tinte-toque); } }
.vt-hoy-t{ font-size:var(--t-texto); color:var(--tinta); min-width:0; }
.vt-hoy-s{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); }
.vt-hoy-n{ font-size:var(--t-texto); color:var(--tinta); font-variant-numeric:tabular-nums; }
.vt-hoy-sep{ margin:var(--e-3) 0 var(--e-1); padding-top:var(--e-3); border-top:1px solid var(--linea); font-size:var(--t-meta); color:var(--medio); }
.vt-hoy-sep.vt-hoy-sep0{ margin-top:var(--e-1); padding-top:0; border-top:0; }
.vt-th.con-gasto, .vt-tfila:has(.con-gasto), .vt-total.con-gasto{ grid-template-columns:minmax(0, 2.2fr) repeat(5, minmax(0, .7fr)) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) 24px; }
.vt-th.con-gasto > span:nth-last-child(-n+2){ text-align:right; }
.vt-embudo.con-costo .vt-paso{ grid-template-columns:minmax(96px, 150px) minmax(0, 1fr) minmax(48px, 64px) minmax(96px, 140px); }
.vt-embudo.con-costo .vt-paso-a{ grid-template-columns:minmax(96px, 150px) minmax(0, 1fr) minmax(48px, 64px) minmax(96px, 140px) 24px; }
.vt-paso-c{ font-size:var(--t-texto); color:var(--tinta); text-align:right; font-variant-numeric:tabular-nums; }
.vt-def{ display:grid; grid-template-columns:minmax(96px, 150px) minmax(0, 1fr); row-gap:var(--e-2); column-gap:var(--e-4); margin:var(--e-2) 0 0; }
.vt-def dt{ padding-top:2px; font-size:var(--t-meta); color:var(--medio); }
.vt-def dd{ margin:0; font-size:var(--t-texto); line-height:1.45; color:var(--tinta); overflow-wrap:anywhere; }
.vt-sub{ margin:var(--e-2) 0 0; font-size:var(--t-texto); line-height:1.5; color:var(--texto); }

/* ---- la tarjeta de los dos pasos, mientras ningun prospecto traiga anuncio ---- */
.vt-guia{ display:flex; flex-direction:column; gap:var(--e-3); padding:var(--e-5); }
.vt-guia-t{ margin:0; font-size:var(--t-sub); font-weight:500; color:var(--tinta); }
.vt-guia-l{ margin:0; max-width:60ch; font-size:var(--t-texto); line-height:1.6; color:var(--texto); }
.vt-pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--e-3); }
.vt-pasos li{ display:flex; gap:var(--e-3); align-items:flex-start; max-width:60ch; font-size:var(--t-texto); line-height:1.6; color:var(--texto); }
.vt-paso-num{ flex:none; width:22px; height:22px; margin-top:2px; border-radius:var(--r); background:var(--piedra-on); color:var(--tinta);
  font-size:var(--t-meta); display:flex; align-items:center; justify-content:center; }

/* ---- la hoja de fechas: dos campos de 16 px (sin zoom en el telefono) ---- */
.vt-fechas{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-3); }
.vt-campo{ display:flex; flex-direction:column; gap:var(--e-1); font-size:var(--t-meta); color:var(--medio); }
.vt-campo input{ min-height:40px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea);
  color:var(--tinta); font-family:inherit; font-size:var(--t-campo); }
.vt-f-error{ margin-top:var(--e-2); color:var(--urge); }

/* ---- V2: «Su camino» (ficha y vistazo): dia a la izquierda, el paso a la derecha. Sin linea ni puntos: renglones. Lo que no se pudo medir, apagado. ---- */
.vt-camino{ display:flex; flex-direction:column; }
.vt-cpaso{ display:grid; grid-template-columns:minmax(84px, 108px) minmax(0, 1fr); column-gap:var(--e-3); padding:var(--e-2) 0; }
.vt-cf{ font-size:var(--t-meta); color:var(--medio); padding-top:2px; font-variant-numeric:tabular-nums; }
.vt-ct{ margin:0; font-size:var(--t-texto); color:var(--tinta); }
.vt-cd{ margin:2px 0 0; font-size:var(--t-meta); color:var(--medio); line-height:1.45; }
.vt-cno .vt-ct, .vt-cno .vt-cf{ color:var(--apagado); }

/* ---- V2b de las 9 mejoras (lienzo aprobado el 11 nov): «Ya le contesté», la frecuencia y las alertas, «Por semana», la platica y que trae ---- */
.vt-rfila{ display:flex; align-items:center; gap:var(--e-3); }
.vt-rfila > .pz-fila{ flex:1 1 auto; min-width:0; }
.vt-respondi{ flex:none; }
.vt-resp{ display:flex; flex-direction:column; gap:var(--e-2); }
.vt-resp-op{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--e-2); min-height:40px; font-size:var(--t-texto); color:var(--tinta); }
.vt-resp-hora{ min-height:40px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--pag); box-shadow:inset 0 0 0 1px var(--linea);
  color:var(--tinta); font-family:inherit; font-size:var(--t-campo); }
.vt-urge, .vt-c .vt-poco.vt-urge{ color:var(--urge); }
.vt-th.con-gasto.con-meta, .vt-tfila:has(.con-meta), .vt-total.con-gasto.con-meta{
  grid-template-columns:minmax(0, 2fr) repeat(5, minmax(0, .65fr)) minmax(0, .85fr) minmax(0, .95fr) minmax(0, .95fr) minmax(0, .8fr) 24px; }
.vt-sth, .vt-sfila{ display:grid; grid-template-columns:minmax(0, 1.2fr) repeat(5, minmax(0, 1fr)); column-gap:var(--e-4); align-items:center; }
.vt-sth.con-meta, .vt-sfila.con-meta{ grid-template-columns:minmax(0, 1.1fr) repeat(6, minmax(0, 1fr)); }
.vt-sth{ padding:var(--e-2) 0; font-size:var(--t-meta); color:var(--medio); }
.vt-sth > span:nth-child(n+2){ text-align:right; }
.vt-sfila{ min-height:48px; padding:var(--e-1) 0; }
.vt-sfila .vt-c:first-child{ text-align:left; }
.vt-lados{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-5); margin-top:var(--e-2); }
.vt-lado-t{ margin:0 0 var(--e-1); font-size:var(--t-meta); color:var(--medio); }
.vt-esc{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(64px, auto); align-items:center; column-gap:var(--e-3); min-height:40px; }
.vt-esc-l{ font-size:var(--t-texto); color:var(--tinta); }
.vt-esc-s{ display:block; font-size:var(--t-meta); color:var(--medio); }
.vt-esc-n{ font-size:var(--t-texto); color:var(--tinta); text-align:right; font-variant-numeric:tabular-nums; }
.vt-barras{ display:flex; flex-direction:column; gap:var(--e-3); padding-top:var(--e-1); }
.vt-bar-t{ display:flex; justify-content:space-between; gap:var(--e-2); font-size:var(--t-texto); color:var(--tinta); }
.vt-bar{ display:block; height:6px; margin-top:6px; border-radius:var(--r); background:var(--piedra-on); overflow:hidden; }
.vt-bar > span{ display:block; height:100%; border-radius:var(--r); background:var(--medio); }
@container (max-width:720px){
  .vt-sth{ display:none; }
  .vt-sfila, .vt-sfila.con-meta{ display:flex; flex-wrap:wrap; }
}
@container (max-width:760px){
  .vt-lados{ grid-template-columns:minmax(0, 1fr); gap:var(--e-3); }
  .vt-rfila{ flex-wrap:wrap; row-gap:var(--e-1); }
}
/* Una alerta va primero en la linea de su anuncio y se lee entera (no se corta con puntos suspensivos). */
.vt-alerta .pz-fila-m{ white-space:normal; }
.vt-resp-op input[type="radio"]{ accent-color:var(--tinta); width:18px; height:18px; margin:0; }