/* Estilos para el indicador online */
.online-indicator,
.wid_state2,
.wid_state {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    z-index: 101;
    /* Default positioning */
    top: 0px;
    right: 0px;
    display: block !important; /* Siempre visible */
}

/* Status colors for indicators */
.wid_state.bg-success,
.wid_state2.bg-success,
.online-indicator.bg-success {
    background-color: #28a745 !important; /* verde */
}

.wid_state.bg-warning,
.wid_state2.bg-warning,
.online-indicator.bg-warning {
    background-color: #ffc107 !important; /* amarillo */
}

.wid_state.bg-light,
.wid_state2.bg-light,
.online-indicator.bg-light {
    background-color: #f8f9fa !important; /* gris */
}

/* Ensure parent containers have relative positioning for absolute indicator */
.avatar-container,
.avatar-wrapper,
.user-details,
.col-auto.pr-0,
.d-flex.align-items-center.justify-content-center,
.avatar-holder,
.position-relative,
.ml-0.ml-md-2 {
    position: relative;
    display: inline-block;
}

/* Specific positioning for the online indicator in the side menu */
.user-details.mb-4 .ml-0.ml-md-2 .wid_state2 {
    top: 0 !important;
    right: 0 !important;
    width: 12px !important;
    height: 12px !important;
    position: absolute !important;
    z-index: 101 !important;
    transform: translate(0, 0) !important;
}

/* Specific positioning for the online indicator in the feed */
.avatar-wrapper .wid_state2 {
    top: 0px;
    right: 0px;
    position: absolute;
}

/* Specific positioning for the online indicator in search results */
.col-auto.pr-0 .wid_state2 {
    top: 0px;
    right: 0px;
    width: 12px;
    height: 12px;
    display: block !important;
    position: absolute;
}

/* Specific positioning for the online indicator in suggestions */
.suggestion-box .d-flex.align-items-center.justify-content-center {
    position: relative;
}

.suggestion-box .d-flex.align-items-center.justify-content-center .wid_state {
    position: absolute;
    margin-top: 90px;
    margin-right: 15px;
    border: 2px solid #ffffff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    z-index: 101;
    display: block !important;
}

/* Specific positioning for the online indicator on the profile page and suggestions */
.online-indicator {
    top: 25px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    transition: all 0.3s ease;
}

.online-indicator.online {
    background-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.online-indicator.inactive {
    background-color: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}

.online-indicator.offline {
    background-color: #f8f9fa;
    box-shadow: 0 0 0 2px rgba(248, 249, 250, 0.2);
}

.user-status-text {
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.user-status-text.text-success {
    color: #28a745 !important;
}

.user-status-text.text-muted {
    color: #6c757d !important;
}

/* Estilos para el indicador en diferentes contextos */
.profile-header .online-indicator {
    width: 12px;
    height: 12px;
}

.feed-item .online-indicator {
    width: 8px;
    height: 8px;
}

.mobile-nav .online-indicator {
    width: 8px;
    height: 8px;
}

/* Animación de pulso para usuarios online */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(40, 167, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

.online-indicator.online {
    animation: pulse 2s infinite;
}

/* Specific positioning for the online indicator in the header */
#navbarDropdown .wid_state2 {
    top: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    display: block !important;
    position: absolute;
}

/* Specific positioning for the online indicator in the mobile navbar */
.mobile-bottom-nav .wid_state2 {
    top: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    display: block !important;
    position: absolute;
}

/* Specific positioning for the online indicator in the list box */
.list-box-avatars-wrapper .wid_state2 {
    top: 0px;
    right: 0px;
    width: 8px;
    height: 8px;
    display: block !important;
    position: absolute;
}

/* Ensure all indicators are visible by default unless explicitly hidden */
.wid_state2:not(.d-none),
.online-indicator:not(.d-none),
.wid_state:not(.d-none) {
    display: block !important;
}