/* ============================================================
   onboarding.css — asistente de primera vez a pantalla completa
   Movimiento: fondo con luces que se desplazan, paneles que salen y
   entran deslizándose con los elementos en cascada, botones con
   relieve, brillo y respuesta al pulsar, y salida que revela la app.
   ============================================================ */
body.ob-open{overflow:hidden}
#welcome{position:fixed;inset:0;z-index:800;background:#fff;overflow:auto;font-family:var(--font);display:flex;flex-direction:column;align-items:center;animation:ob-fade .6s ease-out}
#welcome.out{animation:ob-out .6s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
#app.ob-reveal{animation:ob-reveal .9s cubic-bezier(.2,.8,.2,1) both}

/* ---- Fondo: luces de color en movimiento + velo que respira ---- */
.ob-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:linear-gradient(120deg,#ffffff 0%,#f7f8fc 50%,#fff 100%)}
.ob-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 100%)}
.ob-bg span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85;mix-blend-mode:multiply;will-change:transform}
.ob-bg .b1{width:56vmax;height:56vmax;background:#c9d8ff;top:-22vmax;right:-14vmax;animation:ob-drift1 12s ease-in-out infinite alternate}
.ob-bg .b2{width:50vmax;height:50vmax;background:#ffd9c2;bottom:-24vmax;left:-14vmax;animation:ob-drift2 14s ease-in-out infinite alternate}
.ob-bg .b3{width:38vmax;height:38vmax;background:#d7f5e6;top:30%;left:-16vmax;animation:ob-drift3 11s ease-in-out infinite alternate}
.ob-bg .b4{width:34vmax;height:34vmax;background:#efdcff;bottom:8%;right:-10vmax;animation:ob-drift4 13s ease-in-out infinite alternate}
@keyframes ob-drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-14vw,10vh) scale(1.12)}100%{transform:translate(-26vw,-6vh) scale(.95)}}
@keyframes ob-drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(16vw,-12vh) scale(1.1)}100%{transform:translate(28vw,6vh) scale(.92)}}
@keyframes ob-drift3{0%{transform:translate(0,0)}100%{transform:translate(30vw,-22vh) scale(1.2)}}
@keyframes ob-drift4{0%{transform:translate(0,0)}100%{transform:translate(-26vw,-30vh) scale(1.15)}}

/* ---- Cabecera: puntos de progreso ---- */
.ob-top{position:relative;z-index:1;width:min(100%,660px);display:flex;align-items:center;justify-content:space-between;padding:22px 24px 0;min-height:66px}
.ob-top>span:first-child{width:72px}
.ob-top .btn-text{transition:transform .2s,background .2s}
.ob-top .btn-text:hover{transform:translateX(-3px)}
.ob-dots{display:flex;gap:9px}
.ob-dots span{width:8px;height:8px;border-radius:50%;background:var(--border);transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .35s,width .35s}
.ob-dots span.on{background:var(--text);width:22px;border-radius:5px}
.ob-dots span.done{background:var(--muted-2)}
.ob-count{font-size:12px;color:var(--muted);min-width:72px;text-align:right}

