/* =====================================================================
   Academy — estilos propios
   =====================================================================
   Solo lo que Bootstrap no da. Todo lo demás son clases de Bootstrap 5.
   ===================================================================== */

/* ---------------------------------------------------------------------
   La identidad del ecosistema
   ---------------------------------------------------------------------
   Estos valores NO son invención: están medidos sobre la aplicación de
   referencia, Skill Arena, el 31 de julio de 2026.

     · #DEE3E6 y #295BA4 salen de su hoja corporativa (`style_dist.css`,
       reglas `header` y `footer`).
     · #516284 y #8B9CBA se midieron sobre los píxeles de su logotipo,
       `logo_skill_arena.scrum_manager.png`.
     · Roboto y Roboto Slab son las dos familias que carga su cabecera:
       `html, body` en Roboto y el texto de artículo en Roboto Slab.

   Se declaran como variables y no repartidas por el fichero, para que
   cambiar la marca del ecosistema sea cambiar cinco líneas.

   NO se copió su `style_dist.css` entero —4.679 líneas del sitio
   corporativo, con imágenes remotas y dependencias que Academy no usa— ni
   sus `var(--font-contrast-*)`, que allí están sin definir y por tanto
   rotas.
   --------------------------------------------------------------------- */
:root {
    --sm-cabecera:     #DEE3E6;
    --sm-pie:          #295BA4;
    --sm-marca-oscuro: #516284;
    --sm-marca-claro:  #8B9CBA;
    --sm-menu:         #444;
}

html, body {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Los titulares del ecosistema son más contenidos que los de Bootstrap. */
h1, .h1 { font-size: 2.125rem; font-weight: 700; line-height: 1.3; }
h2, .h2 { font-size: 1.75rem;  font-weight: 700; line-height: 1.3; }

/* ---------------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------------- */
header {
    padding: 1.5rem 0;
    background-color: var(--sm-cabecera);
}

header .navbar { padding-top: 0; padding-bottom: 0; }

header .menu,
header .navbar-nav .nav-link { color: var(--sm-menu); }

/* El logotipo, con la medida de la app de referencia: 50 px de alto. Su
   proporción es 3,64:1, así que ocupa unos 182 px de ancho. */
header .navbar-brand .logotype { max-height: 50px; width: auto; }

/* El nombre de la aplicación, al lado del logotipo. Va en el azul oscuro de
   la marca, el mismo con el que está dibujado «Scrum» en el logotipo, y con
   un filete a la izquierda que lo separa sin necesidad de más adorno. */
header .marca-nombre {
    color: var(--sm-marca-oscuro);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1;
    padding-left: 1rem;
    border-left: 1px solid var(--sm-marca-claro);
}

/* En móvil el logotipo baja a 36 px y el nombre se achica con él, para que la
   marca entera siga cabiendo al lado del botón del menú. */
@media (max-width: 575.98px) {
    header .navbar-brand .logotype { max-height: 36px; }
    header .marca-nombre {
        font-size: 1.15rem;
        padding-left: .6rem;
    }
}

/* ---------------------------------------------------------------------
   Pie
   ---------------------------------------------------------------------
   Azul corporativo y texto blanco, así que aquí NO valen las utilidades
   `text-muted` de Bootstrap: sobre este fondo no se leen.
   --------------------------------------------------------------------- */
footer {
    width: 100%;
    margin-top: auto;
    padding: 24px 0;
    background: var(--sm-pie);
    color: #fff;
}

footer a,
footer a:hover,
footer a:focus {
    color: #fff;
    text-decoration: none;
}

footer a:hover { text-decoration: underline; }

footer .list-inline li { display: inline; }

/* ---------------------------------------------------------------------
   Medida de línea para leer
   ---------------------------------------------------------------------
   El temario y las páginas de texto NO se leen a todo el ancho de la
   pantalla: una línea demasiado larga obliga al ojo a buscar el comienzo
   de la siguiente. 68 caracteres es una medida cómoda.
   --------------------------------------------------------------------- */
.contenido-lectura {
    max-width: 68ch;
    font-size: 1.05rem;
    line-height: 1.7;

    /* Roboto Slab, porque es lo que la app de referencia aplica al texto de
       artículo (`.article, article, .article-text`). Es la única decisión
       discutible de todo el retoque: una losa a 1,05rem se lee bien, pero un
       capítulo entero es mucho más texto que un artículo suyo. Para volver a
       Roboto basta borrar esta línea. */
    font-family: "Roboto Slab", Georgia, serif;
}

.contenido-lectura h2 {
    margin-top: 2rem;
    margin-bottom: .75rem;
    font-size: 1.5rem;
}

.contenido-lectura h3 {
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    font-size: 1.2rem;
}

.contenido-lectura img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
}

