/* ============================================================
   R8T · editor.css  (v2 — flujo apilable híbrido)
   ============================================================ */

.editor-col { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; }

/* ---------- Barra de explicación (qué hace la estrategia) ---------- */
.explain {
  background: var(--rt-surface); border-bottom: 1px solid var(--rt-line);
  padding: 12px 18px; display: flex; gap: 14px; align-items: flex-start; max-height: 132px; overflow: auto;
}
.explain__icon { width: 34px; height: 34px; border-radius: 10px; background: var(--rt-navy); color: #fff; display: grid; place-items: center; flex: none; }
.explain__icon svg { width: 18px; height: 18px; }
.explain__body { min-width: 0; flex: 1; }
.explain__title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--rt-gray-400); margin-bottom: 4px; }
.explain__steps { display: flex; flex-direction: column; gap: 3px; }
.explain__step { font-size: 13px; color: var(--rt-ink); line-height: 1.45; display: flex; gap: 7px; align-items: baseline; }
.explain__num { flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--rt-blue-050); color: var(--rt-blue); font-size: 10.5px; font-weight: 800; display: inline-grid; place-items: center; transform: translateY(2px); }
.explain__step.cond .explain__num { background: color-mix(in srgb, var(--cat-logica) 16%, #fff); color: var(--cat-logica); }
.explain__empty { font-size: 13px; color: var(--rt-gray-400); }

/* ---------- Canvas con cuadrícula ---------- */
.canvas-wrap { position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.canvas {
  position: absolute; inset: 0; overflow: auto;
  background-color: var(--rt-bg);
  background-image:
    radial-gradient(circle, #ccd4e6 1.1px, transparent 1.1px),
    linear-gradient(to right, rgba(23,30,67,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,30,67,.03) 1px, transparent 1px);
  background-size: 24px 24px, 120px 120px, 120px 120px;
  cursor: grab;
}
.canvas.panning { cursor: grabbing; }
.world { min-width: 100%; min-height: 100%; padding: 34px 40px 120px; box-sizing: border-box; }
.flow { width: max-content; margin: 0 auto; }

/* ---------- Conector vertical ---------- */
.connector { height: 16px; width: 2px; background: var(--rt-gray-300); margin: 0 auto; border-radius: 2px; }

/* ---------- Tarjeta de destino (producto / grupo) ---------- */
.target-card {
  width: 460px; margin: 0 auto; background: linear-gradient(180deg, #fff, var(--rt-teal-050));
  border: 1.5px solid var(--rt-teal); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.target-card__row { display: flex; align-items: center; gap: 10px; }
.target-card__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--rt-teal); color: #08312a; display: grid; place-items: center; flex: none; }
.target-card__ic svg { width: 19px; height: 19px; }
.target-card__l { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--rt-teal-600); }
.target-card select { border: 1px solid var(--rt-line); border-radius: 8px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: var(--rt-ink); background: #fff; max-width: 100%; }
.target-card__seg { display: inline-flex; background: #fff; border: 1px solid var(--rt-line); border-radius: 8px; overflow: hidden; }
.target-card__seg button { border: none; background: transparent; padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--rt-gray); }
.target-card__seg button.on { background: var(--rt-teal); color: #08312a; }
.target-card__meta { font-size: 11.5px; color: var(--rt-gray-400); margin-top: 6px; }

/* ---------- Pila ---------- */
.stack { display: flex; flex-direction: column; align-items: stretch; }
/* Raíz: centra los bloques; los simples tienen ancho fijo, los contenedores crecen */
.stack--root { align-items: center; }
.stack--root > .sb, .stack--root > .connector, .stack--root > .stack-add { width: 460px; }
.stack--root > .sc { width: auto; }

/* ---------- Bloque simple ---------- */
.sb {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  background: var(--rt-surface); border: 1px solid var(--rt-line); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-sm); cursor: default;
  transition: box-shadow .15s, border-color .15s;
}
.sb:hover { box-shadow: var(--shadow-md); }
.sb.is-sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent), var(--shadow-md); }
.sb.dragging, .sc.dragging { opacity: .45; }
.grip { color: var(--rt-gray-300); cursor: grab; margin-top: 3px; flex: none; }
.grip svg { width: 15px; height: 15px; }
.grip:active { cursor: grabbing; }
.sb__icon { width: 30px; height: 30px; border-radius: 8px; color: #fff; display: grid; place-items: center; flex: none; }
.sb__icon svg { width: 17px; height: 17px; }
.sb__content { flex: 1; min-width: 0; }
.sb__title { font-size: 13.5px; font-weight: 800; color: var(--rt-ink); margin-bottom: 6px; }
.sb__fields { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.sb__menu, .sc__head .sb__menu { border: none; background: transparent; color: var(--rt-gray-300); width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.sb__menu:hover { background: var(--rt-surface-2); color: var(--rt-gray); }

/* ---------- Contenedor condicional ---------- */
.sc {
  position: relative; background: color-mix(in srgb, var(--accent) 6%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--rt-line));
  border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.sc.is-sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent), var(--shadow-md); }
.sc__head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; flex-wrap: wrap; }
.sc__when { font-size: 14px; font-weight: 900; color: var(--accent); }
.sc__cond { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; flex: 1; }
.sc { max-width: 860px; }
.sc__branches { display: flex; gap: 0; border-top: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--rt-line)); }
.sc__branch { flex: 1; min-width: 276px; padding: 12px; display: flex; flex-direction: column; }
.sc__branch + .sc__branch { border-left: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--rt-line)); }
.sc__branch [data-slot] { flex: 1; display: flex; }
.sc__branch [data-slot] > .stack { flex: 1; min-height: 46px; }
.sc__label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.sc__label svg { width: 13px; height: 13px; }
.sc__label--ok { color: var(--ok); }
.sc__label--muted { color: var(--rt-gray-400); }
.sc__label--accent { color: var(--accent); }

