:root{
  --azul:#1b2f7a;
  --azul-vivo:#2d47c9;
  --azul-hielo:#eef1fb;
  --linea:#dde3f5;
  --papel:#f7f8fd;
  --blanco:#fff;
  --tinta:#171d3a;
  --tinta-suave:#5a6180;
  --acento:#f5b82e;
  --radio:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--tinta);background:var(--papel);line-height:1.6}
h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.15}
a{color:inherit}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

/* Encabezado */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 6%;background:var(--azul);color:var(--blanco)}
.marca{display:flex;align-items:center;gap:12px;font-weight:700;text-decoration:none}
.marca b{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--acento);color:var(--azul);font-family:'Sora',sans-serif;font-weight:800}
.topbar nav{display:flex;gap:26px}
.topbar nav a{text-decoration:none;font-weight:600;font-size:15px;color:#d5dcfa}
.topbar nav a:hover{color:var(--blanco)}

/* Portada: compacta, la tabla es la protagonista */
.portada{background:var(--azul);color:var(--blanco);padding:56px 6% 150px;position:relative;overflow:hidden}
.portada::after{content:"";position:absolute;right:-100px;top:-140px;width:400px;height:400px;border-radius:50%;background:var(--azul-vivo);opacity:.4}
.portada .interior{max-width:1100px;margin:0 auto;position:relative}
.portada p.uni{color:#c3cdf7;font-weight:600;margin-bottom:12px}
.portada h1{font-size:clamp(34px,6vw,60px);font-weight:800;margin-bottom:16px}
.portada p.desc{max-width:540px;color:#d7ddf9;font-size:17px}

/* Tabla */
.tabla-seccion{max-width:1100px;margin:-100px auto 0;padding:0 6%;position:relative}
.tabla-caja{background:var(--blanco);border-radius:var(--radio);box-shadow:0 18px 50px rgba(27,47,122,.18);overflow:hidden}
.tabla-cabecera{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:26px 28px;border-bottom:1px solid var(--linea)}
.tabla-cabecera h2{font-size:22px;color:var(--azul)}
.tabla-cabecera p{font-size:14px;color:var(--tinta-suave)}
.buscador{position:relative;flex:0 1 280px}
.buscador input{width:100%;padding:11px 14px;border:1.5px solid var(--linea);border-radius:10px;font:inherit;font-size:15px;color:var(--tinta);background:var(--papel)}
.buscador input:focus{outline:none;border-color:var(--azul-vivo);background:var(--blanco)}
.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
thead th{position:sticky;top:0;background:var(--azul-hielo);color:var(--azul);text-align:left;font-weight:700;padding:14px 20px;white-space:nowrap;border-bottom:2px solid var(--azul-vivo)}
tbody td{padding:15px 20px;border-bottom:1px solid var(--linea)}
tbody tr:nth-child(even){background:var(--papel)}
tbody tr:hover{background:var(--azul-hielo)}
td.num{width:64px;font-weight:700;color:var(--azul-vivo)}
td.nombre{font-weight:600}
.etiqueta{display:inline-block;padding:3px 12px;border-radius:99px;background:var(--azul-hielo);color:var(--azul);font-size:13px;font-weight:600}
.vacio{display:none;padding:36px;text-align:center;color:var(--tinta-suave)}
.pie-tabla{padding:16px 28px;font-size:14px;color:var(--tinta-suave);border-top:1px solid var(--linea)}

/* Información */
.info{max-width:1100px;margin:0 auto;padding:90px 6%}
.info h2{font-size:28px;color:var(--azul);margin-bottom:12px}
.info > p{max-width:620px;color:var(--tinta-suave);margin-bottom:36px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.info-grid div{padding:6px 0 6px 20px;border-left:4px solid var(--acento)}
.info-grid h3{font-size:18px;color:var(--azul);margin-bottom:8px}
.info-grid p{font-size:15px;color:var(--tinta-suave)}

footer{background:var(--azul);color:#c3cdf7;text-align:center;padding:32px 6%;font-size:14px}
footer strong{color:var(--blanco)}

/* Móvil: cada fila se convierte en una ficha */
@media (max-width:700px){
  .topbar{flex-direction:column}
  .portada{padding:40px 6% 130px;text-align:center}
  .portada p.desc{margin:0 auto}
  .tabla-cabecera{padding:20px}
  .buscador{flex-basis:100%}
  thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tbody tr{padding:14px 20px;border-bottom:1px solid var(--linea)}
  tbody td{display:flex;justify-content:space-between;gap:16px;padding:5px 0;border:0;text-align:right}
  tbody td::before{content:attr(data-label);font-weight:700;color:var(--azul);text-align:left}
  td.num{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Enlaces a los sitios de los alumnos */
a.enlace{color:var(--azul-vivo);font-weight:600;text-decoration:none;border-bottom:2px solid var(--acento)}
a.enlace:hover{color:var(--azul);background:var(--azul-hielo)}