/* ===== WhatsApp (pestaña de Redes Sociales) =====
   Las pantallas del puente (instalar, vincular con el código, conectando), el interruptor general del asistente, la
   bandeja de dos paneles de Mensajes (ms-*) con las píldoras y bandas propias de WhatsApp, Conocimiento (las notas del
   vault), Configuración, «Probar el asistente» y Actividad. Solo tokens del tema; el verde de WhatsApp es identidad de
   la red (--rs-whatsapp, en redes.css) y va solo en marcas pequeñas. */
.cm.wa{grid-template-columns:minmax(0,1fr)}   /* la columna nunca más ancha que la pantalla (los filtros y las vistas se desplazan) */
.wa [data-lucide],.wa svg.lucide{width:15px;height:15px;flex:none}
.wa .cm-cab h3 svg.lucide{color:var(--rs-whatsapp)}
.wa-en-linea{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--text)}
.wa-en-linea::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rs-whatsapp);box-shadow:0 0 0 3px color-mix(in srgb,var(--rs-whatsapp) 25%,transparent)}
.wa-nota{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:11.5px;color:var(--muted);line-height:1.45}
.wa-nota svg.lucide{width:13px;height:13px}
.wa-izq{justify-content:flex-start}

/* Pantallas del puente */
.wa-tarjeta{display:flex;align-items:flex-start;gap:16px;padding:22px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel);
  animation:wa-entra .2s ease-out}
.wa-tarjeta>svg.lucide,.wa-tarjeta>[data-lucide]{width:30px;height:30px;padding:10px;box-sizing:content-box;border-radius:14px;background:rgba(var(--accent-rgb),.14);color:var(--accent-2)}
.wa-tarjeta>div{display:grid;gap:10px;min-width:0}
.wa-tarjeta b{font-size:15px;color:var(--text-strong)}
.wa-tarjeta p{margin:0;max-width:68ch;color:var(--muted);font-size:13px;line-height:1.55}
.wa-tarjeta code,.wa-ruta code{padding:1px 6px;border-radius:6px;background:rgba(var(--fg-rgb),.07);font-size:12px;overflow-wrap:anywhere}
/* Esperando: el ícono y el texto quedan quietos; solo avanza una barra. En los botones gira solo su ícono pequeño. */
.wa-progreso{width:min(100%,320px);height:4px;border-radius:999px;background:rgba(var(--accent-rgb),.16);overflow:hidden}
.wa-progreso span{display:block;width:38%;height:100%;border-radius:inherit;background:var(--accent);animation:wa-avanza 1.5s ease-in-out infinite}
.wa .cm-boton svg.lucide-loader{animation:wa-gira 1s linear infinite;transform-origin:50% 50%}
.wa-qr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;padding:24px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel)}
.wa-qr figure{display:grid;gap:8px;justify-items:center;margin:0}
.wa-qr img,.wa-qr-vacio{width:264px;height:264px;padding:12px;border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.wa-qr-vacio{background:rgba(var(--fg-rgb),.06)}
.wa-qr figcaption{font-size:11px;color:var(--muted)}
.wa-qr h4{margin:0 0 10px;font-size:16px}
.wa-qr ol{display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none;counter-reset:paso}
.wa-qr li{position:relative;padding-left:36px;font-size:13px;line-height:1.5;counter-increment:paso}
.wa-qr li::before{content:counter(paso);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(var(--accent-rgb),.18);color:var(--accent-2);font-size:12px;font-weight:800}

/* El asistente, compacto en la fila de botones, con su globo de ayuda */
.wa-control{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:3px 4px 3px 8px;border:1px solid var(--rs-borde);
  border-radius:999px;background:var(--rs-panel)}
.wa-control.encendido{border-color:rgba(var(--accent-rgb),.55)}
.wa-control-texto{font-size:12.5px;color:var(--muted);white-space:nowrap}
.wa-control-texto b{color:var(--text-strong)}
.wa-control-salud{display:inline-flex;color:var(--ok)}
.wa-control-salud.aviso{color:var(--warn)}
.wa-control-salud.pausa,.wa-control-salud.bloqueado{color:var(--danger)}
.rs .wa-info{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.rs .wa-info:hover,.rs .wa-info[aria-expanded="true"]{background:rgba(var(--accent-rgb),.14);color:var(--text-strong)}
.rs .wa-info:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wa-pop{position:absolute;z-index:40;top:calc(100% + 8px);right:0;display:grid;gap:9px;width:min(360px,calc(100vw - 32px));padding:14px;border:1px solid var(--rs-borde);
  border-radius:14px;background:var(--panel);box-shadow:var(--shadow);text-align:left;cursor:default;animation:wa-entra .15s ease-out}
.wa-pop[hidden]{display:none}
.wa-pop>b{font-size:13.5px;color:var(--text-strong)}
.wa-pop p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text)}
.wa-pop .wa-pop-nota{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--muted)}
.wa-pop .wa-pop-nota svg.lucide{margin-top:1px}
.wa-pop-cuidado{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border-radius:10px;background:rgba(var(--ok-rgb),.1);color:var(--ok)}
.wa-pop-cuidado.aviso{background:rgba(var(--warn-rgb),.12);color:var(--warn)}
.wa-pop-cuidado.pausa,.wa-pop-cuidado.bloqueado{background:rgba(var(--danger-rgb),.1);color:var(--danger)}
.wa-pop-cuidado>div{display:grid;gap:2px;min-width:0}
.wa-pop-cuidado b{font-size:12.5px;color:var(--text-strong)}
.wa-pop-cuidado p{font-size:12px;color:var(--muted)}
.wa-pop-cuidado small{font-size:11px;color:var(--muted)}

