/* ═══════════════════════════════════════════════════════════════
   Nyx — Modal de reconexión Blazor (tema claro / oscuro)
   Sustituye al modal por defecto de blazor.web.js (Shadow DOM con
   fondo blanco fijo). Consume SOLO los tokens de dashboard.css,
   por lo que respeta data-theme y data-tone automáticamente.
   ═══════════════════════════════════════════════════════════════ */

#components-reconnect-modal {
    background-color: var(--surface, #ffffff);
    color: var(--text, #0f172a);
    width: 21rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem 1.75rem;
    border: 1px solid var(--line, #e6ebf3);
    border-radius: 16px;
    box-shadow: var(--shadow-pop, 0 24px 60px -12px rgba(15, 23, 42, .25));
    font-family: var(--font-family, Inter, system-ui, sans-serif);
    opacity: 0;
    transition: display .4s allow-discrete, overlay .4s allow-discrete;
    animation: nyx-reconnect-fadeOut .4s both;
}

    #components-reconnect-modal[open] {
        animation: nyx-reconnect-slideUp .9s cubic-bezier(.05, .89, .25, 1.02) .2s both,
                   nyx-reconnect-fadeIn .4s ease-in-out .2s both;
    }

    #components-reconnect-modal::backdrop {
        background-color: rgba(15, 23, 42, .35);
        backdrop-filter: blur(3px);
        animation: nyx-reconnect-fadeIn .4s ease-in-out;
    }

[data-theme="dark"] #components-reconnect-modal::backdrop {
    background-color: var(--overlay, rgba(4, 6, 10, .72));
}

/* ─── Visibilidad por estado ─── */
#components-reconnect-modal .nyx-rc-first,
#components-reconnect-modal .nyx-rc-repeated,
#components-reconnect-modal .nyx-rc-failed,
#components-reconnect-modal .nyx-rc-pause,
#components-reconnect-modal .nyx-rc-resume-failed,
#components-reconnect-modal .nyx-rc-spinner {
    display: none;
}

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

/* ─── Contenido ─── */
.nyx-rc-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
    color: var(--text, #0f172a);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.5;
}

    #components-reconnect-modal p small {
        display: block;
        margin-top: .25rem;
        color: var(--muted, #6b7686);
        font-size: .8rem;
        font-weight: 400;
    }

#components-reconnect-modal button {
    border: 0;
    background-color: var(--brand, #2563eb);
    color: #ffffff;
    padding: .5rem 1.6rem;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, transform .1s ease, box-shadow .2s ease;
}

    #components-reconnect-modal button:hover {
        background-color: var(--brand-strong, #1d4ed8);
        box-shadow: 0 0 0 4px var(--brand-ring, rgba(37, 99, 235, .2));
    }

    #components-reconnect-modal button:active {
        transform: scale(.97);
    }

/* ─── Spinner de ondas ─── */
.nyx-rc-spinner {
    position: relative;
    width: 72px;
    height: 72px;
}

    .nyx-rc-spinner span {
        position: absolute;
        border: 3px solid var(--brand, #2563eb);
        border-radius: 50%;
        opacity: 1;
        animation: nyx-reconnect-ripple 1.5s cubic-bezier(0, .2, .8, 1) infinite;
    }

        .nyx-rc-spinner span:nth-child(2) {
            animation-delay: -.5s;
        }

@keyframes nyx-reconnect-ripple {
    0%, 4.9% { top: 36px; left: 36px; width: 0; height: 0; opacity: 0; }
    5%       { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; }
    100%     { top: 0; left: 0; width: 72px; height: 72px; opacity: 0; }
}

@keyframes nyx-reconnect-slideUp {
    from { transform: translateY(24px) scale(.96); }
    to   { transform: translateY(0) scale(1); }
}

@keyframes nyx-reconnect-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes nyx-reconnect-fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}