/* =====================================================================
   Interfaz nueva del alumno: 5 secciones (abajo en el celular, a la izquierda
   en la computadora), Inicio, Aprender, Practicar, Yo y las transiciones.
   ===================================================================== */
:root { --violet: #7C3AED; --violet-soft: #EFE7FD; --rose: #D9467E; --rose-soft: #FDE4EE; --teal: #0E8A86; --teal-soft: #DDF4F2; --tabs-h: 70px; --side-w: 236px; }
:root[data-theme="dark"] { --violet: #B794F6; --violet-soft: #2A2145; --rose: #F48FB1; --rose-soft: #3A1D2B; --teal: #5EEAD4; --teal-soft: #12302E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --violet: #B794F6; --violet-soft: #2A2145; --rose: #F48FB1; --rose-soft: #3A1D2B; --teal: #5EEAD4; --teal-soft: #12302E; } }

/* ---------- barra de arriba ---------- */
body.stu-on .stu-bar.has-nav { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; gap: 12px; padding: 10px 20px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); }
body.stu-on .stu-bar .game-hud { margin-left: auto; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 32, 54, .06); }
.stu-top-r { gap: 8px; }
.stu-top-me { display: inline-flex; border-radius: 50%; }
.stu-av { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-family: var(--display); font-weight: 700; flex: none; object-fit: cover; line-height: 1; }

/* ---------- las 5 secciones ---------- */
.stu-tabs { display: none; }
body.stu-on .stu-tabs { display: flex; position: fixed; z-index: 40; background: var(--surface); }
.stu-tabs-list { display: flex; }
.stu-tab { display: flex; align-items: center; gap: 12px; color: var(--muted); text-decoration: none; font-weight: 700; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; border-radius: 14px; }
.stu-tab:hover { color: var(--ink); }
.stu-tab.on { color: var(--accent); }
.stu-tab-ico { display: inline-grid; place-items: center; }
.stu-tab-ico.pop { animation: tabpop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tabpop { 0% { transform: scale(.7) translateY(4px); } 60% { transform: scale(1.18) translateY(-3px); } 100% { transform: none; } }
.stu-tabs-brand, .stu-tabs-foot { display: none; }

/* celular y tableta: abajo */
@media (max-width: 1023.98px) {
  body.stu-on .stu-tabs { left: 0; right: 0; bottom: 0; height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(20, 32, 54, .06); }
  .stu-tabs-list { flex: 1; justify-content: space-around; }
  .stu-tab { flex: 1; flex-direction: column; justify-content: center; gap: 2px; font-size: .78rem; padding: 6px 2px; max-width: 110px; }
  .stu-tab.on { background: var(--accent-soft); }
  body.stu-on .student { padding-bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom)); }
  body.stu-on.stu-focus .stu-tabs { display: none; }
  body.stu-on.stu-focus .student { padding-bottom: 0; }
}
@media (max-width: 700px) {
  body.stu-on .stu-bar.has-nav { padding: 8px 14px; }
  body.stu-on .stu-bar .brand-name small { display: none; }
  body.stu-on .stu-bar .brand { font-size: 1.15rem; }
  body.stu-on .stu-bar .game-hud { order: 0; flex: 0 1 auto; gap: 8px; padding: 5px 10px; font-size: .85rem; overflow: hidden; }
  body.stu-on .stu-top-r { display: none; }
}
@media (max-width: 400px) { body.stu-on .stu-bar .game-hud .gh-arena { display: none; } body.stu-on .stu-bar .brand-name { display: none; } }

/* computadora: a la izquierda */
@media (min-width: 1024px) {
  body.stu-on .stu-tabs { top: 0; left: 0; bottom: 0; width: var(--side-w); flex-direction: column; padding: 22px 16px; border-right: 1px solid var(--line); gap: 18px; }
  body.stu-on .student { padding-left: var(--side-w); }
  body.stu-on .stu-bar .brand { display: none; }
  .stu-tabs-brand { display: block; padding: 0 8px 10px; }
  .stu-tabs-brand .brand { color: var(--ink); }
  .stu-tabs-list { flex-direction: column; gap: 6px; }
  .stu-tab { padding: 12px 16px; font-size: 1.02rem; }
  .stu-tab.on { background: var(--accent-soft); }
  .stu-tabs-foot { display: grid; margin-top: auto; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
  .stu-tabs-me { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; padding: 6px 8px; border-radius: 12px; }
  .stu-tabs-me:hover { background: var(--surface-2); }
  .stu-tabs-me span { display: grid; }
  .stu-tabs-me small { color: var(--muted); font-size: .8rem; }
  .stu-out { color: var(--muted); }
  body.stu-on .stu-top-theme { display: inline-flex; }
}

/* ---------- piezas comunes ---------- */
.ln-ico { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.t-blue { background: var(--accent-soft); color: var(--accent); }
.t-ok { background: var(--ok-soft); color: var(--ok); }
.t-warn { background: var(--warn-soft); color: var(--warn); }
.t-bad { background: var(--bad-soft); color: var(--bad); }
.t-violet { background: var(--violet-soft); color: var(--violet); }
.t-rose { background: var(--rose-soft); color: var(--rose); }
.t-teal { background: var(--teal-soft); color: var(--teal); }
.t-muted { background: var(--surface-2); color: var(--muted); }
.ln-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ln-body b { font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.ln-side { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--muted); }
.ln-bar { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; min-width: 60px; }
.ln-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.ln-bar.ok i { background: var(--ok); }
.ln-bar.big { height: 12px; }
.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; font-size: .92rem; }
.notice-soft { display: flex; align-items: center; gap: 8px; color: var(--accent); background: var(--accent-soft); border-color: transparent; font-weight: 700; }

/* encabezado grande con la nota */
.ho-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ho-hi { font-size: clamp(2rem, 6vw, 2.8rem); margin: 0; line-height: 1.05; position: relative; display: inline-block; }
.ho-spark { display: inline-block; width: 26px; height: 26px; margin-left: 6px; vertical-align: top;
  background: conic-gradient(from 200deg, transparent 0 8%, #F5B400 8% 14%, transparent 14% 30%, #F5B400 30% 36%, transparent 36% 52%, #F5B400 52% 58%, transparent 58%); border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 42%, #000 44%); mask: radial-gradient(circle, transparent 42%, #000 44%); }
.ho-hero p { margin: 6px 0 0; font-size: 1.05rem; }
.ho-hero-art { width: 112px; height: 96px; flex: none; position: relative; border-radius: 48% 52% 44% 56% / 55% 45% 55% 45%; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); }
.ho-note { display: block; width: 74px; height: 74px; background: url('../media/ui/notas.webp') 33.333% 0 / 400% 300% no-repeat; filter: drop-shadow(0 6px 8px rgba(35, 80, 216, .25)); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px) rotate(-4deg); } }

