/* ═══════════════════════════════════════════════════════
   LEX CONTENT AGENTS — Contenido: Estilos Exclusivos
   Preset cards, pipeline items, wf-diagram, togTrack,
   content-badge, sec-cat, notif-table, floating export.
   Sobreescribe shared.css donde los diseños difieren.
════════════════════════════════════════════════════════ */

:root{
  --gold:#F26522;--gold-light:#ff7f42;--gold-dim:#9a4419;
  --gold-glow:rgba(242,101,34,.12);
  --d0:#040407;--d1:#0a0a0f;--d2:#0f0f18;--d3:#111118;--d4:#1a1a28;--d5:#22223a;
  --b1:#1c1c2c;--b2:#2a2a42;--b3:#3a3a55;
  --t0:#fff;--t1:#e8e8f0;--t2:#bbbbd0;--t3:#7a7a9a;--t4:#4a4a6a;
  --blue:#3a7bd5;--teal:#2ab8a8;--red:#e05252;--green:#4caf82;--warn:#e8a44c;
  --purple:#2e93e0;--cyan:#00d4e8;
  --r:8px;--rl:12px;
  --tr:.22s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:var(--d0);color:var(--t1);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--d1)}
::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:4px}

/* HEADER */
.hdr{background:linear-gradient(180deg,var(--d2),var(--d1));border-bottom:1px solid var(--b1);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:300;backdrop-filter:blur(20px)}
.hdr-left{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:14px;color:var(--gold);box-shadow:0 0 12px rgba(242,101,34,.15);flex-shrink:0;position:relative;overflow:hidden}
.logo::before{content:'';position:absolute;inset:3px;border:1px solid var(--gold-dim);border-radius:50%;opacity:.3}
.logo img{width:82%;height:82%;object-fit:contain}
.brand{font-family:'Syne',sans-serif;font-weight:800;font-size:16px;color:var(--gold);letter-spacing:3px}
.brand-sub{font-size:9px;color:var(--t4);letter-spacing:2px;text-transform:uppercase}
.hdr-right{display:flex;align-items:center;gap:8px}
.badge{background:var(--gold-glow);border:1px solid rgba(242,101,34,.25);color:var(--gold-light);font-size:9px;font-weight:600;padding:4px 10px;border-radius:16px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.badge i{margin-right:4px}
.icon-btn{background:0 0;border:1px solid var(--b2);color:var(--t3);width:32px;height:32px;border-radius:var(--r);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0}
.icon-btn:hover{border-color:var(--gold-dim);color:var(--gold)}

/* TAB NAV */
.hdr-tabs{display:flex;gap:6px;align-items:center}
.hdr-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r);font-size:11px;font-weight:600;cursor:pointer;text-decoration:none;transition:var(--tr);letter-spacing:.3px;border:1px solid var(--b2);color:var(--t3)}
.hdr-tab:hover{border-color:var(--gold-dim);color:var(--gold)}
.hdr-tab.active{background:var(--gold-glow);border-color:var(--gold);color:var(--gold-light)}
.hdr-tab i{font-size:12px}

