/* ═══════════════════════════════════════════════════════════════
   SMART NOVA — MÓDULO WHATSAPP BUSINESS
   Centro de conversaciones conectado al ERP: cada chat lleva al lado
   la cotización, la cartera y el historial del cliente.
   Lienzo 2560×1440. El marco y el escalado los aporta .lienzo.

     01 Estructura      04 Chat
     02 Header          05 Perfil del cliente
     03 Conversaciones  06 Flujo de automatización
   ═══════════════════════════════════════════════════════════════ */

.snw{
  background:#06080c;
  --cyan:#00c8e0; --blue:#4d9bff; --violet:#a78bfa;
  --green:#22c55e; --orange:#fb923c; --red:#f87171;
  --panel:#0b0f16; --card:#111827;
  --line:rgba(255,255,255,.08);
  --t1:#eaf2ff; --t2:#8ea3bf; --t3:#6f83a0;
}
.snw-canvas{
  width:2560px;height:1440px;display:flex;
  font-family:"Inter",system-ui,sans-serif;color:var(--t1);background:#06080c;
}
.snw-mono{font-family:"JetBrains Mono",ui-monospace,monospace;}

/* ─────────── 01 · ESTRUCTURA ─────────── */
.snw-main{flex:1;min-width:0;padding:44px 48px;display:flex;flex-direction:column;gap:32px;}
.snw-body{display:grid;grid-template-columns:388px 1fr 452px;gap:24px;height:1002px;}
.snw-col{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.35);
}

/* ─────────── 02 · HEADER ─────────── */
.snw-head{display:flex;align-items:flex-start;justify-content:space-between;flex:none;}
.snw-title{display:flex;align-items:center;gap:14px;}
.snw-title h1{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.snw-conn{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#7ee7a4;
  padding:6px 14px;border-radius:999px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.28);
}
.snw-conn i{width:7px;height:7px;border-radius:50%;background:var(--green);display:block;animation:snwPulse 2.4s infinite;}
@keyframes snwPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.snw-sub{font-size:14px;color:var(--t3);margin-top:9px;}
.snw-actions{display:flex;align-items:center;gap:10px;}
.snw-ctl{
  height:42px;padding:0 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;gap:9px;font-size:13px;color:var(--t2);font-weight:500;
}
.snw-ctl.icon{width:42px;padding:0;justify-content:center;position:relative;}
.snw-dot-o{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;
  background:var(--orange);border:2px solid var(--card);}
.snw-cta{
  height:42px;padding:0 22px;border-radius:12px;display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;color:#04121a;
  background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 10px 26px rgba(0,140,220,.35);
}

