/* Yaxtun Psicometría — Portal del candidato
 * Paleta: noche de selva (tinta verdosa), jade del logo, oro del aro y ámbar del ocaso. */
:root{
  --ink:#061015; --deep:#0a1a20; --panel:#0e2328; --panel-2:#122c31;
  --line:rgba(126,230,190,.13); --line-2:rgba(126,230,190,.28);
  --text:#e7f3ef; --dim:#9db4af; --mute:#6f8a85;
  --mint:#5ef0b8; --jade:#1fae7a; --leaf:#3f8f2f; --gold:#d8ab52; --amber:#f3b862; --red:#ff7a6b;
  --r-lg:22px; --r:14px; --r-sm:10px;
  --f-head:"Sora",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.yp-body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;min-height:100vh}
.yp-body *,.yp-login *,.yp-app *{box-sizing:border-box}
.yp-login,.yp-app{font-family:var(--f-body);color:var(--text)}
.yp-login h1,.yp-app h1,.yp-app h2,.yp-app h3,.yp-app h4{font-family:var(--f-head);font-weight:600;letter-spacing:-.01em;color:var(--text);margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
.yp-lead{color:var(--dim);max-width:60ch;margin:.5rem 0 0}

/* ============ Botones ============ */
.yp-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;
  padding:.95rem 1.8rem;border-radius:999px;font-weight:700;font-size:1rem;color:#032318;
  background:linear-gradient(180deg,#7ff5c9,#34d399);box-shadow:0 10px 30px -10px rgba(94,240,184,.55),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s,box-shadow .2s,filter .2s}
.yp-cta:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(94,240,184,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.yp-cta:disabled{filter:saturate(.3) brightness(.8);cursor:progress;transform:none}
.yp-cta.is-busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid #032318;border-right-color:transparent;animation:yp-spin .7s linear infinite}
.yp-cta-sm{padding:.7rem 1.4rem;font-size:.95rem}
.yp-ghost{background:transparent;border:1px solid var(--line-2);color:var(--text);padding:.7rem 1.3rem;border-radius:999px;cursor:pointer;font-weight:600}
.yp-ghost:hover{border-color:var(--mint)}
.yp-ghost:disabled{opacity:.35;cursor:default}
.yp-link{background:none;border:0;color:var(--dim);cursor:pointer;font-weight:600;padding:.3rem .5rem}
.yp-link:hover{color:var(--mint)}

/* ============ Login ============ */
.yp-login{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(400px,1fr);min-height:100vh;min-height:100dvh}
.yp-login-art{position:relative;overflow:hidden;background:#0d2e36}
.yp-scene{position:absolute;inset:0;width:100%;height:100%}
.yp-sun{animation:yp-breathe 9s ease-in-out infinite;transform-origin:600px 500px}
.yp-login-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 75%,rgba(6,16,21,.7)),linear-gradient(0deg,rgba(6,16,21,.8),transparent 38%)}
.yp-login-art-copy{position:absolute;left:clamp(24px,5vw,72px);bottom:clamp(24px,6vh,64px);z-index:2;max-width:520px}
.yp-quote{font:600 clamp(1.3rem,2.2vw,1.9rem)/1.3 var(--f-head);margin:0 0 1.4rem;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.yp-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;color:#d7ebe4;font-size:.9rem}
.yp-trust li{display:flex;align-items:center;gap:.45rem}
.yp-trust svg{width:18px;height:18px;fill:none;stroke:var(--mint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.yp-login-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:48px clamp(24px,4vw,64px);
  background:radial-gradient(600px 400px at 50% 0%,rgba(63,143,47,.16),transparent 70%),var(--ink);border-left:1px solid var(--line)}
.yp-login-box{width:100%;max-width:400px;animation:yp-rise .7s cubic-bezier(.2,.8,.2,1) both}
.yp-login-logo{display:block;width:104px;height:104px;filter:drop-shadow(0 12px 40px rgba(216,171,82,.35));animation:yp-glint 6s ease-in-out infinite}
.yp-wordmark{margin:.9rem 0 2rem;font:700 1.35rem/1 var(--f-head);letter-spacing:.32em;color:#fff}
.yp-wordmark span{display:block;margin-top:.45rem;font:500 .8rem/1 var(--f-body);letter-spacing:.04em;color:var(--gold)}
.yp-login h1{font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.2}
.yp-login form{margin-top:1.8rem;display:grid;gap:1rem}
.yp-field{display:grid;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--dim)}
.yp-field input{width:100%;padding:.9rem 1rem;border-radius:var(--r);border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);font:500 1rem var(--f-body);transition:border-color .2s,background .2s}
.yp-field input:focus{outline:none;border-color:var(--mint);background:rgba(94,240,184,.05);box-shadow:0 0 0 4px rgba(94,240,184,.12)}
.yp-pass{position:relative;display:block}
.yp-pass input{padding-right:3rem}
.yp-eye{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;padding:.4rem;color:var(--dim)}
.yp-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.yp-login .yp-cta{margin-top:.6rem;width:100%}
.yp-msg{min-height:1.4em;margin:0;color:var(--red);font-size:.9rem;font-weight:600}
.yp-fine{margin-top:2rem;color:var(--mute);font-size:.82rem}
.yp-fine a{color:var(--dim)}
body.yp-leaving .yp-login-box{opacity:0;transform:translateY(-8px);transition:.4s}

/* ============ App ============ */
.yp-app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:radial-gradient(900px 500px at 85% -10%,rgba(63,143,47,.18),transparent 60%),radial-gradient(700px 500px at -10% 110%,rgba(216,171,82,.08),transparent 60%),var(--ink)}
.yp-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:18px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5;background:rgba(6,16,21,.75)}
.yp-brandmark{display:flex;align-items:center;gap:.7rem}
.yp-brandmark img{filter:drop-shadow(0 4px 14px rgba(216,171,82,.3))}
.yp-brandmark-name{display:block;font:700 1rem/1 var(--f-head);letter-spacing:.28em;color:#fff}
.yp-brandmark-sub{display:block;margin-top:.3rem;font-size:.72rem;color:var(--gold)}
.yp-steps{display:flex;gap:.3rem;list-style:none;margin:0;padding:0;counter-reset:s}
.yp-steps li{display:flex;align-items:center;gap:.5rem;padding:.4rem .9rem;color:var(--mute);font-size:.85rem;font-weight:600;position:relative}
.yp-steps li+li::before{content:"";position:absolute;left:-.6rem;width:.9rem;height:1px;background:var(--line-2)}
.yp-steps span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);font-size:.8rem}
.yp-steps .is-on{color:var(--text)}
.yp-steps .is-on span{background:var(--mint);color:#032318;border-color:var(--mint);box-shadow:0 0 0 5px rgba(94,240,184,.15)}
.yp-steps .is-done span{border-color:var(--jade);color:var(--mint)}
.yp-user{display:flex;align-items:center;gap:.6rem}
.yp-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--leaf),var(--jade));color:#fff;font:700 .85rem var(--f-head);border:1px solid rgba(216,171,82,.5)}
.yp-stage{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:clamp(24px,5vh,56px) clamp(16px,4vw,48px)}
.yp-foot{text-align:center;color:var(--mute);font-size:.78rem;padding:20px;border-top:1px solid var(--line)}
.yp-enter{animation:yp-rise .55s cubic-bezier(.2,.8,.2,1) both}

