/* === START OF FILE beautiful.css === */
/* Versión: 1.8.1 - Incluye Slider Grosor Pincel */
/* Autor: Xocoflow Development */
/* Fecha: 2023-10-29 */

/* --- Variables CSS Globales --- */
:root {
  /* Colores Principales y Acentos */
  --primary-color: #4ea9ff;          /* Azul Drawflow Principal */
  --primary-dark-color: #0e5ba3;     /* Azul Drawflow Oscuro */
  --primary-light-color: #e3f2fd;   /* Azul Drawflow Muy Claro */
  --accent-color: #ff9800;          /* Naranja para acentos */

  /* Fondos */
  --background-color: #ffffff;      /* Fondo principal canvas y nodos */
  --background-light: #fcfcfc;    /* Fondo claro (ej: sidebar izquierda) */
  --background-medium: #f5f5f5;    /* Fondo medio (ej: search, tabs inactivas) */
  --background-dark: #263238;       /* Fondo oscuro (ej: sidebar CodeMirror) */
  --background-header-footer-dark: #37474F; /* Cabecera/Pie Sidebar Oscuro */
  --background-readonly: #f0f0f0;   /* Fondo inputs/textareas readonly */
  --background-box-title: #f7f7f7; /* Fondo título nodo default */
  --background-grid: #f1f1f1;       /* Color rejilla canvas */
  --background-hover-light: #eef5ff; /* Hover sutil en elementos claros */
  --control-bg-color: rgba(50, 50, 50, 0.85); /* Fondo botones control */
  --control-hover-bg-color: rgba(80, 80, 80, 0.9);
  --control-disabled-bg-color: rgba(80, 80, 80, 0.5);
  --control-text-color: var(--text-on-dark);
  --control-disabled-text-color: #aaa;

  /* Bordes */
  --border-color: #cacaca;          /* Bordes generales */
  --border-light-color: #e0e0e0;    /* Bordes más suaves */
  --border-dark-color: #455A64;     /* Borde sidebar oscuro */
  --border-focus-color: var(--primary-color); /* Borde en foco */
  --focus-shadow-color: rgba(78, 169, 255, 0.25); /* Sombra en foco */
  --control-border-color: #333;

  /* Texto */
  --text-dark: #333;                /* Texto oscuro principal */
  --text-medium: #555;              /* Texto medio */
  --text-light: #777;               /* Texto claro (ayuda, placeholders) */
  --text-on-primary: #ffffff;       /* Texto sobre fondo primario */
  --text-on-dark: #eee;             /* Texto sobre fondos oscuros */
  --text-link-color: #0b7dda;       /* Color enlaces/info especial */
  --text-placeholder-color: #aaa;   /* Color placeholders */
  --text-disabled-color: #9e9e9e;   /* Color texto deshabilitado */

  /* Colores Semánticos */
  --danger-color: #fc4538;
  --danger-dark-color: #ff4444;
  --danger-light-color: #ffebee;
  --success-color: #4CAF50;
  --success-dark-color: #388E3C;
  --success-light-color: #e8f5e9;
  --warning-color: var(--accent-color);
  --warning-dark-color: #c67602;
  --warning-light-color: #fff3e0;
  --info-color: #03A9F4;
  --info-dark-color: #0288D1;
  --info-light-color: #e1f5fe;

  /* Botones y UI */
  --button-bg-light: #f0f0f0;
  --button-hover-bg-light: #e0e0e0;
  --button-bg-dark: #607D8B;        /* Gris azulado (Undo/Redo) */
  --button-hover-bg-dark: #546E7A;
  --button-disabled-bg: #bdbdbd;    /* Gris claro deshabilitado */
  --button-disabled-border: #9e9e9e;
  --button-disabled-text: var(--text-disabled-color);
  --control-height: 28px; /* Altura base para botones de control */

  /* Tipografía */
  --font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-family-code: 'Fira Code', Consolas, Menlo, Monaco, 'Courier New', monospace;
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-xsmall: 11px;
  --font-size-xxsmall: 10px;

  /* Sombras y Transiciones */
  --box-shadow-light: 0 1px 3px rgba(0,0,0,0.1);
  --box-shadow-medium: 0 2px 8px rgba(0,0,0,0.15);
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
}

/* --- Reset Básico y Estilos Globales --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; font-family: var(--font-family-base); font-size: var(--font-size-base); background-color: var(--background-light); color: var(--text-dark); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
::placeholder { color: var(--text-placeholder-color); opacity: 1; }

/* --- Header --- */
header { height: 50px; border-bottom: 1px solid var(--border-color); padding: 0 20px; display: flex; align-items: center; background-color: var(--background-color); box-shadow: var(--box-shadow-light); position: relative; z-index: 20; }
header h2 { margin: 0; line-height: 50px; font-size: 1.6em; font-weight: 700; color: var(--text-dark); }

/* --- Layout Principal --- */
.wrapper { width: 100%; height: calc(100vh - 50px); display: flex; position: relative; }

