/* ===== Matemáticas · Hoja específica (refresco layout) ===== */
:root{
  --lx-bg: #f6f7fb;
  --lx-surface: #ffffff;
  --lx-text: #0b0e14;
  --lx-muted: #5b6473;
  --lx-ring: rgba(20, 80, 255, .15);
  --lx-primary: #2b59ff;
  --lx-primary-600: #2249d6;
  --lx-green: #10b981;
  --lx-green-ink: #0a7e5f;
  --lx-border: #e8ebf3;
}

html, body{
  background: var(--lx-bg);
  color: var(--lx-text);
}

.lx-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.page-title{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 10px;
  text-align:center;
}

/* ───── Meta bar ───── */
.meta-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 10px 0 22px;
}

.greeting{
  flex: 1 1 380px;
  font-weight: 600;
  padding: 12px 14px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-border);
  border-radius: 14px;
  overflow-wrap: anywhere;
}

.session-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--lx-border);
  background: var(--lx-surface);
  color: var(--lx-muted);
  font-weight: 600;
  white-space: nowrap;
}
.session-chip .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: #9aa4b2;
  box-shadow: 0 0 0 3px var(--lx-ring);
}

/* asegura que Volver NO tome todo el ancho */
.meta-bar a.btn{ flex: 0 0 auto; width: auto !important; }

/* ───── Botones ───── */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--lx-primary);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(43,89,255,.45);
}
.btn-primary:hover{ background: var(--lx-primary-600); }
.btn-dark{
  background: #0b0e14; color: #fff;
  box-shadow: 0 6px 18px -6px rgba(11,14,20,.45);
}
.btn-ghost{
  background: #fff;
  border: 1px solid var(--lx-border);
  color: var(--lx-text);
}

/* ───── Grid de niveles (fluido) ───── */
.levels{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

@media (max-width: 520px){
  .greeting{ flex-basis: 100%; }
}

/* ───── Tarjeta de nivel (flex column) ───── */
.level-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background:
    repeating-linear-gradient(135deg, rgba(43,89,255,.06) 0 12px, transparent 12px 24px),
    var(--lx-surface);
  border: 1px solid var(--lx-border);
  border-radius: 18px;
  box-shadow: 0 6px 30px -18px rgba(15, 23, 42, .25);
  min-height: 360px;
  overflow: hidden;
}
.level-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 36px -18px rgba(15, 23, 42, .30);
}

/* ===== Variante "✓ Superado" (tarjeta verde) ===== */
.level-card.passed{
  --pass-bg:    #f0fdf4;          /* emerald-50 */
  --pass-border:#a7f3d0;          /* emerald-200 */
  --pass-ink:   #065f46;          /* emerald-800 */
  --pass-accent:rgba(16,185,129,.08);

  background:
    repeating-linear-gradient(135deg, var(--pass-accent) 0 12px, transparent 12px 24px),
    var(--pass-bg);
  border-color: var(--pass-border);
  box-shadow: 0 10px 30px -18px rgba(16,185,129,.55);
}
.level-card.passed .level-title,
.level-card.passed .level-rule{
  color: var(--pass-ink);
}
.level-card.passed .level-record,
.level-card.passed .kv{
  background: rgba(255,255,255,.85);
  border-color: #d1fae5;
}
.level-card.passed .badge.success{
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
.level-card.passed .btn.btn-primary{
  background: #10b981;
  box-shadow: 0 6px 18px -6px rgba(16,185,129,.45);
}
.level-card.passed .btn.btn-primary:hover{
  background: #0a7e5f;
}

/* >>> Importante: que "passed" gane a "disabled" <<< */
.level-card.disabled:not(.passed){
  opacity: .95;
  background: var(--lx-surface);
}
.level-card.passed.disabled{
  opacity: 1; /* no apagar las aprobadas */
}

/* header de tarjeta */
.level-top{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.badge{
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--lx-border);
  color: var(--lx-muted);
  background: #fff;
}
.badge.success{
  color: var(--lx-green-ink);
  background: #ecfdf5;
  border-color: #d1fae5;
}
.level-title{
  font-weight: 800;
  letter-spacing: .01em;
}
.level-sub{ color: var(--lx-muted); margin: 2px 0 6px; }
.level-rule{ color: var(--lx-text); font-weight: 600; margin-bottom: 8px; }

/* bloque Objetivo / Dinámica / Texto */
.kv{
  background:#fff;
  border:1px dashed var(--lx-border);
  padding:10px 12px;
  border-radius:12px;
  color:var(--lx-muted);
}
.kv p{ margin:6px 0; line-height:1.35; }
.kv b{ color:#2d3645; }

/* récord */
.level-record{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--lx-muted);
  background: #fff;
  border: 1px dashed var(--lx-border);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* pie de tarjeta pegado abajo */
.level-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
}
.level-time{
  color: var(--lx-muted);
  font-weight: 600;
  white-space: nowrap;
}

.pill{
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef1f7; color: #7a8496;
  border: 1px solid var(--lx-border);
  border-radius: 999px; padding: 8px 12px; font-weight: 700;
}
/* Chip para aprobados deshabilitados */
.pill.done{
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
  font-weight: 800;
}

/* ───── Leaderboard (si lo usas en esta página) ───── */
.lb{
  background: var(--lx-surface);
  border: 1px solid var(--lx-border);
  border-radius: 16px;
  padding: 14px 10px;
}
.lb h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}
.lb-list{
  list-style: none;
  padding: 0; margin: 0;
}
.lb-row{
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
}
.lb-row:nth-child(odd){ background: #fafbff; }
.lb-row .pos{
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-grid; place-items: center;
  font-weight: 800; color: #3f4b62;
  background: #eef3ff; border: 1px solid #dfe7ff;
}
.lb-row .name{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700;
}
.lb-row .pts{ font-weight: 800; color: #30384a; }
.lb-empty{ color: var(--lx-muted); padding: 8px 10px; }
.hidden { display: none !important; }