/* STEPS BAR */
.steps{background:var(--d1);padding:0 24px;border-bottom:1px solid var(--b1)}
.steps-inner{display:flex;gap:0;height:46px;overflow-x:auto}
.steps::-webkit-scrollbar{height:2px}
.st{display:flex;align-items:center;gap:6px;padding:0 12px;font-size:10px;font-weight:500;color:var(--t4);border-bottom:2px solid transparent;cursor:pointer;transition:var(--tr);white-space:nowrap;flex-shrink:0;user-select:none}
.st:hover{color:var(--t3)}
.st.on{color:var(--gold-light);border-bottom-color:var(--gold)}
.st.done{color:var(--green)}
.st-n{width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;transition:var(--tr)}
.st.done .st-n{background:var(--green);border-color:var(--green);color:#fff}
.st-label{display:inline}

/* LAYOUT */
.layout{display:flex;min-height:calc(100vh - 107px)}
.form-panel{flex:1;min-width:0;padding-bottom:80px}
.preview-panel{width:0;overflow:hidden;background:var(--d1);border-left:1px solid var(--b1);transition:width .35s ease;display:flex;flex-direction:column;position:sticky;top:107px;height:calc(100vh - 107px)}
.preview-panel.open{width:420px}
.preview-head{padding:14px 16px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.preview-head h3{font-size:12px;font-weight:600;color:var(--gold);letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.preview-body{flex:1;overflow-y:auto;padding:12px}
.preview-code{background:var(--d0);border:1px solid var(--b1);border-radius:var(--r);padding:14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--green);line-height:1.7;white-space:pre-wrap;word-break:break-all;min-height:100%}

/* MAIN CONTENT AREA */
.mc{max-width:880px;margin:0 auto;padding:28px 28px 20px}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.step-c{animation:fadeIn .25s ease}
.sh{margin-bottom:24px}
.sh h2{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;color:var(--t0);margin-bottom:4px}
.sh p{font-size:12px;color:var(--t3);line-height:1.6}
.gold-line{width:44px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin:8px 0}
.content-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:16px;font-size:10px;font-weight:700;background:linear-gradient(135deg,rgba(46,147,224,.2),rgba(0,212,232,.2));border:1px solid rgba(46,147,224,.4);color:#a9d6f5;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}

/* CARDS */
.card{background:var(--d3);border:1px solid var(--b1);border-radius:var(--rl);padding:22px;margin-bottom:14px;transition:var(--tr);position:relative}
.card:hover{border-color:var(--b2)}
.ct{font-size:11px;font-weight:600;color:var(--gold);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:7px}
.ct i{font-size:13px;width:16px;text-align:center}

/* INFO BOXES */
.ib{border-radius:var(--r);padding:11px 14px;font-size:11px;line-height:1.6;margin-bottom:16px}
.ib strong{font-weight:600}
.ib i{margin-right:4px}
.ib-g{background:rgba(242,101,34,.05);border:1px solid rgba(242,101,34,.18);color:var(--gold-light)}
.ib-g strong{color:var(--gold)}
.ib-b{background:rgba(58,123,213,.05);border:1px solid rgba(58,123,213,.18);color:#8ab4f8}
.ib-b strong{color:#7fb3ff}
.ib-r{background:rgba(224,82,82,.06);border:1px solid rgba(224,82,82,.18);color:#f09090}
.ib-r strong{color:var(--red)}
.ib-p{background:rgba(46,147,224,.06);border:1px solid rgba(46,147,224,.25);color:#a9d6f5}
.ib-p strong{color:#6bbef2}

/* FORM */
.fg{margin-bottom:16px}.fg:last-child{margin-bottom:0}
label{display:block;font-size:11px;font-weight:500;color:var(--t2);margin-bottom:6px}
label .req{color:var(--gold);margin-left:2px}
label .h{font-weight:400;color:var(--t4);font-size:10px;margin-left:4px}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=time],input[type=password],textarea,select{
  width:100%;background:var(--d1);border:1px solid var(--b1);border-radius:6px;
  padding:9px 12px;font-family:inherit;font-size:12.5px;color:var(--t1);outline:0;transition:var(--tr)
}
input:focus,textarea:focus,select:focus{border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(242,101,34,.06)}
input::placeholder,textarea::placeholder{color:var(--t4)}
select option{background:var(--d2);color:var(--t1)}
textarea{resize:vertical;min-height:70px;line-height:1.6}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.col3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* SLIDER */
.slider-wrap{display:flex;align-items:center;gap:12px}
.slider-wrap input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--b2);border-radius:2px;outline:0;border:0;padding:0}
.slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 8px rgba(242,101,34,.3)}
.slider-val{min-width:40px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--gold-light)}

/* CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}
.chip{display:flex;align-items:center;gap:6px;padding:7px 12px;background:var(--d1);border:1px solid var(--b1);border-radius:var(--r);cursor:pointer;font-size:11.5px;color:var(--t3);transition:var(--tr);user-select:none;position:relative}
.chip:hover{border-color:var(--b2);color:var(--t2)}
.chip.on{background:var(--gold-glow);border-color:var(--gold-dim);color:var(--gold-light)}
.chip.on i{color:var(--gold)}
.chip i{font-size:13px;width:15px;text-align:center}

/* FEATURE CARDS (MODULES) */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.fc{background:var(--d1);border:1px solid var(--b1);border-radius:var(--r);padding:15px;cursor:pointer;transition:var(--tr);position:relative}
.fc:hover{border-color:var(--b2);transform:translateY(-1px)}
.fc.on{border-color:rgba(46,147,224,.5);background:rgba(46,147,224,.05)}
.fc-icon{font-size:18px;margin-bottom:8px;color:var(--t4);transition:var(--tr)}
.fc.on .fc-icon{color:#6bbef2}
.fc-name{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:3px}
.fc-desc{font-size:10.5px;color:var(--t4);line-height:1.5}
.fc-chk{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:9px;color:transparent;transition:var(--tr)}
.fc.on .fc-chk{background:var(--purple);border-color:var(--purple);color:#fff}

/* PRESET CARDS */
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:10px}
.preset-card{background:var(--d1);border:1px solid var(--b1);border-radius:var(--rl);padding:14px;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden}
.preset-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.02));pointer-events:none}
.preset-card:hover{border-color:var(--b2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.preset-card.on{border-color:var(--gold-dim);background:var(--gold-glow);box-shadow:0 0 20px rgba(242,101,34,.1)}
.preset-card.on .preset-chk{background:var(--gold);border-color:var(--gold);color:var(--d0)}
.preset-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px;border:2px solid var(--b2);transition:var(--tr);background:var(--d2)}
.preset-card.on .preset-avatar{border-color:var(--gold-dim)}
.preset-name{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:2px}
.preset-cat{font-size:9px;font-weight:600;color:var(--t4);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}
.preset-desc{font-size:10px;color:var(--t3);line-height:1.5}
.preset-chk{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:9px;color:transparent;transition:var(--tr)}
.preset-group-title{font-size:10px;font-weight:700;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.preset-group-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--gold-dim),transparent)}

