/* ===== Unificación con Uniones químicas: modo alumno/docente, «¿Por dónde empiezo?», avance, registro ===== */
:root{--borde:var(--line);--suave:var(--muted);--sobre-acento:var(--surface);--azul:var(--f);--fondo-2:var(--surface);--fondo:var(--bg);--radio:var(--radius);--sombra:var(--shadow);--acento:var(--accent);--acento-suave:var(--accent-soft);--texto:var(--ink);--aviso:var(--m);--aviso-suave:color-mix(in srgb,var(--m) 10%,var(--surface));--e3:16px;--e4:22px;--e5:40px}
html[data-modo="alumno"] .solo-docente, html[data-modo="docente"] .solo-alumno { display: none !important; }
nav.top-nav{align-items:center}
.modo-switch { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; margin-left: .4rem; }
.modo-switch button { background: transparent; color: var(--suave); border: 0; cursor: pointer; padding: .35rem .8rem; font-size: .85rem; font-family: inherit; }
.modo-switch button[aria-pressed="true"] { background: var(--aviso); color: var(--sobre-acento); font-weight: 700; }
.modo-switch button:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.inicio-sec { padding: 8px 0 32px; border-bottom: 1px solid var(--line); }
.inicio-titulo { margin: 0 0 var(--e3); font-size: 1.35rem; }
.inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--e3); }
@media (min-width: 900px) { .inicio { grid-template-columns: 1fr 1fr; } .inicio-caja:first-child { grid-column: 1 / -1; } }
.inicio-caja { position: relative; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e4) var(--e4) var(--e4) calc(var(--e4) + 2.4rem); min-width: 0; }
.inicio-caja h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.inicio-caja p { margin: 0 0 .6rem; color: var(--suave); max-width: none; font-size: 16px; }
.inicio-caja .boton { margin: .3rem .4rem 0 0; }
.inicio-n { position: absolute; left: var(--e3); top: var(--e4); width: 2rem; height: 2rem; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 700; display: grid; place-items: center; }
.boton{display:inline-block;padding:.5rem 1rem;border-radius:10px;border:1px solid var(--line);color:var(--accent);background:var(--surface);font-weight:600;text-decoration:none;font-size:15px}
.boton.principal{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.boton:hover{filter:brightness(1.05)}
.boton[hidden]{display:none}
.avance { font-weight: 700; color: var(--texto) !important; }
.estado-bloque { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; background: var(--fondo); color: var(--suave); border: 1px solid var(--borde); white-space: nowrap; vertical-align: middle; letter-spacing: 0; text-transform: none; }
.estado-bloque[data-estado="en-curso"] { background: var(--aviso-suave); color: var(--aviso); border-color: var(--aviso); }
.estado-bloque[data-estado="completado"] { background: var(--acento-suave); color: var(--acento); border-color: var(--acento); }
.fila h3 .estado-bloque, .head .marca .estado-bloque { margin-left: .5rem; }
.bloque-avance { margin: 8px 0 40px; display: flex; justify-content: flex-end; }
.bloque-avance button { font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--acento); background: var(--fondo-2); color: var(--acento); }
.bloque-avance button[aria-pressed="true"] { background: var(--acento-suave); }
.nota-docente { display: block; margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--m); background: color-mix(in srgb,var(--m) 8%,var(--surface)); color: var(--ink); font-size: 14px; font-weight: 400; border-radius: 6px; }
td .nota-docente { font-size: 13px; }
html[data-modo="docente"] .opcion[data-correcta]{outline:2px dashed var(--accent);outline-offset:2px;border-radius:8px}
html[data-modo="docente"] .opcion[data-correcta]::after{content:"correcta";margin-left:.5rem;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.aula-quien{font-size:15px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.aula-quien a{color:var(--accent);font-weight:600}
.aula-cambiar{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--bg);color:var(--accent);border-radius:999px;padding:2px 10px;cursor:pointer;margin-left:4px}
.aula-velo{position:fixed;inset:0;background:rgba(20,24,31,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.aula-caja{background:var(--surface);border-radius:18px;padding:24px;width:min(420px,100%);box-shadow:0 18px 48px rgba(16,24,40,.25);color:var(--ink);max-height:100%;overflow:auto}
.aula-caja h2{margin:0 0 4px;font-size:24px}.aula-caja p{margin:0 0 14px;font-size:15px;color:var(--muted)}
.aula-caja label{display:block;font-weight:700;font-size:14px;margin:10px 0 4px}
.aula-caja input,.aula-caja select{width:100%;font:inherit;font-size:17px;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.aula-caja input:focus,.aula-caja select:focus{outline:none;border-color:var(--accent)}
.aula-caja button{margin-top:16px;width:100%;font:inherit;font-weight:700;font-size:17px;padding:12px;border-radius:12px;border:0;background:var(--accent);color:var(--bg);cursor:pointer}
.aula-caja button.aula-sin{margin-top:8px;background:transparent;color:var(--muted);font-weight:600;font-size:15px;padding:8px}
.aula-error{color:#C0392B;font-size:14px;min-height:18px;margin-top:6px}
footer .unidades a{white-space:nowrap}
@media (max-width:560px){.inicio-caja{padding:var(--e3) var(--e3) var(--e3) calc(var(--e3) + 2.4rem)}.inicio-n{left:.6rem}.modo-switch{margin-left:0}}