/* MorphOrb — estilos del orbe pensante (HIDRA 2.0 y hidraeu.com comparten este archivo).
   Variables sobreescribibles: --mo-accent (cian), --mo-done (verde), --mo-bg (fondo del velo), --mo-text */
.mo-overlay{--mo-accent:var(--acc,#38e1ff);--mo-done:var(--mint,#34d399);--mo-bg:var(--bg,#050b16);--mo-text:var(--text,#d7e6f5);
  position:absolute;inset:0;z-index:20;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.mo-overlay.mo-on{opacity:1;visibility:visible;transition:opacity .35s ease}
.mo-overlay.mo-out{opacity:0;transition:opacity .38s ease}
.mo-area{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mo-scrim{position:absolute;inset:0;background:radial-gradient(closest-side at 50% 46%,color-mix(in srgb,var(--mo-bg) 78%,transparent),color-mix(in srgb,var(--mo-bg) 94%,transparent));backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.mo-stage{position:relative;width:220px;height:220px;flex:none;margin-bottom:28px}
.mo-halo{position:absolute;left:50%;top:50%;width:260px;height:260px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--mo-accent) 22%,transparent),transparent 70%);animation:mo-breathe 3.2s ease-in-out infinite}
.mo-orb{position:absolute;inset:0;width:220px;height:220px}
.mo-green{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.55);
  background:radial-gradient(circle at 35% 30%,#a7f3d0,var(--mo-done) 55%,#059669);box-shadow:0 0 34px color-mix(in srgb,var(--mo-done) 70%,transparent)}
.mo-pulse{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;opacity:0;border:1.5px solid var(--mo-done);transform:translate(-50%,-50%)}
.mo-label{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font:500 14px var(--font-ui,Inter,'Segoe UI',system-ui,sans-serif);letter-spacing:.01em;
  color:color-mix(in srgb,var(--mo-text) 70%,transparent);display:flex;justify-content:center;align-items:center;gap:6px;transition:opacity .25s}
.mo-label>span{animation:mo-lab-in .35s ease both}
.mo-label i{width:3px;height:3px;border-radius:50%;background:currentColor;animation:mo-dot 1.1s ease-in-out infinite}
.mo-label i:nth-of-type(2){animation-delay:.15s}.mo-label i:nth-of-type(3){animation-delay:.3s}
.mo-label.mo-done{color:var(--mo-done)}
.mo-ball{position:absolute;left:0;top:0;width:60px;height:60px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 38% 30%,#3a3a3d,#1b1b1d 55%,#0d0d0e);box-shadow:inset 0 2px 6px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.5)}
.mo-ball::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;background:conic-gradient(from 20deg,#ff6ec7,#7c5cff,#38e1ff,#5eead4,#ffd36e,#ff6ec7);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mo-trail{position:absolute;left:0;top:0;width:60px;height:60px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);filter:blur(3px)}
@keyframes mo-breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes mo-dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes mo-lab-in{from{opacity:0;transform:translateY(6px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* tarjeta de respuesta: cristal oscuro con destello verde */
.mo-deck{position:absolute;left:50%;top:calc(50% - 14px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;max-width:calc(100% - 32px)}
.mo-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:46px;border-radius:20px;opacity:0;
  background:linear-gradient(160deg,#0b0b0c,#030303);border:1px solid rgba(255,255,255,.075);
  box-shadow:0 24px 60px rgba(0,0,0,.65),0 2px 0 rgba(255,255,255,.04) inset;color:#f2f3f5}
.mo-c-bloom{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 110% at 0% 100%,color-mix(in srgb,var(--mo-done) 24%,transparent),transparent 55%);opacity:.9}
.mo-c-head,.mo-c-body{position:relative;opacity:0;transition:opacity .35s ease}
.mo-card.mo-in .mo-c-head,.mo-card.mo-in .mo-c-body{opacity:1}
.mo-c-head{display:flex;align-items:center;gap:8px;padding:16px 20px 0;font:600 11px var(--font-ui,Inter,'Segoe UI',system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#8d9096;flex:none;white-space:nowrap}
.mo-c-head i{width:6px;height:6px;border-radius:50%;background:var(--mo-done);box-shadow:0 0 8px var(--mo-done)}
.mo-c-body{margin:0;padding:10px 20px 20px;font:400 16px/1.5 var(--font-ui,Inter,'Segoe UI',system-ui,sans-serif);color:#f2f3f5;overflow:auto;min-height:0;pointer-events:auto;scrollbar-width:thin}
.mo-w{display:inline-block;opacity:0;filter:blur(4px);transform:translateY(4px)}
.mo-go .mo-w{animation:mo-word .32s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0ms)}
@keyframes mo-word{to{opacity:1;filter:none;transform:none}}
.mo-close{opacity:0;pointer-events:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#c9ccd1;border-radius:99px;padding:7px 16px;font:500 12px var(--font-ui,Inter,'Segoe UI',system-ui,sans-serif);cursor:pointer;transition:background .2s,color .2s}
.mo-close:hover{background:rgba(255,255,255,.1);color:#fff}
.mo-card-open .mo-close,.mo-card-open .mo-c-body{pointer-events:auto}
.mo-card-open .mo-scrim{opacity:.85}
.mo-card-open{pointer-events:none}.mo-card-open .mo-close{pointer-events:auto}

/* compositor mientras se piensa: borde con aurora */
.mo-busy{border-color:var(--acc,#38e1ff)!important;animation:mo-busy 2.4s ease-in-out infinite}
@keyframes mo-busy{0%,100%{box-shadow:0 0 0 1px rgba(56,225,255,.2),0 0 16px rgba(56,225,255,.12)}50%{box-shadow:0 0 0 1px rgba(94,234,212,.4),0 0 28px rgba(94,234,212,.26)}}

/* la respuesta recién llegada aparece con un desenfoque que se aclara */
.mo-reveal .b{animation:mo-reveal .7s cubic-bezier(.22,1,.36,1) both}
@keyframes mo-reveal{from{opacity:0;filter:blur(6px);transform:translateY(6px)}to{opacity:1;filter:none;transform:none}}

@media (prefers-reduced-motion:reduce){
  .mo-halo,.mo-busy,.mo-label i{animation:none}.mo-reveal .b{animation:none}.mo-go .mo-w{animation:none;opacity:1;filter:none;transform:none}
}