/* Site navigation: green header band, top bar with panels (desktop), tab bar (phone), green footer band.
   Contrast: white on #17604f 7.4:1, #f4d35e on #17604f 5.1:1, #17352f on #f4d35e 9.0:1. */
:root { --brand: #17604f; --brand-hover: rgb(255 255 255 / 14%); --accent: #f4d35e; --accent-ink: #17352f; --header-h: 64px; --tab-h: 64px; }

/* ---- Header band ---- */
.site-header { width: 100%; min-height: var(--header-h); margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px max(16px, calc((100% - 1120px) / 2)); color: #fff; background: var(--brand); border: 0; }
.site-header .brand { color: inherit; }
.site-header .brand-symbol { color: var(--brand); background: #fff; }
.site-header .brand-name small { color: rgb(255 255 255 / 82%); }
.site-header .theme-toggle { color: #fff; background: transparent; border-color: rgb(255 255 255 / 40%); }
.site-header .theme-toggle[aria-pressed="false"] .theme-light,
.site-header .theme-toggle[aria-pressed="true"] .theme-dark { color: var(--brand); background: #fff; }
.site-header :focus-visible, .site-footer :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- Panels (popover; .is-open is the fallback for browsers without popover) ---- */
.nav-panel { z-index: 1200; inset: auto; margin: 0; padding: 20px; gap: 16px 28px; overflow: auto; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 16px; box-shadow: 0 18px 40px rgb(16 34 29 / 18%); text-align: left; }
.nav-panel:popover-open { display: grid; }
.nav-panel.is-open { display: grid; }
/* Closed panels: hidden by navigation.js in old browsers, and by @supports when that script cannot run. */
.nav-fallback .nav-panel:not(.is-open) { display: none; }
@supports not selector(:popover-open) { .nav-panel:not(.is-open) { display: none; } }
.nav-panel h2 { margin: 0 0 6px; color: var(--green); font: 700 .75rem/1.3 "Hanken Grotesk", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.nav-panel ul { margin: 0 0 12px; padding: 0; list-style: none; }
.nav-panel li a { display: flex; align-items: center; min-height: 40px; margin-left: -8px; padding: 0 8px; border-radius: 8px; color: var(--ink); font-weight: 600; text-decoration: none; }
.nav-panel li a:hover { background: var(--wash); text-decoration: underline; text-underline-offset: .2em; }
.nav-panel-all { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.nav-panel-all a { color: var(--green); font-weight: 700; }

/* ---- Desktop: horizontal bar ---- */
.site-nav { display: none; }
.site-nav-item { display: inline-flex; align-items: center; gap: 4px; min-height: 42px; padding: 0 14px; color: #fff; background: transparent; border: 0; border-radius: 999px; font: inherit; font-size: .95rem; font-weight: 650; cursor: pointer; }
.site-nav-item:hover { background: var(--brand-hover); }
.nav-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.site-nav-search { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; margin-left: 8px; padding: 0 18px; color: var(--accent-ink); background: var(--accent); border-radius: 999px; box-shadow: 0 2px 0 rgb(0 0 0 / 18%); font-size: .95rem; font-weight: 700; text-decoration: none; }
.site-nav-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.site-nav-item[aria-expanded="true"] { color: var(--brand); background: #fff; }
.site-nav:has(#nav-panel-puntos:popover-open) .nav-puntos,
.site-nav:has(#nav-panel-guias:popover-open) .nav-guias,
.site-nav:has(#nav-panel-planifica:popover-open) .nav-planifica { color: var(--brand); background: #fff; }
.site-nav .nav-panel { position: absolute; top: calc(var(--header-h) + 6px); left: 50%; width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - var(--header-h) - 24px); transform: translateX(-50%); }
@supports (top: anchor(bottom)) {
  .site-header { anchor-name: --site-header; }
  .site-nav .nav-panel { position-anchor: --site-header; top: calc(anchor(bottom) + 6px); }
}
.nav-panel-puntos { grid-template-columns: minmax(180px, 1fr) 3fr; }
.nav-panel-guias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav-panel-planifica { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-districts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.nav-districts li a { min-height: 36px; font-weight: 500; }

/* ---- Phone: tab bar ---- */
.tab-bar { position: fixed; inset: auto 0 0 0; z-index: 1100; display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); background: var(--brand); box-shadow: 0 -6px 20px rgb(16 34 29 / 22%); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: var(--tab-h); padding: 0; color: rgb(255 255 255 / 88%); background: none; border: 0; font: inherit; font-size: .74rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.tab svg { box-sizing: content-box; width: 22px; height: 22px; padding: 4px 16px; border-radius: 999px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.tab[aria-expanded="true"] { color: #fff; font-weight: 800; }
.tab[aria-expanded="true"] svg { color: var(--accent-ink); background: var(--accent); }
.tab-bar:has(#nav-panel-mas:popover-open) .nav-planifica { color: #fff; font-weight: 800; }
.tab-bar:has(#nav-panel-mas:popover-open) .nav-planifica svg { color: var(--accent-ink); background: var(--accent); }
.tab-bar .nav-sheet { position: fixed; top: auto; left: 8px; right: 8px; width: auto; bottom: calc(var(--tab-h) + 8px + env(safe-area-inset-bottom)); max-height: 70vh; grid-template-columns: 1fr; gap: 4px; }
body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
/* Blurred with the page while a consent dialog is open (see consent-v3.css). */
html:is(.show--consent, .show--preferences) .tab-bar { filter: blur(5px); }

@media (min-width: 1000px) {
  :root { --header-h: 76px; }
  .site-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .tab-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---- "You are here": the same yellow pill on both bars ---- */
[data-nav="puntos"] .site-nav .nav-puntos,
[data-nav="guias"] .site-nav .nav-guias,
[data-nav="planifica"] .site-nav .nav-planifica,
[data-nav="lista"] .site-nav .nav-lista { color: var(--accent-ink); background: var(--accent); }
[data-nav="buscar"] .site-nav .nav-buscar { box-shadow: 0 0 0 2px #fff; }
[data-nav="buscar"] .tab-bar .nav-buscar, [data-nav="puntos"] .tab-bar .nav-puntos, [data-nav="guias"] .tab-bar .nav-guias,
[data-nav="lista"] .tab-bar .nav-lista, [data-nav="planifica"] .tab-bar .nav-planifica { color: #fff; font-weight: 800; }
[data-nav="buscar"] .tab-bar .nav-buscar svg, [data-nav="puntos"] .tab-bar .nav-puntos svg, [data-nav="guias"] .tab-bar .nav-guias svg,
[data-nav="lista"] .tab-bar .nav-lista svg, [data-nav="planifica"] .tab-bar .nav-planifica svg { color: var(--accent-ink); background: var(--accent); }

/* ---- Footer band ---- */
.site-footer { width: 100%; margin: 32px 0 0; padding: 20px max(16px, calc((100% - 1120px) / 2)) 28px; color: rgb(255 255 255 / 85%); background: var(--brand); border: 0; }
.site-footer a { color: #fff; }
.site-footer .analytics-settings { min-height: 40px; padding: 0 14px; color: #fff; background: transparent; border: 1px solid rgb(255 255 255 / 50%); border-radius: 999px; }

/* The map picker has no header or footer; it keeps no tab bar either. */
.map-page .tab-bar { display: none; }
.map-page { padding-bottom: 0; }
@media print { .tab-bar { display: none; } }