/* ===== Respuestas automáticas (dentro de Comunidad y Mensajes) =====
   Cada regla es un flujo de nodos conectados (como Make): Cuando → Si dice → Solo si te sigue → Entonces → Antes de
   enviar. Interruptores, cola «Por aprobar», actividad y el editor en un panel lateral. Solo tokens. */
.ra{display:grid;gap:12px}
.ra [data-lucide],.ra svg.lucide,.ra-editor [data-lucide],.ra-editor svg.lucide{width:15px;height:15px;flex:none}
.cm-modo{display:inline-flex;padding:3px;border:1px solid var(--rs-borde);border-radius:999px;background:var(--rs-panel-2)}
.rs .cm-modo button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:12px;font-weight:800;cursor:pointer}
.rs .cm-modo button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.cm-modo b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(var(--warn-rgb),.22);color:var(--warn);font-size:10.5px}
.cm-modo button[aria-pressed="true"] b{background:rgba(var(--bg-rgb),.25);color:var(--on-accent)}
.ra-intro{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:var(--rs-radio);
  background:linear-gradient(120deg,rgba(var(--accent-rgb),.16),var(--rs-panel) 65%)}
.ra-intro b{font-size:13.5px;color:var(--text-strong)}
.ra-intro p{margin:4px 0 0;max-width:72ch;font-size:12px;line-height:1.5;color:var(--muted)}
.ra-intro-botones{display:flex;align-items:center;gap:8px}
.ra-intro-botones small{font-size:11.5px;font-weight:800;color:var(--muted)}
.ra-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ra-cifra{position:relative;display:grid;gap:3px;padding:12px 14px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel)}
.ra-cifra svg.lucide{position:absolute;right:12px;top:12px;width:17px;height:17px;color:var(--accent-2);opacity:.8}
.ra-cifra span{font-size:11.5px;font-weight:700;color:var(--muted)}
.ra-cifra b{font-size:22px;color:var(--text-strong);font-variant-numeric:tabular-nums}
.ra-cifra small{font-size:11px}