/* Bienvenida */
.yp-welcome{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.yp-hi{color:var(--gold);font-weight:700;margin:0 0 .4rem}
.yp-welcome h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1}
.yp-rules{list-style:none;margin:2rem 0;padding:0;display:grid;gap:1rem}
.yp-rules li{display:grid;gap:.15rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);border-left:3px solid var(--jade)}
.yp-rules strong{font-family:var(--f-head);font-weight:600}
.yp-rules span{color:var(--dim);font-size:.95rem}
.yp-welcome-note{text-align:center;padding:2.5rem 2rem;border:1px solid rgba(216,171,82,.35);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(216,171,82,.06),transparent)}
.yp-welcome-note img{filter:drop-shadow(0 16px 40px rgba(216,171,82,.35))}
.yp-welcome-note blockquote{margin:1.4rem 0 0;font:500 1.25rem/1.45 var(--f-head);color:#fff}

/* Lista de pruebas */
.yp-list-head{display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-bottom:2rem}
.yp-list-head h1{font-size:clamp(1.8rem,3vw,2.4rem)}
.yp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem}
.yp-tcard{display:flex;flex-direction:column;gap:.6rem;padding:1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--deep));animation:yp-rise .5s both}
.yp-tcard h3{font-size:1.15rem}
.yp-tcard p{color:var(--dim);font-size:.92rem;margin:0;flex:1}
.yp-tcard-state{align-self:flex-start;font-size:.75rem;font-weight:700;padding:.2rem .7rem;border-radius:999px;background:rgba(255,255,255,.05);color:var(--dim)}
.yp-tcard.is-live{border-color:var(--line-2)}
.yp-tcard.is-live .yp-tcard-state{background:rgba(243,184,98,.14);color:var(--amber)}
.yp-tcard.is-done .yp-tcard-state{background:rgba(94,240,184,.12);color:var(--mint)}
.yp-tcard.is-done{opacity:.75}
.yp-tcard-meta{display:flex;gap:1rem;color:var(--mute);font-size:.85rem}
.yp-tcard .yp-cta{align-self:flex-start;margin-top:.4rem}
.yp-tcard-ok{color:var(--mint);font-weight:700;margin-top:.4rem}

