/* ═══════════════════════════════════════════════════════
   LEX CONSULTOR AGENTS — Estilos Compartidos
   Variables CSS, reset, header, steps, formularios,
   tarjetas, chips, modales, botones, tabla, upload-zone.
   Cargado por ambos configuradores (soporte + contenido).
════════════════════════════════════════════════════════ */

/* SP-RESP v1: breakpoints canónicos
   xs: <375px  (iPhone SE)
   sm: 375-767px (mobile)
   md: 768-1023px (tablet portrait)
   lg: 1024-1439px (tablet landscape + small desktop)
   xl: ≥1440px (desktop)
*/

: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;
  --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}

.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)}
.icon-btn.on{background:var(--gold-glow);border-color:var(--gold);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}

.admin-bar{background:linear-gradient(90deg,rgba(242,101,34,.08),rgba(242,101,34,.02));border:1px solid rgba(242,101,34,.2);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--gold-light);margin:12px 24px 0;animation:fadeIn .3s}
.admin-bar i{font-size:14px;color:var(--gold)}
.admin-bar button{margin-left:auto;background:0 0;border:0;color:var(--t4);cursor:pointer;font-size:13px}

.layout{display:flex;min-height:calc(100vh - 61px)}
.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:61px;height:calc(100vh - 61px)}
.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-head h3 i{font-size:14px}
.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%}
.val-bar{padding:10px 16px;border-top:1px solid var(--b1);flex-shrink:0}
.val-status{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500}
.val-ok{color:var(--green)}.val-ok i{color:var(--green)}
.val-err{color:var(--red)}.val-err i{color:var(--red)}

.steps{background:var(--d1);padding:0 24px;border-bottom:1px solid var(--b1)}
.steps-inner{display:flex;gap:0;height:46px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.steps-inner::after{content:'';flex:0 0 24px}
.steps::-webkit-scrollbar{height:2px}
/* Sprint 21: step tabs mas legibles (10→11px) + hover bg + altura tactil */
.st{display:flex;align-items:center;gap:7px;padding:14px 14px;font-size:11px;font-weight:600;color:var(--t3);border-bottom:2px solid transparent;cursor:pointer;transition:var(--tr);white-space:nowrap;flex-shrink:0;user-select:none;letter-spacing:.2px}
.st:hover{color:var(--t1);background:rgba(242,101,34,.04)}
.st.on{color:var(--gold-light);border-bottom-color:var(--gold);background:rgba(242,101,34,.05)}
.st.done{color:var(--green)}
.st-n{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;transition:var(--tr);flex-shrink:0}
.st.done .st-n{background:var(--green);border-color:var(--green);color:#fff}
.st-label{display:inline}
.admin-only{display:none}
body.admin .admin-only{display:block}

.mc{max-width:860px;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}

/* Sprint 21: cards con padding consistente + hover ligeramente mas visible */
.card{background:var(--d3);border:1px solid var(--b1);border-radius:var(--rl);padding:24px;margin-bottom:16px;transition:var(--tr);position:relative}
.card:hover{border-color:var(--b2);box-shadow:0 1px 0 rgba(242,101,34,.04)}
/* Card title (.ct) — mas legible: 11→12px, weight 600→700 */
.ct{font-size:12px;font-weight:700;color:var(--gold);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--b1)}
.ct i{font-size:14px;width:18px;display:inline-flex;align-items:center;justify-content:center}

.ib{border-radius:var(--r);padding:12px 15px;font-size:11.5px;line-height:1.65;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)}

.fg{margin-bottom:18px}.fg:last-child{margin-bottom:0}
/* Sprint 21: labels mas legibles. 11→12px size, hint t4→t3 (mejor contraste WCAG) */
label{display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:7px;letter-spacing:.1px}
label .req{color:var(--gold);margin-left:2px}
label .h{font-weight:400;color:var(--t3);font-size:11px;margin-left:6px;font-style:italic}
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);box-shadow:0 0 0 3px rgba(242,101,34,.18)}
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}
input[readonly]{color:var(--t4);font-family:'JetBrains Mono',monospace;font-size:11px}
/* Sprint 21: global checkbox/radio styling. Antes browser-default → tamaños
   inconsistentes y conflictos con .dlist-row input{flex:1}. */
