/* Cursos - Estilos globales para páginas de cursos
   Namespace por curso para evitar colisiones */

.curso-laravel .course-header-section {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  padding: 3rem 2rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.curso-laravel .course-header-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(50%, -50%);
}

.curso-laravel .course-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  font-weight: 600;
}

.curso-laravel .course-badge i { font-size: 1.5rem; }

.curso-laravel .text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.curso-laravel .course-stats { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.curso-laravel .stat-item { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }

.curso-laravel .course-hero-image {
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  backdrop-filter: blur(10px);
}

.curso-laravel .course-hero-image i { font-size: 4rem; color: #fff; }

/* Alert bienvenida */
.curso-laravel .welcome-alert { background: linear-gradient(135deg, #fecaca 0%, #f87171 100%); border-radius: 16px; padding: 1.5rem; border: none; box-shadow: var(--shadow); }
.curso-laravel .alert-content { display: flex; align-items: flex-start; gap: 1rem; }
.curso-laravel .alert-icon { width: 50px; height: 50px; background: #ef4444; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; flex-shrink: 0; }
.curso-laravel .alert-text h5 { color: #7f1d1d; margin-bottom: 0.5rem; }
.curso-laravel .alert-text p { color: #7f1d1d; margin: 0; }

/* Lessons grid / cards */
.curso-laravel .lessons-grid { display: flex; flex-direction: column; gap: 1rem; }
.curso-laravel .lesson-card { background: #fff; border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow); transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; gap: 1.5rem; position: relative; overflow: hidden; }
.curso-laravel .lesson-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); transition: width 0.3s ease; }
.curso-laravel .lesson-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.curso-laravel .lesson-card:hover::before { width: 8px; }
.curso-laravel .lesson-number { width: 50px; height: 50px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
.curso-laravel .lesson-content { flex: 1; }
.curso-laravel .lesson-title { color: var(--text-dark); font-weight: 600; margin-bottom: 0.5rem; font-size: 1.1rem; }
.curso-laravel .lesson-description { color: var(--text-light); margin-bottom: 0.75rem; font-size: 0.95rem; line-height: 1.5; }
.curso-laravel .lesson-meta { display: flex; gap: 1rem; flex-wrap: wrap; }
.curso-laravel .lesson-duration, .curso-laravel .lesson-type { display: flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; color: var(--text-light); font-weight: 500; }
.curso-laravel .lesson-arrow { color: var(--text-light); font-size: 1.2rem; transition: all 0.3s ease; }
.curso-laravel .lesson-card:hover .lesson-arrow { color: #ef4444; transform: translateX(5px); }

/* Sidebar */
.curso-laravel .course-sidebar { position: sticky; top: 2rem; }
.curso-laravel .info-card, .curso-laravel .requirements-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 1.5rem; overflow: hidden; }
.curso-laravel .info-card .card-header, .curso-laravel .requirements-card .card-header { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; padding: 1rem 1.5rem; font-weight: 600; }
.curso-laravel .info-card .card-body, .curso-laravel .requirements-card .card-body { padding: 1.5rem; }
.curso-laravel .info-item { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.curso-laravel .info-item:last-child { margin-bottom: 0; }
.curso-laravel .info-item i { width: 20px; color: #ef4444; font-size: 1.1rem; }
.curso-laravel .info-item strong { display: block; color: var(--text-dark); font-size: 0.9rem; }
.curso-laravel .info-item span { color: var(--text-light); font-size: 0.9rem; }
.curso-laravel .requirements-list { list-style: none; padding: 0; margin: 0; }
.curso-laravel .requirements-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; color: var(--text-dark); }
.curso-laravel .requirements-list li i { color: #ef4444; font-size: 0.9rem; }

/* Lección - cabecera y navegación */
.curso-laravel .lesson-header { text-align: center; padding: 1.5rem; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; border-radius: 16px; }
.curso-laravel .lesson-badge { display: inline-flex; align-items: center; gap: .75rem; }
.curso-laravel .lesson-number { background: rgba(255,255,255,.2); padding: .35rem .75rem; border-radius: 999px; font-weight: 700; }
.curso-laravel .lesson-type { background: #fca5a5; color: #7f1d1d; padding: .35rem .75rem; border-radius: 999px; font-weight: 600; }
.curso-laravel .lesson-title { margin: .5rem 0 0; font-weight: 700; color: #fff; }
.curso-laravel .lesson-meta { display: flex; gap: 1rem; justify-content: center; margin-top: .5rem; opacity: .95; }
.curso-laravel .meta-item { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }

.curso-laravel .breadcrumb { background: #fff; padding: .75rem 1rem; border-radius: 12px; box-shadow: var(--shadow); }
.curso-laravel .breadcrumb a { text-decoration: none; font-weight: 500; }

.curso-laravel .list-group .active { border-left: 4px solid #ef4444; }

/* Botones secundarios personalizados */
.btn-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); color: #fff; border: none; }
.btn-secondary:hover { background: linear-gradient(135deg, #4b5563 0%, #374151 100%); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Código / preformat */
.curso-laravel pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 12px; overflow-x: auto; }
.curso-laravel code { color: #e2e8f0; }

/* Responsive */
@media (max-width: 1200px) {
  .curso-laravel .course-header-section { padding: 2rem 1.5rem; }
  .curso-laravel .course-stats { gap: 1.5rem; }
}

@media (max-width: 768px) {
  .curso-laravel .course-header-section { padding: 1.5rem 1rem; text-align: center; }
  .curso-laravel .course-stats { justify-content: center; gap: 1rem; }
  .curso-laravel .alert-content { flex-direction: column; text-align: center; }
  .curso-laravel .lesson-card { flex-direction: column; text-align: center; gap: 1rem; }
  .curso-laravel .lesson-meta { justify-content: center; }
  .curso-laravel .course-sidebar { position: static; margin-top: 2rem; }
}

@media (max-width: 576px) {
  .curso-laravel .course-header-section { padding: 1rem; }
  .curso-laravel .course-badge { flex-direction: column; gap: 0.5rem; }
  .curso-laravel .course-stats { flex-direction: column; align-items: center; }
  .curso-laravel .lesson-card { padding: 1rem; }
}