:root {
  color-scheme: light;
  --ink: #17211b;
  --muted: #657268;
  --line: #d8ded6;
  --panel: #ffffff;
  --surface: #f5f7f3;
  --route: #2f6f9f;
  --space: #2e7d4f;
  --zone: #9a6a16;
  --locality: #7856a6;
  --danger: #ad3d32;
  --focus: #0d5f7a;
  --shadow: 0 10px 30px rgba(28, 39, 32, 0.11);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--surface);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-page="home"] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -48px;
  z-index: 1200;
  border-radius: 6px;
  background: var(--focus);
  color: #fff;
  padding: 9px 12px;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  border-right: 1px solid var(--line);
  background: #fbfcfa;
}

.brand {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.brand h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0;
}

.brand p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.icon-btn,
.small-btn,
.segment,
.tab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-weight: 700;
}

.toolbar {
  display: grid;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.search,
.select-row {
  display: grid;
  gap: 6px;
}

.search span,
.select-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.search input,
.select-row select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 11px;
  outline: none;
}

.search input:focus,
.select-row select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(13, 95, 122, 0.12);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.segment,
.tab {
  min-height: 34px;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 13px;
  white-space: nowrap;
}

.segment.is-active,
.tab.is-active {
  color: #ffffff;
  background: var(--focus);
  border-color: var(--focus);
}

.toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.toggles label {
  display: flex;
  align-items: center;
  min-height: 30px;
  gap: 7px;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.stat {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 9px 10px;
}

.stat strong {
  display: block;
  font-size: 20px;
  line-height: 1.1;
}

.stat span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.result-list {
  flex: 1;
  overflow: auto;
  padding: 10px 12px 18px;
}

.result-item {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 74px;
  margin: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 11px 12px;
  text-align: left;
}

.result-item:hover,
.result-item.is-selected {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(13, 95, 122, 0.09);
}

.large-route-group {
  margin-top: 18px;
}

.large-route-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.large-route-group > header h2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 20px;
}

.large-route-group .card-grid {
  margin-top: 0;
}

.macro-list-groups {
  display: grid;
  gap: 10px;
}

.macro-list-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.macro-list-group summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  cursor: pointer;
  padding: 10px 12px;
  list-style: none;
}

.macro-list-group summary::-webkit-details-marker {
  display: none;
}

.macro-list-group summary:hover {
  background: #f7faf5;
}

.macro-list-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.macro-list-title > .fa-solid {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--focus) 11%, #ffffff);
  color: var(--focus);
}

.macro-list-title span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.macro-list-title strong {
  color: var(--ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.macro-list-title small {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.macro-list-count {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 26px;
  border-radius: 999px;
  background: #eef2ec;
  color: #35413a;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
}

.macro-list-chevron {
  color: var(--muted);
  transition: transform 0.16s ease;
}

.macro-list-group[open] .macro-list-chevron {
  transform: rotate(180deg);
}

.macro-list-group > .card-grid {
  border-top: 1px solid var(--line);
  background: #fbfcfa;
  padding: 10px;
}

.item-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.item-title {
  min-width: 0;
  font-weight: 750;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: #eef2ec;
  color: #35413a;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.workspace {
  display: grid;
  grid-template-rows: minmax(380px, 58vh) minmax(320px, 42vh);
  min-width: 0;
  min-height: 100vh;
}

.map-panel,
.detail-panel {
  min-width: 0;
  background: var(--panel);
}

.map-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}

.map-head {
  position: relative;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
}

.map-head h2,
.detail-content h2,
.empty-state h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.map-head p,
.empty-state p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.map-actions {
  display: flex;
  gap: 8px;
}

.map-control-stack {
  position: relative;
  z-index: 1250;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.map-control-stack .layer-filters {
  justify-content: flex-end;
  margin: 0;
}

.base-map-control,
.layer-filters {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.base-map-control {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  padding: 3px;
  box-shadow: 0 7px 20px rgba(28, 39, 32, 0.08);
}

.base-map-control:empty,
.layer-filters:empty {
  display: none;
}

.base-map-option,
.layer-toggle,
.map-fullscreen-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  padding: 0 9px;
  white-space: nowrap;
}

.base-map-option .fa-solid,
.layer-toggle .fa-solid,
.map-fullscreen-toggle .fa-solid {
  font-size: 12px;
}

.base-map-option:hover,
.base-map-option:focus-visible,
.layer-toggle:hover,
.layer-toggle:focus-visible,
.map-fullscreen-toggle:hover,
.map-fullscreen-toggle:focus-visible {
  color: var(--ink);
}

.base-map-option.is-active,
.base-map-option[aria-pressed="true"] {
  background: var(--focus);
  color: #fff;
}

.layer-toggle {
  border: 1px solid color-mix(in srgb, var(--layer-color) 24%, var(--line));
  background: #fff;
}

.layer-toggle .fa-solid {
  color: var(--layer-color);
}

.layer-toggle.is-active,
.layer-toggle[aria-pressed="true"] {
  border-color: var(--layer-color);
  background: color-mix(in srgb, var(--layer-color) 12%, #ffffff);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--layer-color) 10%, transparent);
}

.layer-toggle.is-active .fa-solid,
.layer-toggle[aria-pressed="true"] .fa-solid {
  color: var(--layer-color);
}

.map-fullscreen-toggle {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--focus);
  box-shadow: 0 7px 20px rgba(28, 39, 32, 0.08);
}

.map-fullscreen-toggle[aria-pressed="true"] {
  border-color: var(--focus);
  background: var(--focus);
  color: #fff;
}

.layer-dropdown {
  position: relative;
  z-index: 1;
  display: inline-flex;
}

.layer-dropdown[open] {
  z-index: 1400;
}

.layer-dropdown summary {
  list-style: none;
}

.layer-dropdown summary::-webkit-details-marker {
  display: none;
}

.layer-dropdown-summary small {
  min-width: 28px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.layer-dropdown-summary.is-active small {
  color: color-mix(in srgb, var(--layer-color) 78%, var(--ink));
}

.layer-chevron {
  margin-left: 1px;
  font-size: 10px !important;
  transition: transform 0.16s ease;
}

.layer-dropdown[open] .layer-chevron {
  transform: rotate(180deg);
}

.layer-dropdown-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 1400;
  display: grid;
  width: max-content;
  min-width: 220px;
  max-width: min(340px, calc(100vw - 36px));
  max-height: min(420px, 62vh);
  overflow: auto;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 34px rgba(28, 39, 32, 0.16);
  padding: 7px;
}

.layer-subfilter {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 850;
}

.layer-subfilter span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-subfilter small {
  min-width: 24px;
  border-radius: 999px;
  background: #eef2ec;
  color: var(--muted);
  padding: 3px 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 850;
}

.layer-subfilter .fa-solid {
  color: color-mix(in srgb, var(--layer-color) 72%, var(--muted));
  text-align: center;
}

.layer-subfilter:hover,
.layer-subfilter:focus-visible {
  border-color: color-mix(in srgb, var(--layer-color) 25%, var(--line));
  color: var(--ink);
}

.layer-subfilter.is-active,
.layer-subfilter[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--layer-color) 35%, var(--line));
  background: color-mix(in srgb, var(--layer-color) 12%, #ffffff);
  color: var(--ink);
}

.layer-subfilter.is-active small,
.layer-subfilter[aria-pressed="true"] small {
  background: color-mix(in srgb, var(--layer-color) 14%, #ffffff);
  color: color-mix(in srgb, var(--layer-color) 82%, var(--ink));
}

.layer-subfilter-main {
  border-color: color-mix(in srgb, var(--layer-color) 18%, var(--line));
}

.layer-subgroup {
  display: grid;
  gap: 4px;
}

.layer-subchildren {
  display: grid;
  gap: 4px;
  padding-left: 12px;
}

.layer-subfilter-type {
  background: color-mix(in srgb, var(--layer-color) 5%, #ffffff);
}

.layer-subfilter-child {
  min-height: 30px;
  font-size: 11px;
}

.layer-empty {
  margin: 3px 6px 5px;
  color: var(--muted);
  font-size: 12px;
}

.small-btn {
  min-height: 34px;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
}

.map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: #e8eee5;
}

.map-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.map-wrap .map {
  height: 100%;
}

body.map-fullscreen-open {
  overflow: hidden;
}

.map-panel.is-map-fullscreen,
.map-panel:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--panel);
}

.map-panel.is-map-fullscreen .map-wrap,
.map-panel:fullscreen .map-wrap {
  height: 100%;
  min-height: 0;
}

.map-panel.is-map-fullscreen .map,
.map-panel:fullscreen .map {
  height: 100%;
  min-height: 0 !important;
}

.map-loading {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(246, 249, 244, 0.72);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.map-loading[hidden] {
  display: none;
}

.map-loading-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 420px);
  border: 1px solid rgba(13, 95, 122, 0.22);
  border-radius: 8px;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(24, 37, 31, 0.16);
  color: var(--ink);
  font-size: 14px;
}