.contenido-lectura blockquote {
    border-left: 3px solid #dee2e6;
    padding-left: 1rem;
    color: #6c757d;
}

.contenido-lectura table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}

.contenido-lectura table th,
.contenido-lectura table td {
    border: 1px solid #dee2e6;
    padding: .5rem .75rem;
}

.contenido-lectura table th {
    background: #f8f9fa;
    text-align: left;
}

/* ---------------------------------------------------------------------
   Tarjetas del mosaico de aulas
   --------------------------------------------------------------------- */
.aula-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.aula-card:hover {
    transform: translateY(-2px);
}

/* La portada se muestra COMPLETA, y por eso no lleva altura fija.
   El contrato la norma desde el 4 de agosto de 2026: §3.1 pide proporción
   1,91:1, medida de referencia 1200×630, y el aviso 15 del validador salta si
   se desvía más de un 10 %. Así que la proporción va aquí y la altura sale del
   ancho de la tarjeta: 160 px fijos con «cover» recortaban un 13 % del alto en
   escritorio y hasta un 40 % en móvil, donde la tarjeta ocupa toda la anchura.
   Ahora crece con ella.

   «contain» y no «cover» porque el 10 % de margen del aviso 15 admite 16:9 y
   2:1 sin protestar, y porque una portada fuera de norma solo produce un aviso
   y se importa igual: con «contain» se vería entera con una banda al lado en
   vez de recortada. Con las que llegan hoy —las dos a 1200×630— las dos
   declaraciones dan exactamente el mismo resultado y no se ve banda ninguna. */
.aula-portada {
    aspect-ratio: 1200 / 630;
    width: 100%;
    object-fit: contain;
    background-color: #f8f9fa;
}

/* Sin portada declarada, un fondo genérico antes que un hueco blanco. Con los
   dos azules de la marca, y no con el morado de Bootstrap, que no es del
   ecosistema. */
.aula-portada-generica {
    background: linear-gradient(135deg, var(--sm-marca-oscuro), var(--sm-marca-claro));
}

/* El título del aula, en el azul de la marca. */
.aula-card .card-title {
    color: var(--sm-marca-oscuro);
}

/* ---------------------------------------------------------------------
   Menú de capítulos del aula
   --------------------------------------------------------------------- */
/* El menú fluye con la página: sin altura acotada, sin scroll propio y sin
   quedarse pegado. Las tres cosas son la misma decisión y no se pueden separar.
   Estuvo pegajoso y acotado a la ventana, y de ahí salían los dos defectos que
   el cliente vio: el enlace al PDF solapándose con la lista —el menú desplazado
   pasaba por encima de su hermano en flujo normal— y una barra de
   desplazamiento propia en la columna que aparecía y desaparecía según el zoom.
   Dejarlo pegajoso pero sin barra no es opción: un temario de 44 capítulos no
   cabe en la ventana, y su final quedaría fuera de la pantalla sin manera de
   llegar a él. */
.aula-menu-caja {
    padding-bottom: 1rem;
}

/* Cierra la lista, no se adorna: por eso el separador va arriba. */
.aula-menu-pdf {
    display: block;
    margin-top: .75rem;
    padding: .5rem .5rem 0;
    border-top: 1px solid #dee2e6;
    color: var(--sm-marca-oscuro);
}

.aula-menu-pdf:hover {
    text-decoration: underline !important;
}

.aula-menu-item {
    color: #212529;
}

.aula-menu-item:hover {
    background: #f1f3f5;
}