/* --- Sidebar Izquierda --- */
.col { display: flex; flex-direction: column; width: 260px; height: 100%; border-right: 1px solid var(--border-color); background-color: var(--background-light); flex-shrink: 0; transition: width var(--transition-normal); }
.node-search-container { padding: 8px 10px; border-bottom: 1px solid var(--border-color); background-color: var(--background-medium); flex-shrink: 0; }
#node-search { width: 100%; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: var(--font-size-small); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
#node-search:focus { border-color: var(--border-focus-color); box-shadow: 0 0 0 3px var(--focus-shadow-color); outline: none; }
.nodes-list { flex-grow: 1; overflow-y: auto; overflow-x: hidden; }
.drag-drawflow { min-height: 40px; line-height: normal; padding: 8px 15px; border-bottom: 1px solid var(--border-light-color); cursor: move; user-select: none; font-size: var(--font-size-small); display: flex; align-items: center; gap: 10px; background-color: var(--background-color); transition: background-color var(--transition-fast); }
.drag-drawflow:hover { background-color: var(--background-hover-light); }
.drag-drawflow i { color: var(--text-medium); width: 18px; text-align: center; flex-shrink: 0; font-size: 1.1em; }
.drag-drawflow span { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dark); }
.create-node-button { padding: 10px 15px; margin: 8px 5px; background-color: var(--info-light-color); border: 1px solid var(--info-color); border-radius: 4px; text-align: center; cursor: pointer; font-weight: bold; color: var(--info-dark-color); display: block; align-items: center; justify-content: center; gap: 8px; transition: background-color var(--transition-fast); font-size: var(--font-size-small); }
.create-node-button:hover { background-color: #b3e5fc; }
.delete-node-type-btn { margin-left: auto; padding: 0 4px; cursor: pointer; color: #aaa; font-size: 0.9em; opacity: 0.6; transition: color var(--transition-fast), opacity var(--transition-fast); flex-shrink: 0; background: none; border: none; line-height: 1; vertical-align: middle; }
.delete-node-type-btn:hover { color: var(--danger-color); opacity: 1; }
.drag-drawflow:has(.delete-node-type-btn) { gap: 5px; }
.drag-drawflow .delete-node-type-btn i { width: auto; }

/* --- Columna Derecha --- */
.col-right { position: relative; flex-grow: 1; height: 100%; overflow: hidden; }

/* --- Menú Superior --- */
.menu { position: absolute; top: 0; left: 0; height: 40px; width: 100%; display: flex; align-items: center; background: var(--background-color); border-bottom: 1px solid var(--border-color); z-index: 10; padding: 0 10px; }
#module-tabs { display: flex; align-items: stretch; height: 100%; margin: 0; padding: 0; list-style: none; margin-right: auto; flex-wrap: nowrap; overflow-x: auto; /* Scroll horizontal para pestañas */ /* Ocultar scrollbar visualmente */ -ms-overflow-style: none; scrollbar-width: none; }
#module-tabs::-webkit-scrollbar { display: none; } /* Ocultar scrollbar en Webkit */
#module-tabs li { display: inline-flex; align-items: center; margin: 0; padding: 0 15px; line-height: 40px; cursor: pointer; border-right: 1px solid var(--border-light-color); font-size: var(--font-size-small); background-color: var(--background-medium); color: var(--text-medium); white-space: nowrap; transition: background-color var(--transition-fast), color var(--transition-fast); position: relative; flex-shrink: 0; }
#module-tabs li:hover { background-color: #e8e8e8; }
#module-tabs li.selected { font-weight: 700; color: var(--primary-dark-color); background-color: var(--background-color); border-bottom-color: var(--background-color); }
#module-tabs li.selected::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--primary-color); }
#module-tabs li .close-tab-btn { margin-left: 8px; cursor: pointer; color: #999; font-weight: bold; padding: 0 4px; border-radius: 50%; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 18px; width: 18px; vertical-align: middle; transition: all var(--transition-fast); border: none; background: transparent; flex-shrink: 0; }
#module-tabs li .close-tab-btn:hover { color: var(--text-on-primary); background-color: var(--danger-color); }
#module-tabs li.add-tab-btn { cursor: pointer; border: none; background: transparent; padding: 0 10px; opacity: 0.7; transition: opacity var(--transition-fast); color: var(--text-medium); display: inline-flex; align-items: center; height: 100%; font-size: 1.1em; border-right: none; margin-left: 5px; flex-shrink: 0; }
#module-tabs li.add-tab-btn:hover { opacity: 1; }
/* Botones Acción Menú */
.menu .btn { margin-left: 8px; color: var(--text-on-primary); font-weight: 700; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: var(--font-size-xsmall); border: none; display: inline-flex; align-items: center; gap: 5px; transition: background-color var(--transition-fast), filter var(--transition-fast); box-shadow: var(--box-shadow-light); }
.menu .btn:hover:not(:disabled) { filter: brightness(115%); }
.menu .btn:active:not(:disabled) { filter: brightness(95%); }
.menu .btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; background-color: var(--button-disabled-bg) !important; }
.menu .btn i { margin-right: 3px; font-size: 0.95em; }
.menu .btn .button-text { display: inline; }
.menu .btn-load { margin-left: auto; background-color: var(--warning-color); }
.menu .btn-save { background-color: var(--success-color); }
.menu .btn-save-as { background-color: var(--info-color); }
.menu .btn-export { background: var(--primary-color); }
.menu .btn-clear { background: var(--danger-color); }

/* --- Canvas Drawflow --- */
#drawflow { position: absolute; top: 40px; left: 0; width: 100%; height: calc(100% - 40px); background-color: var(--background-color); background-size: 20px 20px; background-image: linear-gradient(to right, var(--background-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--background-grid) 1px, transparent 1px); overflow: hidden; z-index: 1; }
#drawflow.drawflow-locked { cursor: not-allowed; }

/* --- Controles Inferiores --- */
.controls-container { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; /* Reduced gap slightly */ }
.controls-container.bottom-left { bottom: 15px; left: 15px; }
.controls-container.bottom-right { bottom: 15px; right: 15px; }
/* Estilo base botones control */
.controls-container button { background-color: var(--control-bg-color); color: var(--control-text-color); border: 1px solid var(--control-border-color); border-radius: 4px; padding: 0; /* Padding handled by flex alignment */ font-size: var(--font-size-base); line-height: 1; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), visibility var(--transition-fast), border-color var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--box-shadow-light); width: var(--control-height); height: var(--control-height); }
.controls-container button:hover:not(:disabled) { background-color: var(--control-hover-bg-color); border-color: #555; color: #fff; }
.controls-container button:disabled { background-color: var(--control-disabled-bg-color); cursor: not-allowed; opacity: 0.7; box-shadow: none; color: var(--control-disabled-text-color); border-color: #444; }
.controls-container button i { margin: 0; font-size: 0.95em; }
/* Clase para ocultar botones */
.controls-container button.hidden { visibility: hidden; opacity: 0; pointer-events: none; width: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: hidden; }
/* Grupo Historial y Edición */
.history-controls { display: flex; gap: 4px; }
.history-controls button { background-color: var(--button-bg-dark); }
.history-controls button:hover:not(:disabled) { background-color: var(--button-hover-bg-dark); }
.history-controls .btn-recalculate { background-color: var(--info-color); }
.history-controls .btn-recalculate:hover:not(:disabled) { background-color: var(--info-dark-color); }
/* Grupo Lock */
.btn-lock { display: flex; }
.btn-lock button { background-color: var(--info-color); border-color: var(--info-dark-color); }
.btn-lock button:hover:not(:disabled) { background-color: var(--info-dark-color); }
/* Grupo Zoom */
.bar-zoom { display: flex; gap: 3px; background-color: var(--control-bg-color); padding: 3px; border-radius: 4px; border: 1px solid var(--control-border-color); }
.bar-zoom button { background: transparent; box-shadow: none; border: none; height: calc(var(--control-height) - 8px); /* Adjust for padding */ width: calc(var(--control-height) - 8px); }
.bar-zoom button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.15); color: var(--primary-color); }

