/* Layout: columna centrada; filtros arriba, problemas como fichas de examen; solo la hoja de trabajo va cuadriculada */
:root{
  --bg:#f4f2ef; --paper:#fffefc; --grid:#ecdfd3; --ink:#26201c; --muted:#6b6159;
  --accent:#c2410c; --accent-soft:#fdeadb; --ok:#1d7a4a; --ok-soft:#e1f3e8; --bad:#b42318; --bad-soft:#fde4e1;
  --line:#e4dcd4; --pen:#1d4ed8;
  --f-display:"Zilla Slab", Georgia, "Times New Roman", serif;
  --f-body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#16120f; --paper:#201a16; --grid:#3a2c22; --ink:#f2ece6; --muted:#ab9f95;
  --accent:#ff9a52; --accent-soft:#45270f; --ok:#5fd394; --ok-soft:#173527; --bad:#ff8a7e; --bad-soft:#3d1f1d;
  --line:#3a3029; --pen:#86a8ff; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#16120f; --paper:#201a16; --grid:#3a2c22; --ink:#f2ece6; --muted:#ab9f95;
  --accent:#ff9a52; --accent-soft:#45270f; --ok:#5fd394; --ok-soft:#173527; --bad:#ff8a7e; --bad-soft:#3d1f1d;
  --line:#3a3029; --pen:#86a8ff; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:32px 56px}
.wrap{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:28px}

header{display:flex;flex-direction:column;gap:10px}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,6vw,2.9rem);line-height:1.05;margin:0;text-wrap:balance}
.lead{margin:0;color:var(--muted);max-width:60ch}

.score{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--f-mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.score b{color:var(--ink);font-weight:500}

.filters{display:flex;flex-direction:column;gap:12px;padding-block:16px;border-block:1px solid var(--line)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row .lbl{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:92px;flex:none}
.chip{font:500 14px/1 var(--f-body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 13px;cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.chip:focus-visible,.alt:focus-visible,.sol-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.list{display:flex;flex-direction:column;gap:20px}
.card{background:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.num{font-family:var(--f-display);font-size:1.25rem;font-weight:700;color:var(--ink)}
.tag{background:var(--accent-soft);color:var(--accent);padding:3px 8px;border-radius:4px}
.lvl{display:inline-flex;align-items:center;gap:6px}
.dots{display:inline-flex;gap:3px}.dots i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--muted)}
.dots i.on{background:var(--muted)}
.stmt{margin:0;font-size:1.05rem;overflow-x:auto;min-width:0}

.alts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}

.alt{display:flex;align-items:center;gap:10px;text-align:left;font:inherit;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:8px 12px;cursor:pointer;min-width:0;overflow-x:auto}
.alt:hover:not(:disabled){border-color:var(--accent)}
.alt .k{font-family:var(--f-mono);font-size:13px;color:var(--muted);flex:none}
.alt:disabled{cursor:default}
.alt.ok{background:var(--ok-soft);border-color:var(--ok)} .alt.ok .k{color:var(--ok)}
.alt.bad{background:var(--bad-soft);border-color:var(--bad)} .alt.bad .k{color:var(--bad)}
.verdict{font-size:14px;font-weight:600;margin:0}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--bad)}