.map-loading-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #d9e4df;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rutoteca-spin 0.8s linear infinite;
  flex: 0 0 auto;
}

@keyframes rutoteca-spin {
  to {
    transform: rotate(360deg);
  }
}

.leaflet-container {
  color: var(--ink);
  font: inherit;
}

.leaflet-control-attribution {
  font-size: 11px;
}

.leaflet-tooltip.rutoteca-tooltip {
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 12px;
}

.rutoteca-marker-shell {
  background: transparent;
  border: 0;
}

.rutoteca-marker {
  --marker-bg: var(--space);
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #ffffff;
  border-radius: 50% 50% 50% 14%;
  background: var(--marker-bg);
  box-shadow: 0 3px 12px rgba(23, 33, 27, 0.26);
  color: #ffffff;
  filter: saturate(1.05);
  line-height: 1;
  overflow: hidden;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  user-select: none;
}

.rutoteca-marker::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: inherit;
}

.rutoteca-marker svg,
.rutoteca-marker .fa-solid {
  position: relative;
  z-index: 1;
  transform: rotate(45deg);
}

.rutoteca-marker svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.rutoteca-marker .fa-solid {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  font-size: 15px;
}

.rutoteca-marker.marker-route {
  --marker-bg: var(--route);
  border-radius: 50% 50% 50% 14%;
}

.rutoteca-marker.marker-locality {
  --marker-bg: var(--locality);
  border-radius: 9px;
}

.rutoteca-marker.marker-province {
  --marker-bg: #b25534;
  border-radius: 7px;
}

.rutoteca-marker.marker-point-interest {
  --marker-bg: #596a2f;
  border-radius: 999px;
}

.rutoteca-marker.marker-point-water,
.rutoteca-marker.marker-point-coast {
  --marker-bg: #167fa3;
  border-radius: 50% 50% 16px 50%;
}

.rutoteca-marker.marker-point-cave {
  --marker-bg: #6b624f;
  border-radius: 8px 50% 50% 50%;
}

.rutoteca-marker.marker-point-summit,
.rutoteca-marker.marker-point-viewpoint {
  --marker-bg: #436d8f;
  border-radius: 50% 14px 50% 50%;
}

.rutoteca-marker.marker-point-culture {
  --marker-bg: #8d5f12;
  border-radius: 8px;
}

.rutoteca-marker.marker-point-recreation {
  --marker-bg: #5d7f2f;
  border-radius: 50% 50% 12px 50%;
}

.rutoteca-marker.marker-point-parking {
  --marker-bg: #40576b;
  border-radius: 7px;
}

.rutoteca-marker.marker-flora-fauna {
  --marker-bg: #3f7f45;
  border-radius: 50% 50% 12px 50%;
}

.rutoteca-marker.marker-visit-place,
.rutoteca-marker.marker-visit-info {
  --marker-bg: #0f7f92;
  border-radius: 999px;
}

.rutoteca-marker.marker-visit-beach {
  --marker-bg: #1588b2;
  border-radius: 50% 50% 16px 50%;
}

.rutoteca-marker.marker-visit-museum,
.rutoteca-marker.marker-visit-monument {
  --marker-bg: #8d5f12;
  border-radius: 8px;
}

.rutoteca-marker.marker-visit-viewpoint {
  --marker-bg: #436d8f;
  border-radius: 50% 14px 50% 50%;
}

.rutoteca-marker.marker-visit-recreation {
  --marker-bg: #5d7f2f;
  border-radius: 50% 50% 12px 50%;
}

.rutoteca-marker.marker-visit-parking {
  --marker-bg: #40576b;
  border-radius: 7px;
}

.rutoteca-marker.marker-visit-shelter {
  --marker-bg: #6d5f35;
  border-radius: 8px 8px 50% 50%;
}

.rutoteca-marker.marker-visit-hostel {
  --marker-bg: #6a4f8f;
  border-radius: 8px;
}

.rutoteca-marker.marker-visit-camping,
.rutoteca-marker.marker-visit-bivouac {
  --marker-bg: #5d7f2f;
  border-radius: 50% 50% 12px 50%;
}

.rutoteca-marker.marker-visit-caravan {
  --marker-bg: #40576b;
  border-radius: 8px;
}

.rutoteca-marker.marker-park-national {
  --marker-bg: #1d5f42;
  border-radius: 8px 50% 50% 50%;
}

.rutoteca-marker.marker-park-natural {
  --marker-bg: #2e7d4f;
}

.rutoteca-marker.marker-park-regional {
  --marker-bg: #477b2d;
  border-radius: 50% 12px 50% 50%;
}

.rutoteca-marker.marker-park-urban {
  --marker-bg: #3c7c78;
  border-radius: 10px;
}

.rutoteca-marker.marker-park-rural {
  --marker-bg: #6b7d2c;
  border-radius: 50% 50% 12px 50%;
}

