/* =========================================================================
   Gamificación Scrum Manager — aspecto del frontend público (§17)
   Los cinco valores de la paleta viven en :root y se usan SIEMPRE por
   variable, nunca por hexadecimal repartido.
   ========================================================================= */

:root {
    --sm-cabecera:     #DEE3E6;   /* fondo de la cabecera */
    --sm-pie:          #295BA4;   /* fondo del pie, texto blanco */
    --sm-menu:         #444;      /* enlaces del menú de cabecera */
    --sm-marca-oscuro: #516284;   /* azul de «Scrum» en el logotipo */
    --sm-marca-claro:  #8B9CBA;   /* azul de «Manager»; filetes y degradados */
}

/* Tipografía (§17.2): Roboto para todo; Roboto Slab para texto de lectura */
html, body { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; }
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; }
.sm-lectura { font-family: "Roboto Slab", Georgia, serif; }

/* El pie se queda abajo en páginas cortas (§17.4) */
body { display: flex; flex-direction: column; min-height: 100vh; }

/* Cabecera (§17.3) */
header.sm-header { padding: 1.5rem 0; background-color: var(--sm-cabecera); }
header.sm-header .navbar-nav .nav-link { color: var(--sm-menu); }
header.sm-header .navbar-brand .logotype { max-height: 50px; width: auto; }
header.sm-header .sm-app-name {
    color: var(--sm-marca-oscuro);
    font-weight: 700;
    border-left: 2px solid var(--sm-marca-claro);
    padding-left: .75rem;
    margin-left: .75rem;
    line-height: 1.1;
}
@media (max-width: 575.98px) {
    header.sm-header .navbar-brand .logotype { max-height: 38px; }
    header.sm-header .sm-app-name { font-size: .9rem; }
}

/* Icono de sesión (entrar/salir), como en Academy: los dos estados comparten
   clase a propósito — ocupan el mismo hueco a la izquierda del 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(--sm-menu);
    line-height: 1;
    text-decoration: none;
}
.sm-sesion:hover,
.sm-sesion:focus-visible {
    color: var(--sm-marca-oscuro);
}

/* Pie (§17.4): blanco sobre azul; nada de text-muted aquí dentro */
footer.sm-footer { width: 100%; margin-top: auto; padding: 24px 0; background: var(--sm-pie); color: #fff; }
footer.sm-footer a { color: #fff; text-decoration: none; }
footer.sm-footer a:hover { text-decoration: underline; }
footer.sm-footer h6 { color: #fff; font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; }
footer.sm-footer ul { list-style: none; padding-left: 0; margin-bottom: 0; }
footer.sm-footer .sm-copyright { text-align: center; margin-top: 1rem; font-size: .9rem; }

/* Tarjetas de actividad de la portada */
.sm-card-actividad { transition: transform .15s ease, box-shadow .15s ease; }
.sm-card-actividad:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }
/* Hueco de imagen cuadrado, como en el sitio original (miniaturas 500×500) */
.sm-card-actividad .card-img-top { aspect-ratio: 1 / 1; object-fit: cover; background: var(--sm-cabecera); }
/* Píldora de nivel de acceso: mismo fondo que la banda de cabecera para todos los niveles */
.sm-pill {
    background-color: var(--sm-cabecera);
    color: var(--sm-marca-oscuro);
    font-weight: 500;
    border-radius: 50rem;
    padding: .4em .85em;
}