/* ---------- Inicio ---------- */
.ho-page { max-width: 1240px; gap: 18px; }
.ho-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.ho-main, .ho-side { display: grid; gap: 18px; align-content: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .ho-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } .ho-only-m { display: none; } }
@media (max-width: 1099.98px) { .ho-only-d { display: none; } }
.ho-today h2, .ho-cont h2, .ho-sc h2, .ho-arena h2 { margin: 0; font-size: 1.45rem; }
.ho-date { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); background: var(--surface-2); padding: 6px 10px; border-radius: 10px; }
.ho-rows { display: grid; margin: 10px 0 14px; }
.ho-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); border-radius: 10px; transition: background .15s; }
.ho-row:last-child { border-bottom: 0; }
.ho-row:hover { background: var(--surface-2); }
.ho-row > .ico:last-child { color: var(--muted); flex: none; }
.ho-check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); display: inline-grid; place-items: center; flex: none; color: #fff; }
.ho-row.done .ho-check { background: var(--ok); border-color: var(--ok); }
.ho-row.done .ln-body b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.ho-prog { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 200px; min-width: 90px; }
.ho-prog .ln-bar { flex: 1; }
.ho-prog small { color: var(--muted); font-weight: 700; min-width: 38px; }
.ho-dots { display: inline-flex; align-items: center; gap: 0; flex: none; }
.ho-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.ho-dots i + i { margin-left: 18px; position: relative; }
.ho-dots i + i::before { content: ""; position: absolute; right: 100%; top: 6px; width: 18px; height: 2px; background: var(--line); }
.ho-dots i.on { background: var(--accent); }
.ho-cta { width: 100%; justify-content: center; }
.ho-cont-row { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; margin-top: 12px; }
.ho-cont-t { font-size: 1.1rem; }
.ho-cont-row .ho-prog { flex: 1 1 auto; max-width: 340px; margin-top: 6px; }
.ho-sheet { width: 120px; height: 80px; flex: none; border-radius: 10px; border: 1px solid var(--line); background: #FBF8F1; position: relative; display: grid; align-content: center; gap: 7px; padding: 0 10px; overflow: hidden; }
.ho-sheet i { display: block; height: 1px; background: #8B93A6; }
.ho-sheet i:nth-child(odd)::before { content: "♪"; position: absolute; margin: -9px 0 0 18px; font-size: 13px; color: #142036; }
.ho-sheet i:nth-child(3)::before { margin-left: 60px; }
.ho-sheet b { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.ho-cont-btn { flex: none; }
@media (max-width: 560px) { .ho-cont-btn { display: none; } .ho-sheet { width: 84px; height: 64px; } }
.ho-live { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ho-live .ln-body { flex: 1 1 200px; }
.ho-cells { display: flex; gap: 8px; }
.ho-cell { width: 44px; height: 50px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); text-align: center; font: 700 1.3rem var(--display); color: var(--ink); }
.ho-cell:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); }
@media (max-width: 560px) { .ho-cells { flex: 1 1 100%; } .ho-cell { flex: 1 1 0; width: 0; min-width: 0; } .ho-live .btn { flex: 1 1 100%; } }
.ho-sc-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 10px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ho-sc-row::-webkit-scrollbar { display: none; }
.ho-short { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 104px; padding: 14px 8px; border-radius: 16px; text-decoration: none; text-align: center; font-weight: 800; font-size: .9rem; scroll-snap-align: start; transition: transform .15s; }
.ho-short span { color: var(--ink); }
.ho-short:hover { transform: translateY(-2px); }
.ho-chest { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 16px; text-decoration: none; color: var(--ink); background: linear-gradient(100deg, #FFF4D6, var(--surface) 70%); border: 1.5px solid #F2C94C; }
.ho-chest img { width: 64px; height: auto; animation: wobble 2.4s ease-in-out infinite; }
.ho-chest span { display: grid; flex: 1; }
.ho-chest small { color: var(--muted); }
@keyframes wobble { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-7deg); } 80% { transform: rotate(6deg); } 85% { transform: rotate(-4deg); } 90% { transform: rotate(2deg); } }
:root[data-theme="dark"] .ho-chest { background: linear-gradient(100deg, #3A2E10, var(--surface) 70%); }
.ho-arena { text-decoration: none; color: inherit; display: grid; gap: 12px; }
.ho-arena-in { display: flex; align-items: center; gap: 18px; }
.ho-ring-wrap { position: relative; width: 128px; height: 128px; flex: none; }
.ho-ring { width: 100%; height: 100%; }
.ho-ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.ho-ring .bg { stroke: var(--surface-2); }
.ho-ring .fg { stroke: hsl(var(--ga-h, 222) 70% 48%); transition: stroke-dasharray .8s; }
.ho-ring-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ho-ring-txt b { font: 700 2.2rem/1 var(--display); color: hsl(var(--ga-h, 222) 70% 45%); }
.ho-ring-txt small { font-weight: 800; color: var(--ink); }
.ho-next { font: 700 1.6rem var(--display); }
.ho-league { text-decoration: none; color: inherit; display: grid; gap: 10px; }
.ho-league-t { display: inline-flex; align-items: center; gap: 10px; }
.ho-league-t span:last-child { display: grid; }
.ho-league-t b { font: 700 1.3rem var(--display); }
.ho-medal { font-size: 1.8rem; }
.ho-rank { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ho-rank li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.ho-rank li.is-me { background: var(--accent-soft); }
.ho-rank li.is-me .nm { color: var(--accent); font-weight: 800; }
.ho-rank .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ho-pos { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--surface-2); }
.ho-pos.p1 { background: #F5C33B; color: #5A3E00; } .ho-pos.p2 { background: #C9D1DD; color: #2C3646; } .ho-pos.p3 { background: #E3A26B; color: #4B2508; }

/* ---------- Aprender ---------- */
.ln-page { gap: 18px; }
.ln-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ln-seg::-webkit-scrollbar { display: none; }
.ln-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ln-seg button.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(35, 80, 216, .25); }
@media (max-width: 460px) { .ln-seg button { padding: 10px 8px; font-size: .86rem; gap: 5px; } .ln-seg button .ico { display: none; } }
.ln-body-wrap { gap: 14px; }
.ln-head { margin-top: 6px; }
.ln-head h2 { margin: 0; font-size: 1.4rem; }
.ln-h3 { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; }
.ln-list { padding: 4px 14px; display: grid; }
.ln-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.ln-row:last-child { border-bottom: 0; }
a.ln-row:hover .ln-body b { color: var(--accent); }
.ln-row.done .ln-num { background: var(--ok-soft); color: var(--ok); }
.ln-num { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: inline-grid; place-items: center; font: 700 1.1rem var(--display); color: var(--ink); flex: none; object-fit: cover; }
.ln-thumb { width: 64px; height: 48px; border-radius: 10px; background: #FBF8F1; border: 1px solid var(--line); display: inline-grid; place-items: center; color: #142036; flex: none; }
.ln-new { background: var(--accent-soft); color: var(--accent); }
.ln-grade { font: 700 1.2rem var(--display); }
.ln-grade.ok { color: var(--ok); } .ln-grade.bad { color: var(--bad); }
.ln-ok { display: flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 700; }
.ln-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.ln-group { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ln-group-ico { width: 84px; height: 84px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--accent) 22%, var(--surface))); color: var(--accent); }
.ln-group-body { display: grid; gap: 4px; min-width: 0; }
.ln-group-t { font: 700 1.25rem var(--display); }
.ln-teacher { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.ln-teacher > span:last-child { display: grid; line-height: 1.15; }
.ln-att { display: grid; justify-items: center; gap: 2px; border-left: 1px solid var(--line); padding-left: 14px; }
.ln-ring { width: 70px; height: 70px; }
.ln-ring circle { fill: none; stroke-width: 7; }
.ln-ring .bg { stroke: var(--surface-2); } .ln-ring .fg { stroke: var(--ok); stroke-linecap: round; }
.ln-ring text { font: 800 13px var(--body); fill: var(--ink); }
.ln-recent { grid-column: 1 / -1; }
.ln-recent summary { cursor: pointer; color: var(--muted); font-weight: 700; font-size: .9rem; }
@media (max-width: 480px) { .ln-group { grid-template-columns: auto minmax(0, 1fr); } .ln-group-ico { width: 60px; height: 60px; } .ln-att { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 10px; border: 0; padding: 0; } .ln-ring { width: 54px; height: 54px; } }
.ln-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ln-code .input { flex: 0 1 150px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.ln-progress { display: grid; gap: 8px; }
.ln-join { justify-self: start; }
.catch { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }

/* ---------- Practicar ---------- */
.pt-page { gap: 18px; }
.pt-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-radius: 22px; color: #fff; text-decoration: none;
  background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .18), transparent 40%), linear-gradient(135deg, #2D5BEA, #1E3FB5); box-shadow: 0 12px 28px rgba(35, 80, 216, .3); }
.pt-hero-l { display: grid; gap: 8px; flex: 1; min-width: 0; z-index: 1; }
.pt-hero-t { font: 700 clamp(1.6rem, 5vw, 2.1rem)/1.05 var(--display); }
.pt-hero-sub, .pt-hero-n { opacity: .92; }
.pt-hero-bar { display: block; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; max-width: 320px; }
.pt-hero-bar i { display: block; height: 100%; background: #4ADE80; border-radius: inherit; transition: width .8s; }
.pt-hero-r { display: grid; justify-items: end; gap: 14px; z-index: 1; }
.pt-hero-streak { font: 700 1.6rem var(--display); }
.pt-hero-btn { background: #fff; color: var(--accent); }
.pt-hero-note { position: absolute; right: 30%; top: 10px; opacity: .25; width: 90px; height: 90px; filter: brightness(3) grayscale(1); }
:root[data-theme="dark"] .pt-hero-btn { color: #1E3FB5; }
.pt-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pt-pills:empty { display: none; }
.pt-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.pt-pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pt-fam h2 { margin: 6px 0 0; font-size: 1.45rem; }
.pt-fam > p { margin: 2px 0 10px; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
@media (max-width: 600px) { .pt-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
.pt-card { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.pt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 32, 54, .08); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pt-card > .ico { color: var(--muted); flex: none; }
.pt-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pt-body b { font-weight: 800; line-height: 1.2; }
.pt-body small { color: var(--muted); font-size: .82rem; line-height: 1.25; }
.pt-body .pr-stat { color: var(--accent); font-weight: 700; }
.pt-midi.on { color: var(--ok) !important; font-weight: 800; }
@media (max-width: 600px) { .pt-card { flex-direction: column; align-items: flex-start; padding: 14px; gap: 10px; position: relative; } .pt-card > .ico { position: absolute; right: 12px; top: 14px; } }

/* ---------- Yo ---------- */
.yo-page { max-width: 760px; gap: 16px; }
.yo-head { display: flex; align-items: center; gap: 20px; }
.yo-head h1 { margin: 0; }
.yo-av { padding: 5px; border-radius: 50%; background: conic-gradient(#F5C33B, #FFF1B8, #E0A800, #F5C33B); display: inline-flex; box-shadow: 0 6px 18px rgba(224, 168, 0, .3); }
.yo-title { display: inline-block; margin: 6px 0; padding: 4px 12px; border-radius: 99px; background: #FFF4D6; color: #8A5A00; font-weight: 800; font-size: .9rem; }
.yo-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 16px 8px; }
.yo-stat { display: grid; gap: 2px; padding: 0 6px; }
.yo-stat + .yo-stat { border-left: 1px solid var(--line); }
.yo-stat-e { font-size: 1.5rem; }
.yo-stat b { font: 700 1.6rem var(--display); }
.yo-stat small { color: var(--muted); font-size: .8rem; }
.yo-list { padding: 4px 8px; display: grid; }
.yo-item { display: flex; align-items: center; gap: 14px; padding: 14px 8px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.yo-item:last-child { border-bottom: 0; }
.yo-item:hover { background: var(--surface-2); }
.yo-item-ico { color: var(--muted); display: inline-flex; }
.yo-item-t { flex: 1; font-weight: 700; }
.yo-item > .ico:last-child { color: var(--muted); }
.yo-item.danger, .yo-item.danger .yo-item-ico { color: var(--bad); }
.yo-switch { appearance: none; width: 46px; height: 26px; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.yo-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.yo-switch:checked { background: var(--accent); }
.yo-switch:checked::after { transform: translateX(20px); }
@media (max-width: 520px) { .yo-stats { grid-template-columns: 1fr 1fr; row-gap: 14px; } .yo-stat:nth-child(3) { border-left: 0; } .yo-head { flex-direction: column; text-align: center; } }

/* ---------- transiciones ---------- */
.tr-ov { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.tr-zoom { position: fixed; inset: auto; box-shadow: 0 20px 50px rgba(20, 32, 54, .18); }
.tr-page { display: grid; place-items: center; }
.tr-page img { width: min(78vw, 520px); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .25)); }
.tr-keys { display: grid; place-items: center; background: var(--surface); }
.tr-keys-strip { display: flex; width: min(92vw, 900px); height: min(30vw, 300px); }
.tr-keys-strip i { flex: 1; background: url('../media/ui/teclas.webp') 0 0 / 1500% 100% no-repeat; }
.tr-metro { display: grid; place-items: center; align-content: center; gap: 16px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(4px); }
.tr-metro-box { position: relative; width: min(40vw, 220px); }
.tr-metro-b { width: 100%; display: block; }
.tr-metro-p { position: absolute; left: 50%; top: 12%; width: 28%; margin-left: -14%; transform-origin: 50% 92%; }
.tr-metro-txt { font: 700 clamp(1.8rem, 6vw, 2.6rem) var(--display); color: var(--accent); }
.tr-curtain { overflow: hidden; }
.tr-cur { position: absolute; top: 0; height: 100%; width: 54%; object-fit: fill; }
.tr-cur.l { left: 0; } .tr-cur.r { right: 0; }
.tr-waves { display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.tr-waves img { width: min(40vw, 200px); z-index: 1; grid-area: 1 / 1; }
.tr-waves i { grid-area: 1 / 1; width: 160px; height: 160px; border-radius: 50%; border: 4px solid var(--accent); opacity: 0; animation: ring 0.9s ease-out infinite; }
.tr-waves i:nth-of-type(2) { animation-delay: .3s; } .tr-waves i:nth-of-type(3) { animation-delay: .6s; }
@keyframes ring { from { transform: scale(.6); opacity: .7; } to { transform: scale(2.2); opacity: 0; } }
.tr-loader { position: fixed; inset: 0; z-index: 150; display: grid; place-content: center; justify-items: center; gap: 10px; pointer-events: none; animation: fadein .2s; }
.tr-loader small { color: var(--muted); font-weight: 700; }
.tr-loader-staff { position: relative; width: 180px; height: 70px; display: grid; align-content: space-between; padding: 8px 0; }
.tr-loader-staff > i { display: block; height: 2px; background: color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 2px; }
.tr-mascot { position: absolute; left: 50%; bottom: 18px; width: 72px; height: 88px; margin-left: -36px; background: url('../media/ui/mascota.webp') 0 0 / 400% 100% no-repeat; animation: mascot-frames .7s steps(1) infinite, mascot-hop .7s ease-in-out infinite; }
@keyframes mascot-frames { 0% { background-position: 0 0; } 25% { background-position: 33.333% 0; } 50% { background-position: 66.666% 0; } 75% { background-position: 100% 0; } }
@keyframes mascot-hop { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-26px); } }
@keyframes fadein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ho-note, .ho-chest img, .tr-mascot, .stu-tab-ico.pop { animation: none !important; } }
@media print { .stu-tabs { display: none !important; } body.stu-on .student { padding: 0 !important; } }
.ho-hero > div { min-width: 0; flex: 1; }
.ho-page, .ln-page, .pt-page, .yo-page { min-width: 0; }
.student { overflow-x: clip; }
body.stu-on .student .wrap { grid-template-columns: minmax(0, 1fr); }

.ho-prog.in { max-width: 260px; margin-top: 4px; }
.ho-rank b { color: var(--ink); white-space: nowrap; }
@media (max-width: 460px) { .ln-seg { grid-auto-columns: auto; } .ln-seg button { padding: 10px 9px; font-size: .84rem; } }
@media (max-width: 560px) {
  .pt-hero { flex-wrap: wrap; padding: 20px; }
  .pt-hero-r { width: 100%; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .pt-hero-note { right: 6%; }
}

/* =====================================================================
   Arena (etapa 3): Progreso · Competir · Logros
   ===================================================================== */
.ar-head { margin-bottom: -4px; }
.ar-insts { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ar-insts button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 10px 14px; border-radius: 12px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; }
.ar-insts button.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(35, 80, 216, .25); }
.ar-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.ar-tabs button { padding: 12px; border: 0; background: none; font: inherit; font-weight: 800; color: var(--muted); cursor: pointer; position: relative; }
.ar-tabs button.on { color: var(--accent); }
.ar-tabs button.on::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); animation: grow .3s; }
@keyframes grow { from { transform: scaleX(0); } }
.ar-body { gap: 16px; }
.ar-body h2 { font-size: 1.3rem; margin: 0; }

/* tarjeta de la arena con paisaje */
.ar-hero { --c: hsl(var(--ga-h) 62% 42%); position: relative; overflow: hidden; border-radius: 22px; padding: 22px; display: grid; gap: 12px; color: #0F1B2D;
  background: linear-gradient(180deg, hsl(calc(var(--ga-h) - 10) 70% 88%) 0%, hsl(var(--ga-h) 55% 93%) 55%, hsl(calc(var(--ga-h) + 30) 45% 82%) 100%); border: 2px solid color-mix(in srgb, var(--c) 45%, transparent); }
.ar-hills { position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none; opacity: .55;
  background: radial-gradient(120% 70% at 15% 120%, hsl(calc(var(--ga-h) + 40) 40% 55%) 60%, transparent 61%), radial-gradient(110% 80% at 85% 130%, hsl(calc(var(--ga-h) + 20) 45% 48%) 60%, transparent 61%), radial-gradient(90% 60% at 50% 140%, hsl(var(--ga-h) 50% 40%) 60%, transparent 61%); }
.ar-hero > * { position: relative; }
.ar-hero-top { display: flex; align-items: center; gap: 16px; }
.ar-badge { width: 84px; height: 84px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 30%, hsl(var(--ga-h) 75% 58%), hsl(var(--ga-h) 70% 32%)); border: 5px solid #fff; box-shadow: 0 0 0 3px hsl(var(--ga-h) 60% 45%), 0 8px 18px rgba(0, 0, 0, .2); }
.ar-badge b { font: 700 2.6rem/1 var(--display); }
.ar-hero-t { flex: 1; min-width: 0; }
.ar-hero-t h2 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.1rem); color: #0F1B2D; }
.ar-hero-t p { margin: 0; color: #2E3B52; }
.ar-inst { color: #2E3B52; font-weight: 700; }
.ar-stars { display: grid; justify-items: center; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .85); flex: none; }
.ar-stars b { font: 700 1.3rem var(--display); }
.ar-stars.ok b { color: #157347; }
.ar-stars small { color: #5A6680; }
.ar-unlock { margin: 0; color: #2E3B52; font-weight: 600; }
.ar-prog { display: grid; gap: 6px; }
.ar-bar { height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .7); overflow: hidden; }
.ar-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2350D8, #4C7DFF); transition: width .8s; }
.ar-prog b { color: #1E3FB5; }
.ar-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ar-go { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 99px; background: #fff; color: #1E3FB5; font-weight: 800; text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.ar-go:hover { transform: translateY(-1px); }
.ar-msg { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .8); color: #142036; font-weight: 600; }
.ar-cert { color: #1E3FB5; font-weight: 800; text-decoration: none; padding: 8px 12px; border-radius: 99px; background: rgba(255, 255, 255, .6); }

/* cofres */
.ar-chest-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.ar-chest { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 10px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); font: inherit; color: var(--ink); text-align: center; overflow: hidden; }
.ar-chest img { width: 96px; height: 80px; object-fit: contain; }
.ar-chest img.gray { filter: grayscale(.9) opacity(.55); }
.ar-chest small { color: var(--muted); font-size: .8rem; }
.ar-chest-txt { display: grid; gap: 2px; }
.ar-chest.ready { cursor: pointer; border-color: #F2C94C; background: linear-gradient(180deg, #FFF6DA, var(--surface)); }
.ar-chest.ready img { animation: wobble 2.4s ease-in-out infinite; }
.ar-chest-emo { position: absolute; top: 8px; right: 10px; font-size: 1.1rem; }
.ar-chest-cta { margin-top: 4px; padding: 5px 12px; border-radius: 99px; background: #F5C33B; color: #4A3200; font-weight: 800; font-size: .8rem; }
.ar-chest.opening img { animation: shake .12s linear infinite; }
@keyframes shake { 0% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-3px); } 100% { transform: rotate(-6deg); } }
.ar-chest.open img { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.6); } }
.ar-chest.open .ar-chest-cta { display: none; }
.ar-burst { position: absolute; inset: 0; pointer-events: none; }
.ar-burst i { position: absolute; left: 50%; top: 40%; width: 8px; height: 8px; border-radius: 2px; background: #F5C33B; animation: burst 1s ease-out forwards; }
.ar-burst i:nth-child(3n) { background: #2350D8; } .ar-burst i:nth-child(3n+1) { background: #E0457B; }
.ar-burst i:nth-child(1) { --x: -70px; --y: -60px; } .ar-burst i:nth-child(2) { --x: 60px; --y: -70px; } .ar-burst i:nth-child(3) { --x: -50px; --y: 30px; } .ar-burst i:nth-child(4) { --x: 70px; --y: 20px; }
.ar-burst i:nth-child(5) { --x: 0; --y: -80px; } .ar-burst i:nth-child(6) { --x: -80px; --y: -10px; } .ar-burst i:nth-child(7) { --x: 80px; --y: -30px; } .ar-burst i:nth-child(8) { --x: 30px; --y: 50px; }
.ar-burst i:nth-child(9) { --x: -30px; --y: -90px; } .ar-burst i:nth-child(10) { --x: 40px; --y: -100px; } .ar-burst i:nth-child(11) { --x: -60px; --y: 60px; } .ar-burst i:nth-child(12) { --x: 60px; --y: 60px; }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(200deg); opacity: 0; } }

/* camino de arenas */
.ar-map-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 10px; }
@media (max-width: 760px) { .ar-map-in { grid-template-columns: minmax(0, 1fr); } .ar-info { order: -1; } }
.ar-path-wrap { border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #DDE9FF, #E8F6EC 60%, #D7EFD9); max-height: 560px; overflow-y: auto; }
:root[data-theme="dark"] .ar-path-wrap { background: linear-gradient(180deg, #1A2442, #15291F); }
.ar-path { width: 100%; display: block; }
.ar-road { fill: none; stroke: #C9D3EA; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 14; }
.ar-road.done { stroke: #2350D8; stroke-dasharray: none; stroke-width: 6; }
.ar-node { cursor: pointer; outline: none; }
.ar-dot { fill: #fff; stroke: #B6C2DA; stroke-width: 3; }
.ar-node.past .ar-dot { fill: hsl(var(--ga-h) 65% 45%); stroke: #fff; }
.ar-node.now .ar-dot { fill: hsl(var(--ga-h) 70% 45%); stroke: #fff; stroke-width: 4; }
.ar-halo { fill: hsl(var(--ga-h) 80% 60% / .35); animation: halo 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes halo { 50% { transform: scale(1.25); opacity: .4; } }
.ar-num { font: 800 13px var(--body); fill: #fff; }
.ar-node.next .ar-num { font-size: 12px; }
.ar-lab { font: 700 14px var(--display); fill: #142036; }
.ar-bpm { font: 600 11px var(--body); fill: #5A6680; }
:root[data-theme="dark"] .ar-lab { fill: #E5EAF6; } :root[data-theme="dark"] .ar-bpm { fill: #98A4C0; }
.ar-node.sel .ar-dot { stroke: #F5B400; stroke-width: 4; }
.ar-node:focus-visible .ar-dot { stroke: var(--accent); stroke-width: 5; }
.ar-info { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: var(--surface-2); position: sticky; top: 80px; }
.ar-info-t { font: 700 1.3rem var(--display); }
.ar-info p { margin: 4px 0; }

/* certificados */
.ar-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ar-cert-card { position: relative; display: grid; justify-items: center; gap: 2px; padding: 16px 10px 34px; border-radius: 14px; text-decoration: none; color: #142036; text-align: center;
  background: linear-gradient(160deg, hsl(var(--ga-h) 70% 94%), hsl(var(--ga-h) 60% 85%)); border: 1px solid hsl(var(--ga-h) 50% 75%); }
.ar-cert-card b { font: 700 1.3rem var(--display); color: hsl(var(--ga-h) 60% 30%); }
.ar-seal { position: absolute; bottom: 8px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE08A, #D9A400); display: grid; place-items: center; font-size: 14px; color: #5A3E00; }

/* toques nuevos a las tarjetas viejas del juego dentro de la arena */
.ar-body .card { border-radius: 18px; }
.ar-body .ga-mission { border-radius: 14px; }
.ar-body .ga-ch-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.ar-body .ga-ch { border-radius: 14px; }
.ar-body .ga-rank li.me { background: var(--accent-soft); }
@media (max-width: 520px) {
  .ar-hero { padding: 18px; }
  .ar-hero-top { flex-wrap: wrap; }
  .ar-badge { width: 66px; height: 66px; border-width: 4px; } .ar-badge b { font-size: 2rem; }
  .ar-stars { order: 3; flex-direction: row; display: flex; gap: 8px; align-items: baseline; width: 100%; justify-content: center; }
  .ar-insts button { flex: 0 0 auto; }
}

/* =====================================================================
   Yo (etapa 4): perfil completo
   ===================================================================== */
.yo-page { max-width: 820px; gap: 16px; }
.yo-hero { position: relative; border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); padding-bottom: 18px; }
.yo-cover { height: 150px; }
.yo-id { display: grid; justify-items: center; text-align: center; gap: 6px; margin-top: -72px; padding: 0 16px; position: relative; }
.yo-id h1 { margin: 6px 0 0; font-size: clamp(1.7rem, 5vw, 2.2rem); }
.yo-av-ring { position: relative; padding: 6px; border-radius: 50%; border: 0; cursor: pointer; background: var(--surface); box-shadow: 0 0 0 4px var(--fr, var(--accent)), 0 10px 24px rgba(20, 32, 54, .2); }
.yo-av-ring .stu-av { display: grid; }
.frame-bronce { --fr: #CD7F32; } .frame-plata { --fr: #B9C2CF; } .frame-oro { --fr: #F5C33B; } .frame-esmeralda { --fr: #2EAD6B; } .frame-rubi { --fr: #D9365A; }
.yo-av-ring.frame-arcoiris { box-shadow: 0 10px 24px rgba(20, 32, 54, .2); background: conic-gradient(#F5C33B, #E0457B, #7C3AED, #2350D8, #0E8A86, #F5C33B); }
.yo-cam { position: absolute; left: 6px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; border: 3px solid var(--surface); }
.yo-arena { position: absolute; right: -6px; bottom: 0; display: grid; justify-items: center; padding: 4px 8px 5px; border-radius: 14px; color: #fff; background: radial-gradient(circle at 35% 30%, hsl(var(--ga-h) 75% 58%), hsl(var(--ga-h) 70% 32%)); border: 3px solid var(--surface); line-height: 1; }
.yo-arena b { font: 700 1.3rem var(--display); }
.yo-arena small { font-size: .62rem; font-weight: 800; }
.yo-about { margin: 0; font-style: italic; color: var(--muted); }
.yo-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.yo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 700; font-size: .88rem; }
.yo-stats5, .yo-stats4 { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; padding: 14px 6px; }
.yo-stats4 { grid-template-columns: repeat(4, 1fr); }
.yo-stats5 .yo-stat b, .yo-stats4 .yo-stat b { font-size: 1.35rem; }
@media (max-width: 520px) { .yo-stats5 .yo-stat small, .yo-stats4 .yo-stat small { font-size: .7rem; } .yo-stats5 .yo-stat-e { font-size: 1.2rem; } .yo-stats4 { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } }
.yo-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.yo-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; font-size: .92rem; }
.yo-tabs button.on { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 460px) { .yo-tabs button .ico { display: none; } .yo-tabs button { font-size: .8rem; padding: 10px 2px; } }
.yo-body { gap: 14px; }
.yo-body h2 { margin: 0; font-size: 1.35rem; }
.yo-kv { display: grid; grid-template-columns: auto 130px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.yo-kv:last-child { border-bottom: 0; }
.yo-kv-ico { color: var(--muted); display: inline-flex; }
.yo-kv-v { padding: 6px 12px; border-radius: 10px; background: var(--surface-2); }
.yo-kv-v.it { font-style: italic; }
@media (max-width: 460px) { .yo-kv { grid-template-columns: auto minmax(0, 1fr); } .yo-kv-v { grid-column: 2; } }
.yo-empty { text-align: center; display: grid; justify-items: center; gap: 8px; color: var(--muted); }
.yo-big-emo { font-size: 3rem; margin: 0; }
.yo-goal-mini { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.yo-goal-emo { font-size: 1.6rem; width: 40px; text-align: center; flex: none; }
.yo-edit { width: 100%; justify-content: center; }
.yo-vis { text-align: center; margin: -6px 0 0; }
.yo-new { width: 100%; justify-content: center; }
.yo-goal { position: relative; display: flex; gap: 14px; align-items: flex-start; border-left: 5px solid var(--accent); overflow: hidden; }
.yo-goal.done { border-left-color: var(--ok); }
.yo-goal-big { font-size: 2.6rem; line-height: 1; flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--surface-2); }
.yo-goal-body { display: grid; gap: 6px; flex: 1; min-width: 0; }
.yo-goal-t { font: 700 1.15rem var(--display); }
.yo-goal .ho-prog { flex: none; max-width: 360px; }
.yo-auto { justify-self: start; }
.yo-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.yo-steps input { accent-color: var(--ok); width: 17px; height: 17px; vertical-align: -3px; }
.yo-note { padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: .92rem; }
.yo-stamp { position: absolute; right: 14px; top: 46%; transform: rotate(-12deg); padding: 6px 14px; border: 3px solid var(--ok); border-radius: 12px; color: var(--ok); font: 700 1.1rem var(--display); background: color-mix(in srgb, var(--surface) 80%, transparent); animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stamp { from { transform: rotate(-12deg) scale(2); opacity: 0; } }
.yo-menu { position: relative; }
.yo-menu summary { list-style: none; cursor: pointer; padding: 2px 8px; border-radius: 8px; color: var(--muted); font-weight: 800; }
.yo-menu summary::-webkit-details-marker { display: none; }
.yo-menu-in { position: absolute; right: 0; top: 100%; z-index: 5; display: grid; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.yo-menu-in button { padding: 10px 14px; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.yo-menu-in button:hover { background: var(--surface-2); }
.yo-menu-in button.danger { color: var(--bad); }
.yo-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.yo-icons button { width: 46px; height: 46px; font-size: 1.5rem; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.yo-icons button.on { border-color: var(--accent); background: var(--accent-soft); }
.yo-covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.yo-cover-opt { height: 64px; border-radius: 12px; border: 3px solid transparent; cursor: pointer; display: grid; place-items: center; color: #fff; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.yo-cover-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface) inset; }
.yo-cover-opt.locked { filter: saturate(.5) brightness(.8); }
.yo-cover-opt span { display: grid; justify-items: center; font-size: 1.1rem; }
.yo-cover-opt small { font-size: .65rem; }
.yo-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); cursor: pointer; }
.yo-radio.on { border-color: var(--accent); background: var(--accent-soft); }
.yo-radio span { display: grid; }
.yo-radio input { accent-color: var(--accent); margin-top: 4px; }
.yo-moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.yo-moods button { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); font: inherit; cursor: pointer; }
.yo-moods button span { font-size: 1.9rem; line-height: 1; transition: transform .15s; }
.yo-moods button small { font-size: .74rem; color: var(--muted); font-weight: 700; }
.yo-moods button.on { border-color: var(--ok); background: var(--ok-soft); }
.yo-moods button.on span { transform: scale(1.18); }
.yo-journal { background-image: repeating-linear-gradient(transparent 0 27px, color-mix(in srgb, var(--accent) 12%, transparent) 27px 28px); line-height: 28px; }
.yo-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.yo-tags button, .yo-tags span { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .8rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.yo-tags span { cursor: default; background: var(--surface-2); }
.yo-tags button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.yo-share { gap: 10px; cursor: pointer; }
.yo-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.yo-timeline::before { content: ""; position: absolute; left: 58px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.yo-th { display: grid; grid-template-columns: 40px 40px minmax(0, 1fr); gap: 10px; align-items: start; }
.yo-th-date { display: grid; justify-items: center; line-height: 1.1; color: var(--muted); }
.yo-th-date b { font: 700 1.3rem var(--display); color: var(--ink); }
.yo-th-face { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: var(--surface); border: 2px solid var(--line); position: relative; z-index: 1; }
.yo-th.m5 .yo-th-face, .yo-th.m4 .yo-th-face { border-color: var(--ok); } .yo-th.m1 .yo-th-face, .yo-th.m2 .yo-th-face { border-color: var(--bad); }
.yo-th-body { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; display: grid; gap: 6px; }
.yo-th-body p { margin: 0; white-space: pre-wrap; }
.yo-arenas { display: grid; gap: 10px; }
.yo-ar { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; text-decoration: none; color: inherit; background: linear-gradient(100deg, hsl(var(--ga-h) 70% 94%), var(--surface) 70%); border: 1px solid var(--line); }
.yo-ar > span:nth-child(2) { display: grid; flex: 1; }
.yo-ar-n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 1.4rem var(--display); background: radial-gradient(circle at 35% 30%, hsl(var(--ga-h) 75% 58%), hsl(var(--ga-h) 70% 32%)); }
:root[data-theme="dark"] .yo-ar { background: var(--surface-2); }
.yo-recs { list-style: none; margin: 0; padding: 0; display: grid; }
.yo-recs li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.yo-recs li:last-child { border-bottom: 0; }
.yo-rec { font: 700 1.2rem var(--display); color: var(--accent); }
.yo-photo-dlg { justify-items: center; }
.yo-crop-wrap { width: min(280px, 70vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 20px rgba(0, 0, 0, .15); touch-action: none; }
.yo-crop { width: 100%; height: 100%; cursor: grab; display: block; }
.yo-photo-dlg input[type=range] { width: 200px; accent-color: var(--accent); }
.ar-to-yo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.ga-pod-av { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 3px var(--fr, transparent); }
.ga-rank li .stu-av { margin-right: 4px; }
.tp-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; position: relative; padding-top: 50px; }
.tp-cover { position: absolute; top: 0; left: 0; right: 0; height: 70px; border-radius: 14px; }
.tp-photo { position: relative; width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid var(--surface); box-shadow: 0 6px 14px rgba(0, 0, 0, .15); display: grid; place-items: center; font: 700 2.4rem var(--display); background: var(--accent-soft); color: var(--accent); }
.tp-photo.hidden-photo { filter: blur(8px) grayscale(1); }
.tp-head > .stack { position: relative; padding-top: 24px; }
.tp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tp-goal, .tp-th { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); }
.tp-goal.done { background: var(--ok-soft); }
.tp-goal-e, .tp-th-e { font-size: 1.8rem; }
.tp-th p { margin: 0; white-space: pre-wrap; }
.tp-card .row .input { flex: 1; min-width: 0; }
/* Ajustes de Yo en celular */
.yo-goal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.yo-goal-head .yo-goal-t { min-width: 0; overflow-wrap: anywhere; }
.yo-goal-head .yo-menu { flex: none; }
.yo-goal .ho-prog { width: 100%; }
.yo-auto { white-space: normal; max-width: 100%; }
@media (max-width: 520px) {
  .yo-goal { gap: 10px; }
  .yo-goal-big { width: 44px; height: 44px; font-size: 2rem; }
  .yo-stats5 { padding: 12px 2px; }
  .yo-stats5 .yo-stat { padding: 0 2px; min-width: 0; }
  .yo-stats5 .yo-stat b { font-size: 1.15rem; }
  .yo-stats5 .yo-stat small { font-size: .6rem; line-height: 1.2; letter-spacing: -.01em; }
}

/* =================== Celebraciones (subir de arena, cofres) =================== */
.cb-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; overflow: hidden auto;
  background: radial-gradient(circle at 50% 35%, rgba(35, 80, 216, .35), rgba(8, 14, 32, .78) 70%); backdrop-filter: blur(3px); animation: cb-in .25s ease-out; }
@keyframes cb-in { from { opacity: 0; } }
.cb-card { position: relative; z-index: 1; width: min(420px, 100%); background: var(--surface); color: var(--ink); border-radius: 28px; padding: 22px 20px 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); text-align: center; display: grid; gap: 12px; margin: auto; }
.cb-arena { background: linear-gradient(180deg, hsl(var(--ga-h) 90% 96%) 0%, var(--surface) 46%); }
.cb-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); }
.cb-stage { position: relative; height: 210px; display: grid; place-items: center; margin: -6px auto 0; width: 100%; border: 0; background: none; padding: 0; color: inherit; }
.cb-tap { cursor: pointer; }
.cb-glow { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--ga-h, 45) 100% 70% / .55), transparent 65%); animation: cb-pulse 2.4s ease-in-out infinite; }
@keyframes cb-pulse { 50% { transform: scale(1.12); opacity: .7; } }
.cb-portal { position: absolute; width: 220px; height: 220px; object-fit: contain; animation: cb-spin 14s linear infinite; }
@keyframes cb-spin { to { rotate: 360deg; } }
.cb-medal { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, hsl(var(--ga-h) 90% 72%), hsl(var(--ga-h) 80% 42%) 70%); border: 5px solid #fff;
  box-shadow: 0 0 0 4px hsl(var(--ga-h) 80% 55% / .45), 0 10px 26px rgba(0, 0, 0, .3); }
.cb-medal b { font: 700 3rem/1 var(--display); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.cb-title { font: 700 1.55rem/1.15 var(--display); margin: 0; display: grid; }
.cb-name { font-size: 2.3rem; color: hsl(var(--ga-h, 222) 75% 45%); }
.cb-sub { margin: -4px 0 0; color: var(--muted); font-weight: 600; }
.cb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cb-tiles.n1 { grid-template-columns: minmax(0, 1fr); max-width: 220px; margin: 0 auto; width: 100%; }
.cb-tiles.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-tile { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.cb-tile-ico { font-size: 1.6rem; line-height: 1; }
.cb-tile b { font: 700 1.2rem/1.15 var(--display); overflow-wrap: anywhere; }
.cb-tile small { color: var(--muted); font-size: .78rem; line-height: 1.2; }
.cb-unlock { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 14px; border-radius: 16px; background: var(--accent-soft); }
.cb-unlock span { font-size: 1.6rem; }
.cb-unlock p { margin: 0; font-size: .92rem; }
.cb-actions { display: grid; gap: 8px; }
.cb-actions .btn { justify-content: center; border-radius: 999px; }
.cb-rain { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.cb-rain i { position: absolute; display: block; }
.cb-note { width: 34px; height: 30px; background: url(../media/ui/notas.webp) 0 0 / 400% 300% no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.cb-strip { width: 9px; height: 18px; border-radius: 3px; }
/* Cofre */
.cb-chestcard { background: linear-gradient(180deg, #FFF6DA 0%, var(--surface) 50%); }
.cb-chest { position: relative; z-index: 1; width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .25)); }
.cb-rays { position: absolute; width: 300px; height: 300px; opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 102, .55) 0 10deg, transparent 10deg 24deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); }
.cb-chestcard.is-open .cb-rays { animation: cb-spin 12s linear infinite; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cb-arena { background: linear-gradient(180deg, hsl(var(--ga-h) 45% 20%) 0%, var(--surface) 50%); } :root:not([data-theme="light"]) .cb-chestcard { background: linear-gradient(180deg, #3A2E12 0%, var(--surface) 50%); } :root:not([data-theme="light"]) .cb-name { color: hsl(var(--ga-h, 222) 90% 72%); } :root:not([data-theme="light"]) .cb-medal { border-color: #E5EAF6; } }
:root[data-theme="dark"] .cb-arena { background: linear-gradient(180deg, hsl(var(--ga-h) 45% 20%) 0%, var(--surface) 50%); }
:root[data-theme="dark"] .cb-chestcard { background: linear-gradient(180deg, #3A2E12 0%, var(--surface) 50%); }
:root[data-theme="dark"] .cb-name { color: hsl(var(--ga-h, 222) 90% 72%); }
@media (max-width: 380px) { .cb-stage { height: 170px; } .cb-portal { width: 180px; height: 180px; } .cb-name { font-size: 1.9rem; } }
@media (max-height: 700px) { .cb-stage { height: 160px; } .cb-portal { width: 170px; height: 170px; } .cb-medal { width: 78px; height: 78px; } .cb-medal b { font-size: 2.4rem; } .cb-chest { width: 150px; height: 150px; } }
@media (prefers-reduced-motion: reduce) { .cb-portal, .cb-glow, .cb-chestcard.is-open .cb-rays { animation: none; } .cb-chestcard.is-open .cb-rays { opacity: 1; } }
.cb-tiles.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-tile b.long { font-size: .95rem; overflow-wrap: normal; }

/* =================== Pantalla de entrada =================== */
.entry { --en-blue: #2350D8; min-height: 100vh; min-height: 100dvh; background: linear-gradient(180deg, #EAF1FF 0%, var(--bg) 60%); position: relative; overflow-x: clip; }
.en-theme { position: absolute; top: 12px; right: 12px; z-index: 5; }
.en-theme .icon-btn { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(6px); }
.en-hero { position: relative; height: 300px; display: grid; justify-items: center; align-content: start; padding-top: 34px; }
.en-home { position: relative; z-index: 2; text-decoration: none; color: inherit; }
.en-logo { display: grid; justify-items: center; gap: 6px; }
.en-logo-mark { width: 84px; height: 84px; filter: drop-shadow(0 10px 18px rgba(35, 80, 216, .3)); animation: en-bob 4s ease-in-out infinite; }
.en-logo-bg { fill: var(--en-blue); }
.en-logo-black { fill: #10204F; }
@keyframes en-bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.en-logo-name { display: grid; justify-items: center; line-height: 1; }
.en-logo-name b { font: 700 2.5rem/1 var(--display); color: #0F1B3D; letter-spacing: -.01em; }
.en-logo-name small { font: 700 .82rem/1 var(--display); color: var(--en-blue); letter-spacing: .55em; text-transform: uppercase; margin-top: 6px; padding-left: .55em; }
.en-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.en-waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
.en-waves .w1 { fill: #C9DAFF; } .en-waves .w2 { fill: #9DBBFF; opacity: .75; } .en-waves .w3 { fill: #6F98F5; opacity: .55; }
.en-note { position: absolute; width: 38px; height: 34px; background: url(../media/ui/notas.webp) 0 0 / 400% 300% no-repeat; opacity: .85; animation: en-float 5s ease-in-out infinite; }
@keyframes en-float { 50% { transform: translateY(-12px) rotate(8deg); } }
.en-spark { position: absolute; color: #fff; font-size: 1.3rem; text-shadow: 0 0 8px #9DBBFF; animation: en-twinkle 2.6s ease-in-out infinite; }
.en-spark.s1 { left: 74%; top: 12%; color: var(--en-blue); } .en-spark.s2 { left: 10%; top: 58%; animation-delay: -1.2s; }
@keyframes en-twinkle { 50% { opacity: .3; transform: scale(.7); } }
.en-keys { position: absolute; width: 330px; left: 50%; bottom: 6px; transform: translateX(-38%) rotate(-12deg) skewX(-6deg); filter: drop-shadow(0 12px 16px rgba(16, 32, 79, .25)); opacity: .97; }
.en-main { position: relative; z-index: 3; width: min(440px, 100% - 32px); margin: -48px auto 0; padding-bottom: 32px; display: grid; gap: 14px; }
.en-card { background: var(--surface); border-radius: 26px; padding: 24px 20px 22px; box-shadow: 0 18px 50px rgba(20, 32, 54, .12); border: 1px solid var(--line); }
.en-title { text-align: center; font: 700 1.75rem/1.2 var(--display); margin-bottom: 14px; }
.en-form { display: grid; gap: 8px; }
.en-label { font-weight: 700; color: var(--muted); margin-top: 6px; }
.en-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.en-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.en-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 14px 0; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.en-pin { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.en-pin-box { height: 62px; border-radius: 16px; background: var(--surface-2); border: 1.5px solid var(--line); display: grid; place-items: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.en-pin-box::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--line); transition: background .15s, transform .15s; }
.en-pin-box.full::after { background: var(--ink); transform: scale(1.15); }
.en-pin-box.full { transform: translateY(-2px); }
.en-pin-box.cur { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.en-pin-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; color: transparent; caret-color: transparent; cursor: pointer; }
.en-hint { color: var(--muted); font-size: .85rem; text-align: center; }
.en-err:empty { display: none; }
.en-go { margin-top: 6px; border-radius: 999px; justify-content: center; min-height: 56px; font-size: 1.15rem; gap: 8px; }
.en-go.busy { opacity: .7; }
.en-first { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px 16px; border-radius: 22px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.en-first b { font: 700 1.15rem var(--display); }
.en-first small { color: var(--muted); margin-bottom: 8px; }
.en-pill { border-radius: 999px; justify-content: center; gap: 10px; border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); background: var(--surface); }
.en-alt { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; font-weight: 700; text-decoration: none; border-radius: 12px; }
.en-alt:hover { background: var(--accent-soft); }
/* Computadora: escena a la izquierda y tarjeta a la derecha */
@media (min-width: 900px) {
  .entry { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); align-items: center; background: var(--bg); }
  .en-hero { height: 100vh; height: 100dvh; align-content: center; padding: 0 0 120px; background: linear-gradient(180deg, #EAF1FF, #D6E4FF); }
  .en-logo-mark { width: 120px; height: 120px; }
  .en-logo-name b { font-size: 3.6rem; }
  .en-logo-name small { font-size: 1.05rem; }
  .en-keys { width: 560px; bottom: 40px; }
  .en-waves { height: 50%; }
  .en-note { width: 56px; height: 50px; }
  .en-main { margin: 0 auto; padding: 40px 0; }
}
/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entry { --en-blue: #7EA2FF; background: linear-gradient(180deg, #121B36 0%, var(--bg) 60%); }
  :root:not([data-theme="light"]) .en-logo-name b { color: #F1F4FB; }
  :root:not([data-theme="light"]) .en-logo-bg { fill: #2350D8; }
  :root:not([data-theme="light"]) .en-waves .w1 { fill: #1B2A55; } :root:not([data-theme="light"]) .en-waves .w2 { fill: #22397A; } :root:not([data-theme="light"]) .en-waves .w3 { fill: #2B4BA0; }
  :root:not([data-theme="light"]) .en-card { box-shadow: 0 18px 50px rgba(0, 0, 0, .4); }
}
@media (prefers-color-scheme: dark) and (min-width: 900px) { :root:not([data-theme="light"]) .en-hero { background: linear-gradient(180deg, #121B36, #0F1730); } }
:root[data-theme="dark"] .entry { --en-blue: #7EA2FF; background: linear-gradient(180deg, #121B36 0%, var(--bg) 60%); }
:root[data-theme="dark"] .en-logo-name b { color: #F1F4FB; }
:root[data-theme="dark"] .en-logo-bg { fill: #2350D8; }
:root[data-theme="dark"] .en-waves .w1 { fill: #1B2A55; } :root[data-theme="dark"] .en-waves .w2 { fill: #22397A; } :root[data-theme="dark"] .en-waves .w3 { fill: #2B4BA0; }
:root[data-theme="dark"] .en-card { box-shadow: 0 18px 50px rgba(0, 0, 0, .4); }
@media (min-width: 900px) { :root[data-theme="dark"] .entry { background: var(--bg); } :root[data-theme="dark"] .en-hero { background: linear-gradient(180deg, #121B36, #0F1730); } }
@media (prefers-reduced-motion: reduce) { .en-logo-mark, .en-note, .en-spark { animation: none; } }
.en-reg h1 { text-align: center; font: 700 1.6rem/1.2 var(--display); }
.en-reg .lead { text-align: center; color: var(--muted); margin: 0; }
.en-reg .code-input { width: 100%; }
.en-hello { display: grid; gap: 10px; }
.en-hello .en-title { margin-bottom: 4px; }
.en-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 700; margin: 16px 0 6px; }
.en-or::before, .en-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.en-code { display: grid; gap: 6px; }
.en-code-row { display: flex; gap: 8px; }
.en-code-row .code-input { flex: 1; min-width: 0; width: auto; font-size: 1.5rem; padding: 10px 12px; }
.en-code-row .btn { border-radius: 16px; min-width: 60px; justify-content: center; }
/* Modo oscuro: tarjeta de la arena y cofres */
:root[data-theme="dark"] .ar-hero { color: #EEF2FB; border-color: color-mix(in srgb, hsl(var(--ga-h) 70% 55%) 50%, transparent);
  background: linear-gradient(180deg, hsl(calc(var(--ga-h) - 10) 45% 24%) 0%, hsl(var(--ga-h) 40% 17%) 55%, hsl(calc(var(--ga-h) + 30) 35% 20%) 100%); }
:root[data-theme="dark"] .ar-hills { opacity: .35; }
:root[data-theme="dark"] .ar-hero-t h2 { color: #F4F7FD; }
:root[data-theme="dark"] .ar-hero-t p, :root[data-theme="dark"] .ar-unlock { color: #C3CEE6; }
:root[data-theme="dark"] .ar-stars, :root[data-theme="dark"] .ar-msg { background: rgba(10, 16, 34, .55); color: #E5EAF6; }
:root[data-theme="dark"] .ar-stars small { color: #A9B5D1; }
:root[data-theme="dark"] .ar-stars.ok b { color: #4ADE80; }
:root[data-theme="dark"] .ar-bar { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .ar-bar i { background: linear-gradient(90deg, #4C7DFF, #7EA2FF); }
:root[data-theme="dark"] .ar-prog b { color: #9DB8FF; }
:root[data-theme="dark"] .ar-go { background: #7EA2FF; color: #0D1220; }
:root[data-theme="dark"] .ar-cert { background: rgba(255, 255, 255, .12); color: #C9D8FF; }
:root[data-theme="dark"] .ar-chest.ready { background: linear-gradient(180deg, #3A2E12, var(--surface)); border-color: #B8922E; }
:root[data-theme="dark"] .ar-chest img.gray { opacity: .55; }
:root[data-theme="dark"] .ar-inst { color: #C3CEE6; }

/* =================== Avisos del maestro =================== */
.ho-slot:empty { display: none; }
.nw-card { display: grid; gap: 10px; }
.nw-card.has-new { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.nw-list { display: grid; gap: 8px; }
.nw-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; border-left: 5px solid var(--nw-c, var(--accent)); }
button.nw-item { cursor: pointer; align-items: center; }
button.nw-item:hover { background: var(--surface-2); }
.nw-item.unread { background: color-mix(in srgb, var(--nw-c, var(--accent)) 7%, var(--surface)); }
.nw-info { --nw-c: #2350D8; } .nw-imp { --nw-c: #E0640B; } .nw-ev { --nw-c: #0E8A86; } .nw-fel { --nw-c: #C2378A; }
.nw-emo { font-size: 1.6rem; line-height: 1.2; flex: none; }
.nw-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nw-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nw-top b { font: 700 1.05rem var(--display); }
.nw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nw-c, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nw-c, var(--accent)) 25%, transparent); }
.nw-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.nw-text.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.nw-item.full .nw-text { font-size: 1rem; }
.nw-event { color: var(--nw-c, var(--accent)); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
:root[data-theme="dark"] .nw-info { --nw-c: #7EA2FF; } :root[data-theme="dark"] .nw-imp { --nw-c: #F5A35B; } :root[data-theme="dark"] .nw-ev { --nw-c: #4FD1C5; } :root[data-theme="dark"] .nw-fel { --nw-c: #F48FB1; }

/* Maestro: avisos */
.an-card { display: grid; gap: 10px; }
.an-card .nw-item { border-width: 0 0 0 5px; padding: 4px 12px; border-radius: 0; background: none; }
.an-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.an-reads { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; font-size: .9rem; }
.an-reads .ln-bar { width: 90px; }
.an-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.an-kind { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; cursor: pointer; }
.an-kind.on { border-color: var(--nw-c); background: color-mix(in srgb, var(--nw-c) 12%, var(--surface)); }
.an-groups { display: grid; gap: 6px; }
.an-group { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.an-group small { margin-left: auto; }
.an-pin { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.an-tpls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.an-tpls.center { justify-content: center; margin-top: 8px; }
.an-tpls .chip { min-height: 34px; font-size: .9rem; padding: 4px 10px; border-radius: 99px; cursor: pointer; }

/* =================== Recordatorios =================== */
.pu-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(100deg, var(--accent-soft), var(--surface) 70%); }
.pu-bell { font-size: 2rem; animation: pu-ring 2.6s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes pu-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 85% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
.pu-txt { flex: 1 1 220px; display: grid; gap: 2px; }
.pu-txt b { font: 700 1.1rem var(--display); }
.pu-btns { display: flex; gap: 8px; }
.pu-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.pu-main > span { display: grid; }
.pu-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pu-opt > span:last-child { display: grid; }
.pu-opt input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.pu-emo { font-size: 1.4rem; }
.pu-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .pu-bell { animation: none; } }

/* =================== Tareas libres =================== */
.nw-hw { --nw-c: #7C4DDB; } :root[data-theme="dark"] .nw-hw { --nw-c: #B197FC; }
button.ln-row, button.ho-row { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hw-row.done .ln-body b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); color: var(--muted); }
.hw-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hw-dlg-t { font: 700 1.4rem var(--display); margin: 0; }
.hw-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: hw; }
.hw-steps li { counter-increment: hw; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.hw-steps li::before { content: counter(hw); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #7C4DDB; color: #fff; font-weight: 800; font-size: .85rem; }
.hw-done summary { cursor: pointer; font-weight: 700; color: var(--muted); margin: 6px 0; }
.hw-body { white-space: pre-line; margin: 6px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.an-status { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.an-st-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
button.an-reads { border: 0; background: none; font: inherit; cursor: pointer; padding: 4px 0; flex-wrap: wrap; }
button.an-reads u { color: var(--accent); }
/* Recuadro "¿Te dieron un código?": texto arriba y campo + botón en su propia fila (no se encima en el celular) */
.ln-code { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.ln-code .ln-body { min-width: 0; }
.ln-code .input { grid-column: 1 / 2; grid-row: 2; min-width: 0; width: 100%; }
.ln-code .input { grid-column: 1 / -1; }
.ln-code > .btn { grid-column: 1 / -1; justify-content: center; }
@media (min-width: 560px) {
  .ln-code { grid-template-columns: auto minmax(0, 1fr) 170px auto; }
  .ln-code .input { grid-column: 3; grid-row: 1; }
  .ln-code > .btn { grid-column: 4; grid-row: 1; }
}
/* Publicar clase */
.lp-h { font: 700 1.05rem var(--display); margin: 6px 0 0; }
.lp-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lp-acts li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.lp-acts li .badge { margin-left: auto; }
/* Cortina de cambio de sección (Inicio, Aprender, Practicar, Arena, Yo) */
.tr-swipe { display: grid; place-items: center; z-index: 210; transform: translateX(105%);
  background: linear-gradient(135deg, var(--sw-a), var(--sw-b)); box-shadow: 0 0 60px rgba(0, 0, 0, .25); }
.tr-sw-in { display: grid; justify-items: center; gap: 10px; color: #fff; opacity: 0; }
.tr-sw-in svg { width: 64px; height: 64px; stroke-width: 1.6; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.tr-sw-in b { font: 700 2.2rem var(--display); letter-spacing: .02em; text-shadow: 0 3px 12px rgba(0, 0, 0, .25); }
.tr-sw-inicio { --sw-a: #2350D8; --sw-b: #5B8CFF; }
.tr-sw-aprender { --sw-a: #0E8A86; --sw-b: #2BB3A3; }
.tr-sw-practicar { --sw-a: #E0640B; --sw-b: #F5B83D; }
.tr-sw-arena { --sw-a: #7C4DDB; --sw-b: #C2378A; }
.tr-sw-yo { --sw-a: #142036; --sw-b: #3A4D7A; }

/* =================== Pantalla de carga al abrir =================== */
#splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 70% at 50% 0%, #EAF1FF 0%, #C9DAFF 55%, #9DBBFF 100%); color: #0F1B3D; transition: opacity .5s ease, transform .5s ease; }
#splash.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.sp-in { display: grid; justify-items: center; gap: 14px; width: min(420px, 100%); text-align: center; }
.sp-logo { width: 96px; height: 96px; filter: drop-shadow(0 12px 22px rgba(35, 80, 216, .35)); animation: sp-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes sp-pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.sp-name { display: grid; justify-items: center; line-height: 1; animation: sp-up .6s .15s both; }
.sp-name b { font: 700 2.6rem var(--display); letter-spacing: -.01em; }
.sp-name small { font: 700 .85rem var(--display); letter-spacing: .55em; text-transform: uppercase; color: #2350D8; margin-top: 6px; padding-left: .55em; }
@keyframes sp-up { from { transform: translateY(14px); opacity: 0; } }
.sp-staff { position: relative; width: 200px; height: 64px; display: grid; align-content: space-between; padding: 6px 0; margin-top: 4px; }
.sp-staff > i { display: block; height: 2px; border-radius: 2px; background: rgba(35, 80, 216, .35); }
.sp-mascot { position: absolute; left: 50%; bottom: 14px; width: 62px; height: 76px; margin-left: -31px; background: url('../media/ui/mascota.webp') 0 0 / 400% 100% no-repeat;
  animation: mascot-frames .7s steps(1) infinite, mascot-hop .7s ease-in-out infinite; }
.sp-msg { margin: 6px 0 0; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .78); box-shadow: 0 12px 30px rgba(16, 32, 79, .14); backdrop-filter: blur(6px);
  display: grid; gap: 8px; animation: sp-up .7s .35s both; }
.sp-msg figcaption { font: 700 .8rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: #2350D8; }
.sp-msg blockquote { margin: 0; font: 600 1.15rem/1.45 var(--display); }
.sp-msg cite { font-style: normal; font-weight: 800; color: #5A6680; }
.sp-msg cite:empty { display: none; }
.sp-dots { display: flex; gap: 8px; margin-top: 6px; }
.sp-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2350D8; animation: sp-dot 1s ease-in-out infinite; }
.sp-dots i:nth-child(2) { animation-delay: .15s; } .sp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sp-dot { 50% { transform: translateY(-7px); opacity: .5; } }
:root[data-theme="dark"] #splash { background: radial-gradient(120% 70% at 50% 0%, #1B2A55 0%, #121B36 55%, #0D1220 100%); color: #F1F4FB; }
:root[data-theme="dark"] .sp-msg { background: rgba(21, 28, 46, .85); }
:root[data-theme="dark"] .sp-msg cite { color: #A9B5D1; }
:root[data-theme="dark"] .sp-name small, :root[data-theme="dark"] .sp-msg figcaption { color: #7EA2FF; }
@media (prefers-reduced-motion: reduce) { .sp-logo, .sp-name, .sp-msg, .sp-mascot, .sp-dots i { animation: none !important; } }
/* Portada: que nada empuje la tarjeta fuera de la pantalla (el campo del código tenía un ancho mínimo) */
.en-main, .en-hello, .en-code, .en-form { grid-template-columns: minmax(0, 1fr); }
.en-card, .en-first { min-width: 0; }
.en-code-row .code-input { width: 100%; min-width: 0; font-size: 1.35rem; letter-spacing: .14em; }
.en-hello .btn, .en-go { max-width: 100%; white-space: normal; text-align: center; }