/* /crear · MODO APP · usa tokens de demo-des.css (tema claro crema/flame) */

/* demo-des.css NO define --bg/--bg-1/--bg-2/--ink-3 · los mapeo aquí o el
   color del CTA quedaba inválido → texto oscuro sobre botón oscuro = invisible */
.ds-body{
  --bg:#f5f1ed;      /* = --cream (fondo) */
  --bg-1:#fffefc;    /* = --paper (superficie/tarjetas) */
  --bg-2:#ece7e0;    /* superficie sutil (checks, CTA deshabilitado) */
  --ink-3:#8a847c;   /* gris medio legible (texto secundario) */
}

.ds-body{overflow:hidden}                       /* el scroll vive dentro de .ds-screens */
.ds-body .demo-stage{display:none}              /* no usamos el stage del demo aquí */

/* ── App shell ── */
.ds-app{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;height:100dvh}

/* Barra superior */
.ds-appbar{flex:0 0 auto;display:flex;align-items:center;gap:14px;
           padding:14px clamp(16px,4vw,28px);
           background:color-mix(in srgb,var(--bg) 78%,transparent);
           -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
           border-bottom:1px solid var(--line)}
.ds-back{flex:0 0 auto;width:42px;height:42px;border-radius:13px;border:1px solid var(--line);
         background:var(--bg-1);color:var(--ink);display:grid;place-items:center;cursor:pointer;
         transition:transform .12s,border-color .15s}
.ds-back:active{transform:scale(.92)} .ds-back:hover{border-color:var(--ink-3)}
.ds-brandmini{flex:0 0 auto;display:flex;align-items:center}
.ds-brandmini img{height:30px;width:auto;display:block}
@media(max-width:640px){ .ds-brandmini img{height:25px} }
.ds-segs{flex:1 1 auto;display:flex;gap:6px;align-items:center;max-width:440px;margin:0 auto}
.ds-seg{flex:1 1 0;height:5px;border-radius:999px;background:var(--line);transition:background .35s,transform .35s}
.ds-seg.on{background:var(--accent)}
.ds-seg.done{background:var(--ink)}
.ds-stepno{flex:0 0 auto;font-family:var(--mono,'JetBrains Mono',monospace);font-size:14px;font-weight:700;color:var(--ink)}
.ds-stepno i{color:var(--ink-3);font-style:normal;font-weight:600}

/* Pantallas (scroll interno) */
.ds-screens{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
            padding:clamp(20px,4vh,40px) clamp(16px,4vw,28px) 28px}
#dsForm{max-width:640px;width:100%;margin:0 auto}

/* Paneles · una pantalla cada uno + slide */
.ds-panel{display:none}
.ds-panel.on{display:block;animation:dsSlide .42s cubic-bezier(.2,.85,.25,1)}
@keyframes dsSlide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.ds-app[data-dir="back"] .ds-panel.on{animation-name:dsSlideBack}
@keyframes dsSlideBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

.ds-head{margin-bottom:clamp(16px,2.6vh,26px)}
.ds-kick{font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;font-weight:700;
         letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ds-h{font-size:clamp(1.7rem,5.4vw,2.5rem);line-height:1.04;letter-spacing:-.035em;margin:.35rem 0 .3rem;font-weight:800}
.ds-sub{color:var(--ink-2);font-size:clamp(14px,1.9vh,16px);line-height:1.45}
.ds-lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
        color:var(--ink-3);margin:1.5rem 0 .75rem}

/* Campos a ancho completo */
#dsForm .demo-field{max-width:none;margin:14px 0 0}
#dsForm .demo-field-label{font-weight:700}
.ds-input-lg{font-size:16px;padding:15px 16px}

/* ── Tarjetas de selección ── */
.ds-grid{display:grid;gap:10px}
.ds-grid-2{grid-template-columns:repeat(2,1fr)}
.ds-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){ .ds-grid-2,.ds-grid-3{grid-template-columns:1fr} }

.ds-pick{position:relative;display:flex;align-items:center;gap:13px;text-align:left;width:100%;
         background:var(--bg-1);border:1.5px solid var(--line);border-radius:18px;padding:15px 16px;cursor:pointer;
         color:var(--ink);font-family:inherit;transition:border-color .15s,transform .12s,box-shadow .18s,background .15s}
.ds-pick:hover{border-color:var(--ink-3)}
.ds-pick:active{transform:scale(.975)}
.ds-pick input{position:absolute;opacity:0;pointer-events:none}
.ds-pick.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--bg-1));
            box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.ds-pick-lg{padding:17px 18px}
