/* ============================================================
   gamify.css — Visual upgrade for the course experience.

   What this layer adds on top of theme-light.css:
     • Color-coded status (done = green, next = blue, locked = gray)
     • Subtle pulse on the next available step
     • Celebration bar on completed steps
     • Right-panel gamified stats (streak, XP, daily goal donut, CTA)
     • Hide locked-hint text once the module is actually unlocked

   Load order in curso.html:
     layout.css  →  theme-light.css  →  gamify.css
   Last one wins.
   ============================================================ */

:root {
  --status-done: #10b981;
  --status-done-bg: rgba(16,185,129,0.10);
  --status-done-border: rgba(16,185,129,0.45);
  --status-available: var(--brand-blue);
  --status-available-bg: rgba(75,102,242,0.08);
  --status-locked: rgba(15,23,42,0.45);

  --fire-orange: #f97316;
  --xp-gold: #fbbf24;
}

/* ============================================================
   STATUS PILLS
   The theme adds ✅ / 🔒 prefixes; we add color + shape so users
   read the state in one glance.
   ============================================================ */
.stepStatus {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(15,23,42,0.08);
  color: rgba(15,23,42,0.7);
  border: 1px solid transparent;
  opacity: 1;
  white-space: nowrap;
}

a.courseStep.isDone .stepStatus,
button.courseStep.isDone .stepStatus {
  background: var(--status-done-bg);
  color: var(--status-done);
  border-color: var(--status-done-border);
}

a.courseStep.isLocked .stepStatus,
button.courseStep.isLocked .stepStatus {
  background: rgba(15,23,42,0.06);
  color: var(--status-locked);
}

a.courseStep:not(.isDone):not(.isLocked) .stepStatus,
button.courseStep:not(.isDone):not(.isLocked) .stepStatus {
  background: var(--status-available-bg);
  color: var(--status-available);
  border-color: rgba(75,102,242,0.20);
}

/* ============================================================
   STEP STATES — done celebration, next pulse, locked dim
   ============================================================ */

/* Done: green left accent + readable soft tint
   IMPORTANT: color must be explicitly set here because the first step
   in every module carries .btn.primary (which sets color:#fff !important).
   Without this override, the background turns white but text stays white
   → invisible. We also keep the gradient from fading to solid white so
   the completed state is always visually distinct from uncompleted rows. */