.aula-menu-actual {
    background: #e7f1ff;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Preguntas
   ---------------------------------------------------------------------
   El color solo llega DESPUÉS de responder, y nunca antes: el estado de
   una opción no se puede deducir del marcado.
   --------------------------------------------------------------------- */
.opcion {
    cursor: pointer;
    transition: background-color .12s ease;
}

.opcion:hover {
    background: #f8f9fa;
}

.pregunta.respondida .opcion {
    cursor: default;
}

.opcion-correcta {
    background: #d1e7dd;
    border-color: #a3cfbb !important;
}

.opcion-elegida-mal {
    background: #f8d7da;
    border-color: #f1aeb5 !important;
}

.escenario-contexto {
    border-color: #adb5bd !important;
    background: #f8f9fa;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* ---------------------------------------------------------------------
   Invaders
   ---------------------------------------------------------------------
   La caída es una animación CSS y no un bucle de JavaScript: el navegador
   la interpola en el compositor, así que va fluida también en un móvil
   modesto, y el JS solo se ocupa de los disparos.

   Aquí tampoco hay ninguna pista visual de qué palabra es válida: un
   señuelo y un válido se pintan igual, y solo se distinguen DESPUÉS de que
   el servidor corrija la oleada.
   --------------------------------------------------------------------- */
.inv-cielo {
    position: relative;
    height: 26rem;
    overflow: hidden;
    background: linear-gradient(#0b1226, #1c2c4c);
    border-radius: .5rem;
}

.inv-palabra {
    position: absolute;
    top: 0;
    /* La palabra cabe en 24 caracteres por contrato (§6.10), así que no
       necesita partirse nunca. */
    white-space: nowrap;
    transform: translateY(-3rem);
    animation-name: inv-caer;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    cursor: pointer;

    /* Se dispara con el dedo, así que el objetivo tiene que ser de dedo: los
       44 px de alto son el mínimo de las guías de accesibilidad, y aquí importa
       más que en un botón quieto porque este además se mueve. El tamaño de
       letra sube de los 0,75em del badge de Bootstrap a 1rem por lo mismo. */
    font-size: 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;

    /* Un toque mantenido sobre texto selecciona la palabra o abre el menú
       contextual, y en medio de una partida eso es un estorbo. `manipulation`
       le dice al navegador que aquí no hay doble toque para hacer zoom, que es
       lo que le hacía esperar antes de mandar el click. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@keyframes inv-caer {
    from { transform: translateY(-3rem); }
    to   { transform: translateY(26rem); }
}

/* Disparada o escapada: deja de contar y deja de estorbar. La animación se
   detiene donde estaba, para que se vea dónde le dio. */
.inv-palabra.inv-resuelta {
    animation-play-state: paused;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

/* Con el movimiento reducido, la partida deja de ser jugable tal cual, así
   que las palabras se quedan quietas y repartidas: es preferible a
   ignorar la preferencia del sistema. */
@media (prefers-reduced-motion: reduce) {
    .inv-palabra {
        animation: none;
        transform: none;
        position: static;
        /* inline-flex y no inline-block: la clase base usa flex para centrar el
           texto dentro de los 44 px de área táctil. */
        display: inline-flex;
        margin: .25rem;
    }
    .inv-cielo {
        height: auto;
        min-height: 12rem;
        padding: .75rem;
    }
}

/* ---------------------------------------------------------------------
   Píldora de certificación, cuando enlaza
   ---------------------------------------------------------------------
   La misma píldora se pinta como <span> o como <a> según haya URL de la
   landing configurada (views/layout/_pildora_certificacion.php). Como
   enlace no debe parecer un botón ni arrastrar el subrayado permanente de
   Bootstrap: se subraya al pasar por encima, y eso es justo lo que la
   distingue de la versión sin enlace.

   No se usa la clase .text-decoration-none de Bootstrap porque lleva
   !important y entonces el subrayado del hover no llegaría a aplicarse. */
.pildora-cert {
    text-decoration: none;
    cursor: pointer;
}

.pildora-cert:hover,
.pildora-cert:focus-visible {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Iconos de sesión de la cabecera (entrar / salir)
   ---------------------------------------------------------------------
   Los dos estados —anónimo e identificado— comparten clase a propósito:
   ocupan el mismo hueco entre el nombre del usuario y el selector de
   idioma, y con el mismo tamaño y color el cambio de icono no mueve nada
   alrededor. Sin texto visible: el rótulo va en title y aria-label, que es
   lo que leen el lector de pantalla y el tooltip. */
.sm-sesion {
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1;
    text-decoration: none;
}

.sm-sesion:hover,
.sm-sesion:focus-visible {
    color: var(--bs-primary, #0d6efd);
}