/* Aplicador */
.yp-runner{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.5rem;align-items:start}
.yp-qcard{padding:clamp(20px,3vw,36px);border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--deep));min-height:520px;display:flex;flex-direction:column}
.yp-qhead{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;color:var(--dim)}
.yp-qname{font-weight:700;color:var(--gold)}
.yp-qbar{height:4px;border-radius:4px;background:rgba(126,230,190,.1);margin:.8rem 0 1.2rem;overflow:hidden}
.yp-qbar span{display:block;height:100%;background:linear-gradient(90deg,var(--jade),var(--mint));border-radius:4px;transition:width .4s}
.yp-instr{color:var(--mute);font-size:.88rem;margin:0 0 1rem;padding-bottom:1rem;border-bottom:1px dashed var(--line)}
.yp-q{flex:1}
.yp-q.from-r{animation:yp-inR .32s both}.yp-q.from-l{animation:yp-inL .32s both}
.yp-q .yp-qtext{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.35;margin:.4rem 0 1.6rem;max-width:40ch}
.yp-opts{display:grid;gap:.7rem}
.yp-opt{display:flex;align-items:center;gap:1rem;text-align:left;padding:1rem 1.2rem;border-radius:var(--r);border:1px solid var(--line-2);background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.yp-opt b,.yp-lk b{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line-2);font:600 .85rem var(--f-head);color:var(--dim)}
.yp-opt:hover,.yp-lk:hover,.yp-tile:hover{border-color:var(--mint);background:rgba(94,240,184,.05)}
.yp-opt.is-sel,.yp-lk.is-sel,.yp-tile.is-sel{border-color:var(--mint);background:rgba(94,240,184,.1);box-shadow:0 0 0 4px rgba(94,240,184,.08)}
.yp-opt.is-sel b,.yp-lk.is-sel b{background:var(--mint);color:#032318;border-color:var(--mint)}
.yp-likert{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:.6rem}
.yp-lk{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;padding:1rem .5rem;border-radius:var(--r);border:1px solid var(--line-2);background:rgba(255,255,255,.02);cursor:pointer;font-size:.82rem;color:var(--dim);transition:.15s}
.yp-lk.is-sel{color:var(--text)}
.yp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
.yp-tile{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.4rem 1rem;border-radius:var(--r);border:1px solid var(--line-2);background:rgba(255,255,255,.02);cursor:pointer}
.yp-tile-ic{font-size:2rem}
.yp-qfoot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);flex-wrap:wrap}
.yp-hint{margin:0;color:var(--mute);font-size:.85rem}
.yp-qnav{display:flex;gap:.6rem}
.yp-side{position:sticky;top:96px;padding:1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:rgba(14,35,40,.6);backdrop-filter:blur(8px)}
.yp-side-rings{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;justify-items:center}
.yp-side-rings svg{width:100%;height:auto;max-width:132px}
.yp-ring.is-warn .yp-ring-arc{stroke:var(--amber)}
.yp-ring.is-danger .yp-ring-arc{stroke:var(--red)}
.yp-ring.is-danger .yp-ring-num{fill:var(--red)}
.yp-side-msg{text-align:center;font-weight:700;color:var(--mint);margin:.8rem 0 1.4rem}
.yp-side h4{font-size:.85rem;color:var(--dim);margin-bottom:.6rem}
.yp-battery{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.88rem;color:var(--mute)}
.yp-battery li{display:flex;align-items:center;gap:.6rem}
.yp-battery i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--mute);flex:none}
.yp-battery .is-now{color:var(--text);font-weight:700}
.yp-battery .is-now i{border-color:var(--mint);background:var(--mint);box-shadow:0 0 0 4px rgba(94,240,184,.18)}
.yp-battery .is-done{color:var(--dim)}
.yp-battery .is-done i{background:var(--jade);border-color:var(--jade)}

.yp-practice{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.5rem;align-items:start}
.yp-practice-banner{display:grid;gap:.2rem;margin:1rem 0 1.4rem;padding:.9rem 1.1rem;border-radius:var(--r);background:rgba(216,171,82,.08);border:1px solid rgba(216,171,82,.3);font-size:.9rem;color:var(--dim)}
.yp-practice-banner strong{color:var(--gold);font-family:var(--f-head)}
.yp-practice .yp-lk,.yp-practice .yp-opt{cursor:default}
.yp-example-tip{margin:1.2rem 0 0;padding-left:1rem;border-left:2px solid var(--mint);color:var(--text);font-size:.95rem}
.yp-checklist{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:.9rem;color:var(--dim)}
.yp-checklist li{padding-left:1.4rem;position:relative}
.yp-checklist li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--mint)}

