/* Lista de espera · sistema de la web nueva de Academia Elizalde (tinta, verde, plano técnico). */

@font-face{ font-family:"Bodoni Moda"; src:url("../fuentes/bodoni-moda.woff2") format("woff2"); font-weight:400 500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Bodoni Moda"; src:url("../fuentes/bodoni-moda-italica.woff2") format("woff2"); font-weight:400 500; font-style:italic; font-display:swap; }
@font-face{ font-family:"Familjen Grotesk"; src:url("../fuentes/familjen-grotesk.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"JetBrains Mono"; src:url("../fuentes/jetbrains-mono.woff2") format("woff2"); font-weight:400 500; font-style:normal; font-display:swap; }

:root{
  color-scheme:dark;
  --fondo:#171F36; --superficie:#1C2540; --superficie-2:#232C4D;
  --texto:#F7F8FA; --texto-suave:rgb(247 248 250 / .7); --texto-tenue:rgb(247 248 250 / .48);
  --linea:rgb(255 255 255 / .12); --linea-fuerte:rgb(255 255 255 / .24); --reticula:rgb(255 255 255 / .035);
  --verde:#8CBF46; --verde-texto:#9ACF52; --sobre-verde:#171F36;
  --trazo:#C8D2F0; --aviso:#E8735E; --completo:#8A8F9C; --ambar:#E0B252; --azul:#9FB0E6;
  --celda-vacia:rgb(255 255 255 / .03); --clase:#7D8FC9;
  --display:"Bodoni Moda", Didot, Georgia, serif;
  --texto-f:"Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: light){
  :root{
    color-scheme:light;
    --fondo:#F7F8FA; --superficie:#FFFFFF; --superficie-2:#EDF0F6;
    --texto:#171F36; --texto-suave:rgb(23 31 54 / .72); --texto-tenue:rgb(23 31 54 / .5);
    --linea:rgb(23 31 54 / .12); --linea-fuerte:rgb(23 31 54 / .26); --reticula:rgb(23 31 54 / .04);
    --verde:#45701C; --verde-texto:#3D6418; --sobre-verde:#FFFFFF;
    --trazo:#5B6FA8; --aviso:#C0392B; --completo:#6B7080; --ambar:#9A6A0B; --azul:#44589A;
    --celda-vacia:rgb(23 31 54 / .025); --clase:#8C9CD0;
  }
}
/* La página del alumno fija el tema como la web: azul noche (universitarios) o claro (familias). */
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --fondo:#171F36; --superficie:#1C2540; --superficie-2:#232C4D;
  --texto:#F7F8FA; --texto-suave:rgb(247 248 250 / .74); --texto-tenue:rgb(247 248 250 / .5);
  --linea:rgb(255 255 255 / .12); --linea-fuerte:rgb(255 255 255 / .24); --reticula:rgb(139 155 212 / .055);
  --verde:#8CBF46; --verde-texto:#9ACF52; --sobre-verde:#171F36;
  --trazo:#C8D2F0; --aviso:#E8735E; --azul:#9FB0E6; --celda-vacia:rgb(255 255 255 / .035); --ambar:#E0B252; --completo:#8A8F9C; --clase:#7D8FC9;
  --hoja:rgb(35 44 77 / .62); --halo:rgb(66 88 155 / .62); --sombra-hoja:0 30px 70px -34px rgb(0 0 0 / .7);
}
:root[data-tema="claro"]{
  color-scheme:light;
  --fondo:#F7F8FA; --superficie:#FFFFFF; --superficie-2:#EDF0F6;
  --texto:#171F36; --texto-suave:rgb(23 31 54 / .74); --texto-tenue:rgb(23 31 54 / .54);
  --linea:rgb(23 31 54 / .12); --linea-fuerte:rgb(23 31 54 / .26); --reticula:rgb(66 88 155 / .05);
  --verde:#45701C; --verde-texto:#3D6418; --sobre-verde:#FFFFFF;
  --trazo:#5B6FA8; --aviso:#C0392B; --azul:#44589A; --celda-vacia:rgb(23 31 54 / .03); --ambar:#9A6A0B; --completo:#6B7080; --clase:#8C9CD0;
  --hoja:#FFFFFF; --halo:rgb(66 88 155 / .2); --sombra-hoja:0 26px 54px -30px rgb(23 31 54 / .26);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--fondo); color:var(--texto); font-family:var(--texto-f); font-size:15px; line-height:1.5;
  background-image:linear-gradient(var(--reticula) 1px,transparent 1px),linear-gradient(90deg,var(--reticula) 1px,transparent 1px);
  background-size:48px 48px;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);
}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--verde-texto)}
:focus-visible{outline:2px solid var(--trazo); outline-offset:2px}
[hidden]{display:none !important}
code{font-family:var(--mono); font-size:.9em}
.mono{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-tenue)}
.envoltorio{max-width:1320px; margin:0 auto; padding:24px 20px 64px}
.fuera-de-pantalla{position:fixed; left:-9999px; opacity:0}