.rutoteca-marker.marker-zone-interest {
  --marker-bg: var(--zone);
  border-radius: 9px;
}

.user-location-marker-shell {
  background: transparent;
  border: 0;
}

.user-location-marker {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: #0d5f7a;
  box-shadow: 0 0 0 6px rgba(13, 95, 122, 0.16), 0 4px 16px rgba(23, 33, 27, 0.28);
  color: #ffffff;
  font-size: 15px;
}

.map-legend {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 12px;
}

.map-legend div {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(23, 33, 27, 0.14);
}

.legend-dot.route {
  background: var(--route);
}

.legend-dot.space {
  background: var(--space);
}

.legend-dot.zone {
  background: var(--zone);
}

.legend-dot.locality {
  background: var(--locality);
}

.detail-panel {
  overflow: auto;
}

.empty-state {
  display: grid;
  place-content: center;
  min-height: 100%;
  padding: 30px;
  text-align: center;
}

.detail-content {
  padding: 20px;
}

.detail-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.detail-type {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.detail-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfa;
}

.detail-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.detail-box strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 16px;
}

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #334038;
  padding: 5px 8px;
  font-size: 12px;
}

.tag-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: start;
  gap: 12px;
}

#entityTags h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

#entityTags h2 .fa-solid {
  color: var(--focus);
}

.tag-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 10px;
}

.tag-group h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
}

.tag-group h3 span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tag-group h3 .fa-solid {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #edf3ee;
  color: var(--space);
  font-size: 13px;
}

.tag-group h3 small {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: #eef2ec;
  color: var(--muted);
  padding: 0 8px;
  font-size: 12px;
}

.tag-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #26332c;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}

.tag-chip:hover {
  border-color: var(--focus);
  color: var(--focus);
}

.tag-group-interes h3 .fa-solid {
  background: #fff5df;
  color: var(--zone);
}

.tag-group-tipo-entorno h3 .fa-solid {
  background: #eaf4ec;
  color: var(--space);
}

.tag-group-macrozona h3 .fa-solid,
.tag-group-microzona h3 .fa-solid,
.tag-group-provincia h3 .fa-solid {
  background: #e9f3f6;
  color: var(--focus);
}

.tag-group-tipo-entidad h3 .fa-solid {
  background: #f0edf6;
  color: var(--locality);
}

.route-details-panel {
  display: grid;
  gap: 16px;
}

.route-details-panel[hidden] {
  display: none;
}

.route-details-panel h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.route-details-panel h2 .fa-solid {
  color: var(--route);
}

.route-description {
  max-width: 92ch;
  margin: 0;
  color: #344038;
  line-height: 1.58;
}

.route-metric-grid,
.route-mide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.route-metric-card,
.route-mide-card,
.route-risk,
.route-interest-chip {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.route-metric-card {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 10px;
}

.route-metric-card .fa-solid {
  grid-row: span 2;
  color: var(--route);
  font-size: 17px;
}

.route-metric-card span,
.route-mide-card span,
.route-mide-card small,
.route-interest-chip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.route-metric-card strong {
  color: var(--ink);
  font-size: 17px;
}

.route-subsection {
  display: grid;
  gap: 10px;
}

.route-subsection-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.route-subsection-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}

.route-subsection-head h3 .fa-solid {
  color: var(--route);
}

.route-subsection-head span {
  border-radius: 999px;
  background: #eaf3f6;
  color: var(--focus);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
}

.route-mide-card {
  display: grid;
  grid-template-columns: 30px 34px 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 10px;
  border-color: color-mix(in srgb, var(--mide-color, var(--route)) 28%, var(--line));
  background: color-mix(in srgb, var(--mide-color, var(--route)) 6%, #ffffff);
}

.route-mide-card .fa-solid {
  grid-row: span 2;
  color: var(--mide-color, var(--route));
  font-size: 18px;
}

.route-mide-card strong {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mide-color, var(--route));
  color: #fff;
  font-size: 18px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mide-color, var(--route)) 16%, transparent);
}

.route-mide-card small {
  grid-column: 3;
  text-transform: none;
  color: color-mix(in srgb, var(--muted) 76%, #ffffff);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
}

.route-mide-level-1 {
  --mide-color: #268a3e;
}

.route-mide-level-2 {
  --mide-color: #2477b8;
}

.route-mide-level-3 {
  --mide-color: #d47b13;
}

.route-mide-level-4 {
  --mide-color: #c7352c;
}

.route-mide-level-5 {
  --mide-color: #111111;
}

.route-risk-list,
.route-interest-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.route-risk {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 10px;
}

.route-risk .fa-solid {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef4ef;
  color: var(--space);
}

.route-risk-medio .fa-solid {
  background: #fff4df;
  color: #99630d;
}

.route-risk-alto .fa-solid {
  background: #ffe9e0;
  color: #a34420;
}

.route-risk strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
}

.route-risk p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.route-interest-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-interest-chip {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px;
  color: var(--ink);
  text-decoration: none;
}

.route-interest-chip:hover {
  border-color: var(--focus);
}

.route-interest-chip .fa-solid {
  color: var(--focus);
  font-size: 17px;
}

.route-interest-chip strong,
.route-interest-chip small {
  display: block;
}

.route-interest-chip strong {
  line-height: 1.25;
}

.route-source {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.route-source .fa-solid {
  color: var(--focus);
}

.route-safety-panel {
  display: grid;
  gap: 14px;
}

.route-safety-panel[hidden] {
  display: none;
}

.route-safety-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

.route-safety-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
}

.route-safety-head h2 .fa-solid {
  color: #c46f18;
}

.route-safety-disclaimer,
.route-safety-emergency,
.route-safety-alerts p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.route-safety-disclaimer,
.route-safety-emergency {
  margin: 0;
}

.safety-level {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 11px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.safety-bajo {
  border-color: #b9dbc0;
  background: #edf7ef;
  color: #246f35;
}

.safety-medio {
  border-color: #f0d28c;
  background: #fff8e7;
  color: #8f5c0b;
}

.safety-alto,
.safety-extremo {
  border-color: #f1b4a5;
  background: #fff0ec;
  color: #9d3426;
}

.route-safety-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.route-safety-badges span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.route-safety-badges .fa-solid {
  color: var(--focus);
}

.route-safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px;
}

.route-safety-card {
  --safety-accent: var(--focus);
  --safety-icon-bg: #eef6f8;
  --safety-card-bg: #ffffff;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  min-height: 92px;
  border: 1px solid color-mix(in srgb, var(--safety-accent) 30%, var(--line));
  border-left: 4px solid var(--safety-accent);
  border-radius: 8px;
  background: var(--safety-card-bg);
  padding: 11px;
}

.route-safety-card > .fa-solid {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--safety-icon-bg);
  color: var(--safety-accent);
}

.route-safety-info {
  --safety-accent: #0d5f7a;
  --safety-icon-bg: #e8f4f7;
  --safety-card-bg: #fbfeff;
}

