/*
 * ui-templates.css - Estilos unificados para el sistema de templates de UI
 *
 * Estos estilos complementan los estilos inline que ya usa el maintenance overlay
 * (que se aplican con !important vía JS para garantizar prioridad máxima).
 *
 * Aquí se definen únicamente estilos auxiliares que no están cubiertos
 * por el JS dinámico: animaciones, transiciones y helpers de bloqueo.
 */

/* ─── Animación del spinner (fallback para navegadores sin Web Animations API) ─── */
@keyframes ui-template-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#tuwasabi-maintenance-overlay div[style*="border-top-color"] {
    animation: ui-template-spin 0.8s linear infinite;
}

/* ─── Transición de opacidad al mostrar/ocultar ─── */
#tuwasabi-maintenance-overlay {
    transition: opacity 0.2s ease-in-out;
}

/* ─── Bloqueo global del body cuando el overlay está activo ─── */
body.ui-overlay-active {
    overflow: hidden !important;
}