/* ==================================================================
   Superchat v5.01 — estilos que no cubre Tailwind
   La paleta y los componentes (.btn, .input, .card…) están en js/theme.js.
   ================================================================== */

/* Antes de que Vue monte la página, el HTML es la plantilla cruda: todas las pantallas a la vez
   y los {{ }} sin sustituir. Mientras el contenedor tiene v-cloak solo se ve la pantalla de carga
   (data-boot), la misma que Vue muestra al montar. !important porque el CDN de Tailwind inserta
   sus estilos después de este archivo y su `.flex` ganaría. */
[v-cloak] > :not([data-boot]) { display: none !important; }

:root {
  --sc-brand-500: #28C871;
  --sc-brand-600: #1DA75C;
  --sc-ink-700: #0C524D;
  --sc-ink-900: #06302D;
}

/* 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; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ==================================================================
   Lienzo de recorridos (Drawflow)
   ================================================================== */

/* Sin clases en el HTML: Drawflow decide si arrastra el lienzo mirando la
   primera clase del elemento pulsado («parent-drawflow»). */
#drawflow {
  position: absolute;
  inset: 0;
  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: var(--sc-brand-600);
  box-shadow: 0 0 0 2px rgba(40, 200, 113, .28), 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; }
/* Id del paso (s1, s2…): se usa en «Ir a» y en las intenciones */
.sc-node-id {
  margin-left: auto;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .22);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}
