/* Modal de reconexión de Blazor Server (circuito SignalR) — Admin (azul marino).
   CSS GLOBAL (cargado en App.razor) para no depender del bundle de CSS con
   alcance. El framework alterna clases de estado; aquí un mensaje corto por
   estado + un preloader. */

#components-reconnect-modal .rc-msg,
#components-reconnect-modal .rc-btn,
#components-reconnect-modal .rc-spinner { display: none; }

#components-reconnect-modal.components-reconnect-show   .rc-spinner,
#components-reconnect-modal.components-reconnect-show   .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .rc-spinner,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible,
#components-reconnect-modal.components-reconnect-failed #components-reconnect-button,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-paused #components-resume-button,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-resume-failed #components-resume-button {
    display: block;
}

#components-reconnect-modal {
    width: 17rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 1.75rem 1.5rem;
    border: 0;
    border-radius: 1rem;
    background: #ffffff;
    color: #334155;
    box-shadow: 0 20px 45px -12px rgba(12, 31, 61, 0.4), 0 0 0 1px rgba(15, 23, 42, 0.06);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
}
#components-reconnect-modal::backdrop {
    background: rgba(12, 31, 61, 0.5);
    backdrop-filter: blur(2px);
}
#components-reconnect-modal[open] { animation: rc-in 0.35s ease-out both; }
@keyframes rc-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

#components-reconnect-modal .rc-brand {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 1rem;
}
#components-reconnect-modal .rc-brand span { color: #0a3160; }

#components-reconnect-modal .rc-spinner {
    display: none;
    justify-content: center;
    gap: 0.45rem;
    margin: 0 auto 0.9rem;
    height: 1rem;
}
#components-reconnect-modal.components-reconnect-show   .rc-spinner,
#components-reconnect-modal.components-reconnect-retrying .rc-spinner { display: flex; }
#components-reconnect-modal .rc-spinner div {
    width: 0.6rem; height: 0.6rem; border-radius: 50%;
    background: #0a3160; animation: rc-bounce 1.1s ease-in-out infinite;
}
#components-reconnect-modal .rc-spinner div:nth-child(1) { animation-delay: 0s;    background: #2563eb; }
#components-reconnect-modal .rc-spinner div:nth-child(2) { animation-delay: 0.16s; background: #0a3160; }
#components-reconnect-modal .rc-spinner div:nth-child(3) { animation-delay: 0.32s; background: #0c1f3d; }
@keyframes rc-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1; }
}

#components-reconnect-modal .rc-msg {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: #475569;
}
#components-reconnect-modal .rc-msg-error { color: #b91c1c; }
#components-reconnect-modal #components-seconds-to-next-attempt { font-weight: 700; color: #0a3160; }

#components-reconnect-modal .rc-btn {
    margin: 0.9rem auto 0;
    border: 0;
    background: #0a3160;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1.6rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease;
}
#components-reconnect-modal .rc-btn:hover  { background: #0c1f3d; }
#components-reconnect-modal .rc-btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[open] { animation: none; }
    #components-reconnect-modal .rc-spinner div { animation-duration: 2.2s; }
}