/* Estilos personalizados para el sistema Mora */
:root {
    --mora-0: #2d1b69;
    --mora-1: #3d2a7a;
    --mora-2: #4d398b;
    --mora-3: #5d489c;
    --mora-4: #6d57ad;
    --mora-5: #7d66be;
    --mora-6: #8d75cf;
    --mora-7: #9d84e0;
    --mora-8: #ad93f1;
    --mora-9: #bda2ff;
}

/* Estilos generales */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Transiciones suaves */
.transition {
    transition: all 0.3s ease;
}

/* Efectos de hover para tarjetas */
.color-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Personalización de scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f1f1f;
}

::-webkit-scrollbar-thumb {
    background: var(--mora-5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mora-4);
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* Responsividad mejorada */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    header .flex {
        flex-direction: column;
        gap: 1rem;
    }
    
    header nav ul {
        justify-content: center;
    }
}

/* Mejoras de accesibilidad */
button:focus, 
input:focus, 
select:focus, 
textarea:focus {
    outline: 2px solid var(--mora-5);
    outline-offset: 2px;
}

/* Estados de carga */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--mora-5);
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}