/* Interruptor general */
.wa-general{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel);
  transition:border-color .2s,background .2s}
.wa-general.encendido{border-color:rgba(var(--accent-rgb),.55);background:linear-gradient(90deg,rgba(var(--accent-rgb),.12),var(--rs-panel) 70%)}
.wa-general>div{display:grid;gap:3px;min-width:0}
.wa-general b{font-size:14px;color:var(--text-strong)}
.wa-general p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.wa-general small{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.wa-general small svg.lucide{width:12px;height:12px}
.wa-general .ra-interruptor{margin-top:2px}

/* Cuidado del número */
.wa-cuidado{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel)}
.wa-cuidado>div{display:grid;gap:3px;flex:1;min-width:0}
.wa-cuidado b{font-size:13px;color:var(--text-strong)}
.wa-cuidado p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.wa-cuidado small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.wa-cuidado ul{margin:4px 0 0;padding-left:18px;font-size:11.5px;color:var(--text)}
.wa-cuidado-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(var(--ok-rgb),.14);color:var(--ok);flex:none}
.wa-cuidado.aviso{border-color:rgba(var(--warn-rgb),.5)}
.wa-cuidado.aviso .wa-cuidado-ico{background:rgba(var(--warn-rgb),.16);color:var(--warn)}
.wa-cuidado.pausa,.wa-cuidado.bloqueado{border-color:rgba(var(--danger-rgb),.5);background:rgba(var(--danger-rgb),.06)}
.wa-cuidado.pausa .wa-cuidado-ico,.wa-cuidado.bloqueado .wa-cuidado-ico{background:rgba(var(--danger-rgb),.14);color:var(--danger)}
.wa-hace-solo{display:grid;gap:6px;padding:10px 12px;border-radius:10px;background:var(--rs-panel-2);font-size:12px}
.wa-hace-solo>span{font-weight:700}
.wa-hace-solo ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.wa-hace-solo li{display:flex;align-items:flex-start;gap:7px;line-height:1.45}
.wa-hace-solo li svg.lucide{margin-top:1px;color:var(--accent-2)}
.wa-hace-solo small{font-size:11px;color:var(--muted);line-height:1.45}
.wa-entrega{display:inline-flex;margin-left:2px;color:var(--muted)}
.wa .wa-entrega svg.lucide{width:13px;height:13px}
.wa-entrega.leido{color:var(--info)}

/* Bandeja: lo propio de WhatsApp sobre la de Mensajes */
.wa-avatar{background:color-mix(in srgb,var(--rs-whatsapp) 18%,var(--rs-panel-2));color:var(--text-strong)}
.wa-avatar svg.lucide{width:16px;height:16px}
.wa-sin-leer{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ok);color:var(--on-ok);
  font-size:10.5px;font-weight:800}
.wa-pildora{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;background:rgba(var(--fg-rgb),.07);color:var(--muted)}
.wa .wa-pildora svg.lucide{width:11px;height:11px}
.wa-pildora.atencion{background:rgba(var(--danger-rgb),.14);color:var(--danger)}
.wa-pildora.control{background:rgba(var(--warn-rgb),.16);color:var(--warn)}
.wa-pildora.vacia{background:rgba(var(--warn-rgb),.12);color:var(--warn)}
.wa-interruptor-linea{display:inline-flex;align-items:center;gap:7px;font-size:12px;cursor:pointer}
.wa-interruptor-linea b{font-weight:700}
.wa-banda{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 14px;border-bottom:1px solid var(--rs-borde);font-size:12px;line-height:1.5;
  background:rgba(var(--fg-rgb),.04);color:var(--muted)}