.route-safety-bajo {
  --safety-accent: #2e7d4f;
  --safety-icon-bg: #eaf4ec;
  --safety-card-bg: #fbfefb;
}

.route-safety-medio {
  --safety-accent: #c46f18;
  --safety-icon-bg: #fff1df;
  --safety-card-bg: #fffaf3;
}

.route-safety-alto {
  --safety-accent: #ad3d32;
  --safety-icon-bg: #fff0ec;
  --safety-card-bg: #fffafa;
}

.route-safety-card strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
}

.route-safety-card p,
.route-safety-alerts p {
  margin: 0;
}

.route-safety-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.route-safety-alerts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.route-safety-alert {
  --safety-accent: #c46f18;
  --safety-card-bg: #fff9ef;
  border-left: 4px solid var(--safety-accent);
  background: var(--safety-card-bg);
  padding: 9px 11px;
}

.route-safety-alerts strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 13px;
}

.route-safety-emergency {
  border-left: 3px solid var(--focus);
  background: #eef6f8;
  padding: 9px 11px;
}

.route-safety-emergency .fa-solid {
  color: var(--focus);
}

.external-links-panel h2 {
  display: flex;
  gap: 9px;
  align-items: center;
}

.external-links-panel h2 .fa-solid {
  color: var(--focus);
}

.external-link-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 10px;
}

.external-link-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 12px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.external-link-card:hover {
  border-color: var(--focus);
  box-shadow: 0 10px 24px rgba(22, 49, 38, 0.08);
  transform: translateY(-1px);
}

.external-link-card > .fa-solid {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(68, 123, 84, 0.1);
  color: var(--focus);
}

.external-link-card strong,
.external-link-card em,
.external-link-card small {
  display: block;
}

.external-link-card strong {
  line-height: 1.25;
}

.external-link-card em {
  margin-top: 3px;
  color: #4d5f55;
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}

.external-link-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.external-link-rutoteka > .fa-solid {
  background: rgba(47, 111, 159, 0.1);
  color: #2f6f9f;
}

.external-link-reliable > .fa-solid {
  background: rgba(154, 106, 22, 0.12);
  color: #9a6a16;
}

.visit-info-panel {
  display: grid;
  gap: 14px;
}

.visit-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.visit-info-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  overflow-wrap: anywhere;
}

.visit-info-card > .fa-solid {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #edf5f0;
  color: var(--focus);
}

.visit-info-card span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.visit-info-card strong {
  font-size: 14px;
}

.visit-info-card em,
.visit-info-card small,
.visit-info-note {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.visit-info-card a {
  font-weight: 800;
}

.visit-info-card a + a {
  margin-left: 8px;
}

.visit-info-note {
  margin: 0;
}

.amazon-recommendations-panel {
  display: grid;
  gap: 14px;
}

.amazon-recommendations-panel[hidden] {
  display: none;
}

.amazon-recommendations-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

.amazon-recommendations-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
}

.amazon-recommendations-head h2 .fa-solid {
  color: #9a6a16;
}

.amazon-recommendations-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.amazon-recommendations-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid #e7d7aa;
  border-radius: 999px;
  background: #fff8e7;
  padding: 0 10px;
  color: #7a540f;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.amazon-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 10px;
}

.amazon-card {
  --amazon-accent: #9a6a16;
  --amazon-soft: #fff8e7;
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  min-height: 128px;
  border: 1px solid color-mix(in srgb, var(--amazon-accent) 22%, var(--line));
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 12px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.amazon-card:hover {
  border-color: var(--amazon-accent);
  box-shadow: 0 12px 26px rgba(22, 49, 38, 0.09);
  transform: translateY(-1px);
}

.amazon-card-photo {
  display: grid;
  place-items: center;
  min-height: 102px;
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--amazon-accent) 28%, #fff), transparent 58%),
    var(--amazon-soft);
  color: var(--amazon-accent);
}

.amazon-card-photo .fa-solid {
  font-size: 32px;
}

.amazon-card-body {
  display: grid;
  gap: 4px;
  align-content: start;
}

.amazon-card-body small {
  color: var(--amazon-accent);
  font-size: 12px;
  font-weight: 900;
}

.amazon-card-body strong {
  line-height: 1.25;
}

.amazon-card-body em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.amazon-card-query {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  color: #7a540f;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
}

.amazon-card-query .fa-solid {
  font-size: 11px;
  color: var(--amazon-accent);
}

.amazon-theme-rain {
  --amazon-accent: #0d5f7a;
  --amazon-soft: #e8f4f7;
}

.amazon-theme-cold,
.amazon-theme-navigation {
  --amazon-accent: #2f6f9f;
  --amazon-soft: #edf5fb;
}

.amazon-theme-sun,
.amazon-theme-water {
  --amazon-accent: #c46f18;
  --amazon-soft: #fff1df;
}

.amazon-theme-boots,
.amazon-theme-gear,
.amazon-theme-safety {
  --amazon-accent: #2e7d4f;
  --amazon-soft: #eaf4ec;
}

.amazon-theme-culture,
.amazon-theme-book,
.amazon-theme-map,
.amazon-theme-optics {
  --amazon-accent: #7856a6;
  --amazon-soft: #f1edf8;
}

.reviews-panel h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.reviews-panel h2 .fa-solid {
  color: var(--zone);
}

.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.reviews-score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 0 12px;
}

.reviews-score strong {
  font-size: 22px;
}

.reviews-summary p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.star-row {
  display: inline-flex;
  gap: 2px;
  color: #d79a16;
}

.review-login-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 11px;
}

.review-login-prompt .fa-regular {
  color: var(--focus);
}

.review-form {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.rating-picker {
  display: inline-flex;
  width: max-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 4px;
}

.rating-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #bec7bf;
}

.rating-button.is-active {
  color: #d79a16;
}

.review-form textarea {
  min-height: 96px;
  resize: vertical;
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reviews-list {
  display: grid;
  gap: 10px;
}

.review-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.review-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.review-card p {
  margin: 8px 0;
  color: var(--ink);
  line-height: 1.45;
}

.review-card time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.route-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}

.route-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border: 1px solid var(--focus);
  border-radius: 8px;
  background: var(--focus);
  color: #ffffff;
  padding: 0 12px;
  font-weight: 800;
  text-decoration: none;
}

.route-download-btn .fa-solid {
  font-size: 15px;
}

.route-download-btn small {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}

.route-download-btn:hover {
  background: #0a4f66;
  border-color: #0a4f66;
}

.route-profile-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
}

.route-profile-head {
  display: grid;
  gap: 10px;
}

.route-profile-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}

.route-profile-head h3 .fa-solid {
  color: var(--route);
}

.route-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.route-profile-stats span {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  padding: 8px;
}

.route-profile-stats strong,
.route-profile-stats small {
  display: block;
}

.route-profile-stats strong {
  color: var(--ink);
  font-size: 14px;
}

