:root {
    --color-primario: #6e8efb;
    --color-secundario: #a777e3;
    --color-activo: #4CAF50;
    --color-inactivo: #F44336;
    --color-texto: #333;
    --color-fondo: #f9f9f9;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-fondo);
}

.estado-activo {
    background-color: var(--color-activo);
    color: white;
}

.estado-inactivo {
    background-color: var(--color-inactivo);
    color: white;
}

/* Efectos adicionales */
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-primary-light {
    background-color: rgba(78, 115, 223, 0.1);
}

.bg-success-light {
    background-color: rgba(28, 200, 138, 0.1);
}

.animate__animated {
    animation-duration: 0.5s;
}

/* Efecto para el empty state */
.empty-state-icon {
    position: relative;
    display: inline-block;
}

.empty-state-icon::after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: rotate 15s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Agrega esto al final del archivo */
@keyframes pageDrop {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.loaded .container.py-4 {
    animation: pageDrop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Opcional: Efecto para el fondo */
body::before {
    transition: opacity 0.8s ease;
    opacity: 0;
}

body.loaded::before {
    opacity: 1;
}