/* Valeria PRO. Blanco limpio + morado Valeria; tema claro a propósito. */
:root{
  --bg:#ffffff; --soft:#f6f3ff; --soft-2:#efe9ff; --line:#e6e0f5; --line-2:#d8cff3;
  --ink:#1b1536; --ink-2:#3b3458; --muted:#6c6687;
  --v:#5b3fd6; --v-hi:#7a5cf0; --v-deep:#2c2170; --v-ink:#ffffff;
  --ok:#14874a; --ok-bg:#e3f6ea; --warn:#a8650a; --warn-bg:#fdf1dc; --bad:#c2334f; --bad-bg:#fde6ea; --info:#2563c9; --info-bg:#e4eefc;
  --wa-bg:#efe9e1; --wa-out:#d9fdd3; --wa-in:#ffffff;
  --f-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --shadow:0 1px 2px rgba(44,33,112,.06),0 12px 32px rgba(44,33,112,.10);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--f-body);font-size:16px;line-height:1.55;margin:0}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.1;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:var(--v)}
button{font:inherit;cursor:pointer}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1160px;margin:0 auto}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--v)}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--v);outline-offset:2px;border-radius:6px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 20px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn-p{background:var(--v);color:var(--v-ink);box-shadow:0 6px 18px rgba(91,63,214,.32)}
.btn-p:hover{background:var(--v-hi)}
.btn-s{background:var(--bg);color:var(--ink);border:1px solid var(--line-2)}
.btn-s:hover{border-color:var(--v)}
.btn-sm{padding:8px 14px;border-radius:10px;font-size:.88rem}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--v-hi),var(--v-deep));display:grid;place-items:center;position:relative;flex:none}
.mark::after{content:"";position:absolute;left:6px;bottom:-4px;border:6px solid transparent;border-top-color:var(--v-deep);border-left-color:var(--v-deep);border-radius:2px}
.mark span{font-family:var(--f-display);font-weight:800;color:#fff;font-size:1.05rem}
.word{font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.word small{font-family:var(--f-mono);font-weight:500;background:var(--v);color:#fff;margin-left:6px;font-size:.62rem;letter-spacing:.12em;border-radius:6px;padding:3px 6px;vertical-align:.28em}
.vpic{background:#efe9ff url(/img/valeria.jpg) center/cover no-repeat;border-radius:50%;flex:none}

/* vistas */
.view[hidden]{display:none!important}

/* ===== INICIO ===== */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.nav .wrap{display:flex;align-items:center;gap:20px;padding-block:14px}
.nav nav{display:flex;gap:22px;margin-left:12px}
.nav nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.94rem}
.nav nav a:hover{color:var(--v)}
.nav .sp{flex:1}
@media (max-width:860px){.nav nav{display:none}}
@media (max-width:440px){.nav .entrar{display:none}}

.hero{position:relative;overflow:hidden;background:
  linear-gradient(90deg,#faf9fd 0%,rgba(250,249,253,.92) 34%,rgba(250,249,253,0) 52%),
  url(/img/hero.jpg) right bottom/auto 100% no-repeat,#faf9fd}
.hero .wrap{display:grid;grid-template-columns:minmax(0,500px);align-content:center;min-height:640px;padding-block:48px 56px}
@media (min-width:1181px){.hero h1{font-size:3.15rem}.hero .sub{font-size:1.04rem}}
.hero-m{display:none}
@media (max-width:1180px){
  .hero{background:radial-gradient(700px 400px at 90% 0%,var(--soft-2),transparent 60%),var(--bg)}
  .hero .wrap{min-height:0;padding-block:36px 0;grid-template-columns:minmax(0,1fr)}
  .hero h1{max-width:16ch}
  .hero-m{display:block;width:calc(100% + 32px);max-width:none;margin:24px -16px 0;height:min(620px,calc(100vw * .9));object-fit:cover;object-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent);mask-image:linear-gradient(180deg,#000 85%,transparent)}
}
.asi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
@media (max-width:900px){.asi{grid-template-columns:minmax(0,1fr);gap:40px}}
.six{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.six{grid-template-columns:minmax(0,1fr)}}
.six li{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:2px;background:var(--bg)}
.six li b{display:flex;gap:8px;align-items:center}
.six li b::before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;font-size:.72rem;flex:none}
.six li span{color:var(--muted);font-size:.86rem}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px 6px 6px;font-size:.84rem;font-weight:600;color:var(--ink-2)}
.chip b{background:var(--v);color:#fff;border-radius:999px;padding:2px 9px;font-size:.74rem}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--v);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--soft-2);z-index:-1;border-radius:4px}
.hero .sub{font-size:1.12rem;color:var(--ink-2);max-width:54ch;margin-top:18px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.trust{display:flex;gap:10px 18px;flex-wrap:wrap;margin-top:26px;font-size:.86rem;color:var(--muted);align-items:center}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust i{width:6px;height:6px;border-radius:50%;background:var(--v);display:inline-block}

/* teléfono */
.stage{position:relative;justify-self:center;width:min(100%,400px);padding:10px 0}
.phone{width:min(100%,320px);margin:0 auto;background:#14102b;border-radius:40px;padding:11px;box-shadow:0 30px 60px rgba(44,33,112,.28),0 0 0 1px rgba(44,33,112,.2)}
.screen{border-radius:30px;overflow:hidden;background:var(--wa-bg);display:flex;flex-direction:column;height:560px}
.wa-top{background:#f0f2f5;display:flex;gap:10px;align-items:center;padding:30px 14px 10px;border-bottom:1px solid #e3e3e3}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--v-hi),var(--v-deep));color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:.9rem;flex:none}
.wa-top b{font-size:.9rem;display:block;color:#111}
.wa-top small{font-size:.7rem;color:#667}
.chat{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:7px;overflow:hidden;font-size:.8rem;line-height:1.38;color:#111}
.b{max-width:84%;padding:6px 9px 4px;border-radius:9px;box-shadow:0 1px 1px rgba(0,0,0,.07)}
.b.me{align-self:flex-end;background:var(--wa-out);border-top-right-radius:2px}
.b.cl{align-self:flex-start;background:var(--wa-in);border-top-left-radius:2px}
.b em{display:block;font-style:normal;text-align:right;font-size:.6rem;color:#7a8a80;margin-top:1px}
.typing{align-self:flex-end;background:var(--wa-out);border-radius:9px;padding:8px 12px;display:flex;gap:4px}
.typing span{width:6px;height:6px;border-radius:50%;background:#5f8f6c;animation:dot 1.2s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.float{position:absolute;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:.8rem;min-width:0}
.float b{display:block;font-size:.84rem}
.float small{color:var(--muted);font-size:.72rem}
.ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;font-weight:800}
.ic.ok{background:var(--ok-bg);color:var(--ok)}
.ic.v{background:var(--soft-2);color:var(--v)}
.ic.w{background:var(--warn-bg);color:var(--warn)}
.vcard{position:absolute;z-index:3;top:-34px;right:0;display:flex;gap:10px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 16px 5px 5px;box-shadow:var(--shadow)}
.vcard b{display:block;font-family:var(--f-display);font-size:.98rem}
.vcard small{color:var(--muted);font-size:.74rem;display:flex;align-items:center;gap:6px}
.dot-on{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
@media (max-width:520px){.vcard{right:0}}
.f1{top:110px;left:-36px;animation:bob 6s ease-in-out infinite}
.f2{top:270px;right:-40px;animation:bob 7s ease-in-out infinite .8s}
.f3{bottom:40px;left:-28px;animation:bob 6.5s ease-in-out infinite 1.6s}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (max-width:1180px){.f2{right:-4px}}
@media (max-width:520px){.f1{left:-4px}.f2{right:-4px}.f3{left:0}}
@media (prefers-reduced-motion:reduce){.float,.typing span{animation:none}}

.strip{border-block:1px solid var(--line);background:var(--bg)}
.strip .wrap{padding-block:26px}
.strip .wrap span{display:inline-flex;align-items:center;gap:8px}
.strip .lbl{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500}

.int-head{display:flex;gap:6px 14px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
.int-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.int-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.int-grid{grid-template-columns:minmax(0,1fr)}}
.int{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px;align-content:start;background:var(--bg)}
.int b{font-size:.92rem;color:var(--ink)}
.int.more{background:var(--soft);border-style:dashed}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{background:var(--soft);color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:.84rem;font-weight:600}
.sec{padding-block:80px}
.sec.alt{background:var(--soft)}
.sec-h{display:grid;gap:12px;max-width:700px;margin-bottom:40px}
.sec-h h2{font-size:clamp(1.8rem,3.8vw,2.7rem);font-weight:800}
.sec-h p{color:var(--ink-2);font-size:1.05rem}
@media (max-width:600px){.sec{padding-block:56px}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:st}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.st{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:10px;align-content:start}
.st::before{counter-increment:st;content:"Paso " counter(st);font-family:var(--f-mono);font-size:.72rem;color:var(--v);letter-spacing:.08em}
.st h3{font-size:1.18rem}
.st p{color:var(--muted);font-size:.94rem}

.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feats{grid-template-columns:1fr}}
.ft{padding:24px;border-radius:18px;border:1px solid var(--line);background:var(--bg);display:grid;gap:10px;align-content:start}
.ft.big{grid-column:span 2;background:linear-gradient(150deg,var(--v-deep),#4a33b8);color:#fff;border:0}
@media (max-width:560px){.ft.big{grid-column:auto}}
.ft.big p{color:#ddd5ff}
.ft h3{font-size:1.15rem}
.ft p{color:var(--muted);font-size:.94rem}
.ft .ico{width:42px;height:42px;border-radius:12px;background:var(--soft-2);color:var(--v);display:grid;place-items:center}
.ft.big .ico{background:rgba(255,255,255,.14);color:#fff}
.mini-list{display:grid;gap:8px;margin-top:6px}
.mini{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.1);border-radius:10px;padding:8px 10px;font-size:.86rem}
.mini .sp{flex:1}

.cur-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:600;font-size:.92rem}
.cur-row .inp{width:auto;min-width:220px;padding:9px 12px}
.pills{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:4px}
.pills button{border:0;background:transparent;padding:7px 14px;border-radius:9px;font-weight:700;color:var(--muted)}
.pills button[aria-pressed="true"]{background:var(--v);color:#fff}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;align-items:start}
@media (max-width:900px){.prices{grid-template-columns:1fr;max-width:520px}}
.pc{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:26px;display:grid;gap:14px}
.pc.rec{border:2px solid var(--v);box-shadow:var(--shadow);position:relative}
.pc li.plus{font-weight:700;color:var(--v);margin-top:4px}
.pc li.plus::before{content:"+"}
.pc.max{background:linear-gradient(180deg,var(--soft),var(--bg) 40%)}
.pc.rec::before{content:"Más elegido";position:absolute;top:-12px;left:24px;background:var(--v);color:#fff;font-size:.74rem;font-weight:700;border-radius:999px;padding:3px 10px}
.pc h3{font-size:1.25rem}
.amt{font-family:var(--f-display);font-size:2.6rem;font-weight:800;line-height:1}
.amt small{font-family:var(--f-body);font-size:.9rem;color:var(--muted);font-weight:500}
.pc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.94rem}
.pc li{display:flex;gap:8px;align-items:flex-start}
.pc li::before{content:"✓";color:var(--v);font-weight:800}
.note{font-size:.84rem;color:var(--muted);margin-top:18px}

.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--v);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-2);margin-top:10px;font-size:.95rem}

.cta-band{background:linear-gradient(140deg,var(--v-deep),var(--v));color:#fff;border-radius:28px;padding:48px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cta-band h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.cta-band p{color:#ddd5ff;margin-top:8px}
.cta-band .btn{background:#fff;color:var(--v-deep)}
@media (max-width:760px){.cta-band{grid-template-columns:1fr;padding:32px 24px}}
.foot{padding-block:36px;color:var(--muted);font-size:.86rem;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:64px}

/* ===== ENTRAR / REGISTRO ===== */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth .side{display:none}}
.side{background:linear-gradient(160deg,var(--v-deep) 0%,#3a2a9a 55%,var(--v) 100%);color:#fff;padding:40px 48px;display:flex;flex-direction:column;gap:28px;position:relative;overflow:hidden}
.side::after{content:"";position:absolute;right:-120px;bottom:-120px;width:380px;height:380px;border-radius:50%;border:60px solid rgba(255,255,255,.06)}
.side .logo{color:#fff}
.side .word small{background:#fff;color:var(--v-deep)}
.side .mark{background:rgba(255,255,255,.16)}
.side .mark::after{border-top-color:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.16)}
.side h2{font-size:clamp(1.8rem,3vw,2.5rem);max-width:16ch}
.side p{color:#ddd5ff;max-width:40ch}
.side .cards{display:grid;gap:12px;max-width:380px;margin-top:auto;position:relative;z-index:1}
.side .float{position:static;color:var(--ink)}
/* La columna morada queda fija mientras el formulario baja: los pasos siempre se ven. */
@media (min-width:901px) and (min-height:640px){.auth .side{position:sticky;top:0;height:100vh;align-self:start}}
.formside{display:grid;place-items:center;padding-block:40px}
.formbox{width:100%;max-width:420px;display:grid;gap:18px}
.formbox .logo{margin-bottom:6px}
.formbox h1{font-size:2rem}
.fld{display:grid;gap:6px}
.fld label{font-weight:600;font-size:.88rem}
.inp{width:100%;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;font:inherit;color:var(--ink);background:var(--bg);transition:border-color .15s,box-shadow .15s}
.inp:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 4px var(--soft-2)}
.pw{position:relative}
.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--v);font-weight:700;font-size:.84rem;padding:6px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row .sp{flex:1}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-w{width:100%}
.small{font-size:.9rem}
.err{color:var(--bad);font-size:.84rem}

.progress{display:flex;gap:8px;align-items:center}
.progress i{flex:1;height:6px;border-radius:999px;background:var(--line)}
.progress i.on{background:var(--v)}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick label{border:1.5px solid var(--line-2);border-radius:14px;padding:14px;display:grid;gap:4px;cursor:pointer;transition:border-color .15s,background .15s}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label:has(input:checked){border-color:var(--v);background:var(--soft)}
.pick b{font-size:1rem}
.pick-1{grid-template-columns:1fr}
.pick small{color:var(--muted)}
.flag{font-size:1.5rem;line-height:1}
.phone-in{display:grid;grid-template-columns:auto 1fr;gap:8px}
.pref{border:1px solid var(--line-2);border-radius:12px;padding:12px;font-weight:700;background:var(--soft)}
.pref-sel{position:relative;display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.pref-sel::after{content:"▾";font-size:.75rem;color:var(--ink-2)}
.pref-sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.pref-sel:focus-within{outline:2px solid var(--v);outline-offset:1px}
.done{display:grid;gap:14px;text-align:center;justify-items:center}
.done .big-ok{width:72px;height:72px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;font-size:2rem;font-weight:800}
.checklist{display:grid;gap:10px;text-align:left;width:100%}
.checklist div{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px}
.checklist .n{width:26px;height:26px;border-radius:50%;background:var(--soft-2);color:var(--v);display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}

/* ===== PANEL ===== */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:var(--soft)}
@media (max-width:960px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr}}
.sb{background:var(--bg);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
@media (max-width:960px){.sb{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line);gap:4px}.sb .logo,.sb .sb-foot,.sb .lbl{display:none}}
.sb .logo{padding:4px 8px 16px}
.sb .lbl{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;color:var(--muted);padding:10px 10px 4px;text-transform:uppercase}
.sb a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap}
.sb a:hover{background:var(--soft)}
.sb a.on{background:var(--soft-2);color:var(--v)}
.sb a .cnt{margin-left:auto;background:var(--v);color:#fff;border-radius:999px;font-size:.7rem;padding:1px 7px}
.sb svg{width:18px;height:18px;flex:none}
.sb-foot{margin-top:auto;background:var(--soft);border-radius:14px;padding:14px;display:grid;gap:8px;font-size:.84rem}
.bar-plan{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.bar-plan i{display:block;height:100%;width:47%;background:var(--v)}
.main{min-width:0;padding:22px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));display:grid;gap:18px;align-content:start}
@media (min-width:961px){.main{padding:26px 30px 40px}}
.top{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.top h1{font-size:1.6rem}
.top .sp{flex:1}
.live{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 8px;font-weight:700;font-size:.86rem}
.sw{width:36px;height:20px;border-radius:999px;background:var(--v);position:relative;border:0;padding:0;flex:none}
.sw::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}
.sw[aria-pressed="false"]{background:var(--line-2)}
.sw[aria-pressed="false"]::after{right:19px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(20,135,74,.5);animation:pl 2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 8px rgba(20,135,74,0)}100%{box-shadow:0 0 0 0 rgba(20,135,74,0)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.ex{font-family:var(--f-mono);font-size:.68rem;color:var(--v);background:var(--soft-2);border-radius:999px;padding:3px 9px}
.store{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-weight:600;font-size:.88rem}
.store-h{padding-left:9px;border-left:1px solid var(--line);color:var(--v);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.store-h:empty{display:none}
.mon{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:3px 4px 3px 9px;font-size:.84rem}
.mon select{border:0;background:transparent;font:inherit;font-weight:700;color:var(--ink);padding:4px 2px;cursor:pointer;max-width:12rem}
.mon select:focus-visible{outline:2px solid var(--v);border-radius:8px}
.son{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font:inherit;font-size:.84rem;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap}
.son:focus-visible{outline:2px solid var(--v)}

.kp{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1180px){.kp{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.kp{grid-template-columns:repeat(2,1fr)}}
.k{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:4px}
.k span{font-size:.8rem;color:var(--muted);font-weight:600}
.k b{font-family:var(--f-display);font-size:1.9rem;font-weight:800;line-height:1.05}
.k small{font-size:.76rem;font-weight:600}
.up{color:var(--ok)}.dn{color:var(--bad)}
.k.hl{background:linear-gradient(150deg,var(--v-deep),var(--v));border:0;color:#fff}
.k.hl span,.k.hl small{color:#ddd5ff}

.sc{background:var(--bg);border:1.5px solid var(--v);border-radius:16px;padding:14px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sc .ic{width:40px;height:40px;border-radius:12px}
.sc div.t{flex:1;min-width:200px}
.sc b{display:block}
.sc span{color:var(--muted);font-size:.88rem}

.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1180px){.grid2{grid-template-columns:1fr}}
.card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.card-h>*{min-width:0}
.tabs{max-width:100%}
.card-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card-h h3{font-size:1.08rem}
.card-h .sp{flex:1}
.tabs{display:flex;gap:4px;overflow-x:auto}
.tabs button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ord{display:grid;gap:6px}
.o{display:grid;grid-template-columns:36px minmax(0,1.6fr) minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px;border-radius:12px;border:1px solid transparent;text-align:left;background:transparent;width:100%;color:inherit}
.o:hover{background:var(--soft)}
.o[aria-current="true"]{background:var(--soft);border-color:var(--line-2)}
.o .av{width:36px;height:36px;font-size:.82rem}
.o b{display:block;font-size:.92rem}
.o small{display:block;color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o .m{font-family:var(--f-mono);font-size:.84rem;text-align:right}
@media (max-width:640px){.o{grid-template-columns:36px minmax(0,1fr) auto}.o .where,.o .m{display:none}}
.pill{font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-w{background:var(--warn-bg);color:var(--warn)}
.p-b{background:var(--bad-bg);color:var(--bad)}
.p-i{background:var(--info-bg);color:var(--info)}
.p-v{background:var(--soft-2);color:var(--v)}

.conv{position:sticky;top:20px;padding:0;overflow:hidden;gap:0}
.conv-h{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.conv-h b{display:block}
.conv-h small{color:var(--muted);font-size:.78rem}
.conv-h .sp{flex:1}
.banner{background:var(--v-deep);color:#fff;font-size:.82rem;padding:9px 16px;display:flex;gap:10px;align-items:center}
.banner .sp{flex:1}
.banner button{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:8px;padding:5px 10px;font-weight:700;font-size:.78rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.8rem}
.facts div{display:flex;gap:6px;align-items:center}
.facts .y{color:var(--ok);font-weight:800}
.facts .n{color:var(--muted);font-weight:800}
.conv .chat{background:var(--wa-bg);min-height:280px;max-height:360px;overflow-y:auto;font-size:.82rem}

.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-family:var(--f-body);font-size:11px}
.feed{display:grid;gap:10px}
.fe{display:flex;gap:10px;align-items:flex-start;font-size:.88rem}
.fe .ic{width:28px;height:28px;border-radius:8px;font-size:.8rem}
.fe small{display:block;color:var(--muted);font-size:.76rem}

/* ===== APP REAL ===== */
[hidden]{display:none!important}
.alert{border-radius:12px;padding:10px 14px;font-size:.88rem;font-weight:600}
.alert.bad{background:var(--bad-bg);color:var(--bad)}
.alert.ok{background:var(--ok-bg);color:var(--ok)}
.alert[hidden]{display:none}
.btn[disabled]{opacity:.6;cursor:wait}
.sec-panel[hidden]{display:none!important}
.empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:28px 12px;color:var(--muted)}
.empty b{color:var(--ink);font-size:1rem}
.steps-on{display:grid;gap:10px}
.st-on{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--bg)}
.st-on .n{width:30px;height:30px;border-radius:50%;background:var(--soft-2);color:var(--v);display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.st-on.ok .n{background:var(--ok-bg);color:var(--ok)}
.st-on div{flex:1;min-width:0}
.st-on b{display:block;font-size:.95rem}
.st-on small{color:var(--muted);font-size:.82rem}
.cx{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cx .card{gap:8px}
.cx .card b{font-size:1rem}
.cx .card p{color:var(--muted);font-size:.86rem}
.form-grid{display:grid;gap:14px;max-width:520px}
.plans-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:700px){.plans-mini{grid-template-columns:1fr}}
.plan-op{border:1.5px solid var(--line-2);border-radius:14px;padding:12px;display:grid;gap:4px;background:var(--bg);text-align:left;color:inherit}
.plan-op[aria-pressed="true"]{border-color:var(--v);background:var(--soft)}
.plan-op b{font-size:1rem}
.plan-op span{font-family:var(--f-display);font-weight:800;font-size:1.3rem}
.plan-op small{color:var(--muted);font-size:.8rem}
.plan-op b{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan-op i{font-style:normal;font-size:.7rem;font-weight:700;background:var(--v);color:#fff;border-radius:999px;padding:2px 9px}
.plan-op ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px;color:var(--muted);font-size:.8rem}
.plan-op li.no{opacity:.6}
.demo-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--soft-2);border-radius:12px;padding:8px 12px;font-size:.86rem}
.demo-bar .sp{flex:1}
@media (max-width:560px){.kp .k:last-child:nth-child(odd){grid-column:span 2}}
.eco{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.eco{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.eco{grid-template-columns:1fr}}
.eco li{display:flex;gap:10px;align-items:flex-start;background:var(--soft);border-radius:14px;padding:12px}
.eco .n{width:28px;height:28px;border-radius:50%;background:var(--v);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.82rem;flex:none}
.eco b{display:block;font-size:.94rem}
.eco small{color:var(--muted);font-size:.82rem;line-height:1.45}
.cx .row{flex-wrap:nowrap;align-items:flex-start}.cx .row b{min-width:0}
.cur-row .sp{flex:1}
.ciclo{display:inline-flex;background:var(--soft-2);border-radius:999px;padding:4px;gap:2px}
.ciclo button{border:0;background:transparent;border-radius:999px;padding:8px 16px;font-weight:700;font-size:.9rem;color:var(--ink-2);display:inline-flex;gap:8px;align-items:center}
.ciclo button[aria-pressed="true"]{background:var(--bg);color:var(--v);box-shadow:0 2px 8px rgba(44,33,112,.12)}
.ciclo em{font-style:normal;font-size:.72rem;background:var(--ok-bg);color:var(--ok);border-radius:999px;padding:2px 8px}
.anual-l{font-size:.86rem;color:var(--ok);font-weight:600}
.anual-l b{font-weight:800}
.plan-op em{font-style:normal;color:var(--ok);font-size:.78rem;font-weight:700}
.plan-op span small{font-family:var(--f-body);font-size:.78rem;font-weight:500;color:var(--muted)}
.verif{background:var(--bg);border:1.5px solid var(--warn);border-radius:16px;padding:12px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.verif .ic{width:38px;height:38px;border-radius:12px;background:var(--warn-bg);color:var(--warn)}
.verif .t{flex:1;min-width:200px}
.verif b{display:block}
.verif span{color:var(--muted);font-size:.88rem}

/* ---------- piloto: pedidos reales, conexiones y prueba ---------- */
.b.hu{align-self:flex-end;background:#e9e2ff;border-top-right-radius:2px}
.b em{display:block;font-style:normal;font-size:.68rem;color:#667;margin-top:2px;text-align:right}
.b .quien{display:block;font-size:.66rem;font-weight:700;color:var(--v-deep);margin-bottom:1px}
.nota{padding:10px 16px;font-size:.8rem;background:#fff7e6;color:#7a4b00;border-bottom:1px solid var(--line)}
.smart{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--soft)}
.smart div{flex:1;min-width:180px;font-size:.84rem}
.smart b{display:block;font-size:.9rem}
.datos{padding:10px 16px;border-bottom:1px solid var(--line);font-size:.8rem;display:grid;gap:3px}
.datos span{color:var(--muted)}
.resp{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.resp .inp{padding:10px 12px}
.ta{min-height:220px;resize:vertical;line-height:1.5;font-size:.9rem}
.cxf .fld{display:grid;gap:4px}
.cxf label{font-size:.8rem;font-weight:700}
.cxf .inp{padding:10px 12px;font-size:.88rem}
.copiar{display:flex;gap:6px;align-items:center}
.copiar code{flex:1;min-width:0;overflow-wrap:break-word;font:500 .74rem 'JetBrains Mono',monospace;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.cxf ol{margin:0;padding-left:18px;font-size:.82rem;color:var(--muted);display:grid;gap:3px}
.pr-ped{display:grid;grid-template-columns:1fr 110px;gap:8px}
.pr-chat{background:var(--wa-bg);border-radius:14px;min-height:220px;max-height:420px;overflow-y:auto}
.pr-box{display:flex;gap:8px}
.pr-acc{align-self:center;font-size:.72rem;font-weight:700;background:#fff;border:1px solid var(--line-2);border-radius:20px;padding:4px 10px;color:var(--v-deep)}
.cxw{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.cxf ol b,.cxf p b{font-size:inherit}
.cxf .row.pl{flex-wrap:wrap;gap:8px}
.sb-n{margin-left:auto;background:var(--v);color:#fff;border-radius:20px;font-size:.7rem;font-weight:800;padding:1px 8px}
.bloq{flex-direction:row;display:flex;gap:14px;align-items:center;flex-wrap:wrap;border:1.5px solid var(--v)}
.bloq .t{flex:1;min-width:200px}.bloq .t b{display:block}.bloq .t span{color:var(--muted);font-size:.88rem}
.bloq .ic{width:40px;height:40px;border-radius:12px}

/* productos (Mi tienda) */
.prods{display:grid;gap:10px}
.prod{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.prod .t{display:grid;gap:2px;flex:1;min-width:160px}
.prod .t b{font-size:.95rem}
.pe{display:grid;gap:12px;border:1px solid var(--line-2);background:var(--soft);border-radius:14px;padding:14px}
.pe textarea.inp{resize:vertical;line-height:1.45;font-size:.9rem}
.pp-fila{display:flex;align-items:center;gap:8px;margin-bottom:6px;max-width:420px}
.pp-fila .inp{min-width:0}
.pp-fila [data-pc]{width:64px;flex:none}
.pp-fila [data-pp]{flex:1;max-width:150px}
.pp-fila span{white-space:nowrap}
.pp-fila .btn{flex:none;padding-left:12px;padding-right:12px}
.pe-act{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem}
.pe-b{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pe-b .sp{flex:1}
.pe-borrar{color:var(--bad)}
.p-n{background:var(--soft-2);color:var(--muted)}
/* fotos y video del producto */
.pm-grid{display:flex;flex-wrap:wrap;gap:8px}
.pm{position:relative;width:76px;height:76px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#f6f4fb;flex:none}
.pm img,.pm video{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.pm-v{width:132px}
.pm-add{display:grid;place-content:center;justify-items:center;gap:2px;cursor:pointer;border-style:dashed;border-color:var(--line-2);color:var(--v-deep);text-align:center}
.pm-add b{font-size:1.2rem;line-height:1}
.pm-add span{font-size:.68rem;font-weight:600}
.pm-add:hover{background:#efeaf9}
.pm-est{display:grid;place-content:center;padding:6px;text-align:center;font-size:.68rem;color:var(--muted)}
.pm-x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;cursor:pointer;line-height:22px;padding:0}
.pm-err{flex-basis:100%;margin:0}
.p-mini{width:42px;height:42px;border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--line)}
.p-mini-v{display:grid;place-content:center;background:#f6f4fb;font-size:1rem;opacity:.6}
.pr-med{display:grid;grid-template-columns:repeat(3,64px);gap:4px;padding:6px}
.pr-med img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.pr-med video{grid-column:1/-1;width:200px;max-width:100%;border-radius:8px}
.pr-med small{grid-column:1/-1;font-size:.68rem;opacity:.7}
/* secciones plegables */
.plegable{display:block;padding:0;overflow:hidden}
.plegable>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px}
.plegable>summary::-webkit-details-marker{display:none}
.plegable>summary .t{display:grid;gap:2px;flex:1;min-width:0}
.plegable>summary .ver{font-size:.78rem;font-weight:700;color:var(--v);white-space:nowrap}
.plegable>summary .ver::after{content:" ▾";display:inline-block;transition:transform .2s}
.plegable[open]>summary .ver::after{transform:rotate(180deg)}
.plegable>summary:focus-visible{outline:2px solid var(--v);outline-offset:-2px}
.plegable>form{display:grid;gap:12px;padding:14px 18px 18px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.plegable>summary .ver::after{transition:none}}
.plegable>.pleg-c{display:grid;gap:12px;padding:14px 18px 18px;border-top:1px solid var(--line)}
.plegable ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:.88rem}
/* seguimiento courier */
.env-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.env-form .fld{display:grid;gap:4px;min-width:0}
.env-form-b{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.env-form{grid-template-columns:1fr}}
.envs,.incs{display:grid;gap:10px}
.env,.inc{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:10px;min-width:0}
.env.alerta{border-color:var(--warn)}
.env-h{display:flex;align-items:center;gap:10px;min-width:0}
.env-h .av{width:36px;height:36px;font-size:.82rem;flex:none}
.env-h .t{display:grid;gap:1px;flex:1;min-width:0}
.env-h .t small{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pasos5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.pasos5 span{display:grid;gap:4px;font-size:.68rem;font-weight:600;color:var(--muted);text-align:center}
.pasos5 span::before{content:"";height:6px;border-radius:6px;background:var(--line)}
.pasos5 span.si{color:var(--v-deep)}
.pasos5 span.si::before{background:var(--v)}
.pasos5.nov span.ult::before{background:var(--warn)}
.pasos5.fin span.si::before{background:var(--ok)}
.env-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.78rem;color:var(--muted)}
.env-meta b{color:var(--ink-2);font-weight:600}
.env-meta .lento{color:var(--warn);font-weight:700}
.env-acc{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.env-acc a{font-size:.8rem;font-weight:600;color:var(--v)}
.inc-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end}
@media (max-width:640px){.inc-f{grid-template-columns:1fr}}
.inc-mot,.inc-sol{font-size:.86rem;border-radius:10px;padding:8px 10px}
.inc-mot{background:var(--warn-bg);color:var(--ink-2)}
.inc-sol{background:var(--ok-bg);color:var(--ink-2)}
.inc-mot b,.inc-sol b{display:block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.inc-mot b{color:var(--warn)}.inc-sol b{color:var(--ok)}
.inc-sol.no{background:var(--soft-2)}.inc-sol.no b{color:var(--muted)}
.inc-forza{display:grid;gap:7px;border:1px dashed var(--line);border-radius:10px;padding:10px}
.inc-forza b{font-size:.82rem}.inc-forza textarea{resize:vertical;min-height:40px}
.cx-pasos{display:grid;gap:9px;margin:2px 0}.cx-pasos>b{font-size:.84rem}
.cx-steps{display:grid;gap:0;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:4px 12px}
.cx-step{display:grid;grid-template-columns:22px 30px minmax(0,1fr);align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.cx-step:first-child{border-top:0}
.cx-step .cx-ill{width:28px;height:28px;color:var(--v)}
.cx-step p{font-size:.86rem;line-height:1.4;margin:0;color:var(--ink-2);min-width:0;overflow-wrap:break-word}
.cx .cx-step p b,.cx-step p b{font-size:inherit;font-weight:700;color:var(--ink)}
.cx-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--v);color:#fff;font-size:.74rem;font-weight:800}
/* semáforo de conexiones */
.sem{display:grid;gap:2px;margin-top:10px}
.sem-fila{display:flex;align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sem-fila:last-child{border-bottom:0}
.sem-luz{width:11px;height:11px;border-radius:999px;flex:none;background:var(--info)}
.sem-luz.ok{background:var(--ok)}.sem-luz.error{background:var(--bad)}.sem-luz.falta{background:var(--info)}
.sem-nom{font-weight:700;font-size:.86rem}
.sem-det{flex-basis:100%;margin-left:20px}
@media(min-width:560px){.sem-det{flex-basis:auto;margin-left:4px}}
/* filtros de fecha (como Smart Commerce) */
.fechas{display:flex;flex-wrap:wrap;gap:4px;align-items:center;position:relative}
.fechas>button{border:0;background:transparent;border-radius:999px;padding:6px 12px;font-size:.84rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.fechas>button:hover{background:var(--soft)}
.fechas>button[aria-pressed="true"]{background:var(--v);color:#fff}
.fe-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:20;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:grid;gap:10px;width:min(340px,100%)}
.fe-dos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fe-dos label{display:grid;gap:4px;font-size:.78rem;font-weight:600;color:var(--muted)}
.fe-dos .inp{padding:8px 10px;font-size:.88rem}
.fe-b{display:flex;gap:8px;justify-content:flex-end}

/* conversaciones: lista + teléfono */
.bj{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.bj-lado{padding:0;gap:0;grid-template-rows:auto minmax(0,1fr);max-height:min(760px,calc(100dvh - 40px));overflow:hidden}
.bj-top{display:grid;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.bj-top .bj-fila{display:flex;align-items:center;gap:10px}
.bj-top .sp{flex:1}
.bj-top h3{font-size:1.08rem}
.bj-buscar{padding:9px 12px;font-size:.88rem;background:var(--soft);border-color:var(--line)}
.bj-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bad);color:#fff;font-size:.68rem;margin-left:2px}
.bj-lista{overflow-y:auto;padding:8px;display:grid;gap:4px;align-content:start}
.bj-item{border:1px solid transparent;border-radius:14px;min-width:0}
.bj-item.sel{background:var(--soft);border-color:var(--line-2)}
.bj-item.alerta .av{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--warn)}
.bj-cab{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;border:0;border-radius:14px;padding:10px;color:inherit}
.bj-cab:hover{background:var(--soft)}
.bj-cab .av{width:40px;height:40px;font-size:.84rem}
.bj-cu{display:grid;gap:1px;min-width:0}
.bj-l1{display:flex;align-items:center;gap:6px;min-width:0}
.bj-l1 b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bj-ojo{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--warn);color:#fff;font-size:.66rem;font-weight:800;flex:none}
.bj-hora{margin-left:auto;font-size:.72rem;color:var(--muted);white-space:nowrap;padding-left:6px}
.bj-cu small{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bj-prev{font-size:.8rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bj-est{display:grid;gap:4px;justify-items:end}
.bj-det{display:grid;gap:10px;padding:2px 12px 14px 60px;min-width:0}
.bj-det .facts{padding:0;border:0}
.bj-det .nota,.bj-det .smart,.bj-det .datos{margin:0}
.nota{background:var(--warn-bg);color:var(--ink-2);border-radius:10px;padding:8px 10px;font-size:.84rem}
.bj-det .datos{display:grid;gap:3px;font-size:.84rem}
.bj-det .datos span{color:var(--muted)}
.bj-det .smart{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.84rem}
.bj-det .smart b{display:block}
.bj-chat{position:sticky;top:16px;display:grid;gap:10px;justify-items:center}
.bj-volver,.bj-det-movil{display:none}

/* el teléfono */
.tel-marco{width:340px;height:min(700px,calc(100dvh - 40px));min-height:560px;border-radius:52px;background:#0d0d0f;padding:11px;box-shadow:0 0 0 1px #3a3a3e,0 0 0 3px #1c1c1f,0 24px 50px rgba(27,21,54,.28)}
.tel-pantalla{height:100%;border-radius:42px;overflow:hidden;background:#0b141a;display:flex;flex-direction:column;position:relative;color:#e9edef;font-size:14px}
.tel-pantalla::after{content:"";position:absolute;left:50%;bottom:7px;width:118px;height:5px;margin-left:-59px;border-radius:5px;background:#e9edef;opacity:.85}
.tel-estado{position:relative;display:flex;justify-content:space-between;align-items:center;height:44px;padding:4px 26px 0 30px;font-weight:600;font-size:14px;color:#fff;background:#121b22;flex:none}
.tel-estado .isla{position:absolute;left:50%;top:9px;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000}
.tel-ic{display:flex;gap:5px;align-items:center}
.tel-ic i{display:block;background:#fff;border-radius:2px}
.tel-ic .s{width:16px;height:10px;clip-path:polygon(0 70%,22% 70%,22% 100%,0 100%,0 70%,26% 50%,48% 50%,48% 100%,26% 100%,26% 50%,52% 25%,74% 25%,74% 100%,52% 100%,52% 25%,78% 0,100% 0,100% 100%,78% 100%,78% 0)}
.tel-ic .w{width:14px;height:10px;border-radius:14px 14px 2px 2px;clip-path:polygon(50% 100%,0 20%,100% 20%)}
.tel-ic .b{width:24px;height:11px;border-radius:3.5px;background:linear-gradient(90deg,#fff 70%,rgba(255,255,255,.35) 70%)}
.wa-cab{display:flex;align-items:center;gap:8px;padding:6px 12px 8px 6px;background:#121b22;border-bottom:1px solid #1f2c34;flex:none}
.wa-atras{display:flex;align-items:center;gap:2px;background:none;border:0;color:#e9edef;font-size:1.7rem;line-height:1;padding:0 2px;font-weight:300}
.wa-atras span{font-size:.86rem;font-weight:500}
.wa-cab .av{width:34px;height:34px;font-size:.76rem;flex:none}
.wa-n{display:grid;min-width:0;flex:1}
.wa-n b{font-size:.92rem;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-n small{font-size:.7rem;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-ic{display:flex;gap:14px;color:#e9edef}
.wa-ic svg{width:21px;height:21px}
.wa-fijo{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:.74rem;background:#182229;border-bottom:1px solid #1f2c34;color:#d1d7db;flex:none}
.wa-fijo span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-fijo b{color:#fff}
.wa-fijo.ia{box-shadow:inset 3px 0 0 #8b6ff5}
.wa-fijo.yo{box-shadow:inset 3px 0 0 #53bdeb}
.wa-fijo button{border:0;border-radius:999px;padding:5px 10px;font-size:.72rem;font-weight:700;background:#00a884;color:#0b141a;white-space:nowrap}
.wa-msgs{flex:1;overflow-y:auto;padding:10px 10px 12px;display:flex;flex-direction:column;gap:3px;background-color:#0b141a;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px);background-size:18px 18px}
.wa-dia{align-self:center;margin:8px 0 6px;padding:4px 10px;border-radius:8px;background:#182229;color:#8696a0;font-size:.7rem;font-weight:600}
.wa-m{max-width:84%;padding:6px 8px 5px 9px;border-radius:9px;font-size:.84rem;line-height:1.36;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px .5px rgba(0,0,0,.25)}
.wa-m.entra{align-self:flex-start;background:#202c33;border-top-left-radius:2px}
.wa-m.sale{align-self:flex-end;background:#005c4b;border-top-right-radius:2px}
.wa-q{display:block;font-size:.7rem;font-weight:700;margin-bottom:1px}
.wa-q.v{color:#c4b5fd}.wa-q.u{color:#7dd3fc}.wa-q.r{color:#fcd34d}
.wa-h{float:right;margin:7px 0 -3px 10px;font-size:.64rem;color:rgba(233,237,239,.6);white-space:nowrap}
.wa-h i{font-style:normal;color:#53bdeb;letter-spacing:-.18em;margin-left:2px}
.wa-aviso{align-self:center;max-width:90%;margin:6px 0;padding:6px 10px;border-radius:8px;background:#182229;color:#ffd279;font-size:.72rem;text-align:center;line-height:1.35}
.wa-vacio{flex:1;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:24px;color:#8696a0;font-size:.84rem}
.wa-vacio b{color:#e9edef;font-size:.95rem}
.wa-pie{display:flex;align-items:flex-end;gap:9px;padding:7px 10px 22px;background:#121b22;flex:none}
.wa-mas{font-size:1.65rem;line-height:32px;color:#e9edef;font-weight:300;flex:none;width:28px;height:32px;padding:0}
.wa-mas,.wa-cam{background:none;border:0;font-family:inherit;cursor:pointer;border-radius:50%}
.wa-mas:disabled,.wa-cam:disabled{opacity:.4;cursor:default}
.wa-mas:focus-visible,.wa-cam:focus-visible{outline:2px solid #00a884}
.wa-pie.subiendo textarea{opacity:.6}
.wa-pie textarea{flex:1;min-width:0;resize:none;border:0;border-radius:18px;background:#2a3942;color:#e9edef;padding:7px 12px;font:inherit;font-size:.86rem;line-height:1.3;min-height:34px;max-height:110px;outline:none}
.wa-pie textarea::placeholder{color:#8696a0}
.wa-pie textarea:disabled{opacity:.75}
.wa-cam,.wa-mic,.wa-env{display:grid;place-items:center;flex:none;width:32px;height:32px;color:#e9edef}
.wa-cam svg,.wa-mic svg{width:22px;height:22px}
.wa-mic{border-radius:50%;background:#00a884;color:#0b141a}
.wa-mic svg{width:18px;height:18px}
.wa-env{border:0;border-radius:50%;background:#00a884;color:#0b141a;padding:0;display:none}
.wa-env svg{width:17px;height:17px;margin-left:2px}
.wa-pie.lleno .wa-env{display:grid}
.wa-pie.lleno .wa-mic,.wa-pie.lleno .wa-cam{display:none}
.env-form-t{grid-column:1/-1}

@media (max-width:1100px){.bj{grid-template-columns:minmax(0,1fr) 310px}.tel-marco{width:310px}}
@media (max-width:760px){
  .bj{grid-template-columns:minmax(0,1fr)}
  .bj-lado{max-height:none}
  .bj-chat{display:none;position:static;justify-items:stretch}
  .bj.ver-chat .bj-lado{display:none}
  .bj.ver-chat .bj-chat{display:grid}
  .bj-volver{display:inline-flex;justify-self:start}
  .bj-det-movil{display:block}
  .bj-det-movil .bj-det{padding:12px 16px 16px;border-top:1px solid var(--line)}
  .bj-det-movil>.plegable{width:100%}
  .bj-lista .bj-det{display:none}
  .tel-marco{width:100%;height:calc(100dvh - 24px);min-height:480px;border-radius:22px;padding:0;box-shadow:0 0 0 1px var(--line)}
  .tel-pantalla{border-radius:22px}
  .tel-pantalla::after,.tel-estado{display:none}
}
/* ===== ADMINISTRACIÓN: clientes y gráficas en 3D ===== */
.ad-graficas{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.ad-ancha{grid-column:1/-1}
@media (max-width:900px){.ad-graficas{grid-template-columns:minmax(0,1fr)}}
.g3{position:relative;height:210px;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:6px;align-items:end;padding:20px 14px 0 4px;border-radius:14px;background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);overflow:hidden}
.g3-mini{height:150px}
.g3-piso{position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(180deg,var(--soft-2),#e4dcfb);transform:perspective(260px) rotateX(55deg);transform-origin:bottom}
.g3-col{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:end;min-width:0;z-index:1}
.g3-val{font-size:.68rem;font-weight:700;color:var(--v-deep);white-space:nowrap;align-self:end;margin-bottom:12px}
.g3-x{font-size:.64rem;color:var(--muted);white-space:nowrap;height:18px;line-height:18px}
.b3{--d:9px;position:relative;width:calc(100% - var(--d));max-width:34px;min-height:2px;margin-right:var(--d);background:linear-gradient(180deg,var(--v-hi),var(--v));border-radius:2px 0 0 0;align-self:end}
.b3::before{content:"";position:absolute;left:0;top:calc(var(--d) * -1);width:100%;height:var(--d);background:#9d86f5;transform-origin:bottom left;transform:skewX(-45deg)}
.b3::after{content:"";position:absolute;right:calc(var(--d) * -1);top:0;width:var(--d);height:100%;background:var(--v-deep);transform-origin:top left;transform:skewY(-45deg)}
.b3.gris{background:linear-gradient(180deg,#cfc8e4,#b3abcc)}
.b3.gris::before{background:#ded8ef}
.b3.gris::after{background:#8f87b3}
.g3-col:hover .b3{filter:brightness(1.08)}
.h3d{display:grid;gap:10px}
.h3-fila{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr) auto;gap:12px;align-items:center}
.h3-n{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h3-pista{height:22px;padding-top:6px}
.h3b{--d:6px;position:relative;height:16px;background:linear-gradient(90deg,var(--v),var(--v-hi));border-radius:0 0 0 2px}
.h3b::before{content:"";position:absolute;left:0;top:calc(var(--d) * -1);width:100%;height:var(--d);background:#9d86f5;transform-origin:bottom left;transform:skewX(-45deg)}
.h3b::after{content:"";position:absolute;right:calc(var(--d) * -1);top:0;width:var(--d);height:100%;background:var(--v-deep);transform-origin:top left;transform:skewY(-45deg)}
.h3-v{font-size:.78rem;font-weight:700;color:var(--ink-2);white-space:nowrap}
@media (max-width:560px){.h3-fila{grid-template-columns:minmax(0,1fr) auto}.h3-pista{grid-column:1/-1;grid-row:2}}
.ad-buscar{max-width:280px;padding:9px 12px;font-size:.88rem}
.g3-muchas{gap:3px}
.g3-muchas .b3{--d:5px}
.ad-lista{display:grid;gap:8px}
.ad-c{border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.ad-c.on{border-color:var(--line-2);box-shadow:0 6px 20px rgba(44,33,112,.08)}
.ad-cab{width:100%;border:0;background:transparent;display:grid;grid-template-columns:auto minmax(0,1.6fr) auto repeat(3,minmax(0,1fr));gap:12px;align-items:center;padding:12px 14px;text-align:left;color:inherit}
.ad-q{display:grid;min-width:0}
.ad-q b,.ad-q small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-q small,.ad-m small{color:var(--muted);font-size:.74rem}
.ad-m{display:grid;justify-items:end;min-width:0}
.ad-m b{font-size:.98rem}
.ad-m small{white-space:nowrap}
@media (max-width:900px){.ad-cab{grid-template-columns:auto minmax(0,1fr) auto}.ad-m{display:none}}
@media (max-width:560px){.ad-cab{grid-template-columns:auto minmax(0,1fr)}.ad-cab .pill{grid-column:2;justify-self:start}}
.ad-det{border-top:1px solid var(--line);padding:14px;display:grid;gap:14px}
.ad-hechos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 18px}
.ad-hechos div{display:grid;gap:2px;min-width:0}
.ad-hechos span{font-size:.74rem;color:var(--muted);font-weight:600}
.ad-hechos b{font-size:.86rem;font-weight:600;overflow-wrap:break-word}
.ad-serie{display:grid;gap:8px}
.ad-pago{display:grid;gap:8px;background:var(--soft);border-radius:12px;padding:12px}
.ad-pago-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ad-pago-f select{width:auto;min-width:110px;padding:8px 10px}
.k small.bad{color:var(--bad)}