/* -- Site Navbar — Bar Aliquindoi ----------------------------------- 2026-08-21: barra única (fusiona lo que eran _infobar.html azul + _navbar.html blanca en una sola franja sticky). Ya no hay una segunda barra fija encima que compensar, así que top:0 en vez de top:48px, y sin padding-top extra en . */ .navbar { position: sticky; top: 0; z-index: 1200; background: #fff; border-bottom: 1px solid var(--t-line, #e8ddd5); box-shadow: 0 2px 12px rgba(0,0,0,.08); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; } .nav-right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-width: 0; } /* Logo */ .nav-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 800; font-size: 1.05rem; color: var(--t-text, #2d2d2d); flex-shrink: 0; } .nav-brand:hover { color: var(--t-accent); } .nav-logo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } /* Desktop links */ .nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; margin: 0; flex: 1; justify-content: center; } .nav-links a { position: relative; padding: .5rem .9rem; font-size: .85rem; font-weight: 600; color: var(--t-text, #2d2d2d); text-decoration: none; border-radius: 6px; transition: color .15s, background .15s; } .nav-links a::after { content: ''; position: absolute; bottom: 2px; left: .9rem; right: .9rem; height: 2px; background: var(--t-accent); border-radius: 2px; transform: scaleX(0); transition: transform .2s ease; transform-origin: center; } .nav-links a:hover { color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 10%, transparent); } .nav-links a:hover::after { transform: scaleX(1); } .nav-btn { padding: .4rem .9rem; border-radius: 7px; font-size: .78rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; background: none; color: var(--t-text, #2d2d2d); white-space: nowrap; } .nav-btn--ghost { border: 1.5px solid var(--t-line, #e8ddd5); } .nav-btn--ghost:hover { background: var(--t-bg, #fdf6f0); border-color: var(--t-accent); color: var(--t-accent); } .nav-btn--solid { background: var(--t-accent); color: #fff; } .nav-btn--solid:hover { filter: brightness(1.08); } .nav-auth { display: flex; align-items: center; gap: .4rem; } /* Estado abierto/cerrado — una sola vez, siempre visible (antes se duplicaba entre el infobar móvil y el nav de escritorio). */ .nav-estado-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 20px; letter-spacing: .03em; flex-shrink: 0; white-space: nowrap; } .nav-estado-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .nav-estado-badge--open { background: #d4f5e2; color: #1a7a40; } .nav-estado-badge--open .nav-estado-dot { background: #22c55e; animation: nav-pulse 2s infinite; } .nav-estado-badge--closed { background: #fde8e8; color: #b33; } .nav-estado-badge--closed .nav-estado-dot { background: #ef4444; } @keyframes nav-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } } /* Icono de ubicación/horario (sustituye al texto fijo del antiguo infobar azul) —

nativo, sin JS necesario para abrir/cerrar, solo para cerrar al hacer clic fuera (ver script en _navbar.html). */ .nav-info-pop { position: relative; flex-shrink: 0; } .nav-info-pop summary { list-style: none; cursor: pointer; } .nav-info-pop summary::-webkit-details-marker { display: none; } .nav-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--t-line, #e8ddd5); display: flex; align-items: center; justify-content: center; font-size: .95rem; color: var(--t-muted, #7a6a5a); background: #fff; transition: border-color .15s, color .15s; } .nav-info-pop:hover .nav-icon-btn, .nav-info-pop[open] .nav-icon-btn { border-color: var(--t-accent); color: var(--t-accent); } .nav-info-panel { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border: 1px solid var(--t-line, #e8ddd5); border-radius: 12px; box-shadow: 0 12px 32px rgba(13,59,58,.14); min-width: 230px; padding: .8rem .95rem; z-index: 150; } .nav-info-row { display: flex; align-items: flex-start; gap: .55rem; font-size: .82rem; color: var(--t-text, #2d2d2d); padding: .3rem 0; } .nav-info-row + .nav-info-row { border-top: 1px solid var(--t-line, #e8ddd5); } .nav-info-row a { color: var(--t-accent); text-decoration: underline; } .nav-info-ico { flex-shrink: 0; } /* Hamburguesa — ahora vive en la barra única, siempre visible */ .nav-hamburger { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--t-line, #e8ddd5); background: #fff; cursor: pointer; color: var(--t-text, #2d2d2d); transition: border-color .15s, background .15s; flex-shrink: 0; } .nav-hamburger:hover { border-color: var(--t-accent); } .nav-hamburger svg { width: 18px; height: 18px; } /* Dropdown submenu (sin cambios respecto a antes) */ .nav-item--has-sub { position: relative; } .nav-sub { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--t-line, #e8ddd5); border-radius: 12px; box-shadow: 0 12px 32px rgba(13,59,58,.14); min-width: 260px; padding: .5rem; z-index: 100; } .nav-item--has-sub:hover .nav-sub { display: block; } /* 2026-08-22 (bug real, Eduardo: "si pulsamos en el main, se abre el desplegable, pero no se mantiene abierto, se cierra al momento"). El desplegable solo abría con :hover -- en táctil (tablet/móvil) no existe un :hover persistente, así que al tocar el enlace el navegador seguía la navegación de inmediato, dando la sensación de "se abre y se cierra sola". static/js/base.js añade esta clase por JS solo en dispositivos sin :hover real (matchMedia), sin tocar el comportamiento de ratón en escritorio (que sigue abriendo con :hover normal). */ .nav-item--has-sub--open .nav-sub { display: block; } .nav-sub-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 8px; text-decoration: none; color: var(--t-text, #2d2d2d); transition: background .15s, transform .15s; } .nav-sub-item:hover { background: color-mix(in srgb, var(--t-accent) 8%, transparent); transform: translateX(2px); } .nav-sub-icon { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: color-mix(in srgb, var(--t-accent) 14%, transparent); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .nav-sub-text { display: flex; flex-direction: column; } .nav-sub-text b { font-size: .85rem; font-weight: 700; line-height: 1.3; } .nav-sub-text small { font-size: .72rem; color: var(--t-muted, #7a6a5a); margin-top: .1rem; } /* Responsive — un único criterio: ancho de pantalla. - Escritorio/tablet (>768px): logo a la izquierda, enlaces en medio, estado + ubicación + auth + hamburguesa a la derecha. - Móvil estrecho (≤768px): solo lo esencial cabe en la franja — logo + nombre, estado abierto/cerrado y hamburguesa. Enlaces, ubicación/horario y auth (Entrar/Salir/Registrarse) se pliegan dentro del menú ☰ (ver partials/_nsb_sidebar.html, que ya los lleva todos). */ @media (max-width: 768px) { .nav-links, .nav-info-pop, .nav-auth { display: none; } .nav-inner { grid-template-columns: 1fr auto; height: auto; padding: .7rem 1rem; } .nav-brand { max-width: 100%; min-width: 0; } .nav-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .nav-right { grid-column: 2; gap: .5rem; } /* WCAG/tactil: el area interactiva no puede depender del icono de 18 px. */ .nav-hamburger, .nav-icon-btn { min-width: 44px; min-height: 44px; } } @media (max-width: 420px) { .nav-brand span { font-size: .82rem; } .nav-estado-label { display: none; } /* solo el punto de color en pantallas muy estrechas */ }