/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Qué se ve en cada estado.

   Blazor le pone al diálogo una clase según cómo va la reconexión, y estas
   reglas deciden qué párrafo y qué botón se muestran. Todo arranca oculto:
   así, un estado que no contemplamos no deja la ventana con cinco mensajes
   encima. */

.components-reconnect-first-attempt-visible[b-vdrm6wm6qt],
.components-reconnect-repeated-attempt-visible[b-vdrm6wm6qt],
.components-reconnect-failed-visible[b-vdrm6wm6qt],
.components-pause-visible[b-vdrm6wm6qt],
.components-resume-failed-visible[b-vdrm6wm6qt],
.components-rejoining-animation[b-vdrm6wm6qt] {
    display: none;
}

/* Reconectando: la rueda y "se perdió la conexión". */
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-vdrm6wm6qt],
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-vdrm6wm6qt],
/* Reintentando: la rueda sigue, pero ahora con la cuenta regresiva. */
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-vdrm6wm6qt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vdrm6wm6qt],
/* Se dio por vencido: el aviso y el botón de reintentar. */
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-vdrm6wm6qt],
/* En pausa, y el intento de continuar que no salió. */
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-vdrm6wm6qt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-vdrm6wm6qt] {
    display: block;
}

/* La rueda que gira. Va en el color de acento de la empresa —el mismo que el
   resto de la aplicación— y no en un azul suelto que no es de ningún lado. */
.components-rejoining-animation[b-vdrm6wm6qt] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 3px solid var(--color-charcoal-200, #D1D1D1);
    border-top-color: var(--color-acento, #F08C00);
    animation: components-rejoining-animation-b-vdrm6wm6qt 0.9s linear infinite;
}

@keyframes components-rejoining-animation-b-vdrm6wm6qt {
    to {
        transform: rotate(360deg);
    }
}

/* Quien pidió menos movimiento no recibe una rueda girando en la cara: se
   queda quieta y el texto sigue diciendo lo mismo. */
@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation[b-vdrm6wm6qt] {
        animation: none;
    }
}

/* La ventana entra sin sobresaltos, que para eso aparece sola. */
#components-reconnect-modal[open][b-vdrm6wm6qt] {
    animation: components-reconnect-modal-aparecer-b-vdrm6wm6qt 0.25s ease-out both;
}

#components-reconnect-modal[b-vdrm6wm6qt]::backdrop {
    animation: components-reconnect-modal-fundido-b-vdrm6wm6qt 0.25s ease-out both;
}

@keyframes components-reconnect-modal-aparecer-b-vdrm6wm6qt {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes components-reconnect-modal-fundido-b-vdrm6wm6qt {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/Shared/ToastHost.razor.rz.scp.css */
.animate-toast-in[b-v497chqvd0] {
    animation: toast-in-b-v497chqvd0 0.2s ease-out;
}

@keyframes toast-in-b-v497chqvd0 {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}