/* formularios */
input:not([type="checkbox"]), select{background:var(--fondo); border:1px solid var(--linea-fuerte); border-radius:2px; padding:7px 9px; min-width:0}
.boton{background:transparent; border:1px solid var(--linea-fuerte); border-radius:2px; padding:6px 12px; font-size:13.5px; font-weight:600; text-decoration:none; color:var(--texto)}
.boton:hover{background:var(--superficie-2)}
.boton.principal{background:var(--verde); border-color:var(--verde); color:var(--sobre-verde)}
.boton.principal:hover{filter:brightness(1.07)}
.boton.peligro{color:var(--aviso)}
.boton:disabled, .boton:disabled:hover{opacity:.42; cursor:not-allowed; filter:none}
.boton.wa{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.boton.wa svg{width:14px; height:14px; fill:currentColor}
.enlace{background:none; border:0; padding:0; color:var(--verde-texto); font-weight:600; font-size:inherit; text-decoration:underline; text-underline-offset:3px}
.enlace.peligro{color:var(--aviso)}
.fila-botones{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.casilla{display:flex; gap:8px; align-items:flex-start; font-size:14px; color:var(--texto-suave)}
.casilla input{margin-top:4px; accent-color:var(--verde)}
.error{color:var(--aviso); font-weight:600}
.bien{color:var(--verde-texto); font-weight:600}
.vacio{font-size:14px; color:var(--texto-suave); margin:0; padding:6px 0}
.quien{font-size:13px; color:var(--texto-suave)}
.quien b{color:var(--aviso); font-weight:600}
.ok{color:var(--verde-texto); font-weight:600}
.no{color:var(--aviso); font-weight:600}
.pendiente{color:var(--ambar); font-weight:600}

/* entrada */
.entrada{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.entrada-caja{width:100%; max-width:380px; display:flex; flex-direction:column; gap:8px; background:var(--superficie); border:1px solid var(--linea-fuerte); border-radius:2px; padding:24px 20px}
.entrada-caja h1{font-family:var(--display); font-weight:500; font-size:34px; line-height:1.05; margin:0 0 10px}
.entrada-caja h1 em{color:var(--verde-texto)}
.entrada-caja label{font-size:13px; color:var(--texto-suave); margin-top:6px}
.entrada-caja .boton{margin-top:14px; padding:10px}

/* cabecera */
.cabecera{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--linea); margin-bottom:24px}
.marca{display:flex; flex-direction:column; gap:10px}
.logo-panel img{display:block; width:124px; height:auto}
.entrada-caja .logo-panel{margin-bottom:14px}
.marca h1{font-family:var(--display); font-weight:500; font-size:clamp(28px,4vw,40px); line-height:1.05; margin:0}
.marca h1 em{font-style:italic; color:var(--verde-texto)}
.cabecera-derecha{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center}
.pestanas{display:flex; border:1px solid var(--linea-fuerte); border-radius:2px; overflow:hidden}
.pestanas button{background:transparent; border:0; padding:9px 16px; font-weight:600; font-size:14px; color:var(--texto-suave)}
.pestanas button + button{border-left:1px solid var(--linea-fuerte)}
.pestanas button[aria-pressed="true"]{background:var(--verde); color:var(--sobre-verde)}

.aviso-borrado{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 16px; border:1px solid var(--ambar); border-radius:2px; padding:10px 14px; margin-bottom:12px; font-size:14px}
.aviso-borrado b{color:var(--ambar)}
.acciones{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
#avisos:not(:empty){margin-bottom:12px}

/* dos paneles */
.admin{display:grid; grid-template-columns:290px minmax(0,1fr); gap:24px; align-items:start}
@media (max-width:920px){ .admin{grid-template-columns:1fr} }
.lista-grupos{display:flex; flex-direction:column; gap:8px; min-width:0}
.lista-cabeza{display:flex; justify-content:space-between; align-items:center; gap:8px}
.lista-grupos h2, .bloque h2, .clases h3{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-tenue); margin:0 0 6px}
.grupo-item{display:flex; flex-direction:column; gap:6px; text-align:left; background:var(--superficie); border:1px solid var(--linea); border-radius:2px; padding:12px 14px}
.grupo-item:hover{border-color:var(--linea-fuerte)}
.grupo-item[aria-current="true"]{border-color:var(--verde); box-shadow:inset 3px 0 0 var(--verde)}
.grupo-item strong{font-size:16px; font-weight:600; line-height:1.25}
.grupo-item .cifras{font-size:13px; color:var(--texto-suave); font-variant-numeric:tabular-nums}
.cerrados{align-self:flex-start; margin:8px 0 2px; font-size:13.5px}
.estado{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:2px; border:1px solid currentColor; width:fit-content; white-space:nowrap}
.estado::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.estado.listo{color:var(--verde-texto)}
.estado.faltan{color:var(--ambar)}
.estado.espera{color:var(--completo)}
.estado.propuesta{color:var(--azul)}

.detalle{display:flex; flex-direction:column; gap:20px; min-width:0}
.detalle-cabeza{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:flex-end}
.detalle-cabeza h2{font-family:var(--display); font-weight:500; font-size:clamp(26px,3.2vw,34px); line-height:1.1; margin:4px 0 2px; text-wrap:balance}
.columnas{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:20px; align-items:start}
@media (max-width:1180px){ .columnas{grid-template-columns:1fr} }
.pila{display:flex; flex-direction:column; gap:20px; min-width:0}
.bloque{background:var(--superficie); border:1px solid var(--linea); border-radius:2px; padding:16px; min-width:0}
.bloque > p{margin:0; font-size:14px; color:var(--texto-suave); max-width:62ch}
.aviso-cerrado{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px}

/* formato */
.formato{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px}
.formato .ancho, .campo.ancho{grid-column:1/-1}
.campo{display:flex; flex-direction:column; gap:4px; min-width:0}
.campo label, .campo .etiqueta{font-size:13px; color:var(--texto-suave)}
.campo input, .campo select{width:100%; font-variant-numeric:tabular-nums}
.bloque > .campo + .casilla{margin-top:10px}
.dias-sel{display:flex; flex-wrap:wrap; gap:6px}
.dias-sel label{display:flex; position:relative}
.dias-sel input{position:absolute; opacity:0; pointer-events:none}
.dias-sel span{font-family:var(--mono); font-size:12px; text-transform:uppercase; border:1px solid var(--linea-fuerte); border-radius:2px; padding:5px 0; width:48px; text-align:center; cursor:pointer; color:var(--texto-suave)}
.dias-sel input:checked + span{background:var(--verde); border-color:var(--verde); color:var(--sobre-verde); font-weight:500}
.dias-sel input:focus-visible + span{outline:2px solid var(--trazo); outline-offset:2px}
.nota-semanas{grid-column:1/-1; font-size:13px; color:var(--texto-suave); border-top:1px solid var(--linea); padding-top:10px; margin:0}
.nota-semanas b{color:var(--texto); font-variant-numeric:tabular-nums}
.profe-resumen{font-size:13.5px; color:var(--texto-suave); margin:10px 0 0}
.profe-resumen b{color:var(--texto); font-weight:600}
.profe-resumen.falta{color:var(--ambar)}

/* interesados */
.alumnos{list-style:none; margin:0; padding:0}
.alumnos li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:center; padding:10px 0; border-top:1px solid var(--linea)}
.alumnos li:first-child{border-top:0}
.alumnos .nombre{font-weight:600}
.alumnos .sub{grid-column:1/-1; font-size:13px; color:var(--texto-tenue); font-variant-numeric:tabular-nums}
.alumnos .accion{grid-row:1; grid-column:2; text-align:right}
.alumnos li > .nuevo{grid-column:1/-1; margin:0; padding:0; border:0}
.etiqueta-menor{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--ambar); border:1px solid currentColor; border-radius:2px; padding:0 5px; margin-left:6px; vertical-align:2px}
.nuevo{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--linea)}
.nuevo input:not([type="checkbox"]){flex:1 1 150px}
.nuevo .casilla{flex-basis:100%}

