/* =========================================
   TARJETAS DE CURSOS
========================================= */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-xl);
}

.course-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    border: 1px solid #f0f0f0;
}
.course-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(38, 103, 255, 0.15); }

.course-img { width: 100%; height: 200px; object-fit: cover; }

.course-info { padding: var(--space-lg); }
.course-info h3 { 
    font-family: var(--font-head); 
    font-size: 1.3rem; 
    margin-bottom: var(--space-sm); 
    color: var(--secondary); 
}
.course-info p { 
    font-family: var(--font-body);
    font-size: 0.95rem; 
    color: var(--text-gray); 
    line-height: 1.6;
}

.card-actions {
    position: absolute; top: 15px; right: 15px; display: flex; gap: 8px; z-index: 10;
}
.action-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none; 
    display: flex; justify-content: center; align-items: center; 
    cursor: pointer; color: white; font-size: 0.9rem; 
    opacity: 0.9; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.action-btn:hover { opacity: 1; transform: scale(1.1); }
.btn-edit { background: var(--primary-main); }
.btn-delete { background: var(--danger); }