/*
 * Aspecto común del ecosistema Scrum Manager (§17 de las pautas).
 *
 * Solo la carga el frontend público. El backoffice tiene su propio aspecto,
 * fijado por el §4.3, y no debe verse afectado por esta hoja.
 *
 * Los cinco valores de la paleta van en `:root` a propósito: cambiar la
 * identidad del ecosistema debe ser cambiar cinco líneas, no buscar
 * hexadecimales por el fichero.
 */

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

/* --- Tipografía ---------------------------------------------------------- */

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

/* Texto largo de lectura: páginas estáticas como «Acerca de». */
.sm-lectura {
    font-family: "Roboto Slab", Georgia, serif;
    line-height: 1.7;
}

/* Titulares más contenidos que los de Bootstrap por omisión. */
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; }

/* --- Estructura: el pie se queda abajo en las páginas cortas ------------- */

/*
 * `css/main.css` deja el body como flex centrado con padding, pensado para una
 * página sin cabecera ni pie a sangre. Aquí se reajusta para que la cabecera y
 * el pie ocupen todo el ancho y el contenido siga centrado.
 */
body.sm-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/*
 * Todo lo que no sea la cabecera ni el pie va centrado y ocupa el alto sobrante.
 * Se escribe con `:not()` en vez de enumerar contenedores porque cada página del
 * juego usa el suyo (`.container`, `.main-content-wrapper`, `.game-wrapper`…) y
 * enumerarlos se olvida en cuanto aparece uno nuevo.
 */
body.sm-page > *:not(header):not(footer):not(script) {
    flex: 1 0 auto;
    margin-left: auto;
    margin-right: auto;
}

/* --- Cabecera común ------------------------------------------------------ */

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

header.sm-header .sm-header-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

header.sm-header .logotype {
    max-height: 50px;
    width: auto;
    display: block;
}

header.sm-header .sm-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: var(--sm-marca-oscuro);
}

/* Filete fino que separa el logotipo corporativo del nombre de la aplicación. */
header.sm-header .sm-brand-separator {
    width: 1px;
    height: 34px;
    background-color: var(--sm-marca-claro);
}

header.sm-header .sm-app-name {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--sm-marca-oscuro);
    white-space: nowrap;
}

header.sm-header nav.sm-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: auto;
    flex-wrap: wrap;
}

header.sm-header nav.sm-nav a {
    color: var(--sm-menu);
    text-decoration: none;
    font-size: .95rem;
}

header.sm-header nav.sm-nav a:hover {
    text-decoration: underline;
}

/*
 * Segundo nivel del menú: los hijos de un ítem se agrupan en un panel que
 * cuelga del padre, en vez de seguirle en la misma línea como un enlace más.
 *
 * Sin JavaScript. El panel se abre al pasar el ratón y también con el teclado,
 * porque `:focus-within` lo mantiene abierto mientras el foco esté en el padre
 * o en cualquiera de sus hijos; en pantallas táctiles lo abre el primer toque
 * sobre el padre, que es lo que le da el foco.
 *
 * El panel se ancla al borde izquierdo del padre. Si algún día un desplegable
 * queda tan a la derecha que se salga de la pantalla, la solución es anclarlo
 * con `right: 0`, no ensancharlo.
 */
header.sm-header .sm-nav-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* La flecha distingue a simple vista lo que despliega de lo que navega. */
header.sm-header .sm-nav-group > .sm-nav-group-label::after {
    content: "";
    display: inline-block;
    margin-left: .35rem;
    vertical-align: .15em;
    border: .3em solid transparent;
    border-bottom: 0;
    border-top-color: currentColor;
}

header.sm-header .sm-nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    flex-direction: column;
    min-width: 220px;
    max-width: calc(100vw - 2rem);
    padding: .5rem 0;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

header.sm-header .sm-nav-group:hover > .sm-nav-submenu,
header.sm-header .sm-nav-group:focus-within > .sm-nav-submenu {
    display: flex;
}

/*
 * Los enlaces del panel llevan `nav.sm-nav` en el selector para ganarle en
 * especificidad al subrayado de `nav.sm-nav a:hover`: aquí el resaltado lo da
 * el fondo de la fila, no el subrayado.
 */