a.courseStep.isDone,
button.courseStep.isDone {
  border-left: 4px solid var(--status-done) !important;
  background: linear-gradient(
    90deg,
    rgba(16,185,129,0.14) 0%,
    rgba(16,185,129,0.06) 60%,
    rgba(16,185,129,0.03) 100%
  ) !important;
  color: var(--text, #0f172a) !important; /* override .btn.primary white text */
}

/* Restore legible contrast on subtitle and status pill inside done rows.
   Both carry opacity:.78/.85 from theme-light which is fine on dark panels
   but too faint against the light green background. */
.courseStep.isDone .stepText strong,
.courseStep.isDone .stepSub {
  color: var(--text, #0f172a);
  opacity: 1;
}
.courseStep.isDone .stepStatus {
  opacity: 1;
}

/* Done stepNum: filled green circle */
.courseStep.isDone .stepNum {
  background: var(--status-done) !important;
  color: #fff !important;
}

/* The single "next available" step gets a gentle pulse so users
   always know where to look. Set by curso.js applyLocks. */
.courseStep.is-next {
  border-color: rgba(75,102,242,0.45) !important;
  animation: nextPulse 2.4s ease-in-out infinite;
}
.courseStep.is-next .stepNum {
  background: var(--brand-blue) !important;
  color: #fff !important;
}
@keyframes nextPulse {
  0%, 100% {
    box-shadow: 0 4px 0 rgba(15,23,42,0.12), 0 10px 20px rgba(15,23,42,0.08);
  }
  50% {
    box-shadow: 0 4px 0 rgba(75,102,242,0.30), 0 14px 32px rgba(75,102,242,0.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .courseStep.is-next { animation: none; }
}

/* Locked: dim the step number too so the whole card reads "not yet" */
.courseStep.isLocked .stepNum {
  background: rgba(15,23,42,0.08) !important;
  color: rgba(15,23,42,0.4) !important;
}

/* ============================================================
   LOCKED HINT — only show when the module is currently locked.
   curso.js toggles .module-is-locked on the <details> element.
   ============================================================ */
.module-locked-hint { display: none; }
details.module-is-locked .module-locked-hint { display: block; }

/* ============================================================
   RIGHT PANEL — gamified stats widget
   The right panel is dark blue (theme-light), so contrasts are
   white-on-blue here.
   ============================================================ */
.gamify-stats {
  display: grid;
  gap: 10px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
}

.stat-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(255,255,255,0.20);
}
.stat-icon.fire { background: rgba(249,115,22,0.30); }
.stat-icon.xp   { background: rgba(251,191,36,0.30); }
.stat-icon.donut { background: transparent; padding: 0; width: 44px; height: 44px; }

.stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.82);
}

/* Streak when it's 0: fade the fire so it doesn't shout */
.stat-card.streak-zero .stat-icon.fire { opacity: 0.45; }

/* Daily-goal donut */
.progress-donut {
  display: block;
  width: 44px;
  height: 44px;
  transform: rotate(-90deg); /* start fill at top */
}
.progress-donut circle {
  fill: none;
  stroke-width: 5;
}
.progress-donut .bg { stroke: rgba(255,255,255,0.25); }
.progress-donut .fg {
  stroke: #fff;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}

/* The "Continuar" CTA — high contrast white card on blue panel */
.cta-next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  color: var(--brand-blue);
  text-decoration: none !important;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(15,23,42,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cta-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,23,42,0.24);
  text-decoration: none !important;
}
.cta-next .cta-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(15,23,42,0.55);
}
.cta-next .cta-title {
  font-size: 1rem;
  color: var(--brand-blue);
  line-height: 1.2;
}
.cta-next .cta-sub {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(15,23,42,0.55);
}

/* When everything in the course is done */
.cta-next.cta-done {
  background: var(--status-done);
}
.cta-next.cta-done .cta-title,
.cta-next.cta-done .cta-label,
.cta-next.cta-done .cta-sub { color: #fff; }

/* Existing footer rule text stays visible */
.gamify-rule {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
}

/* ============================================================
   Small touches: the page header "Curso (Ruta)" already has the
   accent underline from theme-light. The numbered Módulo 0/1
   summary text we leave alone — it inherits the theme typography.
   ============================================================ */

/* ============================================================
   Premium lock overlay — shown inside courseStep when the step
   requires premium and the user is not premium.
   ============================================================ */
.premium-lock-overlay {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  margin-top: 6px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  font-size: 0.82rem;
  color: rgba(15, 23, 42, 0.7);
  pointer-events: auto;
}
.premium-lock-overlay .btn.small {
  padding: 3px 9px;
  font-size: 0.78rem;
}

/* ============================================================
   MICROANIMATIONS
   All respect prefers-reduced-motion.
   ============================================================ */

/* 1) Lock icon — one-shot wiggle when the premium overlay appears */
@keyframes lock-wiggle {
  0%,100% { transform: rotate(0deg); }
  15%     { transform: rotate(-13deg); }
  30%     { transform: rotate(11deg); }
  45%     { transform: rotate(-9deg); }
  60%     { transform: rotate(6deg); }
  75%     { transform: rotate(-3deg); }
  90%     { transform: rotate(2deg); }
}
.lock-icon {
  display: inline-block;
  transform-origin: center bottom;
  animation: lock-wiggle 1.6s ease-in-out 0.15s 1 both;
}
.lock-icon-img {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  flex: 0 0 auto;
  image-rendering: crisp-edges;
}
.stepStatus .lock-icon-img {
  width: 0.92rem;
  height: 0.92rem;
}
@media (prefers-reduced-motion: reduce) {
  .lock-icon { animation: none; }
}

/* 2) Step completion — spring-pop on the step number badge */
@keyframes step-complete-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.40); }
  62%  { transform: scale(0.90); }
  80%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.step-complete-pop {
  animation: step-complete-pop 0.48s cubic-bezier(.36,.07,.19,.97) 1 both;
}
@media (prefers-reduced-motion: reduce) {
  .step-complete-pop { animation: none; }
}