/* PIPELINE / SORTABLE */
.pipeline-wrap{display:flex;gap:20px}
.pipeline-list{flex:1;display:flex;flex-direction:column;gap:8px}
.pipeline-item{background:var(--d2);border:1px solid var(--b2);border-radius:var(--rl);overflow:hidden;transition:var(--tr);cursor:grab}
.pipeline-item:active{cursor:grabbing}
.pipeline-item.sortable-ghost{opacity:.4;background:var(--d4)}
.pipeline-item.sortable-drag{box-shadow:0 12px 40px rgba(0,0,0,.4)}
.pi-header{display:flex;align-items:center;gap:10px;padding:12px 16px;user-select:none}
.pi-drag{color:var(--t4);font-size:12px;cursor:grab}
.pi-icon{width:32px;height:32px;border-radius:8px;background:var(--d3);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--purple);flex-shrink:0}
.pi-info{flex:1}
.pi-name{font-size:12px;font-weight:600;color:var(--t1)}
.pi-step{font-size:9px;color:var(--t4);letter-spacing:1px}
.pi-expand{background:0 0;border:1px solid var(--b2);color:var(--t4);width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0}
.pi-expand:hover{border-color:var(--gold-dim);color:var(--gold)}
.pi-body{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s ease}
.pi-body.open{padding:0 16px 16px;max-height:600px}

/* PIPELINE FLOW PREVIEW */
.pipeline-flow{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:14px;background:var(--d2);border:1px solid var(--b1);border-radius:var(--r);margin-top:16px}
.pf-node{background:var(--d4);border:1px solid var(--b2);border-radius:6px;padding:6px 10px;font-size:10px;color:var(--t2);font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:5px}
.pf-node i{font-size:10px;color:var(--purple)}
.pf-node.trigger{border-color:var(--gold-dim);color:var(--gold-light)}
.pf-node.trigger i{color:var(--gold)}
.pf-arrow{color:var(--b3);font-size:12px}

