/* Estilos personalizados para tutoriales jerárquicos */

/* Breadcrumbs mejorados */
.breadcrumbs {
    margin-bottom: 1.5rem;
    padding: 0.75rem 0;
    font-size: 0.9rem;
}

.breadcrumbs a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.breadcrumbs span {
    margin: 0 0.5rem;
    color: var(--border);
}

/* Animaciones para cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-card,
.level-card,
.tutorial-card {
    animation: fadeInUp 0.5s ease-out;
}

.category-card:nth-child(1) {
    animation-delay: 0.1s;
}

.category-card:nth-child(2) {
    animation-delay: 0.2s;
}

.category-card:nth-child(3) {
    animation-delay: 0.3s;
}

.level-card:nth-child(1) {
    animation-delay: 0.1s;
}

.level-card:nth-child(2) {
    animation-delay: 0.2s;
}

.level-card:nth-child(3) {
    animation-delay: 0.3s;
}

/* Mejoras para modo oscuro */
@media (prefers-color-scheme: dark) {

    .category-card,
    .level-card,
    .tutorial-card {
        background: rgba(30, 30, 30, 0.6);
        backdrop-filter: blur(10px);
    }

    .category-card:hover,
    .level-card:hover,
    .tutorial-card:hover {
        background: rgba(40, 40, 40, 0.8);
    }
}

/* Estilos responsivos */
@media (max-width: 480px) {

    .category-card .card-icon,
    .level-card .card-icon {
        font-size: 2rem;
    }

    .category-card h2,
    .level-card h3 {
        font-size: 1.2rem;
    }
}