/* ===== AISLAMIENTO DE DIMENSIONES ===== */
/* Normalizar solo el dimensionamiento para evitar herencia de estilos padre */
html {
  font-size: 16px !important; /* Forzar tamaño base consistente */
  line-height: 1.2 !important;
}

body {
  font-size: 16px !important; /* Tamaño base consistente */
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
}

/* Normalizar dimensiones de elementos principales */
.app-header, .app-main, .view, .canvas, .drawer {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Asegurar que los botones mantengan tamaño consistente */
button, input, select, textarea {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ===== VARIABLES CSS DE LA APLICACIÓN ===== */
:root{
  --bg:#0f1420;
  --panel:#141b2d;
  --panel-2:#1b2236;
  --text:#e6edf3;
  --muted:#8a98b5;
  --primary:#16c79a;
  --primary-700:#10a882;
  --accent:#50b6ff;
  --danger:#ff6363;
  --wire:#6a7ab8;
}

/* ===== ESTILOS PARA PESTAÑA N8N ===== */
.n8n-config {
  padding: 20px;
}

.n8n-config h3 {
  margin: 0 0 20px 0;
  color: var(--primary);
  font-size: 18px;
}

.n8n-config .form-group {
  margin-bottom: 16px;
}

.n8n-config label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-weight: 500;
}

.n8n-config input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #2a3544;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
}

.n8n-config input[type="checkbox"] {
  margin-right: 8px;
}

.n8n-config button {
  margin-right: 8px;
  margin-bottom: 8px;
}

.n8n-config button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.n8n-status {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  display: none;
}

.n8n-status.success {
  background: rgba(22, 199, 154, 0.1);
  border: 1px solid var(--primary);
  color: var(--primary);
  display: block;
}

.n8n-status.error {
  background: rgba(255, 99, 99, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  display: block;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background:#0f1420;
  color:var(--text);
}
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid #1f2741;background:var(--panel);
  position:sticky;top:0;z-index:10
}
.brand{font-weight:800;letter-spacing:.5px}
.main-actions button{margin-left:8px}

