/* Aula de Public Mesh Learning: el mismo sistema visual de la web (papel y tinta, filos rectos, etiquetas en Space Mono). */
:root { --papel:#E9E5D7; --tinta:#0E0E0C; --sub:#56524A; --acento:#FF3D11; --suave:#cfc9b6; --noche:#0E0E0C; --noche-sub:#918E84; --noche-linea:#2A271F; --blanco:#F4F1E6;
  --display:'Bricolage Grotesque', Helvetica, Arial, sans-serif; --texto:'Space Grotesk', Helvetica, Arial, sans-serif; --mono:'Space Mono', 'Courier New', monospace;
  --barra:58px; --lateral:390px; }
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--papel); color:var(--tinta); font-family:var(--texto); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
[hidden] { display:none !important; }
h1, h2, h3, p { margin:0; }
button { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }
.cargando { padding:40px 24px; font-family:var(--mono); font-size:13px; color:var(--sub); }
.et { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--acento); }
.dot { color:var(--acento); }

/* Botones */
.bt { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; padding:12px 18px; border:1px solid currentColor; background:transparent; cursor:pointer; text-decoration:none; }
.bt:hover { background:rgba(127,127,127,.12); }
.bt--acento { background:var(--acento); border-color:var(--acento); color:var(--tinta); }
.bt--acento:hover { background:#ff5a35; }
.bt--sm { padding:7px 12px; font-size:11.5px; }
.bt:disabled { opacity:.45; cursor:default; }
.enlace { background:none; border:0; padding:0; font-family:var(--mono); font-size:12px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; color:inherit; }

/* Barra superior */
.barra { position:sticky; top:0; z-index:20; height:var(--barra); display:flex; align-items:center; gap:18px; padding:0 20px; background:var(--noche); color:var(--papel); border-bottom:1px solid var(--noche-linea); }
.marca { display:flex; align-items:baseline; gap:8px; font-family:var(--display); font-weight:700; font-size:19px; text-decoration:none; white-space:nowrap; }
.marca small { font-family:var(--mono); font-weight:400; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--noche-sub); }
.barra__curso { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; color:var(--noche-sub); padding-left:18px; border-left:1px solid var(--noche-linea); }
.barra__der { display:flex; align-items:center; gap:14px; margin-left:auto; }
.medidor { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; white-space:nowrap; }
.medidor__riel { width:96px; height:4px; background:var(--noche-linea); }
.medidor__riel i { display:block; height:100%; background:var(--acento); }

/* Entrada y mis cursos */
.pagina { max-width:1040px; margin:0 auto; padding:clamp(40px,8vh,88px) 24px 96px; }
.pagina h1 { font-family:var(--display); font-weight:600; font-size:clamp(34px,5vw,60px); line-height:1.02; letter-spacing:-.02em; margin-bottom:16px; text-wrap:balance; }
.pagina .lede { font-size:clamp(17px,1.5vw,20px); color:var(--sub); max-width:52ch; }
.form-acceso { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; max-width:520px; }
.form-acceso input { flex:1 1 240px; min-width:0; padding:13px 14px; font:inherit; background:var(--blanco); border:1px solid var(--tinta); border-radius:0; }
.nota { margin-top:14px; font-size:14px; color:var(--sub); }
.mis { display:grid; gap:0; margin-top:36px; border-top:1px solid var(--tinta); }
.mi { display:grid; grid-template-columns:1fr auto; gap:14px 28px; align-items:center; padding:24px 0; border-bottom:1px solid var(--tinta); }
.mi h2 { font-family:var(--display); font-weight:600; font-size:clamp(21px,2.4vw,28px); line-height:1.12; letter-spacing:-.01em; }
.mi p { color:var(--sub); font-size:14.5px; margin-top:4px; }
.mi__riel { height:4px; background:var(--suave); margin-top:14px; max-width:420px; }
.mi__riel i { display:block; height:100%; background:var(--acento); }
.mi__dato { font-family:var(--mono); font-size:11.5px; color:var(--sub); margin-top:7px; }

/* Reproductor */
.aula { display:grid; grid-template-columns:minmax(0,1fr) var(--lateral); align-items:start; }
.escena { min-width:0; }
.pantalla { background:#000; }
.pantalla video { display:block; width:100%; max-height:calc(100vh - var(--barra) - 58px); aspect-ratio:16/9; background:#000; }
.vacio { aspect-ratio:16/9; max-height:calc(100vh - var(--barra) - 58px); width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px; background:var(--noche); color:var(--papel); }
.vacio h2 { font-family:var(--display); font-weight:600; font-size:clamp(22px,2.6vw,32px); line-height:1.1; max-width:24ch; }
.vacio p { color:var(--noche-sub); font-size:14.5px; max-width:48ch; }
.mandos { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-height:58px; padding:9px 20px; background:var(--noche); color:var(--papel); border-top:1px solid var(--noche-linea); }
.mandos__ver { display:flex; gap:6px; align-items:center; }
.mandos__ver select { font-family:var(--mono); font-size:11.5px; padding:6px 8px; background:transparent; color:inherit; border:1px solid currentColor; border-radius:0; }
.mandos__ver select option { color:var(--tinta); }
.mandos__ir { display:flex; gap:6px; margin-left:auto; }
.siguiente { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:14px 20px; background:var(--acento); color:var(--tinta); }
.siguiente b { font-family:var(--display); font-weight:600; font-size:17px; line-height:1.2; flex:1 1 240px; }
.cabeza { padding:26px clamp(20px,3vw,44px) 0; }
.cabeza h1 { font-family:var(--display); font-weight:600; font-size:clamp(25px,3vw,38px); line-height:1.06; letter-spacing:-.015em; text-wrap:balance; }
.cabeza__docente { font-size:14.5px; color:var(--sub); margin-top:7px; }
.compra { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:18px clamp(20px,3vw,44px) 0; padding:16px 18px; border:1px solid var(--tinta); background:var(--blanco); }
.compra p { flex:1 1 260px; font-size:15px; }

/* Pestañas */
.pestanas { display:flex; gap:22px; margin:22px clamp(20px,3vw,44px) 0; border-bottom:1px solid var(--tinta); overflow-x:auto; scrollbar-width:none; }
.pestanas button { background:none; border:0; padding:10px 0 11px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; white-space:nowrap; cursor:pointer; color:var(--sub); border-bottom:3px solid transparent; margin-bottom:-1px; }
.pestanas button[aria-selected="true"] { color:var(--tinta); border-bottom-color:var(--acento); }
.pestanas .solo-movil { display:none; }
.hoja { padding:26px clamp(20px,3vw,44px) 96px; max-width:880px; }
.prosa p, .prosa li { max-width:68ch; }
.prosa p + p, .prosa ul, .prosa ol, .prosa h2, .prosa h3 { margin-top:14px; }
.prosa h2, .prosa h3 { font-family:var(--display); font-weight:600; font-size:20px; line-height:1.2; margin-top:26px; }
.sub-et { margin:30px 0 12px; }
.lista-simple { margin:0; padding:0; list-style:none; border-top:1px solid var(--suave); }
.lista-simple li { padding:11px 0; border-bottom:1px solid var(--suave); }

/* Valoraciones */
.nota-curso { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.nota-curso b { font-family:var(--display); font-weight:600; font-size:44px; line-height:1; letter-spacing:-.02em; }
.nota-curso span { font-family:var(--mono); font-size:11.5px; color:var(--sub); }
.estrellas { font-family:var(--mono); color:var(--acento); letter-spacing:.08em; white-space:nowrap; }
.opinion { padding:18px 0; border-bottom:1px solid var(--suave); }
.opinion p { max-width:68ch; }
.opinion footer { margin-top:7px; font-family:var(--mono); font-size:11.5px; color:var(--sub); }
.solo-nota { display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 0 0; padding:0; list-style:none; font-family:var(--mono); font-size:11.5px; color:var(--sub); }

/* Materiales, apuntes, preguntas, transcripción */
.fichero { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--suave); text-decoration:none; }
.fichero span:last-child { font-family:var(--mono); font-size:11.5px; color:var(--sub); white-space:nowrap; }
.caja { width:100%; min-height:88px; padding:11px 12px; font:inherit; background:var(--blanco); border:1px solid var(--tinta); border-radius:0; resize:vertical; }
.caja-pie { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:9px; }
.apunte, .consulta { padding:15px 0; border-bottom:1px solid var(--suave); }
.apunte__t, .tiempo { font-family:var(--mono); font-size:11.5px; color:var(--acento); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.apunte p { white-space:pre-wrap; margin:5px 0 7px; }
.consulta__quien { font-family:var(--mono); font-size:11.5px; color:var(--sub); margin-bottom:4px; }
.consulta__resp { margin-top:11px; padding-left:14px; border-left:3px solid var(--acento); }
.consulta__resp span { display:block; font-family:var(--mono); font-size:11px; color:var(--sub); margin-bottom:3px; }
.buscar { width:100%; padding:10px 12px; font:inherit; font-size:15px; background:var(--blanco); border:1px solid var(--tinta); border-radius:0; margin-bottom:12px; }
.trans { max-height:58vh; overflow:auto; border-top:1px solid var(--suave); }
.trans button { display:grid; grid-template-columns:54px 1fr; gap:10px; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--suave); padding:8px 8px 8px 0; cursor:pointer; line-height:1.45; }
.trans button:hover { background:rgba(255,61,17,.07); }
.trans button.ahora { background:rgba(255,61,17,.14); }
.trans time { font-family:var(--mono); font-size:11px; color:var(--sub); padding-top:2px; padding-left:6px; }

/* Temario lateral */
.lateral { position:sticky; top:var(--barra); height:calc(100vh - var(--barra)); overflow-y:auto; background:var(--blanco); border-left:1px solid var(--tinta); }
.lateral__cabeza { padding:15px 18px; border-bottom:1px solid var(--tinta); }
.lateral__cabeza h2 { font-family:var(--mono); font-weight:400; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; }
.seccion > button { display:flex; width:100%; justify-content:space-between; gap:12px; text-align:left; background:var(--papel); border:0; border-bottom:1px solid var(--tinta); padding:13px 18px; cursor:pointer; }
.seccion__t { font-family:var(--display); font-weight:600; font-size:15.5px; line-height:1.22; }
.seccion__d { display:block; font-family:var(--mono); font-weight:400; font-size:10.5px; color:var(--sub); margin-top:4px; }
.seccion__m { font-family:var(--mono); font-size:13px; }
.item { display:grid; grid-template-columns:22px 1fr; gap:9px; padding:11px 16px 11px 18px; border-bottom:1px solid var(--suave); }
.item.ahora { background:var(--tinta); color:var(--papel); }
.item.ahora .item__m { color:var(--noche-sub); }
.item.cerrado { color:var(--sub); }
.item input { width:16px; height:16px; margin:3px 0 0; accent-color:var(--acento); cursor:pointer; border-radius:0; }
.item__marca { font-family:var(--mono); font-size:12px; padding-top:1px; text-align:center; }
.item__b { display:block; min-width:0; text-decoration:none; }
.item__t { display:block; font-size:14.5px; line-height:1.3; }
.item__m { display:block; margin-top:4px; font-family:var(--mono); font-size:10.5px; color:var(--sub); }
.item__gratis { color:var(--acento); }
.fin { padding:18px; border-bottom:1px solid var(--tinta); background:var(--papel); }
.fin .et { display:block; margin-bottom:8px; }
.fin input { width:100%; margin:9px 0; padding:10px; font:inherit; background:var(--blanco); border:1px solid var(--tinta); border-radius:0; }

/* Cuestionario */
.test { max-width:760px; padding:clamp(24px,5vh,56px) clamp(20px,3vw,44px) 96px; }
.test__cuenta { font-family:var(--mono); font-size:11.5px; color:var(--sub); margin-bottom:10px; }
.test__riel { height:4px; background:var(--suave); margin-bottom:26px; }
.test__riel i { display:block; height:100%; background:var(--acento); }
.test h2 { font-family:var(--display); font-weight:600; font-size:clamp(22px,2.6vw,30px); line-height:1.14; letter-spacing:-.01em; text-wrap:balance; }
.opciones { display:grid; gap:9px; margin:22px 0; padding:0; border:0; }
.opcion { display:grid; grid-template-columns:24px 1fr; gap:10px; padding:13px 14px; background:var(--blanco); border:1px solid var(--tinta); cursor:pointer; }
.opcion:has(input:checked) { background:var(--tinta); color:var(--papel); }
.opcion input { margin:4px 0 0; accent-color:var(--acento); }
.test__pie { display:flex; justify-content:space-between; gap:12px; }
.res { padding:22px 0; border-bottom:1px solid var(--suave); }
.res__q { font-weight:600; }
.res__a { margin-top:6px; font-size:15px; }
.res__a.mal { color:#a0250b; }
.res__a.bien { color:#2c6a30; }
.res__a b { font-family:var(--mono); font-weight:400; font-size:11.5px; display:block; }
.nota-final { font-family:var(--display); font-weight:600; font-size:clamp(52px,8vw,92px); line-height:1; letter-spacing:-.03em; margin-bottom:8px; }

.aviso { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:50; background:var(--tinta); color:var(--papel); font-family:var(--mono); font-size:12px; padding:11px 16px; max-width:calc(100vw - 32px); }
.aviso.error { background:#a0250b; }

@media (max-width: 960px) {
  .aula { grid-template-columns:minmax(0,1fr); }
  .lateral { display:none; position:static; height:auto; border-left:0; border-top:1px solid var(--tinta); }
  .lateral.abierto { display:block; }
  .pestanas .solo-movil { display:block; }
  .pantalla video, .vacio { max-height:none; }
  .barra { padding:0 14px; gap:12px; }
  .barra__curso { display:none; }
  .medidor__riel { width:52px; }
  .marca small { display:none; }
  .mandos { padding:8px 14px; }
  .mi { grid-template-columns:minmax(0,1fr); }
  .hoja { padding-bottom:40px; }
}
@media (prefers-reduced-motion: no-preference) { .medidor__riel i, .mi__riel i, .test__riel i { transition:width .3s; } }