input[type=checkbox],input[type=radio]{
  width:16px;height:16px;accent-color:var(--gold);cursor:pointer;
  flex:0 0 auto;flex-shrink:0;margin:0;vertical-align:middle
}
input[type=checkbox]:focus,input[type=radio]:focus{outline:2px solid var(--gold-dim);outline-offset:2px}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.col3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

.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{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
/* Sprint 21: chips con mejor padding, hover lift, tipografia 12px (era 11.5) */
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;background:var(--d1);border:1px solid var(--b1);border-radius:var(--r);cursor:pointer;font-size:12px;color:var(--t2);transition:var(--tr);user-select:none;position:relative}
.chip:hover{border-color:var(--gold-dim);color:var(--t1);background:var(--d2)}
.chip.on{background:var(--gold-glow);border-color:var(--gold);color:var(--gold-light);box-shadow:0 0 0 1px rgba(242,101,34,.18)}
.chip input{display:none}
.chip i{font-size:13px;width:16px;display:inline-flex;align-items:center;justify-content:center}
.chip.on i{color:var(--gold)}
.chip .chip-rm{display:none;margin-left:4px;font-size:9px;color:var(--red);cursor:pointer;opacity:.6;padding:2px}
.chip .chip-rm:hover{opacity:1}
body.admin .chip .chip-rm{display:inline}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
.fc{background:var(--d1);border:1px solid var(--b1);border-radius:var(--r);padding:14px;cursor:pointer;transition:var(--tr);position:relative}
.fc:hover{border-color:var(--b2);transform:translateY(-1px)}
.fc.on{border-color:var(--gold-dim);background:rgba(242,101,34,.03)}
.fc input{display:none}
.fc-icon{font-size:16px;margin-bottom:6px;color:var(--t4);transition:var(--tr)}
.fc.on .fc-icon{color:var(--gold)}
.fc-name{font-size:12px;font-weight:600;color:var(--t1)}
.fc-desc{font-size:10.5px;color:var(--t4);margin-top:2px;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(--gold);border-color:var(--gold);color:var(--d0)}
body.admin .fc .fc-rm{display:flex}
.fc .fc-rm{display:none;position:absolute;bottom:8px;right:8px;background:var(--d4);border:1px solid var(--b2);color:var(--t3);width:24px;height:24px;border-radius:5px;cursor:pointer;font-size:10px;align-items:center;justify-content:center;z-index:2;transition:var(--tr)}
.fc .fc-rm:hover{border-color:var(--red);color:var(--red)}

.sched-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--b1)}
.sched-row:last-child{border-bottom:0}
.sched-day{min-width:55px;font-size:11px;font-weight:600;color:var(--t4);cursor:pointer;transition:var(--tr);display:flex;align-items:center;gap:5px}
.sched-day.on{color:var(--gold)}
.sched-day i{font-size:9px}
.sched-hrs{display:flex;gap:6px;flex:1;align-items:center}
.sched-hrs input[type=time]{width:100%}
.sched-hrs .dash{color:var(--t4);font-size:12px}
.sched-hrs.off{opacity:.25;pointer-events:none}

.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}

.dlist{display:flex;flex-direction:column;gap:7px}
/* Sprint 21: dlist-row alignment fix.
   Antes: .dlist-row input{flex:1} aplicaba al checkbox → conflictaba con
   el .span flex:1 del label, causando "casillas desalineadas" en filas
   con [checkbox + icon + label + env_key]. Fix: scope flex:1 SOLO a
   text/number/email inputs (no checkbox/radio).
   Ademas: icon i fija ancho + alineacion central; hover state + padding
   consistente; transicion suave. */
