/* Logo de ENREN (<x-marca>) y animación del encabezado de la homepage — rebranding 2026-10. Ver docs/marca.md */

/* ── <x-marca>: versión para fondo claro u oscuro ───────────────────────────────────────────────────────── */
.marca { display: inline-flex; align-items: center; line-height: 0; }
.marca-img { height: var(--marca-alto, 32px); width: auto; display: block; }
.marca-img--sobre-oscuro { display: none; }
[data-theme="dark"] .marca-img--sobre-claro { display: none; }
[data-theme="dark"] .marca-img--sobre-oscuro { display: block; }

/* ── Navbar de la homepage: logo completo arriba del todo → isotipo animado al desplazarse ───────────────── */
.navbar .logo { gap: 0; position: relative; }
.navbar .logo .marca { transition: max-width .35s ease, opacity .25s ease, margin .35s ease; overflow: hidden; }
.navbar .logo .marca--completo { max-width: 240px; opacity: 1; }
.navbar .logo .marca--animado { max-width: 0; opacity: 0; }

.navbar.scrolled .logo .marca--completo { max-width: 0; opacity: 0; }
.navbar.scrolled .logo .marca--animado { max-width: 48px; opacity: 1; }

/* Navbar un poco más baja al desplazarse (escritorio); en móvil ya tiene su propio ajuste */
@media (min-width: 769px) {
    .navbar .nav-container { transition: padding .3s ease; }
    .navbar.scrolled .nav-container { padding-top: .55rem; padding-bottom: .55rem; }
}

/* Sin animaciones si el usuario las desactivó: el cambio de logo es instantáneo */
@media (prefers-reduced-motion: reduce) {
    .navbar .logo .marca,
    .navbar .nav-container { transition: none; }
}

/* Encabezado en móvil: el logo completo no debe empujar los iconos de la derecha */
@media (max-width: 480px) {
    .navbar .logo .marca--completo .marca-img { height: 28px; }
    .navbar .logo .marca--completo { max-width: 170px; }
}

/* ── Utilidades de marca ─────────────────────────────────────────────────────────────────────────────────── */
.marca-solo-lectores { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.marca-movil { display: none; }
@media (max-width: 480px) {
    .marca-escritorio { display: none; }
    .marca-movil { display: inline-flex; }
}
/* Título de las pantallas de acceso: el logo centrado en lugar del texto */
.marca-titulo { display: flex; justify-content: center; align-items: center; margin: 0 0 .5rem; line-height: 0; }
/* Marca monocroma de pie de página: discreta */
.marca--mono, .marca--isotipo-mono { opacity: .75; }
.marca-pie { display: flex; justify-content: center; margin: 0 auto .6rem; }
.marca--mono svg, .marca--isotipo-mono svg { height: var(--marca-alto, 22px); width: auto; display: block; }
/* Pies de las pantallas de acceso (fondo degradado oscuro): marca monocroma en blanco */
.admin-footer--login .marca-pie, .cliente-footer--auth .marca-pie, .colaborador-footer--auth .marca-pie { color: #fff; }