/* ---- Paneles: entran y salen deslizándose ---- */
.ob-panel{position:relative;z-index:1;width:min(100%,660px);padding:26px 24px 56px;animation:ob-in .55s cubic-bezier(.2,.8,.2,1) both}
.ob-panel.back{animation-name:ob-in-back}
.ob-panel.same{animation:none}
.ob-panel.same>*{animation:none!important}
.ob-panel.leave{animation:ob-leave .26s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
.ob-panel.leave-back{animation:ob-leave-back .26s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
/* Cascada: cada bloque del paso entra un poco después que el anterior */
.ob-panel>*{animation:ob-up .6s cubic-bezier(.2,.8,.2,1) both}
.ob-panel>*:nth-child(1){animation-delay:.05s}.ob-panel>*:nth-child(2){animation-delay:.12s}.ob-panel>*:nth-child(3){animation-delay:.19s}
.ob-panel>*:nth-child(4){animation-delay:.26s}.ob-panel>*:nth-child(5){animation-delay:.33s}.ob-panel>*:nth-child(6){animation-delay:.4s}
.ob-panel>*:nth-child(7){animation-delay:.47s}.ob-panel>*:nth-child(8){animation-delay:.54s}.ob-panel>*:nth-child(n+9){animation-delay:.6s}
.ob-panel h1{font-size:34px;font-weight:800;letter-spacing:-.6px;margin:0 0 8px;line-height:1.1}
.ob-sub{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 26px}
.ob-sub b{color:var(--text)}

/* ---- Intro ---- */
.ob-intro{text-align:center;padding-top:9vh;animation:none!important}
.ob-intro h1{font-size:46px;margin-bottom:12px}
.ob-intro .ob-sub{max-width:440px;margin:0 auto 32px}
.ob-mark{width:72px;height:72px;border-radius:18px;border:2px dashed var(--border);display:grid;place-items:center;color:var(--muted);flex-shrink:0}
.ob-mark.big{width:96px;height:96px;border-radius:28px;margin:0 auto 28px;background:var(--text);color:#fff;border:0;box-shadow:0 18px 44px rgba(17,18,20,.22);position:relative}
.ob-mark.big.st1{animation:ob-pop .7s cubic-bezier(.34,1.56,.64,1) both,ob-hover 3.6s ease-in-out .8s infinite}
.ob-mark.big::after{content:'';position:absolute;inset:-10px;border-radius:36px;border:2px solid rgba(17,18,20,.14);animation:ob-ring 2.6s ease-out 1s infinite}
.st1{animation:ob-up .6s .08s cubic-bezier(.2,.8,.2,1) both}
.st2{animation:ob-up .6s .26s cubic-bezier(.2,.8,.2,1) both}
.st3{animation:ob-up .6s .42s cubic-bezier(.2,.8,.2,1) both}
.st4{animation:ob-up .6s .58s cubic-bezier(.2,.8,.2,1) both}

/* ---- Final ---- */
.ob-donehead{text-align:center;padding-top:2vh}
.ob-check{width:76px;height:76px;border-radius:50%;background:#dff7ec;color:#0a7c4a;display:grid;place-items:center;margin:0 auto 20px;position:relative}
.ob-check.st1{animation:ob-pop .7s cubic-bezier(.34,1.56,.64,1) both}
.ob-check::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid #0a7c4a;opacity:0;animation:ob-ring 2.2s ease-out .5s infinite}
.ob-check .ic{animation:ob-pop .5s .35s cubic-bezier(.34,1.56,.64,1) both}

/* ---- Botones ---- */
.ob-cta{padding:12px 26px;font-size:15px;border-radius:999px;gap:8px;position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(17,18,20,.22);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}
.ob-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(17,18,20,.28)}
.ob-cta:active{transform:translateY(0) scale(.97);box-shadow:0 4px 12px rgba(17,18,20,.2)}
.ob-cta .ic{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.ob-cta:hover .ic{transform:translateX(4px)}
.ob-cta::after{content:'';position:absolute;top:-40%;bottom:-40%;left:-60%;width:40%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:skewX(-20deg);animation:ob-shine 2.8s ease-in-out .9s infinite}
.ob-foot{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:22px}
.ob-skip{color:var(--muted);transition:color .2s}
.ob-skip:hover{color:var(--text)}
.ob-panel .avatar-big,.ob-panel .logo-drop{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .2s,background .2s}
.ob-panel .avatar-big:hover{transform:scale(1.05);box-shadow:0 10px 24px rgba(17,18,20,.16)}
.ob-panel .logo-drop:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(17,18,20,.1)}
.ob-panel .pf-color-row span{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.ob-panel .pf-color-row span:hover{transform:scale(1.25)}
.ob-panel .pf-color-row span.on{transform:scale(1.3)}
.ob-panel .field input{transition:border-color .2s,box-shadow .2s,transform .2s}
.ob-panel .field input:focus{transform:translateY(-1px)}
.ob-panel input.shake{animation:ob-shake .45s cubic-bezier(.36,.07,.19,.97) both;border-color:var(--red)!important}
.ob-panel .checkbox input{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.ob-panel .checkbox input:checked{transform:scale(1.15)}

/* ---- Resumen ---- */
.ob-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;text-align:left}
.ob-summary>div{display:flex;align-items:center;gap:12px;border:1px solid var(--border-soft);border-radius:12px;padding:14px;background:#fff;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.ob-summary>div:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(17,18,20,.1)}
.ob-summary b{display:block}.ob-summary small{color:var(--muted)}
.ob-summary .ob-av{width:44px;height:44px;border-radius:50%;object-fit:cover}
.ob-summary .avatar{width:44px;height:44px;font-size:15px}
.ob-summary .pf-thumb{width:64px;height:42px;border:1px solid var(--border-soft);border-radius:8px;display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.ob-summary .pf-thumb img{max-width:100%;max-height:100%;object-fit:contain}

/* ---- Fotogramas ---- */
@keyframes ob-fade{from{opacity:0}to{opacity:1}}
@keyframes ob-out{to{opacity:0;transform:scale(1.06)}}
@keyframes ob-reveal{from{opacity:.4;transform:scale(.975)}to{opacity:1;transform:none}}
@keyframes ob-in{from{opacity:0;transform:translateX(64px)}to{opacity:1;transform:none}}
@keyframes ob-in-back{from{opacity:0;transform:translateX(-64px)}to{opacity:1;transform:none}}
@keyframes ob-leave{to{opacity:0;transform:translateX(-56px)}}
@keyframes ob-leave-back{to{opacity:0;transform:translateX(56px)}}
@keyframes ob-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ob-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes ob-hover{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-3deg)}}
@keyframes ob-ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes ob-shine{0%{left:-60%}35%,100%{left:130%}}
@keyframes ob-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@media (max-width:640px){.ob-panel h1{font-size:28px}.ob-intro h1{font-size:36px}.ob-summary{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#welcome,#welcome *,#welcome *::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}}