.route-profile-stats small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.route-profile-svg {
  display: block;
  width: 100%;
  min-height: 220px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f9fbf8, #eef5f1);
}

.profile-grid line {
  stroke: rgba(101, 114, 104, 0.22);
  stroke-width: 1;
}

.profile-grid text {
  fill: var(--muted);
  font-size: 11px;
}

.profile-area {
  fill: rgba(47, 111, 159, 0.18);
}

.profile-line {
  fill: none;
  stroke: var(--route);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.relation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.relation-block {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.relation-panel-grid .relation-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.relation-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.relation-block ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.relation-block li {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.relation-block li a {
  vertical-align: middle;
}

.metro-schematic-block {
  display: grid;
  gap: 12px;
}

.metro-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.metro-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 3px 8px;
}

.metro-legend-main,
.metro-legend-branch {
  display: inline-block;
  width: 26px;
  height: 0;
  border-top: 4px solid var(--focus);
}

.metro-legend-branch {
  border-top: 2px dashed #9a6a16;
}

.metro-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px 0 12px;
  scrollbar-color: color-mix(in srgb, var(--focus) 40%, #cfd8cf) transparent;
}

.metro-line {
  display: flex;
  align-items: stretch;
  min-width: max-content;
  padding: 8px 2px 2px;
}

.metro-stage {
  position: relative;
  flex: 0 0 230px;
  min-width: 0;
  padding: 50px 8px 0;
}

.metro-rail {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--focus) 72%, #2b6f58), var(--focus));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.metro-stage:first-child .metro-rail {
  left: 50%;
  border-radius: 999px 0 0 999px;
}

.metro-stage:last-child .metro-rail {
  right: 50%;
  border-radius: 0 999px 999px 0;
}

.metro-stage.is-branch .metro-rail {
  top: 36px;
  height: 0;
  border-top: 3px dashed #9a6a16;
  background: transparent;
  box-shadow: none;
}

.metro-station-dot {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
  border: 4px solid var(--focus);
  border-radius: 999px;
  background: #fff;
  color: var(--focus);
  font-size: 11px;
  font-weight: 900;
}

.metro-stage.is-branch .metro-station-dot {
  top: 24px;
  border-color: #9a6a16;
  color: #8a5d0f;
}

.metro-node-card {
  display: grid;
  gap: 7px;
  min-height: 138px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 8px 18px rgba(24, 38, 31, 0.05);
}

.metro-stage.is-branch .metro-node-card {
  border-style: dashed;
  background: #fffdf8;
}

.metro-node-kicker {
  color: var(--focus);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.metro-node-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.metro-node-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.metro-supports,
.metro-connections {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.metro-support-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #0a6d7f;
  vertical-align: middle;
}

.metro-support-dot:hover,
.metro-support-dot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 25%, transparent);
  outline-offset: 2px;
}

.metro-support-albergue {
  background: #0a6d7f;
}

.metro-support-refugio {
  background: #447b54;
}

.metro-support-vivac,
.metro-support-camping {
  background: #9a6a16;
}

.metro-support-caravan {
  background: #6e5aa8;
}

.metro-support-apoyo {
  background: #6d7a70;
}

.metro-support-more {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7faf5;
  color: var(--muted);
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 850;
}

.metro-connections span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  border: 1px dashed rgba(10, 109, 127, 0.45);
  border-radius: 999px;
  background: #eef8fb;
  color: #075d70;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 850;
}

.metro-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.stage-reference-block {
  display: grid;
  gap: 12px;
}

.stage-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.stage-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px;
}

.stage-card-number {
  display: grid;
  place-items: center;
  min-width: 70px;
  min-height: 42px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--focus) 12%, #ffffff);
  color: var(--focus);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.stage-card-body {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.stage-card-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.stage-card-title a {
  color: inherit;
}

.stage-card-badges,
.stage-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.stage-kind,
.stage-original,
.stage-card-facts span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7faf5;
  color: var(--muted);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 750;
}

.stage-kind {
  border-color: rgba(154, 106, 22, 0.28);
  background: #fff8ea;
  color: #8a5d0f;
}

.stage-muted {
  border-color: rgba(154, 106, 22, 0.28) !important;
  background: #fff8ea !important;
  color: #8a5d0f !important;
}

.item-meta-text {
  color: var(--muted);
}

.type-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--focus);
  vertical-align: middle;
}

.type-icon .fa-solid {
  font-size: 12px;
  line-height: 1;
}

.type-icon-point {
  background: rgba(68, 123, 84, 0.08);
}

.notice {
  border: 1px solid #f0d5a4;
  border-radius: 8px;
  background: #fff8e8;
  color: #6b4c18;
  padding: 10px 12px;
  font-size: 13px;
}

.inline-link {
  border: 0;
  background: transparent;
  color: var(--focus);
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .workspace {
    grid-template-rows: 460px auto;
    min-height: auto;
  }

  .result-list {
    max-height: 420px;
  }
}

@media (max-width: 1100px) {
  .relation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .brand,
  .toolbar,
  .tabs,
  .stats-grid,
  .map-head,
  .detail-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tabs,
  .stats-grid,
  .detail-grid,
  .relation-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .map-head,
  .detail-top {
    grid-template-columns: 1fr;
    display: grid;
  }
}

.site-header {
  display: grid;
  grid-template-columns: auto minmax(260px, 540px) auto;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 800;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 252, 250, 0.96);
  padding: 8px 22px;
  backdrop-filter: blur(10px);
}

.site-header,
.site-nav,
.site-menu,
.card-grid,
.filters-grid,
.detail-grid,
.relation-grid {
  min-width: 0;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}

.site-brand-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
  overflow: hidden;
}

.site-brand-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-nav a,
.breadcrumb a,
.relation-block a,
.result-item,
.link-card,
.chip-link {
  color: inherit;
  text-decoration: none;
}

.site-menu-wrap {
  position: relative;
  z-index: 1500;
  justify-self: end;
}

.menu-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 17px;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
  border-color: var(--focus);
  color: var(--focus);
  box-shadow: 0 0 0 3px rgba(13, 95, 122, 0.1);
}

.site-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1500;
  width: min(320px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(22, 49, 38, 0.14);
  padding: 8px;
}

.site-menu[hidden] {
  display: none;
}

.site-nav {
  display: grid;
  gap: 4px;
}

.site-nav a,
.site-menu-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  padding: 10px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  text-align: left;
}

.site-nav a:hover,
.site-menu-action:hover {
  background: #eef2ec;
  color: var(--focus);
}

.site-nav a .fa-solid,
.site-menu-action .fa-solid {
  width: 18px;
  color: var(--focus);
  text-align: center;
}