/* Fantasma de arrastre */
.drag-ghost { position: fixed; z-index: 9999; pointer-events: none; background: var(--rt-navy); color: #fff; font-size: 12px; font-weight: 800; padding: 7px 12px; border-radius: 9px; box-shadow: var(--shadow-lg); opacity: .95; }
.sc .stack { width: auto; }
.sc .sb { border-radius: 10px; }

/* ---------- Botón agregar ---------- */
.stack-add {
  margin: 8px auto 0; display: flex; align-items: center; gap: 6px; justify-content: center;
  border: 1.5px dashed var(--rt-gray-300); background: rgba(255,255,255,.6); color: var(--rt-gray);
  border-radius: 10px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; width: 100%;
}
.stack-add:hover { border-color: var(--rt-blue); color: var(--rt-blue); background: var(--rt-blue-050); }
.stack-add svg { width: 15px; height: 15px; }

/* ---------- Estado vacío ---------- */
.flow-empty { width: 460px; margin: 12px auto 0; text-align: center; color: var(--rt-gray-400); background: rgba(255,255,255,.72); border: 1.5px dashed var(--rt-gray-300); border-radius: 14px; padding: 22px 20px; }
.flow-empty svg { width: 26px; height: 26px; color: var(--rt-teal-600); }
.flow-empty b { display: block; color: var(--rt-gray); margin: 7px 0 4px; font-size: 14px; }
.flow-empty span { font-size: 12.5px; line-height: 1.5; }

/* ---------- Marcador de drop ---------- */
.drop-marker { height: 4px; background: var(--rt-blue); border-radius: 3px; margin: 6px 0; box-shadow: 0 0 0 3px var(--rt-blue-050); }

/* ---------- Controles en línea ---------- */
.fld { display: inline-flex; align-items: center; gap: 6px; }
.fld__l { font-size: 12px; color: var(--rt-gray); font-weight: 600; }
.ctrl--num { display: inline-flex; align-items: stretch; border: 1px solid var(--rt-line); border-radius: 8px; overflow: hidden; background: #fff; height: 28px; }
.ctrl__step { width: 24px; border: none; background: var(--rt-surface-2); color: var(--rt-gray); font-size: 15px; font-weight: 700; }
.ctrl__step:hover { background: var(--rt-blue-050); color: var(--rt-blue); }
.ctrl__in { width: 54px; border: none; outline: none; text-align: center; font-size: 13px; font-weight: 800; color: var(--rt-ink); background: transparent; -moz-appearance: textfield; }
.ctrl__in::-webkit-outer-spin-button, .ctrl__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ctrl__u { display: grid; place-items: center; padding: 0 7px; font-size: 11px; font-weight: 700; color: var(--rt-gray-400); background: var(--rt-surface-2); }
.ctrl__u--sel { border: none; border-left: 1px solid var(--rt-line); background: var(--rt-surface-2); color: var(--rt-blue); font-size: 12px; font-weight: 800; padding: 0 6px; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; text-align: center; }
.ctrl__u--sel:hover { background: var(--rt-blue-050); }

/* Herramientas del bloque (mover / opciones) */
.sb__tools { display: flex; align-items: center; gap: 1px; flex: none; }
.sb__mv { border: none; background: transparent; color: var(--rt-gray-300); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
.sb__mv:hover { background: var(--rt-blue-050); color: var(--rt-blue); }
.sb__mv svg { width: 14px; height: 14px; }
.sb__mv[data-move="up"] svg { transform: rotate(180deg); }
.ctrl--sel { border: 1px solid var(--rt-line); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; font-weight: 700; color: var(--rt-ink); background: #fff; height: 28px; max-width: 200px; }
.ctrl--num:focus-within, .ctrl--sel:focus { border-color: var(--rt-blue); box-shadow: 0 0 0 3px var(--rt-blue-050); }
.fld--tog { cursor: pointer; }
.fld--tog input { display: none; }
.tgl { width: 34px; height: 19px; border-radius: 20px; background: var(--rt-line); position: relative; transition: background .15s; flex: none; }
.tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .15s; }
.fld--tog input:checked + .tgl { background: var(--rt-blue); }
.fld--tog input:checked + .tgl::after { left: 17px; }

/* ---------- Menús flotantes (agregar / opciones) ---------- */
.addmenu { position: fixed; z-index: var(--z-modal); background: #fff; border: 1px solid var(--rt-line); border-radius: 12px; box-shadow: var(--shadow-lg); width: 272px; overflow: hidden; }
.addmenu--node { width: 176px; padding: 6px; }
.addmenu--node button { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--rt-ink); text-align: left; }
.addmenu--node button:hover { background: var(--rt-blue-050); color: var(--rt-blue); }
.addmenu--node button.danger:hover { background: var(--danger-050); color: var(--danger); }
.addmenu--node button svg { width: 15px; height: 15px; }
.addmenu--node hr { border: none; border-top: 1px solid var(--rt-line); margin: 5px 4px; }
.addmenu__search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--rt-line); }
.addmenu__search svg { width: 15px; height: 15px; color: var(--rt-gray-400); }
.addmenu__search input { border: none; outline: none; width: 100%; font-size: 13px; }
.addmenu__list { max-height: 300px; overflow: auto; padding: 6px; }
.addmenu__cat { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rt-gray-400); padding: 8px 8px 4px; }
.addmenu__cat .dot { width: 8px; height: 8px; border-radius: 3px; }
.addmenu__item { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: transparent; padding: 7px 8px; border-radius: 9px; text-align: left; }
.addmenu__item:hover { background: color-mix(in srgb, var(--accent) 10%, #fff); }
.addmenu__item .ai { width: 26px; height: 26px; border-radius: 7px; color: #fff; display: grid; place-items: center; flex: none; }
.addmenu__item .ai svg { width: 15px; height: 15px; }
.addmenu__item b { font-size: 12.5px; color: var(--rt-ink); display: block; }
.addmenu__item i { font-size: 11px; color: var(--rt-gray-400); font-style: normal; }

/* ---------- Controles de zoom ---------- */
.canvas-controls { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 15; }
.canvas-controls .grp { background: #fff; border: 1px solid var(--rt-line); border-radius: 12px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; }
.canvas-controls button { border: none; background: #fff; width: 38px; height: 38px; display: grid; place-items: center; color: var(--rt-gray); }
.canvas-controls button:hover { background: var(--rt-blue-050); color: var(--rt-blue); }
.canvas-controls button svg { width: 17px; height: 17px; }
.canvas-controls .grp button + button { border-top: 1px solid var(--rt-line); }
.zoom-label { font-size: 11px; font-weight: 800; color: var(--rt-gray-400); text-align: center; padding: 5px 0; background: #fff; }