/* 3) XP reward — value pops gold when XP increases */
@keyframes xp-value-pop {
  0%   { transform: scale(1)    translateY(0);    color: #fff; }
  28%  { transform: scale(1.30) translateY(-5px); color: #fbbf24; }
  62%  { transform: scale(0.95) translateY(1px);  color: #fff; }
  100% { transform: scale(1)    translateY(0);    color: #fff; }
}
.xp-value-pop {
  animation: xp-value-pop 0.55s cubic-bezier(.36,.07,.19,.97) 1 both;
  display: inline-block; /* needed for transform to apply */
}
@media (prefers-reduced-motion: reduce) {
  .xp-value-pop { animation: none; }
}

/* ============================================================
   RESPONSIVE / ZOOM HARDENING
   Course HUD cards and lock hints should wrap instead of forcing
   the side panel or course rows wider.
   ============================================================ */
.stat-card,
.cta-next,
.premium-lock-overlay {
  min-width: 0;
}

.stat-value,
.stat-label,
.cta-next .cta-title,
.cta-next .cta-sub,
.premium-lock-overlay {
  overflow-wrap: anywhere;
}

.premium-lock-overlay {
  flex-wrap: wrap;
}

@media (max-width: 1200px) {
  .stat-card {
    gap: 0.625rem;
    padding: 0.7rem 0.75rem;
  }

  .stat-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.15rem;
  }

  .stat-icon.donut,
  .progress-donut {
    width: 2.35rem;
    height: 2.35rem;
  }
}

@media (max-width: 980px) {
  .gamify-stats,
  .game-hud,
  .lesson-side {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }
}

@media (max-width: 480px) {
  .premium-lock-overlay .btn.small {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   COURSE ROUTE DASHBOARD
   curso.html keeps the same JS hooks, but moves away from the
   heavy three-column shell into a focused learning dashboard.
   ============================================================ */
body[data-page="curso"] .course-shell {
  width: min(76rem, 100%);
  grid-template-columns: 1fr;
  padding: clamp(1rem, 2.4vw, 1.75rem);
}

body[data-page="curso"] .course-dashboard {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}

.course-hero,
.course-progress-dock,
.course-route-card {
  border: 1px solid rgba(67, 88, 244, .15);
  background:
    radial-gradient(circle at 90% 0%, rgba(139, 92, 246, .12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(223, 243, 255, .66) 58%, rgba(237, 233, 254, .70));
  box-shadow:
    0 24px 70px rgba(67, 88, 244, .13),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.course-hero {
  display: grid;
  gap: 1rem;
  padding: clamp(2rem, 4.2vw, 3.2rem);
  border-radius: 2rem;
}

.course-eyebrow {
  width: fit-content;
  margin: 0 0 0.75rem;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: rgba(67, 88, 244, .12);
  border: 1px solid rgba(67, 88, 244, .15);
  color: var(--brand-blue, #4b66f2);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.course-hero h1 {
  margin: 0;
  color: #111827;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: .92;
}

.course-hero h1::after {
  display: none;
}

.course-hero .sub {
  max-width: 46rem;
  margin: 1rem 0 0;
  color: rgba(17, 24, 39, .68);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
}

.course-progress-dock {
  padding: clamp(1rem, 2vw, 1.25rem);
  border-radius: 1.6rem;
}

body[data-page="curso"] #progressPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min(17rem, 100%), 0.48fr);
  gap: 0.9rem;
  align-items: stretch;
}

body[data-page="curso"] #progressPanel .gamify-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

body[data-page="curso"] #progressPanel .stat-card {
  min-height: 5.6rem;
  color: #111827;
  background: rgba(255, 255, 255, .64);
  border-color: rgba(67, 88, 244, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70);
}

body[data-page="curso"] #progressPanel .stat-value {
  color: #111827;
}

body[data-page="curso"] #progressPanel .stat-label {
  color: rgba(17, 24, 39, .58);
}

body[data-page="curso"] #progressPanel .stat-icon {
  background: linear-gradient(135deg, rgba(67, 88, 244, .14), rgba(139, 92, 246, .12));
}

body[data-page="curso"] #progressPanel .stat-icon.fire {
  background: rgba(249, 115, 22, .16);
}

body[data-page="curso"] #progressPanel .stat-icon.xp {
  background: rgba(251, 191, 36, .20);
}

body[data-page="curso"] #progressPanel .progress-donut .bg {
  stroke: rgba(67, 88, 244, .16);
}

