/* ==================================================================
   Catálogo de cursos (tutor/archive-course.php)
   Clases "ecat-" para no chocar con Tutor ni con el resto del tema.
   ================================================================== */

.ecat {
  --ecat-yellow: #FFC83D;
  --ecat-yellow-deep: #F2A900;
  --ecat-yellow-soft: #FFF4D1;
  --ecat-ink: #14284B;
  --ecat-text: #2A2838;
  --ecat-muted: #77758A;
  --ecat-line: #ECEAF3;
  --ecat-bg: #FFFCF5;
  --ecat-white: #FFFFFF;
  flex: 1; width: 100%;
  background-color: var(--ecat-bg);
  background-image: radial-gradient(rgba(20, 40, 75, .07) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  color: var(--ecat-text);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
:where(.ecat), :where(.ecat) *, :where(.ecat) *::before, :where(.ecat) *::after { box-sizing: border-box; }
:where(.ecat) a { color: inherit; text-decoration: none; }
:where(.ecat) :is(h1, h2, h3, p) { margin: 0; }
.ecat-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 64px; }

/* ---------- Encabezado ---------- */
.ecat-intro {
  margin-top: 28px; background: var(--ecat-white); border: 2px solid var(--ecat-line); border-radius: 24px; padding: 32px 36px;
  position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.ecat-intro::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--ecat-yellow); right: -80px; top: -120px; }
.ecat-intro::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: var(--ecat-yellow-soft); right: 120px; bottom: -80px; }
.ecat-intro > * { position: relative; z-index: 1; }
.ecat-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ecat-yellow-deep); }
.ecat-intro h1 { font-family: "Bricolage Grotesque", sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; color: var(--ecat-ink); margin: 6px 0; }
.ecat-intro p { font-size: 15px; color: var(--ecat-muted); max-width: 480px; line-height: 1.6; }
.ecat-count { display: flex; align-items: center; gap: 12px; background: var(--ecat-bg); border: 1px solid var(--ecat-line); border-radius: 16px; padding: 12px 18px; white-space: nowrap; }
.ecat-count b { font-family: "Bricolage Grotesque", sans-serif; font-size: 28px; font-weight: 800; color: var(--ecat-ink); line-height: 1; }
.ecat-count span { font-size: 13px; color: var(--ecat-muted); line-height: 1.3; }

/* ---------- Filtros y orden ---------- */
.ecat-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0 20px; flex-wrap: wrap; }
.ecat-chips, .ecat-pages { display: flex; gap: 8px; flex-wrap: wrap; }
.ecat-chip {
  height: 38px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--ecat-line); background: var(--ecat-white);
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ecat-muted); cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center;
}
.ecat-chip:hover { border-color: var(--ecat-ink); color: var(--ecat-ink); }
.ecat-chip.is-on { background: var(--ecat-ink); border-color: var(--ecat-ink); color: var(--ecat-white); }
.ecat-sort { position: relative; margin: 0; }
.ecat-sort select {
  appearance: none; -webkit-appearance: none; height: 44px; padding: 0 44px 0 16px; border: 2px solid var(--ecat-line); border-radius: 14px;
  background: var(--ecat-white); font: inherit; font-size: 14px; font-weight: 600; color: var(--ecat-ink); cursor: pointer; outline: none; transition: border-color .15s;
}
.ecat-sort select:hover, .ecat-sort select:focus { border-color: var(--ecat-ink); }
.ecat-sort svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ecat-ink); pointer-events: none; }
.ecat-sort noscript .ecat-chip { margin-left: 8px; }

/* ---------- Tarjetas ---------- */
.ecat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.ecat-card {
  background: var(--ecat-white); border: 2px solid var(--ecat-line); border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ecat-card:hover { transform: translateY(-3px); border-color: var(--ecat-ink); box-shadow: 5px 5px 0 var(--ecat-ink); }
.ecat-card__media {
  position: relative; height: 140px; margin: 8px 8px 0; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--ecat-ink) 0%, #1f3a6b 100%);
}
.ecat-card__media > a { position: absolute; inset: 0; }
.ecat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.ecat-card:hover .ecat-card__media img { transform: scale(1.04); }
.ecat-save {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 10px; border: none; cursor: pointer; padding: 0;
  background: rgba(255, 255, 255, .92); color: var(--ecat-ink); display: grid; place-items: center; transition: background .15s, transform .12s;
}
.ecat-save:hover, .ecat-save.is-on { background: var(--ecat-yellow); }
.ecat-save.is-on svg { fill: currentColor; }
.ecat-save.is-busy { opacity: .6; pointer-events: none; }

.ecat-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.ecat-card__title {
  font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ecat-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ecat-meta { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ecat-muted); }
.ecat-author { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ecat-line); font-size: 13px; color: var(--ecat-muted); }
.ecat-card__title, .ecat-meta { margin-bottom: 12px; }
.ecat-card__title + .ecat-meta { margin-top: -2px; }
.ecat-author__av { width: 26px; height: 26px; border-radius: 8px; background: var(--ecat-ink); color: var(--ecat-yellow); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.ecat-author b { color: var(--ecat-ink); font-weight: 700; }

.ecat-btn {
  margin-top: 14px; height: 40px; border-radius: 12px; border: 2px solid var(--ecat-ink); background: var(--ecat-white); color: var(--ecat-ink);
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, color .15s;
}
.ecat-btn:hover { background: var(--ecat-ink); color: var(--ecat-white); }
.ecat-btn svg { transition: transform .15s; }
.ecat-btn:hover svg { transform: translateX(3px); }

.ecat-card--soon {
  border-style: dashed; background: rgba(255, 255, 255, .6); align-items: center; justify-content: center; text-align: center;
  padding: 28px 22px; min-height: 340px;
}
.ecat-card--soon:hover { transform: none; box-shadow: none; border-color: var(--ecat-yellow-deep); }
.ecat-soon__ico { width: 52px; height: 52px; border-radius: 16px; background: var(--ecat-yellow-soft); color: var(--ecat-ink); display: grid; place-items: center; margin-bottom: 16px; }
.ecat-card--soon h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; font-weight: 800; color: var(--ecat-ink); }
.ecat-card--soon p { font-size: 13px; color: var(--ecat-muted); line-height: 1.55; margin-top: 6px; max-width: 200px; }

.ecat-empty { grid-column: 1 / -1; padding: 28px; text-align: center; color: var(--ecat-muted); background: var(--ecat-white); border: 2px dashed var(--ecat-line); border-radius: 20px; }
.ecat-pages { justify-content: center; margin-top: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .ecat-wrap { padding: 0 16px 48px; }
  .ecat-intro { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .ecat-intro h1 { font-size: 28px; }
  .ecat-sort, .ecat-sort select { width: 100%; }
  .ecat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ecat-card__media { height: 110px; }
  .ecat-card--soon { min-height: 0; }
}
@media (max-width: 420px) {
  .ecat-grid { grid-template-columns: 1fr; }
}