/* API ROWS */
.api-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--d1);border:1px solid var(--b1);border-radius:var(--r);margin-bottom:8px;flex-wrap:wrap;transition:var(--tr)}
.api-row:hover{border-color:var(--b2)}
.api-row .api-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;border:1px solid var(--b2)}
.api-row .api-fields{flex:1;display:flex;flex-direction:column;gap:6px;min-width:180px}
.api-row .api-label{font-size:12px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:5px}
.api-row .api-label small{font-size:9px;color:var(--t4);font-weight:400}
.api-row .api-inputs{display:flex;gap:6px;flex-wrap:wrap}
.api-row .api-inputs input{flex:1;min-width:120px;padding:7px 10px;font-size:11px}
.api-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:10px;color:var(--t3);transition:var(--tr);white-space:nowrap}
.api-toggle.on{color:var(--green)}
.api-toggle i{font-size:14px}

/* TABLE */
.stbl{width:100%;border-collapse:collapse}
.stbl th{font-size:10px;font-weight:600;color:var(--t4);text-transform:uppercase;letter-spacing:.8px;padding:7px 8px;text-align:left;border-bottom:1px solid var(--b2)}
.stbl td{padding:6px 8px;border-bottom:1px solid var(--b1);vertical-align:middle}
.stbl input[type=text],.stbl input[type=number]{min-width:0;font-size:11.5px;padding:7px 9px}
.stbl input[type=checkbox]{width:15px;height:15px;accent-color:var(--gold);cursor:pointer}

/* BUTTONS */
.btn-i{background:var(--d4);border:1px solid var(--b2);color:var(--t3);width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0}
.btn-i:hover{border-color:var(--gold-dim);color:var(--gold)}
.btn-i.dng:hover{border-color:var(--red);color:var(--red)}
/* SP-MEDIA P9A: Botón ⚙️ en presets activos — tamaño coherente con ✕ */
.preset-card .btn-i,
#activePresetsBox .btn-i{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;margin-right:4px;font-size:12px;background:rgba(255,255,255,0.05);border:1px solid var(--bd,var(--b2));color:var(--t2);cursor:pointer;transition:all .2s}
.preset-card .btn-i:hover,
#activePresetsBox .btn-i:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.preset-card .btn-i.dng:hover,
#activePresetsBox .btn-i.dng:hover{background:#c33;color:#fff;border-color:#c33}
/* SP-MEDIA P9B: Preview de parámetros cargados en presets activos */
.preset-active-preview{margin-top:8px;padding:8px;background:rgba(242,101,34,0.05);border-radius:6px;font-size:10px;color:var(--t3);line-height:1.5}
.preset-active-preview strong{color:var(--gold)}
.btn-add{background:0 0;border:1px dashed var(--b2);color:var(--t4);padding:7px 12px;border-radius:6px;cursor:pointer;font-size:11px;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:var(--tr);margin-top:3px}
.btn-add:hover{border-color:var(--gold-dim);color:var(--gold)}
.dlist-row{display:flex;gap:6px;align-items:center}
.dlist-row input{flex:1}

