/* ============================================================================
   Splash / spinner global IDTA (1.9.0). Sustituye a las ~360 líneas de spinner de app.css.

   Contrato que se conserva (lo usan loadspinner.js, actualizacion.js, ManejoSpinnerReadLoadService,
   ErrorBoundaryConSpinner, MainLayout y PageLoadComponent):
     #modal-spinner.fondospinner  → capa fija de pantalla completa; se muestra/oculta por style.display
     .cerrarspinner               → cruz de escape arriba a la derecha (PageLoadComponent la cablea a OcultarSpinnerReadLoad)
   Nuevo: .idta-splash con la flecha IDTA y un anillo cónico que gira; con prefers-reduced-motion queda estático (la regla
   global de idta-theme.css anula toda animación).
   ============================================================================ */
.fondospinner {
    position: fixed;
    inset: 0;
    z-index: 90000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(245, 250, 255, .82) 0%, rgba(245, 250, 255, .96) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.idta-splash {
    /* Centrado absoluto: loadspinner.js muestra la capa con style.display='block' (contrato de actualizacion.js), asi que no
       se puede depender del flex del contenedor. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.idta-splash-flecha {
    width: 56px;
    height: 56px;
    object-fit: contain;
    animation: idta-splash-late 1.6s ease-in-out infinite;
}

.idta-splash-anillo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--idta-cyan) 0%, var(--idta-blue) 35%, transparent 70%);
    /* Anillo: se recorta el centro con una máscara. */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    animation: idta-splash-gira 1.1s linear infinite;
}

@keyframes idta-splash-gira {
    to { transform: rotate(360deg); }
}

@keyframes idta-splash-late {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(.94); opacity: .85; }
}

.cerrarspinner {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    background: var(--idta-superficie-elevada);
    box-shadow: var(--idta-shadow-sm);
    z-index: 90001;
}

.cerrarspinner::before, .cerrarspinner::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--idta-error);
    transform: translate(-50%, -50%) rotate(45deg);
}

.cerrarspinner::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .idta-splash-anillo {
        animation: none;
        background: conic-gradient(var(--idta-blue) 0%, var(--idta-cyan) 100%);
    }

    .idta-splash-flecha {
        animation: none;
    }
}