:root{
  --bg:#0b1220; --bg2:#111c30; --panel:#132038; --panel2:#182842; --line:#22355a;
  --txt:#e8eefc; --dim:#8ea3c8; --dim2:#6c81a8;
  --mov:#019DF4; --etb:#7B2D8E; --tvsl:#E4002B; --tcp:#00A76F;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --info:#38bdf8;
  --wa-out:#005c4b; --wa-in:#1f2c34; --wa-bg:#0b141a;
  --r:14px; --r2:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 15% -10%,#17263f 0%,var(--bg) 55%,#070c16 100%);
  color:var(--txt);font:14px/1.45 "Segoe UI",Inter,system-ui,-apple-system,sans-serif;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2b4066;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;display:grid;place-items:center;z-index:500;background:rgba(5,9,18,.94);backdrop-filter:blur(6px)}
#login .box{width:min(420px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
#login h1{margin:0 0 4px;font-size:22px}
#login p{margin:0 0 18px;color:var(--dim);font-size:13px}
#login input,#login select{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#0d1729;margin-bottom:10px}
#login button{width:100%;padding:12px;border:0;border-radius:10px;background:linear-gradient(135deg,#0a84ff,#00c2ff);font-weight:700}

/* ---------- SHELL ---------- */
#app{display:none;height:100vh;flex-direction:column}
#app.on{display:flex}
header.top{display:flex;align-items:center;gap:14px;padding:10px 16px;background:rgba(10,17,30,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);z-index:60;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--mov),var(--tcp));box-shadow:0 0 14px rgba(0,194,255,.6)}
.brand small{display:block;font-weight:500;color:var(--dim);font-size:10.5px;letter-spacing:.4px}