/* --- Drawing Canvas Styles --- */
#drawingCanvas { position: absolute; top: 40px; left: 0; width: 100%; height: calc(100% - 40px); pointer-events: none; /* Start inactive */ z-index: 3; }
#drawingCanvas.active { pointer-events: auto; /* Enable interaction */ /* cursor set by JS */ }

/* --- Drawing Tool Controls Styles --- */
#colorPicker { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: var(--control-height); height: var(--control-height); padding: 0; border: 1px solid var(--control-border-color); border-radius: 4px; background-color: transparent; cursor: pointer; vertical-align: middle; transition: border-color var(--transition-fast); }
#colorPicker::-webkit-color-swatch-wrapper { padding: 2px; border-radius: 3px; } /* Add padding */
#colorPicker::-webkit-color-swatch { border: none; border-radius: 2px; }
#colorPicker::-moz-color-swatch { border: none; border-radius: 3px; margin: 2px; /* Add margin for Firefox */ }
#colorPicker:hover { border-color: #999; }
#colorPicker:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--focus-shadow-color); }

/* Active states */
.btn-draw.active { background: var(--primary-color); border-color: var(--primary-dark-color); }
.btn-eraser.active { background: #f44336; border-color: #d32f2f; }
.btn-clear-drawing:hover { background: #e3195a; border-color: #96015b; }

/* Brush Size Slider Control */
.brush-control { display: inline-flex; align-items: center; background-color: var(--control-bg-color); border: 1px solid var(--control-border-color); border-radius: 4px; padding: 0 8px; height: var(--control-height); box-shadow: var(--box-shadow-light); color: var(--control-text-color); }
.brush-control i { margin-right: 6px; font-size: 0.9em; color: #ccc; }
.brush-control input[type="range"] { -webkit-appearance: none; appearance: none; width: 70px; /* Adjust width as needed */ height: 6px; background: #555; border-radius: 3px; outline: none; opacity: 0.9; transition: opacity var(--transition-fast); cursor: pointer; vertical-align: middle; margin: 0 6px 0 0; }
.brush-control input[type="range"]:hover { opacity: 1; }
/* Slider Thumb (Chrome, Safari, Edge) */
.brush-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: #ddd; border-radius: 50%; cursor: pointer; margin-top: -4px; /* Center thumb on track */ }
/* Slider Thumb (Firefox) */
.brush-control input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: #ddd; border-radius: 50%; cursor: pointer; border: none; }
.brush-control #brushSizeValue { font-size: var(--font-size-xsmall); font-weight: bold; min-width: 18px; text-align: right; color: #eee; }

/* Barra de Estado */
.editor-status-bar { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background-color: rgba(50, 50, 50, 0.75); color: var(--text-on-dark); padding: 4px 12px; border-radius: 4px; font-size: var(--font-size-xsmall); z-index: 4; white-space: nowrap; box-shadow: var(--box-shadow-light); }
.editor-status-bar span { font-weight: bold; margin-left: 3px; min-width: 40px; display: inline-block; text-align: right; }
#zoom-level { min-width: 45px; }
#node-position { min-width: 100px; }

/* --- Nodos Drawflow Base --- */
.drawflow .drawflow-node { background: var(--background-color); border: 1px solid var(--border-color); box-shadow: var(--box-shadow-light); padding: 0; width: 220px; border-radius: 5px; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); position: absolute; z-index: 2; /* Above grid */ }
.drawflow .drawflow-node.selected  { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--focus-shadow-color), var(--box-shadow-medium); z-index: 3; /* Selected nodes above others */ }
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { position: absolute; height: 16px; width: 16px; border: 2px solid var(--border-color); background: #fdfdfd; border-radius: 50%; cursor: crosshair; z-index: 10; /* Above node content */ transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.drawflow .drawflow-node .input { left: -9px; top: calc(50% - 8px); }
.drawflow .drawflow-node .output { right: -9px; top: calc(50% - 8px); }
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { background: var(--primary-color); border-color: var(--primary-dark-color); }
.drawflow .connection { z-index: 1; /* Connections below nodes */ }
.drawflow .connection .main-path { stroke: var(--primary-color); stroke-width: 2.5px; }
.drawflow .connection .point { stroke: var(--primary-dark-color); stroke-width: 1.5; fill: white; r: 4.5; cursor: pointer; }
.drawflow .connection .point:hover, .drawflow .connection .point.selected { fill: var(--primary-color); stroke: white; }
.drawflow > .drawflow-delete { border: 2px solid var(--danger-dark-color); color: var(--danger-dark-color); background: white; box-shadow: 0 1px 5px rgba(244, 67, 54, 0.4); font-weight: bold; width: 22px; height: 22px; line-height: 18px; font-size: 15px; border-radius: 50%; z-index: 11; /* Above connection points */ }
.drawflow > .drawflow-delete:hover { background-color: var(--danger-color); color: white; }

/* --- Estructura Interna Nodos --- */
.drawflow-node .title-box { min-height: 35px; line-height: normal; padding: 6px 10px; background: var(--background-box-title); border-bottom: 1px solid var(--border-light-color); border-radius: 4px 4px 0 0; font-size: var(--font-size-small); font-weight: 700; display: flex; align-items: center; gap: 8px; overflow: hidden; color: var(--text-dark); }
.drawflow-node .title-box i { font-size: 1.1em; color: var(--primary-color); }
.drawflow-node .title-box span { white-space: normal; text-overflow: initial; }
.drawflow-node.selected .title-box { background-color: var(--primary-light-color); color: var(--primary-dark-color); border-bottom-color: var(--primary-color); }
.drawflow-node.selected .title-box i { color: var(--primary-dark-color); }
.drawflow-node .box { padding: 12px; font-size: var(--font-size-small); color: var(--text-dark); }
.drawflow-node .box input[type="text"], .drawflow-node .box input[type="number"], .drawflow-node .box input[type="url"], .drawflow-node .box input[type="date"], .drawflow-node .box input[type="time"], .drawflow-node .box input[type="color"], .drawflow-node .box input[type="range"], .drawflow-node .box select, .drawflow-node .box textarea { width: 100%; font-size: var(--font-size-small); min-height: 30px; line-height: 1.4; padding: 5px 8px; margin-bottom: 8px; border-radius: 3px; border: 1px solid var(--border-color); color: var(--text-dark); box-sizing: border-box; display: block; background-color: var(--background-color); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.drawflow-node .box textarea {
  min-height: 60px; /* Establece una altura mínima para todos los textareas en los nodos */
  resize: vertical; /* Permite el redimensionamiento vertical nativo del textarea (el tirador del navegador) */
  /* overflow-y: auto;  Añade esto si no lo tienes, para que aparezca el scroll si el contenido es mayor */
}
.drawflow-node .box input:focus, .drawflow-node .box select:focus, .drawflow-node .box textarea:focus { border-color: var(--border-focus-color); box-shadow: 0 0 0 3px var(--focus-shadow-color); outline: none; }
.drawflow-node .box input[readonly], .drawflow-node .box textarea[readonly] { background-color: var(--background-readonly); cursor: default; border-color: var(--border-light-color); }
.drawflow-node .box label { font-size: var(--font-size-xsmall); display: block; margin-bottom: 4px; color: var(--text-medium); font-weight: 700; }
.drawflow-node .box button { font-size: var(--font-size-xsmall); padding: 5px 10px; margin-top: 5px; border-radius: 3px; cursor: pointer; border: 1px solid #ccc; background-color: var(--button-bg-light); color: var(--text-dark); transition: background-color var(--transition-fast); }
.drawflow-node .box button:hover:not(:disabled) { background-color: var(--button-hover-bg-light); }
.drawflow-node .box button:disabled { opacity: 0.6; cursor: not-allowed; background-color: var(--button-disabled-bg); border-color: var(--button-disabled-border); color: var(--button-disabled-text); }
.drawflow-node .box button i { margin-right: 5px; }
.drawflow-node .box button.edit-code-btn { width: 100%; margin-top: 5px; margin-bottom: 10px; padding: 6px 8px; font-size: var(--font-size-xsmall); background-color: #e8eaf6; border: 1px solid #c5cae9; color: #3f51b5; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.drawflow-node .box button.edit-code-btn:hover { background-color: #dcdcff; }
.drawflow-node .box button.edit-code-btn i { margin-right: 0; }
.drawflow-node .box p, .drawflow-node .box .help-text { margin-top: 5px; margin-bottom: 8px; font-size: var(--font-size-xxsmall); color: var(--text-light); line-height: 1.4; }
.drawflow-node .box span[df-filename] { font-style: italic; color: var(--text-link-color); margin-left: 5px; font-size: var(--font-size-xxsmall); }
.drawflow-node .box img[df-previewsrc] { display: block; max-width: 100%; max-height: 80px; margin-top: 5px; border: 1px solid #eee; object-fit: contain; background-color: #f8f8f8; }
.drawflow-node .box p[df-loadingMsg], .drawflow-node .box p[df-errorMsg] { font-weight: bold; margin-top: 5px; }
.drawflow-node .box p[df-errorMsg] { color: var(--danger-dark-color); }
.drawflow-node .box textarea.error { border-color: var(--danger-color); background-color: var(--danger-light-color); } /* Style for JSON error */
.drawflow-node .box span[df-rangeval] { display: inline-block; margin-left: 10px; font-weight: bold; min-width: 25px; text-align: right; } /* Slider value display */


/* --- Estilos Específicos Nodos --- */
/* (Existing node styles like text-node, concatenate-node, display-node, etc. remain here) */
.drawflow-node.text-node { background-color: var(--primary-light-color); border-color: #90caf9; width: 230px; }
.drawflow-node.text-node .title-box { background-color: #64b5f6; color: var(--text-on-primary); border-color: #42a5f5; }
.drawflow-node.text-node .title-box i { color: var(--text-on-primary); }
.drawflow-node.text-node textarea[df-content] { background-color: var(--background-readonly); cursor: default; resize: none; height: 80px; overflow: auto; white-space: pre-wrap; }
.drawflow-node.concatenate-node { background-color: var(--primary-light-color); border-color: #90caf9; width: 230px; }
.drawflow-node.concatenate-node .title-box { background-color: #64b5f6; color: var(--text-on-primary); border-color: #42a5f5; }
.drawflow-node.concatenate-node .title-box i { color: var(--text-on-primary); }
.drawflow-node.display-node { background-color: #fce4ec; border-color: #fc679b; width: 230px; }
.drawflow-node.display-node .title-box { background-color: #fc6295; color: var(--text-on-primary); border-color: #f55288; }
.drawflow-node.display-node .title-box i { color: var(--text-on-primary); }
.drawflow-node.display-node textarea[df-result] { white-space: pre-wrap; height: 100px; background-color: var(--background-readonly); border: 1px solid #eee; font-size: 0.85em; }
.drawflow-node.note-node { border-color: #ffe57f; /* Background aplicado por JS */ }
.drawflow-node.note-node .title-box { background-color: #fff9c4; color: #5d4037; border-color: #fff59d; }
.drawflow-node.note-node .title-box i { color: #f57f17; }
.drawflow-node.note-node .box { transition: background-color 0.3s ease; }
.drawflow-node.note-node .text-info { font-size: var(--font-size-xxsmall); color: var(--text-light); text-align: right; margin-top: 3px; }
.drawflow-node.note-node select[df-notecolor] { padding: 3px 5px; margin-bottom: 8px; height: auto; font-size: var(--font-size-xxsmall); }
.drawflow-node.note-node textarea[df-notecontent] { font-size: var(--font-size-small); }
.drawflow-node.javascript-code-node { background-color: var(--warning-light-color); border-color: #ffe0b2; }
.drawflow-node.javascript-code-node .title-box { background-color: var(--warning-color); border-bottom-color: var(--warning-dark-color); color: #424242; }
.drawflow-node.javascript-code-node .title-box i { color: var(--warning-dark-color); }
.drawflow-node.javascript-code-node textarea { font-family: var(--font-family-code); font-size: var(--font-size-xsmall); }
.drawflow-node.javascript-code-node textarea[df-jscode] { height: 100px; background-color: var(--background-readonly); white-space: pre; cursor: default; }
.drawflow-node.javascript-code-node .node-buttons { display: flex; gap: 5px; margin: 8px 0; }
.drawflow-node.javascript-code-node .node-buttons button { flex-grow: 1; }
.drawflow-node.javascript-code-node textarea[df-result] { height: 60px; background-color: #f9f9f9; }
.drawflow-node.javascript-code-node textarea[df-result].error { background-color: var(--danger-light-color); color: var(--danger-dark-color); border-color: #ee8a8a; }
.drawflow-node.static-code-node { background-color: var(--info-light-color); border-color: #b3e5fc; }
.drawflow-node.static-code-node .title-box { background-color: var(--info-color); border-bottom-color: var(--info-dark-color); color: var(--text-on-primary); }
.drawflow-node.static-code-node .title-box i { color: var(--text-on-primary); }
.drawflow-node.static-code-node textarea[df-codecontent] { font-family: var(--font-family-code); font-size: var(--font-size-xsmall); height: 120px; background-color: var(--background-readonly); white-space: pre; cursor: default; }
.drawflow-node.welcome-node { border-color: var(--success-dark-color); background-color: var(--success-light-color); }
.welcome-node .title-box { background-color: var(--success-color) !important; color: white !important; border-bottom: 1px solid var(--success-dark-color) !important; }
.welcome-node .title-box i { color: white !important; }
.welcome-node .box { background-color: transparent; font-size: var(--font-size-small); line-height: 1.6; padding: 15px; }
.welcome-node .box p { color: var(--text-dark); margin-bottom: 10px; }
.welcome-node .box strong { color: var(--success-dark-color); }
.welcome-node .box ul { margin-top: 5px; padding-left: 20px; margin-bottom: 0; list-style: none;}
.welcome-node .box li { margin-bottom: 6px; display: flex; align-items: center; }
.welcome-node .box li i:first-child { width: 20px; margin-right: 8px; text-align: center; flex-shrink: 0; }
.drawflow-node.local-image-node { /* Default width set by JS data */ }
.drawflow-node.local-image-node .box { padding: 8px; }
.drawflow-node.local-image-node .image-preview-container { min-height: 80px; margin-bottom: 8px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; background-color: #f9f9f9; overflow: hidden; position: relative;}
.drawflow-node.local-image-node .image-preview-container img[df-imagesrc] { display: none; max-width: 100%; max-height: 150px; /* Limit preview height */ width:auto; height:auto; object-fit: contain; }
.drawflow-node.local-image-node .image-preview-container .placeholder-text { color: #aaa; font-size: 11px; text-align: center; padding: 10px; position: absolute; }
.drawflow-node.local-image-node img[df-imagesrc][src]:not([src=""]) { display: block !important; }
.drawflow-node.local-image-node img[df-imagesrc][src]:not([src=""]) + .placeholder-text { display: none; }
.drawflow-node.local-image-node span[df-filename] { font-size: 10px; color: #777; display: block; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawflow-node.local-image-node details { margin-bottom: 8px; }
.drawflow-node.local-image-node summary { font-size: 10px; cursor: pointer; color: #555; font-weight:bold; }
.drawflow-node.local-image-node .details-content { display: flex; gap: 5px; margin-top: 5px; }
.drawflow-node.local-image-node .details-content div { flex: 1; }
.drawflow-node.local-image-node label { font-size: 10px !important; margin-bottom: 2px !important; }
.drawflow-node.local-image-node input[type="text"] { font-size:11px !important; height: 24px !important; padding: 2px 4px !important; min-height: 24px !important; margin-bottom: 0 !important; }
.drawflow-node.local-image-node .help-text { margin-top: 2px !important; font-size: 9px !important; }
.drawflow-node.template-node textarea { font-family: var(--font-family-code); font-size: var(--font-size-xsmall); }


/* --- Estilos Nodo Imagen Minimalista --- */
.drawflow-node.image-minimal-node {
  padding: 0 !important; border: 2px dashed #cccccc; background-color: #f8f8f8;
  box-shadow: none; overflow: hidden; min-width: 80px; min-height: 60px;
  width: 80px; height: 60px; transition: width 0.1s ease-out, height 0.1s ease-out, box-shadow 0.2s, border-color 0.2s, background-color 0.2s;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.drawflow-node.image-minimal-node:has(img[src]:not([src=""])) { border: none; background-color: transparent; box-shadow: var(--box-shadow-light); }
.image-minimal-node .image-minimal-content { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.image-minimal-node .image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #aaaaaa; font-size: 11px; text-align: center; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; padding: 5px; width: 100%; height: 100%; }
.image-minimal-node .image-placeholder i { font-size: 1.5em; margin-bottom: 5px; }
.image-minimal-node .image-placeholder:hover { color: #888888; }
.image-minimal-node.dragover .image-placeholder, .image-minimal-node .image-placeholder.dragover { color: var(--primary-dark-color); }
.drawflow-node.image-minimal-node.dragover { border-color: var(--primary-color); background-color: #e0e0e0; }
.image-minimal-node img[df-imgsrc] { display: none; width: 100%; height: 100%; object-fit: contain; }
.image-minimal-node img[df-imgsrc][src]:not([src=""]) { display: block; }
.image-minimal-node:has(img[src]:not([src=""])) .image-placeholder { display: none; }
.drawflow-node.image-minimal-node.selected { box-shadow: 0 0 0 3px var(--focus-shadow-color), var(--box-shadow-medium); border: 1px solid var(--primary-color); }


/* --- Modales --- */
#modalBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; }
.modal-content-base { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--background-color); padding: 25px 30px; border: 1px solid var(--border-light-color); z-index: 10001; box-shadow: var(--box-shadow-medium); border-radius: 6px; width: 90%; max-width: 550px; max-height: 90vh; overflow-y: auto; }
.modal-content-base h3 { margin-top: 0; margin-bottom: 20px; font-size: 1.3em; font-weight: 700; color: var(--text-dark); }
.modal-content-base label { font-size: var(--font-size-small); margin-bottom: 5px; display: block; font-weight: 700; color: var(--text-medium); }
.modal-content-base input[type="text"], .modal-content-base input[type="number"], .modal-content-base textarea { width: 100%; padding: 9px 12px; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 4px; font-size: var(--font-size-small); box-sizing: border-box; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.modal-content-base input:focus, .modal-content-base textarea:focus { border-color: var(--border-focus-color); box-shadow: 0 0 0 3px var(--focus-shadow-color); outline: none; }
.modal-content-base textarea { min-height: 90px; resize: vertical; font-family: var(--font-family-code); }
.modal-content-base .modal-buttons { margin-top: 25px; padding-top: 15px; border-top: 1px solid var(--border-light-color); text-align: right; display: flex; justify-content: flex-end; gap: 12px; }
.modal-content-base button { padding: 9px 20px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: var(--font-size-small); transition: filter var(--transition-fast), opacity var(--transition-fast); }
.modal-content-base button:hover:not(:disabled) { filter: brightness(110%); }
.modal-content-base button:active:not(:disabled) { filter: brightness(95%); }
.modal-content-base button:disabled { opacity: 0.6; cursor: not-allowed; }
#nodeDefinitionModal button.save-button { background-color: var(--success-color); color: white; }
#nodeDefinitionModal button.save-button:hover:not(:disabled) { background-color: var(--success-dark-color); }
#nodeDefinitionModal button.cancel-button { background-color: var(--danger-color); color: white; }
#nodeDefinitionModal button.cancel-button:hover:not(:disabled) { background-color: var(--danger-dark-color); }

/* --- Sidebar CodeMirror --- */
.code-editor-sidebar { position: fixed; top: 50px; right: -450px; width: 430px; height: calc(100vh - 50px); background-color: var(--background-dark); border-left: 1px solid var(--border-dark-color); box-shadow: -3px 0 8px rgba(0,0,0,0.15); z-index: 1001; transition: right 0.3s ease-in-out; display: flex; flex-direction: column; color: var(--text-on-dark); }
.code-editor-sidebar.visible { right: 0; }
.code-editor-sidebar .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background-color: var(--background-header-footer-dark); border-bottom: 1px solid var(--border-dark-color); flex-shrink: 0; }
.code-editor-sidebar .sidebar-header h3 { margin: 0; font-size: 1.15em; display: flex; align-items: center; gap: 10px; }
.code-editor-sidebar .sidebar-header h3 i { font-size: 1.1em; }
.code-editor-sidebar .sidebar-header button#close-code-sidebar-btn { background: none; border: none; color: #ccc; font-size: 1.4em; cursor: pointer; padding: 0 5px; line-height: 1; transition: color var(--transition-fast); }
.code-editor-sidebar .sidebar-header button#close-code-sidebar-btn:hover { color: white; }
#codemirror-container { flex-grow: 1; overflow: hidden; position: relative; }
.CodeMirror { height: 100% !important; width: 100%; font-family: var(--font-family-code); font-size: 13px; line-height: 1.4; }
.code-editor-sidebar .sidebar-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background-color: var(--background-header-footer-dark); border-top: 1px solid var(--border-dark-color); flex-shrink: 0; }
.code-editor-sidebar .sidebar-footer .sidebar-info { font-size: 0.85em; color: #aaa; }
.code-editor-sidebar .sidebar-footer button#save-code-sidebar-btn { padding: 7px 15px; font-size: var(--font-size-small); background-color: var(--success-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--transition-fast); }
.code-editor-sidebar .sidebar-footer button#save-code-sidebar-btn:hover { background-color: var(--success-dark-color); }


/* --- Media Queries (Responsivo - Incluye Drawing Tools) --- */
@media only screen and (max-width: 768px) {
  .col { width: 60px; }
  .col .drag-drawflow span { display:none; }
  .col .drag-drawflow i { margin: 0 auto; width: auto; }
  .node-search-container { padding: 5px;}
  #node-search { display: none; }
  .delete-node-type-btn { display: none; }
  .create-node-button span { display: none; }
  .create-node-button i { margin-right: 0; }
  .create-node-button { padding: 8px; margin: 5px 3px; }
  .col-right { width: calc(100vw - 61px); }
  .menu { padding: 0 5px; height: 45px; flex-wrap: nowrap; overflow-x: auto;}
  .menu .btn { padding: 6px; margin-left: 5px; flex-shrink: 0;}
  .menu .btn .button-text { display: none; }
  .menu .btn i { font-size: 1.1em; margin: 0; }
  .menu #module-tabs { max-width: calc(100% - 250px); }

  .controls-container { gap: 5px; /* Tighter gap */ }
  .controls-container.bottom-left { bottom: 10px; left: 10px; }
  .controls-container.bottom-right { bottom: 10px; right: 10px; flex-wrap: wrap; justify-content: flex-end; max-width: 200px; /* Adjust max-width if needed */ }
  .history-controls { gap: 3px; }
  .controls-container button { height: 26px; width: 26px; font-size: 0.9em; }
  /* Drawing tools responsive */
  #colorPicker { width: 26px; height: 26px; margin-right: 3px;}
  .btn-draw, .btn-eraser, .btn-clear-drawing { width: 26px; height: 26px; padding: 4px; font-size: 13px; }
  /* Slider responsive */
  .brush-control { height: 26px; padding: 0 6px; }
  .brush-control i { margin-right: 4px; font-size: 0.8em; }
  .brush-control input[type="range"] { width: 50px; }
  .brush-control #brushSizeValue { min-width: 16px; font-size: 10px; }

  .bar-zoom { padding: 2px; gap: 1px; }
  .bar-zoom button { height: 22px; width: 22px; }

  .editor-status-bar { display: none; }
  .modal-content-base { max-width: 95%; padding: 15px 20px; }
  .modal-content-base h3 { font-size: 1.2em; margin-bottom: 15px;}
  .modal-content-base .modal-buttons { flex-direction: column; gap: 8px; }
  .modal-content-base button { width: 100%; padding: 10px; }
  .code-editor-sidebar { width: 100%; right: -100%; border-left: none; z-index: 1005; }
  .code-editor-sidebar.visible { right: 0; }
}

@media only screen and (max-width: 480px) {
    .controls-container.bottom-right { max-width: 160px; gap: 4px; }
     .menu #module-tabs { max-width: calc(100% - 180px); }
     .menu .btn { padding: 5px; margin-left: 3px; gap: 3px;}
     .menu .btn i { font-size: 1em; }
     /* Hide slider text value on very small screens */
     .brush-control #brushSizeValue { display: none; }
     .brush-control input[type="range"] { width: 40px; margin-right: 0;}
     .brush-control { padding: 0 5px; }
}

/* === Custom Context Menu === */
.custom-context-menu { position: fixed; z-index: 10000; background-color: var(--background-color); border: 1px solid var(--border-color); border-radius: 4px; box-shadow: var(--box-shadow-medium); padding: 5px 0; min-width: 200px; font-size: var(--font-size-small); color: var(--text-dark); }
.custom-context-menu ul { list-style: none; padding: 0; margin: 0; }
.custom-context-menu ul li { padding: 9px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.custom-context-menu ul li:hover { background-color: var(--background-hover-light); color: var(--primary-dark-color); }
.custom-context-menu ul li i { color: var(--text-medium); width: 16px; text-align: center; font-size: 0.95em; }
.custom-context-menu ul li:hover i { color: var(--primary-dark-color); }
.custom-context-menu hr { border: none; border-top: 1px solid var(--border-light-color); margin: 5px 0; }

/* === Node Lock Indicator === */
.drawflow-node .title-box .lock-indicator { margin-left: auto; padding-left: 8px; font-size: 0.9em; color: var(--text-medium); opacity: 0.6; display: inline-flex; align-items: center; }
.drawflow-node.selected .title-box .lock-indicator { color: var(--primary-dark-color); opacity: 0.8; }
.drawflow-node .title-box .lock-indicator.locked { color: var(--warning-color); opacity: 1; }
.drawflow-node .title-box .lock-indicator i { color: inherit !important; }

/* === Node Specific Styles === */
.drawflow-node.green-selectable-node { background-color: #f0f0f0; border-color: #cccccc; width: 240px; }
.drawflow-node.green-selectable-node .title-box { background-color: #e0e0e0; color: var(--text-dark); border-bottom-color: #bdbdbd; }
.drawflow-node.green-selectable-node .title-box i { color: #689f38; }
.drawflow .drawflow-node.green-selectable-node.selected { background-color: #c8e6c9; border-color: var(--success-color); }
.drawflow .drawflow-node.green-selectable-node.selected .title-box { background-color: var(--success-color); color: var(--text-on-primary); border-bottom-color: var(--success-dark-color); }
.drawflow .drawflow-node.green-selectable-node.selected .title-box i { color: var(--text-on-primary); }

.drawflow-node.base-style-for-red-node { background-color: #f3e5f5; border-color: #ce93d8; width: 250px; }
.drawflow-node.base-style-for-red-node .title-box { background-color: #ba68c8; color: var(--text-on-primary); border-bottom-color: #ab47bc; }
.drawflow-node.base-style-for-red-node .title-box i { color: #f44336; }
.drawflow .drawflow-node.light-red-selectable-node.selected { background-color: #ffcdd2; border-color: var(--danger-color); }
.drawflow .drawflow-node.light-red-selectable-node.selected .title-box { background-color: var(--danger-color); color: var(--text-on-primary); border-bottom-color: var(--danger-dark-color); }
.drawflow .drawflow-node.light-red-selectable-node.selected .title-box i { color: var(--text-on-primary); }

/* === Node Resizer === */
.drawflow-node .node-resizer { position: absolute; bottom: 5px; right: 5px; width: 18px; height: 18px; cursor: nwse-resize; display: flex; align-items: center; justify-content: center; z-index: 15; color: var(--text-light); transition: color 0.2s, opacity 0.2s; }
.drawflow-node:hover .node-resizer, .drawflow-node.selected .node-resizer { color: var(--primary-color); }
.drawflow-node .node-resizer i { font-size: 12px; }
.drawflow-locked .drawflow-node .node-resizer { display: none !important; }

.drawflow-node.node-fixed-size { width: 316px; }
.drawflow-node.node-fixed-size .box { min-height: 250px; }

/* === Dotted Grid === */
#drawflow.dotted-grid {
  background-image: radial-gradient(circle, var(--background-grid) 1px, transparent 1px);
  background-size: 20px 20px;
}







/* === CSS additions for YouTube Minimal Node (Place near .image-minimal-node styles) === */
.drawflow-node.youtube-minimal-node {
  padding: 0 !important;
  border: 2px dashed #cccccc;
  background-color: #f8f8f8;
  box-shadow: none;
  overflow: hidden;
  min-width: 160px; /* Default wider for video */
  min-height: 90px; /* Default taller for video aspect ratio */
  width: 320px;  /* Default width */
  height: 180px; /* Default height (16:9 for 320px width) */
  transition: width 0.1s ease-out, height 0.1s ease-out, box-shadow 0.2s, border-color 0.2s, background-color 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}



.youtube-minimal-node .youtube-minimal-content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.youtube-minimal-node .youtube-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #aaaaaa;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  padding: 5px;
  width: 100%;
  height: 100%;
}

.youtube-minimal-node .youtube-placeholder i {
  font-size: 2em; /* Larger icon for YouTube */
  margin-bottom: 8px;
  color: #ff0000; /* YouTube red */
}

.youtube-minimal-node .youtube-placeholder:hover {
  color: #888888;
}
.youtube-minimal-node .youtube-placeholder:hover i {
  color: #cc0000;
}



/* REMOVE OR COMMENT THESE in beautiful.css */
/*
.drawflow-node.youtube-minimal-node:has(iframe[src*="youtube.com/embed/"]) {
  border: none;
  background-color: transparent; 
  box-shadow: var(--box-shadow-light);
}
.youtube-minimal-node:has(iframe[src*="youtube.com/embed/"]) .youtube-placeholder {
  display: none;
}
.youtube-minimal-node iframe[df-youtubeiframe][src*="youtube.com/embed/"] {
  display: block;
}
*/


/* Style for the iframe itself */
.youtube-minimal-node iframe[df-youtubeiframe] {
  display: none; /* Hidden by default */
  width: 100%;
  height: 100%;
  border: none; /* Remove iframe border */
}



.drawflow-node.youtube-minimal-node.selected {
  box-shadow: 0 0 0 3px var(--focus-shadow-color), var(--box-shadow-medium);
  border: 1px solid var(--primary-color);
}



.drawflow .drawflow-node.multi-selected {
  border-color: var(--accent-color) !important; /* Usar un color de acento diferente */
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.3), var(--box-shadow-medium) !important; /* Sombra de acento */
  /* Puedes ajustar el z-index si es necesario para que los multi-seleccionados estén por encima de los no seleccionados, pero debajo del 'selected' principal si lo deseas */
}

/* Asegurar que el estilo de selección principal de Drawflow (azul) tenga prioridad si es el nodo primario de la multi-selección */
.drawflow .drawflow-node.selected.multi-selected {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px var(--focus-shadow-color), var(--box-shadow-medium) !important;
}

.custom-context-menu span.shortcut {
    margin-left: auto;
    font-size: 0.85em;
    color: var(--text-light);
    padding-left: 15px;
}








































/* === END OF FILE beautiful.css === */