/* MANTO · Loader "cargando" — el anillo de la "O" girando (solo CSS).
   Se rota el SVG COMPLETO (transform-origin: center), que es robusto en todos
   los navegadores; la pista es un círculo simétrico, así que solo se percibe
   girar el arco y el punto verde. */
.manto-spinner { width:48px; height:48px; display:inline-block; color:var(--text);
  transform-origin:center; animation:manto-spin .9s linear infinite; }
.manto-spinner .track { stroke:currentColor; opacity:.15; }
@keyframes manto-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .manto-spinner { animation-duration:2.4s; } }.manto-spinner--lg { width:72px; height:72px; }

/* Fila de carga en línea (spinner + texto) */
.manto-load-row { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:14px; padding:48px 0; }

/* Splash de arranque a pantalla completa (shell y panel): anillo NIBO + wordmark,
   centrado. Mismo aspecto y posición en ambos, para que al pasar del loader del
   shell al del panel no haya salto ni pantalla negra. Los colores salen de las
   variables de marca (manto-colors.css), así que se adaptan a claro/oscuro. */
.manto-splash { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; background:var(--color-bg, #0A0F1E);
  color:var(--color-text-muted, #9AA6BF); font-size:11px; font-weight:600; letter-spacing:.04em; }
.manto-splash::before { content:""; position:absolute; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(108,140,255,.20), rgba(32,214,166,.08) 46%, transparent 70%);
  filter:blur(10px); pointer-events:none; }
.manto-splash .manto-spinner { position:relative; z-index:1; }
.manto-splash-word { position:relative; z-index:1; font-family:'Sora', system-ui, sans-serif; font-weight:800;
  font-size:22px; letter-spacing:.16em; color:var(--color-text, #E9EDF6); }/* Spinner dentro de un botón */
.btn .manto-spinner, button .manto-spinner { width:18px; height:18px; color:currentColor; vertical-align:-3px; margin-right:8px; }

/* ── Wordmark con la "O" = símbolo (gira de vez en cuando) ── */
.manto-word { display:inline-flex; align-items:center; font-family:"Sora",system-ui,sans-serif; font-weight:800; letter-spacing:.01em; line-height:1; color:var(--text); }
/* La O va en línea con las mayúsculas: mismo alto de caja y un pelín arriba. */
.manto-word .brand-o { display:inline-block; width:.86em; height:.86em; margin-left:.03em; position:relative; top:-.045em; }
.manto-word .brand-o svg { width:100%; height:100%; display:block; transform-origin:center; animation:brand-o-spin 7s ease-in-out infinite; }
/* Gira una vuelta y descansa: solo el último ~18% del ciclo está en movimiento. */
@keyframes brand-o-spin { 0%,72% { transform:rotate(0deg); } 90%,100% { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .manto-word .brand-o svg { animation:none; } }

/* ── Salida SUAVE del splash ── */
/* El shell (hideLoader) añade .manto-splash-out: el splash se desvanece con un
   ligero zoom del logo y solo después pasa a display:none. Sin esto, el corte
   splash→app era seco. */
/* Fundido largo y con curva suave (ease-out): el splash se aclara y el logo se
   aleja apenas, sin tirón. La app pintada debajo (con su propio .app-in) queda
   a la vista de forma gradual. */
.manto-splash { transition: opacity .6s cubic-bezier(.33,0,.15,1); will-change: opacity; }
.manto-splash-out { opacity: 0; pointer-events: none; }
.manto-splash-out .manto-spinner, .manto-splash-out .manto-splash-word {
  transform: scale(.9); transition: transform .6s cubic-bezier(.33,0,.15,1);
}
@media (prefers-reduced-motion: reduce) {
  .manto-splash { transition: none; }
  .manto-splash-out .manto-spinner, .manto-splash-out .manto-splash-word { transition: none; }
}