/* NAV BAR */
.nav{position:fixed;bottom:0;left:0;right:0;background:rgba(4,4,7,.92);border-top:1px solid var(--b1);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(16px);z-index:200}
.btn{padding:9px 20px;border-radius:6px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:var(--tr);letter-spacing:.3px;display:inline-flex;align-items:center;gap:6px}
.btn-g{background:0 0;border:1px solid var(--b2);color:var(--t3)}
.btn-g:hover{border-color:var(--t3);color:var(--t1)}
.btn-gold{background:var(--gold);color:var(--d0)}
.btn-gold:hover{background:var(--gold-light)}
.btn-ok{background:var(--green);color:#fff}
.btn-ok:hover{background:#5fc092}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:#b06fd0}
.sc{font-size:11px;color:var(--t4)}.sc span{color:var(--gold);font-weight:600}
.hidden{display:none!important}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.modal-bg.on{display:flex}
.modal{background:var(--d2);border:1px solid var(--b2);border-radius:var(--rl);padding:24px;width:90%;max-width:520px;max-height:85vh;overflow-y:auto}
.modal-wide{max-width:720px}
.modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-h h3{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:8px}
.modal-x{background:0 0;border:0;color:var(--t4);font-size:16px;cursor:pointer}

/* OUT SECTION */
.out-sec{background:var(--d2);border:1px solid var(--gold-dim);border-radius:var(--rl);padding:28px;margin-top:16px;text-align:center;box-shadow:0 0 30px rgba(242,101,34,.06)}
.out-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;color:var(--gold);margin-bottom:4px}
.out-sub{font-size:12px;color:var(--t3);margin-bottom:20px}
.json-pre{background:var(--d0);border:1px solid var(--b1);border-radius:6px;padding:16px;text-align:left;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--green);max-height:260px;overflow-y:auto;line-height:1.7;white-space:pre-wrap;word-break:break-all}
.out-acts{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:16px;font-size:10px;background:rgba(242,101,34,.06);border:1px solid rgba(242,101,34,.18);color:var(--gold-light);margin:2px}
.pill-p{background:rgba(46,147,224,.08);border-color:rgba(46,147,224,.3);color:#a9d6f5}

/* WORKFLOW DIAGRAM */
.wf-diagram{overflow-x:auto;padding:16px 0}
.wf-nodes{display:flex;align-items:center;gap:0;flex-wrap:wrap;row-gap:8px}
.wf-node{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
/* Fase 3: las cajas del diagrama no tenían estilo base (solo el icono del trigger).
   Se les da aspecto de tarjeta, con estados active/trigger y theme-aware (fallbacks
   para variables no definidas en el tema oscuro). */
.wf-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:84px;max-width:112px;min-height:62px;padding:10px 8px;background:var(--d2);border:1px solid var(--b1);border-radius:10px;font-size:10px;font-weight:600;color:var(--t2);text-align:center;line-height:1.25;transition:transform .15s,border-color .15s,box-shadow .15s}
.wf-box i{font-size:16px;color:var(--t3)}
.wf-box.active{background:linear-gradient(180deg,var(--d2),var(--d1));border-color:var(--gold-dim,rgba(242,101,34,.4));color:var(--t1);box-shadow:0 2px 10px rgba(0,0,0,.14)}
.wf-box.active i{color:var(--gold)}
.wf-box.trigger-node{border-color:var(--gold);background:var(--gold-glow,rgba(242,101,34,.1));color:var(--t1)}
.wf-box.trigger-node i{color:var(--gold)}
body:not(.light) .theme-toggle .fa-sun{display:none}
body.light .theme-toggle .fa-moon{display:none}
body.light .theme-toggle .fa-sun{display:inline-block}

/* LIGHT THEME VARIABLES */
body.light{
  --d0:#f5f5f7;--d1:#ffffff;--d2:#f0f0f4;--d3:#ffffff;--d4:#e8e8ed;--d5:#dcdce0;
  --b1:#e0e0e5;--b2:#cccccc;--b3:#aaaaaa;
  --t0:#111118;--t1:#22223a;--t2:#4a4a6a;--t3:#6a6a8a;--t4:#8a8a9a;
  --gold-glow:rgba(242,101,34,.15);
}
body.light .hdr{background:linear-gradient(180deg,#ffffff,#f5f5f7);border-bottom-color:var(--b1)}
body.light .st.done .st-n{color:#fff}
body.light .badge{color:var(--gold-dim);border-color:var(--gold)}
body.light .pf-node{color:var(--t1)}
body.light .pf-arrow{color:var(--t4)}

.wf-service{font-size:8px;color:var(--t4);text-align:center;letter-spacing:.5px}
.wf-arr{color:var(--b3);font-size:14px;padding:0 2px;flex-shrink:0;align-self:center;margin-bottom:16px}

/* TOGGLE */
.tog-row{display:flex;align-items:center;gap:12px;padding:10px 0}
.tog-track{width:40px;height:22px;background:var(--d4);border-radius:11px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;border:1px solid var(--b2)}
.tog-track::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#555;border-radius:50%;transition:all .2s}
.tog-track.on{background:var(--gold)}
.tog-track.on::after{left:20px;background:#fff}
.tog-label{font-size:12px;color:var(--t2);cursor:pointer}

/* TOAST */
#cToast{position:fixed;top:24px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:10px 24px;border-radius:8px;font-weight:600;font-size:13px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none}
#cToast.show{opacity:1}
#cToast.err{background:var(--red)}
#cToast.warn{background:var(--warn);color:var(--d0)}

/* FLOATING EXPORT */
#floatingExport{position:fixed;bottom:80px;right:24px;z-index:9999;display:none;align-items:center;gap:8px;background:linear-gradient(135deg,#2e93e0,#1b5e94);color:#fff;padding:12px 20px;border-radius:50px;cursor:pointer;font-weight:700;font-size:13px;box-shadow:0 4px 20px rgba(46,147,224,.5);transition:all .2s;border:none;font-family:inherit}
#floatingExport:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(46,147,224,.7)}

/* SECTION CATEGORY HEADER */
.sec-cat{display:flex;align-items:center;gap:10px;margin:20px 0 10px;font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:1.5px}
.sec-cat::before,.sec-cat::after{content:'';flex:1;height:1px;background:var(--b1)}

/* NOTIFICATION TABLE */
.notif-table{width:100%;border-collapse:collapse}
.notif-table th{font-size:9px;font-weight:600;color:var(--t4);text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--b2);letter-spacing:.8px;text-align:left}
.notif-table td{padding:8px;border-bottom:1px solid var(--b1);font-size:11px;color:var(--t2);vertical-align:middle}
.notif-table input[type=checkbox]{width:15px;height:15px;accent-color:var(--purple);cursor:pointer}

/* CUSTOM PRESET UPLOAD */
.upload-zone{border:2px dashed var(--b2);border-radius:var(--rl);padding:32px;text-align:center;cursor:pointer;transition:var(--tr)}
.upload-zone:hover{border-color:var(--gold-dim);background:var(--gold-glow)}
.upload-zone i{font-size:32px;color:var(--t4);margin-bottom:10px;display:block}
.upload-zone p{font-size:12px;color:var(--t3)}

@media(max-width:768px){.mc{padding:20px 16px}.col2,.col3{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}.preset-grid{grid-template-columns:1fr 1fr}.nav{padding:10px 16px}.wf-nodes{flex-direction:column;align-items:flex-start}.wf-arr{transform:rotate(90deg)}}
@media(max-width:600px){.hdr{padding:10px 14px}.hdr-tabs{display:none}.badge{display:none}.preset-grid{grid-template-columns:1fr}}
/* ═══════════════════════════════════════════
   LEX UNIFIED DESIGN DNA — Six Sigma Edition
   (Glassmorphism, Feature Cards, Buttons)
═══════════════════════════════════════════ */
.feature-card {
  background: linear-gradient(135deg, rgba(242,101,34,.06) 0%, rgba(34,34,58,.6) 100%);
  border: 1px solid rgba(242,101,34,.18);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(242,101,34,.08),transparent);
  opacity: 0;
  transition: opacity .22s ease;
}
.feature-card:hover { border-color: rgba(242,101,34,.45); box-shadow: 0 4px 24px rgba(242,101,34,.12); transform: translateY(-1px); }
.feature-card:hover::before { opacity: 1; }
.feature-card.on { border-color: var(--gold); background: linear-gradient(135deg,rgba(242,101,34,.13),rgba(242,101,34,.04)); box-shadow: 0 0 18px rgba(242,101,34,.18); }
.feature-card.on::before { opacity: 1; }

.lex-btn-nav {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 600; font-family: 'Space Grotesk', sans-serif;
  background: rgba(242,101,34,.10); border: 1px solid rgba(242,101,34,.25);
  color: var(--gold); cursor: pointer;
  transition: all .2s ease;
  letter-spacing: .3px;
}
.lex-btn-nav:hover {
  background: rgba(242,101,34,.2);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(242,101,34,.2);
}
.lex-btn-nav i { font-size: 11px; }

/* Modal unified */
.modal-bg { background: rgba(4,4,7,.82); backdrop-filter: blur(4px); }
.modal { background: var(--d1); border: 1px solid rgba(242,101,34,.2); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.6); }

/* Six Sigma badge */
.sigma-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  background: linear-gradient(90deg,#F26522,#e8c96a);
  color: #000; border-radius: 4px; padding: 2px 7px;
  margin-left: 8px; vertical-align: middle;
}

/* SP-D: botón ajustes en preset card */
.preset-config-btn:hover {
  background: var(--gold) !important;
  color: #000 !important;
}

/* SP-D: modal del applier */
.modal-overlay {
  animation: fadeIn 0.2s ease-out;
}
.modal-box {
  animation: slideUp 0.25s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.applier-list label:hover {
  background: rgba(255,255,255,0.03);
}

/* SP-E: orden visual numérico para steps del content */
.steps-inner [data-s="1"]  { order: 1; }
.steps-inner [data-s="2"]  { order: 2; }
.steps-inner [data-s="3"]  { order: 3; }
.steps-inner [data-s="4"]  { order: 4; }
.steps-inner [data-s="12"] { order: 5; } /* Triggers entre Entrada Video y Pipeline */
.steps-inner [data-s="5"]  { order: 6; } /* Pipeline */
.steps-inner [data-s="6"]  { order: 7; }
.steps-inner [data-s="7"]  { order: 8; }
.steps-inner [data-s="8"]  { order: 9; }
.steps-inner [data-s="9"]  { order: 10; }
.steps-inner [data-s="10"] { order: 11; }
.steps-inner [data-s="11"] { order: 12; }

/* ===== SP-RESP: responsive movil (workflow) — solo @media, no toca desktop ===== */
/* ═══════════════════════════════════════════
   SP-MEDIA — Responsive movil (contenido exclusivo)
   Additivo. Solo afecta <=768/480px. No toca desktop.
═══════════════════════════════════════════ */
@media (max-width: 768px){
  /* Panel de preview lateral (width fija 420px) -> drawer full-width */
  .preview-panel.open{
    position:fixed;
    top:107px;left:0;right:0;bottom:0;
    width:100%;max-width:100%;
    height:calc(100vh - 107px);
    z-index:260;border-left:0;border-top:1px solid var(--b1);
  }
  .preview-code{font-size:10px;word-break:break-word}

  /* Pipeline: fila flex -> columna apilada */
  .pipeline-wrap{flex-direction:column;gap:12px}
  .pipeline-list{width:100%}

  /* Tablas de contenido: scroll horizontal en lugar de desbordar */
  .stbl,.notif-table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .stbl thead,.notif-table thead{white-space:nowrap}

  /* Flujo pipeline / diagrama: permitir scroll horizontal */
  .pipeline-flow{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wf-diagram{padding:12px 0}

  /* Cards y secciones grandes: reducir padding */
  .card{padding:16px}
  .out-sec{padding:20px 16px}
  .json-pre{font-size:9.5px;padding:12px;max-height:220px}

  /* API rows: campos a ancho completo */
  .api-row .api-fields{min-width:0;width:100%}
  .api-row .api-inputs input{min-width:0}

  /* Boton flotante export: no tapar la nav inferior */
  #floatingExport{bottom:70px;right:12px;padding:10px 16px;font-size:12px}

  /* Modales: casi ancho completo, scroll interno */
  .modal{width:96%;max-width:96%;max-height:90vh;padding:18px;overflow-y:auto}
  .modal-wide{max-width:96%}

  /* Upload zone: menos padding */
  .upload-zone{padding:22px}
}

@media (max-width: 480px){
  /* Preset cards a 1 columna en telefonos angostos */
  .preset-grid{grid-template-columns:1fr}

  /* Titulos de seccion mas compactos */
  .sh h2{font-size:19px}
  .out-title{font-size:16px}

  /* Slider a ancho completo, valor debajo */
  .slider-wrap{flex-wrap:wrap;gap:8px}
  .slider-wrap input[type=range]{flex:1 1 100%}

  /* Header pipeline: iconos y texto compactos */
  .pi-header{padding:10px 12px;gap:8px}
  .pi-body.open{padding:0 12px 12px}

  /* Cards mas compactas */
  .card{padding:14px}

  /* Boton flotante: reubicar para no chocar con nav */
  #floatingExport{bottom:64px;right:10px}
}