button{background:var(--panel-2);color:var(--text);border:1px solid #263055;border-radius:8px;padding:8px 12px;cursor:pointer}
button.primary{background:var(--primary);border-color:var(--primary)}
button.primary:hover{background:var(--primary-700)}
button.ghost{background:transparent}
button:disabled{opacity:.55;cursor:not-allowed}

.app-main{display:flex;flex-direction:column;height:calc(100vh - 54px)}
.view{display:none;height:100%}
.view.active{display:flex}

/* Dashboard */
#dashboardView{flex-direction:column;padding:16px}
.toolbar{display:flex;gap:12px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid #1f2741;border-radius:12px;padding:12px}
.card h4{margin:4px 0 10px}
.card h4.f-title{cursor:text}
.card .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ✅ Estilos para configuración de email en cards de funnel */
.funnel-email-config {
  margin: 12px 0;
  padding: 10px;
  background: rgba(30, 41, 59, 0.3);
  border: 1px solid #27305a;
  border-radius: 8px;
}

.email-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.funnel-admin-email {
  width: 100%;
  padding: 6px 8px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid #27305a;
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.2s ease;
}

.funnel-admin-email:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(22, 199, 154, 0.2);
}

.funnel-admin-email::placeholder {
  color: #6a7ab8;
  font-style: italic;
}

.email-help {
  display: block;
  font-size: 11px;
  color: #6a7ab8;
  margin-top: 4px;
  font-style: italic;
}

/* Builder */
#builderView{gap:0;width:100%}
.drawer{width:320px;background:var(--panel);border-right:1px solid #1f2741;box-shadow:2px 0 12px rgba(0,0,0,0.3);display:flex;flex-direction:column}
.drawer + .canvas-wrapper .canvas{padding-left:40px}
.drawer.hidden{display:none}
.drawer-tabs{display:flex;border-bottom:1px solid #1f2741}
.drawer-tabs button{flex:1;padding:10px;border:0;background:transparent}
.drawer-tabs button.active{background:var(--panel-2)}
.drawer-content{flex:1;overflow:auto}
.tab{display:none;padding:10px}
.tab.active{display:block}
.code-tab textarea{width:100%;min-height:220px;background:#0b1020;color:#d8e1ff;border:1px solid #27305a;border-radius:8px;padding:10px;font-family:ui-monospace,Menlo,Consolas,monospace}
.code-actions{display:flex;gap:8px;margin-top:8px;align-items:center}
.import-label{display:inline-flex;align-items:center;gap:6px}
.import-label input{display:none}

.canvas-wrapper{flex:1;display:flex;flex-direction:column}
.builder-toolbar{display:flex;gap:8px;padding:10px;border-bottom:1px solid #1f2741;background:var(--panel)}
.builder-toolbar .sep{flex:1}
.canvas{position:relative;flex:1;background:radial-gradient(50% 50% at 50% 50%, #111936 0%, #0d1328 100%);overflow:auto;padding-left:40px}
#stage{will-change:transform}
.wires{position:absolute;inset:0;pointer-events:auto}
.nodes{position:absolute;inset:0}
.node{position:absolute;background:#0e1530;border:1px solid #27305a;border-radius:10px;min-width:180px;max-width:260px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.node header{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-bottom:1px solid #27305a}
.node .title{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.node .handle{width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid #091028}
.node .content{padding:8px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node .port{position:absolute;width:14px;height:14px;border-radius:50%;background:linear-gradient(180deg,#5eb6ff,#3d7dff);border:2px solid #0a1736;box-shadow:0 0 0 2px rgba(10,23,54,.35) inset;cursor:crosshair}
.node .port.right{right:-7px;top:50%;transform:translateY(-50%)}
.node .port.left{left:-7px;top:50%;transform:translateY(-50%);background:linear-gradient(180deg,#8fd1ff,#5aa0ff)}
.node .port.top{top:-7px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#8fd1ff,#5aa0ff)}
.node .port.bottom{bottom:-7px;left:50%;transform:translateX(-50%)}
.node .port:hover{box-shadow:0 0 0 3px rgba(22,199,154,.4)}
.node .subid{padding:6px 8px 8px;user-select:text}
.node .subid .pill{display:inline-block;background:#fff3b0;color:#000;border:1px solid #e0c96a;border-radius:6px;padding:1px 5px;font-size:11px;font-weight:700}
.node .subid .icon{padding:2px 6px;margin-left:6px}
.node .badges{display:flex;gap:6px}
.node .icon{background:#1d2a54;border:1px solid #2a3a74;color:#9ec0ff;border-radius:6px;padding:1px 5px;font-size:11px;cursor:pointer}
.node .icon.danger{background:#2a1d2a;border-color:#5a2a2a;color:#ff9e9e}
.badge{background:#1d2a54;color:#8cb7ff;border-radius:6px;padding:1px 5px;font-size:11px}

/* Inicio y pasos */
.node .icon.star{background:#1d2a3a;border:1px solid #2a3d6a;color:#ffd36a}
.node .icon.star.active{background:#2d4a2a;border-color:#3d6a3d;color:#eaffb6}
.badge.step{background:#25345f;color:#9ec0ff}

/* Modal base */
.modal{border:2px solid #3656d8;border-radius:12px;background:var(--panel);color:var(--text);padding:0;max-width:680px;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.modal form, .modal article{padding:16px}
.modal h3{margin:0 0 10px}
.modal label{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.modal input, .modal select, .modal textarea{background:#0b1020;color:#d8e1ff;border:1px solid #27305a;border-radius:8px;padding:8px}
.modal menu{display:flex;gap:10px;justify-content:flex-end;padding:12px;border-top:1px solid #1f2741;margin:0}
.modal.large{width:95vw;max-width:none}

/* Page editor */
.page-editor{display:flex;min-height:70vh}
.pe-sidebar{width:320px;border-right:1px solid #1f2741;background:var(--panel)}
.page-editor.preview-hidden .pe-sidebar{width:50%;border-right:0}
.pe-sidebar.hidden{display:none}
.pe-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid #1f2741;gap:4px;padding:4px 0;}
.pe-tabs button{flex:0 1 auto;min-width:70px;padding:8px 12px;background:transparent;border:0;white-space:nowrap;border-radius:6px 6px 0 0;margin-bottom:-1px;}
.pe-tabs button.active{background:var(--panel-2)}
.pe-content{padding:8px}
.pe-content .code-tab textarea{min-height:260px}
.pe-canvas{flex:1;background:#0b1124}
#pageEditorModal .pe-canvas.hidden{display:none}
#pePreview{border:0;width:100%;height:100%}
/* Modo diseño: estilos mínimos para resaltar elementos clicables */
#pePreview.design-mode { outline: 0 }

/* Helpers */
.list{display:grid;gap:8px}
.list .item{padding:8px;border:1px solid #253058;border-radius:8px;background:#0e1632}
.list .item:hover{border-color:#3656d8}
/* Galería de imágenes */
.grid-images{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.image-card{padding:10px;}
.image-thumb{background:#0b1124;border:1px solid #1f2741;border-radius:8px;display:flex;align-items:center;justify-content:center;height:120px;overflow:hidden}
.image-thumb img{max-width:100%;max-height:100%}
/* Dropzone */
.dropzone{border:1px dashed #2f3a66;border-radius:8px;background:#0b1124;color:#8a98b5;padding:10px;text-align:center;margin-bottom:8px}
.dropzone.drag{background:#0e1632;border-color:#3a4f9e;color:#b8c6ff}

/* SVG wires */
.wire{stroke:var(--wire);stroke-width:2.5;fill:none;pointer-events:stroke;cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.wire.active{stroke:var(--accent)}
.wire.selected{stroke:var(--accent);stroke-width:3.5}
.wire-label{font-size:12px;fill:#eaf2ff;opacity:.95;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.wire-label-bg{fill:rgba(6,12,28,.65);stroke:#1e2a4d;stroke-width:.5;pointer-events:none}

/* Node color by type */
.node.page{border-color:#27405a}
.node.modal{border-color:#4a275a;background:#111038}
.node.decision{border-color:#2a5a27;background:#102a16}
.node.page header{background:rgba(39,64,90,.25)}
.node.modal header{background:rgba(74,39,90,.25)}
.node.decision header{background:rgba(42,90,39,.25)}

/* Highlight wires from start path */
.wire.from-start{stroke:#7ab6ff}

/* Hover/focus highlighting */
.node.dim{opacity:.35}
.wire.dim{opacity:.25}
.node.highlight{outline:2px solid rgba(80,182,255,.6)}
.wire.highlight{stroke:#8fd1ff;stroke-width:3.2}

/* Minimap */
#minimap{position:absolute;right:10px;bottom:10px;width:200px;height:130px;border:1px solid #1f2741;border-radius:8px;background:rgba(11,17,36,.8);z-index:2;overflow:hidden}
#minimap canvas{width:100%;height:100%;display:block}
#minimap .viewbox{position:absolute;border:2px solid #8fd1ff;box-shadow:0 0 0 2px rgba(143,209,255,.2);pointer-events:none;border-radius:4px}

.minimap-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0,0,0,0.7);
  border: 1px solid #27305a;
  color: #e6edf3;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  padding: 4px 6px;
  z-index: 3;
  transition: background 0.2s;
}

.minimap-toggle:hover {
  background: rgba(22,199,154,0.8);
  border-color: #16c79a;
}

.minimap-content {
  position: relative;
  width: 100%;
  height: 100%;
}

#minimap .minimap-content canvas {
  width: 100%;
  height: 100%;
  display: block;
}

#minimap .minimap-content .viewbox {
  position: absolute;
  border: 2px solid #8fd1ff;
  box-shadow: 0 0 0 2px rgba(143,209,255,.2);
  pointer-events: none;
  border-radius: 4px;
}

/* Swimlanes */
.lane{position:absolute;left:0;right:0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border-top:1px dashed rgba(255,255,255,.06);border-bottom:1px dashed rgba(255,255,255,.06);pointer-events:none;z-index:0}

/* Hotspots clicables sobre conexiones (debug/edición) */
.wire-hotspot{position:absolute;border:1px dashed rgba(255,255,255,.15);border-radius:6px;width:110px;height:28px;pointer-events:auto;cursor:pointer;background:rgba(255,255,255,0.02)}

/* Responsive */
@media (max-width: 1024px){
  .drawer{width:280px}
}
@media (max-width: 820px){
  #builderView{flex-direction:column}
  .drawer{width:100%;height:320px}
}

/* Ocultar botones solo útiles en localhost cuando esté en servidor online */
body:not([data-localhost]) [data-local-only] {
  display: none !important;
}

/* Menú reorganizado en modal de edición: fila horizontal con iconos */
.page-editor-menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #1f2741;
  background: var(--panel);
  justify-content: space-around;
  align-items: center;
}

.page-editor-menu button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 12px;
  min-width: 60px;
}

.page-editor-menu .icon {
  font-size: 16px;
  margin: 0;
}

/* Estilos para pestaña Bloques */
#pe-blocks { padding: 16px; }
.form-block-card, .input-card { 
  background: rgba(30, 41, 59, 0.3); 
  border: 1px solid #27305a; 
  border-radius: 8px; 
  padding: 16px; 
  margin-bottom: 12px; 
  transition: box-shadow .2s; 
}
.form-block-card:hover, .input-card:hover { 
  box-shadow: 0 0 0 2px rgba(22, 199, 154, 0.3); 
}
.input-fields { display: grid; gap: 12px; margin-top: 12px; }
.input-field { display: flex; flex-direction: column; gap: 4px; }
.input-field label { font-size: 14px; color: #e6edf3; }
.input-field input, .input-field select, .input-field textarea { 
  background: rgba(30, 41, 59, 0.5); 
  border: 1px solid #27305a; 
  border-radius: 4px; 
  padding: 8px; 
  color: #e6edf3; 
  font-size: 14px; 
}
.validations-list { margin-top: 8px; }
.validation-item { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  margin-bottom: 6px; 
  padding: 6px; 
  background: rgba(39, 48, 90, 0.3); 
  border-radius: 4px; 
}
.validation-item select { flex: 1; }
.validation-item input { 
  background: rgba(30, 41, 59, 0.5); 
  border: 1px solid #27305a; 
  border-radius: 4px; 
  padding: 4px 6px; 
  color: #e6edf3; 
  font-size: 12px; 
  min-width: 200px; 
}
.btn-add-validation, .btn-remove-input, .btn-edit-validation { 
  background: #16c79a; 
  color: #06121b; 
  border: none; 
  padding: 4px 8px; 
  border-radius: 4px; 
  font-size: 12px; 
  cursor: pointer; 
}
.btn-remove-validation { background: #ff6363; color: white; }
.tiny { padding: 2px 6px; font-size: 12px; min-height: auto; }
.small { padding: 6px 12px; font-size: 13px; }
#btnAddInput, #btnAddForm { margin-top: 12px; }

/* Título del funnel seleccionado */
.title-funnel {
  color: #16c79a;
  font-weight: 600;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(22, 199, 154, 0.1);
  border-radius: 4px;
  font-size: 0.9em;
}

.title-funnel::before {
  content: "→ ";
  opacity: 0.7;
}