.site-menu-section {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.site-menu-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.site-menu-section h2 .fa-solid {
  color: var(--focus);
}

.site-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.site-menu-grid a,
.site-menu-wide-link {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 8px 9px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.site-menu-wide-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.site-menu-grid a:hover,
.site-menu-wide-link:hover {
  border-color: var(--focus);
  color: var(--focus);
  background: #eef2ec;
}

.site-search {
  display: flex;
  min-width: 0;
}

.site-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px 0 0 7px;
  padding: 0 10px;
  min-width: 0;
}

.site-search button {
  min-height: 38px;
  border: 1px solid var(--focus);
  border-radius: 0 7px 7px 0;
  background: var(--focus);
  color: #fff;
  padding: 0 12px;
}

.auth-area {
  display: flex;
  justify-content: stretch;
  min-width: 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.auth-button,
.auth-user-menu,
.primary-action,
.secondary-action,
.ghost-action {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0 11px;
  white-space: nowrap;
}

.auth-button .fa-regular {
  color: var(--focus);
}

.auth-user-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: none;
  padding: 0 6px 0 11px;
}

.auth-user-menu[hidden] {
  display: none;
}

.auth-user-menu span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.auth-user-menu button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.auth-user-menu button:hover {
  background: #eef2ec;
  color: var(--focus);
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  background: rgba(23, 33, 27, 0.42);
  padding: 18px;
}

.auth-modal[hidden] {
  display: none;
}

.auth-dialog {
  position: relative;
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 20px;
}

.auth-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.auth-dialog h2 {
  margin: 0 44px 14px 0;
  font-size: 22px;
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.auth-mode-tabs button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.auth-mode-tabs button.is-active {
  border-color: var(--focus);
  background: var(--focus);
  color: #fff;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-form input,
.review-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 10px 11px;
  outline: none;
}

.auth-form input {
  min-height: 40px;
}

.auth-message,
.review-message {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.auth-message.is-error,
.review-message.is-error {
  color: var(--danger);
}

.primary-action {
  border-color: var(--focus);
  background: var(--focus);
  color: #fff;
  padding: 0 13px;
}

.secondary-action {
  background: #fff;
  color: var(--ink);
  padding: 0 13px;
}

.secondary-action:hover,
.ghost-action:hover {
  border-color: var(--focus);
  color: var(--focus);
}

.ghost-action {
  padding: 0 12px;
}

.cookie-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 1600;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(23, 33, 27, 0.22);
  padding: 16px;
}

.cookie-banner[hidden],
.cookie-modal[hidden] {
  display: none;
}

.cookie-banner strong,
.cookie-dialog h2 {
  display: block;
  margin: 0 0 6px;
}

.cookie-banner p,
.cookie-dialog p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.cookie-banner-actions,
.cookie-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1650;
  display: grid;
  place-items: center;
  background: rgba(23, 33, 27, 0.44);
  padding: 18px;
}

.cookie-dialog {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(640px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 20px;
}

.cookie-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.cookie-dialog h2 {
  margin-right: 42px;
  font-size: 22px;
}

.cookie-choice-list {
  display: grid;
  gap: 8px;
}

.cookie-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
}

.cookie-choice strong,
.cookie-choice small {
  display: block;
}

.cookie-choice small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.cookie-choice em {
  border-radius: 999px;
  background: #eaf4ec;
  color: var(--space);
  padding: 5px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.cookie-choice input {
  width: 22px;
  height: 22px;
  accent-color: var(--focus);
}

.cookie-policy-link a {
  color: var(--focus);
  font-weight: 800;
}

.legal-content {
  display: grid;
  gap: 10px;
  line-height: 1.6;
}

.legal-content h2 {
  margin: 10px 0 0;
}

.about-content {
  display: grid;
  gap: 14px;
  line-height: 1.6;
}

.about-content h2 {
  margin: 12px 0 0;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 8px;
}

.about-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.about-grid i {
  color: var(--focus);
  font-size: 22px;
}

.about-grid h3 {
  margin: 10px 0 6px;
  font-size: 17px;
}

.about-grid p {
  margin: 0;
  color: var(--muted);
}

.about-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.aemet-risk-panel {
  display: grid;
  gap: 12px;
}

.aemet-risk-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.aemet-risk-head h2,
.aemet-risk-head p {
  margin: 0;
}

.aemet-risk-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 23px;
}

.aemet-risk-head h2 .fa-solid {
  color: #a66d00;
}

.aemet-risk-head p,
.aemet-risk-notice,
.aemet-risk-note,
.aemet-risk-source {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.aemet-risk-notice {
  margin: 0;
  border-left: 3px solid var(--focus);
  background: #eef6f8;
  padding: 9px 11px;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.aemet-loading {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.aemet-loading span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--focus);
  opacity: 0.35;
  animation: aemet-loading-pulse 1s infinite ease-in-out;
}

.aemet-loading span:nth-child(2) {
  animation-delay: 0.16s;
}

.aemet-loading span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes aemet-loading-pulse {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.35;
  }
  40% {
    transform: scale(1);
    opacity: 0.9;
  }
}

.risk-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: #f7f8f4;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.risk-extremo {
  border-color: #831f1f;
  background: #831f1f;
  color: #fff;
}

.risk-alto {
  border-color: #b34528;
  background: #ffe6dc;
  color: #6c1f12;
}

.risk-medio {
  border-color: #c58a19;
  background: #fff4cf;
  color: #624300;
}

.risk-bajo {
  border-color: #8aa23a;
  background: #eef6d9;
  color: #3f4d13;
}

.risk-sin_riesgo {
  border-color: #7fb28c;
  background: #e7f5eb;
  color: #245333;
}

.aemet-risk-overview,
.aemet-risk-summary {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.3fr) minmax(220px, 0.9fr);
  gap: 10px;
}

.aemet-risk-card,
.aemet-risk-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 13px;
}

.aemet-risk-card span,
.aemet-risk-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.aemet-risk-card strong,
.aemet-risk-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.aemet-risk-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.aemet-risk-card-main {
  border-left-width: 4px;
}

.risk-chip-list,
.risk-day-alerts,
.risk-day-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.risk-chip,
.risk-day-alerts span,
.risk-day-evidence span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.risk-chip-list-compact {
  margin-top: 8px;
}

.risk-chip .fa-solid,
.risk-day-alerts .fa-solid,
.risk-day-evidence .fa-solid {
  color: var(--focus);
}

.risk-chip small {
  color: var(--muted);
}

.risk-day-evidence span {
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.aemet-risk-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px;
}

.risk-day {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  overflow-wrap: anywhere;
}

.risk-day-sin_riesgo,
.risk-day-bajo {
  border-color: #7fb28c;
  background: #edf8f0;
}

.risk-day-medio {
  border-color: #3c82b6;
  background: #edf6fc;
}

.risk-day-alto {
  border-color: #d17b1d;
  background: #fff3e4;
}

.risk-day-extremo {
  border-color: #bd3328;
  background: #fff0ef;
}

.risk-day-weekend {
  border-width: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.risk-day-title,
.risk-day-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.risk-day-metrics {
  align-items: flex-start;
  flex-direction: column;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.risk-day p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.risk-day-alert-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: center;
  line-height: 1.3;
}

.risk-day-alert-line span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-weight: 850;
}