.bocadillo{grid-column:1/-1; position:relative; margin-top:10px; background:var(--texto); color:var(--fondo); border-radius:2px; padding:11px 13px; font-size:13.5px; line-height:1.45}
.bocadillo::before{content:""; position:absolute; top:-12px; right:28px; border:6px solid transparent; border-bottom-color:var(--texto)}
.bocadillo strong{font-weight:600}
.bocadillo blockquote{margin:7px 0; padding-left:9px; border-left:2px solid currentColor; opacity:.82; overflow-wrap:anywhere; white-space:pre-line}
.bocadillo .pie{opacity:.72; font-size:12.5px}
@media (prefers-reduced-motion:no-preference){ .bocadillo{animation:aparece .16s ease-out} @keyframes aparece{from{opacity:0; transform:translateY(-4px)}} }

/* propuestas */
.propuestas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.propuesta-actual{display:flex; flex-direction:column; gap:4px; align-items:flex-start; border:1px solid var(--azul); border-radius:2px; padding:12px; margin-bottom:12px}
.propuesta-actual strong{font-size:17px; font-variant-numeric:tabular-nums}
.medidor{display:flex; flex-wrap:wrap; gap:3px}
.medidor i{width:14px; height:8px; border-radius:1px; background:var(--linea-fuerte)}
.medidor i.si{background:var(--verde)}
.aviso-pendientes{font-size:13px; color:var(--ambar); margin:10px 0 0}
.enviar{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}

