/* ==================================================================
   Estilos base — idénticos a los de la versión anterior
   ================================================================== */

/* Fondo característico con patrón sutil de WhatsApp Web */
.wa-bg {
  background-color: #efeae2;
  background-image: radial-gradient(#d1d7db 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Estilos de scrollbar personalizados */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ==================================================================
   Constructor de flujos (Drawflow)
   ================================================================== */

#drawflow {
  width: 100%;
  height: 100%;
  background-color: #f8fafc;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 22px 22px;
  text-align: initial;
}

/* Contenedor del nodo */
.drawflow .drawflow-node {
  background: transparent;
  border: none;
  padding: 0;
  width: 232px;
  box-shadow: none;
  border-radius: 10px;
}
.drawflow .drawflow-node.selected { box-shadow: none; }
.drawflow .drawflow-node.selected .sc-node {
  border-color: #00a884;
  box-shadow: 0 0 0 2px rgba(0, 168, 132, .25), 0 6px 16px rgba(15, 23, 42, .12);
}

.sc-node {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.sc-node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--sc-node-color, #0ea5e9);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.sc-node-icon { font-size: 13px; line-height: 1; }
.sc-node-title { text-transform: uppercase; }

.sc-node-body { padding: 10px; font-size: 12px; color: #334155; }
.sc-node-text { margin: 0; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.sc-node-hint { margin: 0; color: #94a3b8; font-style: italic; }

.sc-node-badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}

.sc-node-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 600;
}

.sc-node-buttons { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-node-buttons li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 11px;
  color: #1e293b;
}
.sc-node-index {
  width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Puertos de entrada / salida */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  background: #94a3b8;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
}
.drawflow .drawflow-node .output { background: #00a884; }
.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover { background: #0f766e; }

/* Conexiones */
.drawflow .connection .main-path { stroke: #94a3b8; stroke-width: 2.5px; }
.drawflow .connection .main-path:hover { stroke: #00a884; }
.drawflow .connection .point { stroke: #ffffff; fill: #00a884; }

/* Menú contextual de eliminación de Drawflow */
.drawflow-delete {
  background: #ef4444;
  border: 2px solid #ffffff;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .3);
}

/* ==================================================================
   Píldoras de eventos dentro del chat
   ================================================================== */
.sc-event-pill {
  display: inline-block;
  max-width: 90%;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #64748b;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

/* Chips dentro de un nodo (palabras clave del inicio, flujo destino) */
.sc-node-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sc-node-chip-key { background: #d1fae5; color: #047857; }
.sc-node-chip-flow { background: #fce7f3; color: #be185d; }
.sc-node-badge-on { background: #d1fae5; color: #047857; }

/* ==================================================================
   Columna lateral redimensionable
   ================================================================== */

/*
 * El ancho se define aquí y no con utilidades de Tailwind: el CDN inyecta su
 * hoja después de esta, así que `w-full` ganaría por orden y el arrastre no
 * tendría efecto. En móvil la columna ocupa todo el ancho.
 */
aside.sc-sidebar { width: 100%; }

@media (min-width: 768px) {
  aside.sc-sidebar { width: var(--sc-sidebar-width, 400px); }
}

.sc-sidebar-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  z-index: 30;
  cursor: col-resize;
  background: transparent;
  transition: background-color .15s ease;
}
.sc-sidebar-handle:hover,
.sc-sidebar-handle-active { background: rgba(0, 168, 132, .35); }

/* Durante el arrastre no debe seleccionarse texto ni cambiar el cursor. */
body.sc-resizing { cursor: col-resize; user-select: none; }
body.sc-resizing * { cursor: col-resize !important; user-select: none !important; }