/* Interruptor */
.ra-interruptor{position:relative;display:inline-block;width:38px;height:22px;flex:none;cursor:pointer}
.ra-interruptor.grande{width:46px;height:26px}
.ra-interruptor input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ra-interruptor span{position:absolute;inset:0;border-radius:999px;background:rgba(var(--fg-rgb),.18);transition:background .2s}
.ra-interruptor span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--panel);box-shadow:var(--shadow);transition:transform .2s}
.ra-interruptor.grande span::after{width:20px;height:20px}
.ra-interruptor input:checked+span{background:var(--accent)}
.ra-interruptor input:checked+span::after{transform:translateX(16px)}
.ra-interruptor.grande input:checked+span::after{transform:translateX(20px)}
.ra-interruptor input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* Reglas como flujos de nodos */
.ra-reglas{display:grid;gap:10px}
.ra-regla{display:grid;gap:10px;padding:14px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel);transition:border-color .2s}
.ra-regla.activa{border-color:rgba(var(--accent-rgb),.5);box-shadow:inset 3px 0 0 var(--accent)}
.ra-regla-cab{display:flex;align-items:center;gap:12px}
.ra-regla-nombre{display:grid;min-width:0;flex:1}
.ra-regla-nombre b{font-size:13.5px;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra-regla-nombre small{font-size:11px;color:var(--muted)}
.ra-regla-acciones{display:flex;gap:10px;align-items:center}
.rs .cm-enlace.peligro{color:var(--danger)}
.ra-flujo{display:flex;align-items:stretch;gap:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:thin}
.ra-nodo{position:relative;display:flex;align-items:center;gap:8px;min-width:150px;flex:1;padding:9px 12px;border:1px solid rgba(var(--accent-rgb),.25);border-radius:12px;background:var(--rs-panel-2)}
.ra-nodo+.ra-nodo{margin-left:22px}
.ra-nodo+.ra-nodo::before{content:"";position:absolute;left:-23px;top:50%;width:22px;height:2px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.25),rgba(var(--accent-rgb),.7))}
.ra-nodo+.ra-nodo::after{content:"";position:absolute;left:-6px;top:calc(50% - 4px);border:4px solid transparent;border-left-color:rgba(var(--accent-rgb),.8)}
.ra-nodo-icono{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(var(--accent-rgb),.18);color:var(--accent-2);flex:none}
.ra-nodo.seguir .ra-nodo-icono{background:rgba(var(--info-rgb),.16);color:var(--info)}
.ra-nodo.antes .ra-nodo-icono{background:rgba(var(--ok-rgb),.16);color:var(--ok)}
.ra-nodo-texto{display:grid;min-width:0}
.ra-nodo-texto small{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ra-nodo-texto b{font-size:12px;line-height:1.35;color:var(--text)}
.ra-regla-pie{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}

/* Por aprobar */
.ra-cola{display:grid;gap:8px;padding:14px;border:1px solid rgba(var(--warn-rgb),.45);border-radius:var(--rs-radio);background:linear-gradient(160deg,rgba(var(--warn-rgb),.1),var(--rs-panel) 60%)}
.ra-cola h4,.ra-actividad h4{display:flex;align-items:center;gap:7px;margin:0;font-size:13.5px;color:var(--text-strong)}
.ra-pendiente{display:grid;gap:8px;padding:12px;border:1px solid var(--rs-borde);border-radius:12px;background:var(--rs-panel)}
.ra-pendiente header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.ra-pendiente header small{color:var(--muted)}
.ra-plazo{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:800;background:rgba(var(--ok-rgb),.14);color:var(--ok)}
.ra-plazo.urgente{background:rgba(var(--warn-rgb),.18);color:var(--warn)}
.ra-plazo.vencido{background:rgba(var(--danger-rgb),.14);color:var(--danger)}
.ra .ra-plazo svg.lucide{width:12px;height:12px}
.ra-pendiente blockquote{margin:0;padding:8px 12px;border-left:3px solid rgba(var(--accent-rgb),.5);border-radius:0 10px 10px 0;background:var(--rs-panel-2);font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ra-de-regla{display:flex;align-items:center;gap:6px;margin:0;font-size:11.5px;color:var(--accent-2);font-weight:700}
.ra-pasos-cola{display:grid;gap:8px}
.ra-paso-cola{display:grid;gap:5px;margin:0}
.ra-paso-cola>span,.ra-paso-cola.fijo{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--muted)}
.ra-paso-cola textarea,.ra-editor textarea,.ra-editor input:not([type=checkbox]):not([type=number]),.ra-editor input[type=number]{width:100%;padding:8px 10px;border:1px solid var(--rs-borde);border-radius:10px;
  background:var(--panel);color:var(--text);font:inherit;font-size:12.5px;line-height:1.45}
.ra-paso-cola textarea,.ra-editor textarea{resize:vertical;min-height:52px}
.ra-paso-cola textarea:focus-visible,.ra-editor textarea:focus-visible,.ra-editor input:focus-visible{outline:2px solid rgba(var(--accent-rgb),.45);outline-offset:1px}
.ra-pendiente footer{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* Actividad */
.ra-actividad{display:grid;gap:8px;padding:14px;border:1px solid var(--rs-borde);border-radius:var(--rs-radio);background:var(--rs-panel)}
.ra-actividad ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ra-actividad li{display:flex;gap:10px;align-items:flex-start;font-size:12px}
.ra-actividad li>div{display:grid;gap:2px;min-width:0}
.ra-actividad small{color:var(--muted)}
.ra-actividad q{color:var(--text);overflow-wrap:anywhere}
.ra-detalle{display:block}
.ra-resultado{flex:none;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:800;background:rgba(var(--fg-rgb),.08);color:var(--muted);white-space:nowrap}
.ra-resultado.ok{background:rgba(var(--ok-rgb),.15);color:var(--ok)}
.ra-resultado.cola,.ra-resultado.aviso{background:rgba(var(--warn-rgb),.16);color:var(--warn)}
.ra-resultado.error{background:rgba(var(--danger-rgb),.14);color:var(--danger)}

/* Vacío con plantillas */
.ra-vacio{display:grid;gap:12px;padding:18px;border:1px dashed rgba(var(--accent-rgb),.45);border-radius:var(--rs-radio)}
.ra-vacio-texto{display:grid;gap:5px;justify-items:start;color:var(--accent-2)}
.ra-vacio-texto svg.lucide{width:26px;height:26px}
.ra-vacio-texto b{font-size:14px;color:var(--text-strong)}
.ra-vacio-texto p{margin:0;font-size:12.5px;color:var(--muted)}
.ra-plantillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.rs .ra-plantilla{display:grid;gap:5px;justify-items:start;padding:14px;border:1px solid var(--rs-borde);border-radius:14px;background:var(--rs-panel);color:var(--text);text-align:left;cursor:pointer;
  transition:transform .15s,border-color .2s}
.rs .ra-plantilla:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.65)}
.ra-plantilla svg.lucide{width:22px!important;height:22px!important;color:var(--accent-2)}
.ra-plantilla b{font-size:13px}
.ra-plantilla span{font-size:12px;line-height:1.45;color:var(--muted)}
.ra-plantilla.vacia{border-style:dashed}