/* cuadrícula horaria */
.rejilla-scroll{overflow-x:auto}
.rejilla{display:grid; grid-template-columns:46px repeat(5,minmax(40px,1fr)); column-gap:3px; user-select:none; -webkit-user-select:none; min-width:250px}
.rejilla .dia{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; text-align:center; color:var(--texto-suave); padding-bottom:6px; letter-spacing:.04em}
.rejilla .hora{font-family:var(--mono); font-size:10.5px; color:var(--texto-tenue); text-align:right; padding-right:6px; line-height:1; transform:translateY(-5px); font-variant-numeric:tabular-nums}
.celda{height:13px; background:var(--celda-vacia); border-top:1px solid var(--linea)}
.celda.media{border-top-color:transparent}
.rejilla.grande .celda{height:18px}
/* Deja bajar la página con el dedo aunque se empiece sobre la tabla; el arrastre sigue pintando. */
.rejilla.pintable{touch-action:pan-y; cursor:crosshair}
.rejilla .celda:focus-visible{outline:2px solid var(--trazo); outline-offset:-2px; position:relative; z-index:2}
@media (pointer:coarse){
  .rejilla.grande .celda{height:26px}
  .rejilla .hora{font-size:11px}
}
.celda.n1, .muestra-puedo{background:color-mix(in srgb, var(--verde) 42%, transparent)}
.celda.n2, .muestra-mejor{background:var(--verde)}
.celda.c1{background:color-mix(in srgb, var(--verde) 18%, transparent)}
.celda.c2, .escala .c2{background:color-mix(in srgb, var(--verde) 26%, transparent)}
.celda.c3{background:color-mix(in srgb, var(--verde) 34%, transparent)}
.celda.c4{background:color-mix(in srgb, var(--verde) 43%, transparent)}
.celda.c5, .escala .c5{background:color-mix(in srgb, var(--verde) 52%, transparent)}
.celda.c6{background:color-mix(in srgb, var(--verde) 61%, transparent)}
.celda.c7{background:color-mix(in srgb, var(--verde) 70%, transparent)}
.celda.c8, .escala .c8{background:color-mix(in srgb, var(--verde) 79%, transparent)}
.celda.c9{background:color-mix(in srgb, var(--verde) 89%, transparent)}
.celda.c10, .escala .c10{background:var(--verde)}
.celda.ocupado, .muestra-ocupado{background-image:repeating-linear-gradient(135deg,var(--linea-fuerte) 0 2px,transparent 2px 6px)}
.rejilla.agenda .celda.ocupado, .agenda-leyenda .muestra-ocupado{background-image:repeating-linear-gradient(135deg,var(--aviso) 0 2px,transparent 2px 6px)}
.celda.clase, .muestra-clase{background:var(--clase); border-top-color:transparent}
.celda.clase.tope{border-top:1px solid var(--fondo)}
.muestra-libre{border:1px solid var(--linea-fuerte)}
.muestra-sel{box-shadow:inset 0 0 0 2px var(--trazo)}
.celda.sel{box-shadow:inset 2px 0 0 var(--trazo), inset -2px 0 0 var(--trazo)}
.celda.sel-ini{box-shadow:inset 2px 0 0 var(--trazo), inset -2px 0 0 var(--trazo), inset 0 2px 0 var(--trazo)}
.celda.sel-fin{box-shadow:inset 2px 0 0 var(--trazo), inset -2px 0 0 var(--trazo), inset 0 -2px 0 var(--trazo)}
.celda.sel-ini.sel-fin{box-shadow:inset 0 0 0 2px var(--trazo)}
.leyenda{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--texto-suave); margin-top:10px; align-items:center}
.leyenda i, .pinceles i{display:inline-block; width:14px; height:10px; vertical-align:-1px; border-radius:1px}
.leyenda > span > i{margin-right:6px}
.escala{display:inline-flex; gap:2px; margin-right:6px}
.pinceles{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.pinceles button{display:flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--linea-fuerte); border-radius:2px; padding:7px 12px; font-size:14px; font-weight:600; color:var(--texto-suave)}
.pinceles button[aria-pressed="true"]{border-color:var(--texto); color:var(--texto); background:var(--superficie-2)}

