/* ===== Lectura · Estilo igual al de Matemáticas ===== */
: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: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

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

/* Meta bar */
.meta-bar{
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center; margin: 10px 0 20px;
}
.greeting{
  font-weight: 600; padding: 12px 14px; background: var(--lx-surface);
  border: 1px solid var(--lx-border); border-radius: 14px;
}
.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;
}
.session-chip .dot{ width:10px; height:10px; border-radius:50%; background:#9aa4b2; box-shadow:0 0 0 3px var(--lx-ring); }

/* 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; white-space:nowrap; user-select:none;
}
.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); }
.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;
}

/* Grid de niveles (igual que Matemáticas) */
.levels{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
}
@media (max-width: 1000px){ .levels{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){ .levels{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){
  .meta-bar{ grid-template-columns: 1fr; }
  .levels{ grid-template-columns: 1fr; }
}

/* Tarjeta */
.level-card{
  position:relative;
  display:grid; grid-template-rows: auto auto 1fr auto;
  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: 210px;
}
.level-card.passed{ border-color: rgba(16,185,129,.45); box-shadow: 0 8px 30px -18px rgba(16,185,129,.45); }
.level-card.disabled{ opacity:.85; background:var(--lx-surface); }

.level-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.level-title{ font-weight:800; letter-spacing:.01em; }
.badge{ font-size:12px; font-weight:800; 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-sub{ color:var(--lx-muted); margin:4px 0 6px; }
.level-rule{ color:var(--lx-text); font-weight:600; margin:0 0 8px; }

/* Bloque de texto con Objetivo / Dinámica / Textos */
.kv{
  display:block;
  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; }

.level-record{
  display:inline-flex; gap:10px; align-items:center; margin-top:10px;
  color:var(--lx-muted); background:#fff; border:1px dashed var(--lx-border);
  padding:6px 10px; border-radius:999px; font-weight:700; width:max-content;
}

.level-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.level-time{ color:var(--lx-muted); font-weight:600; }