#components-reconnect-modal {
    align-items: center;
    background: #162231;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    bottom: 24px;
    box-shadow: 0 18px 45px rgba(8, 18, 32, 0.28);
    color: #fff;
    display: flex;
    gap: 12px;
    left: 50%;
    max-width: min(520px, calc(100vw - 32px));
    min-height: 68px;
    opacity: 0;
    padding: 12px 14px;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 16px);
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0s linear 180ms;
    visibility: hidden;
    width: max-content;
    z-index: 100002;
}

#components-reconnect-modal.components-reconnect-show {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 6000ms, 6000ms, 6000ms;
    visibility: visible;
}

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
    visibility: visible;
}

#components-reconnect-modal.components-reconnect-hide {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition-delay: 0s;
    visibility: hidden;
}

.sphere-reconnect-indicator {
    background: #58c4ff;
    border-radius: 999px;
    box-shadow: 0 0 0 5px rgba(88, 196, 255, 0.14);
    flex: 0 0 auto;
    height: 10px;
    width: 10px;
}

.sphere-reconnect-copy {
    display: grid;
    gap: 2px;
    line-height: 1.25;
    min-width: 0;
}

.sphere-reconnect-copy strong {
    font-size: 0.95rem;
    font-weight: 700;
}

.sphere-reconnect-message,
.sphere-reconnect-attempt {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.82rem;
}

.sphere-reconnect-message-failed,
.sphere-reconnect-message-rejected,
#components-reconnect-modal.components-reconnect-failed .sphere-reconnect-message-show,
#components-reconnect-modal.components-reconnect-rejected .sphere-reconnect-message-show {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .sphere-reconnect-message-failed,
#components-reconnect-modal.components-reconnect-rejected .sphere-reconnect-message-rejected {
    display: inline;
}

.sphere-reconnect-reload {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 6px;
    color: #fff;
    display: none;
    font: inherit;
    font-size: 0.82rem;
    margin-left: 4px;
    padding: 7px 10px;
}

.sphere-reconnect-reload:disabled {
    cursor: wait;
    opacity: 0.72;
}

/* DevExpress puede dejar su indicador de una operación pendiente encima de la
   pantalla cuando se corta el circuito. Durante la recuperación mostramos un solo
   estado, el de conexión, para no comunicar dos cargas incompatibles a la vez. */
body.sphere-reconnecting dxbl-loading-panel {
    visibility: hidden !important;
}

#components-reconnect-modal.components-reconnect-failed .sphere-reconnect-reload,
#components-reconnect-modal.components-reconnect-rejected .sphere-reconnect-reload {
    display: inline-flex;
}

@media (max-width: 640px) {
    #components-reconnect-modal {
        bottom: 12px;
        width: calc(100vw - 24px);
    }
}