/* NAFLOW CRM — sala de control del flujo de clientes.
   Paleta: grafito de noche, tinta clara, lila = el bot trabajando, rojo = te necesita a ti, verde = plata. */
:root {
  --noche: #121318; --superficie: #1A1C23; --superficie-2: #22252E; --linea: #2C2F3A; --linea-2: #3A3E4C;
  --tinta: #EEECE7; --tinta-2: #A9ABB5; --tinta-3: #6E7180;
  --rojo: #FF4B3E; --rojo-fondo: rgba(255, 75, 62, .12);
  --lila: #A29DFF; --lila-fondo: rgba(162, 157, 255, .12);
  --verde: #3CCB7F; --verde-fondo: rgba(60, 203, 127, .12);
  --ambar: #F2B544; --ambar-fondo: rgba(242, 181, 68, .12);
  --azul: #5B9BFF;
  --r-grande: 22px; --r: 14px; --r-chica: 10px;
  --display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --texto: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--noche); color: var(--tinta); font: 15px/1.5 var(--texto); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }
.oculto { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Barra superior ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px 28px;
  background: rgba(18, 19, 24, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.marca { display: flex; align-items: center; gap: 10px; font: 700 17px var(--display); letter-spacing: .04em; }
.marca svg { width: 28px; height: 28px; color: var(--tinta); }
.marca small { font: 500 13px var(--texto); letter-spacing: 0; color: var(--tinta-3); }
.tabs { display: flex; gap: 2px; margin-left: 20px; padding: 3px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; }
.tabs button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; color: var(--tinta-2); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.tabs button:hover { color: var(--tinta); }
.tabs button[aria-selected="true"] { background: var(--tinta); color: var(--noche); }
.cuenta { background: var(--rojo); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; line-height: 18px; }
.espacio { flex: 1; }
.estado-wa { display: flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--linea); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.estado-wa .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); }
.estado-wa.ok .punto { background: var(--verde); box-shadow: 0 0 0 4px var(--verde-fondo); }
.estado-wa.mal .punto { background: var(--rojo); box-shadow: 0 0 0 4px var(--rojo-fondo); }
.estado-wa.sim .punto { background: var(--ambar); box-shadow: 0 0 0 4px var(--ambar-fondo); }

main { padding: 28px 28px 60px; max-width: 1480px; margin: 0 auto; }

/* ---------- Hero: saludo + el flujo ---------- */
.hero { display: grid; gap: 22px; margin-bottom: 30px; }
.saludo h1 { margin: 0; font: 650 clamp(28px, 3.4vw, 44px)/1.08 var(--display); letter-spacing: -.025em; max-width: 22ch; }
.saludo p { margin: 8px 0 0; color: var(--tinta-2); font-size: 16px; max-width: 60ch; }

.flujo { display: grid; grid-template-columns: 3fr 1.35fr 1fr 1fr 1fr 1fr; gap: 10px; align-items: stretch; }
.nodo.visto .num { color: #C9A26A; }
.tramo-bot { border: 1px dashed rgba(162, 157, 255, .45); background: var(--lila-fondo); border-radius: var(--r-grande); padding: 12px; display: grid; gap: 10px; }
.tramo-bot .titulo-tramo { display: flex; align-items: center; gap: 8px; color: var(--lila); font-weight: 600; font-size: 13px; padding: 0 4px; }
.tramo-bot .titulo-tramo .vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--lila); animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .25; } }
.tramo-bot .pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nodo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 2px; text-align: left; position: relative; }
.tramo-bot .nodo { background: rgba(18, 19, 24, .55); border-color: transparent; }
.nodo .num { font: 650 30px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.nodo .nom { color: var(--tinta-2); font-size: 13px; }
.nodo.ti { background: var(--rojo); border-color: var(--rojo); color: #fff; padding: 16px 18px; }
.nodo.ti .num { font-size: 52px; }
.nodo.ti .nom { color: rgba(255, 255, 255, .85); font-weight: 600; }
.nodo.ganado .num { color: var(--verde); }
.nodo .extra { color: var(--tinta-3); font-size: 12px; }
.nodo.ganado .extra { color: var(--verde); }
.flecha { position: absolute; right: -9px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--linea-2); border-right: 2px solid var(--linea-2); transform: translateY(-50%) rotate(45deg); z-index: 1; }

/* ---------- Títulos de sección ---------- */
.seccion { margin: 30px 0 12px; display: flex; align-items: baseline; gap: 12px; }
.seccion h2 { margin: 0; font: 650 22px/1.2 var(--display); letter-spacing: -.015em; }
.seccion p { margin: 0; color: var(--tinta-3); font-size: 14px; }

/* ---------- Tarjetas ---------- */
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--display); color: #fff; flex: none; position: relative; }
.avatar .punto-etapa { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--superficie); }