/* profesores */
.clases{list-style:none; margin:0; padding:0}
.clases li{display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; padding:9px 0; border-top:1px solid var(--linea); font-size:14px}
.clases li:first-child{border-top:0}
.clases .cuando{font-size:13px; color:var(--texto-suave); font-variant-numeric:tabular-nums; display:flex; gap:12px; align-items:baseline}
.clases-bloque h3{margin-top:18px}
.nueva-clase{margin-top:12px; padding-top:12px; border-top:1px solid var(--linea)}

/* página del alumno: el lenguaje de la web (halo azul, retícula de plano, Bodoni con cursiva verde, cejas en mono) */
.cuerpo-alumno{
  min-height:100vh; display:flex; flex-direction:column; font-size:16px;
  background-color:var(--fondo);
  background-image:
    radial-gradient(70% 46% at 6% 0%, var(--halo), transparent 72%),
    linear-gradient(var(--reticula) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticula) 1px, transparent 1px);
  background-size:100% 900px, 48px 48px, 48px 48px;
  background-repeat:no-repeat, repeat, repeat;
}
.alumno-cab, .alumno-pagina, .alumno-pie{width:100%; max-width:720px; margin:0 auto; padding-left:20px; padding-right:20px}
.alumno-cab{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:20px}
.alumno-cab .mono{font-size:10.5px; letter-spacing:.2em}
.alumno-logo img{display:block; width:136px; height:auto}
.alumno-logo .logo-claro, :root[data-tema="claro"] .alumno-logo .logo-oscuro{display:none}
:root[data-tema="claro"] .alumno-logo .logo-claro{display:block}
.alumno-pagina{flex:1; padding-top:clamp(40px,9vw,76px); padding-bottom:40px}
#alumno{display:flex; flex-direction:column; gap:clamp(36px,7vw,56px)}
.alumno-pie{padding-top:22px; padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--linea); font-size:10px; letter-spacing:.2em; text-align:center}