.pipes{display:flex;gap:8px;flex-wrap:wrap}
.pipe{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:12px;border:1px solid var(--line);
  background:#0e1a2e;transition:.16s;position:relative}
.pipe:hover{transform:translateY(-1px);border-color:#37527f}
.pipe.active{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}
.pipe.active{border-color:var(--pc);box-shadow:0 0 0 1px var(--pc) inset,0 6px 18px rgba(0,0,0,.35)}
.pipe .sw{width:9px;height:9px;border-radius:50%;background:var(--pc)}
.pipe b{font-size:13px}
.phonebig{font-size:16px;font-weight:800;letter-spacing:.6px;color:#dff0ff;background:rgba(1,157,244,.14);
  border:1px solid rgba(1,157,244,.45);border-radius:9px;padding:3px 10px;cursor:pointer;font-variant-numeric:tabular-nums}
.phonebig:hover{background:rgba(1,157,244,.28)}
.celbig{font-size:14.5px;font-weight:800;letter-spacing:.5px;color:#e6f4ff;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.celbig:hover{color:#8fd8ff;text-decoration:underline dotted}

/* El menú del número tiene que quedar POR ENCIMA de la ventana emergente (Info cliente, plantillas,
   fichas…): el modal va en z-index 300 y aquí estaba en 120, así que al tocar el número dentro de
   Info cliente el menú se dibujaba debajo del fondo oscuro del modal y no se veía. 450 lo deja
   encima del modal (300) y del aviso flotante (400), y por debajo del login y el visor (500). */
.pmenu{position:fixed;z-index:450;display:none;min-width:280px;background:#101d33;border:1px solid #294063;
  border-radius:14px;box-shadow:0 22px 50px rgba(0,0,0,.6);padding:12px;gap:8px;flex-direction:column}
.pmenu.on{display:flex}
.pmenu .ph{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid #24395c;padding-bottom:9px}
.pmenu .ph b{font-size:21px;letter-spacing:1px;color:#fff;font-variant-numeric:tabular-nums}
.pmenu .ph span{font-size:11.5px;color:#93a9cf}
.pmenu .op{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;border:1px solid #26395a;
  background:#16253f;color:#e8eefc;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.pmenu .op:hover{background:#1d3053;border-color:#3d5c8c}
.pmenu .op i{font-style:normal;font-size:16px}
.pmenu .op small{color:#8ea3c8;font-weight:500}

.col.inbox{min-width:264px;background:linear-gradient(180deg,rgba(1,157,244,.13),rgba(1,157,244,.03));
  border-color:rgba(1,157,244,.5)}
.col.inbox h3 b{background:rgba(1,157,244,.25);color:#cfe9ff}
.inbox-tag{font-size:10px;font-weight:700;color:#bfe6ff;background:rgba(1,157,244,.2);border:1px solid rgba(1,157,244,.5);
  border-radius:20px;padding:1px 7px}
.msrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px;font-size:10.5px;color:var(--dim)}
.msrow i{font-style:normal}
.chipst{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:1px 8px;font-weight:700;font-size:10.5px}
.chipst.sent{color:#ffd479;background:rgba(255,212,121,.13);border:1px solid rgba(255,212,121,.35)}
.chipst.delivered{color:#7ee0a4;background:rgba(126,224,164,.13);border:1px solid rgba(126,224,164,.35)}
.chipst.read{color:#6cc7ff;background:rgba(108,199,255,.15);border:1px solid rgba(108,199,255,.4)}
.chipst.failed{color:#ff9aa9;background:rgba(255,154,169,.13);border:1px solid rgba(255,154,169,.4)}
.stamp2{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:4px;font-size:10.5px;color:var(--dim)}
.stamp2 .clock{font-variant-numeric:tabular-nums}
.tray-log{border-left:3px solid rgba(1,157,244,.6);padding-left:9px}
.lookhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(1,157,244,.16),rgba(1,157,244,.03));border:1px solid rgba(1,157,244,.4);
  border-radius:12px;padding:12px 14px;margin:4px 0 12px}
.lookgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin-top:6px}
.lookgrid .kv{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #22355a;padding:3px 0}
.lookgrid .kv span:first-child{color:var(--dim);font-size:11px}
.lookgrid .kv span:last-child{color:#e8eefc;font-size:12px;font-weight:600;text-align:right;word-break:break-word}
.live{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;letter-spacing:.3px}
.live::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.live.ok{color:#3ddc84;background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.3)}
.live.warn{color:#ffc44d;background:rgba(255,196,77,.12);border:1px solid rgba(255,196,77,.3)}
.live.bad{color:#ff5d5d;background:rgba(255,93,93,.12);border:1px solid rgba(255,93,93,.35);animation:pulse 1.4s infinite}

.pipe .num{font-size:10.5px;color:var(--dim);display:block}
.pipe .cnt{font-size:10.5px;background:#1b2c49;border-radius:20px;padding:1px 7px;color:#cfe0ff}
.pipe .badge{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;border-radius:20px;font-size:10px;
  padding:1px 6px;font-weight:800;animation:pulse 1.4s infinite}

.tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip,.btn{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#0e1a2e;display:inline-flex;gap:7px;align-items:center;font-size:12.5px}
.btn:hover,.chip:hover{border-color:#3d5c92;background:#132444}
.btn.primary{background:linear-gradient(135deg,#0a84ff,#00c2ff);border:0;font-weight:700}
.btn.ghost{background:transparent}
/* «Validar CC» es un ENLACE con la misma pinta de botón (así el navegador abre la pestaña nueva
   por su cuenta y el CRM NUNCA se va de su puesto; lo pidió el asesor el 8/10/2026). */
a.btn{text-decoration:none;color:inherit;cursor:pointer}
/* NOMBRE DEL CLIENTE: se pica para ponerlo o editarlo (pedido del asesor, 8/10/2026). Va siempre
   en MAYÚSCULAS —el campo lo fuerza y el servidor también— y se escribe en la columna F de la hoja. */
#c-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#c-name .lapiz{font-size:.72em;opacity:.45}
#c-name:hover .lapiz{opacity:1}
#c-name .btn-agregar-nombre{background:#0e1a2e;border:1px dashed #3b6bd6;color:#9fe3ff;padding:5px 11px;
  border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer}
#c-name .btn-agregar-nombre:hover{background:#132444;border-color:#5a90e0}
#c-name .inp-nombre{background:#0d1729;border:1px solid #3b6bd6;border-radius:9px;color:#fff;font:inherit;
  font-weight:800;padding:4px 9px;min-width:190px;max-width:100%;text-transform:uppercase}
#c-name .inp-nombre:focus{box-shadow:0 0 0 3px rgba(59,107,214,.22)}
.btn.danger{background:#3a1420;border-color:#7f1d2d;color:#ffc9d2}
.btn.ok{background:#0f3a24;border-color:#1d6b43;color:#b6f7d0}
.btn.sm{padding:5px 9px;font-size:11.5px;border-radius:8px}
/* Botón ⬇ «al final»: redondo, verde WhatsApp, solo la flecha. Sale en la PRIMERA tarjeta de cada
   etapa de cada pipeline y también en la bandeja (inbox): manda la ficha al último lugar. */
.cellinea{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.al-final{margin-left:auto;flex:0 0 auto;width:26px;height:26px;padding:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:50%;cursor:pointer;line-height:1;
  font-size:15px;font-weight:900;color:#fff;
  background:radial-gradient(circle at 30% 25%,#48e07a,#25D366 55%,#128C7E);
  border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.al-final:hover{filter:brightness(1.08)}
.al-final:active{transform:translateY(1px)}
input[type=text],input[type=search],input[type=datetime-local],input[type=date],input[type=time],select,textarea{
  background:#0d1729;border:1px solid var(--line);border-radius:10px;padding:8px 11px;outline:none}
input:focus,select:focus,textarea:focus{border-color:#3b6bd6;box-shadow:0 0 0 3px rgba(59,107,214,.18)}
/* Campos donde el asesor escribe a mano (el celular del SMS y similares): fondo CLARO, letra casi
   negra y en negrita, borde marcado. Así lo que escribió NO se pierde sobre el fondo oscuro. */
.campo-claro,#sms-tel{
  background:#f6f9ff;color:#08111f;border:2px solid #86a9e8;
  font-weight:800;font-size:17px;letter-spacing:.6px;padding:11px 13px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.campo-claro:focus,#sms-tel:focus{background:#fff;border-color:#2f6bff;box-shadow:0 0 0 3px rgba(47,107,255,.35)}
.campo-claro::placeholder,#sms-tel::placeholder{color:#7b8ea8;font-weight:600;letter-spacing:0}
/* Un poco más de contraste en todo lo que se escribe dentro de las ventanas: que se lea sin esfuerzo. */
.modal input[type=text],.modal input[type=search],.modal input[type=datetime-local],.modal textarea,.modal select{
  background:#17263f;border:1px solid #3a5378;color:#eef4ff}
.modal input::placeholder,.modal textarea::placeholder{color:#8fa3c0}
.bell{position:relative}
.bell .n{position:absolute;top:-7px;right:-7px;background:var(--bad);border-radius:20px;font-size:10px;padding:1px 6px;font-weight:800}
.alarm{animation:alarmPulse 1s infinite}
@keyframes alarmPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}70%{box-shadow:0 0 0 14px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.75}}

.filters{display:flex;gap:8px;align-items:center;padding:8px 16px;background:rgba(9,15,27,.75);border-bottom:1px solid var(--line);flex-wrap:wrap}
.filters .lbl{color:var(--dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px}
.quick{display:flex;gap:6px}
/* Botón de filtro SELECCIONADO: azul intenso y con brillo para que se note de una cuál está
   prendido (pedido del asesor, 2/10/2026). Antes quedaba casi igual al resto y no se distinguía. */
.quick .btn.on{background:linear-gradient(180deg,#33a0ff,#0b5ecb);border-color:#a8dbff;color:#fff;
  font-weight:800;box-shadow:0 0 0 2px rgba(130,200,255,.5),0 4px 14px rgba(10,80,190,.55)}
.quick .btn.on:hover{background:linear-gradient(180deg,#45abff,#0d68dd)}
/* El numerito chiquito de cada botón de filtro: cuántos hay, sin picar el filtro (2/10/2026) */
.quick .btn .n{margin-left:5px;padding:0 5px;border-radius:8px;background:rgba(255,255,255,.10);
  font-size:10.5px;font-weight:700;opacity:.92;vertical-align:1px;font-variant-numeric:tabular-nums}
.quick .btn.on .n{background:rgba(255,255,255,.35);color:#fff}

/* ---------- BOARD ---------- */
#board{flex:1;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:14px 16px 18px;align-items:flex-start}
.col{flex:0 0 288px;max-height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(20,33,57,.92),rgba(15,25,45,.92));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.col.drag{border-color:#4b7bd6;background:#16294a}
.col-head{padding:10px 11px;border-bottom:1px solid var(--line);border-top:3px solid var(--cc,#38bdf8);background:rgba(255,255,255,.02)}
.col-head .r1{display:flex;align-items:center;gap:8px}
.col-head .nm{font-weight:700;font-size:13px}
.col-head .ct{margin-left:auto;font-size:11px;background:#1b2c49;padding:1px 7px;border-radius:20px;color:#cfe0ff}
.col-head .r2{display:flex;gap:5px;margin-top:8px}
.col-body{overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:9px;min-height:80px}

.card{
  /* RENDIMIENTO (9/10/2026): el tablero pinta 531 tarjetas de una sola vez. Con esto el navegador
     solo dibuja las que están a la vista y el resto las deja listas sin gastar: se siente mucho más
     rápido al entrar y al rodar. No cambia nada de lo que se ve. */
  content-visibility:auto;contain-intrinsic-size:auto 190px;
  background:linear-gradient(180deg,#1a2c4a,#152540);border:1px solid #24395f;border-left:4px solid var(--cc,#38bdf8);
  border-radius:var(--r2);padding:10px;cursor:pointer;transition:.14s;position:relative}
.card:hover{transform:translateY(-2px);border-color:#3f6299;box-shadow:0 8px 20px rgba(0,0,0,.4)}
/* El nombre de la etapa va TODO EN MAYÚSCULA (pedido del asesor, 2/10/2026). */
.col-head .nm{text-transform:uppercase;letter-spacing:.4px}
/* Los tres rengloncitos de TEXTO del encabezado de cada etapa (2/10/2026): Muy venta · Llamadas
   agendadas · Llamadas vencidas, cada uno con su cantidad al frente. Van DEBAJO del nombre, en letra
   muy pequeña y sin fondo fuerte, para que el encabezado no se vea pesado. NO son emojis, son letras.
   Y son botones: al picarlos se filtra DENTRO de esa etapa. */
.col-head .minis{display:flex;flex-direction:column;gap:1px;margin-top:3px;align-items:flex-start}
.col-head .mini{font:inherit;font-size:9.5px;font-weight:600;letter-spacing:.2px;padding:0 4px 0 0;border:0;
  background:transparent;opacity:.95;cursor:pointer;line-height:1.55;text-align:left;transition:.12s}
.col-head .mini b{font-weight:800;font-variant-numeric:tabular-nums;margin-left:2px}
.col-head .mini.mv{color:#8be0b0}
.col-head .mini.agend{color:#ffd479}
.col-head .mini.venc{color:#ff9f9f}
.col-head .mini:hover{background:rgba(255,255,255,.08);border-radius:5px}
/* Prendido: estás viendo SOLO esas fichas de esa etapa. */
.col-head .mini.on{background:#1d4ed8;border-color:#bfdbfe;color:#fff;opacity:1;border-radius:5px;padding:0 5px;
  box-shadow:0 0 0 2px rgba(147,197,253,.65),0 2px 8px rgba(29,78,216,.6)}
.col-head .mini.on:hover{background:#1e40af}
.col-head .viendo{font-size:9.5px;font-weight:700;color:#9fb3cc;margin-left:2px;cursor:default}

/* 🎤 La vista previa de la nota de voz: se oye antes de guardar (guardar / repetir / cerrar). */
.nota-vista{margin-top:9px;padding:9px;border:1px solid #2b6b48;border-radius:9px;background:#0d2a1d;display:flex;flex-direction:column;gap:7px}
.nota-vista audio{width:100%}
.nota-btns{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
/* 📝 El botón de NOTA PRIVADA de la conversación. */
.btn.nota-priv{border-color:#3a6f52;color:#c8f7dc}
.btn.nota-priv:hover{background:#14512f;color:#fff}

/* 📝 El aviso de notas de la tarjeta: se pica y abre la ventana con las notas del cliente. */
.ver-notas{cursor:pointer;color:#8be0b0;border-bottom:1px dotted #8be0b0}
.ver-notas:hover{color:#fff;background:#14512f}
/* La lista de notas dentro de la ventana: con su propio scroll para que la ventana no se estire. */
.notas-ventana{max-height:46vh;overflow:auto;padding-right:4px}
.notas-ventana .nota{margin-top:8px}
.cs-etapa{margin:8px 0 2px;font-size:14px;color:#cfe6ff}

/* 📞 El aviso de llamada agendada en la cabecera de la conversación (fecha + hora + cuánto falta). */
.cita-pill{background:#0f3b26;border:1px solid #22c55e;color:#d6ffe7;font-weight:700;white-space:nowrap}
.cita-pill:hover{background:#14512f}
.cita-pill.vencida{background:#4a1220;border-color:#ff5c7a;color:#ffd9e1}
.cita-pill b{color:#fff}

/* 🔥 MUY VENTA: una culebrita verde (la luz del borde) da vueltas alrededor de la tarjeta, y la
   tarjeta late en verde. Se enciende y se apaga con el interruptor de la ficha del cliente. */
@property --mv{ syntax:'<angle>'; initial-value:0deg; inherits:false }
.card.muy-venta{ animation:mvLatido 3.4s ease-in-out infinite, mvFondo 6s ease-in-out infinite; border-color:#2ee66b }
/* El FONDO también pulsa, pero SUAVECITO y LENTO (lo pidió el asesor el 2/10/2026): un vaivén de
   6 segundos entre el azul de la tarjeta y un verde apagado, sin sobresaltos. El borde no cambia. */
@keyframes mvFondo{
  0%,100%{ background-image:linear-gradient(180deg,#1a2c4a,#152540) }
  50%    { background-image:linear-gradient(180deg,#1c4a3c,#123f2e) }}
.card.muy-venta::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; padding:3px;
  background:conic-gradient(from var(--mv),
      rgba(46,230,107,0) 0deg, rgba(46,230,107,0) 190deg, rgba(46,230,107,.85) 275deg,
      #eafff1 330deg, #2ee66b 350deg, rgba(46,230,107,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; animation:mvGira 2.1s linear infinite; will-change:transform}
@keyframes mvGira{ to{ --mv:360deg } }
@keyframes mvLatido{
  0%,100%{ box-shadow:0 0 0 0 rgba(46,230,107,.55), 0 0 14px 0 rgba(46,230,107,.32) }
  50%    { box-shadow:0 0 0 6px rgba(46,230,107,0), 0 0 22px 5px rgba(46,230,107,.6) }}
/* 🔥 📞 🟥 LA ESQUINA DE LA TARJETA (9/10/2026): las insignias van DENTRO del borde, pegadas arriba a
   la derecha y en fila. Antes asomaban por fuera (top:-10px;right:-8px) y el content-visibility:auto
   que se puso para que el tablero vuele las RECORTA (la contención de pintura corta todo lo que sale
   del borde): el asesor dejó de ver el teléfono timbrando y la llamita. Dentro del borde no hay
   recorte posible y se ven igual, sin taparse entre ellas. */
.card .esquinas{position:absolute;top:4px;right:6px;display:flex;align-items:center;gap:4px;z-index:6;pointer-events:none}
/* Si la tarjeta trae más de una insignia, el nombre les deja el puesto para que no se monten encima. */
.card:has(.esquinas>*:nth-child(2)) .nm{padding-right:56px}
.card .badge-mv{ font-size:21px; line-height:1; display:inline-block;
  filter:drop-shadow(0 0 7px rgba(255,170,60,.9)) drop-shadow(0 0 12px rgba(34,197,94,.5));
  animation:mvIcono 2.4s ease-in-out infinite }
@keyframes mvIcono{ 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.16) rotate(-5deg)} }
/* El mismo aviso en la ficha del cliente */
.modobox.mv{border-color:#1c6b45;background:linear-gradient(90deg,#0d3524,#12283f)}
.modobox.mv.on{box-shadow:0 0 0 1px rgba(34,197,94,.5), 0 0 16px rgba(34,197,94,.35)}
.card.unread{border-color:#ef4444;box-shadow:0 0 0 1px rgba(239,68,68,.4)}
.card.sel{outline:2px dashed #38bdf8;outline-offset:2px}
.card .nm{font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px;padding-right:26px}
.card .cel{font-size:11.5px;color:#bcd2f7;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.card .camp{font-size:10.5px;color:var(--dim);margin-top:2px;text-transform:uppercase;letter-spacing:.4px}
.card .meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
/* El agendamiento de la tarjeta: se puede tocar (reagendar o quitar) */
.tag-cita{ cursor:pointer }
.tag-cita:hover{ filter:brightness(1.2); outline:1px solid currentColor }
.cita-actual{ background:#123a22; border:1px solid #22c55e; border-left:5px solid #22c55e; border-radius:9px;
  padding:10px 12px; margin-bottom:12px; display:flex; flex-direction:column }
.cita-actual b{ color:#eafff1; font-size:15px }
.cita-actual .w{ color:#b9e6c9; font-size:13px; margin-top:3px }
.tag{font-size:10px;padding:2px 6px;border-radius:6px;background:#1d3050;color:#c9dcff;border:1px solid #2a4270}
.tag.warn{background:#3a2a08;border-color:#8a6410;color:#ffd98a}
.tag.bad{background:#3a1220;border-color:#8a1f33;color:#ffb3c1}
.tag.ok{background:#0d3524;border-color:#1c6b45;color:#a9f0c8}
/* ASESOR A LA VISTA (pedido del dueño, 9/10/2026): en la tarjeta del tablero y en la ficha de la
   conversación. Con asesor → azul y el nombre en negrita; sin asesor → gris punteado, para que se
   note de un vistazo sin parecer una alarma. */
.tag.asesor{background:#12283f;border-color:#2f6fb3;color:#cfe0ff}
.tag.asesor b{color:#fff;font-weight:700}
.tag.asesor.sin{background:#242a35;border-color:#46536a;color:#ccd5e3;border-style:dashed}
.asesor-top{font-weight:600;color:#bfe0ff}
.asesor-top.sin{color:#ffd98a;border-bottom:1px dashed #8a6410}
.kv .sin-asesor{color:#ffd98a;font-weight:600}
.times{display:flex;flex-direction:column;gap:2px;margin-top:7px;font-size:10px;color:var(--dim2)}
.times b{color:#a9c2ea;font-weight:600}
/* ✍️ Qué fue la última gestión (nota de voz/texto, marcador de llamada, cambio de etapa): etiqueta
   corta y discreta al lado de la fecha, para no engordar la tarjeta (9/10/2026). */
.ges-tag{color:#8fb4e0;font-size:9px;border:1px solid #2f4763;border-radius:6px;padding:0 4px;white-space:nowrap;margin-left:3px}
.badge-un{position:absolute;top:7px;right:7px;background:var(--bad);color:#fff;border-radius:20px;min-width:22px;height:22px;
  padding:0 5px;display:grid;place-items:center;font-size:12px;font-weight:900;letter-spacing:-.02em;
  animation:pulse 1.25s infinite;box-shadow:0 0 14px rgba(239,68,68,.85), 0 0 0 2px rgba(11,18,32,.55)}
/* Dentro de la esquina de la tarjeta, el contador de sin leer va EN FILA con las demás insignias
   (9/10/2026). Esta regla va DESPUÉS de la de arriba a propósito: así gana por especificidad Y por
   orden, sin depender del motor de estilos. */
.card .esquinas .badge-un{position:static;top:auto;right:auto}
.sw-mode{display:flex;align-items:center;gap:7px;margin-top:9px;padding:5px 7px;border-radius:9px;font-size:11px;
  color:var(--dim);cursor:pointer;border:1px dashed transparent;transition:.15s;-webkit-tap-highlight-color:transparent}
.sw-mode:hover{background:#141c29;border-color:#2b3b53}
.sw-mode:active{background:#1a2433}
.sw-mode span.on{color:#e8eef7;font-weight:700}
.togg{width:46px;height:25px;border-radius:20px;background:#33405c;position:relative;transition:.2s;flex:0 0 auto;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);cursor:pointer}
.togg i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.45)}
.togg:hover{filter:brightness(1.15)}
.togg.hum{background:var(--warn)}
.togg.hum i{left:24px}
.empty{color:var(--dim2);font-size:11.5px;text-align:center;padding:14px 6px}

/* ---------- CHAT ---------- */
#chat{position:fixed;top:0;right:0;bottom:0;width:min(1180px,100vw);background:var(--panel);border-left:1px solid var(--line);
  box-shadow:var(--shadow);display:none;z-index:120}
#chat.on{display:flex;flex-direction:column}
.chat-top{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);background:#0f1c31;flex-wrap:wrap}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,#1f3b66,#2b6cb0)}
.chat-top .who b{display:block;font-size:14.5px}
.chat-top .who span{font-size:11.5px;color:var(--dim)}
.win-pill{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid #2a4270;background:#152541}
.win-pill.open{border-color:#1c6b45;background:#0d3524;color:#b6f7d0}
.win-pill.closed{border-color:#8a1f33;background:#3a1220;color:#ffc9d2}
.chat-body{flex:1;display:flex;min-height:0}
.msgs{flex:1;overflow-y:auto;padding:18px 20px;background:
  linear-gradient(rgba(11,20,26,.94),rgba(11,20,26,.94)),
  repeating-linear-gradient(45deg,#0e1a22 0 12px,#0b141a 12px 24px)}
.bubble{max-width:min(620px,78%);padding:7px 10px 6px;border-radius:10px;margin-bottom:9px;position:relative;font-size:13.4px;white-space:pre-wrap;word-break:break-word}
.bubble.in{background:var(--wa-in);border-top-left-radius:3px;margin-right:auto}
.bubble.out{background:var(--wa-out);border-top-right-radius:3px;margin-left:auto}
.bubble .stamp{font-size:9.5px;color:#9fb3cc;text-align:right;margin-top:3px;display:flex;gap:5px;justify-content:flex-end;align-items:center}
.bubble audio{width:260px;margin-top:2px}
.bubble img{max-width:280px;border-radius:8px;display:block;margin-top:3px;cursor:zoom-in}
.bubble .doc{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.06);padding:8px;border-radius:8px;margin-top:3px}
.bubble .tpl{font-size:10px;background:rgba(255,255,255,.1);padding:2px 6px;border-radius:6px;display:inline-block;margin-bottom:4px}
.bubble .tplimg{max-width:100%;border-radius:9px;margin-bottom:5px;display:block;cursor:zoom-in}
.bubble .tpbody{white-space:pre-wrap;word-break:break-word;line-height:1.42;font-size:12.6px}
.bubble .tpbody b{color:#fff}
.bubble .tplfoot{font-size:11px;color:var(--dim);margin-top:5px}
.bubble .btns{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.bubble .btns span{border-top:1px solid rgba(255,255,255,.15);font-size:12px;color:#7fd4ff;text-align:center;padding-top:4px}
.bubble .trans{margin-top:6px;font-size:11.5px;color:#bcd2f7;background:rgba(0,0,0,.25);padding:5px 7px;border-radius:6px;white-space:pre-wrap}
.daysep{text-align:center;margin:14px 0;color:#9fb3cc;font-size:11px}
.daysep span{background:rgba(255,255,255,.07);padding:3px 10px;border-radius:20px}
.sysline{text-align:center;font-size:11px;color:#8ea3c8;margin:8px 0}

.side{width:340px;border-left:1px solid var(--line);background:#0f1c31;overflow-y:auto;padding:12px}
.side h4{margin:12px 0 7px;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:3px 0;border-bottom:1px dashed #1e2f4d}
.kv span:first-child{color:var(--dim)}
.kv span:last-child{text-align:right;max-width:60%}
.act{border-left:2px solid #2a4270;padding:6px 0 6px 10px;margin-bottom:8px;font-size:11.6px;position:relative}
.act b{display:block;font-size:11.6px;color:#dbe8ff}
.act .w{color:var(--dim2);font-size:10.5px}
.act.stage_change{border-color:var(--info)}.act.call_scheduled{border-color:var(--warn)}
.act.sequence{border-color:var(--tcp)}.act.mass{border-color:#a855f7}
.act audio{width:100%;margin-top:5px}
.act .tr{background:rgba(0,0,0,.25);border-radius:6px;padding:5px;margin-top:5px;color:#cfe0ff}

/* ---------- ETAPAS POR DONDE HA PASADO (camino vertical, arriba de la ficha) ----------
   Solo las ETAPAS, una por renglón, con su fecha y hora: sin los «de → a» ni el motivo
   del cambio. Renglones de ~20px (fuente 11px) para que ocupe poco y se lea en orden. */
.etapas-mini{margin:2px 0 8px}
.etapas-mini .et-pasos{list-style:none;margin:0;padding:1px 0 1px 9px;border-left:2px solid #24406e;
  border-radius:2px;max-height:168px;overflow-y:auto}
.etapas-mini .et-pasos li{position:relative;display:flex;align-items:baseline;gap:6px;
  padding:2.5px 6px;margin-bottom:2px;border-radius:5px;background:rgba(255,255,255,.016);
  font-size:11px;line-height:1.4}
.etapas-mini .et-pasos li::before{content:"";position:absolute;left:-12px;top:6px;
  width:7px;height:7px;border-radius:50%;background:#2a4270;border:2px solid #0f1c31}
.etapas-mini .et-pasos li:first-child{background:rgba(37,211,102,.09)}
.etapas-mini .et-pasos li:first-child::before{background:#25D366}
.etapas-mini .et-paso{color:#dbe8ff;font-weight:600}
.etapas-mini .et-pasos li:first-child .et-paso{color:#dff5e6}
.etapas-mini .et-ahora{font-size:9px;color:#7ef0a8;border:1px solid rgba(37,211,102,.45);
  border-radius:4px;padding:0 3px;flex:none}
.etapas-mini .et-fecha{margin-left:auto;font-size:9.5px;color:var(--dim2);white-space:nowrap}

.composer{border-top:1px solid var(--line);background:#0f1c31;padding:10px 12px}
.composer .row1{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.composer .row2{display:flex;gap:9px;align-items:flex-end}
.composer textarea{flex:1;min-height:44px;max-height:160px;resize:vertical;border-radius:12px}
.mic{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#132444;display:grid;place-items:center;font-size:18px}
.mic.rec{background:#7f1d2d;border-color:#ef4444;animation:alarmPulse 1.2s infinite}
#dictbox{font-size:11.5px;color:#8ea3c8;margin-top:6px;display:none}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;background:rgba(4,8,16,.72);display:none;place-items:center;z-index:300;backdrop-filter:blur(3px)}
.modal.on{display:grid}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  width:min(760px,94vw);max-height:90vh;overflow:auto;padding:20px}
.modal .box.wide{width:min(1040px,96vw)}
.modal h3{margin:0 0 4px;font-size:17px}
.modal .sub{color:var(--dim);font-size:12.5px;margin-bottom:14px}
.grid{display:grid;gap:10px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#0e1a2e;font-size:12.5px}
.opt.on{background:#12314f;border-color:#2f6fb3}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;max-height:290px;overflow:auto;padding:4px}
.slot{padding:7px;text-align:center;border-radius:8px;border:1px solid var(--line);background:#0e1a2e;font-size:12px;font-variant-numeric:tabular-nums}
.slot.on{background:linear-gradient(135deg,#0a84ff,#00c2ff);border:0;font-weight:700}
.waprev{background:#0b141a;border:1px solid #1f2c34;border-radius:12px;padding:14px;white-space:pre-wrap;font-size:13.3px}
.waprev .btns{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.waprev .btns span{border-top:1px solid rgba(255,255,255,.14);color:#7fd4ff;text-align:center;padding-top:5px;font-size:12px}
.tpl-list{max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:7px}
.tpl-item{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#0e1a2e;cursor:pointer}
.tpl-item:hover{border-color:#3d5c92}
.tpl-item.on{border-color:#2f6fb3;background:#12314f}
.tpl-item .n{font-weight:600;font-size:12.6px}
.tpl-item .m{font-size:10.5px;color:var(--dim);margin-top:2px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#152541;border:1px solid var(--line);
  padding:11px 16px;border-radius:12px;z-index:400;box-shadow:var(--shadow);display:none;font-size:13px}
.toast.on{display:block}
.recbar{display:flex;align-items:center;gap:10px;background:#1a1224;border:1px solid #7f1d2d;border-radius:12px;padding:9px 12px;margin-bottom:8px}
.recbar .pulse{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:pulse 1s infinite}
.hint{font-size:11.5px;color:var(--dim2)}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;place-items:center;z-index:500}
#lightbox.on{display:grid}
#lightbox img{max-width:94vw;max-height:94vh;border-radius:10px}
@media (max-width:900px){.side{display:none}.col{flex:0 0 84vw}}

/* ============ Ventanas emergentes: X arriba y «Cerrar» abajo, siempre ============ */
.modal .box{position:relative}
.m-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  border:1px solid #35507c;background:linear-gradient(180deg,#1b2b47,#131f36);color:#cfe0ff;
  font-size:15px;font-weight:700;line-height:1;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .12s ease,background .15s ease,border-color .15s ease,z-index:1}
.m-x:hover{background:linear-gradient(180deg,#28405f,#1a2a44);border-color:#4d7ac0;color:#fff;transform:scale(1.08)}
.m-x:active{transform:scale(.94)}
.modal-foot{display:flex;gap:9px;justify-content:flex-end;align-items:center;flex-wrap:wrap;
  margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.pmenu .ph{position:relative;padding-right:34px}
.pmenu .pm-x{position:absolute;top:0;right:0;width:26px;height:26px;border-radius:50%;border:1px solid #35507c;
  background:#16233b;color:#cfe0ff;font-size:12px;font-weight:700;cursor:pointer;display:grid;place-items:center}
.pmenu .pm-x:hover{background:#28405f;color:#fff}
.pmenu .pm-foot{margin-top:6px;padding-top:8px;border-top:1px solid #24395c;display:flex;justify-content:flex-end}

/* ============ Lista desplegable de etapas y buscadores ============ */
.sel-stage{width:100%;padding:11px 12px;border-radius:11px;border:1px solid #2c4468;background:#0d1729;
  font-size:13.5px;font-weight:600;cursor:pointer}
.sel-stage:hover{border-color:#3d5c92}
.tpl-search{width:100%;padding:11px 13px;border-radius:11px;border:1px solid #2c4468;background:#0d1729;
  margin-bottom:10px;font-size:13px}
.tpl-search::placeholder{color:#7b8fb4}

/* ============ Franja de etapas: nombre + cuántas fichas, sin ocupar espacio ============ */
.stagechips{display:flex;gap:6px;overflow-x:auto;padding:7px 12px;margin:0;background:linear-gradient(180deg,#0b1526,#0a1220);
  border-bottom:1px solid var(--line);scrollbar-width:thin;position:sticky;top:52px;z-index:20}
.stagechips::-webkit-scrollbar{height:6px}
.stagechips::-webkit-scrollbar-thumb{background:#26395a;border-radius:6px}
.schip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 10px;border-radius:999px;
  border:1px solid #26395a;border-left:3px solid var(--cc,#64748B);background:#101c31;color:#c3d2ea;
  font-size:11.4px;font-weight:600;cursor:pointer;line-height:1.5;transition:background .12s ease,transform .12s ease}
.schip b{background:rgba(255,255,255,.08);border-radius:999px;padding:0 6px;font-size:10.5px;color:#e8eefc}
.schip:hover{background:#17253e;transform:translateY(-1px)}
/* Etapa SELECCIONADA: mismo azul intenso con brillo (2/10/2026). No se toca el borde izquierdo para
   no perder el colorcito propio de cada etapa. */
.schip.on{background:linear-gradient(180deg,#33a0ff,#0b5ecb);color:#fff;font-weight:800;
  box-shadow:0 0 0 2px rgba(130,200,255,.45),0 4px 14px rgba(10,80,190,.5)}
.schip.on:hover{background:linear-gradient(180deg,#45abff,#0d68dd)}
.schip.on b{background:rgba(255,255,255,.32);color:#fff}
.schip.todas{border-left-color:#64748B}
.schip.inbox{border-left-color:#019DF4}

/* ============ Notas rápidas ============ */
.qn-list{display:flex;flex-direction:column;gap:9px;max-height:52vh;overflow:auto;padding-right:3px}
.qn{border:1px solid var(--line);border-radius:13px;padding:11px 13px;background:#0e1a2e}
.qn:hover{border-color:#3d5c92}
.qn-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.qn-top b{font-size:13.6px;color:#eaf1ff}
.qn-tags{font-size:10.6px;color:#8ea3c8;background:#12203a;border-radius:999px;padding:2px 8px}
.qn-n{font-size:10.6px;color:var(--dim);margin-left:auto}
.qn-items{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}
.qn-i{font-size:11px;color:#cfe0ff;background:#12203a;border:1px solid #22355a;border-radius:8px;padding:3px 8px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn-i.audio{border-color:#4d7ac0}.qn-i.image{border-color:#3f8f6f}.qn-i.video{border-color:#a06a3f}
.qn-actions{display:flex;gap:7px;flex-wrap:wrap}
.qn-items-edit{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ne-item{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--line);
  border-radius:9px;padding:6px 9px;background:#0d1729}
.ne-add{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* ============ Ventana de 24 h de WhatsApp (cabecera de la conversación) ============ */
.win-pill{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid #26395a;background:#101c31;color:#c3d2ea;white-space:nowrap}
.win-pill.open{border-color:#1f7a4d;background:#0f2a1e;color:#7ff0b0}
.win-pill.closed{border-color:#8a2f3d;background:#2a141a;color:#ffb3c1}
.sale{border:1px solid #26395a;border-radius:11px;padding:9px 11px;margin-bottom:8px;background:#0d1729}
.sale-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.sale-h span{font-size:10.5px;color:#8fa6c8}
.sale-d{font-size:11.2px;color:#c3d2ea;line-height:1.55}
.sale-f{margin-top:6px}
.pill{font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid #3b4c6b;background:#131f36;color:#c3d2ea}
.pill.ok{border-color:#1f7a4d;background:#0f2a1e;color:#7ff0b0}
.pill.bad{border-color:#8a2f3d;background:#2a141a;color:#ffb3c1}
.agentbox{border:1px solid #3b2f6b;border-left:4px solid #8b5cf6;border-radius:11px;padding:9px 11px;margin-bottom:11px;background:#160f2e}
.agentbox b{font-size:11.8px;display:block;margin-bottom:3px;color:#e8eefc}
.agentbox .w{font-size:11px;color:#c9bdea;line-height:1.5}
.winbox{border:1px solid #26395a;border-left:4px solid #64748B;border-radius:11px;padding:9px 11px;margin-bottom:11px;background:#0d1729}
.winbox.open{border-left-color:#22c55e;background:#0d2018}
.winbox.closed{border-left-color:#ef4444;background:#201016}
.winbox b{font-size:11.8px;display:block;margin-bottom:3px;color:#e8eefc}
.winbox .w{font-size:11px;color:#b9cbe6;line-height:1.45}



/* ==================== ALERTA: destello rojo (tres veces) ==================== */
.flash-alerta{position:fixed;inset:0;pointer-events:none;z-index:9998}
.flash-alerta.on{animation:flashAlerta .7s ease-out 3}
@keyframes flashAlerta{
  0%{box-shadow:inset 0 0 170px 45px rgba(255,45,75,.55)}
  45%{box-shadow:inset 0 0 18px 0 rgba(255,45,75,.04)}
  100%{box-shadow:inset 0 0 170px 45px rgba(255,45,75,.45)}
}

/* ============ Tarjeta: de dónde sale el nombre y datos extra ============ */
.nom-wa{display:block;font-size:10px;font-weight:600;color:#8fd0ff;letter-spacing:.2px;margin-top:2px}
.masdatos{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:10.5px;color:#a9c2dd;margin:4px 0 2px}
.masdatos span{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:1px 6px}
.co-mini{display:flex;gap:8px;font-size:10.5px;color:#bcd3ec;margin-top:3px}

/* ============ Ficha del cliente: secciones ============ */
.ficha-sec{margin:10px 0 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#7fa6cc;
  border-top:1px solid rgba(255,255,255,.07);padding-top:7px}

/* ============ Marcador de llamadas (contestó / no contesta / buzón) ============ */
.row-call{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 9px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);margin-bottom:7px}
.row-call .co{display:inline-flex;align-items:center;gap:6px}
.row-call .co b{background:#0d1b2e;border-radius:20px;padding:0 8px;min-width:20px;text-align:center;
  font-variant-numeric:tabular-nums}
.row-call .co[data-res="contesto"] b{color:#6ee7a8}
.row-call .co[data-res="no_contesta"] b{color:#ffb3c1}
.row-call .co[data-res="buzon"] b{color:#ffd479}
.cobox,.modobox{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px;
  padding:8px 10px;margin-bottom:9px}
.modobox{display:flex;align-items:center;gap:8px;font-size:11px}
.co-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.cobox .co{font-size:10.5px;border-radius:20px;padding:2px 9px;border:1px solid rgba(255,255,255,.12)}
.cobox .co.c1{color:#6ee7a8}.cobox .co.c2{color:#ffb3c1}.cobox .co.c3{color:#ffd479}.cobox .co.c4{color:#bcd3ec}

/* ==================== Notas internas de la ficha ==================== */
.nota{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-left:3px solid #019DF4;
  border-radius:9px;padding:7px 9px;margin-bottom:7px}
.nota .nt{font-size:12px;color:#dceaff;white-space:pre-wrap;margin:3px 0}
.nota audio{width:100%;height:32px;margin-top:4px}
.nota-in textarea{width:100%;min-height:52px;resize:vertical}
.nota-btns{display:flex;align-items:center;gap:7px;margin-top:5px;flex-wrap:wrap}

/* ============ calendario del agendamiento de llamadas ============ */
.cal-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;padding:9px 10px;background:#0f1520;border:1px solid #1e2a3a;border-radius:10px}
.cal-row input[type=date],.cal-row input[type=time]{background:#0b111a;border:1px solid #24344a;color:#e8eef7;border-radius:8px;padding:6px 8px;font:inherit}

/* ============ secuencias programables ============ */
.sq-list{display:flex;flex-direction:column;gap:9px;max-height:44vh;overflow:auto}
.sq-row{background:#0f1520;border:1px solid #1e2a3a;border-radius:11px;padding:10px 12px}
.sq-n{font-weight:700}
.sq-m{font-size:12px;opacity:.75;margin-top:2px}
.sq-d{font-size:12px;opacity:.6;margin-top:3px}
.sq-acts{display:flex;gap:7px;margin-top:8px}
.sq-off{font-size:10px;background:#3a2030;color:#ffb3c1;border-radius:6px;padding:1px 6px;margin-left:6px}
.sq-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* ¿A qué campaña va la secuencia? Va PRIMERO al crear (pedido del dueño, 22/10/2026). */
.sq-campo{display:flex;flex-direction:column;gap:6px;margin:12px 0 4px}
.sq-lbl{font-size:12px;font-weight:700;letter-spacing:.02em;color:#cfe0ff}
.sq-campo select{max-width:340px;padding:9px 10px}
.sq-pipe-fijo{margin:12px 0 4px;font-size:13px}
.sq-step{background:#0f1520;border:1px solid #1e2a3a;border-radius:12px;padding:10px;margin-bottom:9px}
.sq-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sq-num{width:24px;height:24px;border-radius:50%;background:#1d4ed8;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.sq-when{margin-left:auto;font-size:12px;opacity:.85}
.sq-btns{display:flex;gap:4px}
.sq-cont{margin-top:9px}
.sq-cont textarea,.sq-cont select,.sq-cont input{width:100%;background:#0b111a;border:1px solid #24344a;color:#e8eef7;border-radius:8px;padding:8px;font:inherit}
.sq-cont textarea{height:74px;resize:vertical}
.sq-tipo{width:auto}
.sq-media{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sq-media input{flex:1;min-width:150px}
.sq-time{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:9px;font-size:12px;opacity:.9}
.sq-in{display:flex;gap:5px;align-items:center}
.sq-in input{background:#0b111a;border:1px solid #24344a;color:#e8eef7;border-radius:7px;padding:5px 6px;width:70px}
.sq-in select{background:#0b111a;border:1px solid #24344a;color:#e8eef7;border-radius:7px;padding:5px 6px}
.sq-chk{display:flex;gap:5px;align-items:center;white-space:nowrap}
.sq-prev-tit{font-weight:700;margin-bottom:6px}
.sq-prev{width:100%;border-collapse:collapse;font-size:12px}
.sq-prev th,.sq-prev td{border-bottom:1px solid #1e2a3a;padding:5px 6px;text-align:left}

/* ============ VENTANA DE 24 H: abierta / cerrada, siempre visible en la tarjeta ============ */
.tag.v-abierta{background:rgba(34,197,94,.16);color:#86efac;border:1px solid rgba(34,197,94,.45);font-weight:700}
.tag.v-cerrada{background:rgba(239,68,68,.14);color:#fca5a5;border:1px solid rgba(239,68,68,.4);font-weight:700}

/* ============ ETAPA A LA VISTA, con lista para cambiarla ============ */
.stagebox{display:flex;align-items:center;gap:6px;background:#0f172a;border:1px solid #22314a;border-radius:999px;padding:2px 8px}
.stagebox .sl{font-size:11px;color:#9fb3cc;white-space:nowrap}
select.sel-stage.sm{padding:4px 6px;font-size:12px;max-width:200px;background:#16233a;color:#e6f0ff;border:1px solid #2a3a55;border-radius:8px}

/* ============ VISTA PREVIA ANTES DE ENVIAR (voz y archivos) ============ */
.prevbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 11px;margin-top:8px;border-radius:12px;
  background:#101c30;border:1px solid #2b4a6f;box-shadow:inset 0 0 0 1px rgba(94,168,255,.08)}
.prevbar .tip{font-size:12px;color:#cfe0ff}
.prevbar audio{height:34px;max-width:250px}
.filethumb{max-height:76px;max-width:112px;border-radius:8px;border:1px solid #2a3a55;display:block}
.fileicon{font-size:30px;line-height:1}

/* ============ LA PLANTILLA EN EL CRM, TAL COMO LA VE EL CLIENTE ============ */
.bubble img.tplimg{display:block;max-width:230px;border-radius:10px;margin-bottom:6px;cursor:zoom-in}
.bubble .tpbody{white-space:pre-wrap}

/* ===== la etapa de la ficha: a la vista y con su lista completa ===== */
.stagebtn{display:inline-flex;align-items:center;gap:5px;background:#16233a;color:#dbeafe;border:1px solid #2a3a55;
  border-radius:999px;padding:6px 10px;white-space:nowrap;max-width:220px}
.stagebtn b{color:#facc15;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:150px;vertical-align:bottom}
.stagebtn:hover{border-color:#3d5c92;background:#1c2c48}
/* 🎯 La lista de etapas AHÍ MISMO (no ventana emergente, pedido del asesor 8/10/2026): letras blancas,
   fondo del tema y azulito al pasar el cursor para no perder el contraste. */
.etapas-menu{position:fixed;z-index:460;background:#0f1b2e;border:1px solid #2a3a55;border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);padding:8px;max-height:62vh;overflow:auto}
.etapas-menu .em-tit{font-size:12px;font-weight:800;color:#cbd5e1;padding:4px 8px 8px}
.etapas-menu .em-it{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;
  border:0;border-radius:9px;color:#ffffff;font-size:13px;font-weight:600;padding:9px 10px;cursor:pointer}
.etapas-menu .em-it i{width:10px;height:10px;border-radius:50%;background:var(--c,#64748b);flex:0 0 auto;box-shadow:0 0 6px var(--c,#64748b)}
.etapas-menu .em-it span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etapas-menu .em-it:hover{background:#1d4ed8;color:#fff}
.etapas-menu .em-it.on{opacity:.6;cursor:default}
.etapas-menu .em-ahora{margin-left:auto;font-size:11px;color:#bfdbfe;font-weight:700}
.etapas-menu .em-pie{font-size:11px;color:#94a3b8;padding:8px 8px 4px;border-top:1px solid #1e293b;margin-top:6px}
.stagelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:6px;max-height:52vh;overflow:auto;padding-right:4px}
.stagelist .stg{display:flex;align-items:center;gap:8px;text-align:left;background:#101c30;border:1px solid #24405f;color:#e6f0ff;
  border-radius:10px;padding:10px 11px;font-size:13px;cursor:pointer}
.stagelist .stg i{width:10px;height:10px;border-radius:50%;background:var(--c,#64748b);flex:0 0 auto;box-shadow:0 0 6px var(--c,#64748b)}
.stagelist .stg:hover{border-color:#3d5c92;background:#16233a}
.stagelist .stg.on{opacity:.55;cursor:default;border-style:dashed}


/* VENTANA CERRADA = SOLO PLANTILLA: aviso en el compositor y controles bloqueados */
.aviso-ventana{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0;padding:8px 10px;
  border-radius:8px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.5);color:#fecaca;font-size:13px}
.composer [disabled]{opacity:.45;cursor:not-allowed}

/* ===== Info del cliente: cada dato con su etiqueta PEGADA (no al otro extremo) ===== */
.looklist{display:flex;flex-direction:column}
.lk{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:4px 0;border-bottom:1px dashed #1e2f4d}
.lk .k{flex:0 0 auto;min-width:118px;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.lk .v{font-weight:700;color:#e8eefc;word-break:break-word}
.lk .b{font-size:11px;color:#7d8ea8}
.lk .o{flex:1 1 100%;font-size:11px;color:#ffcf7a;padding-left:124px}
/* Direcciones: una debajo de la otra, cada una se copia al tocarla */
.lkdir{flex-direction:column;align-items:stretch;gap:2px}
.lkdir .k{min-width:0}
.lkdir .dv{display:block;font-weight:700;color:#e8eefc;word-break:break-word;cursor:pointer;
  padding:4px 9px;margin:3px 0;border:1px dashed #2b3a55;border-radius:8px;background:#101c2f}
.lkdir .dv:hover,.dv:hover{border-color:#25D366;background:#12291d}
.lkdir .dv i{font-style:normal;font-weight:400;font-size:11px;color:#93a4bd;margin-right:7px;text-transform:uppercase;letter-spacing:.4px}
.lkdir .o{padding-left:0}
.dv{cursor:pointer;border-bottom:1px dashed #25D366}
.lookhead .quien{font-size:13px;color:#cfe0f7}

/* ===== Cita de la ficha: cuánto falta para la llamada agendada (o cuánto hace que se venció) ===== */
.citabox{border:1px solid #0e7490;border-left:4px solid #06B6D4;border-radius:11px;padding:9px 11px;
  /* El SCROLL es de TODA la sección (pedido del asesor, 22/10/2026): así se baja de una sola vez el
     historial completo sin dejar la ficha larga. */
  max-height:320px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  margin-bottom:11px;background:#082230}
.citabox.vencida{border-color:#7f1d1d;border-left-color:#ef4444;background:#2a0f14}
.citabox b{font-size:11.8px;display:block;margin-bottom:3px;color:#e8eefc}
.citabox .w{font-size:11px;color:#b9cbe6;line-height:1.45}
.citabox .w.grand{font-size:15px;color:#e8eefc;margin:2px 0 4px}
.citabox .w.grand b{display:inline;font-size:15px;color:#67e8f9}
.citabox.vencida .w.grand b{color:#ffb3c1}

/* ===== Columna «📞 Llamada agendada»: es una LISTA por vencimiento, no una etapa ===== */
.col.agenda{background:rgba(6,182,212,.05);border:1px dashed #0e7490;border-radius:12px}
.col.agenda .col-head{background:rgba(6,182,212,.10)}
.col.agenda .card{cursor:pointer}
.col.agenda .inbox-tag{background:rgba(148,163,184,.18);border:1px solid #334155;color:#cbd5e1;
  border-radius:20px;padding:1px 8px;font-size:10.5px}
.schip.ag{border-style:dashed}
.schip.ag::after{content:'lista';font-size:8.5px;opacity:.7;margin-left:5px;text-transform:uppercase;letter-spacing:.4px}

/* ===================== 🤖 AGENTES DE WHATSAPP (2/10/2026) =====================
   Sección nueva: por campaña, el prompt del agente, su conocimiento, sus
   habilidades, flujos y seguimientos. Campos de escritura con contraste alto
   (letra clara y en negrita), como pidió el asesor. */
.ag-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 6px}
.ag-tab{font:inherit;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:9px;cursor:pointer;
  background:#132038;border:1px solid #2b4a72;color:#cfe2ff}
.ag-tab:hover{background:#1a2c4a}
.ag-tab.on{background:linear-gradient(#33a0ff,#0b5ecb);border-color:#bfdbfe;color:#fff;
  box-shadow:0 0 0 2px rgba(147,197,253,.5)}
.ag-cnt{display:inline-block;min-width:16px;text-align:center;background:rgba(255,255,255,.16);border-radius:8px;
  font-size:10px;padding:0 5px;margin-left:4px}
.ag-on{color:#8be0b0;font-weight:800;font-size:10.5px;margin-left:6px}
.ag-off{color:#9fb3cc;font-size:10.5px;margin-left:6px}
.ag-wrap{display:flex;gap:14px;align-items:flex-start}
.ag-lado{width:250px;flex:0 0 250px;max-height:62vh;overflow:auto;padding-right:4px}
.ag-main{flex:1;min-width:0;max-height:62vh;overflow:auto;padding-right:4px}
.ag-item{background:#101c30;border:1px solid #24395b;border-radius:10px;padding:8px 10px;margin-bottom:7px;cursor:pointer}
.ag-item:hover{background:#16253d}
.ag-item.on{border-color:#33a0ff;box-shadow:0 0 0 2px rgba(51,160,255,.35)}
.ag-item .w{color:#9fb3cc;font-size:11px;line-height:1.35;margin-top:2px}
.ag-head{background:#101c30;border:1px solid #24395b;border-radius:10px;padding:9px 11px;margin-bottom:8px}
.ag-tabs2{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 8px}
.ag-sub{font:inherit;font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:8px;cursor:pointer;
  background:#16253d;border:1px solid #2b4a72;color:#cfe2ff}
.ag-sub.on{background:linear-gradient(#33a0ff,#0b5ecb);border-color:#bfdbfe;color:#fff}
.ag-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.ag-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.4px;color:#8fb4e0;margin:10px 0 4px;
  text-transform:uppercase}
.ag-area,input[type=text]{width:100%;box-sizing:border-box;background:#0b1626;border:1px solid #2b4a72;
  border-radius:9px;color:#eaf3ff;font:inherit;font-size:13px;font-weight:600;padding:8px 10px;line-height:1.5}
.ag-area{resize:vertical;min-height:70px;white-space:pre-wrap}
.ag-area:focus,input[type=text]:focus{outline:none;border-color:#33a0ff;box-shadow:0 0 0 2px rgba(51,160,255,.35)}
.ag-check{display:block;font-size:12px;color:#cfe2ff;margin-top:10px;line-height:1.45}
.ag-check input{margin-right:7px}
.ag-row{background:#101c30;border:1px solid #24395b;border-radius:9px;padding:8px 10px;margin-bottom:7px}
.ag-row .w{color:#9fb3cc;font-size:11.5px;line-height:1.4}
.ag-preview{margin-top:12px}
.ag-pre{background:#0b1626;border:1px solid #2b4a72;border-radius:9px;padding:10px;color:#dbeafe;font-size:12px;
  white-space:pre-wrap;max-height:280px;overflow:auto;line-height:1.5}

/* ── MODO PRUEBAS / PRODUCCIÓN (2/10/2026): que se vea de una ─────────────── */
.ag-modo{border-radius:10px;padding:10px 12px;margin-bottom:12px;line-height:1.5;font-size:12.5px}
.ag-modo.prue{background:#1a1406;border:2px solid #f0b429}
.ag-modo.prod{background:#0b2016;border:2px solid #16a34a}
.ag-modo b{display:block;font-size:13.5px;letter-spacing:.4px}
.ag-modo.prue b{color:#ffd166}
.ag-modo.prod b{color:#4ade80}
.ag-modo .w{color:#e7eefb}
.ag-prue-b,.ag-prod-b{display:inline-block;font-size:10.5px;font-weight:800;border-radius:20px;padding:2px 8px;margin-left:5px;letter-spacing:.3px}
.ag-prue-b{background:#f0b429;color:#3a2a00}
.ag-prod-b{background:#16a34a;color:#04220f}
.ag-tipo{display:inline-block;font-size:10px;font-weight:800;background:#20344f;color:#9fc7ff;border-radius:20px;padding:1px 7px}
.ag-lado select,.ag-main select{width:100%;box-sizing:border-box;background:#0b1626;border:1px solid #2b4a72;
  border-radius:9px;color:#eaf3ff;font:inherit;font-size:13px;font-weight:600;padding:8px 10px}

/* ═══════════ VENTANA DE AGENTES — rediseño 2/10/2026 ═══════════════════════
   Ventana grande en tres zonas (barra superior, lista de agentes, secciones)
   para que nada quede amontonado ni tape nada. Cada tema va en su tarjeta
   desplegable. Letra clara y en negrita en todo lo que se escribe. */
/* ⚠️ UN SOLO SCROLL: lo maneja la propia ventana (.agv), no los paneles de adentro.
   Con scrollers anidados el navegador atrapa la rueda y no se llega al final
   (reclamo del asesor, 2/10/2026). La barra de arriba queda fija con sticky. */
.agv{position:fixed;inset:0;z-index:470;display:none;padding:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:rgba(3,7,14,.86);backdrop-filter:blur(5px)}
.agv.on{display:block}
.agv-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:14px 14px 0;padding:10px 14px;
  background:linear-gradient(#16283f,#0d1b2e);border:1px solid #2b4a72;border-radius:14px 14px 0 0}
.agv-brand{display:flex;gap:10px;align-items:center;min-width:250px}
.agv-logo{font-size:23px;line-height:1}
.agv-brand-t b{display:block;font-size:15.5px;color:#eaf3ff;letter-spacing:.2px}
.agv-brand-t i{font-style:normal;font-size:11.5px;color:#93a9c6}
.agvt-chips{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.agvt-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 11px;border-radius:11px;
  cursor:pointer;background:#132038;border:1px solid #2b4a72;color:#cfe2ff;font:inherit}
.agvt-chip:hover{background:#1a2c4a}
.agvt-chip.on{background:linear-gradient(#33a0ff,#0b5ecb);border-color:#bfdbfe;color:#fff;
  box-shadow:0 0 0 2px rgba(147,197,253,.5)}
.agvt-n{font-size:12.5px;font-weight:800;white-space:nowrap}
.agvt-s{font-size:10px;opacity:.95}
.agv-topb{display:flex;gap:8px;align-items:center}
.agv-btn{font:inherit;font-size:12px;font-weight:800;padding:7px 12px;border-radius:10px;cursor:pointer;
  background:#1b2c46;border:1px solid #33507a;color:#dbeafe;white-space:nowrap}
.agv-btn:hover{background:#23395a}
.agv-btn.go{background:linear-gradient(#22c55e,#15803d);border-color:#86efac;color:#fff}
.agv-btn.danger{background:linear-gradient(#f59e0b,#b45309);border-color:#fcd34d;color:#241400}
.agv-btn.ghost{background:transparent;border-color:#33507a;color:#9fb3cc}
.agv-btn.x{background:transparent;border-color:#33507a;color:#cbd5e1;font-size:14px;padding:6px 11px}
.agv-btn.mini{font-size:10.5px;padding:3px 9px;border-radius:8px}
.agv-body{display:flex;align-items:flex-start;margin:0 14px 14px;background:#0a1521;
  border:1px solid #2b4a72;border-top:none;border-radius:0 0 14px 14px;min-height:calc(100vh - 132px)}
.agv-lado{width:282px;flex:0 0 282px;border-right:1px solid #1e3350;padding:12px;background:#0c1a2b}
.agv-new{width:100%;font:inherit;font-size:12.5px;font-weight:800;padding:10px;border-radius:11px;cursor:pointer;
  background:linear-gradient(#22c55e,#15803d);border:1px solid #86efac;color:#fff}
.agv-sec{font-size:10.5px;font-weight:800;letter-spacing:.5px;color:#8fb4e0;margin:13px 0 7px}
.agv-note{margin-top:13px;font-size:11px;color:#93a9c6;line-height:1.5;border-top:1px solid #1e3350;padding-top:9px}
.agv-note b{color:#cfe2ff}
.agv-lista{display:flex;flex-direction:column;gap:7px}
.agvi{border-left:3px solid transparent}
.agvi.on{border-left-color:#33a0ff;background:#16253d;border-color:#33a0ff}
.agvi-r1{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.agvi-r1 b{font-size:12.5px;color:#eaf3ff}
.agvi-live{font-size:9.5px;font-weight:800;background:#16a34a;color:#04220f;border-radius:20px;padding:1px 7px;letter-spacing:.3px}
.agvi-r2{display:flex;gap:6px;align-items:center;margin:4px 0 3px;flex-wrap:wrap}
.agvi-r3{font-size:11.5px;color:#a9bdd6;line-height:1.45}
.agvi-r4{font-size:10.5px;color:#7f97b5;margin-top:3px}
.agv-main{flex:1;min-width:0;padding:13px 15px;padding-bottom:26px}
.agv-empty-l{color:#93a9c6;font-size:12px;padding:7px 0}
.agv-vacio{text-align:center;padding:70px 20px;color:#93a9c6}
.agv-vacio-i{font-size:46px;margin-bottom:10px}
.agv-vacio b{display:block;font-size:17px;color:#eaf3ff;margin-bottom:4px}
.agv-vacio span{font-size:12.5px}
.agv-vacio-w{max-width:540px;margin:14px auto 0;font-size:12.5px;line-height:1.6;
  border:1px dashed #2b4a72;border-radius:12px;padding:12px}
/* franja de estado (pruebas / producción): lo primero que se ve */
.agv-estado{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;
  border-radius:12px;padding:12px 15px;margin-bottom:11px}
.agv-estado.prue{background:#1a1406;border:2px solid #f0b429}
.agv-estado.prod{background:#0b2016;border:2px solid #16a34a}
.agv-estado-1{flex:1;min-width:280px;line-height:1.5}
.agv-estado-1 b{display:block;font-size:14px;letter-spacing:.5px;margin-bottom:3px}
.agv-estado.prue .agv-estado-1 b{color:#ffd166}
.agv-estado.prod .agv-estado-1 b{color:#4ade80}
.agv-estado-1 span{font-size:12.5px;color:#e7eefb}
.agv-estado-2{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.agv-estado-n{font-size:10.5px;font-weight:800;letter-spacing:.4px;color:#e7eefb}
.agv-estado-n input{margin-top:4px;min-width:170px}
.agv-estado-b{display:flex;gap:8px;flex-wrap:wrap}
/* acciones del agente */
.agv-acciones{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding:9px 13px;background:#0e1c30;border:1px solid #24395b;border-radius:12px;margin-bottom:12px}
.agv-acciones-1 b{display:block;font-size:14.5px;color:#eaf3ff}
.agv-acciones-1 span{font-size:11px;color:#93a9c6}
.agv-acciones-2{display:flex;gap:8px;flex-wrap:wrap}
/* menú de secciones + contenido */
.agv-cols{display:flex;gap:14px;align-items:flex-start}
.agv-nav{width:214px;flex:0 0 214px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0}
.agvn{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:8px 10px;border-radius:11px;
  cursor:pointer;background:#101c30;border:1px solid #24395b;color:#cfe2ff;font:inherit}
.agvn:hover{background:#16253d}
.agvn.on{background:linear-gradient(#33a0ff,#0b5ecb);border-color:#bfdbfe;color:#fff;
  box-shadow:0 0 0 2px rgba(147,197,253,.4)}
.agvn-i{font-size:15px;line-height:1.2}
.agvn-t b{display:block;font-size:12.5px}
.agvn-t i{font-style:normal;font-size:10.5px;opacity:.85;display:block;line-height:1.3}
.agv-cont{flex:1;min-width:0}
.agv-cont-h{padding:0 2px 9px;border-bottom:1px solid #1e3350;margin-bottom:11px}
.agv-cont-h b{display:block;font-size:15px;color:#eaf3ff}
.agv-cont-h span{font-size:11.5px;color:#93a9c6}
/* tarjeta desplegable: cada tema en su cajita */
.agv-card{background:#0e1c30;border:1px solid #24395b;border-radius:12px;margin-bottom:9px;overflow:hidden}
.agv-card>summary{display:flex;gap:10px;align-items:center;padding:10px 13px;cursor:pointer;list-style:none;
  background:#122238}
.agv-card>summary::-webkit-details-marker{display:none}
.agv-card[open]>summary{border-bottom:1px solid #1e3350}
.agv-card-i{font-size:15px}
.agv-card>summary b{font-size:13px;color:#eaf3ff;white-space:nowrap}
.agv-card>summary i{font-style:normal;font-size:11px;color:#93a9c6;flex:1}
.agv-card-f{color:#7f97b5}
.agv-card-b{padding:11px 13px 13px;display:flex;flex-direction:column;gap:9px}
.agv-f{display:block}
.agv-f>span,.agv-lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.4px;color:#8fb4e0;margin-bottom:4px}
.agv-f>i{display:block;font-style:normal;font-size:10.5px;color:#7f97b5;margin-top:4px}
.agv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.agv-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.agv-check{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:#cfe2ff;padding:5px 0}
.agv-check input{margin-top:3px}
.agv-check span b{display:block;font-size:12.5px}
.agv-check span i{font-style:normal;font-size:11px;color:#93a9c6}
.agv-save{display:flex;gap:9px;flex-wrap:wrap;margin-top:5px;padding-top:11px;border-top:1px solid #1e3350}
.agv-alerta{margin-top:8px;background:#1a1406;border:1px solid #f0b429;border-radius:10px;padding:9px 11px;
  font-size:11.5px;color:#ffe9a8;line-height:1.45}
.agv-pre-h{font-size:11px;font-weight:800;color:#8fb4e0;margin-bottom:5px}
.agv-si{color:#8be0b0}
.agv-no{color:#fca5a5}
@media (max-width:1180px){.agv-cols{flex-direction:column}
  .agv-nav{width:100%;flex:auto;flex-direction:row;flex-wrap:wrap;position:static}
  .agvn{flex:1 1 150px}.agv-grid3{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.agv-body{flex-direction:column;min-height:0}
  .agv-lado{width:100%;flex:auto;border-right:none;border-bottom:1px solid #1e3350;
    position:static;max-height:none;overflow:visible}
  .agv-lista{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .agv-grid2,.agv-grid3{grid-template-columns:1fr}.agv-brand{min-width:0}
  .agv-main{width:100%}.agv-nav{position:static}}

/* Aviso flotante del envío masivo de plantillas en curso (modals.js → masivoVigilar).
   Queda visible aunque se cierre la ventana de progreso: el trabajo sigue en el servidor. */
.masivo-chip{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;gap:9px;align-items:center;
  background:#12212b;border:1px solid #2b7fd4;color:#dfe9f3;border-radius:12px;padding:10px 14px;
  font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.5);cursor:pointer;max-width:min(92vw,560px)}
.masivo-chip b{color:#7fd4ff}
.masivo-chip:hover{border-color:#7fd4ff}

/* Chips del menú del agente: cómo queda el menú que ve el cliente (vista previa, sin enviar). */
.agv-op-chip{display:inline-block;margin:6px 6px 0 0;padding:7px 14px;border-radius:16px;
  background:#16283d;color:#dbe7f6;border:1px solid #2f4a68;font-size:13px}

/* ===== USUARIOS DEL CRM (ventana 👤, solo administrador) — 2/10/2026 ===== */
#usv .agv-body{padding:14px 16px 40px}
.us-cols{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
.us-panel{background:#0f1b2d;border:1px solid #1e3350;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.us-panel h4{margin:0 0 4px;font-size:14px;color:#eaf3ff}
.us-panel input,.us-panel select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #24405f;background:#0b1524;color:#eaf3ff;font-size:13px}
.us-wa{display:flex;gap:6px}
.us-wa select{max-width:120px}
.us-hint{font-size:11.5px;color:#8fa6c4;line-height:1.4}
.us-crear{margin-top:4px}
.us-msg{font-size:12.5px;line-height:1.45;min-height:16px}
.us-msg.us-ok{color:#7ee0a6}
.us-msg.us-err,.us-err{color:#ff9db0}
.us-tabla{background:#0f1b2d;border:1px solid #1e3350;border-radius:12px;padding:12px 14px}
.us-tabla table{width:100%;border-collapse:collapse}
.us-tabla th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:#8fa6c4;padding:6px 8px;border-bottom:1px solid #1e3350}
.us-tabla td{padding:8px;border-bottom:1px solid #16263c;font-size:13px;color:#dbe8f7;vertical-align:top}
.us-sub{font-size:11.5px;color:#8fa6c4}
.us-ext{font-weight:700;color:#ffd479}
.us-rol{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid #2a4a6a}
.us-rol.us-admin{background:#243a5c;color:#cfe3ff;border-color:#34557f}
.us-rol.us-coordinador{background:#2c2a52;color:#d9d4ff;border-color:#4a4590}
.us-rol.us-asesor{background:#123a2c;color:#bff0d8;border-color:#256b50}
.us-on{color:#7ee0a6;font-size:12px}
.us-off{color:#ff9db0;font-size:12px}
.us-mini{padding:3px 9px;font-size:11.5px}

/* ===== VENTANA EMERGENTE PARA EDITAR UN USUARIO (pedido del asesor, 2/10/2026) =====
   Antes el «Editar» abría cuadros del navegador (prompt), uno por uno. Ahora es una sola ventana, con
   tipografía de interfaz, campos agrupados y un resumen de cómo va a quedar antes de guardar. */
.usev{position:fixed;inset:0;z-index:480;display:flex;align-items:center;justify-content:center;
  background:rgba(3,9,16,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s ease;padding:18px}
.usev.on{opacity:1}
.usev-panel{width:min(660px,96vw);max-height:92vh;overflow:auto;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#11202f 0%,#0d1825 100%);
  border:1px solid #1e3448;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.55);padding:18px 20px 16px}
.usev-top{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #1a2f42}
.usev-avatar{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px;color:#04121f;background:linear-gradient(140deg,#5cc8ff,#2f80ed)}
.usev-cabeza{flex:1;min-width:0}
.usev-titulo{font-size:17px;font-weight:700;color:#eaf3fb;letter-spacing:.2px}
.usev-sub{font-size:12.5px;color:#8fa9c2;margin-top:2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.usev-x{margin-left:auto;background:transparent;border:1px solid #24405a;color:#9db6cd;border-radius:10px;
  width:32px;height:32px;cursor:pointer;font-size:14px;line-height:1}
.usev-x:hover{background:#17304a;color:#eaf3fb}
.usev-campo{margin-bottom:12px}
.usev-campo > label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:#7d97b1;font-weight:700;margin-bottom:5px}
.usev-solo{text-transform:none;letter-spacing:0;font-weight:600;color:#5f7a95}
.usev-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.usev-grid{grid-template-columns:1fr}}
.usev input[type=text],.usev input[type=email],.usev input[type=password],.usev input:not([type]),.usev select{
  width:100%;background:#0a1421;border:1px solid #22394f;color:#eaf3fb;border-radius:10px;
  padding:9px 11px;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.usev input:focus,.usev select:focus{border-color:#2f80ed;box-shadow:0 0 0 3px rgba(47,128,237,.18)}
.usev select[multiple]{height:auto;padding:6px}
.usev select[multiple] option{padding:5px 7px;border-radius:7px}
.usev select[multiple] option:checked{background:#1d4b7a;color:#fff}
.usev-fijo{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.035);
  border:1px dashed #2b4761;border-radius:10px;padding:9px 12px}
.usev-fijo span{font-weight:700;color:#cfe2f3;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.usev-fijo em{margin-left:auto;font-style:normal;font-size:11.5px;color:#7d97b1}
.usev-wa2{display:grid;grid-template-columns:118px 1fr;gap:8px}
.usev-hint{font-size:11.5px;color:#7d97b1;margin-top:6px;line-height:1.45}
.usev-activo{display:flex;align-items:center;gap:9px;background:#0d1f2e;border:1px solid #1d3448;border-radius:11px;
  padding:10px 12px;font-size:13px;color:#cfe2f3;cursor:pointer;margin:4px 0 12px}
.usev-activo input{width:16px;height:16px;accent-color:#2f80ed}
.usev-resumen{background:linear-gradient(180deg,#0d2438,#0b1e2f);border:1px solid #1d3a57;border-radius:12px;
  padding:11px 13px;font-size:13px;color:#cfe2f3;line-height:1.6}
.usev-resumen-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#6f96bb;font-weight:700;margin-bottom:5px}
.usev-resumen b{color:#fff}
.usev-pie{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid #1a2f42}
.usev-msg{flex:1;font-size:12.5px;color:#8fa9c2}
.usev-err{color:#ff8f8f}
.usev-guardar{background:linear-gradient(180deg,#22a35c,#17864a);border-color:#17864a;color:#fff;font-weight:700}
.usev-guardar:hover{background:linear-gradient(180deg,#27b768,#1a9553)}

/* ===== LLAMADA VENCIDA: el MISMO modelo de MUY VENTA, pero en ROJO =====
   El asesor lo pidió así el 2/10/2026: «igual el mismo modelo de las que están en muy venta que están en
   verde, pero en este caso color rojo… toda la tarjeta con la culebrita roja alrededor y pulsante», y en
   vez de la llamita 🔥 un TELÉFONO TIMBRANDO (la insignia 📞 vibra como si estuviera sonando).
   Igual que la verde: la culebrita da vueltas por el borde (conic-gradient enmascarado) y el fondo late
   suave y lento. Vale para Movistar y ETB: cualquier tarjeta con la llamada agendada ya vencida. */
@property --vc{ syntax:'<angle>'; initial-value:0deg; inherits:false }
.card.vencida{ animation:vcLatido 4.5s ease-in-out infinite, vcFondo 9s ease-in-out infinite; border-color:#e8455c }
/* El fondo PRENDE Y APAGA y SE NOTA, pero despacio (lo pidió el asesor el 2/10/2026: «más pulsante, que
   prenda y apague, que se vea mejor… pero no tan rápido»). Vaivén de 9 segundos entre el azul de la
   tarjeta y un rojo vino bien visible: se ve el pulso a simple vista, sin sobresaltar. */
@keyframes vcFondo{
  0%,100%{ background-image:linear-gradient(180deg,#1a2c4a,#152540) }
  50%    { background-image:linear-gradient(180deg,#5a1d2b,#38121c) }}
.card.vencida::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; padding:3px;
  background:conic-gradient(from var(--vc),
      rgba(239,68,68,0) 0deg, rgba(239,68,68,0) 190deg, rgba(239,68,68,.9) 275deg,
      #ffe1e4 330deg, #ff2d46 350deg, rgba(239,68,68,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; animation:vcGira 3.4s linear infinite; will-change:transform}
@keyframes vcGira{ to{ --vc:360deg } }
@keyframes vcLatido{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,45,70,.22), 0 0 9px 0 rgba(255,45,70,.14) }
  50%    { box-shadow:0 0 0 6px rgba(255,45,70,0), 0 0 18px 3px rgba(255,45,70,.42) }}
/* 📞 El teléfono timbrando: vibra como si estuviera sonando. Va en la esquina de la tarjeta
   (.card .esquinas): antes asomaba por fuera del borde y el content-visibility lo recortaba. */
.card .badge-vencida{ font-size:20px; line-height:1; display:inline-block;
  filter:drop-shadow(0 0 6px rgba(255,45,70,.95)) drop-shadow(0 0 12px rgba(255,45,70,.6));
  animation:vibra 1s ease-in-out infinite; transform-origin:50% 60% }
@keyframes vibra{
  0%,100%{ transform:rotate(-14deg) scale(1) }
  20%    { transform:rotate(12deg) scale(1.1) }
  40%    { transform:rotate(-10deg) scale(1.02) }
  60%    { transform:rotate(14deg) scale(1.1) }
  80%    { transform:rotate(-8deg) scale(1) }}

/* 🎯 SITUACIONES DEL CLIENTE (Fase 2, 10/10/2026): detalle de cada campo leído por el agente. */
.agv-sit-campo{display:block;margin:7px 0}
.agv-sit-campo>span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#8fb0e8;margin-bottom:2px}
.agv-sit-campo>div{font-size:11.5px;color:#cfe0ff;white-space:pre-wrap}

/* Origen del cliente (Facebook, Instagram, TikTok, llamada, WhatsApp…) en todas las tarjetas */
.tag.origen{background:#122033;border:1px solid #24406a;color:#bcd6ff}

/* ➕ Agregar cliente: ventana limpia y moderna (22/10/2026) */
.ac{width:min(680px,94vw)}
.ac-head{display:flex;gap:14px;align-items:center;padding:2px 0 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.ac-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:21px;flex:0 0 auto;
  background:linear-gradient(145deg,#1d4ed8,#0ea5e9);box-shadow:0 8px 22px rgba(14,165,233,.32)}
.ac-titles h3{margin:0;font-size:20px;letter-spacing:-.01em}
.ac-titles p{margin:3px 0 0;font-size:12px;color:#93a7c4}
.ac-body{padding:18px 0 4px;display:flex;flex-direction:column;gap:16px}
.ac-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ac-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.ac-lbl{font-size:12px;font-weight:700;color:#c7d7ef;letter-spacing:.02em}
.ac-req{font-size:9.5px;font-weight:800;color:#fbbf24;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.32);
  border-radius:999px;padding:1px 7px;margin-left:6px;text-transform:uppercase;letter-spacing:.05em}
.ac .ac-field input[type=text],.ac .ac-field select{width:100%;box-sizing:border-box;background:#17263f;color:#eef4ff;
  border:1px solid #2b3d59;border-radius:11px;padding:11px 12px;font-size:14px;font-weight:600;transition:border-color .18s,box-shadow .18s}
.ac .ac-field input[type=text]:focus,.ac .ac-field select:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.ac .ac-field input::placeholder{color:#7f93ad}
.ac-telwrap{display:flex;align-items:center;border-radius:14px;overflow:hidden;background:#f7faff;
  border:2px solid #8fb4ee;box-shadow:0 0 0 4px rgba(59,130,246,.12);transition:box-shadow .18s,border-color .18s}
.ac-telwrap:focus-within{border-color:#2563eb;box-shadow:0 0 0 5px rgba(37,99,235,.22)}
.ac-prefix{font-weight:800;color:#0b1a2e;background:#e6efff;padding:14px 12px;font-size:16px;border-right:1px solid #cddff8}
.ac .ac-telwrap input[type=text]{flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;
  color:#050b14!important;font-weight:800!important;font-size:19px!important;letter-spacing:.06em;padding:14px!important;box-shadow:none!important}
.ac .ac-telwrap input::placeholder{color:#7d8ea6!important;font-weight:600!important;letter-spacing:.02em}
.ac-live{font-size:12.5px;color:#8ea3bf}
.ac-live.ok{color:#5eead4}
.ac-live.warn{color:#fbbf24}
.ac-more{border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02);padding:0 14px}
.ac-more summary{cursor:pointer;padding:12px 0;font-size:13px;font-weight:700;color:#bcd0ea;list-style:none}
.ac-more summary::-webkit-details-marker{display:none}
.ac-more summary::before{content:'▸';display:inline-block;margin-right:8px;color:#60a5fa;transition:transform .18s}
.ac-more[open] summary::before{transform:rotate(90deg)}
.ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 0 14px}
.ac-full{grid-column:1/-1}
.ac-foot{display:flex;gap:10px;align-items:center;padding-top:16px;margin-top:6px;border-top:1px solid rgba(255,255,255,.07)}
.ac-msg{font-size:12.5px;color:#93a7c4;margin-right:auto}
.ac-msg.bad{color:#fca5a5}
.ac-save{background:linear-gradient(145deg,#2563eb,#0ea5e9)!important;border:0!important;padding:11px 20px!important;
  border-radius:12px!important;font-weight:800;box-shadow:0 8px 20px rgba(37,99,235,.35);transition:filter .18s,transform .18s}
.ac-save:hover{filter:brightness(1.08)}
.ac-save:active{transform:translateY(1px)}
@media (max-width:560px){.ac-row2,.ac-grid{grid-template-columns:1fr}}

/* Elegir asesor desde la tarjeta (22/10/2026) */
.as-lista{display:flex;flex-direction:column;gap:7px;margin-top:12px;max-height:50vh;overflow:auto}
.as-pick{justify-content:space-between;text-align:left;width:100%;padding:11px 13px}
.as-pick small{color:#8ea3bf;font-size:11px}
.as-pick:hover{border-color:#3b82f6;background:rgba(59,130,246,.12)}
.tag.asesor{cursor:pointer}
.tag.asesor:hover{filter:brightness(1.2)}

/* Bloque opcional de envío en «Agregar cliente» (22/10/2026) */
.ac-envio{margin-top:14px;padding:14px;border:1px dashed rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.03)}
.ac-op{font-size:9.5px;font-weight:800;color:#8fb4ee;background:rgba(143,180,238,.12);border:1px solid rgba(143,180,238,.3);
  border-radius:999px;padding:1px 7px;margin-left:6px;text-transform:uppercase;letter-spacing:.05em}
.ac-more[open] summary{margin-bottom:6px}

/* Observación con grabación de voz en «Agregar cliente» (22/10/2026) */
.ac-obswrap{display:flex;gap:8px;align-items:stretch}
.ac-obswrap input[type=text]{flex:1;min-width:0}
.ac-grabar{white-space:nowrap;padding:11px 14px;border-radius:11px;border:1px solid rgba(251,191,36,.45);
  background:rgba(251,191,36,.1);color:#fbbf24;font-weight:700;font-size:12px}
.ac-grabar.on{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.5);color:#fca5a5}
@media (max-width:560px){.ac-obswrap{flex-direction:column}}

/* Elegir asesor: quién lo tiene ahora y «Asignármelo» (22/10/2026) */
.as-pick.actual{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.08)}
.as-ahora{font-size:9.5px;font-weight:800;color:#4ade80;background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.35);
  border-radius:999px;padding:1px 7px;margin-left:6px;text-transform:uppercase;letter-spacing:.04em}
.asesor-top{cursor:pointer}
.asesor-top:hover{filter:brightness(1.2);text-decoration:underline dotted}

/* Ventana «Nota privada» (22/10/2026): tipificar → escribir o grabar → guardar */
.np-sec{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#8b98ad);margin:14px 0 7px}
.np-tipos{display:flex;flex-wrap:wrap;gap:7px}
.np-tipo{padding:8px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.np-tipo:hover{border-color:rgba(251,191,36,.45);color:#fbbf24}
.np-tipo.on{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.55);color:#fbbf24}
#np-txt{width:100%;min-height:92px;margin-top:4px;padding:11px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);color:inherit;font:inherit;resize:vertical}
.np-fila{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.nv-tit{font-size:12px;color:var(--muted,#8b98ad);margin-bottom:6px}

.nota-tipo{color:#fbbf24;font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}

/* Botones de la cita agendada: «No contestó cita» va PRIMERO (22/10/2026) */
.cita-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.cita-btns .no-contesta{border-color:rgba(244,114,182,.5);background:rgba(244,114,182,.12);color:#f9a8d4;font-weight:700}
.cita-btns .no-contesta:hover{background:rgba(244,114,182,.2)}

/* Historial de citas: letra muy pequeña, debajo de los botones, sin ocupar espacio (22/10/2026) */
.hcit-hueco:empty{display:none}
.hcit{margin-top:7px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.10);font-size:10px;line-height:1.45;color:#8394ab}
.hcit-t{font-size:10px;font-weight:800;color:#a8b8cc;letter-spacing:.02em;margin-bottom:3px}
.hcit-lista{padding-right:2px}   /* lo que se baja es la sección entera, no esta lista */
.citabox::-webkit-scrollbar{width:6px}
.citabox::-webkit-scrollbar-thumb{background:rgba(103,232,249,.28);border-radius:3px}
.citabox::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
.hcit-n{float:right;font-weight:600;color:#6b7c93;font-size:9px}
.hcit-l{display:grid;grid-template-columns:12px 1fr auto;gap:4px;align-items:baseline;white-space:nowrap;overflow:hidden}
.hcit-l i{font-style:normal;font-size:9px;opacity:.9}
.hcit-l .a{overflow:hidden;text-overflow:ellipsis;color:#9fb0c6}
.hcit-l .a b{color:#cfe0ff;font-weight:700}
.hcit-l .f{color:#6b7c93;font-variant-numeric:tabular-nums}
.hcit-mas{font-size:9.5px;color:#6b7c93;margin-top:2px}

/* 🎉 VENTA CALIFICADA (22/10/2026) — pedido del asesor: AZUL PURO #0000ff.
   · FONDO azul #0000ff LISO (sin degradé): se prende y se apaga despacio.
   · BORDE: la «culebrita» azul pulsante dando la vuelta alrededor, siempre.
   Sin recortes: la tarjeta se mide como todas. */
@property --vz{ syntax:'<angle>'; initial-value:0deg; inherits:false }
.card.venta{
  border-color:#4d4dff;
  isolation:isolate; flex:0 0 auto;
  content-visibility:visible; contain-intrinsic-size:none;
  background:#0000ff;                       /* azul puro, liso, sin degradé */
  animation:vPrende 7s ease-in-out infinite;
  box-shadow:0 6px 24px rgba(0,0,255,.35);
}
/* El fondo se enciende y se apaga LENTO: #0000ff ↔ un azul más profundo (los dos lisos). */
@keyframes vPrende{
  0%  { background-color:#0000ff }
  50% { background-color:#00006b }
  100%{ background-color:#0000ff }}
/* LA CULEBRITA: un tramo de luz azul que da la vuelta alrededor y pulsa. */
.card.venta::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; padding:3.5px;
  background:conic-gradient(from var(--vz),
      rgba(0,0,255,0) 0deg, rgba(0,0,255,0) 170deg, rgba(77,77,255,.6) 240deg,
      #6b6bff 292deg, #ffffff 330deg, #0000ff 348deg, rgba(0,0,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:vGira 2.4s linear infinite, vPulso 2.4s ease-in-out infinite;
  will-change:transform,opacity; filter:drop-shadow(0 0 6px rgba(77,77,255,.85));
}
@keyframes vGira{ to{ --vz:360deg } }
@keyframes vPulso{ 0%,100%{ opacity:.72 } 50%{ opacity:1 } }
/* Texto legible sobre el azul puro */
.card.venta .nm{ color:#ffffff; text-shadow:0 1px 2px rgba(0,0,30,.55) }
.card.venta .celbig, .card.venta .meta, .card.venta .inbox-tag{ color:#eaf1ff }
.card.venta .inbox-tag{ background:rgba(0,0,40,.35); border-color:rgba(255,255,255,.35) }
/* La fiesta flota y brilla */
.card .badge-venta{ font-size:22px; line-height:1; display:inline-block; z-index:3;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.9)) drop-shadow(0 0 14px rgba(77,77,255,.9));
  animation:vFiesta 3.6s ease-in-out infinite }
@keyframes vFiesta{
  0%,100%{ transform:translateY(0) scale(1) }
  50%    { transform:translateY(-3px) scale(1.14) }}
.modobox.vt{border-color:#2a2a94;background:linear-gradient(90deg,#0b0b46,#0d0d4f)}
.modobox.vt.on{box-shadow:0 0 0 1px rgba(77,77,255,.6), 0 0 16px rgba(0,0,255,.4)}
@media (prefers-reduced-motion: reduce){
  .card.venta, .card.venta::after, .card .badge-venta{ animation:none }
}
}

/* 🔴 «N sin leer» en la cabecera de la conversación (22/10/2026) */
.un-read-hd{background:#ef4444;color:#fff;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:800;
  animation:pulse 1.25s infinite;box-shadow:0 0 10px rgba(239,68,68,.65)}

/* 🔴 Sin leer en los botones de etapa (22/10/2026): burbuja antes del número, sin taparlo */
.schip-un{background:var(--bad);color:#fff;border-radius:999px;min-width:17px;height:17px;padding:0 4px;
  display:inline-grid;place-items:center;font-size:9.5px;font-weight:900;font-style:normal;letter-spacing:-.02em;
  animation:pulse 1.3s infinite;box-shadow:0 0 9px rgba(239,68,68,.8), 0 0 0 1.5px rgba(11,18,32,.5)}
.schip.on .schip-un{box-shadow:0 0 9px rgba(255,255,255,.5)}