/* s310:spinner (S42, 28/09/2026) - el spinner de la plataforma mientras se entra, para no ver el formulario otra vez.
   Va en fichero EXTERNO (la CSP de cuenta es script/style-src 'self' + hash del inline: un <style> nuevo obligaria a
   regenerar el hash; un fichero propio entra por 'self'). El acento es el de la PROPIA pagina de cuenta (cuenta-portada.js:
   #0B7D6C claro / #5CC8B5 oscuro), NO el azul del panel. El formulario se ve por defecto: el overlay lo TAPA mientras
   body.arrancando; suite/cuenta-arranque.js quita la clase en cuanto sabe el resultado, y si el JS no decide, la red de
   seguridad CSS (sp-red, a los 8 s) esconde el overlay igualmente. */
:root{--sp-acento:#0B7D6C}
:root[data-tema="oscuro"]{--sp-acento:#5CC8B5}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){--sp-acento:#5CC8B5}}
:root[data-tema="claro"]{--sp-acento:#0B7D6C}

#spinArranque{display:none}
body.arrancando #spinArranque{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  position:fixed;inset:0;z-index:2147483000;background:var(--fondo);
  /* red de seguridad: si en 8 s el JS no ha quitado body.arrancando (roto o red caida), el overlay se esconde y el
     formulario que hay debajo aparece. display en el keyframe salta al valor final (SP2 lo muta). */
  animation:sp-red 0s linear 8s forwards;
}
@keyframes sp-red{to{display:none}}

.sp-orbita{position:relative;width:104px;height:104px;display:flex;align-items:center;justify-content:center;
  animation:sp-giro 1.1s linear infinite}
/* la cometa: bolita brillante con estela, girando alrededor del nucleo */
.sp-orbita::before{content:"";position:absolute;top:2px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:var(--sp-acento);
  box-shadow:0 0 8px 2px var(--sp-acento), -7px 7px 0 -2px color-mix(in srgb, var(--sp-acento) 55%, transparent),
    -13px 13px 0 -4px color-mix(in srgb, var(--sp-acento) 30%, transparent),
    -18px 18px 0 -5px color-mix(in srgb, var(--sp-acento) 14%, transparent)}
.sp-nucleo{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:22px;letter-spacing:-1px;color:#fff;background:var(--sp-acento);
  box-shadow:0 6px 20px -6px color-mix(in srgb, var(--sp-acento) 70%, transparent);
  animation:sp-late 1.6s ease-in-out infinite}
.sp-marca{font-family:'Bricolage Grotesque','Manrope',system-ui,sans-serif;font-weight:700;font-size:1.05rem;color:var(--texto)}
.sp-texto{color:var(--gris);font-size:.9rem}

@keyframes sp-giro{to{transform:rotate(360deg)}}
@keyframes sp-late{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* prefers-reduced-motion: SIGUE girando (a 2,4 s) pero sin latido (decision de David 28/09: con las animaciones de Windows
   apagadas la v1 se veia como un circulo quieto). La red de seguridad se conserva. */
@media (prefers-reduced-motion:reduce){
  .sp-orbita{animation-duration:2.4s}
  .sp-nucleo{animation:none}
}