.portada{display:flex; flex-direction:column; gap:20px}
.ceja{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0; font-size:10.5px; letter-spacing:.2em}
.ceja span:first-child{color:var(--verde-texto)}
.ceja i{display:block; width:36px; height:1px; background:var(--linea-fuerte)}
.asignatura{font-family:var(--display); font-weight:400; font-variation-settings:"opsz" 18; font-size:clamp(46px,12.5vw,76px); line-height:.95; letter-spacing:-.024em; margin:0; text-wrap:balance; overflow-wrap:anywhere}
.asignatura em, .saludo em{font-style:italic; color:var(--verde-texto)}
.saludo{font-family:var(--display); font-weight:400; font-variation-settings:"opsz" 18; font-size:clamp(26px,7vw,38px); line-height:1.12; letter-spacing:-.012em; margin:2px 0 0; padding-top:18px; border-top:1px solid var(--linea-fuerte); text-wrap:balance}
.pasos b, .consejo b{color:var(--texto); font-weight:600}
.entradilla{margin:0; font-size:clamp(17px,4.4vw,19.5px); line-height:1.6; color:var(--texto-suave); max-width:50ch}
.entradilla b{color:var(--texto); font-weight:600}

.pasos{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px}
.pasos li{border-top:1px solid var(--linea-fuerte); padding-top:16px}
.pasos .mono{display:block; color:var(--verde-texto); letter-spacing:.16em; margin-bottom:10px}
.pasos h2{font-size:16.5px; font-weight:600; line-height:1.3; margin:0 0 6px}
.pasos p{margin:0; font-size:14.5px; line-height:1.55; color:var(--texto-suave)}
@media (max-width:600px){
  .pasos{grid-template-columns:1fr}
  .pasos li{display:grid; grid-template-columns:38px 1fr; padding:14px 0}
  .pasos li:last-child{border-bottom:1px solid var(--linea-fuerte)}
  .pasos .mono{grid-row:1 / 3; margin:4px 0 0}
}