.risk-day-alert-line .fa-solid {
  color: var(--focus);
}

.risk-day-alert-line small {
  color: var(--muted);
  font-weight: 900;
}

.aemet-risk-source .fa-solid {
  color: var(--focus);
}

.risk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.risk-result-card {
  display: grid;
  gap: 10px;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  padding: 13px;
  text-decoration: none;
}

.risk-result-card:hover {
  border-color: var(--focus);
}

.page-shell {
  display: grid;
  gap: 18px;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 18px 22px 34px;
}

.home-map-shell {
  min-width: 0;
  min-height: 0;
}

.home-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.home-map .map {
  height: 100%;
  min-height: 0;
}

.home-map-controls {
  position: absolute;
  top: 14px;
  left: 58px;
  right: 14px;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.home-map-controls #statusText,
.home-map-controls .map-control-stack,
.home-map-controls .layer-filters {
  pointer-events: auto;
}

.home-map-controls #statusText {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
}

.home-map-controls .map-control-stack,
.home-map-controls .layer-filters {
  margin: 0;
  justify-content: flex-end;
}

.home-route-recommendation {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 520;
  width: min(560px, calc(100% - 36px));
  transform: translateX(-50%);
  pointer-events: none;
}

.home-route-bubble {
  pointer-events: auto;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(13, 95, 122, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 42px rgba(23, 33, 27, 0.2);
  color: var(--ink);
  padding: 12px 14px;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.home-route-bubble:hover {
  border-color: var(--focus);
}

.home-route-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--focus);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-route-bubble strong {
  font-size: 17px;
  line-height: 1.2;
}

.home-route-bubble em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--focus);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.home-route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-route-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7faf5;
  color: var(--muted);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}

.home-route-meta i,
.home-route-bubble em i {
  color: var(--focus);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.18fr);
  gap: 18px;
  align-items: stretch;
}

.hero-copy,
.panel,
.entity-hero {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-copy,
.entity-hero {
  padding: 24px;
}

.hero-copy h1,
.entity-hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: 0;
}

.hero-copy p,
.entity-hero p,
.muted {
  color: var(--muted);
}

.hero-copy p,
.entity-hero p {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.entity-title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}

.entity-title-meta[hidden] {
  display: none;
}

.entity-title-meta p,
.entity-type-label {
  margin: 0;
}

.entity-type-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.page-map {
  min-height: 580px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.page-map.compact-map {
  min-height: 440px;
}

.page-map .map {
  min-height: 480px;
}

.entity-page-map {
  min-height: 560px;
}

.entity-page-map .map {
  min-height: 480px;
}

.compact-map .map {
  min-height: 360px;
}

body[data-page="home"] .home-map {
  display: block;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

body[data-page="home"] .home-map .map {
  height: 100%;
  min-height: 0;
}

.panel {
  padding: 18px;
}

.panel h2,
.home-section h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

.collapsible-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.collapsible-section-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.collapsible-section-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #eaf1f8;
  color: var(--focus);
  font-size: 13px;
}

.collapse-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  line-height: 1;
}

.collapse-toggle:hover,
.collapse-toggle:focus-visible {
  border-color: var(--focus);
  color: var(--focus);
}

.collapsible-section.is-collapsed {
  padding-bottom: 14px;
}

.collapsible-section-body[hidden] {
  display: none;
}

.seo-static p {
  color: var(--muted);
  line-height: 1.55;
}

.seo-static[hidden] {
  display: none;
}

.panel-grid,
.content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.content-grid {
  align-items: start;
}

.wide-panel {
  grid-column: span 2;
}

.full-panel {
  grid-column: 1 / -1;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 10px;
}

.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.link-card,
.chip-link {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  font-weight: 700;
}

.link-card:hover,
.chip-link:hover,
.site-nav a:hover,
.relation-block a:hover {
  border-color: var(--focus);
  color: var(--focus);
}

.chip-link span {
  float: right;
  color: var(--muted);
  font-weight: 600;
}

.weather-layout.weather-layout-focused {
  grid-template-columns: 1fr;
}

.weather-page-shell {
  gap: 18px;
}

.weather-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  align-items: end;
  gap: 18px;
}

.weather-hero-copy {
  min-width: 0;
}

.weather-hero-compact {
  grid-template-columns: 1fr;
  padding-bottom: 14px;
}

.weather-controls-card {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
}

.weather-controls-card label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 9px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.weather-controls-card label i {
  color: var(--focus);
}

.weather-controls-card label select {
  grid-column: 1 / -1;
}

.weather-map-panel.compact-map .map {
  min-height: 560px;
}

.weather-results-stack {
  grid-template-columns: 1fr;
}

.weather-section-head {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.weather-section-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.weather-section-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.weather-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.weather-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbf7;
  padding: 12px;
}

.weather-stat i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #e6f3ea;
  color: var(--space);
}

.weather-stat strong {
  font-size: 22px;
  line-height: 1;
}

.weather-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.weather-origin-grid,
.weather-macro-list,
.weather-route-list {
  display: grid;
  gap: 8px;
}

.weather-origin-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.weather-macro-list {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.weather-origin-card,
.weather-macro-card,
.weather-route-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 11px 12px;
  color: var(--ink);
  text-decoration: none;
}

.weather-origin-card:hover,
.weather-macro-card:hover,
.weather-route-card:hover,
.weather-recommendation-card:hover {
  border-color: var(--focus);
  color: var(--focus);
}

.weather-origin-card span,
.weather-macro-card span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 850;
}

.weather-origin-card small,
.weather-macro-card small,
.weather-route-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.weather-recommendation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 10px;
}

.weather-recommendation-card {
  display: grid;
  gap: 9px;
}

.weather-card-main,
.weather-info-alerts,
.weather-route-card small {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.weather-card-main span,
.weather-info-alerts span,
.weather-route-card small em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fbf7;
  padding: 5px 8px;
  color: #385047;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.weather-recommendation-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.weather-recommendation-card .meta {
  align-items: center;
}

.weather-recommendation-card .meta .fa-solid,
.weather-recommendation-card .meta .fa-regular {
  color: var(--focus);
  margin-right: 4px;
}

.weather-route-card strong {
  line-height: 1.25;
}

.weather-alert-panel .risk-card-grid {
  grid-template-columns: 1fr;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
}

.search-core-filters {
  grid-template-columns: minmax(220px, 2fr) minmax(180px, 1fr);
  margin-bottom: 14px;
}

.filters-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.filters-grid input,
.filters-grid select,
.list-controls input,
.list-controls select,
.weather-controls select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  min-width: 0;
}

.filters-grid .check-row {
  display: flex;
  align-items: center;
  min-height: 38px;
  gap: 7px;
  text-transform: none;
}

.advanced-tag-groups {
  display: grid;
  gap: 12px;
}

.advanced-tag-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
}

