/*
=====================================================
ARCHIVO DE ESTILOS FINAL - PLATAFORMA DE CHATBOT WA
=====================================================
*/

/* ===================== BODY ===================== */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f2f5;
    overflow: hidden;
    display: flex;
    height: 100vh;
}

/* ===================== PALETTE ===================== */
#palette {
    width: 160px;
    background: #ffffff;
    border-right: 1px solid #ddd;
    padding: 12px;
    overflow-y: auto;
    box-sizing: border-box;
}

#palette h3 {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: #444;
}

.palette-node {
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    margin-bottom: 8px;
    padding: 6px 6px;
    cursor: grab;
    user-select: none;
    font-weight: 500;
    color: #333;
    border: 1px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s;
    font-size: 12px;
    text-align: center;
}

.palette-node:hover {
    border-color: #25D366; /* Verde de WhatsApp */
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
    transform: translateY(-2px);
}

/* ===================== SUBMENÚ DESPLEGABLE ===================== */
.submenu {
    margin-bottom: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.submenu-title {
    background: #f3f3f3;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.25s;
}

.submenu-title:hover {
    background: #e9ecef;
}

.submenu-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    background: #fafafa;
    padding: 0 6px;
}

.submenu-content.open {
    max-height: 400px; /* suficiente para los nodos internos */
    padding: 6px;
}

.arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.arrow.rotate {
    transform: rotate(90deg);
}

/* ===================== DRAWFLOW CONTAINER ===================== */
#drawflow-container {
    flex-grow: 1;
    position: relative;
    height: 100vh;
}

#drawflow {
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
    background-image: repeating-linear-gradient(0deg, #eee 0 1px, transparent 1px 20px),
                      repeating-linear-gradient(-90deg, #eee 0 1px, transparent 1px 20px);
    background-size: 20px 20px;
}

/* ===================== ZOOM CONTROLS ===================== */
.zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 1000;
}

/* ===================== BOTONES (SAVE Y ZOOM) ===================== */
.zoom-controls button,
#save {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #1d7cf2;
    background: #f8f9fa;
    color: #333;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.25s ease;
}

.zoom-controls button:hover,
#save:hover {
    background: #e2e6ea;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transform: translateY(-2px);
}

/* ===================== NODES (Estilo "WOW" Base) ===================== */
.node {
    width: 160px !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #222;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 2px solid #e0e0e0; /* Borde gris claro por defecto */
    user-select: none;
    transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
    transform: scale(0.85);    /* achica visualmente pero mantiene proporciones */
    transform-origin: top left;
}

/* Hover de WhatsApp para el nodo */
.node:hover {
    
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    border-color: #25D366; /* Verde de WhatsApp */
}

/* Header del nodo (Contenedor del input) */
.node-header {
    background-color: #f7f7f7; /* Gris muy claro, se mantiene */
    border-radius: 10px 10px 0 0;
    padding: 6px 8px !important; /* Reducimos padding horizontal para centrar el input visualmente */
    font-weight: 600;
    text-align: center;
    transition: background 0.25s;
}

/* === MODIFICACIÓN APLICADA AQUÍ === */
/* Evitamos que el header completo cambie de color */
.node:hover .node-header {
    background: #f7f7f7; /* Mantiene el color base del div */
    color: inherit;
    box-shadow: none;
}

/* Estilo del input del nombre */
.node-header input[type="text"] {
    width: 100%;
    border: none;
    background: transparent; /* Fondo transparente por defecto */
    font-weight: 600;
    font-size: 16px;
    color: #333; /* Color de texto más oscuro por defecto */
    text-align: center;
    outline: none;
    cursor: text;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    
    /* Estilos para que parezca un botón o campo bonito */
    border-radius: 6px; 
    padding: 4px 0; 
    margin: 0;
    box-sizing: border-box;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}

/* Aplicamos el color de hover SÓLO al INPUT[type="text"] */
.node:hover .node-header input[type="text"] {
    background: #128C7E; /* Verde oscuro/petróleo de WhatsApp */
    color: #fff; /* Texto blanco */
    box-shadow: 0 2px 8px rgba(18, 140, 126, 0.5); /* Sombra suave para destacar */
}
/* ================================== */