/* Editor (panel lateral; vive en body con sus propios tokens de Redes) */
.ra-editor-fondo{--rs-borde:var(--line);--rs-panel:rgba(var(--panel-rgb),.92);--rs-panel-2:var(--panel-2);--rs-radio:12px;position:fixed;inset:0;z-index:1200;display:flex;justify-content:flex-end;
  background:var(--scrim);backdrop-filter:blur(4px);animation:ra-aparece .16s ease-out}
.ra-editor{display:flex;flex-direction:column;width:min(1080px,100%);height:100%;background:var(--panel);color:var(--text);box-shadow:var(--shadow);animation:ra-entra .22s cubic-bezier(.16,1,.3,1)}
.ra-editor .cm-boton{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);color:var(--text);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.ra-editor .cm-boton.primario{border-color:transparent;background:var(--accent);color:var(--on-accent)}
.ra-editor .cm-boton[disabled]{opacity:.5;cursor:default}
.ra-editor .cm-enlace{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--accent-2);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ra-editor-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ra-editor-cab h3{display:flex;align-items:center;gap:8px;margin:0;font-size:16px}
.ra-editor-cab h3 svg.lucide{color:var(--accent-2)}
.ra-editor-cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;padding:18px 20px;overflow:auto}
.ra-editor-flujo{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;min-width:0}
.ra-editor-flujo::before{content:"";position:absolute;left:31px;top:70px;bottom:20px;width:2px;background:linear-gradient(rgba(var(--accent-rgb),.5),rgba(var(--accent-rgb),.12))}
.ra-paso{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:10px;padding:14px 14px 14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.ra-paso.activo{border-color:rgba(var(--info-rgb),.5)}
.ra-paso-cab{display:flex;align-items:center;gap:10px}
.ra-paso-cab>div{flex:1;display:grid}
.ra-paso-cab b{font-size:13.5px}
.ra-paso-cab small{font-size:11.5px;color:var(--muted)}
.ra-campo{display:grid;gap:5px}
.ra-campo>span{font-size:11.5px;font-weight:800;color:var(--muted)}
.ra-campo.corto input{max-width:120px}
.ra-segmento{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line);border-radius:16px;background:var(--panel);width:max-content;max-width:100%}
.ra-editor .ra-segmento button{padding:6px 12px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.ra-editor .ra-segmento button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.ra-redes{display:flex;flex-wrap:wrap;gap:6px}
.ra-editor .ra-red{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ra-editor .ra-red.activa{border-color:transparent;background:rgba(var(--accent-rgb),.26);color:var(--text-strong)}
.ra-red small{font-size:10px;font-weight:600;opacity:.8}
.ra-palabras{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.ra-palabra{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:999px;background:rgba(var(--accent-rgb),.22);font-size:12px;font-weight:800}
.ra-editor .ra-palabra button{display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:rgba(var(--fg-rgb),.12);color:var(--text);cursor:pointer}
.ra-editor .ra-palabra svg.lucide{width:11px;height:11px}
.ra-editor .ra-palabras input{flex:1;min-width:160px;border:0!important;background:transparent!important;outline:none}
.ra-interruptor-linea{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:12.5px}
.ra-variantes{display:grid;gap:6px;padding-left:4px;border-left:2px solid rgba(var(--accent-rgb),.25)}
.ra-variante{display:flex;gap:6px;align-items:flex-start}
.ra-variables{display:flex;gap:6px;flex-wrap:wrap}
.ra-editor .ra-variable{padding:3px 9px;border:1px dashed rgba(var(--accent-rgb),.55);border-radius:999px;background:transparent;color:var(--accent-2);font:12px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}
.ra-nota{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.ra-editor-lado{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;position:sticky;top:0;min-width:0}
.ra-vista,.ra-probar{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.ra-vista h4,.ra-probar h4{display:flex;align-items:center;gap:7px;margin:0;font-size:13px}
.ra-telefono{display:grid;gap:6px;padding:12px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.ra-telefono-cab{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ra-burbuja{max-width:88%;padding:7px 11px;border-radius:14px;font-size:12.5px;line-height:1.45}
.ra-burbuja small{display:block;font-size:10px;font-weight:800;color:var(--muted)}
.ra-burbuja p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.ra-burbuja.persona{justify-self:start;background:var(--panel-2);border-bottom-left-radius:4px}
.ra-burbuja.marca{justify-self:end;background:rgba(var(--accent-rgb),.22);border-bottom-right-radius:4px}
.ra-probar-fila{display:flex;gap:6px;flex-wrap:wrap}
.ra-probar-fila input{flex:1;min-width:160px}
.ra-probar-fila select{width:auto}
.ra-resultado-prueba{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:800}
.ra-resultado-prueba.si{color:var(--ok)}
.ra-resultado-prueba.no{color:var(--muted)}
.ra-pasos-prueba{display:grid;gap:6px;margin:6px 0 0;padding-left:18px;font-size:12px}
.ra-pasos-prueba span{display:block;color:var(--muted);white-space:pre-wrap}
.ra-mensajes{display:grid;gap:6px}
.cm-avisos.error{background:rgba(var(--danger-rgb),.1);border-color:rgba(var(--danger-rgb),.35)}
.cm-avisos.error svg.lucide{color:var(--danger)}
.ra-editor-pie{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line);background:var(--panel)}
@keyframes ra-aparece{from{opacity:0}to{opacity:1}}
@keyframes ra-entra{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ra-editor-fondo,.ra-editor{animation:none}}

@container rs (max-width:860px){
  .ra-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ra-flujo{flex-direction:column}
  .ra-nodo{min-width:0}
  .ra-nodo+.ra-nodo{margin-left:0;margin-top:14px}
  .ra-nodo+.ra-nodo::before{left:26px;top:-15px;width:2px;height:14px;background:linear-gradient(rgba(var(--accent-rgb),.25),rgba(var(--accent-rgb),.7))}
  .ra-nodo+.ra-nodo::after{left:22px;top:-6px;border-left-color:transparent;border-top-color:rgba(var(--accent-rgb),.8)}
  .ra-pendiente footer .cm-boton{flex:1 1 auto;justify-content:center}
}
@media (max-width:820px){
  .ra-editor-cuerpo{grid-template-columns:minmax(0,1fr);padding:14px}
  .ra-editor-lado{position:static}
  .ra-editor-flujo::before{display:none}
  .ra-editor-pie{padding:12px 14px}
  .ra-editor-pie .cm-boton{flex:1 1 auto;justify-content:center}
}