header.sm-header nav.sm-nav .sm-nav-submenu a {
    padding: .4rem 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

header.sm-header nav.sm-nav .sm-nav-submenu a:hover {
    background-color: var(--sm-cabecera);
    text-decoration: none;
}

/* Bloque de usuario: avatar de 32 px o icono, y nombre oculto en pantallas pequeñas. */
.sm-user {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sm-user img.sm-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.sm-user .sm-user-name {
    font-size: .875rem;
    font-weight: 700;
    color: var(--sm-menu);
}

.sm-user .sm-login-btn {
    font-size: .875rem;
    padding: .25rem .75rem;
    border: 1px solid #0D6EFD;
    border-radius: .25rem;
    color: #0D6EFD;
    text-decoration: none;
    white-space: nowrap;
}

.sm-user .sm-login-btn:hover {
    background-color: #0D6EFD;
    color: #fff;
}

/* Selector de idioma, a la derecha del bloque de usuario. */
.sm-lang {
    font-size: .875rem;
    white-space: nowrap;
    color: var(--sm-menu);
}

.sm-lang a {
    color: var(--sm-menu);
    text-decoration: none;
}

.sm-lang a:hover { text-decoration: underline; }
.sm-lang strong  { color: #212529; }
.sm-lang .sm-lang-sep { color: #6c757d; margin: 0 .25rem; }

@media (max-width: 575.98px) {
    header.sm-header .logotype { max-height: 38px; }
    .sm-user .sm-user-name { display: none; }
}

/* --- Pie común ----------------------------------------------------------- */

footer.sm-footer {
    width: 100%;
    margin-top: auto;
    padding: 24px 0;
    background: var(--sm-pie);
    color: #fff;
}

/* Sobre el azul del pie no se leen los grises de Bootstrap: todo en blanco. */
footer.sm-footer a,
footer.sm-footer h4,
footer.sm-footer p,
footer.sm-footer li {
    color: #fff;
}

footer.sm-footer a { text-decoration: none; }
footer.sm-footer a:hover { text-decoration: underline; }

footer.sm-footer .sm-footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

footer.sm-footer .sm-footer-col {
    min-width: 200px;
    flex: 0 1 auto;
}

footer.sm-footer .sm-footer-col h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}

footer.sm-footer .sm-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer.sm-footer .sm-footer-col li { margin-bottom: .35rem; font-size: .9rem; }

footer.sm-footer .sm-social {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

footer.sm-footer .sm-social svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}

footer.sm-footer .sm-copyright {
    max-width: 1140px;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
    text-align: center;
    font-size: .85rem;
}

/* --- Paginación ---------------------------------------------------------- */

.sm-paginacion {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 1.5rem 0 .5rem;
}

.sm-paginacion .sm-pagina {
    min-width: 2rem;
    padding: .3rem .6rem;
    border: 1px solid #DEE2E6;
    border-radius: .25rem;
    text-align: center;
    font-size: .9rem;
    text-decoration: none;
    color: var(--sm-marca-oscuro);
    background: #fff;
}

.sm-paginacion .sm-pagina:hover { background: var(--sm-cabecera); }

.sm-paginacion .sm-pagina.activa {
    background: var(--sm-marca-oscuro);
    border-color: var(--sm-marca-oscuro);
    color: #fff;
    font-weight: 700;
}

.sm-paginacion .sm-pagina.deshabilitada {
    color: #ADB5BD;
    background: #F8F9FA;
}

/* --- Página estática ----------------------------------------------------- */

.sm-static {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.sm-static h1 { margin-top: 0; }
.sm-static img { max-width: 100%; height: auto; }
.sm-static pre { overflow-x: auto; background: #f6f8fa; padding: 1rem; border-radius: 4px; }
.sm-static table { width: 100%; border-collapse: collapse; }
.sm-static table th, .sm-static table td { border: 1px solid #dee2e6; padding: .5rem; }

/* --- Aviso de mantenimiento ---------------------------------------------- */

.sm-offline {
    max-width: 640px;
    margin: 0 auto;
    padding: 4rem 1rem;
    text-align: center;
}

.sm-offline h1 { color: var(--sm-marca-oscuro); }
.sm-offline p  { font-size: 1.1rem; line-height: 1.6; }

.sm-acciones { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

.sm-boton {
    display: inline-block;
    padding: .5rem 1.25rem;
    border-radius: .25rem;
    background-color: var(--sm-marca-oscuro);
    color: #fff;
    text-decoration: none;
    font-size: .95rem;
}

.sm-boton:hover { background-color: var(--sm-marca-claro); }

.sm-boton-secundario {
    background-color: transparent;
    color: var(--sm-marca-oscuro);
    border: 1px solid var(--sm-marca-oscuro);
}

.sm-boton-secundario:hover { background-color: var(--sm-cabecera); color: var(--sm-marca-oscuro); }

/* Avatar del bloque de usuario que pinta el JavaScript (§17.3). */
.user-auth-status img.avatar,
.sm-user img.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.user-auth-status a.login-icon img,
.sm-user a.login-icon img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}