/* Cuenta incompleta (AccountStatusBanner): Topbar (logo, selector de finca, menú de perfil)
   siempre operativo; sidebar (Atlas/Mapa/Programas/Alertas) bloqueado. Activado por JS
   (document.body.classList.add('account-status-locked')) desde Default.cshtml/SidebarLock.cshtml,
   nunca por presencia de estas reglas por sí solas. */
.account-status-locked .navbar-custom {
    z-index: 1057;
}

/* spherag.css deja el topbar inerte con cualquier modal abierto (body.modal-open .navbar-custom);
   solo con el banner de datos de facturación incompletos o de equipos caducados abierto debe seguir operativo (selector de finca, perfil, notificaciones).
   Con el resto de mensajes del banner y con otros modales (pago, métodos de pago) el topbar sigue inerte. */
body.account-status-locked.modal-open .navbar-custom {
    z-index: 0;
    pointer-events: none;
}

body.account-status-locked.account-status-topbar-enabled.modal-open:has(#accountStatusBannerModal.show) .navbar-custom {
    z-index: 1057 !important;
    pointer-events: auto !important;
}

.account-status-locked .leftside-menu .side-nav,
.account-status-locked .leftside-menu .button-sm-hover {
    pointer-events: none;
    opacity: .5;
}

/* Modal de bloqueo (BlockingState del design system): tarjeta fija de 568px, la ilustración
   "Pay" se compone con sus capas en la posición exacta del diseño. */
.account-status-blocking-modal .modal-dialog {
    max-width: 568px !important;
}

.account-status-blocking-modal .modal-content {
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.account-status-blocking-modal .modal-header {
    display: none;
}

.account-status-blocking-modal .modal-body {
    padding: 0;
}

.account-status-blocking {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.account-status-blocking-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 368px;
    height: 220px;
    overflow: hidden;
}

.account-status-blocking-pay {
    position: relative;
    flex-shrink: 0;
    width: 216.043px;
    height: 219.17px;
}

.account-status-blocking-pay img {
    position: absolute;
    display: block;
    max-width: none;
}

.account-status-blocking-pay .pay-background-complete {
    left: 6px;
    top: 0;
    width: 208.437px;
    height: 134.089px;
}

.account-status-blocking-pay .pay-background-simple {
    left: 10.42px;
    top: 6.57px;
    width: 202.737px;
    height: 102.933px;
}

.account-status-blocking-pay .pay-floor {
    left: 0;
    top: 211.06px;
    width: 216.043px;
    height: 0.248px;
}

.account-status-blocking-pay .pay-wallet {
    left: 4.19px;
    top: 145.48px;
    width: 77.032px;
    height: 65.658px;
}

.account-status-blocking-pay .pay-device {
    left: 72.24px;
    top: 20.83px;
    width: 112.48px;
    height: 195.75px;
}

.account-status-blocking-pay .pay-character {
    left: 19.11px;
    top: 35.18px;
    width: 51.103px;
    height: 183.991px;
}

.account-status-blocking-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0 8px;
    color: var(--sph-color);
    text-align: center;
    word-break: break-word;
}

.account-status-blocking-text p {
    margin: 0;
}

.account-status-blocking-title {
    font-family: Nunito, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
}

.account-status-blocking-message {
    font-family: Nunito, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}

.account-status-blocking-actions {
    width: 100%;
    padding: 16px 0 8px;
}

.account-status-blocking-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 12px;
    border: 1px solid var(--sph-color-gray-200);
    border-radius: 8px;
    background-color: var(--sph-color-secondary-200);
    color: var(--sph-color);
    font-family: Nunito, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-status-blocking-cta:hover,
.account-status-blocking-cta:focus {
    color: var(--sph-color);
    filter: brightness(0.96);
}