.dlist-row{
  display:flex;gap:8px;align-items:center;
  padding:8px 10px;border-radius:6px;
  transition:background var(--tr),border-color var(--tr)
}
.dlist-row:hover{background:rgba(242,101,34,.03)}
.dlist-row input:not([type=checkbox]):not([type=radio]){flex:1;min-width:0}
.dlist-row > i{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;min-width:18px;height:18px;font-size:14px;flex-shrink:0
}
.dlist-row > span{flex:1;min-width:0;font-size:12.5px;color:var(--t1);line-height:1.4}
.dlist-row > code{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--t3);background:var(--d1);padding:3px 7px;
  border-radius:4px;border:1px solid var(--b1);flex-shrink:0;
  white-space:nowrap;letter-spacing:0
}
.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)}
.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)}

/* API credential row */
.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-fields .api-label{font-size:13px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:6px}
/* Sprint 21: api small label 9→11px, t4→t3 + monospace para env keys */
.api-row .api-fields .api-label small{font-size:11px;color:var(--t3);font-weight:400;font-family:'JetBrains Mono',monospace}
.api-row .api-inputs{display:flex;gap:6px;flex-wrap:wrap}
.api-row .api-inputs input{flex:1;min-width:120px;padding:8px 11px;font-size:12px}
.api-row .api-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;color:var(--t3);transition:var(--tr);white-space:nowrap}
.api-row .api-toggle.on{color:var(--green)}
.api-row .api-toggle i{font-size:14px}
.api-row .api-rm{display:none}
body.admin .api-row .api-rm{display:flex}

.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:280px;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}

.nav{position:fixed;bottom:0;left:0;right:0;background:rgba(4,4,7,.94);border-top:1px solid var(--b1);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(20px);z-index:200}
/* Sprint 21: btn 12→13px + altura mas tactil (44px touch target) */
.btn{padding:11px 22px;border-radius:7px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:var(--tr);letter-spacing:.3px;display:inline-flex;align-items:center;gap:7px;min-height:40px}
.btn-g{background:0 0;border:1px solid var(--b2);color:var(--t2)}
.btn-g:hover{border-color:var(--gold-dim);color:var(--gold-light);background:var(--d2)}
.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}
/* Sprint 21: step counter mas legible (t4→t3) + bigger size */
.sc{font-size:12px;color:var(--t3)}.sc span{color:var(--gold);font-weight:700}
.hidden{display:none!important}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-bg.on{display:flex}
.modal{background:var(--d2);border:1px solid var(--b2);border-radius:var(--rl);padding:24px;width:90%;max-width:460px;max-height:80vh;overflow-y:auto}
.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)}
.modal-x{background:0 0;border:0;color:var(--t4);font-size:16px;cursor:pointer}

input.err,textarea.err,select.err{border-color:var(--red)!important}

@media(max-width:900px){.preview-panel.open{width:320px}}
@media(max-width:768px){
  .mc{padding:20px 16px 20px}.col2,.col3{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}
  .steps{padding:0 16px}.st-label{display:none}.sh h2{font-size:18px}.card{padding:16px}
  .stbl{font-size:10px}.nav{padding:10px 16px}
  .out-acts{flex-direction:column}.out-acts .btn{width:100%;justify-content:center}
  .api-row{flex-direction:column;align-items:stretch}
  .api-row .api-inputs{flex-direction:column}
}

/* ═══════════════════════════════════════════════════════
   SP-RESP: RESPONSIVE MÓVIL COMPLETO
═══════════════════════════════════════════════════════ */

/* P2: Steps nav — scroll snap + fade mask en mobile */
@media(max-width:767px){
  .steps-inner{
    scroll-snap-type:x proximity;
    padding-left:16px;
    padding-right:16px;
    mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
  }
  .st{scroll-snap-align:center;padding:0 10px}
  .st.on{scroll-snap-stop:always}
}