/* Contenido del nodo */
.drawflow-node-content-wrapper {
    padding: 6px 8px !important;
}

/* Estilo para los nodos de texto específicos (clase añadida) */
.node-whatsapp-text .node-content {
    margin-top: 0;
}

/* Ícono Alusivo (Emoji/Símbolo) */
.node-icon {
    font-size: 28px; /* Grande para destacar */
    text-align: center;
    color: #25D366; /* Verde de WhatsApp */
    line-height: 1;
    margin-bottom: 10px;
}

/* Etiquetas (Labels) del contenido */
.drawflow-node-content-wrapper label {
    display: block; /* La etiqueta ocupa todo el ancho */
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-top: 8px;
    margin-bottom: 2px;
}

/* Inputs, Textareas y Selects dentro del contenido */
.drawflow-node-content-wrapper input[type="text"],
.drawflow-node-content-wrapper input[type="password"],
.drawflow-node-content-wrapper select,
.drawflow-node-content-wrapper textarea {
    width: 100%;
    padding: 8px; /* Un poco más de padding */
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.25s;
    margin-bottom: 12px; /* Más espacio abajo */
}

.drawflow-node-content-wrapper input[type="text"]:focus,
.drawflow-node-content-wrapper select:focus,
.drawflow-node-content-wrapper textarea:focus {
    border-color: #25D366; /* Verde de WhatsApp al enfocar */
    box-shadow: 0 0 6px rgba(37, 211, 102, 0.4);
}

/* Textarea específico (para el mensaje largo) */
.drawflow-node-content-wrapper textarea {
    max-height: 100px;
    min-height: 60px;
    font-family: sans-serif; /* Usamos la fuente base para la interfaz, no monospace */
    resize: vertical; 
    overflow: auto; 
    white-space: pre-wrap; /* Permite saltos de línea y wrapping */
}

/* ===================== CONNECTORS (bolitas) ===================== */
.output .output_point,
.input .input_point {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    position: absolute;
    z-index: 10;
    border: 2px solid transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Punto de Salida (Output) - Verde WhatsApp */
.output .output_point {
    right: -16px !important;
    background: linear-gradient(145deg, #25D366, #128C7E);
}

/* Punto de Entrada (Input) - Verde Oscuro WhatsApp */
.input .input_point {
    left: -16px !important;
    background: linear-gradient(145deg, #075E54, #075E54);
}

.drawflow .drawflow-node .input {
    left: -27px;
    top: 2px;
    background: transparent; /* Se deja transparente ya que el estilo lo define input_point */
}


.node-error {
    border: 3px solid red !important;
    box-shadow: 0 0 12px red !important;
}

/*junto con estas dos calses para que tenga la accion d emovimiento en el debug visual */
.node-debub {
    border: 3px solid rgb(76, 200, 88) !important;
    box-shadow: 0 0 12px rgb(76, 200, 88) !important;
}
/* Animación de “pulse” (se agranda y vuelve) */
@keyframes nodePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* Clase que activa el pulso */
.node-pulse {
  animation: nodePulse 0.6s ease-in-out;
}




/* ===== PANEL DE DEBUG (arriba a la izquierda) ===== */
#debug-panel {
  position: fixed;
  bottom: 10px;         /* ← Lo movemos abajo */
  right: 10px;          /* ← Lo movemos a la derecha */
  width: 460px;
  height: 155px;
  background: #0a0a0a;
  border: 2px solid #222;
  border-radius: 8px;
  overflow: hidden;
  z-index: 999999;
  box-shadow: 0 0 15px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
}



#debug-header {
  background: linear-gradient(to right, #111, #222);
  color: #00ffbf;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: bold;
  font-family: Consolas, monospace;
  letter-spacing: 1px;
  border-bottom: 2px solid #00ffbf44;
  text-shadow: 0 0 4px #00ffbf;
}

#debug-textarea {
  flex: 1;
  width: 100%;
  background: #000;
  color: #00ff9d;
  border: none;
  resize: none;
  padding: 8px;
  font-size: 13px;
  font-family: Consolas, monospace;
  outline: none;
  overflow-y: auto;
}