/* Layout compartido de las páginas con sesión: aprender, practicar, exámenes. */
:root{
  --bg:#f6f8fc;--white:#fff;--text:#172033;--muted:#667085;
  --green:#00c853;--green-dark:#00a844;--green-soft:#caffb8;
  --border:#dbe1ec;--orange:#f5a623;--red:#ff3340;--blue:#19b5fe;
  --shadow:0 5px 16px rgba(30,50,80,.07);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
a{text-decoration:none;color:inherit}
.app{max-width:1450px;margin:auto;min-height:100vh;padding:22px 28px;display:grid;grid-template-columns:230px minmax(500px,1fr) 290px;gap:24px}
.sidebar{display:flex;flex-direction:column;min-height:calc(100vh - 44px);position:sticky;top:22px}
.logo{display:flex;align-items:center;gap:9px;padding:7px 12px 28px}
.nav{display:flex;flex-direction:column;gap:8px}
.nav a{padding:13px 15px;border-radius:28px;color:#334155;font-size:14px;font-weight:600}
.nav a.active{background:var(--green-soft);color:#007f35}
.nav a:hover{background:#e8fbe3}
.icon{display:inline-block;width:25px;text-align:center}
/* "Cerrar sesión": justo debajo de Ranking, separado por una línea y con el mismo
   formato que los ítems del menú (conserva la clase .nav para ocultarse en móvil). */
.sidebar .nav.logout{position:relative;flex-direction:row;align-items:center;gap:0;margin-top:17px;padding:13px 15px;border-radius:28px;font-size:14px;font-weight:600;color:#c62828!important}
.sidebar .nav.logout::before{content:"";position:absolute;left:15px;right:15px;top:-9px;border-top:1px solid var(--border)}
.sidebar .nav.logout:hover{background:#fff0f0}

.main{min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.top h1{margin:0;font-size:29px;letter-spacing:-1px}
.top p{margin:5px 0 0;color:var(--muted);font-size:13px}
.pill{background:#fff;border:1px solid var(--border);border-radius:20px;padding:8px 13px;font-size:12px;font-weight:700}

.filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.filters button{border:1px solid var(--border);background:#fff;color:#475569;padding:8px 15px;border-radius:20px;font-size:12px;font-weight:700}
.filters button.active{background:#008939;border-color:#008939;color:#fff}

.card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}

.path-header{padding:21px;background:linear-gradient(120deg,#f1ffe9,#fff);border:1.5px solid var(--green)}
.path-title{display:flex;align-items:center;gap:13px}
.java-icon{width:56px;height:56px;border-radius:15px;background:#eef2ff;display:grid;place-items:center;font-size:30px}
.path-header h2{margin:0 0 4px;font-size:20px}
.path-header p{margin:0;color:var(--muted);font-size:12.5px}
.progress-row{display:flex;justify-content:space-between;font-size:12px;font-weight:800;margin-top:17px;margin-bottom:6px}
.progress{height:8px;background:#e8edf4;border-radius:20px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--green);border-radius:20px}

.unit{margin-top:14px;padding:18px}
.unit-head{display:flex;align-items:center;gap:12px}
.unit-number{width:40px;height:40px;border-radius:50%;background:#008939;color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px}
.unit-title{flex:1}
.unit-title h3{margin:0;font-size:15px}
.unit-title small{color:var(--muted);font-size:12px}
.unit-xp{font-size:11px;font-weight:800;color:#9e6200;background:#fff2d8;border-radius:12px;padding:6px 9px}
.lesson{margin-top:13px;border:1px solid var(--border);border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:12px}
.lesson.current{border-color:var(--green);background:#fbfffa}
.lesson.done .lesson-dot{background:#008939;color:#fff}
.lesson.current .lesson-dot{background:#008939;color:#fff;box-shadow:0 0 0 4px #d9ffd0}
.lesson-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e9edf4;font-size:12px;flex:none}
.lesson-info{flex:1}
.lesson-info strong{font-size:12px}
.lesson-info p{margin:3px 0 0;font-size:12px;color:var(--muted)}
.lesson-state{font-size:11px;font-weight:800;color:#007f35}
/* Bloqueado: se atenúa el ícono y el fondo, NO el texto (con opacity el texto quedaba por
   debajo del contraste mínimo 4.5:1 que mide PageSpeed). */
.lesson.locked{background:#fafbfd}
.lesson.locked .lesson-dot{opacity:.6}
.lesson.locked .lesson-state{color:#5f6b7c}
.unit-footer{margin-top:13px;text-align:center;font-size:12px;color:#667085}

.modules-title{font-size:16px;margin:25px 0 12px}
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.module{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;min-height:105px}
.module.current{border:1.5px solid var(--green)}
.module-icon{font-size:27px}
.module strong{display:block;margin-top:5px;font-size:13px}
.module small{color:var(--muted);font-size:12px}
.mini-progress{height:5px;background:#e9edf4;border-radius:10px;margin-top:10px}
.mini-progress i{display:block;height:100%;background:var(--green);border-radius:10px}

.right{display:flex;flex-direction:column;gap:18px;padding-top:50px}
.panel{background:#fff;border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.panel h3{font-size:12px;color:#596579;letter-spacing:.4px;margin:0 0 18px;text-transform:uppercase}
.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.stats b{font-size:18px}
.stats small{display:block;font-size:11px;color:#667085}
.rank{padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;display:flex;justify-content:space-between}
.xp{color:#007f35;font-weight:800}
.goal{background:#efffe9;border-radius:13px;padding:13px;font-size:12px;color:#007f35;font-weight:800;line-height:1.5}

.filters button{cursor:pointer}
.filters button:disabled{cursor:default;opacity:.55}
.module{display:block;color:inherit;cursor:pointer;transition:transform .15s}
.module:hover{transform:translateY(-2px)}
.module.locked{cursor:default;background:#f8fafc}
.module.locked .module-icon{opacity:.5;filter:grayscale(1)}
.module.locked:hover{transform:none}
.unit.locked .unit-number{background:#e5e9f0;color:#778297}
.unit.locked .unit-xp{background:#eef1f6;color:#5f6b7c}
a.lesson{color:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
a.lesson:hover{border-color:var(--green);transform:translateX(3px)}
.lesson.locked{cursor:not-allowed}
.lesson.available .lesson-dot{background:#fff2d8;color:#9e6200}
.lesson-tag{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;border-radius:8px;padding:2px 6px;background:#eef2ff;color:#4f5bd5;vertical-align:middle}
.rank.me{font-weight:800}
.empty{color:var(--muted);font-size:12px;padding:10px 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#172033;color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
.toast.error{background:#d32f2f}

@media(max-width:1100px){
  .app{grid-template-columns:205px minmax(0,1fr)}
  .right{display:none}
}
@media(max-width:760px){
  .app{display:block;padding:12px 14px}
  .sidebar{position:static;min-height:auto}
  .logo{padding-bottom:12px}
  .nav{display:none}
  .top{align-items:flex-start;gap:10px}
  .top h1{font-size:23px}
  .pill{display:none}
  .path-title{align-items:flex-start}
  .modules{grid-template-columns:repeat(2,1fr)}
  .lesson{align-items:flex-start}
  .lesson-state{display:none}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lesson-info .lock-why{color:#5f6b7c}
.module[role="button"]:focus-visible{outline:2px solid #007f35;outline-offset:2px}

/* Leyenda de vidas en el panel "Tu progreso" (common.js, renderHeartsNote) */
.hearts-note{margin:12px 0 0;font-size:11.5px;line-height:1.45;color:#596579}
.hearts-note[hidden]{display:none}
.hearts-note b{color:var(--text)}