/* Academia Inglés — tema oscuro y calmado (mismo estilo que Academia PsiKip). */
[hidden] { display: none !important; }
:root {
  --escala: 1;
  --fondo: #0f1417;
  --fondo-2: #141b1f;
  --panel: #182126;
  --panel-2: #1e2a30;
  --borde: #2a3840;
  --texto: #e6ece9;
  --texto-2: #a9b8b3;
  --tenue: #73858c;
  --acento: #8fd3bd;       /* menta tranquila */
  --acento-2: #5fb39a;
  --acento-txt: #0d201a;
  --amarillo: #f2d272;     /* botón Completar (guiño a jscamp) */
  --ambar: #f0b866;        /* "casi" — nunca rojo agresivo */
  --ambar-fondo: #2c2416;
  --verde-fondo: #15291f;
  --azul: #8ab4f8;
  --mono: "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radio: 12px;
  --sidebar: 300px;
  font-size: calc(16px * var(--escala));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--sans); line-height: 1.6; }
a { color: var(--acento); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.suave { color: var(--texto-2); font-size: .92em; }
.sin-animaciones *, .sin-animaciones *::before, .sin-animaciones *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; } }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar); flex: 0 0 var(--sidebar); background: var(--fondo-2); border-right: 1px solid var(--borde); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 20; }
.sin-sidebar .sidebar { display: none; }
.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.brand-link { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--texto); }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); color: var(--acento); font-family: Georgia, serif; font-size: 22px; border: 1px solid var(--borde); }
.brand-link strong { display: block; font-family: var(--mono); letter-spacing: .5px; font-size: 15px; color: var(--amarillo); }
.brand-link small { display: block; font-family: var(--mono); color: var(--texto-2); font-size: 11px; margin-top: -3px; }
.search { position: relative; padding: 6px 14px 10px; }
.search input { width: 100%; background: var(--panel); border: 1px solid var(--borde); color: var(--texto); padding: 9px 12px; border-radius: 10px; font-size: .9rem; }
.search-results { position: absolute; left: 14px; right: -260px; top: 48px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 40px #0009; max-height: 70vh; overflow: auto; z-index: 50; padding: 6px; }
.res { display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--texto); align-items: flex-start; }
.res:hover, .res:focus { background: var(--panel-2); }
.res small { display: block; color: var(--texto-2); font-size: .8rem; }
.res-tipo { font-size: 18px; }
.nav-modulos { flex: 1; overflow-y: auto; padding: 4px 8px 12px; scrollbar-width: thin; }
.mod { border-bottom: 1px solid #ffffff08; }
.mod-cabeza { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 8px; cursor: pointer; text-align: left; border-radius: 8px; }
.mod-cabeza:hover { background: var(--panel); }
.mod-icono { width: 30px; height: 30px; border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; font-size: 16px; flex: 0 0 30px; }
.mod-textos { flex: 1; min-width: 0; }
.mod-textos small { display: block; font-family: var(--mono); font-size: 10px; color: var(--tenue); letter-spacing: .8px; }
.mod-textos span { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-prog { font-family: var(--mono); font-size: 11px; color: var(--texto-2); }
.mod-flecha { color: var(--tenue); transition: transform .2s; }
.mod.abierto .mod-flecha { transform: rotate(180deg); }
.mod-lecciones { list-style: none; margin: 0; padding: 0 0 8px; display: none; }
.mod.abierto .mod-lecciones { display: block; }
.lec { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 14px; text-decoration: none; color: var(--texto-2); font-family: var(--mono); font-size: 12.5px; border-radius: 8px; }
.lec:hover { background: var(--panel); color: var(--texto); }
.lec.actual { background: var(--panel-2); color: var(--texto); box-shadow: inset 3px 0 0 var(--amarillo); }
.lec-titulo { flex: 1; }
.lec-tag { font-size: 11px; }
.circulo { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--tenue); flex: 0 0 16px; position: relative; }
.circulo.empezada { border-color: var(--amarillo); background: conic-gradient(var(--amarillo) 0 50%, transparent 50% 100%); }
.circulo.hecha { border-color: var(--amarillo); background: var(--amarillo); }
.circulo.hecha::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #1a1a1a; font-size: 10px; font-weight: 800; }
.sidebar-foot { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 14px; border-top: 1px solid var(--borde); }
.sidebar-foot a { color: var(--texto-2); text-decoration: none; font-size: .9rem; padding: 5px 8px; border-radius: 8px; }
.sidebar-foot a:hover { background: var(--panel); color: var(--texto); }

.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); min-height: 58px; }
.topbar-centro { flex: 1; display: flex; align-items: center; gap: 12px; justify-content: center; min-width: 0; }
.tb-textos { min-width: 0; text-align: left; }
.tb-textos small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--tenue); letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-titulo { font-family: var(--mono); font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-nav { color: var(--texto-2); text-decoration: none; font-size: 24px; padding: 0 8px; line-height: 1; }
.tb-nav[aria-disabled] { opacity: .25; pointer-events: none; }
.topbar-stats { display: flex; gap: 8px; align-items: center; }
.stat { font-family: var(--mono); font-size: 12.5px; background: var(--panel); border: 1px solid var(--borde); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.icon-btn { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; width: 38px; height: 38px; cursor: pointer; font-size: 17px; }
.only-mobile { display: none; }
.vista { padding: 26px 28px 80px; outline: none; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); padding: 9px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .92rem; text-decoration: none; transition: transform .08s, filter .15s; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .35; cursor: default; }
.btn-primario { background: var(--acento); color: var(--acento-txt); border-color: var(--acento); }
.btn-suave { background: transparent; }
.btn-completar { background: var(--amarillo); color: #1d1a0e; border-color: var(--amarillo); font-family: var(--mono); font-size: 13px; }
.btn-completada { background: transparent; color: var(--amarillo); border-color: #f2d27255; font-family: var(--mono); font-size: 13px; }
.btn-pausa { padding: 5px 11px; font-size: 12.5px; font-family: var(--mono); border-radius: 999px; }
.btn-mini { padding: 5px 10px; font-size: 12.5px; }
.btn-yt { background: #e5383b; border-color: #e5383b; color: #fff; }
.grande { padding: 12px 20px; font-size: 1rem; }
.fila-botones { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Inicio ---------- */
.inicio, .pagina { max-width: 1040px; margin: 0 auto; }
.saludo { font-family: var(--mono); font-size: 1.9rem; margin: 6px 0 4px; }
.sub { color: var(--texto-2); margin: 0 0 22px; max-width: 70ch; }
.continuar { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, #1b2c2a, #1a2329); border: 1px solid #8fd3bd44; border-radius: 16px; padding: 22px 24px; text-decoration: none; color: var(--texto); margin-bottom: 22px; }
.continuar:hover { border-color: var(--acento); }
.continuar small { font-family: var(--mono); color: var(--acento); letter-spacing: 1px; font-size: 11px; }
.continuar-titulo { font-size: 1.35rem; font-weight: 700; margin: 2px 0; }
.continuar-flecha { width: 52px; height: 52px; border-radius: 50%; background: var(--amarillo); color: #222; display: grid; place-items: center; font-size: 20px; flex: 0 0 52px; }
.tarjetas-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 22px; }
.tstat { display: flex; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 16px; }
.tstat .big { font-size: 30px; }
.anillo { --p: 0; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--acento) calc(var(--p) * 1%), var(--panel-2) 0); display: grid; place-items: center; flex: 0 0 58px; }
.anillo span { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; }
.barra { display: block; height: 7px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin: 6px 0 4px; min-width: 80px; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--acento-2), var(--acento)); border-radius: 99px; }
.como { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 18px; margin-bottom: 24px; }
.como summary { cursor: pointer; font-weight: 700; }
.como li { margin: 6px 0; }
.h2-mapa { font-family: var(--mono); font-size: 1.1rem; margin: 10px 0 12px; }
.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mapa-mod { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 14px; text-decoration: none; color: var(--texto); }
.mapa-mod:hover { border-color: var(--acento); }
.mapa-mod.completo { border-color: #f2d27266; }
.mapa-icono { font-size: 24px; }
.mapa-mod small { font-family: var(--mono); color: var(--tenue); font-size: 10px; letter-spacing: .8px; }
.mapa-mod b { font-family: var(--mono); font-size: .95rem; }

/* ---------- Lección ---------- */
.leccion { max-width: 860px; margin: 0 auto; }
.video-bloque { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; margin-bottom: 22px; }
.video-marco { aspect-ratio: 16 / 9; background: #000; position: relative; width: min(100%, calc(50vh * 16 / 9)); margin: 0 auto; }
.video-bloque { background-color: #000; }
.video-info, .video-nota { background: var(--panel); }
.video-marco video, .video-marco iframe { width: 100%; height: 100%; display: block; border: 0; }
.video-aviso { position: absolute; left: 8px; bottom: 8px; right: 8px; background: #000c; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; pointer-events: none; }
.video-bloque.oculto .video-marco { display: none; }
.video-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.video-canal { display: flex; gap: 10px; align-items: center; min-width: 0; }
.video-canal small { display: block; color: var(--texto-2); font-size: 12px; }
.yt-badge { width: 30px; height: 30px; border-radius: 50%; background: #e5383b; color: #fff; display: grid; place-items: center; font-size: 12px; flex: 0 0 30px; }
.video-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.video-nota { padding: 8px 14px 12px; color: var(--texto-2); font-size: .9rem; border-top: 1px solid var(--borde); }
.lec-cabeza h1 { font-family: var(--mono); color: var(--amarillo); font-size: 1.75rem; margin: 0 0 6px; line-height: 1.25; }
.lec-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--texto-2); font-size: .9rem; margin-bottom: 14px; }
.pasos-barra { display: flex; gap: 4px; margin-bottom: 6px; }
.seg { flex: 1; height: 8px; border-radius: 99px; background: var(--panel-2); border: 0; cursor: pointer; padding: 0; }
.seg.es-ej { background: #2b3a3a; }
.seg.visto { background: var(--acento-2); }
.seg.actual { background: var(--amarillo); }
.pasos-texto { font-family: var(--mono); font-size: 12px; color: var(--texto-2); }
.ver-todo { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--tenue); margin-top: 4px; cursor: pointer; }
.tarjeta-zona { margin: 18px 0; display: flex; flex-direction: column; gap: 18px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 24px 28px; animation: entra .25s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tarjeta h2 { font-family: var(--mono); font-size: 1.2rem; margin: 0 0 12px; color: var(--texto); }
.tarjeta-sup { font-family: var(--mono); font-size: 11px; color: var(--tenue); letter-spacing: .6px; margin-bottom: 8px; text-transform: uppercase; }
.prosa { max-width: 70ch; font-size: 1.04rem; }
.prosa p { margin: 0 0 .9em; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1em; }
.prosa li { margin: .3em 0; }
.prosa strong { color: #fff; }
.prosa code, .ej-pregunta code, .fb-texto code, .opcion-texto code, .pareja code, dd code, .resumen code { font-family: var(--mono); background: #0c1215; border: 1px solid var(--borde); padding: 1px 6px; border-radius: 6px; font-size: .9em; color: var(--amarillo); }
.prosa blockquote { margin: 0 0 1em; padding: 10px 16px; background: #1b2730; border-left: 3px solid var(--azul); border-radius: 0 10px 10px 0; color: var(--texto); }
.prosa blockquote p:last-child { margin: 0; }
.prosa table { border-collapse: collapse; margin: 0 0 1em; font-size: .93rem; width: 100%; }
.prosa th, .prosa td { border: 1px solid var(--borde); padding: 7px 10px; text-align: left; vertical-align: top; }
.prosa th { background: var(--panel-2); font-family: var(--mono); font-size: .85rem; }
.prosa h3 { font-family: var(--mono); font-size: 1rem; color: var(--acento); margin: 1.2em 0 .5em; }
.prosa img { max-width: 100%; border-radius: 10px; }
.code-block { position: relative; margin: 0 0 1em; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: #0b1013; }
.code-block pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: .88rem; line-height: 1.55; }
.code-block code.hljs { background: transparent; padding: 0; }
.code-file { font-family: var(--mono); font-size: 11.5px; color: var(--texto-2); padding: 6px 12px; background: #121a1e; border-bottom: 1px solid var(--borde); }
.copiar { position: absolute; top: 6px; right: 6px; font-size: 11px; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 6px; padding: 2px 8px; cursor: pointer; opacity: .6; }
.code-file + .copiar { top: 34px; }
.copiar:hover { opacity: 1; }
.glosa { border-bottom: 1.5px dotted var(--acento); cursor: help; }
.tooltip { position: absolute; z-index: 100; max-width: 320px; background: #24323a; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; font-size: .88rem; box-shadow: 0 10px 30px #0008; }
.tooltip b { color: var(--acento); display: block; margin-bottom: 2px; }
.tarjeta-nav { display: flex; justify-content: space-between; gap: 10px; }
.tarjeta-nav .btn { min-width: 140px; padding: 12px 18px; }
.tarjeta-final { text-align: center; }
.final-emoji { font-size: 46px; }
.final-botones { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 14px; }
.resumen { background: var(--verde-fondo); border: 1px solid #8fd3bd33; padding: 10px 14px; border-radius: 10px; text-align: left; max-width: 60ch; margin: 10px auto; }
.hecho-grande { color: var(--amarillo); font-family: var(--mono); font-weight: 700; }
.aviso { background: var(--ambar-fondo); border: 1px solid #f0b86655; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }

/* ---------- Ejercicios ---------- */
.ejercicio { }
.ej-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ej-etiqueta { font-family: var(--mono); font-size: 12px; color: var(--acento); background: #8fd3bd14; border: 1px solid #8fd3bd33; padding: 3px 10px; border-radius: 99px; }
.ej-hecho { font-family: var(--mono); font-size: 12px; color: var(--amarillo); }
.ej-pregunta { font-size: 1.08rem; margin-bottom: 14px; }
.ej-pregunta p { margin: 0 0 .6em; }
.ej-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ej-feedback { margin-top: 14px; padding: 14px 16px; border-radius: 12px; animation: entra .2s; }
.ej-feedback.bien { background: var(--verde-fondo); border: 1px solid #8fd3bd55; }
.ej-feedback.casi { background: var(--ambar-fondo); border: 1px solid #f0b86655; }
.ej-feedback.info { background: #18242e; border: 1px solid #8ab4f855; }
.fb-titulo { font-weight: 700; margin-bottom: 4px; }
.fb-texto { color: var(--texto); margin-top: 6px; }
.fb-texto p { margin: 0 0 .5em; }
.fb-pista { margin-top: 8px; color: var(--texto); }
.ej-feedback .btn { margin-top: 10px; }
.ej-feedback pre { background: #0b1013; padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-family: var(--mono); font-size: .86rem; }
.xp-ganado { font-family: var(--mono); color: var(--amarillo); margin-left: 6px; }
.sacudir { animation: sacudir .35s; }
@keyframes sacudir { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.opciones { display: flex; flex-direction: column; gap: 8px; }
.opcion { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--panel-2); border: 1.5px solid var(--borde); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.opcion:hover { border-color: #8fd3bd88; }
.opcion.elegida { border-color: var(--acento); background: #1d3330; }
.opcion.correcta { border-color: var(--acento); background: var(--verde-fondo); }
.opcion.incorrecta { border-color: var(--ambar); background: var(--ambar-fondo); }
.opcion-letra { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--borde); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; flex: 0 0 28px; }
.opcion.elegida .opcion-letra { background: var(--acento); color: var(--acento-txt); border-color: var(--acento); }
.completar-codigo { background: #0b1013; border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; font-family: var(--mono); font-size: .92rem; line-height: 2.1; overflow-x: auto; white-space: pre; }
.hueco { font-family: var(--mono); font-size: .92rem; background: #1b262b; color: var(--amarillo); border: 0; border-bottom: 2px solid var(--acento); padding: 2px 6px; border-radius: 4px 4px 0 0; outline: none; }
.hueco:focus { background: #23343a; }
.hueco.h-bien { border-color: var(--acento); color: var(--acento); }
.hueco.h-mal { border-color: var(--ambar); color: var(--ambar); }
.banco { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); background: var(--panel-2); border: 1.5px solid var(--borde); border-bottom-width: 3px; border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.chip:hover { border-color: var(--acento); }
.orden-respuesta, .orden-disponibles { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; min-height: 54px; }
.orden-respuesta { background: #0b1013; border: 1.5px dashed var(--borde); margin-bottom: 10px; }
.orden-vacio { color: var(--tenue); font-size: .9rem; padding: 6px; }
.linea-codigo { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-family: var(--mono); font-size: .88rem; white-space: pre; overflow-x: auto; }
.linea-codigo:hover { border-color: var(--acento); }
.linea-codigo .num, .bug-linea .num { color: var(--tenue); font-size: 11px; min-width: 18px; }
.parejas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.pareja { background: var(--panel-2); border: 1.5px solid var(--borde); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; min-height: 46px; }
.pareja.sel { border-color: var(--amarillo); background: #2d2a1a; }
.pareja.emparejada { border-color: var(--acento); background: var(--verde-fondo); opacity: .75; cursor: default; }
.pareja.nop { border-color: var(--ambar); animation: sacudir .3s; }
.bug-codigo { background: #0b1013; border: 1px solid var(--borde); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; }
.bug-linea { display: flex; gap: 10px; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 8px; cursor: pointer; font-family: var(--mono); font-size: .88rem; white-space: pre; }
.bug-linea:hover { background: #1b262b; border-color: var(--borde); }
.bug-linea.bug-encontrado { background: var(--verde-fondo); border-color: var(--acento); }
.bug-linea.bug-no { background: var(--ambar-fondo); }
.reflexion { width: 100%; background: #0b1013; border: 1px solid var(--borde); color: var(--texto); border-radius: 10px; padding: 10px 12px; font: inherit; }

.code-zona { display: grid; grid-template-columns: 1fr; gap: 12px; }
.code-zona.con-vista { grid-template-columns: 1.15fr 1fr; }
.code-editor-wrap, .code-salida-wrap { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: #0b1013; display: flex; flex-direction: column; min-width: 0; }
.code-barra { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--texto-2); padding: 6px 12px; background: #121a1e; border-bottom: 1px solid var(--borde); }
.code-barra .archivo { color: var(--tenue); }
.code-editor .cm-editor { min-height: 180px; max-height: 460px; }
.code-editor .cm-editor.cm-focused { outline: none; }
.vista-previa { width: 100%; height: 240px; border: 0; background: #fff; }
.code-salida { padding: 10px 12px; min-height: 60px; max-height: 320px; overflow: auto; font-size: .9rem; }
.consola { margin: 0; font-family: var(--mono); font-size: .86rem; white-space: pre-wrap; color: #d6e2dd; }
.error-amable { color: var(--ambar); margin-top: 6px; font-size: .9rem; }
.tipo-error { color: var(--azul); margin: 4px 0; font-size: .9rem; }
.tipo-error small { color: var(--tenue); }
.pruebas-titulo { font-family: var(--mono); font-size: 12px; color: var(--tenue); margin: 12px 0 4px; }
.pruebas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pruebas li { font-size: .92rem; color: var(--texto-2); }
.pruebas li.p-ok { color: var(--acento); }
.pruebas li.p-no { color: var(--ambar); }
.p-icono { display: inline-block; width: 18px; font-weight: 700; }
.tabla-wrap { overflow-x: auto; }
.tabla-sql { border-collapse: collapse; font-family: var(--mono); font-size: .82rem; margin-bottom: 4px; }
.tabla-sql th, .tabla-sql td { border: 1px solid var(--borde); padding: 4px 8px; text-align: left; }
.tabla-sql th { background: var(--panel-2); color: var(--acento); }

/* ---------- Páginas ---------- */
.pagina h1 { font-family: var(--mono); color: var(--amarillo); }
.pagina h2 { font-family: var(--mono); font-size: 1.05rem; margin-top: 28px; }
.filtro { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--borde); color: var(--texto); padding: 10px 12px; border-radius: 10px; margin-bottom: 16px; }
.glosario-lista { display: grid; gap: 10px; }
.glosa-item { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px; }
.glosa-item dt { font-family: var(--mono); color: var(--acento); font-weight: 700; }
.glosa-item dt small { color: var(--tenue); font-weight: 400; }
.glosa-item dd { margin: 4px 0 0; }
.glosa-ej { color: var(--texto-2); font-size: .9rem; margin-top: 4px; }
.calendario { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 4px; }
.dia { background: var(--panel-2); border-radius: 3px; }
.dia.si { background: var(--acento-2); }
.por-modulo { display: grid; gap: 8px; }
.pm { display: grid; grid-template-columns: 260px 1fr 50px; gap: 12px; align-items: center; }
.ajustes .campo { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; max-width: 640px; }
.ajustes .campo > span { font-weight: 700; }
.ajustes .campo.check { flex-direction: row; align-items: center; }
.ajustes input:not([type=checkbox]):not([type=range]), .ajustes select { background: var(--panel-2); border: 1px solid var(--borde); color: var(--texto); padding: 8px 10px; border-radius: 8px; font: inherit; max-width: 320px; }
.ajustes pre { white-space: pre-wrap; font-size: 12px; color: var(--ambar); }

/* ---------- Pausa, toast, carga ---------- */
.overlay-pausa { position: fixed; inset: 0; background: #0b1013ee; z-index: 200; display: grid; place-items: center; animation: entra .3s; }
.pausa-caja { text-align: center; max-width: 440px; padding: 30px; }
.respira { width: 90px; height: 90px; margin: 0 auto 18px; border-radius: 50%; background: radial-gradient(circle, var(--acento) 0%, #8fd3bd33 70%); animation: respira 8s ease-in-out infinite; }
@keyframes respira { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.cargando { text-align: center; padding-top: 18vh; color: var(--texto-2); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(30px); background: #24323a; border: 1px solid var(--borde); color: var(--texto); padding: 11px 18px; border-radius: 12px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 300; max-width: 90vw; box-shadow: 0 10px 30px #0008; }
.toast.visible { opacity: 1; transform: translateX(-50%); }
.chispa { position: absolute; z-index: 400; pointer-events: none; color: var(--amarillo); animation: chispa 1s ease-out forwards; }
@keyframes chispa { to { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .code-zona.con-vista { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: 10px 0 40px #0008; }
  body.menu-abierto .sidebar { transform: none; display: flex; }
  .only-mobile { display: inline-block; }
  .topbar-stats .stat:nth-child(-n+2) { display: none; }
  .vista { padding: 18px 14px 70px; }
  .tarjeta { padding: 18px; }
  .search-results { right: 14px; }
  .pm { grid-template-columns: 1fr 1fr 40px; }
}
.ej-codigo-leer { background: #0b1013; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; font-family: var(--mono); font-size: .92rem; overflow-x: auto; }

/* ---------- Inglés: audio, vocabulario, diálogos ---------- */
.en { font-family: "Segoe UI", system-ui, sans-serif; letter-spacing: .1px; }
.ipa { font-family: "Charis SIL", "Doulos SIL", "Gentium Plus", "Segoe UI", "Lucida Sans Unicode", "Arial Unicode MS", serif; color: var(--azul); font-size: .92em; }
.say { display: inline; cursor: pointer; color: #cfe9df; background: #1a2d29; border: 1px solid #2f4a43; border-radius: 8px; padding: 1px 8px; white-space: normal; }
.say:hover { border-color: var(--acento); }
.say.sonando, .btn-escucha.sonando, .btn-audio.sonando { box-shadow: 0 0 0 3px #8fd3bd55; }
.btn-escucha { background: var(--panel-2); border: 1.5px solid var(--borde); border-radius: 12px; width: 44px; height: 44px; font-size: 20px; cursor: pointer; flex: 0 0 auto; }
.btn-escucha.mini { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
.btn-escucha.grande { width: 76px; height: 76px; font-size: 34px; border-radius: 20px; border-color: var(--acento-2); }
.btn-escucha:hover { border-color: var(--acento); }
.btn-audio { background: #1a2d29; border: 1.5px solid #2f4a43; color: #cfe9df; border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.btn-audio:hover { border-color: var(--acento); }
.ej-audio { margin-bottom: 10px; }
.frase-audio { display: flex; gap: 10px; align-items: center; margin: 8px 0; font-size: 1.1em; }
.frase-audio .btn-audio { padding: 4px 10px; }
.vocab-lista { display: grid; gap: 8px; }
.vocab-item { display: grid; grid-template-columns: auto 1fr 1fr; gap: 14px; align-items: center; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 12px; padding: 8px 12px; }
.vocab-en { font-size: 1.15em; font-weight: 600; }
.vocab-es { color: var(--texto-2); }
.srs-nota { margin-top: 10px; }
.nivel-cefr { background: #24324a; color: var(--azul); border-radius: 999px; padding: 0 10px; font-weight: 700; font-size: .85em; }
.dialogo { background: #10181c; border: 1px solid var(--borde); border-radius: 14px; padding: 12px; margin: 12px 0; display: grid; gap: 8px; }
.dlg-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.dlg-linea { display: flex; gap: 10px; align-items: flex-start; }
.dlg-quien { flex: 0 0 auto; min-width: 54px; font-weight: 700; font-size: .85em; padding-top: 3px; color: var(--acento); }
.voz-andrew .dlg-quien { color: var(--amarillo); } .voz-emma .dlg-quien { color: var(--azul); } .voz-brian .dlg-quien { color: #f1a7c9; }
.voz-andrew .say { background: #2b2717; border-color: #4a4224; color: #f4e7b8; }
.dlg-txt { display: grid; gap: 2px; }
.dlg-es { color: var(--texto-2); font-size: .9em; padding-left: 6px; }
.dlg-narr { color: var(--texto-2); font-style: italic; font-size: .92em; }
.es-prompt { font-size: 1.1em; background: var(--panel-2); border-left: 3px solid var(--amarillo); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.completar-texto { background: #0f1619; border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; font-size: 1.1rem; line-height: 2.3; }
.completar-texto .hueco { font-family: var(--sans); font-size: 1.05rem; }
.banco { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { font-family: var(--sans); }
.fichas-respuesta { min-height: 60px; border-bottom: 2px solid var(--borde); padding: 8px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.fichas-banco { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha { font-size: 1.05rem; background: var(--panel-2); border: 1.5px solid var(--borde); border-bottom-width: 3px; border-radius: 12px; padding: 7px 14px; cursor: pointer; }
.ficha:hover { border-color: var(--acento); }
.respuesta-texto { width: 100%; background: #0f1619; color: var(--texto); border: 1.5px solid var(--borde); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 1.08rem; resize: vertical; }
.respuesta-texto:focus { border-color: var(--acento); outline: none; }
.respuesta-texto.grande { min-height: 150px; }
.escucha { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.btn-escucha.lento { width: 52px; height: 52px; font-size: 22px; }
.dictado-marcas, .marcas { margin-top: 10px; font-size: 1.05em; line-height: 1.9; }
.w-bien { color: var(--acento); } .w-falta { color: var(--tenue); text-decoration: underline dotted; }
.hablar-modelo { text-align: center; background: #10181c; border: 1px solid var(--borde); border-radius: 14px; padding: 18px; display: grid; gap: 8px; justify-items: center; }
.frase-grande { font-size: 1.5em; font-weight: 600; }
.consejo { background: #1c2430; border-radius: 10px; padding: 8px 12px; font-size: .95em; text-align: left; }
.hablar-resultado, .grabacion { margin-top: 12px; background: var(--panel-2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.grabacion audio { width: 100%; }
.lectura { background: #10181c; border: 1px solid var(--borde); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.lectura h3 { margin: 0 0 8px; }
.lectura-texto { font-size: 1.12rem; line-height: 1.85; }
.lectura-ayuda { margin-top: 10px; color: var(--texto-2); }
.lectura-ayuda summary { cursor: pointer; }
.lectura-q { margin: 14px 0; }
.lq-pregunta { font-weight: 600; margin-bottom: 8px; }
.consigna { margin-bottom: 10px; }
.contador { margin: 6px 0 12px; }
.rubrica { display: grid; gap: 6px; background: var(--panel-2); border-radius: 12px; padding: 12px 14px; }
.rubrica label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.error-frase { display: flex; flex-wrap: wrap; gap: 8px; font-size: 1.15rem; }
.palabra { background: var(--panel-2); border: 1.5px solid var(--borde); border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.palabra:hover { border-color: var(--acento); }
.palabra.bug-encontrado { border-color: var(--acento); background: var(--verde-fondo); }
.palabra.bug-no { border-color: var(--ambar); }
.linea { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--panel-2); border: 1px solid var(--borde); border-radius: 10px; padding: 9px 12px; cursor: pointer; width: 100%; }
.linea:hover { border-color: var(--acento); }
.linea .num { color: var(--tenue); font-size: 12px; min-width: 18px; }
.orden-respuesta, .orden-disponibles { display: grid; gap: 6px; margin-bottom: 12px; }
.pildora { background: var(--amarillo); color: #241d05; border-radius: 999px; padding: 0 8px; font-size: .78em; font-weight: 700; margin-left: 4px; }
.tstat-link { text-decoration: none; color: inherit; }
.tstat-link:hover { border-color: var(--acento); }
/* Repaso */
.repaso .flashcard { background: #10181c; border: 1.5px solid var(--borde); border-radius: 20px; padding: 34px 20px; text-align: center; display: grid; gap: 16px; justify-items: center; margin: 16px 0; min-height: 230px; align-content: center; }
.fc-frente, .fc-reverso { display: grid; gap: 12px; justify-items: center; }
.fc-reverso { border-top: 1px dashed var(--borde); padding-top: 16px; width: 100%; }
.fc-en { font-size: 2em; font-weight: 700; }
.fc-es { font-size: 1.6em; }
.fc-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fc-q { display: grid; min-width: 110px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--borde); background: var(--panel-2); cursor: pointer; }
.fc-q small { color: var(--tenue); font-size: .75em; }
.fc-q.q1:hover { border-color: var(--ambar); } .fc-q.q3:hover { border-color: var(--amarillo); } .fc-q.q4:hover, .fc-q.q5:hover { border-color: var(--acento); }
.repaso-fin { text-align: center; padding: 30px 0; }
.mazo { margin-top: 26px; }
.mazo summary { cursor: pointer; font-weight: 600; }
.mazo-lista { display: grid; gap: 6px; margin-top: 10px; max-height: 420px; overflow: auto; }
.mazo-item { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 10px; align-items: center; background: var(--panel-2); border-radius: 10px; padding: 6px 10px; }
.tabla-ipa td, .tabla-ipa th { padding: 6px 10px; }
@media (max-width: 640px) { .vocab-item { grid-template-columns: auto 1fr; } .vocab-es { grid-column: 2; } .mazo-item { grid-template-columns: auto 1fr; } }

/* ---------- Perfiles ---------- */
.stat-perfil { text-decoration: none; color: var(--texto); display: inline-flex; gap: 4px; align-items: center; }
.stat-perfil:hover { border-color: var(--acento); }
.perfiles-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 10px 0 22px; }
.perfil-tarjeta { background: var(--panel); border: 1.5px solid var(--borde); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
.perfil-tarjeta.actual { border-color: var(--amarillo); }
.perfil-elegir { background: none; border: 0; cursor: pointer; display: grid; justify-items: center; gap: 4px; padding: 22px 12px 12px; color: var(--texto); }
.perfil-elegir:hover { background: var(--panel-2); }
.perfil-emoji { font-size: 52px; line-height: 1.1; }
.perfil-elegir b { font-size: 1.3rem; }
.perfil-elegir small { color: var(--texto-2); }
.perfil-usando { color: var(--amarillo) !important; font-family: var(--mono); }
.perfil-acciones { display: flex; justify-content: center; gap: 6px; padding: 0 10px 12px; }
.perfil-nuevo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.perfil-nuevo input, .perfil-nuevo select { background: var(--panel); border: 1px solid var(--borde); color: var(--texto); padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 16px; }
.perfil-nuevo input { flex: 1; min-width: 180px; }

/* ---------- Celular y tablet (táctil) ---------- */
.menu-fondo { display: none; }
button, a, .btn, .opcion, .ficha, .chip, .pareja, .palabra, .linea, [data-say] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.prosa table { display: block; overflow-x: auto; }
.completar-texto { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .sidebar { width: min(86vw, 340px); flex-basis: auto; height: 100vh; height: 100dvh; z-index: 60; visibility: hidden; transition: transform .22s, visibility 0s .22s; }
  .sin-sidebar .sidebar { display: flex; }
  body.menu-abierto .sidebar { visibility: visible; transition: transform .22s; }
  body.menu-abierto .menu-fondo { display: block; position: fixed; inset: 0; background: #000a; z-index: 55; }
  body.menu-abierto { overflow: hidden; }
  .lec { font-size: 15px; padding: 11px 10px 11px 14px; min-height: 46px; }
  .mod-cabeza { min-height: 52px; }
  .mod-textos span { font-size: 15px; white-space: normal; }
  .mod-textos small { font-size: 11px; }
  .sidebar-foot a { font-size: 1rem; padding: 10px 8px; }
  .search input { font-size: 16px; padding: 11px 12px; }
  .icon-btn { width: 44px; height: 44px; font-size: 20px; }
  .topbar { padding: 8px 10px; gap: 8px; padding-top: max(8px, env(safe-area-inset-top)); }
  .tb-titulo { font-size: 14px; }
  .tb-nav { font-size: 28px; padding: 6px 8px; }
  .perfil-nombre { display: none; }
  .btn { min-height: 44px; }
  .btn-mini { min-height: 40px; }
  .btn-pausa { min-height: 36px; }
  .tarjeta-nav { position: sticky; bottom: 0; background: var(--fondo); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); z-index: 5; }
  .tarjeta-nav .btn { min-width: 0; flex: 1; }
  .opcion { padding: 14px; min-height: 52px; }
  .ficha { font-size: 1.12rem; padding: 10px 16px; min-height: 46px; }
  .chip { padding: 10px 14px; min-height: 44px; }
  .pareja { min-height: 52px; padding: 12px; font-size: 1.02rem; overflow-wrap: anywhere; }
  .palabra { padding: 10px 14px; }
  .linea { padding: 12px; min-height: 48px; }
  .hueco { font-size: 16px !important; min-width: 70px; padding: 6px 8px; }
  .respuesta-texto, .reflexion, .filtro, .ajustes input, .ajustes select { font-size: 16px !important; }
  .continuar { padding: 18px; }
  .pm { grid-template-columns: 1fr 1fr 40px; }
  .video-marco { width: 100%; }
}
@media (max-width: 640px) {
  :root { font-size: calc(17px * var(--escala)); }
  .vista { padding: 14px 10px 90px; }
  .tarjeta { padding: 16px 14px; border-radius: 14px; }
  .saludo { font-size: 1.5rem; }
  .lec-cabeza h1 { font-size: 1.35rem; }
  .topbar-stats .stat:nth-child(3) { display: none; }
  .tb-textos small { display: none; }
  .tb-titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 1.25; }
  .tarjetas-stats { grid-template-columns: 1fr; }
  .mapa { grid-template-columns: 1fr 1fr; }
  .parejas { gap: 8px; }
  .completar-texto { font-size: 1.05rem; padding: 12px; line-height: 2.4; }
  .frase-grande { font-size: 1.25em; }
  .fc-en { font-size: 1.6em; }
  .fc-q { min-width: 0; flex: 1 1 40%; }
  .video-info { padding: 8px 10px; }
  .video-acciones { width: 100%; }
  .video-acciones .btn { flex: 1; }
  .dlg-linea { flex-direction: column; gap: 2px; }
  .ej-acciones .btn { flex: 1 1 auto; }
  .escucha .btn-escucha.grande { width: 68px; height: 68px; }
  .pm { grid-template-columns: 1fr; gap: 2px; }
  .perfiles-lista { grid-template-columns: 1fr 1fr; }
  .search-results { left: 8px; right: 8px; }
}
@media (max-width: 640px) { .topbar .btn-completar, .topbar .btn-completada { white-space: nowrap; min-height: 38px; padding: 6px 10px; font-size: 12px; } }
.topbar .btn-completar, .topbar .btn-completada { white-space: nowrap; }