/* P3: Pipeline cards stackeables en mobile */
@media(max-width:767px){
  #agentPipelineList,#pipelineList,.pipeline-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .pipeline-item{
    padding:14px!important;
    font-size:13px;
  }
  .pipe-drag-handle,.pi-drag{display:none!important}
  .touch-reorder{
    display:inline-flex!important;
    gap:4px;
    margin-right:8px;
  }
  .touch-reorder button{
    width:28px;height:28px;
    background:rgba(242,101,34,0.1);
    border:1px solid var(--b1);
    color:var(--gold);
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .touch-reorder button:disabled{opacity:0.3}
}
@media(min-width:768px){
  .touch-reorder{display:none!important}
}

/* P4: Modales como bottom-sheet en mobile */
@media(max-width:767px){
  .modal-bg{align-items:flex-end}
  .modal{
    width:100%!important;
    max-width:100%!important;
    max-height:90vh;
    border-radius:20px 20px 0 0;
    padding:20px 16px 32px;
    animation:slideUpSheet 0.3s ease-out;
  }
  @keyframes slideUpSheet{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
  }
  .modal::before{
    content:'';
    display:block;
    width:40px;height:4px;
    background:var(--t4);
    border-radius:2px;
    margin:-8px auto 16px;
    opacity:0.4;
  }
  .modal-x{
    position:absolute;
    top:12px;right:12px;
    width:32px;height:32px;
    border-radius:50%;
    background:var(--d3);
    display:flex;align-items:center;justify-content:center;
  }
}

/* P5: Forms responsive + font-size 16px anti-zoom iOS */
@media(max-width:767px){
  input,textarea,select{
    font-size:16px!important;
    min-height:44px;
  }
  textarea{min-height:80px}
  .fg{margin-bottom:14px}
  .fg label{font-size:12px;margin-bottom:6px}
  .col2,.col3,.fgrid{grid-template-columns:1fr;gap:12px}
  button,.btn{min-height:44px;font-size:14px}
}

/* P6: Footer nav con safe-area-inset iOS */
body{padding-bottom:72px}
@media(max-width:767px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
}
.nav{
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
@media(max-width:767px){
  .nav{
    padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  .nav .sc{font-size:10px}
  .nav .version-tag{display:none}
  .nav button,.nav .btn{
    min-height:44px;
    font-size:13px;
    padding:8px 14px;
  }
}

/* P7: Paleta como drawer lateral en mobile */
@media(max-width:767px){
  .palette-container{
    position:fixed;
    top:0;left:-100%;
    width:85%;max-width:320px;
    height:100vh;
    background:var(--d2);
    border-right:1px solid var(--b1);
    padding:60px 16px 20px;
    overflow-y:auto;
    z-index:400;
    transition:left 0.3s ease;
    box-shadow:4px 0 24px rgba(0,0,0,0.5);
  }
  .palette-container.open{left:0}
  .palette-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    z-index:399;
  }
  .palette-backdrop.on{display:block}
  .palette-toggle{
    display:flex;
    position:fixed;
    top:50%;left:0;
    transform:translateY(-50%);
    background:var(--gold);
    color:#000;
    padding:12px 8px;
    border-radius:0 8px 8px 0;
    cursor:pointer;
    z-index:399;
    box-shadow:2px 0 8px rgba(0,0,0,0.3);
    border:none;
    font-size:16px;
  }
}
@media(min-width:768px){
  .palette-toggle,.palette-backdrop{display:none!important}
  .palette-container.open{left:auto}
}

/* P8: Tablas responsive con scroll horizontal */
@media(max-width:767px){
  .stbl-wrapper,.api-list-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0 -16px;
    padding:0 16px;
  }
  .stbl{min-width:480px;font-size:11px}
  .api-row{padding:8px;gap:8px}
}
@media(max-width:600px){
  .hdr{padding:10px 14px}.brand{font-size:13px;letter-spacing:2px}.badge{display:none}
  .preview-panel.open{position:fixed;top:0;right:0;bottom:0;width:100%;z-index:400;border-left:0}
  .preview-close-mobile{display:flex!important}
}
.preview-close-mobile{display:none!important;position:absolute;top:10px;right:10px;z-index:10}
.km-row{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--b1);flex-wrap:wrap}
.km-row:last-child{border-bottom:0}

