/* ========================================
   Nombre:      alumno.css
   Descripcion: Pantallas del test del alumno con las medidas de placement.pen (Student 03, 04, 04b, 05 y M2, M3): barra clara con la marca (sin avatar: el alumno no es un usuario de la plataforma), progreso por secciones, opciones como tarjetas y cierre del test. Tambien las usa la vista previa del editor de preguntas. El ingreso suma el fondo de Anglia y el selector de idioma (espanol o ingles)
   Version:     0.4.0
   Creado:      20-09-2026
   Modificado:  16-10-2026
   Autor:       Sebastian Toyos
   ======================================== */

/* ========================================
   1. Barra del alumno
   ======================================== */
.barra-alumno {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    height: 64px;
    padding: 0 32px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-nav);
    color: var(--text-primary);
}

.barra-marca { gap: 12px; }

.barra-nombre {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--accent);
}

.barra-separador {
    width: 1px;
    height: 20px;
    background: var(--border);
}

.barra-app {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.barra-alumno-nombre {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.barra-alumno-codigo {
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted);
}

/* ========================================
   2. Pregunta
   ======================================== */
.cuerpo-test { padding: 28px 24px 40px; }

.columna-test { max-width: 760px; }
.columna-test.columna-ancha { max-width: 1000px; }

.formulario-pregunta { gap: 28px; }

.progreso { gap: 10px; }

.progreso-numero {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-text);
}

.progreso-seccion {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.barra-secciones { gap: 6px; }

.seccion {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-surface);
}

.seccion.hecha { background: var(--accent); }
.seccion.actual { background: var(--accent-bg-strong); }

.pregunta-y-opciones { gap: 24px; }

.pregunta { gap: 10px; }

/* Con audio (Student 04b) la consigna, el reproductor, el aviso y el enunciado van a 14 px */
.pregunta.con-audio,
.pregunta-audio { gap: 14px; }

.pregunta-consigna {
    font-size: 14px;
    color: var(--text-secondary);
}

.pregunta-enunciado {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
}

.pregunta-imagen {
    display: block;
    width: 100%;
    max-height: 345px;
    border-radius: 12px;
    object-fit: cover;
}

/* Reproductor de las preguntas con audio (Student 04b): boton redondo, titulo, tiempo, pista y volumen */
/* El borde de 1 px cuenta para los 76 px de alto del mockup: por eso el padding es 13/15 y no 14/16 */
.reproductor-audio {
    gap: 14px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
}


.reproductor-play {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.reproductor-play:hover { background: var(--accent-hover); }

.reproductor-play:disabled {
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: default;
}

/* El triangulo de play queda centrado a ojo con un pixel a la derecha */
.reproductor-play .fa-play { margin-left: 2px; }

.reproductor-pista {
    gap: 6px;
    min-width: 0;
}

.reproductor-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.con-error .reproductor-titulo { color: var(--error); }

.reproductor-tiempo {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.reproductor-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-surface);
    cursor: pointer;
}

/* La pista mide 6 px: la zona donde se puede tocar es mas alta */
.reproductor-track::before {
    content: "";
    position: absolute;
    inset: -10px 0;
}

.reproductor-track:focus-visible { box-shadow: 0 0 0 3px var(--accent-bg-strong); outline: 0; }

.reproductor-progreso {
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
}

.reproductor-volumen {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
}

.reproductor-volumen:hover { color: var(--text-primary); }

.aviso-test {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ========================================
   3. Opciones: una tarjeta por opcion, el radio queda oculto con .btn-check de Bootstrap
   ======================================== */
.opciones-test { gap: 12px; }

.opcion-test {
    gap: 14px;
    margin: 0;
    /* 14/16 del mockup menos el borde de 1.5 px: la tarjeta mide 60 px con el borde incluido.
       El alto minimo la deja en 60 tambien donde el navegador dibuja el borde de 1.5 como 1 px */
    min-height: 60px;
    padding: 12.5px 14.5px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.opcion-test:hover { border-color: var(--accent); }

.opcion-letra {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
}

.opcion-texto {
    font-size: 16px;
    color: var(--text-primary);
}

.opcion-check {
    visibility: hidden;
    font-size: 20px;
    color: var(--accent);
}

/* El borde pasa de 1.5 a 2 px: el padding baja medio pixel para que la tarjeta no salte */
.opcion-radio:checked + .opcion-test,
.opcion-test.elegida {
    padding: 12px 14px;
    border: 2px solid var(--accent);
    background: var(--accent-bg);
}

.opcion-radio:checked + .opcion-test .opcion-letra,
.opcion-test.elegida .opcion-letra {
    background: var(--accent);
    color: var(--on-accent);
}

.opcion-radio:checked + .opcion-test .opcion-check,
.opcion-test.elegida .opcion-check { visibility: visible; }

.opcion-radio:focus-visible + .opcion-test { box-shadow: 0 0 0 3px var(--accent-bg-strong); }

/* ========================================
   4. Pie de la pregunta
   ======================================== */
.pie-test {
    gap: 16px;
    padding-top: 8px;
}

.avisos-test { gap: 6px; }

.btn-siguiente { padding: 12px 28px; }

/* ========================================
   5. Cierre del test
   ======================================== */
.cuerpo-fin {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 64px);
}

.cuerpo-fin .columna-test { width: 100%; }

.tarjeta-fin {
    max-width: 560px;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: none;
}

.tarjeta-fin-cuerpo {
    gap: 20px;
    padding: 44px 48px;
}

.icono-exito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ok-bg);
    color: var(--ok);
    font-size: 36px;
}