body[data-page="curso"] #progressPanel .progress-donut .fg {
  stroke: var(--brand-blue, #4b66f2);
}

body[data-page="curso"] #progressPanel .cta-next {
  margin: 0;
  min-height: 5.6rem;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-blue, #4b66f2), #8b5cf6);
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(67, 88, 244, .24);
}

body[data-page="curso"] #progressPanel .cta-next .cta-label,
body[data-page="curso"] #progressPanel .cta-next .cta-title,
body[data-page="curso"] #progressPanel .cta-next .cta-sub {
  color: #ffffff;
}

body[data-page="curso"] #progressPanel .gamify-rule {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid rgba(67, 88, 244, .13);
  color: rgba(17, 24, 39, .58);
}

.course-route-card {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border-radius: 1.75rem;
}

.course-route-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.course-route-head h2 {
  margin: 0;
  color: #111827;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.course-route-head .small {
  max-width: 26rem;
  margin: 0;
  text-align: right;
}

body[data-page="curso"] #modulesContainer {
  display: grid;
  gap: 1rem;
}

body[data-page="curso"] #modulesContainer > details.block {
  margin: 0;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(67, 88, 244, .13);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 96% 0%, rgba(56, 189, 248, .10), transparent 32%),
    rgba(255, 255, 255, .68);
  box-shadow:
    0 14px 34px rgba(67, 88, 244, .08),
    inset 0 1px 0 rgba(255, 255, 255, .70);
}

body[data-page="curso"] #modulesContainer > details.block::before {
  display: none;
}

body[data-page="curso"] #modulesContainer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #111827;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.18;
  list-style-position: outside;
}

body[data-page="curso"] #modulesContainer .actions {
  gap: 0.75rem !important;
}

body[data-page="curso"] .courseStep {
  width: 100%;
  min-height: 4.4rem;
  border-radius: 1rem;
  border: 1px solid rgba(67, 88, 244, .12);
  background: rgba(255, 255, 255, .72);
  box-shadow:
    0 6px 0 rgba(67, 88, 244, .08),
    0 12px 26px rgba(67, 88, 244, .07);
}

body[data-page="curso"] .courseStep:not(.isLocked):hover {
  transform: translateY(-1px);
  box-shadow:
    0 7px 0 rgba(67, 88, 244, .12),
    0 16px 32px rgba(67, 88, 244, .11);
}

body[data-page="curso"] .course-footer {
  margin: 0;
  text-align: center;
}

@media (max-width: 980px) {
  body[data-page="curso"] #progressPanel {
    grid-template-columns: 1fr;
  }

  body[data-page="curso"] #progressPanel .gamify-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  }

  .course-route-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-route-head .small {
    text-align: left;
  }
}

@media (max-width: 700px) {
  .course-hero,
  .course-progress-dock,
  .course-route-card {
    border-radius: 1.35rem;
  }

  body[data-page="curso"] .courseStep {
    align-items: stretch;
  }

  body[data-page="curso"] .courseStep .stepStatus {
    margin-left: 2.625rem;
  }
}

@media (max-width: 480px) {
  body[data-page="curso"] .course-shell {
    padding: 0.75rem;
  }

  .course-hero {
    padding: 1.5rem;
  }

  .course-hero h1 {
    font-size: clamp(2.55rem, 17vw, 3.6rem);
  }

  .course-route-card,
  .course-progress-dock {
    padding: 0.9rem;
  }

  body[data-page="curso"] #modulesContainer > details.block {
    padding: 0.9rem;
  }
}