[data-tip]{position:relative;cursor:help}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1a1a2e;color:#e8e8e8;padding:8px 12px;border-radius:8px;font-size:11px;line-height:1.4;z-index:9999;border:1px solid rgba(212,175,55,.3);max-width:280px;white-space:normal;box-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:none}
[data-tip]:hover::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1a1a2e;z-index:9999}

.step-progress{height:3px;background:var(--d2);border-radius:2px;margin-top:6px;overflow:hidden}
.step-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:2px;transition:width .3s ease}
.st-pct{font-size:10px;color:var(--t3);margin-top:2px;text-align:center}

#floatingExport{position:fixed;bottom:80px;right:24px;z-index:9999;display:none;align-items:center;gap:8px;background:linear-gradient(135deg,#d4af37,#f5d76e);color:#0a0a0f;padding:12px 20px;border-radius:50px;cursor:pointer;font-weight:700;font-size:13px;box-shadow:0 4px 20px rgba(212,175,55,.4);transition:all .2s;border:none;font-family:inherit}
#floatingExport:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(212,175,55,.6)}
#floatingExport i{font-size:16px}

#copyMsg{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}
#copyMsg.show{opacity:1}

.security-warn{background:rgba(224,82,82,.12);border:1px solid rgba(224,82,82,.4);border-radius:var(--rl);padding:14px 18px;margin:12px 0;color:#e06060;font-size:13px;display:flex;align-items:flex-start;gap:10px}
.security-warn i{font-size:18px;margin-top:2px;flex-shrink:0}
.security-warn strong{color:#f07070}

body.light{--d0:#f5f5f7;--d1:#ffffff;--d2:#e8e8ed;--d3:#d0d0d8;--d4:#e8e8ed;--d5:#dcdce0;--b1:rgba(0,0,0,.1);--b2:rgba(0,0,0,.06);--b3:#aaaaaa;--t0:#111118;--t1:#1a1a2e;--t2:#3a3a4e;--t3:#6a6a7e;--t4:#8a8a9a;--gold:#F26522;--gold-light:#ff7f42;--gold-glow:rgba(242,101,34,.1);--green:#22a55b;--red:#dc3545}
.theme-toggle{cursor:pointer;font-size:14px;transition:var(--tr)}
.theme-toggle:hover{color:var(--gold)!important}
body.light .theme-toggle .fa-moon{display:none}
body.light .theme-toggle .fa-sun{display:inline!important}
body:not(.light) .theme-toggle .fa-sun{display:none}
.hdr-tab.locked{opacity:.45;cursor:not-allowed}

.err{border-color:var(--red)!important;box-shadow:0 0 0 2px rgba(220,53,69,.2)!important}
.err-msg{color:var(--red);font-size:11px;margin-top:4px;display:none}
.err-msg.show{display:block}

.voice-toggle{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--d1);border:1px solid var(--b1);border-radius:var(--rl);cursor:pointer;margin-bottom:16px}
.voice-toggle input{display:none}
.voice-toggle .toggle-track{width:48px;height:26px;background:var(--d2);border-radius:13px;position:relative;transition:background .2s}
.voice-toggle .toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#888;border-radius:50%;transition:all .2s}
.voice-toggle input:checked+.toggle-track{background:var(--gold)}
.voice-toggle input:checked+.toggle-track::after{left:25px;background:#fff}
.voice-off-msg{color:var(--t3);font-size:13px;padding:20px;text-align:center;background:var(--d1);border-radius:var(--rl);border:1px dashed var(--b1)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip-small{padding:4px 12px;background:var(--d1);border:1px solid var(--b1);border-radius:20px;cursor:pointer;font-size:11px;transition:var(--tr)}
.chip-small{padding:4px 12px;background:var(--d1);border:1px solid var(--b1);border-radius:20px;cursor:pointer;font-size:11px;transition:var(--tr)}
.chip-small.on{background:var(--gold-glow);border-color:var(--gold-dim);color:var(--gold-light)}

/* Validation error highlights */
input.err,textarea.err,select.err{border-color:var(--red)!important;box-shadow:0 0 0 2px rgba(224,82,82,.15)!important;animation:shake .25s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.err-msg{font-size:10px;color:var(--red);margin-top:3px;display:none;animation:fadeIn .2s ease}
.err-msg.show{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Profile list hover */
#profilesList>div:hover{border-color:var(--gold-dim)!important;background:var(--d2)!important}

/* ═══════════════════════════════════════════
   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;
}
.upload-zone{border:2px dashed var(--b2);border-radius:var(--r);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:8px;transition:var(--tr)}
.upload-zone:hover i{color:var(--gold)}

/* SP-C → SP-E: regla de order movida a configurator-support.css y configurator-content.css */
.btn-add-trig{background:var(--d3);border:1px solid var(--b2);border-radius:6px;padding:6px 12px;font-size:11px;color:var(--t2);cursor:pointer;transition:var(--tr);display:inline-flex;align-items:center;gap:6px}
.btn-add-trig:hover{border-color:var(--gold-dim);color:var(--gold)}
.trigger-card{background:var(--d3);transition:var(--tr)}
.trigger-card:hover{border-color:var(--gold-dim) !important}
/* SP-RENUM P6: version tag refinado */
.version-tag {
  font-size: 11px;
  letter-spacing: 2px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold-dim, #F26522);
  opacity: 0.7;
  text-transform: none;
  font-weight: 500;
}
.version-tag::before { content: none; }

/* ═══════════════════════════════════════════════════════════════
   Sprint 23b — Utility classes consolidadas (Sprint 23c: solo 4+ usos)
   Las de bajo uso (<4) fueron revertidas a inline para evitar anti-DRY.
   ═══════════════════════════════════════════════════════════════ */

/* Colores de texto — 4 classes con 5+ usos */
.txt-warn{color:var(--warn)}       /* 22 usos */
.txt-gold{color:var(--gold)}       /* 11 usos */
.txt-dim{color:var(--t4)}          /* 10 usos */
.txt-success{color:var(--green)}   /* 5 usos */

/* Hint text — 5 usos cada una */
.hint{font-size:11px;color:var(--t3);line-height:1.5}
.hint-sm{font-size:10px;color:var(--t4);line-height:1.4}

/* Section headers compactos — 5 usos en payments.js */
.sec-title{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.sec-title i{font-size:13px}

/* Spacing — solo las de 5+ usos */
.mb-10{margin-bottom:10px}         /* 5 usos */
.mb-12{margin-bottom:12px}         /* 16 usos */
.mt-8{margin-top:8px}              /* 9 usos */

/* Layout — flex-row base (5 usos) + flex-1 (4 usos) */
.flex-row{display:flex;align-items:center;gap:10px}
.flex-1{flex:1}

/* Form inputs wide — 8 usos */
.input-wide{width:100%;padding:8px 11px}

/* ===== SP-RESP: responsive movil (workflow) — solo @media, no toca desktop ===== */
/* ═══════════════════════════════════════════════════════
   SP-RESP SHELL: header + steps shell móvil (append al final)
   Solo cubre el chrome compartido: .hdr/.hdr-left/.hdr-tabs/
   .hdr-right/.logo/.brand-sub/.icon-btn/.steps/.st + refuerzos
   de .mc/.col2/.nav/.modal. Todo dentro de media queries.
═══════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* (1) Header apila en filas + padding reducido */
  .hdr{
    flex-wrap:wrap;
    row-gap:8px;
    gap:8px;
    padding:10px 14px;
  }
  .hdr-left{gap:8px;flex:1 1 auto;min-width:0}
  .logo{width:30px;height:30px;font-size:12px}
  .brand{font-size:13px;letter-spacing:2px}
  .brand-sub{display:none}

  /* (2) Tabs a su propia fila, scroll horizontal, botones chicos */
  .hdr-tabs{
    order:3;
    flex:1 1 100%;
    min-width:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:5px;
    padding-bottom:2px;
  }
  .hdr-tabs::-webkit-scrollbar{height:2px}
  .hdr-tab{
    flex-shrink:0;
    white-space:nowrap;
    padding:6px 10px;
    font-size:10.5px;
  }

  /* (2b) hdr-right: envuelve si desborda + iconos tocables */
  .hdr-right{
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .icon-btn{width:36px;height:36px;font-size:13px}

  /* (3) Barra de pasos compacta (refuerza scroll ya existente) */
  .steps{padding:0 14px}
  .st{padding:12px 10px;font-size:11px}
  .st-n{width:20px;height:20px;font-size:9px}

  /* (4)(5) Contenido: form full-width, preview vive como overlay
     (ya gestionado en 600px); solo aseguramos padding menor */
  .layout{min-height:auto}
  .form-panel{min-width:0;padding-bottom:80px}
  .mc{padding:18px 14px 20px}

  /* (6) Grids multi-columna a 1 columna (refuerzo) */
  .col2,.col3,.fgrid{grid-template-columns:1fr;gap:12px}

  /* (7) Nav inferior utilizable */
  .nav{padding:10px 14px;gap:8px}
  .nav .btn{padding:10px 16px;min-height:44px}

  /* (8) Modal casi full-width, alto acotado, scrollea */
  .modal{
    width:94vw!important;
    max-width:94vw!important;
    max-height:90vh;
    overflow-y:auto;
    padding:20px 16px;
  }
}

@media (max-width:480px){
  /* Header aún más apretado en teléfonos 360-430px */
  .hdr{padding:9px 12px;gap:6px}
  .logo{width:28px;height:28px;font-size:11px}
  .brand{font-size:12px;letter-spacing:1.5px}

  /* hdr-right: deja SOLO volver-al-menú + tema + guía (1º,2º,3º);
     oculta preview/import/blueprint/perfiles/admin si desbordan.
     Orden verificado en ambos configuradores:
     1 casa · 2 theme · 3 guía · 4 preview · 5 import · 6 blueprint · 7 perfiles · 8 admin */
  .hdr-right .icon-btn:nth-child(n+4){display:none}
  .icon-btn{width:34px;height:34px}

  .hdr-tab{padding:5px 9px;font-size:10px}

  /* Pasos: aún más compactos */
  .steps{padding:0 12px}
  .st{padding:11px 8px}

  .mc{padding:16px 12px 18px}

  /* Modal ocupa casi todo el ancho */
  .modal{width:96vw!important;max-width:96vw!important}
}

/* ===== SP-RESP-2: header movil colapsado en 2 botones (tabs + acciones) ===== */
.hdr-mobile-ctrls{display:none;gap:6px;align-items:center;flex:0 0 auto}
@media(max-width:768px){
  .hdr{flex-wrap:nowrap}
  .hdr-mobile-ctrls{display:flex}
  .hdr-tabs,.hdr-right{display:none}
  .hdr-tabs.open,.hdr-right.open{display:flex;position:absolute;top:100%;margin-top:6px;z-index:400;background:var(--d2);border:1px solid rgba(242,101,34,.22);border-radius:12px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.55);max-height:72vh;overflow:auto}
  .hdr-tabs.open{left:12px;right:auto;flex-direction:column;gap:6px;min-width:210px}
  .hdr-tabs.open .hdr-tab{width:100%;justify-content:flex-start}
  .hdr-right.open{right:12px;left:auto;flex-wrap:wrap;gap:8px;width:auto;max-width:250px;justify-content:flex-start}
  .hdr-right.open .icon-btn{display:flex!important;width:40px;height:40px}
  .hdr-right.open .badge{display:none}
}