.tarjeta { min-width: 0; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: 12px; text-align: left; width: 100%; display: flex; gap: 11px; align-items: flex-start; transition: border-color .15s, background .15s; }
.tarjeta:hover { border-color: var(--linea-2); background: var(--superficie-2); }
.tarjeta[aria-current="true"] { border-color: var(--tinta-2); }
.tarjeta .cuerpo { min-width: 0; flex: 1; display: grid; gap: 3px; }
.tarjeta .fila { display: flex; align-items: center; gap: 8px; }
.tarjeta .nom { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta .hora { margin-left: auto; color: var(--tinta-3); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarjeta .ult { color: var(--tinta-2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.chip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap; border: 1px solid var(--linea); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.bot { background: var(--lila-fondo); color: var(--lila); border-color: transparent; }
.chip.ok { background: var(--verde-fondo); color: var(--verde); border-color: transparent; }
.chip.warn { background: var(--ambar-fondo); color: var(--ambar); border-color: transparent; }
.chip.rojo { background: var(--rojo-fondo); color: var(--rojo); border-color: transparent; }
.noleido { min-width: 20px; height: 20px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.vacio { color: var(--tinta-3); font-size: 14px; text-align: center; padding: 26px 10px; border: 1px dashed var(--linea); border-radius: var(--r); }

/* "Para ti": tarjetas grandes, lo más importante de la pantalla */
.lista-ti { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.tarjeta.grande { padding: 16px; border-left: 3px solid var(--rojo); }
.tarjeta.grande .nom { font-size: 17px; }
.respuestas { display: grid; gap: 6px; margin: 8px 0 4px; }
.respuesta { background: var(--noche); border-radius: var(--r-chica); padding: 7px 10px; font-size: 13.5px; color: var(--tinta); }
.respuesta span { display: block; color: var(--tinta-3); font-size: 12px; }
.espera { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); }
.espera.larga { color: var(--rojo); }
.lista-simple { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }

/* ---------- Embudo ---------- */
.embudo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; scroll-snap-type: x proximity;
  height: calc(100dvh - 150px); min-height: 420px; }
/* Cada columna baja por dentro: la barra para ir de lado queda siempre a la vista */
.col-lista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.col { background: rgba(26, 28, 35, .55); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: 12px; min-height: 0; min-width: 0; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.col.de-bot { background: var(--lila-fondo); border: 1px dashed rgba(162, 157, 255, .35); }
.col.destacada { border-color: var(--rojo); background: var(--rojo-fondo); }
.col h3 { margin: 2px 4px 6px; font: 650 15px var(--display); display: flex; align-items: center; gap: 8px; }
.col h3 .barra { width: 9px; height: 9px; border-radius: 50%; }
.col h3 .n { margin-left: auto; color: var(--tinta-3); font-variant-numeric: tabular-nums; font-weight: 600; }
.col h3 .bot { font: 600 11px var(--texto); padding: 1px 7px; border-radius: 999px; background: var(--lila-fondo); color: var(--lila); }
.col.drop { outline: 2px dashed var(--tinta-2); outline-offset: -5px; }
.col .vacio { border: 0; padding: 18px 8px; }

/* ---------- Chat ---------- */
.chat { position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100%); background: var(--superficie); border-left: 1px solid var(--linea); z-index: 40;
  display: grid; grid-template-rows: auto auto 1fr auto; box-shadow: -30px 0 60px rgba(0, 0, 0, .45); transform: translateX(105%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.chat.abierto { transform: none; }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.chat-cab h2 { margin: 0; font: 650 18px/1.2 var(--display); }
.chat-cab .sub { color: var(--tinta-3); font-size: 12.5px; }
.btn-icono { border: 1px solid var(--linea); background: var(--superficie-2); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.btn-icono svg { width: 18px; height: 18px; }
.chat-ficha { padding: 12px 16px; border-bottom: 1px solid var(--linea); display: grid; gap: 10px; }
.chat-ficha .fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chat-ficha select { padding: 8px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie-2); font-weight: 600; }
.chat-ficha textarea { border: 1px solid var(--linea); border-radius: 12px; padding: 8px 11px; background: var(--noche); resize: vertical; font-size: 14px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.campos div { background: var(--noche); border-radius: var(--r-chica); padding: 7px 10px; font-size: 13.5px; }
.campos b { display: block; color: var(--tinta-3); font-weight: 500; font-size: 12px; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; user-select: none; color: var(--tinta-2); }
.interruptor input { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--linea-2); position: relative; margin: 0; transition: background .15s; flex: none; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.interruptor input:checked { background: var(--lila); }
.interruptor input:checked::after { transform: translateX(16px); }

.mensajes { overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 7px; background: var(--noche); }
.burbuja { max-width: 80%; padding: 9px 12px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; font-size: 14.5px; }
.burbuja .meta { display: block; font-size: 11px; opacity: .6; margin-top: 4px; text-align: right; }
.burbuja .meta .luz { font-weight: 600; cursor: help; }
.burbuja .meta .luz.claude { color: #c96a3c; }
.burbuja .meta .luz.gemini { color: #3f7fd6; }
.burbuja .meta .luz.plantilla { color: #7a7a7a; }
.burbuja.cliente { align-self: flex-start; background: var(--superficie-2); border-bottom-left-radius: 5px; }
.burbuja.bot { align-self: flex-end; background: var(--lila-fondo); color: #DCDAFF; border: 1px solid rgba(162, 157, 255, .25); border-bottom-right-radius: 5px; }
.burbuja.josue { align-self: flex-end; background: var(--tinta); color: var(--noche); border-bottom-right-radius: 5px; }
.separador { align-self: center; font-size: 12px; color: var(--tinta-3); padding: 3px 10px; margin: 6px 0; }

.escribir { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--linea); align-items: flex-end; background: var(--superficie); }
.escribir textarea { flex: 1; resize: none; border: 1px solid var(--linea); border-radius: 14px; padding: 10px 12px; max-height: 140px; min-height: 44px; background: var(--noche); }
.btn { border: 1px solid var(--linea); background: var(--superficie-2); padding: 9px 16px; border-radius: 12px; font-weight: 650; font-size: 14px; }
.btn:hover { border-color: var(--linea-2); }
.btn.negro { background: var(--tinta); color: var(--noche); border-color: var(--tinta); }
.btn.rojo { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.btn.verde { background: var(--verde); color: #0B1F14; border-color: var(--verde); }
.btn:disabled { opacity: .5; cursor: default; }
.sim-como { display: flex; gap: 6px; align-items: center; padding: 10px 12px 0; font-size: 12.5px; color: var(--tinta-3); background: var(--superficie); }
.sim-como label { display: flex; gap: 5px; align-items: center; padding: 3px 10px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta-2); }

.velo { position: fixed; inset: 0; background: rgba(5, 5, 8, .55); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s; }
.velo.on { opacity: 1; pointer-events: auto; }

/* ---------- Diálogos ---------- */
dialog { border: 1px solid var(--linea); border-radius: var(--r-grande); padding: 0; width: min(460px, calc(100% - 24px)); background: var(--superficie); color: var(--tinta); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
dialog::backdrop { background: rgba(5, 5, 8, .65); }
dialog form { padding: 22px; display: grid; gap: 14px; }
dialog h3 { margin: 0; font: 650 21px var(--display); }
.campo { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea { padding: 11px 13px; border: 1px solid var(--linea); border-radius: 12px; background: var(--noche); color: var(--tinta); font-weight: 500; font-size: 15px; }
.acciones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.frase { background: var(--noche); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.ayuda { color: var(--tinta-2); font-size: 14px; margin: 0; max-width: 70ch; }

/* ---------- Bot (editor) y Ventas ---------- */
.editor { max-width: 880px; display: grid; gap: 16px; }
.bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: 20px; display: grid; gap: 12px; }
.bloque.alerta { border-color: var(--rojo); background: var(--rojo-fondo); }
.bloque h3 { margin: 0; font: 650 18px var(--display); }
.bloque h4 { margin: 8px 0 0; font: 600 14px var(--display); color: var(--tinta-2); }
.paso { border-left: 2px solid var(--lila); padding-left: 14px; display: grid; gap: 8px; }
.paso textarea, .bloque textarea { width: 100%; min-height: 64px; resize: vertical; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; background: var(--noche); line-height: 1.45; }
.paso .etq { font-size: 12.5px; font-weight: 600; color: var(--lila); }
.linea { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--tinta-2); }
.linea input, .linea select { width: 92px; padding: 7px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--noche); }
.linea select { width: auto; }
.json { font-family: ui-monospace, Consolas, monospace; font-size: 12px; min-height: 420px !important; }
details summary { cursor: pointer; }
.barra-guardar { position: sticky; bottom: 14px; display: flex; justify-content: flex-end; }
.venta { display: grid; gap: 8px; }
.venta .linea b { color: var(--tinta); font-size: 16px; }

/* ---------- QR / entrar ---------- */
.qr { display: grid; justify-items: center; gap: 14px; text-align: center; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-grande); padding: 28px; max-width: 500px; margin: 0 auto 26px; }
.qr h3, .qr h2 { margin: 0; font: 650 22px var(--display); }
.qr img { width: 260px; height: 260px; border-radius: 16px; background: #fff; padding: 10px; }
.qr ol { text-align: left; color: var(--tinta-2); font-size: 14px; margin: 0; padding-left: 20px; }
.entrar { margin-top: 14vh; }
.entrar .escribir { border: 0; width: 100%; padding: 0; background: none; }
.entrar input { flex: 1; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px; background: var(--noche); font-size: 18px; letter-spacing: .3em; }
.logo-entrar { width: 64px !important; height: 64px !important; padding: 0 !important; background: none !important; }

/* ---------- Avisos ---------- */
.toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(420px, calc(100% - 24px)); }
.toast { background: var(--tinta); color: var(--noche); padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); animation: sube .22s ease; }
.toast.rojo { background: var(--rojo); color: #fff; }
@keyframes sube { from { transform: translateY(10px); opacity: 0; } }

/* ---------- Celular ---------- */
.barra-movil { display: none; }
@media (max-width: 1100px) {
  .flujo { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .nodo.ti { grid-column: 1 / -1; }
  .tramo-bot { grid-column: 1 / -1; }
  .flecha { display: none; }
}
@media (max-width: 760px) {
  .top { padding: 11px 16px; }
  .tabs { display: none; }
  .marca small { display: none; }
  main { padding: 18px 16px 100px; }
  .saludo h1 { font-size: 27px; }
  .saludo p { font-size: 15px; }
  .flujo { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tramo-bot { grid-column: 1 / -1; padding: 10px; }
  .nodo { padding: 10px 11px; }
  .nodo .num { font-size: 24px; }
  .nodo.ti { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
  .nodo.ti .num { font-size: 44px; }
  .lista-ti, .lista-simple { grid-template-columns: 1fr; }
  .embudo { grid-auto-columns: 86%; }
  .chat { width: 100%; border-left: 0; }
  .toasts { bottom: 90px; }
  .barra-movil { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(26, 28, 35, .94); backdrop-filter: blur(14px); border-top: 1px solid var(--linea); padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); }
  .barra-movil button { border: 0; background: none; display: grid; justify-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--tinta-3); padding: 4px; position: relative; }
  .barra-movil button svg { width: 22px; height: 22px; }
  .barra-movil button[aria-selected="true"] { color: var(--tinta); }
  .barra-movil .cuenta { position: absolute; top: 0; left: calc(50% + 6px); }
  .estado-wa .txt { display: none; }
}

/* ---------- Compras del cliente ---------- */
.compras { background: var(--noche); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 6px; }
.compras-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--tinta-3); }
.compras-cab b { color: var(--tinta); }
.compra { display: grid; grid-template-columns: 86px 1fr auto auto; gap: 8px; font-size: 13.5px; align-items: baseline; }
.compra span:first-child { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.compra b { color: var(--verde); font-variant-numeric: tabular-nums; }

/* ---------- Resultados ---------- */
#resultados { display: grid; gap: 18px; }
.res-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.periodos { display: flex; gap: 2px; padding: 3px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; }
.periodos button { border: 0; background: none; padding: 6px 13px; border-radius: 999px; color: var(--tinta-2); font-weight: 600; font-size: 13.5px; }
.periodos button[aria-selected="true"] { background: var(--tinta); color: var(--noche); }
.meta-estado { font-size: 13px; color: var(--tinta-3); }
.meta-estado.ok { color: var(--verde); }
.meta-estado.error, .meta-estado.sin_token { color: var(--ambar); }
.res-titular h1 { margin: 6px 0 0; font: 650 clamp(26px, 3vw, 40px)/1.12 var(--display); letter-spacing: -.025em; max-width: 26ch; }
.res-titular p { margin: 8px 0 0; color: var(--tinta-3); font-size: 14px; }
.cifras { display: flex; flex-wrap: wrap; gap: 10px 34px; padding: 4px 2px 6px; }
.cifras div { display: grid; }
.cifras .v { font: 650 30px/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cifras .v.bien { color: var(--verde); }
.cifras .k { color: var(--tinta-3); font-size: 13px; }

.barras { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; align-items: end; height: 190px; }
.semana { display: grid; grid-template-rows: 1fr auto auto; height: 100%; gap: 4px; text-align: center; }
.pila { display: flex; gap: 4px; align-items: flex-end; justify-content: center; height: 100%; }
.pila .b { width: 40%; max-width: 26px; border-radius: 6px 6px 2px 2px; }
.b.gasto, .leyenda i.gasto { background: var(--linea-2); }
.b.vendido, .leyenda i.vendido { background: var(--verde); }
.semana .ret { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.semana .fe { font-size: 11.5px; color: var(--tinta-3); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tinta-2); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.tabla-scroll { overflow-x: auto; margin: 0 -6px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.tabla th { text-align: left; color: var(--tinta-3); font-weight: 600; font-size: 12.5px; padding: 8px 6px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 10px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; font-variant-numeric: tabular-nums; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .sub, .tipo-fila .sub { display: block; color: var(--tinta-3); font-size: 12px; font-weight: 500; }
.vacio-celda { color: var(--tinta-3); text-align: center; padding: 22px !important; }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tipo-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.tipo-fila:last-child { border-bottom: 0; }
.tipo-fila .monto { font: 650 17px var(--display); color: var(--verde); font-variant-numeric: tabular-nums; }
.ruta { display: grid; gap: 10px; }
.ruta-barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); }
.ruta-barra .directo, .leyenda i.directo { background: var(--azul); }
.ruta-barra .subio, .leyenda i.subio { background: var(--lila); }

@media (max-width: 760px) {
  .dos { grid-template-columns: 1fr; }
  .barras { height: 150px; gap: 4px; }
  .cifras { gap: 10px 22px; }
  .cifras .v { font-size: 24px; }
  .barra-movil { grid-template-columns: repeat(5, 1fr); }
  .barra-movil button { font-size: 10.5px; }
}
#btn-prueba { white-space: nowrap; }
.compra { grid-template-columns: 54px 1fr auto auto; }
@media (max-width: 760px) {
  .seccion { flex-direction: column; gap: 2px; }
  #btn-prueba { padding: 7px 11px; font-size: 13px; }
}
@media (max-width: 760px) {
  .tabla { min-width: 0; }
  .tabla thead { display: none; }
  .tabla tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
  .tabla tr:last-child { border-bottom: 0; }
  .tabla td { border: 0; padding: 0; }
  .tabla td:first-child { grid-column: 1 / -1; }
  .tabla td[data-k]::before { content: attr(data-k); display: block; color: var(--tinta-3); font-size: 11.5px; }
  .tabla td.ver { grid-column: 1 / -1; }
  .tabla-scroll { margin: 0; }
}

/* ---------- Reactivar ---------- */
.filas-filtro { display: grid; gap: 12px; }
.etq-f { display: block; font-size: 13px; color: var(--tinta-3); margin-bottom: 6px; }
.filtro { border: 1px solid var(--linea); background: var(--superficie-2); color: var(--tinta-2); padding: 6px 13px; border-radius: 999px; font-weight: 600; font-size: 13.5px; }
.filtro.on { background: var(--tinta); color: var(--noche); border-color: var(--tinta); }
.filtro.sugerida { border-color: var(--rojo, #FF4B3E); color: var(--tinta); }
.plantillas { margin-bottom: 10px; display: grid; gap: 6px; }
.aviso-hueco { color: var(--rojo, #FF4B3E); font-weight: 600; }
.grupo { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--linea); }
.grupo-lista { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; }
.promo-vista { max-width: 220px; max-height: 220px; border-radius: 12px; border: 1px solid var(--linea); }
.pasos-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pasos-auto figure { margin: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.pasos-auto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: 1px solid var(--linea); }
.pasos-auto video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: 1px solid var(--linea); background: var(--noche); }
.pasos-auto .solo-texto { aspect-ratio: 4 / 5; border-radius: 12px; border: 1px dashed var(--linea-2); display: grid; place-items: center; color: var(--tinta-3); font-size: 13px; }
.pasos-auto .turnan { display: block; margin-top: 4px; color: var(--tinta-3); font-size: 12px; }
.pasos-auto .turnan a { color: inherit; font-weight: 600; }
.pasos-auto figcaption { font-size: 13px; color: var(--tinta-2); line-height: 1.4; }
.campana { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.campana:last-child { border-bottom: 0; }
.cita { font-style: italic; }
.burbuja.campana { align-self: flex-end; background: var(--rojo-fondo); color: #FFD9D5; border: 1px solid rgba(255, 75, 62, .3); border-bottom-right-radius: 5px; }
label.btn { cursor: pointer; }
@media (max-width: 760px) { .barra-movil { grid-template-columns: repeat(6, 1fr); } .barra-movil button { font-size: 9.5px; } }

/* ---------- Explicación de etapas ---------- */
.col-desc { margin: -2px 4px 6px; font-size: 12.5px; color: var(--tinta-3); line-height: 1.4; }
.leyenda-fases { margin: 8px 0 0; padding-left: 18px; color: var(--tinta-3); font-size: 13px; display: grid; gap: 2px; }
.leyenda-fases b { color: var(--tinta-2); font-weight: 600; }
.guia { margin-top: 26px; max-width: 760px; }
.guia summary { cursor: pointer; }
.guia-lista { display: grid; gap: 12px; margin-top: 6px; }
.guia-fila { display: flex; gap: 10px; align-items: flex-start; }
.guia-fila .barra { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; }
.guia-fila p { margin: 2px 0 0; color: var(--tinta-2); font-size: 14px; }

/* =====================================================================
   TEMA "SALA DE EDICIÓN" — la línea de tiempo del día manda; el resto calla.
   ===================================================================== */
:root {
  --noche: #0E0F13; --superficie: #16181F; --superficie-2: #1D2029; --linea: #262A35; --linea-2: #343948;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
}
body { background: radial-gradient(1200px 520px at 18% -8%, rgba(255, 75, 62, .10), transparent 62%), radial-gradient(900px 480px at 92% 4%, rgba(162, 157, 255, .07), transparent 60%), var(--noche); background-attachment: fixed; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
main, .top { position: relative; z-index: 1; }
.top { background: rgba(14, 15, 19, .78); }

/* Saludo */
.saludo .hora-tc { font: 500 12.5px var(--mono); color: var(--tinta-3); letter-spacing: .02em; }
.saludo h1 { margin-top: 8px; font-weight: 700; letter-spacing: -.03em; }

/* La línea de tiempo */
.timeline { background: linear-gradient(180deg, rgba(29, 32, 41, .9), rgba(22, 24, 31, .9)); border: 1px solid var(--linea); border-radius: 18px; padding: 10px 12px 14px; display: grid; gap: 8px; overflow: hidden; }
.regla { display: flex; justify-content: space-between; font: 500 10.5px var(--mono); color: var(--tinta-3); padding: 0 2px 6px;
  background: repeating-linear-gradient(90deg, var(--linea-2) 0 1px, transparent 1px 12px) bottom / 100% 5px no-repeat; }
.pista-etq { display: none; }
.pista { display: flex; gap: 4px; min-height: 108px; }
.clip-et { flex: 1 1 0; min-width: 92px; position: relative; text-align: left; border: 0; border-radius: 10px; padding: 10px 12px 12px; display: grid; align-content: start; gap: 1px;
  background: var(--superficie-2); color: var(--tinta); border-top: 3px solid var(--linea-2); transition: transform .15s ease, filter .15s; }
.clip-et:hover { filter: brightness(1.12); }
.clip-et .tc { font: 500 10px var(--mono); color: var(--tinta-3); }
.clip-et .num { font: 700 30px/1.05 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.clip-et .nom { font-size: 12.5px; color: var(--tinta-2); font-weight: 600; }
.clip-et .extra { font-size: 11.5px; color: var(--verde); margin-top: 2px; }
.clip-et.bot { background: linear-gradient(180deg, rgba(162, 157, 255, .16), rgba(162, 157, 255, .06)); border-top-color: var(--lila);
  background-image: linear-gradient(180deg, rgba(162, 157, 255, .16), rgba(162, 157, 255, .06)), repeating-linear-gradient(90deg, rgba(162, 157, 255, .18) 0 2px, transparent 2px 6px); background-size: 100% 100%, 100% 14px; background-repeat: no-repeat; background-position: 0 0, 0 100%; }
.clip-et.ti { background: linear-gradient(180deg, #FF5A4E, #E23B30); border-top-color: #FFC2BC; color: #fff; }
.clip-et.ti .tc, .clip-et.ti .nom { color: rgba(255, 255, 255, .85); }
.clip-et.ti .num { font-size: 40px; }
.clip-et.ganado { border-top-color: var(--verde); }
.clip-et.ganado .num { color: var(--verde); }
.clip-et.visto { border-top-color: #C9A26A; }
.clip-et.visto .num { color: #E0BD86; }
.cabezal { position: absolute; left: -4px; top: -34px; bottom: -8px; width: 2px; background: #FF4B3E; box-shadow: 0 0 12px rgba(255, 75, 62, .8); }
.cabezal::before { content: ""; position: absolute; top: 0; left: -5px; width: 12px; height: 10px; background: #FF4B3E; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
@media (prefers-reduced-motion: no-preference) { .cabezal { animation: cabezal 2.4s ease-in-out infinite; } }
@keyframes cabezal { 50% { opacity: .55; } }

.cta-ti { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; border-radius: 14px; padding: 14px 18px; background: var(--rojo); color: #fff; font-weight: 600; font-size: 15px; text-align: left; }
.cta-ti .num { font: 700 30px/1 var(--display); }
.cta-ti .ir { margin-left: auto; background: rgba(0, 0, 0, .22); padding: 8px 14px; border-radius: 999px; font-size: 14px; }
@media (min-width: 761px) { .cta-ti { display: none; } }

/* Tarjetas como clips */
.tarjeta { border-radius: 12px; border-left: 3px solid var(--linea-2); background: linear-gradient(180deg, var(--superficie), rgba(22, 24, 31, .92)); }
.tarjeta.grande { border-left-color: var(--rojo); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.avatar { border-radius: 10px; }
.avatar .punto-etapa { border-color: var(--superficie); }
.tarjeta .hora { font-family: var(--mono); font-size: 11.5px; }

/* Embudo como pistas */
.col { border-radius: 16px; background: rgba(22, 24, 31, .7); }
.col h3 { font-size: 15px; }
.col.destacada { background: linear-gradient(180deg, rgba(255, 75, 62, .14), rgba(255, 75, 62, .04)); }

/* Burbujas */
.burbuja.josue { background: #F1EEE8; }
.mensajes { background: radial-gradient(600px 300px at 80% 0%, rgba(162, 157, 255, .05), transparent 60%), var(--noche); }

@media (max-width: 1100px) {
  .pista { overflow-x: auto; scroll-snap-type: x mandatory; }
  .clip-et { min-width: 110px; scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .timeline { padding: 8px 8px 10px; border-radius: 16px; }
  .regla { display: none; }
  .pista { min-height: 92px; gap: 3px; }
  .clip-et { min-width: 96px; padding: 8px 10px; }
  .clip-et .num { font-size: 24px; }
  .clip-et.ti .num { font-size: 30px; }
  .cabezal { top: -8px; }
  .hero { gap: 14px; }
}

.medio-paso { border: 1px dashed var(--linea); border-radius: 10px; padding: 8px 12px; display: grid; gap: 4px; font-size: 13.5px; }
.medio-paso code, .paso .etq code { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }

/* Notas de voz y respuestas del celular */
.audio-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.audio-fila audio, .item-panel audio { height: 34px; max-width: 100%; }
.lista-audios { display: grid; gap: 10px; margin: 6px 0 12px; }
.fila-celular .linea { gap: 6px; }
.fila-celular input[data-campo="atajo"] { width: 160px; font-family: var(--mono, ui-monospace, monospace); }
.atajo { font-family: var(--mono, ui-monospace, monospace); color: var(--rojo); font-weight: 700; }
#llave-pago { flex: 1; min-width: 200px; }
.atajos-chat { display: flex; gap: 8px; padding: 8px 0 0; }
.atajos-chat .btn { padding: 5px 12px; font-size: 13px; }
.panel-chat { max-height: 220px; overflow-y: auto; display: grid; gap: 6px; padding: 8px; margin-top: 8px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie-2); }
.item-panel { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 4px 10px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--tinta); }
button.item-panel { grid-template-columns: 1fr; cursor: pointer; }
button.item-panel:hover { border-color: var(--linea); background: var(--superficie); }
.item-panel b { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; }
.item-panel span { color: var(--tinta-2); font-size: 13px; }
@media (max-width: 760px) { .item-panel { grid-template-columns: 1fr; } }

/* Resultados: ganancia, embudo y calculadora */
.positivo { color: var(--verde, #3CCB7F); }
.negativo { color: var(--rojo); }
.cifras .v.mal { color: var(--rojo); }
.emb-lista { display: grid; gap: 10px; margin-top: 8px; }
.paso-emb { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; align-items: center; }
.emb-barra { height: 26px; background: var(--superficie-2); border-radius: 8px; overflow: hidden; }
.emb-barra span { display: block; height: 100%; min-width: 3px; background: linear-gradient(90deg, var(--rojo), #ff7a5c); border-radius: 8px; }
.emb-txt b { font-size: 18px; margin-right: 4px; }
.emb-txt .sub { display: block; }
.calc-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.calc-campos label { display: grid; gap: 6px; align-content: space-between; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie-2); font-size: 13px; color: var(--tinta-2); }
.calc-campos .campo { display: flex; align-items: center; gap: 6px; color: var(--tinta-2); }
.calc-campos input { width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--noche); color: var(--tinta); font: 600 16px var(--mono, ui-monospace, monospace); }
.calc-frase { font-size: 16px; margin: 0 0 10px; }
.monto .sub { display: block; text-align: right; font-size: 12px; }
@media (max-width: 760px) { .paso-emb { grid-template-columns: 1fr; gap: 4px; } }

.conectar-meta summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.pasos-meta { display: grid; gap: 8px; padding-left: 20px; margin: 12px 0; color: var(--tinta-2); font-size: 14px; line-height: 1.5; }
.pasos-meta b { color: var(--tinta); }
.pasos-meta code { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; }
#meta-token { flex: 1; min-width: 220px; width: auto; }

.anuncio-origen { flex-wrap: wrap; gap: 6px; }
.tabla td .sub + b { display: block; }

/* Clientes de antes del CRM */
#antes summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.form-antes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.form-antes label { display: grid; gap: 5px; font-size: 13px; color: var(--tinta-2); }
.form-antes input, .form-antes select, .compra-fila input, .compra-fila select { padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--noche); color: var(--tinta); min-width: 0; }
#an-compras { display: grid; gap: 8px; margin: 6px 0 10px; }
.compra-fila { display: grid; grid-template-columns: 150px minmax(160px, 1fr) 160px auto; gap: 8px; align-items: center; }
.pie-manual { padding: 10px 2px; }
@media (max-width: 760px) { .compra-fila { grid-template-columns: 1fr 1fr; } }
.juntar { flex-wrap: wrap; gap: 8px; }
.juntar select { flex: 1; min-width: 160px; width: auto; }
.ok-txt { color: var(--verde); }

.pago-fila { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--verde); border-radius: var(--r); background: var(--verde-fondo); }
.pago-fila .linea { flex-wrap: wrap; gap: 6px; }
.tarjeta .cuerpo { grid-template-columns: minmax(0, 1fr); }
.embudo-flechas { position: sticky; top: 70px; z-index: 5; display: flex; justify-content: flex-end; gap: 6px; margin: -6px 0 8px; }
@media (max-width: 760px) { .embudo-flechas { display: none; } }
.paginas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.paginas button { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--linea); background: var(--superficie-2); color: var(--tinta-2); font-weight: 650; }
.paginas button[aria-current="page"] { background: var(--tinta); color: var(--noche); border-color: var(--tinta); }
.paginas .ayuda { margin-left: 6px; }
#historial summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
/* Pagos por confirmar (detectados en el chat) */
.lista-pagos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 8px; }
.pago { background: var(--verde-fondo); border: 1px solid color-mix(in srgb, var(--verde) 45%, transparent); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.pago-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pago-cab b { font-size: 16px; }
.pago-motivo { margin: 0; color: var(--tinta-2); font-size: 13.5px; overflow-wrap: anywhere; }
.pago-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pago .acciones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.pago .chip { align-self: flex-start; }
@media (max-width: 700px) { .lista-pagos, .pago-campos { grid-template-columns: 1fr; } }
.btn.chico { padding: 5px 12px; font-size: 13px; }
.enlace { background: none; border: 0; padding: 0; color: var(--tinta); font-weight: 650; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 3px; }
.btn.mini { padding: 2px 9px; font-size: 12px; }
#todas-ventas .cifras { margin: 6px 0 12px; }

/* ---------- Ventas: lista a la izquierda, tablero de cifras a la derecha ---------- */
#tablero { max-width: 1280px; }
#tablero > .bloque, #tablero > .vacio { max-width: 880px; }
.ventas-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ventas-grid > .bloque, .ventas-panel > .bloque { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.ventas-panel { display: grid; gap: 16px; min-width: 0; }
.ventas-panel h3 { margin: 0; }
.chip.lila { background: var(--lila-fondo); color: var(--lila); border-color: transparent; }
.cifras .v.lila { color: var(--lila); }
tr.tenue td { color: var(--tinta-2); }
.vg-barras { display: flex; gap: 6px; align-items: stretch; height: 170px; padding-top: 4px; }
.vg-col { flex: 1; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; text-align: center; border-radius: 8px; outline-offset: 2px; }
.vg-col:hover .vg-pila, .vg-col:focus-visible .vg-pila { filter: brightness(1.15); }
.vg-num { font-size: 11.5px; font-weight: 650; color: var(--tinta); font-variant-numeric: tabular-nums; min-height: 16px; white-space: nowrap; }
.vg-pila { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; height: 100%; border-bottom: 1px solid var(--linea); }
.vg-stack { width: 70%; max-width: 30px; display: flex; flex-direction: column; gap: 2px; border-radius: 5px 5px 2px 2px; overflow: hidden; }
.vg-b { flex: 1 1 0; min-height: 2px; }
.vg-b.cobrado, .leyenda i.cobrado { background: #25A160; }
.vg-b.porcobrar, .leyenda i.porcobrar { background: #C0801A; }
.vg-fe { font-size: 11px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-lista, .vgr-lista { display: grid; gap: 14px; }
.vp-fila { display: grid; gap: 5px; }
.vp-cab { display: flex; align-items: baseline; gap: 10px; }
.vp-nom { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.vp-n { white-space: nowrap; color: var(--tinta-2); font-size: 13px; }
.vp-n b { font: 650 20px var(--display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.vp-riel { height: 6px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; }
.vp-b { display: block; height: 100%; background: #25A160; border-radius: 999px; }
.vp-fila .sub, .vgr-quien .sub { display: block; font-size: 12.5px; color: var(--tinta-3); }
.vgr-fila { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.vgr-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.vgr-quien { min-width: 0; }
.vgr-quien .enlace { text-align: left; }
.vgr-der { text-align: right; display: grid; gap: 4px; justify-items: end; white-space: nowrap; }
@media (max-width: 1180px) {
  .ventas-grid { grid-template-columns: minmax(0, 1fr); }
  .ventas-panel { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 760px) { .ventas-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  #todas-ventas .periodos { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #todas-ventas .periodos button { white-space: nowrap; }
  #todas-ventas .tabla tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #todas-ventas .tabla td { overflow-wrap: anywhere; }
}

/* ---------- Embudo: tarjetas que no se aplastan + páginas por columna ---------- */
.embudo { grid-auto-columns: minmax(320px, 1fr); }
.col-lista > * { flex: none; }  /* con muchos chats cada tarjeta conserva su tamaño y su vista previa */
.col h3 { margin: 0 0 4px; }
.col-titulo { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border-radius: 10px; font: 650 15px var(--display); }
.col-titulo:hover { background: var(--superficie-2); }
.col-titulo:focus-visible { outline: 2px solid var(--lila); }
.col-titulo .agrandar { width: 15px; height: 15px; color: var(--tinta-3); flex: none; }
.col-titulo:hover .agrandar { color: var(--tinta); }
.col h3 .col-titulo .n { margin-left: auto; color: var(--tinta-3); font-variant-numeric: tabular-nums; font-weight: 600; }
.col h3 .col-titulo .barra { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pag-corta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--tinta-2); flex: none; }
.pag-corta .btn-icono { width: 34px; height: 34px; font-size: 18px; color: var(--tinta); }
.pag-corta .btn-icono:disabled { opacity: .35; }
.embudo-flechas { align-items: center; }
.embudo-flechas .btn { padding: 7px 14px; font-size: 13.5px; margin-right: auto; }

/* ---------- Vista grande tipo WhatsApp ---------- */
.bandeja { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 12px; height: calc(100dvh - 120px); min-height: 460px; }
.bandeja.oculto { display: none; }
.bandeja-lista { display: flex; flex-direction: column; min-height: 0; background: rgba(26, 28, 35, .55); border: 1px solid var(--linea); border-radius: var(--r-grande); overflow: hidden; }
.bandeja-cab { display: flex; gap: 8px; align-items: center; padding: 12px 12px 8px; }
.bandeja-cab input { flex: 1; min-width: 0; padding: 9px 13px; border: 1px solid var(--linea); border-radius: 12px; background: var(--noche); color: var(--tinta); font-size: 14.5px; }
.bandeja-etapas { position: relative; display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 10px; scrollbar-width: none; border-bottom: 1px solid var(--linea); }
.bandeja-etapas::-webkit-scrollbar { display: none; }
.bandeja-etapas .filtro { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; padding: 5px 11px; font-size: 13px; }
.bandeja-etapas .filtro .barra { width: 7px; height: 7px; border-radius: 50%; }
.bandeja-etapas .filtro b { font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.bandeja-items { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.bandeja-items > * { flex: none; }
.bandeja-items .tarjeta { border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; background: transparent; padding: 11px 14px; }
.bandeja-items .tarjeta:hover { background: var(--superficie-2); }
.bandeja-items .tarjeta[aria-current="true"] { background: var(--superficie-2); box-shadow: inset 3px 0 0 var(--tinta); }
.bandeja-items .vacio { margin: 14px; }
#bandeja-pag .pag-corta { padding: 8px 12px; }
.bandeja-chat { min-width: 0; min-height: 0; }
.chat-vacio { display: grid; place-content: center; justify-items: center; gap: 6px; height: 100%; text-align: center; padding: 30px; color: var(--tinta-3); background: var(--noche); }
.chat-vacio svg { width: 54px; height: 54px; color: var(--linea-2); margin-bottom: 6px; }
.chat-vacio b { color: var(--tinta-2); font: 650 18px var(--display); }
.chat-vacio span { max-width: 34ch; font-size: 14px; }
@media (min-width: 761px) {
  .con-bandeja .bandeja-chat > .chat { position: relative; inset: auto; width: auto; height: 100%; transform: none; transition: none; box-shadow: none; z-index: auto;
    border: 1px solid var(--linea); border-radius: var(--r-grande); overflow: hidden; }
  .con-bandeja .bandeja-chat > .chat .mensajes { min-height: 0; }
  .con-bandeja .chat-cab [data-accion="cerrar"] { display: none; }
}
@media (max-width: 760px) {
  .embudo { grid-auto-columns: 88%; }
  .bandeja { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 150px); min-height: 380px; }
  .bandeja-chat:empty { display: none; }
  .bandeja-items .tarjeta { padding: 10px 12px; }
}

/* ---------- Fotos de perfil ---------- */
.avatar { overflow: visible; }
.avatar .foto { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--superficie-2); }
.avatar .punto-etapa { z-index: 1; }

/* ---------- Adjuntos en el chat ---------- */
.atajos-chat { flex-wrap: wrap; }
.atajos-chat label.btn { cursor: pointer; display: inline-flex; align-items: center; }
.adjunto { display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 8px; border: 1px solid var(--linea); border-radius: 14px; background: var(--noche); }
.adjunto img, .adjunto-icono { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 26px; background: var(--superficie-2); }
.adjunto div { min-width: 0; flex: 1; display: grid; }
.adjunto b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto span { font-size: 12px; color: var(--tinta-3); }
.burbuja.con-adjunto { padding: 4px; display: grid; gap: 4px; }
.burbuja.con-adjunto > :not(a):not(.meta) { padding: 0 8px; }
.burbuja.con-adjunto .meta { padding: 0 8px 4px; }
.adj-img img { display: block; max-width: min(260px, 100%); max-height: 320px; border-radius: 12px; object-fit: cover; }
.adj-doc { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .18); color: inherit; text-decoration: none; font-weight: 600; font-size: 14px; }
.adj-doc small { font-weight: 500; opacity: .7; font-size: 12px; }
.chat.soltar::after { content: 'Suelta el archivo para mandarlo'; position: absolute; inset: 10px; border: 2px dashed var(--lila); border-radius: 18px; background: rgba(18, 19, 24, .82);
  display: grid; place-items: center; font: 650 17px var(--display); color: var(--tinta); pointer-events: none; z-index: 5; }
.burbuja.con-adjunto { max-width: min(300px, 80%); }
.embudo-flechas { margin: 0 0 10px; }
@media (min-width: 761px) {
  .con-bandeja main { padding-bottom: 16px; }
  .bandeja { height: calc(100dvh - 116px); }
}
/* Cambiar o borrar una venta */
#form-venta .acciones { display: flex; gap: 8px; align-items: center; }
#form-venta .espacio { flex: 1; }
.res-cab .periodos { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.res-cab .periodos::-webkit-scrollbar { display: none; }
.res-cab .periodos button { white-space: nowrap; flex: none; }
.res-cab { flex-wrap: wrap; min-width: 0; }
.res-cab .periodos { min-width: 0; }
@media (max-width: 760px) { .res-cab .espacio { display: none; } .res-cab .periodos { flex: 1 1 100%; } }

/* Cruce con el Tablero */
.lista-cruce { display: grid; gap: 10px; margin-bottom: 8px; }
.cruce { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--linea); border-left: 3px solid var(--azul); border-radius: var(--r); background: var(--superficie); }
.cruce b { font-size: 15px; }
.cruce p { margin: 0; color: var(--tinta-2); font-size: 13.5px; }
.cruce .linea { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cruce .btn { white-space: normal; text-align: left; font-size: 13.5px; padding: 8px 13px; }
.cruce .btn small { opacity: .7; font-weight: 500; }
.seccion h2 .cuenta { font-size: 12px; vertical-align: middle; }
.tocable { cursor: pointer; }
tr.tocable:hover td, .tipo-fila.tocable:hover { background: var(--superficie-2); }
.filtro-activo { display: inline-flex; align-items: center; gap: 6px; background: var(--tinta); color: var(--noche); border-color: var(--tinta); }
.filtro-activo .enlace { color: var(--noche); text-decoration: none; font-weight: 800; }

/* Balance del día (pauta vs ventas) */
.balance-dia { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 12px 14px; border-left: 4px solid #3fb950; }
.balance-dia.rojo { border-left-color: #e5484d; }

/* =====================================================================
   Celular y chat — v2
   Idea: lo que usas con el pulgar (responder, prender/apagar el bot, cerrar) siempre a la vista;
   lo demás (la ficha del cliente) plegado; ningún bloque puede dejar sin espacio a la conversación.
   ===================================================================== */
/* El chat es una columna: cabecera, controles, ficha plegable, mensajes (lo que crece) y escribir */
.chat { display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; overflow: hidden; }
.chat > * { flex: none; min-width: 0; }
.chat > .mensajes { flex: 1 1 0; min-height: 160px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.con-bandeja .bandeja-chat > .chat { height: 100%; max-height: none; }
.chat-cab > div:not(.espacio) { min-width: 0; }
.chat-cab h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fila-top { align-items: center; }
.fila-top .interruptores { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ficha-mas { border-bottom: 1px solid var(--linea); flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ficha-mas::details-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ficha-mas > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-weight: 650; font-size: 13.5px; color: var(--tinta-2); user-select: none; }
.ficha-mas > summary::-webkit-details-marker { display: none; }
.ficha-mas > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3); transform: rotate(45deg) translateY(-2px); transition: transform .15s; flex: none; }
.ficha-mas[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ficha-mas > summary small { font-weight: 500; color: var(--tinta-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Si la ficha es larga, se baja DENTRO de ella: nunca se come la conversación */
.ficha-cuerpo { display: grid; gap: 10px; padding: 0 16px 12px; }
.chat-ficha { border-bottom: 0; }
body.chat-encima { overflow: hidden; }

@media (max-width: 760px) {
  /* Cabecera compacta: una línea de nombre y una de datos */
  .chat-cab { padding: calc(10px + env(safe-area-inset-top)) 12px 10px; gap: 10px; }
  .chat-cab h2 { font-size: 17px; }
  .chat-cab .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .btn-icono { width: 44px; height: 44px; border-radius: 13px; }

  /* Controles: etapa + Ganado arriba; Bot y Personal debajo, grandes para el pulgar */
  .chat-ficha { padding: 10px 12px 8px; }
  .chat-ficha .fila-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .fila-top > select { grid-column: 1; grid-row: 1; min-height: 46px; }
  .fila-top > .btn.verde { grid-column: 2; grid-row: 1; min-height: 46px; padding: 0 18px; }
  .fila-top > .espacio { display: none; }
  .fila-top .interruptores { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fila-top .interruptor { justify-content: space-between; min-height: 46px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 13px; background: var(--superficie-2); font-size: 15px; }
  .fila-top .interruptor input { width: 48px; height: 28px; }
  .fila-top .interruptor input::after { width: 22px; height: 22px; top: 3px; left: 3px; }
  .fila-top .interruptor input:checked::after { transform: translateX(20px); }
  .ficha-mas > summary { min-height: 46px; padding: 0 16px; }
  /* Con la ficha abierta, ella ocupa el espacio de la conversación (y se baja dentro de sí misma): nada queda fuera de la pantalla */
  .chat.ver-ficha > .mensajes { display: none; }
  .chat.ver-ficha > .ficha-mas { flex: 1 1 auto; }
  .ficha-mas > summary { flex: none; }
  .chat.ver-ficha .ficha-cuerpo { padding-top: 4px; }

  /* Conversación y caja de respuesta */
  .mensajes { padding: 14px 12px; }
  .burbuja { max-width: 88%; font-size: 15.5px; }
  .atajos-chat { flex-wrap: nowrap; overflow-x: auto; padding: 8px 12px 0; scrollbar-width: none; }
  .atajos-chat::-webkit-scrollbar { display: none; }
  .atajos-chat .btn, .atajos-chat label.btn { flex: none; min-height: 44px; padding: 0 14px; font-size: 14.5px; white-space: nowrap; display: inline-flex; align-items: center; }
  .panel-chat { margin: 8px 12px 0; max-height: 34dvh; }
  .escribir { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .escribir textarea { font-size: 16px; min-height: 48px; border-radius: 16px; padding: 12px 14px; }
  .escribir .btn { min-height: 48px; padding: 0 18px; border-radius: 16px; }
  .adjunto { margin: 8px 12px 0; }

  /* Escribir sin que iOS haga zoom (16 px) y botones fáciles de tocar (44 px) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px; }
  .btn { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.mini { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .filtro, .periodos button, .tabs button { min-height: 40px; }
  select, .linea input, .linea select, .campo input, .campo select, .campo textarea { min-height: 44px; }
  .linea input { width: 100%; flex: 1 1 100%; }
  .linea .etq, .linea > span.etq { flex: 1 1 100%; }
  .linea select { width: 100%; }
  dialog { width: calc(100% - 16px); max-height: calc(100dvh - 24px); overflow-y: auto; }

  /* Pantallas con formularios (Bot, Reactivar, Ventas): nada se sale de la pantalla */
  .editor, .editor > *, .bloque { min-width: 0; max-width: 100%; }
  .editor { gap: 12px; }
  .bloque { padding: 16px 14px; border-radius: 18px; overflow-wrap: anywhere; }
  .bloque .ayuda { font-size: 14px; }
  textarea.json { max-width: 100%; width: 100%; font-size: 13px; }
  .acciones { flex-wrap: wrap; }
  .acciones .btn { flex: 1 1 140px; }
  .barra-guardar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5; }
  .barra-guardar .btn { width: 100%; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }

  /* Barra de abajo: más grande y legible */
  .barra-movil button { min-height: 52px; font-size: 10.5px; padding: 4px 0; }
  .barra-movil button svg { width: 23px; height: 23px; }
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(86px + env(safe-area-inset-bottom)); }

  /* Lista de chats por etapa (la vista del Embudo en el celular) */
  .bandeja { height: calc(100dvh - 150px - env(safe-area-inset-bottom)); gap: 0; }
  .bandeja-cab { padding: 10px 10px 8px; gap: 10px; }
  .bandeja-cab input { min-height: 46px; font-size: 16px; border-radius: 14px; }
  .bandeja-etapas { padding: 0 10px 10px; gap: 8px; scroll-snap-type: x proximity; }
  .bandeja-etapas .filtro { min-height: 40px; padding: 0 14px; font-size: 14px; scroll-snap-align: start; }
  .bandeja-items .tarjeta { padding: 12px 14px; }
  .embudo { scroll-snap-type: x mandatory; }
  .embudo-flechas { top: 58px; }
  .col { scroll-snap-align: center; }
}