/* nav.css — Componente compartido de navegación (Checkpoint 1). Se apoya en los tokens de static/catalogo/style.css (--color-*, --espacio-*, --fuente-*, --radio-borde, --ancho-borde-panel, etc.) — nav.js/nav.css se cargan siempre junto a ese sistema de diseño, nunca solos. */ .oculto { display: none !important; } :root { --nav-sidebar-ancho: 220px; --nav-movil-alto: 64px; } /* --- Sidebar de escritorio (>=768px) --- */ @media (min-width: 768px) { .nav-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--nav-sidebar-ancho); background: var(--color-tinta); padding: var(--espacio-lg) var(--espacio-md); overflow-y: auto; z-index: 50; display: flex; flex-direction: column; gap: var(--espacio-lg); } .nav-movil, .hoja-inferior, .hoja-inferior-overlay { display: none !important; } /* Corre el contenido de la página para que el sidebar fijo no lo tape. :has() en vez de pedirle a cada una de las 7 páginas que agregue una clase a mano en — alcanza con que la página incluya nav.js/ nav.css y llame a renderNav(), el margen aparece solo. Si alguna página define su propio margin/max-width en con un selector más específico que "body:has(...)", puede pisar esto — a revisar caso por caso en el checkpoint de integración a las 7 páginas reales. */ body:has(.nav-sidebar) { margin-left: var(--nav-sidebar-ancho); } } @media (max-width: 767px) { .nav-sidebar { display: none !important; } /* Deja lugar para que la barra inferior fija no tape el final del contenido (mismo criterio que el margin-left de escritorio). */ body:has(.nav-movil) { padding-bottom: var(--nav-movil-alto); } } .nav-marca { font-family: var(--fuente-display); font-size: var(--texto-xl); color: var(--color-panel); text-decoration: none; } .nav-marca:focus-visible { outline: 3px solid var(--color-halftone); outline-offset: 2px; } .nav-grupo { display: flex; flex-direction: column; gap: var(--espacio-xs); } .nav-grupo-titulo { font-family: var(--fuente-cuerpo); font-weight: 700; font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-panel); margin: 0 0 var(--espacio-xs); } .nav-link { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: var(--texto-base); color: var(--color-texto-sobre-oscuro); text-decoration: none; padding: var(--espacio-sm) var(--espacio-md); border-radius: var(--radio-borde); display: block; } .nav-link:hover { background: var(--color-tinta-suave); } .nav-link:focus-visible { outline: 3px solid var(--color-halftone); outline-offset: 2px; } /* Página activa: mismo criterio de color que .tab-boton[aria-selected="true"] (fondo --color-papel, texto --color-tinta — "el papel se asoma"), aplicado acá sobre el fondo oscuro del sidebar en vez del fondo claro de los tabs. */ .nav-link[aria-current="page"] { background: var(--color-papel); color: var(--color-tinta); font-weight: 700; } /* --- Barra inferior móvil (<768px) --- */ .nav-movil { position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-movil-alto); display: flex; background: var(--color-papel); border-top: var(--ancho-borde-panel) solid var(--color-tinta); z-index: 50; } .nav-movil-link { flex: 1 1 0; display: flex; align-items: center; justify-content: center; position: relative; font-family: var(--fuente-cuerpo); font-weight: 600; font-size: var(--texto-sm); color: var(--color-tinta); text-decoration: none; background: none; border: none; cursor: pointer; } .nav-movil-link:focus-visible { outline: 3px solid var(--color-halftone); outline-offset: -3px; } /* Página activa, o "Más" cuando la página activa vive dentro de la hoja — mismo acento (--color-alarma) que el resto del sistema usa para marcar estado destacado (ver badges), más una barra superior tipo "tab activo". */ .nav-movil-link[aria-current="page"], .nav-movil-link-activo { color: var(--color-alarma); font-weight: 700; } .nav-movil-link[aria-current="page"]::before, .nav-movil-link-activo::before { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; background: var(--color-alarma); } /* --- Hoja inferior ("Más") — mismo espíritu que .panel-lateral de static/catalogo/style.css (overlay + panel con foco atrapado, Escape cierra, foco vuelve al botón que la abrió), pero entra desde abajo en vez de la derecha. Componente nuevo, documentado en 05_estilo_codigo.md. --- */ .hoja-inferior { position: fixed; left: 0; right: 0; bottom: 0; max-height: 70vh; background: var(--color-papel); border-top: var(--ancho-borde-panel) solid var(--color-tinta); border-radius: var(--radio-borde) var(--radio-borde) 0 0; box-shadow: 0 -4px 0 var(--color-tinta); padding: var(--espacio-lg); overflow-y: auto; z-index: 100; } .hoja-inferior-overlay { position: fixed; inset: 0; background: rgba(26, 26, 46, 0.5); z-index: 99; } .hoja-inferior-titulo { font-family: var(--fuente-display); font-size: var(--texto-xl); color: var(--color-tinta); margin: 0 0 var(--espacio-md); } .hoja-inferior nav { display: flex; flex-direction: column; gap: var(--espacio-xs); margin-bottom: var(--espacio-md); } .hoja-inferior-link { font-family: var(--fuente-cuerpo); font-weight: 600; font-size: var(--texto-base); color: var(--color-tinta); text-decoration: none; padding: var(--espacio-sm) var(--espacio-md); border-radius: var(--radio-borde); display: block; } .hoja-inferior-link:hover { background: var(--color-papel-alt); } .hoja-inferior-link:focus-visible { outline: 3px solid var(--color-halftone); outline-offset: 1px; } .hoja-inferior-link[aria-current="page"] { background: color-mix(in srgb, var(--color-alarma) 12%, white); color: var(--color-alarma); font-weight: 700; } .nav-hoja-cerrar { width: 100%; }