/* 
 * Estilos específicos para badges de notificaciones del header
 * Archivo dedicado para evitar conflictos con otros CSS
 */

/* Badge normal para mensajes regulares */
.header-modern .notification-badge,
.mobile-nav .notification-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 0.7rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    animation: pulse 2s infinite !important;
    z-index: 1000 !important;
    line-height: 1 !important;
    min-width: 20px !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important;
}

/* Badge especial para notificaciones del sistema */
.header-modern .system-notification-badge,
.mobile-nav .system-notification-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: linear-gradient(135deg, #ff9500, #ff8c00) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 0.7rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.4) !important;
    animation: systemPulse 1.5s infinite !important;
    z-index: 1000 !important;
    line-height: 1 !important;
    min-width: 20px !important;
    text-align: center !important;
}

/* Animación para badges normales */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    }
}

/* Animación especial para notificaciones del sistema */
@keyframes systemPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 149, 0, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(255, 149, 0, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 149, 0, 0.4);
    }
}

/* Asegurar que el contenedor padre permita posicionamiento absoluto */
.header-modern .position-relative,
.mobile-nav .position-relative {
    position: relative !important;
}

/* Ajustes específicos para móvil */
@media (max-width: 768px) {
    .mobile-nav .notification-badge,
    .mobile-nav .system-notification-badge {
        top: -8px !important;
        right: -8px !important;
        width: 18px !important;
        height: 18px !important;
        font-size: 0.6rem !important;
    }
}

/* Debug: Forzar visibilidad en desarrollo */
.debug-badge {
    background: #ff0000 !important;
    color: #ffffff !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}