/* ─────────── 03 · LISTA DE CONVERSACIONES ─────────── */
.snw-list-h{padding:22px 20px 16px;flex:none;border-bottom:1px solid var(--line);}
.snw-search{
  display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--t3);
}
.snw-filters{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap;}
.snw-filters span{
  font-size:11.5px;padding:6px 13px;border-radius:999px;color:var(--t2);
  background:var(--card);border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;
}
.snw-filters span.on{color:#04121a;font-weight:700;background:linear-gradient(135deg,var(--cyan),var(--blue));border-color:transparent;}
.snw-filters b{font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;background:var(--green);color:#04121a;}

.snw-list{flex:1;overflow:hidden;display:flex;flex-direction:column;}
.snw-list-t{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);
  padding:16px 20px 8px;display:flex;align-items:center;gap:7px;}
.snw-conv{display:flex;gap:12px;padding:12px 20px;border-left:3px solid transparent;position:relative;}
.snw-conv.on{background:rgba(0,200,224,.06);border-left-color:var(--cyan);}
.snw-av{width:44px;height:44px;border-radius:13px;flex:none;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;}
.snw-av s{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  border:2.5px solid var(--panel);background:var(--t3);}
.snw-av s.on{background:var(--green);}
.snw-conv-b{flex:1;min-width:0;}
.snw-conv-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.snw-conv-n{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.snw-conv-h{font-size:11px;color:var(--t3);flex:none;}
.snw-conv-e{font-size:11.5px;color:var(--t3);margin-top:1px;}
.snw-conv-m{font-size:12.5px;color:var(--t2);margin-top:5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:flex;align-items:center;gap:6px;}
.snw-conv-f{display:flex;align-items:center;gap:8px;margin-top:7px;}
.snw-tag{font-size:10px;font-weight:600;padding:3px 9px;border-radius:99px;}
.snw-tag.ventas{color:#8fc0ff;background:rgba(77,155,255,.13);}
.snw-tag.cobranza{color:#fdba74;background:rgba(251,146,60,.13);}
.snw-unread{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--green);
  color:#04121a;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}

/* ─────────── 04 · CHAT ─────────── */
.snw-chat-h{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line);flex:none;}
.snw-chat-n{font-size:16px;font-weight:700;}
.snw-chat-s{font-size:12px;color:var(--t3);margin-top:2px;display:flex;align-items:center;gap:7px;}
.snw-chat-s i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block;}
.snw-mayor{font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:99px;
  color:#8fc0ff;background:rgba(77,155,255,.13);border:1px solid rgba(77,155,255,.25);}
.snw-chat-ico{display:flex;gap:8px;margin-left:auto;}
.snw-chat-ico span{width:36px;height:36px;border-radius:11px;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;}

/* gap ajustado para que el indicador "escribiendo…" quepa entero:
   es el último elemento y el área no hace scroll */
.snw-msgs{flex:1;padding:20px 24px;display:flex;flex-direction:column;gap:11px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgba(0,200,224,.035),transparent 60%);}
.snw-sys{align-self:center;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--t2);
  padding:7px 15px;border-radius:999px;background:rgba(167,139,250,.10);border:1px solid rgba(167,139,250,.22);}
.snw-sys.auto{background:rgba(0,200,224,.08);border-color:rgba(0,200,224,.22);}
.snw-msg{max-width:62%;display:flex;flex-direction:column;gap:5px;}
.snw-msg.in{align-self:flex-start;}
.snw-msg.out{align-self:flex-end;align-items:flex-end;}
.snw-bub{padding:13px 16px;border-radius:16px;font-size:13.5px;line-height:1.5;}
.snw-msg.in  .snw-bub{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;}
.snw-msg.out .snw-bub{background:linear-gradient(135deg,#0e7f8f,#2f6fd0);border-bottom-right-radius:6px;color:#f2f8ff;}
.snw-meta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--t3);}
.snw-check{display:flex;}
.snw-img{width:240px;height:132px;border-radius:14px;border:1px solid var(--line);
  background:repeating-linear-gradient(135deg,#141c2b,#141c2b 8px,#101725 8px,#101725 16px);
  display:flex;align-items:center;justify-content:center;}
.snw-pdf{display:flex;align-items:center;gap:13px;padding:14px;border-radius:14px;width:330px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);}
.snw-pdf-i{width:44px;height:44px;border-radius:11px;flex:none;background:rgba(248,113,113,.16);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fca5a5;}
.snw-pdf-n{font-size:13px;font-weight:600;}
.snw-pdf-d{font-size:11px;color:rgba(234,242,255,.7);margin-top:3px;}
.snw-pdf-a{font-size:14px;font-weight:800;margin-top:4px;}
.snw-voice{display:flex;align-items:center;gap:13px;padding:12px 16px;border-radius:16px;width:290px;
  background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;}
.snw-play{width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--cyan),var(--blue));
  display:flex;align-items:center;justify-content:center;}
.snw-wave{flex:1;display:flex;align-items:center;gap:3px;height:26px;}
.snw-wave i{flex:1;border-radius:99px;background:var(--cyan);opacity:.55;display:block;}
.snw-typing{align-self:flex-start;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--t3);
  padding:10px 16px;border-radius:16px;border-bottom-left-radius:6px;background:var(--card);border:1px solid var(--line);}
