/* Mobile-first: el alumno entra desde el teléfono, en un laboratorio, apurado y con guantes.
   Objetivos táctiles grandes, contraste alto, nada de hover como única señal. */

/* Tema oscuro, sin alternativa clara: la app se usa siempre igual y una sola paleta es una
   sola cosa que mantener. El fondo no es negro puro a propósito — sobre negro, el texto
   claro "vibra" y los bordes de 1px desaparecen. */

:root {
    color-scheme: dark;             /* que los checkbox y selects nativos también sean oscuros */

    --fondo:        #101319;        /* la página */
    --papel:        #191d26;        /* tarjetas, filas de tabla, campos */
    --papel-alto:   #212734;        /* realce al pasar por encima */
    --tinta:        #e9edf4;
    --tinta-suave:  #98a3b5;
    /* Dos bordes, no uno. En oscuro las tarjetas casi no se despegan del fondo por relleno,
       así que el borde carga con el trabajo. El estructural (separar filas, dividir zonas)
       va callado; el de los controles va fuerte, para que lo tocable se vea tocable. */
    --borde:        #333b49;
    --borde-fuerte: #596170;
    --acento:       #62a8f5;
    --acento-tinta: #0b0e14;        /* texto sobre el acento: oscuro sobre celeste */

    /* Los tres que significan algo en la corrección. Cada uno con su fondo apagado, para
       teñir una celda entera sin que el número deje de leerse. */
    --ok:           #55d896;
    --ok-fondo:     #102d20;
    --error:        #ff8b83;
    --error-fondo:  #35191b;
    --aviso:        #f2b950;
    --aviso-fondo:  #2f2612;
    --info-fondo:   #16202e;

    --radio:        10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.hoja {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
}

h1 { font-size: 1.4rem; margin: .2rem 0 .1rem; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
p  { margin: .5rem 0; }

a { color: var(--acento); }

.suave    { color: var(--tinta-suave); }
.chico    { font-size: .85rem; }
.centrado { text-align: center; }

.tarjeta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem;
    margin: .75rem 0;
}

/* ── Encabezado de identidad ────────────────────────────────────────────────────────── */

.encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: .5rem;
}

.credencial { font-size: .85rem; color: var(--tinta-suave); }
.credencial strong { color: var(--tinta); font-size: 1rem; display: block; }

/* ── Botones ────────────────────────────────────────────────────────────────────────── */

.boton,
button.boton,
a.boton {
    display: inline-block;
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--acento);
    border-radius: var(--radio);
    background: var(--acento);
    color: var(--acento-tinta);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.boton--secundario {
    background: transparent;
    color: var(--acento);
}

.boton--fantasma {
    background: transparent;
    color: var(--tinta-suave);
    border-color: var(--borde-fuerte);
    font-weight: 500;
}

.boton:disabled { opacity: .5; cursor: not-allowed; }

.boton + .boton { margin-top: .5rem; }

.boton--chico {
    width: auto;
    padding: .4rem .7rem;
    font-size: .85rem;
}

/* ── Listas de elección (comisión, alumno) ──────────────────────────────────────────── */

.grilla-comisiones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: .5rem;
}

.grilla-comisiones a {
    display: block;
    padding: .8rem .3rem;
    text-align: center;
    background: var(--papel);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    text-decoration: none;
    color: var(--tinta);
    font-weight: 600;
}

.grilla-comisiones a span {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    color: var(--tinta-suave);
}

/* ── Casillas de catión ─────────────────────────────────────────────────────────────── */

.cationes { list-style: none; margin: 0; padding: 0; }

.cationes li { margin: 0 0 .5rem; }

.cationes label {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--papel);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    cursor: pointer;
}

.cationes input { width: 1.35rem; height: 1.35rem; accent-color: var(--acento); flex: none; }

.cationes label:has(input:checked) {
    border-color: var(--acento);
    box-shadow: inset 0 0 0 1px var(--acento);
}