.hoja{background:var(--hoja); border:1px solid var(--linea); border-radius:3px; padding:clamp(18px,4.5vw,28px); display:flex; flex-direction:column; gap:16px; box-shadow:var(--sombra-hoja); backdrop-filter:blur(6px)}
.hoja-cabeza{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px}
.hoja-cabeza h2{margin:0; font-size:11px; font-weight:500; letter-spacing:.18em; color:var(--texto-suave)}
.contador{font-size:14.5px; color:var(--texto-suave); font-variant-numeric:tabular-nums}
.contador b{color:var(--verde-texto); font-weight:600}
.consejo{margin:0; font-size:15px; color:var(--texto-suave)}
.hoja .pinceles{margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.hoja .pinceles button{justify-content:center; min-height:46px; padding:8px 10px; font-size:15px}
.hoja .rejilla.grande .celda{height:19px}
.hoja .rejilla .hora{font-size:11px}

.boton.grande{min-height:50px; padding:10px 20px; font-size:16px}
.boton.elegido{border-color:var(--texto); background:var(--superficie-2)}
.propuesta-alumno{display:flex; flex-direction:column; gap:12px; background:var(--hoja); border:1px solid var(--linea-fuerte); border-left:3px solid var(--verde); border-radius:3px; padding:clamp(18px,4.5vw,26px); box-shadow:var(--sombra-hoja)}
.propuesta-alumno .mono{letter-spacing:.18em; font-size:10.5px}
.propuesta-alumno strong{font-family:var(--display); font-weight:400; font-variation-settings:"opsz" 18; font-size:clamp(28px,7vw,40px); line-height:1.08; letter-spacing:-.01em}
.propuesta-alumno .ok{margin:0}
.pregunta{margin:4px 0 0; font-size:17px; font-weight:600}

/* veredicto: ¿encaja la propuesta con lo que marcó? */
.veredicto{display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; border-radius:3px; padding:14px; border:1px solid var(--linea-fuerte); background:var(--celda-vacia)}
.veredicto-icono{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font-weight:700; font-size:17px; border:1.5px solid currentColor}
.veredicto strong, .propuesta-alumno .veredicto strong{display:block; font-family:var(--texto-f); font-weight:600; font-size:16.5px; line-height:1.3; letter-spacing:0}
.veredicto p{margin:4px 0 0; font-size:14.5px; line-height:1.5; color:var(--texto-suave)}
.veredicto.ok{border-color:var(--verde)} .veredicto.ok .veredicto-icono, .veredicto.ok strong{color:var(--verde-texto)}
.veredicto.casi{border-color:var(--ambar)} .veredicto.casi .veredicto-icono, .veredicto.casi strong{color:var(--ambar)}
.veredicto.fuera{border-color:var(--aviso)} .veredicto.fuera .veredicto-icono, .veredicto.fuera strong{color:var(--aviso)}
.veredicto.neutro .veredicto-icono{color:var(--azul)}

/* Grupo dividido: una tarjeta por grupo, la suya destacada con el verde de la marca. */
.opciones-alumno{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:14px}
.opcion-alumno{display:flex; flex-direction:column; gap:10px; background:var(--hoja); border:1px solid var(--linea-fuerte); border-radius:3px; padding:clamp(16px,4vw,22px); box-shadow:var(--sombra-hoja)}
.opcion-alumno.suya{border-left:3px solid var(--verde)}
.oa-cabeza{display:flex; align-items:center; justify-content:space-between; gap:10px}
.oa-cabeza .mono{letter-spacing:.18em; font-size:10.5px}
.chip-suyo{font-size:12px; font-weight:700; letter-spacing:.02em; padding:3px 10px; border-radius:999px; background:var(--verde); color:var(--sobre-verde)}
.opcion-alumno strong{font-family:var(--display); font-weight:400; font-variation-settings:"opsz" 18; font-size:clamp(24px,6vw,32px); line-height:1.1; letter-spacing:-.01em}
.encaje{margin:0; font-size:14.5px; font-weight:600}
.encaje.ok{color:var(--verde-texto)} .encaje.casi{color:var(--ambar)} .encaje.fuera{color:var(--aviso)}
.oa-botones{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:4px}
.oa-botones .enlace{font-size:14px}
.oa-botones .enlace[aria-pressed="true"]{color:var(--texto-tenue); text-decoration:none; cursor:default}
.oa-ninguno{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:6px}
.oa-ninguno p{margin:0}

/* ningún horario le viene bien: qué puede hacer y qué nos cuenta */
.sin-hueco{margin-top:18px; border-left:3px solid var(--ambar); padding:4px 0 4px 14px; display:flex; flex-direction:column; gap:12px}
.sin-hueco p{margin:0; font-size:15.5px; line-height:1.6; color:var(--texto-suave)}
.sin-hueco b{color:var(--texto); font-weight:600}
.sh-titulo{font-size:16.5px !important; color:var(--texto) !important}
.sh-salidas{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:15.5px; line-height:1.6; color:var(--texto-suave)}
.sh-etiqueta{font-weight:600; font-size:16px; padding-top:4px}
.sh-ayuda{font-size:14px !important}
.sin-hueco textarea{width:100%; background:var(--fondo); color:var(--texto); border:1px solid var(--linea-fuerte);
  border-radius:2px; padding:11px; font:inherit; font-size:16px; line-height:1.5; resize:vertical}
.sin-hueco textarea:focus-visible{border-color:var(--trazo)}
.sh-pie{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* propuesta pintada encima de su disponibilidad */
.celda.prop{box-shadow:inset 3px 0 0 var(--azul), inset -3px 0 0 var(--azul); background-image:linear-gradient(color-mix(in srgb, var(--azul) 26%, transparent), color-mix(in srgb, var(--azul) 26%, transparent))}
.celda.prop.prop-ini{box-shadow:inset 3px 0 0 var(--azul), inset -3px 0 0 var(--azul), inset 0 3px 0 var(--azul)}
.celda.prop.prop-fin{box-shadow:inset 3px 0 0 var(--azul), inset -3px 0 0 var(--azul), inset 0 -3px 0 var(--azul)}
.celda.prop.prop-ini.prop-fin{box-shadow:inset 0 0 0 3px var(--azul)}
.celda.prop-fuera{background-image:repeating-linear-gradient(135deg, var(--aviso) 0 2px, transparent 2px 6px)}
.muestra-prop{box-shadow:inset 0 0 0 2px var(--azul); background:color-mix(in srgb, var(--azul) 26%, transparent)}
.muestra-prop-fuera{background-image:repeating-linear-gradient(135deg, var(--aviso) 0 2px, transparent 2px 5px); box-shadow:inset 0 0 0 2px var(--azul)}
.hoja .leyenda{margin-top:0; font-size:13.5px; gap:8px 18px}
.hoja .leyenda i{width:16px; height:12px}
.sin-guardar{font-size:14px; font-weight:600; color:var(--ambar)}

/* Alta desde la web (23/09/2026): el formulario de la lista de espera. */
.alta-form{gap:18px}
.alta-form .campo input{min-height:46px; padding:0 12px; font-size:16px; color:var(--texto); background:var(--superficie-2); border:1px solid var(--linea-fuerte); border-radius:2px}
.alta-form .campo input:focus{outline:2px solid var(--verde); outline-offset:1px}
.alta-form .pista{margin:0; font-size:13.5px; line-height:1.5; color:var(--texto-tenue)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.alta-grupos{border:1px solid var(--linea-fuerte); border-radius:2px; padding:14px 16px; margin:0; display:flex; flex-direction:column; gap:10px}
.alta-grupos legend{padding:0 6px; font-size:13px; color:var(--texto-suave)}
.alta-grupos .casilla b{color:var(--texto)}
.alta-grupos .pista{margin:2px 0 0}

.privacidad{font-size:14px; color:var(--texto-suave); border-top:1px solid var(--linea); padding-top:14px}
.privacidad summary{cursor:pointer; font-weight:600; color:var(--texto)}
.privacidad p{margin:8px 0 0}
.consentimiento{color:var(--texto); font-size:15px}
.consentimiento input{width:18px; height:18px; margin-top:3px}
.pie-form{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.confirmacion{border:1px solid var(--verde); border-radius:3px; padding:14px 16px; font-size:15px}
.confirmacion b{color:var(--verde-texto)}
@media (prefers-reduced-motion:no-preference){
  /* Solo al llegar: al cambiar de pincel la página se repinta y no debe volver a animarse. */
  .cuerpo-alumno:not(.listo) .portada > *{animation:entra .7s cubic-bezier(.22,.8,.25,1) both}
  .cuerpo-alumno:not(.listo) .portada > :nth-child(2){animation-delay:.08s}
  .cuerpo-alumno:not(.listo) .portada > :nth-child(3){animation-delay:.16s}
  .cuerpo-alumno:not(.listo) .portada > :nth-child(4){animation-delay:.24s}
  @keyframes entra{from{opacity:0; transform:translateY(18px)}}
}

/* instalación */
.instalar{max-width:640px; margin:0 auto; padding:32px 16px 64px; display:flex; flex-direction:column; gap:14px}
.instalar h1, .instalar h2{font-family:var(--display); font-weight:500; margin:0}
.instalar .entrada-caja{max-width:none}
.comprobaciones{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.comprobaciones li{display:flex; flex-direction:column; border:1px solid var(--linea); border-radius:2px; padding:8px 12px}
.comprobaciones li.bien strong{color:var(--verde-texto)}
.comprobaciones li.mal{border-color:var(--aviso)}
.comprobaciones li.mal strong{color:var(--aviso)}
.comprobaciones li span{font-size:13.5px; color:var(--texto-suave)}
.nota{font-size:14px; color:var(--texto-suave)}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--texto); color:var(--fondo); padding:10px 16px; border-radius:2px; font-size:14px; font-weight:600; max-width:calc(100% - 32px); box-shadow:0 6px 24px rgb(0 0 0 / .25); z-index:10}
.toast.error{background:var(--aviso); color:#fff}
@media (prefers-reduced-motion:no-preference){ .toast{animation:sube .18s ease-out} @keyframes sube{from{transform:translate(-50%,8px); opacity:0}} }