.snw-typing b{display:flex;gap:4px;}
.snw-typing b i{width:6px;height:6px;border-radius:50%;background:var(--t2);display:block;animation:snwDots 1.3s infinite;}
.snw-typing b i:nth-child(2){animation-delay:.18s}
.snw-typing b i:nth-child(3){animation-delay:.36s}
@keyframes snwDots{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.snw-quick{display:flex;gap:9px;padding:0 24px 14px;flex:none;flex-wrap:wrap;}
.snw-quick span{font-size:12px;color:var(--t2);padding:8px 15px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);}
.snw-composer{display:flex;align-items:center;gap:12px;padding:16px 24px 20px;border-top:1px solid var(--line);flex:none;}
.snw-input{flex:1;height:46px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;padding:0 16px;font-size:13.5px;color:var(--t3);}
.snw-cic{width:42px;height:42px;border-radius:12px;flex:none;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;}
.snw-send{width:46px;height:46px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 10px 24px rgba(0,140,220,.35);}

/* ─────────── 05 · PERFIL DEL CLIENTE ─────────── */
.snw-prof{
  border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px;overflow:hidden;
  background:linear-gradient(165deg,rgba(23,32,50,.7),rgba(11,15,22,.88));
  border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.snw-prof-top{display:flex;align-items:center;gap:14px;flex:none;}
.snw-prof-n{font-size:16px;font-weight:700;}
.snw-prof-d{font-size:12px;color:var(--t3);margin-top:3px;}
.snw-labels{display:flex;gap:8px;flex-wrap:wrap;flex:none;}
.snw-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none;}
.snw-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;}
.snw-box-l{font-size:11px;color:var(--t3);}
.snw-box-v{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:5px;}
.snw-quote{
  border-radius:16px;padding:16px;flex:none;
  background:linear-gradient(150deg,rgba(0,200,224,.10),rgba(77,155,255,.06));
  border:1px solid rgba(0,200,224,.24);
}
.snw-quote-h{display:flex;align-items:center;justify-content:space-between;}
.snw-quote-t{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);}
.snw-quote-v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:10px;}
.snw-quote-d{font-size:11.5px;color:var(--t2);margin-top:4px;}
.snw-rows{display:flex;flex-direction:column;flex:none;}
.snw-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;}
.snw-row span{color:var(--t2);display:flex;align-items:center;gap:9px;}
.snw-row b{font-weight:700;}
.snw-pay{flex:none;}
.snw-pay-l{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--t2);margin-bottom:9px;}
.snw-pay-b{height:8px;border-radius:99px;overflow:hidden;display:flex;gap:2px;}
.snw-pay-b i{display:block;height:100%;}
.snw-pay-d{font-size:11px;color:var(--t3);margin-top:8px;}
.snw-hist{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;overflow:hidden;}
.snw-hist-t{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);}
.snw-ev{display:flex;gap:12px;}
.snw-ev-i{width:30px;height:30px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;}
.snw-ev-n{font-size:12.5px;font-weight:600;}
.snw-ev-d{font-size:11px;color:var(--t3);margin-top:2px;}

/* ─────────── 06 · FLUJO DE AUTOMATIZACIÓN ─────────── */
.snw-flow{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px 26px;
  flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.snw-flow-h{display:flex;align-items:center;gap:10px;flex:none;}
.snw-flow-h b{font-size:16px;font-weight:700;letter-spacing:-.02em;}
.snw-flow-h span{font-size:12px;color:var(--t3);}
.snw-nodes{display:flex;align-items:center;gap:8px;flex:1;min-height:0;}
.snw-node{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;}
.snw-node-i{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none;}
.snw-node-n{font-size:12px;font-weight:600;line-height:1.3;}
.snw-arrow{flex:none;opacity:.5;}

@media (prefers-reduced-motion:reduce){
  .snw-conn i,.snw-typing b i{animation:none;}
}