/* Marcas de las acciones de un paso o de un botón (etiqueta, dato, Meta…) */
.sc-node-actions { font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
.sc-node-outcomes .sc-node-actions { float: right; margin-left: 4px; }
/* Lo que espera un Mensaje («Espera un botón», «Pide {{correo}}») */
.sc-node-ask { margin: 6px 0 0; font-size: 11px; font-weight: 600; color: #0369a1; }

.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;
}

/* Salidas del paso: cada punto de salida va frente a su fila (data-port) */
.sc-node-outcomes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-node-outcomes li {
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.sc-node-outcomes .sc-node-outcome-yes { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.sc-node-outcomes .sc-node-outcome-no { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
/* Botones de un Mensaje */
.sc-node-outcomes .sc-node-option { background: #f8fafc; color: #1e293b; border: 1px solid #e2e8f0; font-weight: 500; }
/* «Sin respuesta» de un Mensaje que espera algo (mismo tono que el paso Esperar) */
.sc-node-outcomes .sc-node-outcome-wait { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

/* Pasos con problemas en el último intento de guardar */
.drawflow .drawflow-node.sc-df-error .sc-node { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, .25), 0 2px 6px rgba(15, 23, 42, .08); }
.drawflow .drawflow-node.sc-df-warning .sc-node { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .22), 0 2px 6px rgba(15, 23, 42, .08); }

/* La Entrada no se elimina: se oculta la «X» que Drawflow pone al seleccionarla */
.drawflow .drawflow-node.sc-df-entry .drawflow-delete { display: none; }

/* Puertos de entrada / salida.
   El puerto de entrada de Drawflow usa la clase `.input`, la misma que el
   componente de formulario de theme.js (ancho completo, padding, bordes): sin
   anular esos estilos el punto se estiraba hasta parecer una elipse. */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  min-width: 0;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  outline: none;
}
.drawflow .drawflow-node .output { background: var(--sc-brand-600); }

/* Drawflow apila los puertos centrados y separados del nodo. Aquí quedan sobre
   el borde de la caja, entrando ligeramente en ella, y useJourneyEditor (layoutPorts)
   fija su altura: la entrada frente a la cabecera y cada salida frente a su fila.
   El `top` de abajo es solo el valor inicial, a la altura de la cabecera. */
.drawflow .drawflow-node .inputs,
.drawflow .drawflow-node .outputs { position: absolute; top: 0; bottom: 0; width: 0; }
.drawflow .drawflow-node .inputs { left: 0; }
.drawflow .drawflow-node .outputs { right: 0; }
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output { position: absolute; top: 9px; margin: 0; }
.drawflow .drawflow-node .input { left: -11px; }
.drawflow .drawflow-node .output { left: auto; right: -11px; }

.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover { background: var(--sc-ink-700); }

/* Conexiones */
.drawflow .connection .main-path { stroke: #94a3b8; stroke-width: 2.5px; }
.drawflow .connection .main-path:hover { stroke: var(--sc-brand-600); }
.drawflow .connection .point { stroke: #ffffff; fill: var(--sc-brand-600); }

/* Botón de eliminación de Drawflow (nodos y conexiones).
   Drawflow centra la "X" con line-height: 30px sobre una caja de 30px con
   borde; con el box-sizing: border-box global quedaba desplazada hacia abajo. */
.drawflow-delete {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  line-height: 1;
  padding: 0;
  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);
}

/* {{variables}} dentro del texto de un paso Mensaje */
.sc-node-var {
  padding: 0 3px;
  border-radius: 4px;
  background: #d1fae5;
  color: #047857;
  font-weight: 600;
}

/* ==================================================================
   Texto de un Mensaje con las {{variables}} resaltadas
   El textarea es transparente y debajo hay una copia del texto con las
   variables marcadas; ambos comparten caja, letra y ajuste de línea para que
   las marcas queden justo detrás de cada variable. El textarea crece con el
   texto (sin barra de desplazamiento) para que no se desalineen.
   ================================================================== */
.sc-text-backdrop,
.sc-text-input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sc-text-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
}
.sc-text-backdrop mark { color: transparent; border-radius: 4px; }
.sc-text-backdrop .sc-var-ok { background: #d1fae5; }
.sc-text-backdrop .sc-var-bad { background: #fde68a; }
.sc-text-backdrop .sc-var-new { animation: sc-var-flash 1.2s ease-out; }
@keyframes sc-var-flash { from { background: #6ee7b7; } to { background: #d1fae5; } }
.sc-text-input {
  position: relative;
  display: block;
  min-height: 92px;
  border-color: #e2e8f0;
  background: transparent;
  color: #1e293b;
  resize: none;
  overflow: hidden;
  outline: none;
}
.sc-text-input:focus { border-color: var(--sc-brand-600); box-shadow: 0 0 0 1px var(--sc-brand-600); }

/* Chips dentro de un nodo (palabras clave de la Entrada, recorrido 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-welcome { background: #ede9fe; color: #6d28d9; }

/* Chips «Insertar» del editor: el icono lleva el color de su tipo de nodo (--chip). */
.sc-step-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 3px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff;
  color: #0c524d; font-size: 12px; font-weight: 600; line-height: 1;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.sc-step-chip:hover {
  border-color: var(--chip);
  background: color-mix(in srgb, var(--chip) 8%, #fff);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--chip) 22%, transparent);
}
.sc-step-chip:focus-visible { outline: 2px solid #28c871; outline-offset: 1px; }
.sc-step-chip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--chip) 14%, #fff); color: var(--chip);
}
.sc-step-chip-icon svg { width: 13px; height: 13px; }

/* Cada mensaje del paso en su globo; los botones van dentro del último, como en WhatsApp. */
.sc-node-bubble { margin-bottom: 6px; padding: 8px; border-radius: 10px; background: #f1f5f9; }
.sc-node-bubble > .sc-node-media:last-child { margin-bottom: 0; }
.sc-node-bubble .sc-node-outcomes { margin-top: 8px; }
.sc-node-bubble .sc-node-outcomes .sc-node-option { background: #fff; }
.sc-node-body > .sc-node-bubble + .sc-node-ask { margin-top: 2px; }
/* Espera antes de enviar un mensaje (segundos). */
.sc-node-delay {
  margin: 0 0 6px; padding: 3px 8px; border-radius: 8px;
  background: #ede9fe; color: #6d28d9; font-size: 11px; font-weight: 500; text-align: center;
}

/* Archivo del mensaje dentro del nodo. La imagen se ve entera, con su proporción (journeyGraph.js
   reserva su alto); el video, el audio y el documento tienen alto fijo. */
.sc-node-media { position: relative; margin-bottom: 6px; }
/* El archivo no cargó (borrado o sin permiso): se avisa sobre el mismo espacio. */
.sc-node-media-broken::after {
  content: 'No se pudo cargar el archivo';
  position: absolute; top: 0; left: 0; right: 0; height: 112px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: #f1f5f9; color: #64748b; font-size: 11px;
}
.sc-node-media-broken:has(audio)::after { height: 32px; }
.sc-node-media-img,
.sc-node-media-video { display: block; width: 100%; height: 112px; border-radius: 6px; }
/* Una imagen muy alta se reduce sin recortarse. */
.sc-node-media-img { height: auto; max-height: 480px; object-fit: contain; background: #f1f5f9; }
/* Hasta que carga por primera vez no se sabe su proporción: ocupa el alto del video. */
.sc-node-media-img.sc-node-media-pending { height: 112px; }
.sc-node-media-video { object-fit: contain; background: #0f172a; }
.sc-node-media-audio { display: block; width: 100%; height: 32px; }
.sc-node-media-doc {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px;
  border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc;
  color: #0c524d; font-weight: 600; text-decoration: none; cursor: pointer;
}
.sc-node-media-doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-node-media-doc:hover { border-color: #28c871; background: #ecfbf2; }
.sc-node-media-note { display: block; margin-top: 3px; font-size: 10px; color: #b45309; }

/* ==================================================================
   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(40, 200, 113, .4); }

/* 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; }

/* ==================================================================
   Marca: panel oscuro de acceso y elementos decorativos
   ================================================================== */
.sc-brand-panel {
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(40, 200, 113, .28), transparent 60%),
    radial-gradient(800px 500px at -20% 110%, rgba(40, 200, 113, .16), transparent 60%),
    linear-gradient(160deg, var(--sc-ink-700) 0%, var(--sc-ink-900) 100%);
}
.sc-brand-panel .sc-grid {
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 22px 22px;
}
.sc-soft-bg {
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(40, 200, 113, .10), transparent 60%),
    radial-gradient(700px 380px at 0% 100%, rgba(12, 82, 77, .07), transparent 60%),
    #f5f7f6;
}

/* Riel lateral del espacio de trabajo (estilo WhatsApp Desktop) */
.sc-rail-btn { position: relative; }
.sc-rail-btn.is-active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sc-brand-500);
}

/* Barras de progreso de consumo */
.sc-meter { height: 6px; border-radius: 999px; background: #eef2f1; overflow: hidden; }
.sc-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--sc-brand-500); transition: width .4s ease; }
.sc-meter.is-warn > span { background: #f59e0b; }
.sc-meter.is-danger > span { background: #ef4444; }

/* ==================================================================
   SweetAlert2 con la identidad de Superchat
   ================================================================== */
.swal2-popup {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  border-radius: 18px !important;
  padding: 1.75rem 1.5rem 1.5rem !important;
}
.swal2-title { color: #09413D !important; font-size: 1.2rem !important; font-weight: 700 !important; padding-top: .25rem !important; }
.swal2-html-container { color: #475569 !important; font-size: .9rem !important; line-height: 1.55 !important; }
.swal2-actions { gap: .5rem; }
.swal2-actions .swal2-styled {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  padding: .6rem 1.15rem !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.swal2-input, .swal2-select, .swal2-textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: .75rem 0 0 !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  font-size: .9rem !important;
}
.swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus {
  border-color: var(--sc-brand-500) !important;
  box-shadow: 0 0 0 3px rgba(40, 200, 113, .2) !important;
}
.swal2-validation-message { border-radius: 10px; font-size: .85rem !important; }
.swal2-icon.swal2-success { border-color: rgba(40, 200, 113, .35) !important; color: var(--sc-brand-500) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--sc-brand-500) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(40, 200, 113, .3) !important; }
.swal2-timer-progress-bar { background: var(--sc-brand-500) !important; }

/* Pestañas desplazables sin barra visible */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }