/* Layout: página de acceso al aula. Pestañas Entrar / Crear cuenta; tras iniciar sesión, panel del alumno con cinta de obras "PRÓXIMAMENTE" y cono animado */
:root{
  --negro:#0B0B0C;--grafito:#1B1C1F;--linea:#34363B;--gris:#A3A5AB;--blanco:#F4F4F2;--amarillo:#FFCE00;--rojo:#FF7B6B;
  --f-display:"Chakra Petch","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse 70% 50% at 50% 30%,rgba(255,206,0,.08),transparent 70%),var(--negro);color:var(--blanco);font-family:var(--f-body);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--negro)}
a{color:var(--amarillo)}
:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(11,11,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:12px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--amarillo);font-family:var(--f-display);font-style:italic;font-weight:700;font-size:1.25rem;letter-spacing:.06em}
.logo small{display:block;font-family:var(--f-mono);font-style:normal;font-size:.58rem;letter-spacing:.18em;color:var(--gris);text-align:right;margin-top:2px}
.logo svg{width:32px;height:32px;filter:drop-shadow(0 0 6px rgba(255,206,0,.45))}
.volver{font-family:var(--f-mono);font-size:.8rem;color:var(--gris);text-decoration:none}
.volver:hover{color:var(--amarillo)}
main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:56px;align-items:center;padding-block:56px 72px}
.eyebrow{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amarillo);margin:0 0 14px}
h1{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1.02;margin:0 0 16px;text-wrap:balance}
h1 span{color:var(--amarillo)}
.intro{color:#D6D7DA;font-size:1.08rem;max-width:52ch;margin:0 0 26px}
.lista{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.lista li{display:flex;gap:14px;align-items:flex-start;background:var(--grafito);border:1px solid var(--linea);border-radius:8px;padding:14px 16px}
.lista svg{flex:none;width:26px;height:26px;color:var(--amarillo);margin-top:2px}
.lista b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.05rem}
.lista span{color:var(--gris);font-size:.95rem}
.ayuda{color:var(--gris);font-size:.95rem;margin:0}
/* tarjeta de acceso */
[hidden]{display:none!important}
.acceso{position:relative;background:var(--grafito);border:1px solid var(--linea);border-radius:14px;padding:12px 26px 26px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pestanas{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--negro);border:1px solid var(--linea);border-radius:999px;padding:4px;margin:12px 0 22px}
.pestanas button{font-family:var(--f-display);font-weight:600;font-size:.98rem;border:0;border-radius:999px;padding:9px;background:transparent;color:var(--gris);cursor:pointer}
.pestanas button[aria-selected="true"]{background:var(--amarillo);color:var(--negro)}
.acceso h2{font-family:var(--f-display);font-weight:700;font-size:1.45rem;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.acceso h2 svg{width:22px;height:22px;color:var(--amarillo)}
.acceso .sub{color:var(--gris);font-size:.92rem;margin:0 0 18px}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
input,select{font:inherit;font-family:var(--f-body);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--blanco);background:var(--negro);border:1px solid var(--linea);border-radius:6px;padding:12px 14px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--amarillo);box-shadow:0 0 0 3px rgba(255,206,0,.18)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--rojo)}
label.check{display:flex;gap:10px;align-items:flex-start;font-family:var(--f-body);font-size:.92rem;letter-spacing:0;text-transform:none;color:#D6D7DA}
label.check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--amarillo);flex:none}
.requisitos{list-style:none;margin:-6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:.82rem;color:var(--gris);text-align:center}
.nota-opo{margin:-6px 0 0;font-size:.85rem;line-height:1.45;color:#D6D7DA;background:rgba(255,206,0,.08);border-left:3px solid var(--amarillo);border-radius:4px;padding:8px 12px}
.nota-opo b{color:var(--amarillo)}
.requisitos li::before{content:"○ ";color:var(--linea)}
.requisitos li.ok{color:#9BE7A9}.requisitos li.ok::before{content:"✓ ";color:#4ADE80}
.btn-entrar{font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;border:0;border-radius:6px;padding:14px;background:var(--amarillo);color:var(--negro);cursor:pointer;margin-top:4px}
.btn-entrar:disabled{opacity:.6;cursor:progress}
.btn-sec{font-family:var(--f-display);font-weight:600;font-size:.95rem;border:1px solid var(--linea);border-radius:6px;padding:10px 16px;background:transparent;color:var(--blanco);cursor:pointer}
.btn-sec:hover{border-color:var(--amarillo);color:var(--amarillo)}
.msg{font-size:.93rem;line-height:1.45;border-radius:6px}
.msg:empty{display:none}
.msg.err{color:#FFD2CC;background:rgba(255,123,107,.12);border:1px solid rgba(255,123,107,.5);padding:10px 12px}
.msg.aviso{color:#FFE9A6;background:rgba(255,206,0,.1);border:1px solid rgba(255,206,0,.5);padding:10px 12px}
.captcha{display:flex;justify-content:center;min-height:65px}
.olvido{font-size:.85rem;color:var(--gris);text-align:center;margin:0}
.alta-ok{text-align:center;padding:10px 0 4px}
.alta-ok h2{justify-content:center;margin-top:8px}
.alta-ok p{color:#D6D7DA;margin:0 0 18px}
.alta-ok .cono{position:static;width:84px;display:block;margin:0 auto}
/* vista de alumno */
main.alumno{display:block}
.saludo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.saludo h1{margin-bottom:6px}
.obras-panel{position:relative;overflow:hidden;background:var(--grafito);border:1px solid var(--linea);border-radius:14px;padding:110px 28px 28px;min-height:280px}
.obras-panel p{position:relative;max-width:56ch;color:#D6D7DA;margin:0;padding-right:110px}
.obras-panel .cinta{top:26px;transform:rotate(-3deg)}
.obras-panel .cono{right:22px;bottom:18px}
.modulos{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.modulos li{background:var(--grafito);border:1px dashed var(--linea);border-radius:10px;padding:18px;display:grid;gap:6px;opacity:.75}
.modulos svg{width:28px;height:28px;color:var(--amarillo)}
.modulos b{font-family:var(--f-display);font-size:1.1rem}
.modulos span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amarillo)}
@media (max-width:700px){.modulos{grid-template-columns:1fr}.obras-panel p{padding-right:0;padding-bottom:110px}}
/* obras */
.cinta{position:absolute;left:-20%;right:-20%;height:62px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(-45deg,var(--amarillo) 0 26px,var(--negro) 26px 52px);box-shadow:0 10px 30px rgba(0,0,0,.55);border-block:3px solid var(--negro)}
.cinta span{background:var(--negro);color:var(--amarillo);font-family:var(--f-display);font-style:italic;font-weight:700;font-size:1.7rem;letter-spacing:.14em;padding:4px 18px;border:2px solid var(--amarillo)}
.cono{position:absolute;width:96px;height:auto;transform-origin:50% 100%;animation:bota 2.4s ease-in-out infinite}
.cono .ojos{animation:parpadeo 4s infinite;transform-origin:50% 44%}
.cono .gota{animation:gota 2.4s ease-in infinite}
@keyframes bota{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg) translateY(-4px)}}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes gota{0%,40%{opacity:0;transform:translateY(0)}55%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.cono,.cono .ojos,.cono .gota{animation:none}}
.btn-wa{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;background:#25D366;color:#0B0B0C;border-radius:6px;padding:12px 18px;margin-top:14px}
.btn-wa svg{width:20px;height:20px}
footer{border-top:1px solid var(--linea);padding-block:24px;font-size:.85rem;color:var(--gris)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--gris)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
@media (max-width:860px){main{grid-template-columns:1fr;gap:36px;padding-block:36px 56px}.acceso{order:-1}}