.wa-banda.atencion{background:rgba(var(--danger-rgb),.09);color:var(--text)}
.wa-banda.atencion svg.lucide{color:var(--danger)}
.wa-banda.control{background:rgba(var(--warn-rgb),.1);color:var(--text)}
.wa-banda.control svg.lucide{color:var(--warn)}
.wa-banda.espera svg.lucide,.wa-banda.responde svg.lucide{color:var(--accent-2)}
.wa-autor{display:block;margin-bottom:2px;font-size:10.5px;font-weight:800;color:var(--accent-2)}
.wa-quien{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:var(--muted)}
.wa .wa-quien svg.lucide{width:11px;height:11px}
.ms-burbuja.wa-asistente{background:rgba(var(--accent-rgb),.22);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35)}
.ms-burbuja.wa-asistente .wa-quien{color:var(--accent-2)}
.ms-burbuja.wa-telefono .wa-quien,.ms-burbuja.wa-app .wa-quien{color:var(--text)}
.wa .ms-caja-pie .wa-nota{flex:1 1 220px}

/* Conocimiento */
.wa-ruta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:10px 14px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel);
  font-size:12px;color:var(--muted)}
.wa-ruta span{flex:1 1 320px;line-height:1.5}
.wa-ruta a.cm-boton{text-decoration:none;color:var(--text)}
.wa-conocimiento{display:grid;gap:12px}
.wa-secciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:12px}
.wa-seccion{display:grid;gap:8px;align-content:start;padding:14px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel);transition:border-color .2s}
.wa-seccion.editada{border-color:rgba(var(--warn-rgb),.55)}
.wa-seccion header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wa-seccion header b{font-size:13.5px;color:var(--text-strong)}
.wa-ayuda{margin:0;font-size:11.5px;color:var(--muted);line-height:1.5}
.wa-seccion textarea,.wa-config input[type=text],.wa-config input[type=number],.wa-config input[type=time],.wa-probar input{width:100%;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--rs-borde);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;line-height:1.5}
.wa-seccion textarea{min-height:96px;resize:vertical}
.wa-seccion textarea:focus,.wa-config input:focus,.wa-probar input:focus{border-color:rgba(var(--accent-rgb),.7);outline:2px solid rgba(var(--accent-rgb),.3);outline-offset:1px}
.wa-seccion .cm-botones{align-items:center;justify-content:space-between}

/* Documentos */
.wa-documentos{display:grid;gap:10px;padding:14px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel)}
.wa-documentos>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wa-documentos h4{display:flex;align-items:center;gap:8px;margin:0 0 3px;font-size:14px}
.wa-documentos>header p{margin:0;max-width:70ch;font-size:12px;color:var(--muted);line-height:1.5}
.wa-subir{cursor:pointer}
.wa-soltar{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:1.5px dashed rgba(var(--accent-rgb),.4);border-radius:12px;
  color:var(--muted);font-size:12px;text-align:center;transition:background .15s,border-color .15s}
.wa-soltar.encima{border-color:var(--accent);background:rgba(var(--accent-rgb),.1);color:var(--text)}
.wa-subidas,.wa-docs{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.wa-subida,.wa-docs li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--rs-panel-2);min-width:0}
.wa-subida>div,.wa-docs li>div{display:grid;gap:3px;flex:1;min-width:0}
.wa-subida b,.wa-docs b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-subida small,.wa-docs small{font-size:11px;color:var(--muted)}
.wa-subida.listo>svg.lucide{color:var(--ok)}
.wa-subida.error>svg.lucide{color:var(--danger)}
.wa-subida.error small{color:var(--danger)}
.wa-doc-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(var(--accent-rgb),.14);color:var(--accent-2);flex:none}
.wa .wa-quitar{color:var(--danger)}

/* Configuración */
.wa-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;align-items:start}
.wa-config fieldset{display:grid;gap:12px;margin:0;padding:14px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel);min-width:0}
.wa-config legend{display:inline-flex;align-items:center;gap:7px;padding:0 6px;font-size:13px;font-weight:800;color:var(--text-strong)}
.wa-config>.cm-avisos,.wa-config>.cm-botones{grid-column:1/-1}
.wa-campo{display:grid;gap:5px;min-width:0;font-size:12px}
.wa-campo>span{font-weight:700;color:var(--text)}
.wa-campo small{font-size:11px;color:var(--muted);line-height:1.45}
.wa-check{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer}
.wa-check input,.wa-dia input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.wa-dias{display:flex;flex-wrap:wrap;gap:6px}
.wa-dia{position:relative;display:inline-flex}
.wa-dia input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.wa-dia span{padding:5px 10px;border:1px solid var(--rs-borde);border-radius:999px;font-size:12px;font-weight:700;color:var(--muted)}
.wa-dia input:checked+span{border-color:transparent;background:rgba(var(--accent-rgb),.28);color:var(--text-strong)}
.wa-dia input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.wa-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wa-probar{display:grid;gap:10px;padding:16px;border:1px dashed rgba(var(--accent-rgb),.45);border-radius:var(--rs-radio);background:rgba(var(--accent-rgb),.05)}
.wa-probar h4{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}
.wa-probar>p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.wa-probar-fila{display:flex;gap:8px}
.wa-probar-fila input{flex:1;min-width:0}
.wa-prueba-hilo{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--rs-panel)}
.wa-prueba-hilo .wa-banda{border:0;border-radius:10px}
.wa-prueba-cargando{height:90px}