.advanced-tag-group h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 14px;
}

.advanced-tag-group h2 span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.advanced-tag-group h2 .advanced-tag-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #edf3ee;
  color: var(--focus);
  font-size: 13px;
}

.advanced-tag-group h2 small {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: #eef2ec;
  color: var(--muted);
  padding: 0 8px;
  font-size: 12px;
}

.advanced-tag-heading-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  margin-left: auto;
}

.advanced-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #26332c;
  padding: 0 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

.tag-toggle small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.tag-toggle:hover {
  border-color: var(--focus);
  color: var(--focus);
}

.tag-toggle.is-active,
.tag-toggle[aria-pressed="true"] {
  border-color: var(--focus);
  background: var(--focus);
  color: #ffffff;
}

.tag-toggle.is-active small,
.tag-toggle[aria-pressed="true"] small {
  color: rgba(255, 255, 255, 0.82);
}

.advanced-tag-group-tipo-entidad h2 .advanced-tag-icon {
  background: #f0edf6;
  color: var(--locality);
}

.advanced-tag-group-asset h2 .advanced-tag-icon,
.advanced-tag-group-tipo-ruta h2 .advanced-tag-icon,
.advanced-tag-group-distancia h2 .advanced-tag-icon,
.advanced-tag-group-dificultad-ibp h2 .advanced-tag-icon,
.advanced-tag-group-circularidad h2 .advanced-tag-icon {
  background: #eaf1f8;
  color: var(--route);
}

.advanced-tag-group-tipo-entorno h2 .advanced-tag-icon,
.advanced-tag-group-tipo-espacio h2 .advanced-tag-icon,
.advanced-tag-group-tipo-lugar h2 .advanced-tag-icon {
  background: #eaf4ec;
  color: var(--space);
}

.advanced-tag-group-interes h2 .advanced-tag-icon {
  background: #fff5df;
  color: var(--zone);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.entity-layout {
  display: block;
  min-width: 0;
}

.list-controls,
.weather-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.weather-controls.weather-controls-card {
  display: grid;
}

.list-controls > *,
.weather-controls > * {
  flex: 1 1 220px;
}

.weather-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (max-width: 1050px) {
  .hero-grid,
  .entity-layout,
  .weather-hero,
  .weather-layout {
    grid-template-columns: 1fr;
  }

  .weather-stat-strip {
    grid-template-columns: 1fr;
  }

  .panel-grid,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .wide-panel {
    grid-column: auto;
  }

  .filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-metric-grid,
  .route-mide-grid,
  .route-interest-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-risk-list {
    grid-template-columns: 1fr;
  }

  .route-safety-alerts {
    grid-template-columns: 1fr;
  }

  .aemet-risk-overview,
  .aemet-risk-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entity-layout .page-map {
    position: static;
  }
}

@media (max-width: 640px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding-top: 6px;
    padding-bottom: 7px;
  }

  .site-header,
  .page-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .site-brand {
    gap: 7px;
    font-size: 15px;
  }

  .site-brand-icon {
    width: 28px;
    height: 28px;
    border-radius: 5px;
  }

  .menu-toggle {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .site-search input,
  .site-search button {
    min-height: 34px;
    font-size: 14px;
  }

  .site-search input {
    padding: 0 9px;
  }

  .site-search button {
    padding: 0 10px;
  }

  .hero-copy h1,
  .entity-hero h1 {
    font-size: 28px;
  }

  .hero-copy,
  .entity-hero,
  .panel {
    padding: 14px;
  }

  .page-map,
  .page-map.compact-map {
    min-height: 360px;
  }

  .page-map .map,
  .compact-map .map {
    min-height: 300px;
  }

  .weather-map-panel.compact-map .map {
    min-height: 340px;
  }

  .weather-origin-grid {
    grid-template-columns: 1fr;
  }

  .weather-card-main span,
  .weather-info-alerts span,
  .weather-route-card small em {
    font-size: 11px;
  }

  .cookie-banner {
    grid-template-columns: 1fr;
    right: 10px;
    bottom: 10px;
    left: 10px;
    padding: 14px;
  }

  .cookie-banner-actions,
  .cookie-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cookie-choice {
    grid-template-columns: 1fr auto;
  }

  .map-head {
    gap: 8px;
  }

  .map-control-stack {
    justify-content: flex-start;
  }

  .site-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .site-menu-wrap {
    grid-column: 3;
    grid-row: 1;
  }

  .site-brand {
    grid-column: 1 / 3;
    min-width: 0;
  }

  .home-map-controls {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    top: 8px;
    left: 48px;
    right: 8px;
    max-width: calc(100vw - 56px);
  }

  .home-map-controls #statusText {
    max-width: calc(100vw - 72px);
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.25;
  }

  .home-map-controls .map-control-stack,
  .home-map-controls .layer-filters {
    gap: 5px;
    justify-content: flex-start;
  }

  .home-map-controls .base-map-control {
    padding: 2px;
  }

  .home-map-controls .base-map-option,
  .home-map-controls .layer-toggle,
  .home-map-controls .map-fullscreen-toggle {
    min-height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }

  .home-map-controls .layer-dropdown-menu,
  .map-control-stack .layer-dropdown-menu {
    right: auto;
    left: 0;
    min-width: 205px;
    max-width: calc(100vw - 24px);
  }

  .layer-subfilter {
    min-height: 32px;
    font-size: 11px;
  }

  .home-route-recommendation {
    bottom: 10px;
    width: calc(100% - 20px);
  }

  .home-route-bubble {
    gap: 6px;
    padding: 10px;
  }

  .home-route-bubble strong {
    font-size: 15px;
  }

  .home-route-meta {
    gap: 5px;
  }

  .home-route-meta span {
    min-height: 22px;
    padding: 2px 7px;
    font-size: 11px;
  }

  .filters-grid {
    grid-template-columns: 1fr;
  }

  .route-metric-grid,
  .route-mide-grid,
  .route-interest-list,
  .route-risk-list,
  .route-safety-alerts,
  .stage-card-list {
    grid-template-columns: 1fr;
  }

  .metro-stage {
    flex-basis: 210px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .metro-node-card {
    min-height: 132px;
    padding: 9px;
  }

  .route-safety-head {
    grid-template-columns: 1fr;
  }

  .route-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aemet-risk-head,
  .risk-day-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .aemet-risk-overview,
  .aemet-risk-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .aemet-risk-days {
    grid-template-columns: 1fr;
  }

  .risk-day {
    min-height: 0;
  }

  .amazon-recommendations-head,
  .route-safety-head {
    grid-template-columns: 1fr;
  }

  .amazon-recommendations-head > span,
  .safety-level {
    justify-self: start;
  }
}

@media (max-width: 380px) {
  .home-map-controls .base-map-option span,
  .home-map-controls .layer-toggle span {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .map-head h2,
  .detail-content h2,
  .empty-state h2 {
    font-size: 18px;
  }
}