/* Anillos y radar */
.yp-ring-num{fill:#fff;font-family:var(--f-head);font-weight:700}
.yp-ring-lbl{fill:var(--dim);font-family:var(--f-body);font-weight:600}
.yp-ring-arc{transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1),stroke .3s}
.yp-radar{width:100%;height:auto;max-width:480px;display:block;margin:auto;overflow:visible}
.yp-radar-lbl{fill:var(--dim);font:600 15px var(--f-body)}
.yp-radar-val{fill:var(--mint);font:700 16px var(--f-head)}
.yp-radar-shape{transform-box:fill-box;transform-origin:center;animation:yp-grow .9s cubic-bezier(.2,.8,.2,1) both}

/* Resultados */
.yp-res-head{margin-bottom:2rem}
.yp-res-head h1{font-size:clamp(1.8rem,3vw,2.4rem)}
.yp-res-grid{display:grid;grid-template-columns:240px minmax(0,1fr) 300px;gap:1.2rem;align-items:stretch}
.yp-res-grid>div{padding:1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--deep))}
.yp-res-score{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.yp-res-score svg{width:100%;height:auto;max-width:190px}
.yp-res-score p{font-weight:700;margin:.8rem 0 0}
.yp-res-str h3{font-size:1.05rem;margin-bottom:1rem}
.yp-res-str ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.yp-res-str li{display:grid;gap:.15rem;padding-left:1rem;border-left:2px solid var(--gold)}
.yp-res-str span{color:var(--dim);font-size:.88rem}
.yp-res-foot{margin-top:2rem;text-align:center}
.yp-bars{display:grid;gap:.9rem;width:100%}
.yp-bar{display:grid;grid-template-columns:minmax(90px,1fr) 2fr 36px;gap:.8rem;align-items:center;font-size:.9rem}
.yp-bar-lbl{color:var(--dim)}
.yp-bar-track{height:8px;border-radius:8px;background:rgba(126,230,190,.1);overflow:hidden}
.yp-bar-track span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--jade),var(--mint))}
.yp-bar-val{text-align:right;font-weight:700;font-family:var(--f-head)}

/* Estados */
.yp-done{max-width:560px;margin:4vh auto;text-align:center;display:grid;justify-items:center;gap:1rem}
.yp-done .yp-lead{margin:0 auto}
.yp-loading{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:40vh;color:var(--dim);font-weight:600}
.yp-spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(94,240,184,.2);border-top-color:var(--mint);animation:yp-spin .8s linear infinite}
.yp-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:50;padding:.8rem 1.3rem;border-radius:999px;background:#10262b;border:1px solid var(--line-2);color:var(--text);font-weight:600;box-shadow:0 20px 40px rgba(0,0,0,.4);animation:yp-rise .3s both;transition:opacity .4s}
.yp-toast.is-out{opacity:0}
.yp-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(3,8,10,.7);backdrop-filter:blur(4px);padding:20px}
.yp-modal-box{max-width:420px;padding:1.8rem;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line-2);animation:yp-rise .3s both}
.yp-modal-box p{margin:0 0 1.4rem;font:500 1.1rem/1.45 var(--f-head)}
.yp-modal .yp-qnav{justify-content:flex-end}

/* Animaciones */
@keyframes yp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes yp-inR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes yp-inL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes yp-spin{to{transform:rotate(360deg)}}
@keyframes yp-grow{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes yp-breathe{50%{transform:scale(1.06);opacity:.85}}
@keyframes yp-glint{0%,100%{filter:drop-shadow(0 12px 40px rgba(216,171,82,.3))}50%{filter:drop-shadow(0 12px 50px rgba(94,240,184,.4))}}

/* Responsivo */
@media (max-width:1024px){
  .yp-res-grid{grid-template-columns:1fr 1fr}
  .yp-res-radar{grid-column:1/-1;order:3}
}
@media (max-width:900px){
  .yp-login{grid-template-columns:1fr;grid-template-rows:38vh auto}
  .yp-login-panel{border-left:0;border-top:1px solid var(--line);padding-top:32px}
  .yp-login-art-copy .yp-trust{display:none}
  .yp-welcome,.yp-runner,.yp-practice{grid-template-columns:1fr}
  .yp-welcome-note{display:none}
  .yp-side{position:static;order:-1;padding:1rem}
  .yp-side-rings svg{max-width:96px}
  .yp-side h4,.yp-battery{display:none}
  .yp-side-msg{margin:.4rem 0 0}
  .yp-steps{display:none}
}
@media (max-width:640px){
  .yp-likert{grid-template-columns:1fr}
  .yp-lk{flex-direction:row;text-align:left;padding:.8rem 1rem}
  .yp-res-grid{grid-template-columns:1fr}
  .yp-list-head{flex-direction:column;align-items:flex-start}
  .yp-qcard{min-height:0}
  .yp-qfoot .yp-hint{display:none}
  .yp-qnav{width:100%}.yp-qnav>*{flex:1}
  .yp-brandmark-sub{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}