.formula { font-size: 1.05rem; font-weight: 600; }
.cationes label .suave { margin-left: auto; font-size: .8rem; }

/* ── Progreso de la marcha ──────────────────────────────────────────────────────────── */

.pasos { list-style: none; margin: 0; padding: 0; }

.paso {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--papel);
    margin-bottom: .4rem;
}

.paso__n {
    flex: none;
    width: 1.9rem; height: 1.9rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--fondo);
    border: 1px solid var(--borde);
    font-weight: 700; font-size: .85rem;
}

.paso--hecho    .paso__n { background: var(--ok-fondo);  border-color: var(--ok);     color: var(--ok); }
.paso--actual   { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.paso--actual   .paso__n { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.paso--bloqueado { opacity: .55; }

.paso__texto { flex: 1; min-width: 0; }
.paso__nombre { font-weight: 600; font-size: .92rem; }
.paso__puntos { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Devolución ─────────────────────────────────────────────────────────────────────── */

.veredicto { list-style: none; margin: .5rem 0; padding: 0; }

.veredicto li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
    border-radius: var(--radio);
    margin-bottom: .35rem;
    border: 1px solid transparent;
}

.veredicto__signo { flex: none; font-weight: 700; width: 1.2rem; text-align: center; }
.veredicto__puntos { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.v-acierto      { background: var(--ok-fondo);    border-color: var(--ok);    }
.v-falso        { background: var(--error-fondo); border-color: var(--error); }
.v-repetido     { background: var(--info-fondo);  border-color: var(--borde); }
.v-omitido      { background: var(--aviso-fondo); border-color: var(--aviso); }

.v-acierto  .veredicto__signo { color: var(--ok); }
.v-falso    .veredicto__signo { color: var(--error); }
.v-omitido  .veredicto__signo { color: var(--aviso); }

.marcador {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .9rem 1rem;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.marcador__valor { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Avisos ─────────────────────────────────────────────────────────────────────────── */

.aviso {
    padding: .75rem 1rem;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    background: var(--info-fondo);
    margin: 0 0 .75rem;
}

.aviso--ok    { background: var(--ok-fondo);    border-color: var(--ok);    color: var(--ok); }
.aviso--error { background: var(--error-fondo); border-color: var(--error); color: var(--error); }
.aviso--info  { background: var(--info-fondo); }

/* ── Formularios ────────────────────────────────────────────────────────────────────── */

label.campo { display: block; margin: .75rem 0; font-size: .88rem; color: var(--tinta-suave); }

input[type=text], input[type=password], input[type=number], select, textarea {
    display: block;
    width: 100%;
    margin-top: .25rem;
    padding: .7rem .8rem;
    font: inherit;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
}

textarea { min-height: 8rem; resize: vertical; }

/* ── Tablas del panel docente ───────────────────────────────────────────────────────── */

.desborde { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { border-collapse: collapse; width: 100%; font-size: .88rem; background: var(--papel); }

th, td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--borde);
    text-align: left;
    white-space: nowrap;
}

th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-suave); }

tbody tr:hover { background: var(--papel-alto); }

.celda { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.celda--pendiente { color: var(--tinta-suave); font-weight: 400; }
.celda--propuesto { background: var(--info-fondo); color: var(--acento); }
.celda--bien      { background: var(--ok-fondo);    color: var(--ok); }
.celda--regular   { background: var(--aviso-fondo); color: var(--aviso); }
.celda--mal       { background: var(--error-fondo); color: var(--error); }

.barra-nav {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin: .5rem 0 1rem;
}

.barra-nav a {
    padding: .45rem .8rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--papel);
    text-decoration: none;
    font-size: .85rem;
}

.barra-nav a.activo { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); }

.fila-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.etiqueta-muestra {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--info-fondo);
    border: 1px solid var(--borde);
    font-size: .78rem;
    font-weight: 600;
}