/* 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.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; 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; }
@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); }
.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; }