/**
 * Fixes para badges de notificación
 * Soluciona desbordamiento con números de 3+ dígitos
 */

/* Badge general en el frontend */
.notification-icon {
    min-width: 20px !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    font-weight: bold !important;
    display: inline-block !important;
}

/* Para el admin, posicionamiento absoluto pegado a la campana */
.dropdown-notifications .user-dropdown {
    position: relative !important;
}

.dropdown-notifications .notification-icon {
    position: absolute !important;
    right: 18px !important;
    top: -5px !important;
    z-index: 10 !important;
}

/* Para el frontend, posicionamiento absoluto pegado a la campana */
li.dropdown-notifications .is_login {
    position: relative !important;
    min-width: 70px !important;
    display: inline-block !important;
}

li.dropdown-notifications .notification-icon {
    position: absolute !important;
    left: 18px !important;
    top: -8px !important;
    z-index: 10 !important;
}

/* Contenedor de notificaciones con más espacio */
.dropdown-notifications {
    min-width: auto !important;
}

.header-widget.dropdown-notifications {
    min-width: 80px !important; /* Asegurar espacio suficiente */
}

/* Animación de pulse mejorada */
@keyframes notification-pulse {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% { 
        transform: scale(1.05); 
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.notification-icon.animate-pulse {
    animation: notification-pulse 1s ease-in-out 3;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .notification-icon {
        font-size: 10px !important;
        padding: 1px 5px !important;
        min-width: 18px !important;
    }
    
    .dropdown-notifications .notification-icon {
        right: -6px !important;
        top: -10px !important;
    }
}

/* Estados especiales */
.notification-icon:empty {
    display: none !important;
}

.notification-icon.zero {
    display: none !important;
}

/* Colores personalizados por prioridad */
.notification-icon.high-priority {
    background-color: #dc3545 !important;
    animation: notification-pulse 2s ease-in-out infinite;
}

.notification-icon.medium-priority {
    background-color: #fd7e14 !important;
}

.notification-icon.low-priority {
    background-color: #6c757d !important;
}