/* Celular animado de las portadas (public/static/phone-demo.js). Colores por marca con --pd-acc / --pd-acc2. */
.pd{--pd-acc:#3F6AF6;--pd-acc2:#EE8139;--pd-ink:#0a0a0a;--pd-soft:#f4f6fa;--pd-line:#e6e8ef;--pd-mut:#6b7080;position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.pd-stage{position:relative;width:100%;display:flex;justify-content:center}
.pd-stage::before{content:"";position:absolute;left:50%;top:6%;width:min(420px,96%);height:86%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pd-acc) 22%,transparent),transparent);filter:blur(10px);z-index:0}
.pd-dev{position:relative;z-index:1;width:min(290px,74vw);aspect-ratio:9/18.6;border-radius:42px;background:#0d0d0f;padding:10px;box-shadow:0 0 0 1px #2a2a2e,0 36px 70px rgba(16,24,40,.26),0 4px 10px rgba(16,24,40,.12)}
.pd-dev::before{content:"";position:absolute;top:18px;left:50%;width:78px;height:22px;margin-left:-39px;border-radius:14px;background:#000;z-index:5}
.pd-scr{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:#fff;font:12px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--pd-ink);isolation:isolate}
.pd-sc{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(18px) scale(.985);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s .55s}
.pd-sc.cur{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s}
.pd-sc.out{transform:translateX(-18px) scale(.985)}
.pd:not(.pd-js) .pd-sc[data-static]{opacity:1;visibility:visible;transform:none}
/* elementos que aparecen */
.pd-js .pd-sc [data-at]{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.pd-js .pd-sc [data-at].on{opacity:1;transform:none}
.pd .typing::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:currentColor;animation:pd-car .8s steps(1) infinite}
@keyframes pd-car{50%{opacity:0}}
.pd .tap{animation:pd-tap .45s ease}
@keyframes pd-tap{0%{transform:none}35%{transform:scale(.93);filter:brightness(.9)}100%{transform:none}}
/* barra de estado */
.pd-sb{height:40px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 20px 5px 26px;font:600 10.5px/1 Inter,system-ui,sans-serif;color:inherit}
.pd-sb i{display:inline-block;width:16px;height:8px;border:1.4px solid currentColor;border-radius:2px;position:relative;opacity:.8}
.pd-sb i::after{content:"";position:absolute;inset:1px 4px 1px 1px;background:currentColor;border-radius:1px}
/* app genérica */
.pd-top{display:flex;align-items:center;gap:8px;padding:6px 12px 9px;border-bottom:1px solid var(--pd-line);flex:none}
.pd-top b{font:700 12.5px/1.15 Poppins,Inter,sans-serif;letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 10px/1 Poppins,Inter,sans-serif;color:#fff;background:var(--pd-acc)}
.pd-cart{position:relative;width:24px;height:24px;border-radius:8px;background:var(--pd-soft);flex:none;display:grid;place-items:center}
.pd-cart svg{width:14px;height:14px}
.pd-cart em{position:absolute;right:-5px;top:-5px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--pd-acc2);color:#fff;font:700 9px/15px Inter,sans-serif;font-style:normal;text-align:center;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.pd-cart em.on{transform:scale(1)}
.pd-body{flex:1;min-height:0;padding:10px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.pd-h{font:700 14px/1.15 Poppins,Inter,sans-serif;letter-spacing:-.02em;margin:0}
.pd-mut{color:var(--pd-mut);font-size:10.5px}
.pd-g2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pd-p{border:1px solid var(--pd-line);border-radius:11px;overflow:hidden;background:#fff}
.pd-p .im{display:block;aspect-ratio:1.15;background:linear-gradient(135deg,#fde9d6,#f6c79d)}
.pd-p:nth-child(2) .im{background:linear-gradient(135deg,#fdf3d0,#f3dc8b)}
.pd-p:nth-child(3) .im{background:linear-gradient(135deg,#e4edf8,#bcd0ee)}
.pd-p:nth-child(4) .im{background:linear-gradient(135deg,#f9e3dc,#f0bba9)}
.pd-p .tx{padding:5px 7px 7px}
.pd-p .tx span{display:block;font-size:10px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-p .tx strong{display:block;font:700 10.5px/1.2 Poppins,Inter,sans-serif;margin-top:2px}
.pd-add{display:block;margin-top:5px;height:20px;border-radius:7px;background:var(--pd-acc);color:#fff;font:600 9px/20px Inter,sans-serif;text-align:center;transition:background .25s}
.pd-add.ok{background:var(--pd-ink)}
.pd-add.ok::after{content:" ✓"}
.pd-btn{height:34px;border-radius:999px;background:var(--pd-acc);color:#fff;font:600 11.5px/34px Poppins,Inter,sans-serif;text-align:center;flex:none;display:flex;align-items:center;justify-content:center;gap:6px}
.pd-btn svg{width:14px;height:14px}
.pd-foot{padding:8px 12px 14px;flex:none;display:grid;gap:6px}
.pd-sum{display:flex;justify-content:space-between;font-size:11px}
.pd-sum b{font:700 12px/1.2 Poppins,Inter,sans-serif}
/* chat */
.pd-chat{background:#efeae2;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 9px;overflow:hidden;position:relative}
.pd-chat::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1.2px);background-size:14px 14px;pointer-events:none}
.pd-bub{position:relative;max-width:86%;padding:6px 8px 5px;border-radius:9px;font-size:11px;line-height:1.38;box-shadow:0 1px .5px rgba(0,0,0,.13);white-space:pre-line;word-wrap:break-word}
.pd-bub.me{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.pd-bub.them{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.pd-bub .tm{display:block;text-align:right;font-size:9px;color:#667781;margin-top:2px}
.pd-bub .tm i{font-style:normal;color:#53bdeb}
.pd-dots{align-self:flex-start;background:#fff;border-radius:9px;border-top-left-radius:2px;padding:8px 10px;display:flex;gap:3px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.pd-dots i{width:5px;height:5px;border-radius:50%;background:#8696a0;animation:pd-bl 1.1s infinite}
.pd-dots i:nth-child(2){animation-delay:.15s}.pd-dots i:nth-child(3){animation-delay:.3s}
@keyframes pd-bl{0%,60%,100%{opacity:.3}30%{opacity:1}}
.pd-wa{background:#075e54;color:#fff;border:0}
.pd-wa .pd-av{background:#fff;color:#075e54}
.pd-wa small{display:block;font-size:9.5px;opacity:.8;font-weight:400}
.pd-in{display:flex;gap:6px;padding:6px 8px 12px;background:#efeae2;flex:none}
.pd-in span{flex:1;height:30px;border-radius:16px;background:#fff;display:flex;align-items:center;padding:0 12px;color:#8696a0;font-size:11px}
.pd-in em{width:30px;height:30px;border-radius:50%;background:#00a884;flex:none}
/* notificación */
.pd-toast{position:absolute;left:8px;right:8px;top:44px;z-index:4;display:flex;gap:9px;align-items:center;padding:9px 10px;border-radius:15px;background:rgba(255,255,255,.97);box-shadow:0 10px 26px rgba(16,24,40,.22),0 0 0 1px rgba(16,24,40,.05);transform:translateY(-130%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.25,1.15),opacity .3s}
.pd-toast.on{transform:none;opacity:1}
.pd-toast .ic{width:30px;height:30px;border-radius:9px;background:var(--pd-acc);color:#fff;display:grid;place-items:center;flex:none}
.pd-toast .ic svg{width:16px;height:16px}
.pd-toast b{display:block;font:700 11.5px/1.2 Poppins,Inter,sans-serif}
.pd-toast span{display:block;font-size:10.5px;color:var(--pd-mut);line-height:1.3}
.pd-js .pd-toast[data-at]{transform:translateY(-130%)}
.pd-js .pd-toast[data-at].on{transform:none}
/* panel */
.pd-kpi{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pd-kpi div{background:var(--pd-soft);border-radius:10px;padding:8px 9px}
.pd-kpi small{display:block;font-size:9.5px;color:var(--pd-mut)}
.pd-kpi b{font:700 14px/1.2 Poppins,Inter,sans-serif}
.pd-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid var(--pd-line);border-radius:10px;background:#fff;font-size:10.5px;transition:background .4s,border-color .4s,box-shadow .4s}
.pd-row b{font-weight:700}
.pd-row .r{margin-left:auto;text-align:right}
.pd-row.new{border-color:var(--pd-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pd-acc) 16%,transparent)}
.pd-pill{display:inline-block;padding:2px 7px;border-radius:999px;font:600 9px/1.4 Inter,sans-serif;background:#fff1e6;color:#b2470d}
.pd-pill.ok{background:#e6f6ed;color:#13804a}
/* controles */
.pd-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.pd-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.pd-steps li{font:600 11.5px/1 Poppins,Inter,sans-serif;color:var(--pd-mut);padding:7px 10px;border-radius:999px;background:var(--pd-soft);transition:background .3s,color .3s}
.pd-steps li.on{background:var(--pd-ink);color:#fff}
.pd-tg{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 10px;border-radius:999px;border:1px solid var(--pd-line);background:#fff;color:var(--pd-ink);font:600 12.5px/1 Poppins,Inter,sans-serif;cursor:pointer}
.pd-tg:hover{border-color:var(--pd-ink)}
.pd-tg:focus-visible{outline:2.5px solid var(--pd-acc);outline-offset:2px}
.pd-tg .p,.pd-tg .s{width:14px;height:14px}
.pd-tg .s{display:none}.pd-tg.is-paused .p{display:none}.pd-tg.is-paused .s{display:block}
.pd:not(.pd-js) .pd-tg{display:none}
@media (prefers-reduced-motion:reduce){
  .pd-sc,.pd-js .pd-sc [data-at],.pd-toast{transition:none!important}
  .pd .tap{animation:none}
}
@media (max-width:640px){
  .pd-dev{width:min(250px,70vw);border-radius:36px;padding:8px}
  .pd-scr{border-radius:29px}
  .pd-steps li{font-size:11px;padding:6px 9px}
}