/*
 * courses.css — Piofly · Marketplace de cursos (tipo Udemy) — cara alumno
 * Usa tokens de global.css → claro/oscuro + color de sector. Mobile-first.
 * FZ / dinero = verde.
 */
.crs-page { --money: var(--green); --money-dark: var(--green-dark); }
.crs-page {
  min-height: 100vh; color: var(--text-main);
  background:
    radial-gradient(1100px 360px at 50% -140px, color-mix(in srgb, var(--primary) 15%, transparent), transparent 70%),
    var(--bg-main);
  padding-bottom: 92px;
}
@media (min-width: 900px) { .crs-page { padding-bottom: 44px; } }
.crs-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; }
@media (min-width: 640px) { .crs-wrap { padding: 28px 24px 48px; } }

/* ─── Hero + buscador ─── */
.crs-hero { margin-bottom: 20px; }
.crs-hero h1 { font-size: 1.7rem; font-weight: 900; letter-spacing: -.6px; margin: 0 0 6px; }
@media (min-width: 640px) { .crs-hero h1 { font-size: 2.1rem; } }
.crs-hero p { margin: 0 0 16px; color: var(--text-soft); font-size: 14px; max-width: 640px; }
.crs-search { position: relative; max-width: 560px; }
.crs-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 18px; }
.crs-search input {
  width: 100%; box-sizing: border-box; padding: 13px 16px 13px 42px; border-radius: 14px;
  border: 1.5px solid var(--border-soft); background: var(--bg-panel); color: var(--text-main);
  font-family: inherit; font-size: 14px; font-weight: 600; outline: none; transition: border-color .15s, box-shadow .15s;
}
.crs-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ─── Chips de categoría ─── */
.crs-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; margin-bottom: 8px; }
.crs-chips::-webkit-scrollbar { display: none; }
.crs-chip {
  flex-shrink: 0; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 800; white-space: nowrap;
  background: var(--bg-panel); color: var(--text-soft); border: 1.5px solid var(--border-soft); transition: all .15s;
}
.crs-chip:hover { border-color: var(--border-mid); color: var(--text-main); }
.crs-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-accent); }

/* ─── Secciones ─── */
.crs-section-title { font-size: 1.15rem; font-weight: 900; letter-spacing: -.3px; margin: 24px 0 14px; }

/* ─── Grid de cursos ─── */
.crs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.crs-empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; color: var(--text-muted); }
.crs-empty i { font-size: 40px; opacity: .4; display: block; margin-bottom: 10px; }

/* ─── Tarjeta de curso ─── */
.crs-card {
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s; display: flex; flex-direction: column;
}
.crs-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-mid); }
.crs-cover { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; font-size: 52px; }
.crs-price {
  position: absolute; top: 10px; right: 10px; font-size: 12px; font-weight: 900;
  padding: 5px 10px; border-radius: 999px; color: #fff; backdrop-filter: blur(4px);
  background: color-mix(in srgb, var(--money) 88%, black); box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.crs-price--free { background: color-mix(in srgb, var(--money) 88%, black); }
.crs-price--fz   { background: color-mix(in srgb, var(--money) 88%, black); }
.crs-price--pro  { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.crs-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.crs-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-dark); }
.crs-title { font-size: 15px; font-weight: 900; color: var(--text-main); line-height: 1.25; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crs-instructor { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.crs-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-soft); margin-top: auto; padding-top: 6px; }
.crs-meta .crs-rating { color: #F59E0B; font-weight: 800; }
.crs-meta i { font-size: 13px; vertical-align: -1px; }
.crs-level { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--bg-panel)); color: var(--primary); }

/* Barra de progreso (mis cursos) */
.crs-prog { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 24%, transparent); overflow: hidden; margin-top: 4px; }
.crs-prog-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* ─── Banner "conviértete en instructor" ─── */
.crs-cta {
  margin-top: 32px; border-radius: 22px; padding: 28px 24px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, var(--bg-panel)), color-mix(in srgb, var(--accent) 16%, var(--bg-panel)));
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border-soft));
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.crs-cta-txt h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 900; letter-spacing: -.4px; }
.crs-cta-txt p { margin: 0; color: var(--text-soft); font-size: 14px; max-width: 520px; }
.crs-cta .crs-btn { flex-shrink: 0; }

/* Botón */
.crs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 13px; cursor: pointer; border: none;
  font-family: inherit; font-size: 14px; font-weight: 800; color: #fff;
  background: var(--accent); box-shadow: var(--shadow-accent); text-decoration: none; transition: all .15s;
}
.crs-btn:hover { background: var(--accent-mid); transform: translateY(-1px); }

/* ─── Dinero en verde en el header (igual que perfil) ─── */
.crs-page .hstat--coins i { color: var(--money) !important; }
.crs-page .hstat--coins { border-color: color-mix(in srgb, var(--money) 32%, transparent) !important; }

/* ─── Header en móvil: mostrar números de racha/monedas ─── */
@media (max-width: 500px) {
  .crs-page .hstat-text { display: inline !important; opacity: 1 !important; }
}