.fin-textos { gap: 10px; }

.fin-titulo {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
}

.fin-mensaje {
    font-size: 16px;
    color: var(--text-secondary);
}

.fin-resultado {
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-subtle);
}

.fin-etiqueta {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.fin-nivel {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--accent-bg);
    color: var(--accent-text);
    font-size: 18px;
    font-weight: 700;
}

.fin-numero {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.fin-etiqueta-suave,
.fin-nota {
    font-size: 12px;
    color: var(--text-muted);
}

/* ========================================
   6. Mobile (Student M1 a M3)
   ======================================== */
@media (max-width: 767px) {
    .barra-alumno {
        height: 56px;
        padding: 0 16px;
    }

    .barra-marca { gap: 8px; }
    .barra-nombre { font-size: 18px; }
    .barra-app { font-size: 12px; }

    /* La columna ocupa el alto de la pantalla para que el pie quede abajo aunque la pregunta sea corta */
    .cuerpo-test {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 56px);
        padding: 14px 16px 0;
    }

    .cuerpo-test .columna-test {
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 100%;
    }

    .formulario-pregunta {
        flex: 1;
        gap: 14px;
    }
    .progreso { gap: 8px; }
    .progreso-numero,
    .progreso-seccion { font-size: 11px; }
    .barra-secciones { gap: 4px; }
    .seccion { height: 5px; }

    .pregunta-y-opciones { gap: 14px; }
    .pregunta { gap: 4px; }

    /* M2b: con audio todo el cuerpo va a 12 px */
    .pregunta-y-opciones.con-audio,
    .pregunta.con-audio,
    .pregunta-audio { gap: 12px; }
    .pregunta-consigna { font-size: 13px; }
    .pregunta-enunciado { font-size: 21px; }
    .pregunta-imagen { max-height: 190px; }

    .reproductor-audio {
        gap: 10px;
        padding: 9px 11px;
    }

    .reproductor-play {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .opciones-test { gap: 8px; }

    .opcion-test {
        gap: 12px;
        min-height: 52px;
        padding: 10.5px 12.5px;
    }

    .opcion-radio:checked + .opcion-test { padding: 10px 12px; }

    .opcion-letra {
        width: 28px;
        height: 28px;
    }

    .opcion-texto { font-size: 15px; }

    /* Pie fijo: el boton siempre a mano, con el aviso debajo */
    .pie-test {
        position: sticky;
        bottom: 0;
        gap: 8px;
        margin: auto -16px 0;
        padding: 12px 16px 20px;
        border-top: 1px solid var(--border);
        background: var(--bg-nav);
    }

    .avisos-test { align-items: center; }
    .aviso-test { font-size: 11px; }

    .btn-siguiente {
        width: 100%;
        padding: 15px 20px;
        font-size: 16px;
    }

    .cuerpo-fin { align-items: flex-start; }

    .tarjeta-fin {
        border: 0;
        background: transparent;
    }

    .tarjeta-fin-cuerpo { padding: 26px 4px; }
    .fin-titulo { font-size: 26px; }
    .fin-mensaje { font-size: 15px; }
    .fin-resultado { padding: 18px; }
    .fin-nivel { padding: 6px 12px; font-size: 16px; }
    .fin-numero { font-size: 20px; }
    .btn-volver { width: 100%; padding: 14px 20px; }
}

/* ========================================
   7. Ingreso del alumno: fondo de Anglia y la pantalla en espanol o en ingles con el selector de banderas (pedido de Anglia,
      16-10-2026). La estructura es la pantalla dividida de app.css; el login del panel y el instalador siguen como estaban
   ======================================== */
.ingreso-alumno .panel-marca {
    background: var(--brand-indigo) url("../img/fondo-ingreso.webp") center / cover no-repeat;
}

/* El servidor escribe los dos idiomas y se ve el de data-idioma. El selector no lleva lang: queda siempre a la vista */
.ingreso-alumno[data-idioma="es"] [lang="en"],
.ingreso-alumno[data-idioma="en"] [lang="es"] {
    display: none;
}

/* Selector de idioma sobre el fondo: el elegido en blanco */
.selector-idioma { background-color: rgba(255, 255, 255, 0.12); }

.selector-idioma .btn {
    font-weight: 600;
    text-transform: none;
    color: var(--on-brand);
    background-color: transparent;
    box-shadow: none;
}

.selector-idioma .btn:hover { background-color: rgba(255, 255, 255, 0.12); }

.selector-idioma .btn-check:checked + .btn {
    color: var(--brand-indigo);
    background-color: var(--on-brand);
}

.selector-idioma img {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.ingreso-alumno .reglas { gap: 10px; }

.ingreso-alumno .reglas li {
    padding: 12px 16px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.08);
}

.ingreso-alumno .regla-icono {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--brand-indigo);
}

.ingreso-alumno .boton-ir-ingreso { color: var(--brand-indigo); }

/* app.css esconde las reglas debajo de 992px; en el ingreso van, con el boton que baja al formulario */
@media (max-width: 991px) {
    .ingreso-alumno .panel-marca .reglas { display: flex; }
    .ingreso-alumno .boton-ir-ingreso { margin-top: 28px; }
}