/* ==========================================================================
   nav.css — Barra de navegación superior compartida.

   El markup .course-nav / .course-nav-inner / .nav-logo / .nav-btn se repite
   en varias páginas y su CSS estaba copiado en cinco sitios: mis_cursos.css,
   curso.css y, como <style> en línea, pages/verificar.html y
   pages/pago_resultado.html (esas dos con una variante propia más pobre:
   sin sticky, sin --nav-height y con otro radio de borde).

   Esta hoja es ahora la única definición: la usan las cuatro páginas.

   Es el superconjunto de las dos copias que sustituye, que NO eran idénticas
   entre sí. De mis_cursos.css viene la base; de curso.css se conservan cuatro
   cosas que allí estaban y en mis_cursos.css no:
     · .nav-breadcrumb (solo la usa pages/curso.html, pero es parte de la nav);
     · font-family: inherit en .nav-btn — sin él los <button> no heredan la
       tipografía de marca y salen con la del sistema;
     · el color repetido en los :hover, que neutraliza reglas a:hover globales.
   El literal #fdf07d de ambas copias pasa a --color-secondary-hover (mismo
   valor). Único cambio visual: .course-nav-inner queda en 1200px; curso.css
   la tenía en 1280, un valor huérfano —todos los contenedores de esa página
   son de 1200 o menos—, así que la barra iba 80px más ancha que el contenido
   que hay debajo. Si se quisiera recuperar, basta un override de 3 líneas.

   Los tokens viven en css/tokens.css, que se enlaza antes que esta hoja.
   No declarar :root acá.
   ========================================================================== */

.course-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-height);
    background: var(--color-primary-dark);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(253, 244, 160, 0.25);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.18);
}

.course-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.25s ease;
}

.nav-logo:hover {
    transform: scale(1.04);
}

.nav-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* "ONG" como etiqueta pequeña sobre el nombre, no como parte plana del texto. */
.nav-logo-name {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}

.nav-logo-tag {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    opacity: 0.85;
}

/* Migaja del aula: nombre del curso al lado del logo. */
.nav-breadcrumb {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    transition: all 0.25s ease;
    white-space: nowrap;
    /* Los <button> no heredan la tipografía: sin esto salen en la del
       sistema junto a los <a> de la misma barra. */
    font-family: inherit;
}

/* El color se repite en los :hover para ganarle a las reglas a:hover
   globales de la hoja de cada página. */
.nav-btn:hover {
    border-color: var(--color-secondary);
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    transform: translateY(-1px);
}

.nav-btn.primary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-primary-dark);
}

.nav-btn.primary:hover {
    background: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
    color: var(--color-primary-dark);
}

/* En pantallas estrechas cae el rótulo junto al logo (queda el isotipo) y los
   botones se aprietan, para que quepan las acciones. Estas dos reglas estaban
   duplicadas en mis_cursos.css y curso-overview.css. */
@media (max-width: 35rem) {
    .nav-logo span {
        display: none;
    }

    .nav-btn {
        padding: 0.45rem 0.75rem;
        font-size: 0.85rem;
    }
}