/* Actividad */
.wa-actividad{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.wa-actividad li{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--rs-borde);border-radius:12px;background:var(--rs-panel)}
.wa-actividad li>svg.lucide{margin-top:2px;color:var(--muted)}
.wa-actividad li.ok>svg.lucide{color:var(--accent-2)}
.wa-actividad li.atencion>svg.lucide{color:var(--danger)}
.wa-actividad li.aviso>svg.lucide{color:var(--warn)}
.wa-actividad li>div{display:grid;gap:3px;flex:1;min-width:0;font-size:12.5px}
.wa-actividad p{margin:0;color:var(--muted);font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.wa-actividad small{font-size:10.5px;color:var(--muted)}

@keyframes wa-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes wa-gira{to{transform:rotate(360deg)}}
@keyframes wa-avanza{from{transform:translateX(-100%)}to{transform:translateX(265%)}}
@media (prefers-reduced-motion:reduce){.wa-tarjeta{animation:none}.wa .cm-boton svg.lucide-loader{animation:none}.wa-progreso span{animation:none;width:100%;opacity:.5}}

@container rs (max-width:760px){
  .wa-qr{grid-template-columns:1fr;justify-items:center;text-align:left;padding:16px}
  .wa-qr img,.wa-qr-vacio{width:220px;height:220px}
  .wa-tarjeta{flex-direction:column;padding:16px}
  .wa .ms-hilo-acciones .cm-boton{flex:1 1 auto;justify-content:center}
  .wa .cm-modo{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}
  .wa .cm-modo button{flex:1 0 auto;justify-content:center}
  .wa-probar-fila{flex-direction:column}
  .wa-cuidado{flex-wrap:wrap}
  .wa .cm-cab-botones .wa-control{flex:1 1 100%;justify-content:space-between}
  .wa-pop{left:0;right:auto;width:auto;min-width:min(320px,calc(100vw - 32px))}
  .wa-cuidado>div{flex-basis:calc(100% - 42px)}
  .wa-cuidado>.cm-boton{width:100%;justify-content:center}
  .wa-docs li{flex-wrap:wrap}
  .wa-docs li>div{flex-basis:calc(100% - 46px)}
}

/* ── Cómo se conecta (21 oct): WhatsApp Web o la API oficial de Meta, con su conexión y lo que se copia en Meta ── */
.wa-via{display:grid;gap:12px;margin:0 0 12px;padding:14px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel)}
.wa-via h4{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:13px;font-weight:800;color:var(--text-strong)}
.wa-via-ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wa-via-op{position:relative;display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 12px;border-radius:11px;border:1px solid var(--rs-borde);
  background:var(--panel);color:var(--muted);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.wa-via-op:hover:not(:disabled){color:var(--text);border-color:rgba(var(--accent-rgb),.4)}
.wa-via-op.activa{color:var(--text-strong);border-color:rgba(var(--accent-rgb),.65);background:rgba(var(--accent-rgb),.1);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}
.wa-via-op:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wa-via-op:disabled{cursor:not-allowed;opacity:.7}
.wa-via-op small{margin-left:auto;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;background:rgba(var(--ok-rgb),.14);color:var(--ok)}
.wa-oficial{display:grid;gap:12px}
.wa-oficial h5{margin:4px 0 0;font-size:12px;font-weight:800;color:var(--text)}
.wa-oficial input[type=text],.wa-oficial input[type=password],.wa-oficial input[type=url]{width:100%;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--rs-borde);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;line-height:1.5}
.wa-oficial input:focus{border-color:rgba(var(--accent-rgb),.7);outline:2px solid rgba(var(--accent-rgb),.3);outline-offset:1px}
.wa-oficial input[readonly]{color:var(--muted);background:var(--rs-panel-2)}
.wa-oficial-estado{display:flex;align-items:center;gap:7px;margin:0;padding:8px 11px;border-radius:10px;font-size:12px;font-weight:700;background:var(--rs-panel-2);color:var(--muted)}
.wa-oficial-estado.bien{background:rgba(var(--ok-rgb),.12);color:var(--ok)}
.wa-oficial-estado.espera{background:rgba(var(--warn-rgb),.12);color:var(--warn)}
.wa-oficial-estado svg.lucide{width:14px;height:14px;flex:none}
.wa-copiar{display:flex;gap:6px;min-width:0}
.wa-copiar input{flex:1;min-width:0}
.wa-copiar .cm-boton{flex:none}
@media (max-width:520px){.wa-via-ops,.wa-oficial .wa-dos{grid-template-columns:1fr}}