/* Estilos mínimos y responsivos. El repaso visual completo va en el paso 10. */
:root {
    --tinta: #16202b;
    --suave: #5b6b7c;
    --linea: #dde4ea;
    --fondo: #f4f6f8;
    --acento: #1a5fb4;
    --ok: #1b7f4b;
    --ko: #b3261e;
    /* Ni bien ni mal: «hay que mirar esto». Un examen abandonado no es un
       suspenso, es un dato que no significa lo que parece. */
    --aviso: #8a5a00;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 1.5rem 1rem;
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--tinta);
    background: var(--fondo);
}

.caja {
    max-width: 26rem;
    margin: 0 auto;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 12px;
}
.caja.ancha { max-width: 52rem; }

h1 { margin: 0 0 .25rem; font-size: 1.4rem; }
h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.sub { margin: 0 0 1.25rem; color: var(--suave); font-size: .9rem; }

.barra {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

label { display: block; margin: .9rem 0 .3rem; font-weight: 600; font-size: .9rem; }

input[type="email"],
input[type="password"] {
    width: 100%;
    padding: .65rem .75rem;
    font-size: 1rem;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: #fff;
}
input:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    border-color: var(--acento);
}

button, .boton {
    display: inline-block;
    margin-top: 1.25rem;
    padding: .7rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--acento);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}
button:hover, .boton:hover { background: #17539c; }

.boton-plano {
    color: var(--suave);
    text-decoration: none;
    font-size: .9rem;
    border: 1px solid var(--linea);
    padding: .4rem .8rem;
    border-radius: 8px;
    background: #fff;
}

.error, .aviso {
    margin: 0 0 1rem;
    padding: .7rem .85rem;
    border-radius: 8px;
    font-size: .9rem;
}
.error { color: var(--ko); background: #fdecea; border: 1px solid #f5c6c2; }
.aviso { color: #8a5a00; background: #fff6e5; border: 1px solid #f0dcae; }

.pie { margin: 1.25rem 0 0; font-size: .85rem; color: var(--suave); }

.tarjeta {
    margin-bottom: 1.25rem;
    padding: 1.1rem;
    border: 1px solid var(--linea);
    border-radius: 10px;
}
.tarjeta.destacada { border-color: var(--acento); background: #f2f7fd; }
.tarjeta p { margin: .3rem 0; color: var(--suave); font-size: .92rem; }

.vacio { color: var(--suave); font-style: italic; }

table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .9rem; }
th, td { padding: .55rem .4rem; text-align: left; border-bottom: 1px solid var(--linea); }
th { color: var(--suave); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; }

.pastilla {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
}
.pastilla.ok { color: var(--ok); background: #e6f4ec; }
.pastilla.ko { color: var(--ko); background: #fdecea; }
.pastilla.neutra { color: var(--suave); background: #eef1f4; }
.pastilla.aviso { color: var(--aviso); background: #fdf3e0; }

.tendencia { font-weight: 600; }
.tendencia-mejorando { color: var(--ok); }
.tendencia-empeorando { color: var(--ko); }

/* Menú de la portada del alumno: botones, no enlaces sueltos */
.menu {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}
.menu a {
    display: inline-block;
    padding: .5rem .95rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--acento);
    text-decoration: none;
    background: #fff;
    border: 1.5px solid var(--acento);
    border-radius: 8px;
    transition: background .12s ease, color .12s ease;
}
.menu a:hover { background: #f2f7fd; }
.menu a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* El botón de administración se distingue del resto */
.menu a.destacado {
    color: #fff;
    background: var(--acento);
}
.menu a.destacado:hover { background: #17539c; }

/* Salir es una acción secundaria: gris y discreta */
.menu a.boton-plano {
    color: var(--suave);
    border-color: var(--linea);
    font-weight: 400;
}
.menu a.boton-plano:hover { background: #f4f6f8; color: var(--tinta); }

/* ---------------------------------------------------------------- casilla
   Checkbox con su texto al lado: la etiqueta NO puede ir en bloque como el
   resto de labels del formulario, o el texto caería debajo de la casilla. */
.casilla {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 1.25rem;
    padding: .8rem .9rem;
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: 8px;
}
.casilla input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: .1rem 0 0;
    accent-color: var(--acento);
    cursor: pointer;
}
.casilla label {
    margin: 0;
    font-weight: 400;
    font-size: .9rem;
    line-height: 1.45;
    cursor: pointer;
}
.casilla a { color: var(--acento); }

/* ------------------------------------------------- pie con lo legal
   Discreto y fuera de la caja: está siempre, pero no compite con nada. */
.pie-legal {
    max-width: 52rem;
    margin: 1.5rem auto 0;
    text-align: center;
    font-size: .82rem;
}
.pie-legal a { color: var(--suave); text-decoration: none; }
.pie-legal a:hover { color: var(--acento); text-decoration: underline; }

/* ---------------------------------------------------------------- legal
   Texto largo: se estrecha la caja para que la línea no se haga incómoda de
   leer, aunque la rejilla de la app permita 52rem. */
.legal { max-width: 44rem; }

.legal section { margin-top: 1.75rem; }
.legal section + section { border-top: 1px solid var(--linea); padding-top: 1.5rem; }
.legal h2 { margin-bottom: .6rem; font-size: 1.02rem; color: var(--acento); }
.legal p  { margin: 0 0 .8rem; }
.legal ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.legal li { margin-bottom: .4rem; }

/* Índice: en pantalla ancha va en dos columnas para no comerse el arranque
   del texto; en móvil cae solo a una. */
.legal .indice {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    background: var(--fondo);
    border-radius: 10px;
}
.legal .indice ol {
    columns: 2;
    column-gap: 1.75rem;
    margin: 0;
    padding-left: 1.1rem;
    font-size: .88rem;
}
.legal .indice li { margin-bottom: .35rem; break-inside: avoid; }
.legal .indice a { color: var(--tinta); text-decoration: none; }
.legal .indice a:hover { color: var(--acento); text-decoration: underline; }

/* La frase que más protege al instructor: no puede quedar sepultada en un
   párrafo como una más. */
.destacado-legal {
    margin: 1.1rem 0 0;
    padding: .85rem 1rem;
    font-weight: 600;
    color: #8a5a00;
    background: #fff6e5;
    border: 1px solid #f0dcae;
    border-radius: 8px;
}

/* El ancla no puede quedar pegada al borde al saltar desde el índice */
.legal section { scroll-margin-top: 1rem; }

/* Solo para lectores de pantalla */
.oculto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tabla-scroll { overflow-x: auto; }
.tabla-scroll table { white-space: normal; }

/* Móvil: la tabla se desplaza en vez de romper la página */
@media (max-width: 32rem) {
    body { padding: .75rem .5rem; }
    .caja { padding: 1.15rem; border-radius: 10px; }
    table { display: block; overflow-x: auto; white-space: nowrap; }

    /* Dos columnas de índice en un móvil no se leen: una sola. */
    .legal .indice ol { columns: 1; }
}