.ds-compact{padding:12px 13px}
.ds-pick-ico{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
             background:color-mix(in srgb,var(--c,#ff5b2e) 14%,transparent);color:var(--c,#ff5b2e)}
.ds-pick-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ds-pick-t{font-weight:800;font-size:15.5px;letter-spacing:-.01em}
.ds-pick-d{font-size:12.5px;color:var(--ink-3);line-height:1.3}
.ds-compact .ds-pick-t{font-size:14px}
/* check (multi/radio) */
.ds-pick-ck{flex:0 0 auto;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
            background:var(--bg-2);color:transparent;border:1.5px solid var(--line);transition:.15s}
.ds-pick.on .ds-pick-ck{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.05)}
/* chevron (sector · auto-avanza) */
.ds-pick-go{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
            color:var(--ink-3);transition:transform .15s,color .15s}
.ds-pick:hover .ds-pick-go{color:var(--accent);transform:translateX(2px)}
.ds-pick.is-picked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-1));
                   box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.ds-pick.is-picked .ds-pick-go{color:var(--accent)}

/* Escaneo (botón) */
.ds-scan{display:flex;align-items:center;gap:13px;width:100%;text-align:left;margin-top:18px;
         background:var(--bg-1);border:1.5px solid var(--line);border-radius:16px;padding:15px 16px;cursor:pointer;
         color:var(--ink);font-family:inherit;transition:border-color .15s,transform .12s}
.ds-scan:active{transform:scale(.985)} .ds-scan:hover{border-color:var(--ink-3)}
.ds-scan-ico{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
             background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.ds-scan-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ds-scan-meta strong{font-size:14.5px} .ds-scan-meta span{font-size:12.5px;color:var(--ink-3)}
.ds-scan-spin{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);
              border-top-color:var(--accent);opacity:0;transition:opacity .2s}
.ds-scan.is-loading .ds-scan-spin{opacity:1;animation:dsSpin .8s linear infinite}
@keyframes dsSpin{to{transform:rotate(360deg)}}
.ds-scan.is-ok{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--bg-1))}

/* Acordeón "editar lo que sabe" */
.ds-kb-acc{margin-top:16px;border-top:1px solid var(--line);padding-top:6px}
.ds-kb-acc summary{cursor:pointer;list-style:none;padding:10px 2px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.ds-kb-acc summary::-webkit-details-marker{display:none}
.ds-kb-acc summary::before{content:'+ ';color:var(--accent);font-weight:800}
.ds-kb-acc[open] summary::before{content:'– '}
.ds-kb-acc textarea{margin-top:8px}

/* ── Barra inferior fija ── */
.ds-actionbar{flex:0 0 auto;display:flex;align-items:center;gap:12px;
              padding:14px clamp(16px,4vw,28px) calc(14px + env(safe-area-inset-bottom));
              background:color-mix(in srgb,var(--bg) 82%,transparent);
              -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
              border-top:1px solid var(--line)}
.ds-agentchip{flex:1 1 auto;display:flex;align-items:center;gap:11px;min-width:0}
.ds-chip-ava{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
             font-weight:900;font-size:19px;color:#fff;background:var(--ink-3);transition:background .3s,transform .3s}
.ds-chip-ava.filled{transform:scale(1)}
.ds-chip-meta{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ds-chip-meta b{font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-chip-meta span{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ds-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
        background:var(--ink);color:var(--bg-1);font-family:inherit;font-weight:800;font-size:16px;
        padding:15px 26px;border-radius:15px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);
        transition:transform .12s,box-shadow .18s,background .2s}
.ds-cta:hover{transform:translateY(-2px)}
.ds-cta:active{transform:translateY(0) scale(.98)}
.ds-cta.is-create{background:var(--accent);color:#fff;box-shadow:0 16px 34px -12px rgba(255,91,46,.6)}
/* deshabilitado · LEGIBLE (fondo claro + texto gris, no blanco-sobre-gris) */
.ds-cta[disabled]{background:var(--bg-2);color:var(--ink-3);border:1px solid var(--line);
                  box-shadow:none;cursor:default;transform:none;opacity:1}
.ds-cta[disabled] svg{display:none}
@media (max-width:430px){ .ds-cta{padding:14px 18px;font-size:15px} .ds-chip-meta span{display:none} }

/* ── Overlay creando ── */
.ds-building{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
             background:var(--hero-grad,linear-gradient(158deg,#b81e63,#ff4133 34%,#ff5b2e 58%,#ffc39c));color:#fff;padding:24px}
.ds-building .demo-h2{color:#fff}
.ds-building-mid{text-align:center;max-width:440px}
.ds-building .demo-gen-checks{margin-top:1.4rem;text-align:left;display:inline-block}
.ds-building .demo-gen-checks li{color:rgba(255,255,255,.7);transition:color .3s}
.ds-building .demo-gen-checks li.on{color:#fff;font-weight:700}