.sol-btn{align-self:flex-start;font:500 14px var(--f-body);color:var(--accent);background:none;border:none;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sol{border-left:3px solid var(--accent);background:var(--paper);padding:12px 16px;display:flex;flex-direction:column;gap:8px;overflow-x:auto;min-width:0}
.sol p{margin:0}
.sol .ans{font-weight:600}

.pad{display:flex;flex-direction:column;gap:8px;min-width:0}
.pad-bar{display:flex;flex-wrap:wrap;gap:6px}
.tool{font:500 13px var(--f-body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:7px 11px;cursor:pointer}
.tool:hover{border-color:var(--accent)}
.tool[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pad-barbox{overflow:hidden}
.pad-area{--base:360px;position:relative;max-width:100%;border:1px dashed var(--muted);border-radius:6px;background-color:var(--paper);padding:12px 16px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;background-position:-1px -1px}
.pad-area.abierta{min-height:calc(var(--stmt,0px) + var(--base) + var(--extra,0px))}
.pad-area canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:none;z-index:2}
.pad-area.abierta canvas{display:block}
.pad-scroll{overflow-x:auto;overflow-y:hidden;border-radius:6px;max-width:100%}
.pad-aviso{margin:6px 0 0;font-size:12px;color:var(--muted)}
.pad-area.abierta{min-width:calc(100% + var(--extraw,0px))}
.pad-cur{position:absolute;left:0;top:0;width:28px;height:28px;z-index:3;pointer-events:none;opacity:0;transition:opacity .15s ease;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.pad-cur.on{opacity:1}
.pad-cur svg{display:block}
.pad-area .stmt{position:relative;margin:0;overflow-x:auto;overflow-y:hidden;padding-block:6px}
.pad-hint{margin:0;font-size:13px;color:var(--muted)}
.pad-sol{position:relative;display:none;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;color:var(--accent);font-size:1.1rem}
.pad-area.abierta .pad-sol{display:flex;margin:12px 0 120px}
.pad-area.abierta .pad-sol:empty{margin:0}
.pad-line{opacity:0;transform:translateY(4px);transition:opacity .9s ease,transform .9s ease;max-width:100%}
.pad-line.show{opacity:1;transform:none}
.pad-line.out{opacity:0;transition:opacity .3s ease}
.hint-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.sol-btn:disabled{opacity:.4;cursor:default;text-decoration:none}
.nota{margin:0;font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.pad-line{transition:none;transform:none}}
.classbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 20px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:6px}
.codeform{display:flex;flex-direction:column;gap:6px;min-width:0}
.codeform label{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.codefields{display:flex;gap:8px;min-width:0}
.field{font:500 15px var(--f-mono);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:9px 12px;min-width:0;width:170px}
#codeInput{text-transform:uppercase;letter-spacing:.06em}
.field.search{flex:1 1 220px;width:auto;font:400 15px var(--f-body)}
.btn{font:600 14px var(--f-body);color:var(--paper);background:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:disabled{opacity:.45;cursor:default}
.field:focus-visible,.btn:focus-visible,.pick input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.codemsg{margin:0;font-size:13px;color:var(--bad)}
.banner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding:14px 16px;border-radius:6px;background:var(--accent-soft);border:1px solid var(--accent)}
.banner b{font-family:var(--f-display);font-size:1.2rem;margin-right:10px}
.banner span{color:var(--muted);font-size:14px}
.pick{display:none;align-items:center;gap:6px;margin-left:auto;font:500 13px var(--f-body);color:var(--ink);cursor:pointer}
.docente .pick{display:inline-flex}
.pick input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.card.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.docente .wrap{padding-bottom:120px}
.teachbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper);border-top:2px solid var(--accent);
  padding-block:12px calc(12px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.teachbar .in{max-width:780px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.teachbar .count{font-weight:600;font-size:15px}
.codeout{font:700 1.3rem var(--f-mono);letter-spacing:.08em;color:var(--accent);user-select:all}
.brand{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px}
.logo{display:flex;align-items:baseline;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.75rem;line-height:1;color:var(--accent);letter-spacing:-.01em}
.logo small{font:500 12px var(--f-mono);color:var(--muted);letter-spacing:.04em}
.pts{display:flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--accent);border-radius:999px;background:var(--accent-soft)}
.pts .n{font:700 1.4rem var(--f-mono);color:var(--accent);font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.pts .l{font-size:13px;font-weight:600;color:var(--ink)}
.pts.pop{animation:pop .55s ease}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.floatpts{position:fixed;z-index:30;pointer-events:none;font:700 1.1rem var(--f-mono);color:var(--paper);background:var(--accent);
  padding:4px 11px;border-radius:999px;white-space:nowrap;transform:translate(-50%,0);animation:subir 1.3s ease-out forwards}
@keyframes subir{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.12)}100%{opacity:0;transform:translate(-50%,-72px) scale(1)}}
.chispa{position:fixed;z-index:29;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);pointer-events:none;animation:chispa .8s ease-out forwards}
@keyframes chispa{to{transform:translate(var(--dx),var(--dy));opacity:0}}
@media (prefers-reduced-motion:reduce){.floatpts{animation:none}.pts.pop{animation:none}.chispa{display:none}}
.headrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.pdfmsg{margin:0;font-size:13px;color:var(--muted)}
/* Superficie de impresión para el PDF: siempre blanca, fuera de pantalla */
.pdfsrc{position:fixed;left:-12000px;top:0;width:330px;background:#fff;color:#16120f;font-family:var(--f-body);font-size:15px;line-height:1.5}
.pdfej{padding:10px 4px 12px;border-bottom:1px solid #e4dcd4;background:#fff}
.pdfmeta{font-size:12px;color:#6b6159;margin-bottom:4px}
.pdfmeta b{font-size:15px;color:#c2410c;margin-right:6px}
.pdfstmt{margin-bottom:8px}
.pdfalts{display:flex;flex-wrap:wrap;gap:6px 28px}
.empty{color:var(--muted);text-align:center;padding:24px}
/* Arranque compacto: los ejercicios empiezan casi al inicio de la pantalla */
.wrap{gap:14px}
body{padding-block:16px 56px}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.topbar .logo{margin-right:auto;font-size:1.55rem}
.codeform{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
.codeform label{font-size:11px}
.codeform .field{width:120px;padding:7px 10px}
.codeform .btn{padding:7px 12px}
.pts{padding:5px 12px}
.bar2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.bar2 h1{font-size:1.35rem;line-height:1.2}
.bar2 .acts{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 14px}
.bar2 .sol-btn{font-size:13px}
.filters{gap:8px;padding-block:10px}
.field.search{width:100%;flex:none}
.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips .chip{flex:none;padding:6px 11px;font-size:13px}
.row .lbl{width:auto;min-width:52px;font-size:11px}
@media (max-width:600px){
  .codeform{order:3;width:100%}
  .codeform .field{flex:1 1 auto;width:auto}
  .bar2 .acts{margin-left:0;gap:4px 12px}
  .bar2 h1{font-size:1.2rem}
  .row .lbl{width:auto}
}
footer{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
footer p{margin:0 0 6px}
@media (max-width:480px){.card{padding:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:600px){
  .alts{gap:4px}
  .alt{flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 2px;text-align:center;overflow:hidden}
  .alt .k{font-size:11px}
  .card{padding:14px 12px;gap:8px}
  .meta{gap:4px 10px;font-size:11px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
  .meta .num{font-size:1.05rem}
  .meta .tag{padding:2px 6px;font-size:10.5px}
  .meta .dots{display:none}
  .stmt{font-size:.98rem;line-height:1.4}
  .stmt mjx-container[display="true"]{margin:.35em 0!important}
  .sol-btn{font-size:13px;padding:2px 0}
  .pad{gap:6px}
  .pad-bar{flex-wrap:wrap;gap:4px}
  .tool{padding:6px 7px;font-size:12px;flex:0 0 auto;white-space:nowrap}
  .tool.icon{padding:5px 6px}
  .pad-area{--base:240px;padding:8px 10px}
  .pad-sol{gap:5px;font-size:.95rem;line-height:1.2}
  .sol{padding:8px 12px;gap:4px;font-size:14px;line-height:1.45}
  .verdict{font-size:13px}
  .nota{font-size:12px}
}
.tool .sm{display:none}
.tool.icon{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px}
.tool.icon svg{display:block}
.pad-bar{align-items:stretch}
.esp{display:inline-flex;align-items:center;gap:4px;margin-left:2px}
.esp-l{font-size:13px;font-weight:500;color:var(--ink);margin-right:2px}
.tool.esp-b{min-width:34px;font-size:17px;line-height:1;padding:4px 8px;font-weight:600}
.tool:disabled{opacity:.4;cursor:default}
.tool:disabled:hover{border-color:var(--line)}
.pid{font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px;margin-left:auto}
.credito{margin:0;font-size:13px;color:var(--muted)}
.credito b{color:var(--ink);font-weight:600}
.credito a.otro{color:var(--accent);font-weight:600}
@media (max-width:600px){ .meta{flex-wrap:wrap;row-gap:4px} .pad-bar{gap:3px} .esp{gap:3px;margin-left:0} .esp-l{font-size:11.5px} .tool.esp-b{min-width:28px;padding:3px 5px} .tool.icon{padding:5px 5px} .pid{font-size:10px} }
@media (max-width:600px){ .tool .lg{display:none} .tool .sm{display:inline} .tool.icon{padding:5px 6px} }
/* Escritorio ancho: filtros a la izquierda y cada reto en dos columnas (hoja | alternativas y sugerencias) */
.izq,.der{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:600px){ .izq,.der{gap:8px} }
@media (min-width:1100px){
  .wrap{max-width:1240px}
  .cuerpo{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
  .filters{position:sticky;top:16px;border:1px solid var(--line);border-radius:6px;padding:14px;background:var(--paper);gap:12px}
  .filters .row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  .filters .chips{flex-wrap:wrap;overflow:visible}
  .filters .row .lbl{width:100%;min-width:0}
  .card.con-hoja{display:grid;grid-template-columns:minmax(0,1fr) 290px;column-gap:26px;row-gap:14px;align-items:start}
  .card.con-hoja > .meta{grid-column:1 / -1}
  .card.con-hoja .der{position:sticky;top:16px}
  .card.con-hoja .der .alts{grid-template-columns:1fr;gap:6px}
  .card.con-hoja .der .alt{padding:9px 14px}
  .cuerpo > .empty{grid-column:2}
}
/* Código de clase con el acceso para docentes, PDF con ícono y tabla de mejores puntajes */
.clase{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.clase > .sol-btn{font-size:12px}
.pdf-btn{display:inline-flex;align-items:center;gap:6px}
.pdf-btn svg{flex:none}
.lateral{display:flex;flex-direction:column;gap:14px;min-width:0}
.ranking{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:10px 14px}
.ranking summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--ink);list-style-position:inside}
.ranking summary .rk-tu{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
.ranking[open] summary{margin-bottom:10px}
.rk-tabs{display:flex;gap:6px;margin-bottom:8px}
.rk-tabs .chip{padding:5px 10px;font-size:12px}
.rk{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.rk th{text-align:left;font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:4px 4px;border-bottom:1px solid var(--line)}
.rk td{padding:5px 4px;border-bottom:1px solid var(--line)}
.rk td:first-child,.rk th:first-child{width:2.2em;color:var(--muted)}
.rk td:last-child,.rk th:last-child{text-align:right;font-family:var(--f-mono)}
.rk tr.top1 td:first-child{color:var(--accent);font-weight:700}
.rk tr.yo td{background:var(--accent-soft);font-weight:600;color:var(--ink)}
.rk tr.sep td{border-bottom:none;color:var(--muted);text-align:center;padding:2px}
.rk-nota{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
@media (max-width:600px){
  .clase{order:3;width:100%;align-items:stretch}
  .clase > .sol-btn{align-self:flex-start}
  .clase .codeform{width:100%;order:0}
  .pdf-btn .pdf-txt{display:none}
  .bar2{position:relative}
  .bar2 h1{padding-right:44px}
  .bar2 .acts{position:absolute;right:0;top:0;margin:0}
  .pdf-btn{padding:4px 6px;border:1px solid var(--line);border-radius:6px;text-decoration:none}
}
@media (min-width:1100px){
  .lateral{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
  .lateral .filters{position:static}
}
/* Cuenta del alumno junto a los puntos */
.cuenta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.usuario{display:flex;align-items:center;gap:8px;min-width:0}
.avatar{width:36px;height:36px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.usuario .txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.usuario .estado{font-size:12px;color:var(--muted)}
.usuario .sol-btn{font-size:12.5px;padding:0;text-align:left}
.loginmsg{margin:0;font-size:13px;color:var(--muted)}
.otras{margin:0;font-size:13px;color:var(--muted)}
.panel{position:fixed;inset:0;z-index:40;background:rgba(20,14,10,.45);display:flex;justify-content:center;align-items:flex-start;overflow:auto;
  padding-block:max(24px,env(safe-area-inset-top,0px)) 24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.panel-in{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;width:100%;max-width:680px;padding:18px;display:flex;flex-direction:column;gap:14px;margin-top:4vh}
.panel-cab{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-cab h2{margin:0;font-family:var(--f-display);font-size:1.35rem}
.col-grupo h3{margin:0 0 6px;font-size:15px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.col-grupo h3 span{font-weight:400;color:var(--muted);font-size:13px}
.col-barra{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:8px}
.col-barra i{display:block;height:100%;background:var(--accent)}
.col-tabla{overflow-x:auto}
.col-tabla .rk td:first-child,.col-tabla .rk th:first-child{width:auto;color:var(--ink);font-family:var(--f-mono);white-space:nowrap}
.col-vacia{margin:0;color:var(--muted)}
.otras a{color:var(--accent);font-weight:600}
@media (max-width:600px){
  .cuenta{display:contents}
  .topbar .logo{order:1}
  .topbar .pts{order:2}
  .usuario{order:3;width:100%}
  .clase{order:4}
}
/* Vista de teoría */
a.tag{text-decoration:none}
a.tag:hover{text-decoration:underline;text-underline-offset:2px}
.modo-teoria .cuerpo,.modo-teoria .bar2,.modo-teoria #pdfMsg{display:none}
.teoria{display:flex;flex-direction:column;gap:14px;max-width:900px;width:100%;margin:0 auto}
.teoria .volver{align-self:flex-start;font-size:14px}
.teo-curso{margin:0;font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.teo-tit{margin:0;font-family:var(--f-display);font-size:1.7rem;line-height:1.15}
.teo-ficha{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.teo-ficha p{margin:0}
.teo-ficha h3{margin:4px 0 0;font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.teo-idea{font-size:1.02rem}
.teo-form{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;overflow-x:auto}
.teo-form li::marker{color:var(--accent)}
.teo-ej{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border-radius:6px;color:var(--accent);overflow-x:auto;
  background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.teo-sec{margin:10px 0 0;font-family:var(--f-display);font-size:1.25rem}
@media (max-width:600px){ .teo-tit{font-size:1.4rem} .teo-ficha{padding:12px 14px} }
body{margin:0}[hidden]{display:none!important}img{max-width:100%}

/* ===== Agregados del sitio: menú, portada con retos infinitos, temas, blog y páginas de texto ===== */
.logo a{color:inherit;text-decoration:none}
.menu{display:flex;gap:6px 18px;flex-wrap:wrap;margin:-10px 0 0;padding:0;list-style:none;font-size:14.5px}
.menu a{color:var(--muted);text-decoration:none;font-weight:500;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.bienvenida{margin:0;color:var(--muted);max-width:62ch}
.proximo{border:1px dashed var(--line);border-radius:6px;background:var(--paper);padding:12px 14px;font-size:13.5px;color:var(--muted)}
.proximo b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.proximo .pill{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:600 11px var(--f-mono);letter-spacing:.04em;vertical-align:1px}
.mini-temas{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:12px 14px;font-size:13.5px}
.mini-temas h3{margin:0 0 6px;font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mini-temas p{margin:0 0 6px}
.mini-temas a{color:var(--accent);text-decoration:none}
.mini-temas a:hover{text-decoration:underline}
.mini-temas .credito{margin-top:10px}
a.num{text-decoration:none;color:var(--ink)}
a.num:hover{color:var(--accent)}
.num.chico{font-size:1.05rem}
.ronda{text-align:center;color:var(--muted);font-size:14px;margin:4px 0;display:flex;align-items:center;gap:12px}
.ronda::before,.ronda::after{content:"";flex:1;border-top:1px solid var(--line)}
.centinela{height:1px}
.cargando{text-align:center;color:var(--muted);font-size:14px;padding:8px}
.card.destacado{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
/* Página de temas */
.cursos{display:grid;gap:18px}
@media (min-width:760px){.cursos{grid-template-columns:1fr 1fr}}
.curso{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.curso h2{margin:0 0 4px;font-family:var(--f-display);font-size:1.35rem}
.curso h2 a{color:var(--ink);text-decoration:none}
.curso h2 a:hover{color:var(--accent)}
.curso .sub{margin:0 0 10px;font-size:13px;color:var(--muted)}
.curso ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.curso li a{display:flex;justify-content:space-between;gap:10px;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--line)}
.curso li:last-child a{border-bottom:none}
.curso li a:hover{color:var(--accent)}
.curso li span{color:var(--muted);font:500 12px var(--f-mono);white-space:nowrap}
/* Blog y páginas de texto */
.texto{max-width:720px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.texto h1{font-size:clamp(1.8rem,5vw,2.4rem)}
.entradas{display:flex;flex-direction:column;gap:14px}
.entrada-item{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.entrada-item h2{margin:0;font-family:var(--f-display);font-size:1.3rem}
.entrada-item h2 a{color:var(--ink);text-decoration:none}
.entrada-item h2 a:hover{color:var(--accent)}
.entrada-item p{margin:6px 0 0;color:var(--muted)}
.fecha{font:500 12px var(--f-mono);color:var(--muted);letter-spacing:.04em}
.articulo{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:22px 24px;font-size:1.04rem;line-height:1.7;overflow-wrap:anywhere}
.articulo h2{font-family:var(--f-display);font-size:1.4rem;margin:1.2em 0 .3em}
.articulo h3{font-size:1.1rem;margin:1.1em 0 .3em}
.articulo p{margin:0 0 .9em}
.articulo ul,.articulo ol{margin:0 0 .9em;padding-left:1.3em}
.articulo blockquote{margin:0 0 .9em;padding:4px 14px;border-left:3px solid var(--accent);color:var(--muted)}
.articulo img{max-width:100%;height:auto;border-radius:6px}
.articulo a{color:var(--accent)}
.articulo mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;padding-block:4px}
.vacio{color:var(--muted);background:var(--paper);border:1px dashed var(--line);border-radius:6px;padding:18px;text-align:center}
.texto .volver{align-self:flex-start;font-size:14px}
@media (max-width:600px){ .menu{margin-top:-6px;gap:4px 18px} .articulo{padding:16px} }
@media (max-width:1099px){
  .mini-temas{display:none}
  .proximo{padding:8px 12px;font-size:12.5px}
  .proximo b{display:inline;font-size:13px;margin:0}
  .proximo .txt-largo{display:none}
}

.curso .sub a,footer a,.bienvenida a,.codemsg a{color:var(--accent)}
.articulo > :first-child{margin-top:0}