/* ==========================================================================
   Club Agile — hoja de estilos propia.
   Aspecto del frontend según §17 de las pautas del ecosistema Scrum Manager.
   ========================================================================== */

: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) */
html,
body {
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
    background-color: #F8F9FA;   /* fondo suave; las tarjetas blancas destacan */
}

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; }

/* Texto largo de lectura (páginas estáticas) */
.lectura {
    font-family: "Roboto Slab", Georgia, serif;
    max-width: 860px;
}

/* Layout: el pie queda abajo en las páginas cortas */
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1 0 auto;
}

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

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

/* Los dos logotipos son SVG sin width/height propios (solo viewBox): la
   altura va explícita y el ancho sale de la relación de aspecto. Con
   max-height y el enlace envolviendo la imagen, el ancho se resolvía a cero
   y el logotipo desaparecía. */
header .navbar-brand .logotype {
    height: 50px;
    width: auto;
}

header .navbar-brand .logo {
    height: 40px;
    width: auto;
}

/* El enlace del logotipo es un flex item del bloque de marca: que no encoja. */
header .navbar-brand .marca-logo {
    flex-shrink: 0;
    line-height: 0;
}

/* Nombre de la app junto al logotipo, separado por un filete fino (§17.5),
   como en el resto de aplicaciones del ecosistema (muestra: Academy) */
.app-name {
    border-left: 1px solid var(--sm-marca-claro);
    color: var(--sm-marca-oscuro);
    font-size: 1.65rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* El nombre es enlace a la home del Club (y el logotipo, al web corporativo):
   se comporta como enlace, pero sin pintarse como tal. */
a.app-name,
a.app-name:hover,
a.app-name:focus {
    color: var(--sm-marca-oscuro);
    text-decoration: none;
}

/* Títulos de área de la home: azul corporativo, como en la landing original */
.text-darkblue {
    color: var(--sm-pie) !important;
}

/* Bloque de usuario */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Pie (§17.4) — todo en blanco, sin utilidades de gris */
footer {
    width: 100%;
    margin-top: auto;
    padding: 24px 0;
    background: var(--sm-pie);
    color: #fff;
}

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

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

footer ul.list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

/* Tarjetas */
.clickable {
    cursor: pointer;
}

/* Tarjetas del área Academy: imagen en proporción OG (~1.91:1) */
.card-academy .academy-img {
    aspect-ratio: 1.91 / 1;
    width: 100%;
    object-fit: cover;
}

/* Rótulo de área de la home enlazado al mismo destino que su botón:
   se ve como el resto de rótulos (hereda color y peso del h2) y solo el
   subrayado al pasar por encima delata que es un enlace. */
.section-title-link {
    color: inherit;
    text-decoration: none;
}

.section-title-link:hover,
.section-title-link:focus-visible {
    color: inherit;
    text-decoration: underline;
}

/* Icono de salir de la cabecera, entre el nombre del usuario y ES | EN.
   Mismo tratamiento que en Academy: sin texto visible, el rótulo va en
   title y aria-label, que es lo que leen el tooltip y el lector de pantalla. */
.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);
}