/* Animación para el dropdown */
    .dropdown-animation {
        transition: all 0.3s ease-in-out !important;
    }

    .new-item-animation {
        transition: all 0.5s ease-in-out !important;
    }

    /* Animación sutil */
    .highlight-update {
        animation: pulse 0.6s ease-in-out !important;
        border: 2px solid red !important;
    }

    .counter-number {
        animation: countPop 0.5s ease-in-out !important;
        display: inline-block;
        font-weight: bold;
    }

    /* Nuevo estilo para la animación del número */
    .counter-pop {
        animation: numberPop 0.6s ease-in-out !important;
        display: inline-block;
        transform-origin: center;
    }

    .new-item-highlight {
        animation: slideIn 0.4s ease-out !important;
    }

    .item-text {
        animation: textHighlight 1s ease-in-out !important;
    }

    /* Estilo para resaltar registros de hoy */
    .registro-hoy {
        background-color: #ffebee !important;
        border-left: 4px solid #dc3545 !important;
        font-weight: bold !important;
    }

    .registro-hoy .dropdown-item {
        background-color: transparent !important;
        color: #dc3545 !important;
    }

    /* Nuevo estilo para botones con registros recientes */
    .btn-dropdown-reciente {
        border: 2px solid #dc3545 !important;
        background-color: #fff5f5 !important;
        color: #dc3545 !important;
        font-weight: bold !important;
    }

    .btn-dropdown-normal {
        border: 1px solid #6c757d !important;
    }

    /* Estilos para los botones de acción rápida en dropdowns */
    .btn-accion-rapida {
        width: 100%;
        margin: 2px 0;
        text-align: left;
        font-size: 0.85em;
        padding: 6px 12px;
    }

    .btn-presente { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
    .btn-tarde { background-color: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
    .btn-ausente { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    .btn-fuga { background-color: #e2e3e5; color: #383d41; border: 1px solid #d6d8db; }

    .btn-presente:hover { background-color: #c3e6cb; }
    .btn-tarde:hover { background-color: #ffeaa7; }
    .btn-ausente:hover { background-color: #f5c6cb; }
    .btn-fuga:hover { background-color: #d6d8db; }

    .divider-dropdown {
        margin: 5px 0;
        border-top: 1px solid #dee2e6;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes countPop {
        0% {
            transform: scale(1);
            color: inherit;
        }

        50% {
            transform: scale(1.3);
            color: #198754;
            font-weight: bold;
        }

        100% {
            transform: scale(1);
            color: inherit;
        }
    }

    /* Nueva animación para el número que crece */
    @keyframes numberPop {
        0% {
            transform: scale(1);
            color: inherit;
            font-size: inherit;
        }

        50% {
            transform: scale(1.8);
            color: #dc3545;
            font-size: 1.2em;
            font-weight: bold;
        }

        100% {
            transform: scale(1);
            color: inherit;
            font-size: inherit;
        }
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-10px);
            background-color: #d1ecf1;
        }

        to {
            opacity: 1;
            transform: translateX(0);
            background-color: transparent;
        }
    }

    @keyframes textHighlight {
        0% {
            color: inherit;
        }

        50% {
            color: #198754;
            font-weight: bold;
        }

        100% {
            color: inherit;
        }
    }