/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Splash de reconexión a pantalla completa. Los selectores components-* son el contrato con el runtime de Blazor. */
#components-reconnect-modal[b-vrdr49fc72] {
    display: none;
    position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; border-radius: 0;
    background: var(--bg, #f6f8fc); color: var(--ink, #0f172a);
    font-family: var(--font-b, Inter, system-ui, sans-serif);
    /* 0.4 s de gracia: un microcorte que se recupera solo nunca llega a pintarse */
    animation: fade-in-b-vrdr49fc72 0.35s ease-out 0.4s both;
    z-index: 2000; outline: none;
}
#components-reconnect-modal[b-vrdr49fc72]::backdrop { background: var(--bg, #f6f8fc); }

#components-reconnect-modal.components-reconnect-show[b-vrdr49fc72],
#components-reconnect-modal.components-reconnect-retrying[b-vrdr49fc72],
#components-reconnect-modal.components-reconnect-failed[b-vrdr49fc72],
#components-reconnect-modal.components-reconnect-paused[b-vrdr49fc72],
#components-reconnect-modal.components-reconnect-resume-failed[b-vrdr49fc72] { display: grid; place-items: center; }

.splash[b-vrdr49fc72] { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; max-width: 460px; width: 100%; }
.iso[b-vrdr49fc72] { width: 64px; height: 64px; margin-bottom: 14px; }
.marca[b-vrdr49fc72] { font-family: var(--font-d, Sora, sans-serif); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--ink, #0f172a); margin-bottom: 26px; }
.marca span[b-vrdr49fc72] { color: #1f75c3; }
.cuenta[b-vrdr49fc72] { display: block; font-weight: 500; font-size: 13px; color: var(--muted, #64748b); margin-top: 4px; }

/* Barra de progreso indeterminada */
.components-rejoining-animation[b-vrdr49fc72] { width: 220px; height: 3px; border-radius: 3px; background: var(--line, #e2e8f0); overflow: hidden; margin-bottom: 22px; }
.components-rejoining-animation > div[b-vrdr49fc72] { width: 40%; height: 100%; border-radius: 3px; background: var(--blue, #2563eb); animation: barra-b-vrdr49fc72 1.4s ease-in-out infinite; }

.estado[b-vrdr49fc72], .nota[b-vrdr49fc72] { display: none; margin: 0; }
.estado[b-vrdr49fc72] { font-weight: 600; font-size: 16px; color: var(--ink, #0f172a); }
.nota[b-vrdr49fc72] { font-size: 14px; color: var(--muted, #64748b); margin-top: 8px; max-width: 380px; line-height: 1.55; }
.acciones[b-vrdr49fc72] { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.acciones button[b-vrdr49fc72] { display: none; }

/* Qué se ve en cada estado (el runtime pone la clase de estado en el <dialog>) */
.components-reconnect-show .components-reconnect-first-attempt-visible[b-vrdr49fc72],
.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-vrdr49fc72],
.components-reconnect-failed .components-reconnect-failed-visible[b-vrdr49fc72],
.components-reconnect-paused .components-pause-visible[b-vrdr49fc72],
.components-reconnect-resume-failed .components-resume-failed-visible[b-vrdr49fc72] { display: block; }

/* Al reintentar el runtime deja también -show: se oculta el mensaje del primer intento para leer solo la cuenta regresiva */
.components-reconnect-retrying .components-reconnect-first-attempt-visible:not(.components-reconnect-repeated-attempt-visible)[b-vrdr49fc72] { display: none; }

/* Botones en línea en los estados que los muestran; la barra se detiene cuando ya no se está intentando */
.components-reconnect-failed button.components-reconnect-failed-visible[b-vrdr49fc72],
.components-reconnect-paused button.components-pause-visible[b-vrdr49fc72],
.components-reconnect-resume-failed button.components-resume-failed-visible[b-vrdr49fc72] { display: inline-flex; }
.components-reconnect-failed .components-rejoining-animation[b-vrdr49fc72],
.components-reconnect-resume-failed .components-rejoining-animation[b-vrdr49fc72],
.components-reconnect-paused .components-rejoining-animation[b-vrdr49fc72] { opacity: 0.35; }
.components-reconnect-failed .components-rejoining-animation > div[b-vrdr49fc72],
.components-reconnect-resume-failed .components-rejoining-animation > div[b-vrdr49fc72],
.components-reconnect-paused .components-rejoining-animation > div[b-vrdr49fc72] { animation-play-state: paused; }

@keyframes barra-b-vrdr49fc72 { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes fade-in-b-vrdr49fc72 { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation > div[b-vrdr49fc72] { animation-duration: 3s; }
    #components-reconnect-modal[b-vrdr49fc72] { animation-duration: 0.01s; }
}